```update Enh

update Implement standardized documentation for all database modules, including purpose, rules, and requirements for each CRUD operation; refactor existing comments to follow new documentation standard
```

001_documentation/Requirements/REQ0021/index.md

@@ -0,0 +1,44 @@
+---
+tags: docker
+---
+
+# description
+
+docker and public endpoint
+
+## strategy
+
+```mermaid
+graph LR
+  A["next build"]
+  B["docker build"]
+  A --> B --> deploy --> run
+```
+
+1. build on develop machine
+1. docker build on develop machine (include source code)
+1. push image to production machine
+1. run image to production machine
+
+## endpoint table
+
+| function | address                                                                      |      | status                                               |
+| -------- | ---------------------------------------------------------------------------- | ---- | ---------------------------------------------------- |
+| DB       | [https://demo_ls_db.louislabs.com](https://demo_ls_db.louislabs.com)         | 3013 | ![](https://status.iamon99.com/api/badge/108/uptime) |
+| cms      | [https://demo_ls_cms.louislabs.com](https://demo_ls_cms.louislabs.com)       | 3011 | ![](https://status.iamon99.com/api/badge/109/uptime) |
+| mobile   | [https://demo_ls_mobile.louislabs.com](https://demo_ls_mobile.louislabs.com) | 3012 | ![](https://status.iamon99.com/api/badge/110/uptime) |
+| T.B.A.   | T.B.A.                                                                       | 3014 |                                                      |
+| T.B.A.   | T.B.A.                                                                       | 3015 |                                                      |
+| T.B.A.   | T.B.A.                                                                       | 3016 |                                                      |
+| T.B.A.   | T.B.A.                                                                       | 3017 |                                                      |
+| T.B.A.   | T.B.A.                                                                       | 3018 |                                                      |
+| T.B.A.   | T.B.A.                                                                       | 3019 |                                                      |
+| T.B.A.   | T.B.A.                                                                       | 3010 |                                                      |
+
+## status panel
+
+[https://status.iamon99.com/status/demo-ls](https://status.iamon99.com/status/demo-ls)
+
+## TODO
+
+pending separated ssl certificate, currently using shared affine.louislabs.com

001_documentation/Requirements/index.md

@@ -22,3 +22,4 @@
 - [REQ0018: family photo of frameworks](./REQ0018/index.md)
 - [REQ0019: System architecture](./REQ0019/index.md)
 - [REQ0020: Mobile login flow](./REQ0020/index.md)
+- [REQ0021: description](./REQ0021/index.md)

002_source/.gitignore

@@ -2,3 +2,5 @@
 **/*.log
 **/_archive
 **/_del
+
+**/*copy*

002_source/cms/.dockerignore

@@ -0,0 +1,40 @@
+# Ignore all files and directories by default
+
+-
+
+# Except for the following:
+
+!.dockerignore
+!.gitignore
+!.env.example
+!.git/
+!.env
+!.vscode/
+!.idea/
+
+# Node.js specific
+
+node_modules/
+
+# Build artifacts
+
+dist/
+build/
+
+# Logs
+
+logs/
+\*.log
+
+# Environment files
+
+.env\*
+
+# Cache files
+
+\*.cache
+
+# OS generated files
+
+.DS_Store
+Thumbs.db

002_source/cms/.eslintrc.js

@@ -82,7 +82,14 @@ module.exports = {
     'eslintreact/jsx-sort-props': 'off',
     'react/jsx-sort-props': 'off',
   },
-  ignorePatterns: ['**/*del', '**/*bak', '**/*copy.*', '**/*copy*.*'],
+  ignorePatterns: [
+    '**/*.del',
+    '**/*.bak',
+    '**/*copy.*',
+    '**/*copy*.*',
+    '**/*draft*/**',
+    //
+  ],
   overrides: [
     {
       // override to ignore no-def for `describe`, `it`, and `expect`

002_source/cms/.gitignore

@@ -3,6 +3,8 @@
 **/*log
 **/*tmp
 
+.pnpm-store
+
 .env
 .env.production
 

002_source/cms/Dockerfile

@@ -0,0 +1,17 @@
+# Use official Node 18 base image
+FROM node:22-slim
+
+# Install pnpm globally
+RUN npm install -g pnpm
+
+# Copy your application code (optional, comment out if not needed)
+COPY . /app
+
+RUN cd /app && pnpm i
+RUN cd /app && pnpm run build
+
+# Set working directory
+WORKDIR /app
+
+# Default command (optional)
+CMD ["./scripts/docker/entrypoint.sh"]

002_source/cms/package.json

@@ -10,7 +10,10 @@
     "dev": "next dev -H 0.0.0.0",
     "build": "next build",
     "build:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 15 --exec \"pnpm run build\"",
-    "start": "next start",
+    "docker:push": "docker push 192.168.10.61:5000/demo_ls_cms ",
+    "docker:build": "docker build -t 192.168.10.61:5000/demo_ls_cms .",
+    "build:docker": "pnpm run build && pnpm run docker:build && pnpm run docker:push",
+    "start": "next start -H 0.0.0.0",
     "lint": "next lint --quiet",
     "lint:fix": "next lint --fix",
     "lint:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 5 --exec \"pnpm run lint\"",

002_source/cms/scripts/003_build_w.sh

@@ -3,5 +3,11 @@
 set -ex
 
 reset
-rm -rf .next
+
+# rm -rf .next
+
+# pnpm run typecheck
+# pnpm run lint
+
+# echo "check ok"
 pnpm run build

002_source/cms/scripts/docker/entrypoint.sh

@@ -1,15 +1,19 @@
 #!/usr/bin/env bash
 
-# set -x
+set -x
 
-# nvm use 20
-nvm alias default 18
-nvm use default
-node -v
+while true; do
+  pnpm run start
 
-npm i -D
+  echo "command restarted"
 
-npm run dev
+  sleep 5
+
+done
+
+# pnpm i -D
+
+# pnpm run start
 
 # while true; do
 #     if [ "$NODE_ENV" = "development" ]; then

002_source/cms/src/.vscode/settings.json

@@ -1,3 +1,10 @@
 {
-  "git.ignoreLimitWarning": true
-}
+  "git.ignoreLimitWarning": true,
+  "todo-tree.filtering.excludeGlobs": [
+    "**/node_modules/*/**",
+    "**/*.bundle.*",
+    "**/.next/*/**",
+    "**/dist/*/**",
+    "**/build/*/**",
+  ],
+}

002_source/cms/src/__tests__/app/_helloworld/page.test.tsx

@@ -1,21 +0,0 @@
-/// <reference types="jest" />
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import Page from '@/app/_helloworld/page';
-
-// Mock the translation hook
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-describe('Page', () => {
-  it('renders a heading', () => {
-    render(<Page hello={'world'} />);
-
-    const heading = screen.getByRole('heading', { level: 1 });
-
-    expect(heading).toBeInTheDocument();
-  });
-});

002_source/cms/src/__tests__/snapshot.js

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/react';
-
-// CUT = Component Under Test
-import CUT from '../components/_helloworld';
-
-it('renders homepage unchanged', () => {
-  const { container } = render(<CUT />);
-  expect(container).toMatchSnapshot();
-});

002_source/cms/src/app/dashboard/connectives/lesson-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 

002_source/cms/src/app/dashboard/connectives/view/[cat_id]/page.tsx

@@ -28,12 +28,13 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
-import { RecordModel } from 'pocketbase';
+import type { RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';
 import { logger } from '@/lib/default-logger';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { pb } from '@/lib/pb';
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
@@ -45,7 +46,7 @@ import { Notifications } from '@/components/dashboard/lesson_category/notificati
 import { Payments } from '@/components/dashboard/lesson_category/payments';
 import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
 import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 import FormLoading from '@/components/loading';
 
@@ -119,39 +120,72 @@ export default function Page(): React.JSX.Element {
               {t('dashboard.lessonCategorys.list.title')}
             </Link>
           </div>
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
-            <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{ alignItems: 'center', flex: '1 1 auto' }}
+            >
               <Avatar
-                src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
+                src={getImageUrlFromFile(
+                  showLessonCategory.collectionId,
+                  showLessonCategory.id,
+                  showLessonCategory.cat_image
+                )}
                 sx={{ '--Avatar-size': '64px' }}
                 variant="rounded"
               >
                 empty
               </Avatar>
               <div>
-                <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+                <Stack
+                  direction="row"
+                  spacing={2}
+                  sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+                >
                   <Typography variant="h4">{showLessonCategory.name}</Typography>
                   <Chip
-                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
+                    icon={
+                      <CheckCircleIcon
+                        color="var(--mui-palette-success-main)"
+                        weight="fill"
+                      />
+                    }
                     label={showLessonCategory.visible}
                     size="small"
                     variant="outlined"
                   />
                 </Stack>
-                <Typography color="text.secondary" variant="body1">
+                <Typography
+                  color="text.secondary"
+                  variant="body1"
+                >
                   {showLessonCategory.id}
                 </Typography>
               </div>
             </Stack>
             <div>
-              <Button endIcon={<CaretDownIcon />} variant="contained">
+              <Button
+                endIcon={<CaretDownIcon />}
+                variant="contained"
+              >
                 Action
               </Button>
             </div>
           </Stack>
         </Stack>
-        <Grid container spacing={4}>
-          <Grid lg={4} xs={12}>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
             <Stack spacing={4}>
               <Card>
                 <CardHeader
@@ -178,7 +212,16 @@ export default function Page(): React.JSX.Element {
                 >
                   {(
                     [
-                      { key: 'Customer ID', value: <Chip label={showLessonCategory.id} size="small" variant="soft" /> },
+                      {
+                        key: 'Customer ID',
+                        value: (
+                          <Chip
+                            label={showLessonCategory.id}
+                            size="small"
+                            variant="soft"
+                          />
+                        ),
+                      },
                       { key: 'Name', value: showLessonCategory.name },
                       { key: 'Pos', value: showLessonCategory.pos },
                       {
@@ -195,9 +238,20 @@ export default function Page(): React.JSX.Element {
                       {
                         key: 'Quota',
                         value: (
-                          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
-                            <LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
-                            <Typography color="text.secondary" variant="body2">
+                          <Stack
+                            direction="row"
+                            spacing={2}
+                            sx={{ alignItems: 'center' }}
+                          >
+                            <LinearProgress
+                              sx={{ flex: '1 1 auto' }}
+                              value={50}
+                              variant="determinate"
+                            />
+                            <Typography
+                              color="text.secondary"
+                              variant="body2"
+                            >
                               50%
                             </Typography>
                           </Stack>
@@ -206,7 +260,11 @@ export default function Page(): React.JSX.Element {
                     ] satisfies { key: string; value: React.ReactNode }[]
                   ).map(
                     (item): React.JSX.Element => (
-                      <PropertyItem key={item.key} name={item.key} value={item.value} />
+                      <PropertyItem
+                        key={item.key}
+                        name={item.key}
+                        value={item.value}
+                      />
                     )
                   )}
                 </PropertyList>
@@ -223,11 +281,17 @@ export default function Page(): React.JSX.Element {
                 <CardContent>
                   <Stack spacing={1}>
                     <div>
-                      <Button color="error" variant="contained">
+                      <Button
+                        color="error"
+                        variant="contained"
+                      >
                         Delete account
                       </Button>
                     </div>
-                    <Typography color="text.secondary" variant="body2">
+                    <Typography
+                      color="text.secondary"
+                      variant="body2"
+                    >
                       A deleted lesson category cannot be restored. All data will be permanently removed.
                     </Typography>
                   </Stack>
@@ -235,7 +299,10 @@ export default function Page(): React.JSX.Element {
               </Card>
             </Stack>
           </Grid>
-          <Grid lg={8} xs={12}>
+          <Grid
+            lg={8}
+            xs={12}
+          >
             <Stack spacing={4}>
               <Payments
                 ordersValue={2069.48}
@@ -282,7 +349,10 @@ export default function Page(): React.JSX.Element {
               <Card>
                 <CardHeader
                   action={
-                    <Button color="secondary" startIcon={<PencilSimpleIcon />}>
+                    <Button
+                      color="secondary"
+                      startIcon={<PencilSimpleIcon />}
+                    >
                       Edit
                     </Button>
                   }
@@ -294,8 +364,14 @@ export default function Page(): React.JSX.Element {
                   title={t('billing-details', { ns: 'lesson_category' })}
                 />
                 <CardContent>
-                  <Card sx={{ borderRadius: 1 }} variant="outlined">
-                    <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
+                  <Card
+                    sx={{ borderRadius: 1 }}
+                    variant="outlined"
+                  >
+                    <PropertyList
+                      divider={<Divider />}
+                      sx={{ '--PropertyItem-padding': '16px' }}
+                    >
                       {(
                         [
                           { key: 'Credit card', value: '**** 4142' },
@@ -307,7 +383,11 @@ export default function Page(): React.JSX.Element {
                         ] satisfies { key: string; value: React.ReactNode }[]
                       ).map(
                         (item): React.JSX.Element => (
-                          <PropertyItem key={item.key} name={item.key} value={item.value} />
+                          <PropertyItem
+                            key={item.key}
+                            name={item.key}
+                            value={item.value}
+                          />
                         )
                       )}
                     </PropertyList>
@@ -317,7 +397,10 @@ export default function Page(): React.JSX.Element {
               <Card>
                 <CardHeader
                   action={
-                    <Button color="secondary" startIcon={<PlusIcon />}>
+                    <Button
+                      color="secondary"
+                      startIcon={<PlusIcon />}
+                    >
                       Add
                     </Button>
                   }
@@ -329,7 +412,10 @@ export default function Page(): React.JSX.Element {
                   title={t('shipping-addresses', { ns: 'lesson_category' })}
                 />
                 <CardContent>
-                  <Grid container spacing={3}>
+                  <Grid
+                    container
+                    spacing={3}
+                  >
                     {(
                       [
                         {
@@ -351,7 +437,11 @@ export default function Page(): React.JSX.Element {
                         },
                       ] satisfies Address[]
                     ).map((address) => (
-                      <Grid key={address.id} md={6} xs={12}>
+                      <Grid
+                        key={address.id}
+                        md={6}
+                        xs={12}
+                      >
                         <ShippingAddress address={address} />
                       </Grid>
                     ))}

002_source/cms/src/app/dashboard/cr/categories/list/page.tsx

@@ -90,8 +90,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -99,7 +98,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/cr/categories/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/cr/categories/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { CrCategory } from '@/components/dashboard/cr/categories/type';
+import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/cr/categories/view/[cat_id]/TitleCard.tsx

@@ -10,12 +10,9 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 
-function getImageUrlFrRecord(record: CrCategory): string {
-  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
-}
-
 export default function SampleTitleCard({ lpModel }: { lpModel: CrCategory }): React.JSX.Element {
   const { t } = useTranslation();
 
@@ -28,7 +25,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: CrCategory }): R
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFromFile(lpModel.collectionId, lpModel.id, lpModel.cat_image)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/cr/questions/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/cr/questions/[cat_id]/TitleCard.tsx

@@ -10,11 +10,8 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
-
-function getImageUrlFrRecord(record: LpCategory): string {
-  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
-}
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
   const { t } = useTranslation();
@@ -28,7 +25,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): R
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFromFile(lpModel.collectionId, lpModel.id, lpModel.cat_image)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/cr/questions/cr-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const CrCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/customers/[customerId]/TitleCard.tsx

@@ -9,14 +9,14 @@ import Typography from '@mui/material/Typography';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
+
 import type { Customer } from '@/components/dashboard/customer/type.d';
 
 // import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 
 function getImageUrlFrRecord(record: Customer): string {
-  // TODO: fix this
-  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
-  return 'getImageUrlFrRecord(helloworld)';
+  // TODO: implement getImageUrlFrRecord
+  return 'not implemented';
 }
 
 export default function SampleTitleCard({ lpModel }: { lpModel: Customer }): React.JSX.Element {

002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 

002_source/cms/src/app/dashboard/lesson_categories/view/[cat_id]/page.tsx

@@ -28,12 +28,13 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
-import { RecordModel } from 'pocketbase';
+import type { RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';
 import { logger } from '@/lib/default-logger';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { pb } from '@/lib/pb';
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
@@ -45,7 +46,7 @@ import { Notifications } from '@/components/dashboard/lesson_category/notificati
 import { Payments } from '@/components/dashboard/lesson_category/payments';
 import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
 import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 import FormLoading from '@/components/loading';
 
@@ -119,39 +120,72 @@ export default function Page(): React.JSX.Element {
               {t('dashboard.lessonCategorys.list.title')}
             </Link>
           </div>
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
-            <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{ alignItems: 'center', flex: '1 1 auto' }}
+            >
               <Avatar
-                src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
+                src={getImageUrlFromFile(
+                  showLessonCategory.collectionId,
+                  showLessonCategory.id,
+                  showLessonCategory.cat_image
+                )}
                 sx={{ '--Avatar-size': '64px' }}
                 variant="rounded"
               >
                 empty
               </Avatar>
               <div>
-                <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+                <Stack
+                  direction="row"
+                  spacing={2}
+                  sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+                >
                   <Typography variant="h4">{showLessonCategory.name}</Typography>
                   <Chip
-                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
+                    icon={
+                      <CheckCircleIcon
+                        color="var(--mui-palette-success-main)"
+                        weight="fill"
+                      />
+                    }
                     label={showLessonCategory.visible}
                     size="small"
                     variant="outlined"
                   />
                 </Stack>
-                <Typography color="text.secondary" variant="body1">
+                <Typography
+                  color="text.secondary"
+                  variant="body1"
+                >
                   {showLessonCategory.id}
                 </Typography>
               </div>
             </Stack>
             <div>
-              <Button endIcon={<CaretDownIcon />} variant="contained">
+              <Button
+                endIcon={<CaretDownIcon />}
+                variant="contained"
+              >
                 Action
               </Button>
             </div>
           </Stack>
         </Stack>
-        <Grid container spacing={4}>
-          <Grid lg={4} xs={12}>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
             <Stack spacing={4}>
               <Card>
                 <CardHeader
@@ -178,7 +212,16 @@ export default function Page(): React.JSX.Element {
                 >
                   {(
                     [
-                      { key: 'Customer ID', value: <Chip label={showLessonCategory.id} size="small" variant="soft" /> },
+                      {
+                        key: 'Customer ID',
+                        value: (
+                          <Chip
+                            label={showLessonCategory.id}
+                            size="small"
+                            variant="soft"
+                          />
+                        ),
+                      },
                       { key: 'Name', value: showLessonCategory.name },
                       { key: 'Pos', value: showLessonCategory.pos },
                       {
@@ -195,9 +238,20 @@ export default function Page(): React.JSX.Element {
                       {
                         key: 'Quota',
                         value: (
-                          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
-                            <LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
-                            <Typography color="text.secondary" variant="body2">
+                          <Stack
+                            direction="row"
+                            spacing={2}
+                            sx={{ alignItems: 'center' }}
+                          >
+                            <LinearProgress
+                              sx={{ flex: '1 1 auto' }}
+                              value={50}
+                              variant="determinate"
+                            />
+                            <Typography
+                              color="text.secondary"
+                              variant="body2"
+                            >
                               50%
                             </Typography>
                           </Stack>
@@ -206,7 +260,11 @@ export default function Page(): React.JSX.Element {
                     ] satisfies { key: string; value: React.ReactNode }[]
                   ).map(
                     (item): React.JSX.Element => (
-                      <PropertyItem key={item.key} name={item.key} value={item.value} />
+                      <PropertyItem
+                        key={item.key}
+                        name={item.key}
+                        value={item.value}
+                      />
                     )
                   )}
                 </PropertyList>
@@ -223,11 +281,17 @@ export default function Page(): React.JSX.Element {
                 <CardContent>
                   <Stack spacing={1}>
                     <div>
-                      <Button color="error" variant="contained">
+                      <Button
+                        color="error"
+                        variant="contained"
+                      >
                         Delete account
                       </Button>
                     </div>
-                    <Typography color="text.secondary" variant="body2">
+                    <Typography
+                      color="text.secondary"
+                      variant="body2"
+                    >
                       A deleted lesson category cannot be restored. All data will be permanently removed.
                     </Typography>
                   </Stack>
@@ -235,7 +299,10 @@ export default function Page(): React.JSX.Element {
               </Card>
             </Stack>
           </Grid>
-          <Grid lg={8} xs={12}>
+          <Grid
+            lg={8}
+            xs={12}
+          >
             <Stack spacing={4}>
               <Payments
                 ordersValue={2069.48}
@@ -282,7 +349,10 @@ export default function Page(): React.JSX.Element {
               <Card>
                 <CardHeader
                   action={
-                    <Button color="secondary" startIcon={<PencilSimpleIcon />}>
+                    <Button
+                      color="secondary"
+                      startIcon={<PencilSimpleIcon />}
+                    >
                       Edit
                     </Button>
                   }
@@ -294,8 +364,14 @@ export default function Page(): React.JSX.Element {
                   title={t('billing-details', { ns: 'lesson_category' })}
                 />
                 <CardContent>
-                  <Card sx={{ borderRadius: 1 }} variant="outlined">
-                    <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
+                  <Card
+                    sx={{ borderRadius: 1 }}
+                    variant="outlined"
+                  >
+                    <PropertyList
+                      divider={<Divider />}
+                      sx={{ '--PropertyItem-padding': '16px' }}
+                    >
                       {(
                         [
                           { key: 'Credit card', value: '**** 4142' },
@@ -307,7 +383,11 @@ export default function Page(): React.JSX.Element {
                         ] satisfies { key: string; value: React.ReactNode }[]
                       ).map(
                         (item): React.JSX.Element => (
-                          <PropertyItem key={item.key} name={item.key} value={item.value} />
+                          <PropertyItem
+                            key={item.key}
+                            name={item.key}
+                            value={item.value}
+                          />
                         )
                       )}
                     </PropertyList>
@@ -317,7 +397,10 @@ export default function Page(): React.JSX.Element {
               <Card>
                 <CardHeader
                   action={
-                    <Button color="secondary" startIcon={<PlusIcon />}>
+                    <Button
+                      color="secondary"
+                      startIcon={<PlusIcon />}
+                    >
                       Add
                     </Button>
                   }
@@ -329,7 +412,10 @@ export default function Page(): React.JSX.Element {
                   title={t('shipping-addresses', { ns: 'lesson_category' })}
                 />
                 <CardContent>
-                  <Grid container spacing={3}>
+                  <Grid
+                    container
+                    spacing={3}
+                  >
                     {(
                       [
                         {
@@ -351,7 +437,11 @@ export default function Page(): React.JSX.Element {
                         },
                       ] satisfies Address[]
                     ).map((address) => (
-                      <Grid key={address.id} md={6} xs={12}>
+                      <Grid
+                        key={address.id}
+                        md={6}
+                        xs={12}
+                      >
                         <ShippingAddress address={address} />
                       </Grid>
                     ))}

002_source/cms/src/app/dashboard/lesson_types/lesson-types-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
+import type { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
 
 // import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
 

002_source/cms/src/app/dashboard/lesson_types/lesson-types-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
+import type { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
 
 // import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
 

002_source/cms/src/app/dashboard/lp/categories/list/page.tsx

@@ -88,8 +88,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -97,7 +96,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/lp/categories/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/lp/categories/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/lp/categories/view/[cat_id]/TitleCard.tsx

@@ -10,11 +10,8 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
-
-function getImageUrlFrRecord(record: LpCategory): string {
-  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
-}
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
   const { t } = useTranslation();
@@ -28,7 +25,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): R
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFromFile(lpModel.collectionId, lpModel.id, lpModel.cat_image)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/lp/questions/list/page.tsx

@@ -88,8 +88,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -97,7 +96,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/lp/questions/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/lp/questions/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/lp/questions/view/[cat_id]/TitleCard.tsx

@@ -10,11 +10,8 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
-
-function getImageUrlFrRecord(record: LpCategory): string {
-  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
-}
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
   const { t } = useTranslation();
@@ -28,7 +25,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): R
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFromFile(lpModel.collectionId, lpModel.id, lpModel.cat_image)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/mf/categories/list/page.tsx

@@ -86,8 +86,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -95,7 +94,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/mf/categories/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/mf/categories/view/[cat_id]/TitleCard.tsx

@@ -10,12 +10,9 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import type { MfCategory } from '@/components/dashboard/mf/categories/type';
 
-function getImageUrlFrRecord(record: MfCategory): string {
-  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
-}
-
 export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): React.JSX.Element {
   const { t } = useTranslation();
 
@@ -28,7 +25,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): R
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFromFile(lpModel.collectionId, lpModel.id, lpModel.cat_image)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/mf/questions/list/page.tsx

@@ -86,8 +86,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -95,7 +94,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/mf/questions/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/mf/questions/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { MfCategory } from '@/components/dashboard/mf/categories/type';
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/mf/questions/view/[cat_id]/TitleCard.tsx

@@ -10,12 +10,9 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import type { MfCategory } from '@/components/dashboard/mf/categories/type';
 
-function getImageUrlFrRecord(record: MfCategory): string {
-  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
-}
-
 export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): React.JSX.Element {
   const { t } = useTranslation();
 
@@ -28,7 +25,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): R
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFromFile(lpModel.collectionId, lpModel.id, lpModel.cat_image)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/students/SampleStudents.tsx

@@ -1,8 +1,26 @@
 // src/app/dashboard/students/page.tsx
+
 'use client';
+
 import type { Student } from '@/db/Students/type.d';
+
 import { dayjs } from '@/lib/dayjs';
 
+const sampleBillingAddress = {
+  city: 'string',
+  country: 'string',
+  line1: 'string',
+  line2: 'string',
+  state: 'string',
+  zipCode: 'string',
+  //
+  id: 'string',
+  collectionId: 'string',
+  collectionName: 'string',
+  updated: 'string',
+  created: 'string',
+};
+
 export const SampleStudents = [
   {
     id: 'STU-005',
@@ -13,6 +31,12 @@ export const SampleStudents = [
     quota: 50,
     status: 'active',
     createdAt: dayjs().subtract(1, 'hour').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
   },
   {
     id: 'STU-004',
@@ -23,6 +47,12 @@ export const SampleStudents = [
     quota: 100,
     status: 'active',
     createdAt: dayjs().subtract(3, 'hour').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
   },
   {
     id: 'STU-003',
@@ -33,6 +63,12 @@ export const SampleStudents = [
     quota: 10,
     status: 'blocked',
     createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
   },
   {
     id: 'STU-002',
@@ -43,6 +79,12 @@ export const SampleStudents = [
     quota: 0,
     status: 'pending',
     createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
   },
   {
     id: 'STU-001',
@@ -53,5 +95,11 @@ export const SampleStudents = [
     quota: 50,
     status: 'active',
     createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
   },
 ] satisfies Student[];

002_source/cms/src/app/dashboard/students/list/page.tsx

@@ -120,12 +120,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       tempFilter.push(`phone ~ "%${phone}%"`);
     }
 
-    let preFinalListOption = { filter: '' };
+    let preFinalListOption = { filter: '', sort: '' };
     if (tempFilter.length > 0) {
-      preFinalListOption = { filter: tempFilter.join(' && ') };
+      preFinalListOption.filter = tempFilter.join(' && ');
     }
     if (tempSortDir.length > 0) {
-      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+      preFinalListOption.sort = tempSortDir;
     }
     setListOption(preFinalListOption);
   }, [sortDir, email, phone, state]);

002_source/cms/src/app/dashboard/students/view/[id]/TitleCard.tsx

@@ -9,14 +9,10 @@ import Typography from '@mui/material/Typography';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
+
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import type { Student } from '@/components/dashboard/student/type.d';
 
-// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
-
-function getImageUrlForStudent(student: Student): string {
-  return `http://127.0.0.1:8090/api/files/${student.collectionId}/${student.id}/${student.avatar}`;
-}
-
 export default function SampleTitleCard({ studentRecord }: { studentRecord: Student }): React.JSX.Element {
   const { t } = useTranslation();
 
@@ -29,7 +25,7 @@ export default function SampleTitleCard({ studentRecord }: { studentRecord: Stud
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlForStudent(studentRecord)}
+          src={getImageUrlFromFile(studentRecord.collectionId, studentRecord.id, studentRecord.avatar)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/teachers/list/page.tsx

@@ -122,12 +122,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       tempFilter.push(`phone ~ "%${phone}%"`);
     }
 
-    let preFinalListOption = { filter: '' };
+    const preFinalListOption = { filter: '', sort: '' };
     if (tempFilter.length > 0) {
-      preFinalListOption = { filter: tempFilter.join(' && ') };
+      preFinalListOption.filter = tempFilter.join(' && ');
     }
     if (tempSortDir.length > 0) {
-      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+      preFinalListOption.sort = tempSortDir;
     }
     setListOption(preFinalListOption);
   }, [sortDir, email, phone, state]);

002_source/cms/src/app/dashboard/teachers/view/[id]/TitleCard.tsx

@@ -9,13 +9,9 @@ import Typography from '@mui/material/Typography';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
-import { Teacher } from '@/components/dashboard/teacher/type.d';
 
-// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
-
-function getImageUrlFrRecord(teacher: Teacher): string {
-  return `http://127.0.0.1:8090/api/files/${teacher.collectionId}/${teacher.id}/${teacher.avatar}`;
-}
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
 
 export default function SampleTitleCard({ teacherRecord }: { teacherRecord: Teacher }): React.JSX.Element {
   const { t } = useTranslation();
@@ -29,7 +25,7 @@ export default function SampleTitleCard({ teacherRecord }: { teacherRecord: Teac
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(teacherRecord)}
+          src={getImageUrlFromFile(teacherRecord.collectionId, teacherRecord.id, teacherRecord.avatar)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/user_metas/list/page.tsx

@@ -22,7 +22,7 @@ import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
+import { defaultDBUserMeta, defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
 import type { UserMeta } from '@/components/dashboard/user_meta/type.d';
 import { UserMetasFilters } from '@/components/dashboard/user_meta/user-metas-filters';
 import { UserMetasPagination } from '@/components/dashboard/user_meta/user-metas-pagination';
@@ -62,7 +62,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
         .getList(currentPage + 1, rowsPerPage, listOption);
       const { items, totalItems } = models;
       const tempUserMeta: UserMeta[] = items.map((lt) => {
-        return { ...defaultUserMeta, ...lt };
+        return lt as unknown as UserMeta;
       });
 
       setUserMetaData(tempUserMeta);
@@ -96,7 +96,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
-    let tempFilter = [];
+    const tempFilter = [];
     let tempSortDir = '';
 
     if (state) {
@@ -115,12 +115,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       tempFilter.push(`phone ~ "%${phone}%"`);
     }
 
-    let preFinalListOption = { filter: '' };
+    const preFinalListOption = { filter: '', sort: '' };
     if (tempFilter.length > 0) {
-      preFinalListOption = { filter: tempFilter.join(' && ') };
+      preFinalListOption.filter = tempFilter.join(' && ');
     }
     if (tempSortDir.length > 0) {
-      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+      preFinalListOption.sort = tempSortDir;
     }
     setListOption(preFinalListOption);
   }, [sortDir, email, phone, state]);

002_source/cms/src/app/dashboard/user_metas/view/[id]/BasicDetailCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import type { UserMeta } from '@/db/UserMetas/type';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
@@ -13,8 +14,9 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
+
 // import { CrCategory } from '@/components/dashboard/cr/categories/type';
-import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
+// import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
 
 export default function BasicDetailCard({
   userMeta,

002_source/cms/src/app/dashboard/user_metas/view/[id]/TitleCard.tsx

@@ -9,13 +9,9 @@ import Typography from '@mui/material/Typography';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
-import { Teacher } from '@/components/dashboard/teacher/type.d';
 
-// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
-
-function getImageUrlFrRecord(teacher: Teacher): string {
-  return `http://127.0.0.1:8090/api/files/${teacher.collectionId}/${teacher.id}/${teacher.avatar}`;
-}
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
 
 export default function SampleTitleCard({ teacherRecord }: { teacherRecord: Teacher }): React.JSX.Element {
   const { t } = useTranslation();
@@ -29,7 +25,7 @@ export default function SampleTitleCard({ teacherRecord }: { teacherRecord: Teac
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(teacherRecord)}
+          src={getImageUrlFromFile(teacherRecord.collectionId, teacherRecord.id, teacherRecord.avatar)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}

002_source/cms/src/app/dashboard/user_metas/view/[id]/page.tsx

@@ -12,6 +12,8 @@ import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
 import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
 import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
 import { COL_USER_METAS } from '@/constants';
+import { defaultBillingAddress } from '@/db/billingAddress/constant';
+import type { UserMeta } from '@/db/UserMetas/type';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
@@ -20,7 +22,8 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import type { RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
-import { config } from '@/config';
+// TODO: remove me
+// import { config } from '@/config';
 import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
@@ -28,7 +31,7 @@ import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
 import { Notifications } from '@/components/dashboard/user_meta/notifications';
-import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
+// import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
 import FormLoading from '@/components/loading';
 
 import BasicDetailCard from './BasicDetailCard';
@@ -109,7 +112,7 @@ export default function Page(): React.JSX.Element {
             spacing={3}
             sx={{ alignItems: 'flex-start' }}
           >
-            <TitleCard teacherRecord={userMeta} />
+            <TitleCard teacherRecord={{ ...userMeta, billingAddress: defaultBillingAddress }} />
           </Stack>
         </Stack>
         <Grid

002_source/cms/src/app/dashboard/vocabularies/lesson-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 

002_source/cms/src/app/dashboard/vocabularies/view/[cat_id]/page.tsx

@@ -34,6 +34,7 @@ import { useTranslation } from 'react-i18next';
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';
 import { logger } from '@/lib/default-logger';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { pb } from '@/lib/pb';
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
@@ -128,7 +129,11 @@ export default function Page(): React.JSX.Element {
               sx={{ alignItems: 'center', flex: '1 1 auto' }}
             >
               <Avatar
-                src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
+                src={getImageUrlFromFile(
+                  showLessonCategory.collectionId,
+                  showLessonCategory.id,
+                  showLessonCategory.image
+                )}
                 sx={{ '--Avatar-size': '64px' }}
                 variant="rounded"
               >
@@ -140,7 +145,7 @@ export default function Page(): React.JSX.Element {
                   spacing={2}
                   sx={{ alignItems: 'center', flexWrap: 'wrap' }}
                 >
-                  <Typography variant="h4">{showLessonCategory.name}</Typography>
+                  <Typography variant="h4">{showLessonCategory.word}</Typography>
                   <Chip
                     icon={
                       <CheckCircleIcon
@@ -216,7 +221,7 @@ export default function Page(): React.JSX.Element {
                         ),
                       },
                       { key: 'word_c', value: showLessonCategory.word_c },
-                      { key: 'Pos', value: showLessonCategory.pos },
+                      { key: 'Pos', value: showLessonCategory.id },
                       {
                         key: 'Visible',
                         value: (

002_source/cms/src/components/auth/custom/sign-in-form/index.tsx

@@ -31,8 +31,8 @@ import { useUser } from '@/hooks/use-user';
 import { DynamicLogo } from '@/components/core/logo';
 import { toast } from '@/components/core/toaster';
 
-import { OAuthProvider } from '../OAuthProvider';
-import { oAuthProviders } from '../oAuthProviders';
+import { oAuthProviders } from '../o-auth-providers.tsx';
+import type { OAuthProvider } from '../OAuthProvider';
 
 // interface OAuthProvider {
 //   id: 'google' | 'discord' | 'github';
@@ -146,7 +146,7 @@ export function SignInForm(): React.JSX.Element {
       <Stack spacing={3}>
         <Stack
           spacing={2}
-          direction={'row'}
+          direction="row"
         >
           {oAuthProviders.map(
             (provider): React.JSX.Element => (

002_source/cms/src/components/auth/custom/sign-up-form/index.tsx

@@ -30,8 +30,8 @@ import { useUser } from '@/hooks/use-user';
 import { DynamicLogo } from '@/components/core/logo';
 import { toast } from '@/components/core/toaster';
 
+import { oAuthProviders } from '../o-auth-providers.tsx';
 import type { OAuthProvider } from '../OAuthProvider';
-import { oAuthProviders } from '../oAuthProviders';
 
 export function SignUpForm(): React.JSX.Element {
   const router = useRouter();
@@ -195,7 +195,7 @@ export function SignUpForm(): React.JSX.Element {
                   <InputLabel>{t('email-address')}:</InputLabel>
                   <OutlinedInput
                     {...field}
-                    placeholder={t('e.g.') + ' name@example.com'}
+                    placeholder={`${t('e.g.')} name@example.com`}
                     type="email"
                     disabled={isPending}
                   />

002_source/cms/src/components/dashboard/blog/comment-add.tsx

@@ -16,16 +16,36 @@ const user = {
   name: 'Sofia Rivers',
   avatar: '/assets/avatar.png',
   email: 'sofia@devias.io',
+  collectionId: '123321',
 } satisfies User;
 
 export function CommentAdd(): React.JSX.Element {
   return (
-    <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+    <Stack
+      direction="row"
+      spacing={2}
+      sx={{ alignItems: 'flex-start' }}
+    >
       <Avatar src={user.avatar} />
-      <Stack spacing={3} sx={{ flex: '1 1 auto' }}>
-        <OutlinedInput multiline placeholder="Add a comment" rows={3} />
-        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Stack
+        spacing={3}
+        sx={{ flex: '1 1 auto' }}
+      >
+        <OutlinedInput
+          multiline
+          placeholder="Add a comment"
+          rows={3}
+        />
+        <Stack
+          direction="row"
+          spacing={3}
+          sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+        >
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ alignItems: 'center' }}
+          >
             <IconButton sx={{ display: { sm: 'none' } }}>
               <PlusIcon />
             </IconButton>

002_source/cms/src/components/dashboard/chat/message-add.tsx

@@ -19,6 +19,7 @@ const user = {
   name: 'Sofia Rivers',
   avatar: '/assets/avatar.png',
   email: 'sofia@devias.io',
+  collectionId: '123321',
 } satisfies User;
 
 export interface MessageAddProps {
@@ -57,8 +58,15 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
   );
 
   return (
-    <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '0 0 auto', px: 3, py: 1 }}>
-      <Avatar src={user.avatar} sx={{ display: { xs: 'none', sm: 'inline' } }} />
+    <Stack
+      direction="row"
+      spacing={2}
+      sx={{ alignItems: 'center', flex: '0 0 auto', px: 3, py: 1 }}
+    >
+      <Avatar
+        src={user.avatar}
+        sx={{ display: { xs: 'none', sm: 'inline' } }}
+      />
       <OutlinedInput
         disabled={disabled}
         onChange={handleChange}
@@ -67,7 +75,11 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
         sx={{ flex: '1 1 auto' }}
         value={content}
       />
-      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{ alignItems: 'center' }}
+      >
         <Tooltip title="Send">
           <span>
             <IconButton
@@ -84,24 +96,40 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
             </IconButton>
           </span>
         </Tooltip>
-        <Stack direction="row" spacing={1} sx={{ display: { xs: 'none', sm: 'flex' } }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ display: { xs: 'none', sm: 'flex' } }}
+        >
           <Tooltip title="Attach photo">
             <span>
-              <IconButton disabled={disabled} edge="end" onClick={handleAttach}>
+              <IconButton
+                disabled={disabled}
+                edge="end"
+                onClick={handleAttach}
+              >
                 <CameraIcon />
               </IconButton>
             </span>
           </Tooltip>
           <Tooltip title="Attach file">
             <span>
-              <IconButton disabled={disabled} edge="end" onClick={handleAttach}>
+              <IconButton
+                disabled={disabled}
+                edge="end"
+                onClick={handleAttach}
+              >
                 <PaperclipIcon />
               </IconButton>
             </span>
           </Tooltip>
         </Stack>
       </Stack>
-      <input hidden ref={fileInputRef} type="file" />
+      <input
+        hidden
+        ref={fileInputRef}
+        type="file"
+      />
     </Stack>
   );
 }

002_source/cms/src/components/dashboard/chat/message-box.tsx

@@ -17,6 +17,7 @@ const user = {
   name: 'Sofia Rivers',
   avatar: '/assets/avatar.png',
   email: 'sofia@devias.io',
+  collectionId: '123321',
 } satisfies User;
 
 export interface MessageBoxProps {
@@ -38,8 +39,14 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
           mr: position === 'left' ? 'auto' : 0,
         }}
       >
-        <Avatar src={message.author.avatar} sx={{ '--Avatar-size': '32px' }} />
-        <Stack spacing={1} sx={{ flex: '1 1 auto' }}>
+        <Avatar
+          src={message.author.avatar}
+          sx={{ '--Avatar-size': '32px' }}
+        />
+        <Stack
+          spacing={1}
+          sx={{ flex: '1 1 auto' }}
+        >
           <Card
             sx={{
               px: 2,
@@ -52,7 +59,11 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
           >
             <Stack spacing={1}>
               <div>
-                <Link color="inherit" sx={{ cursor: 'pointer' }} variant="subtitle2">
+                <Link
+                  color="inherit"
+                  sx={{ cursor: 'pointer' }}
+                  variant="subtitle2"
+                >
                   {message.author.name}
                 </Link>
               </div>
@@ -66,14 +77,21 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
                 />
               ) : null}
               {message.type === 'text' ? (
-                <Typography color="inherit" variant="body1">
+                <Typography
+                  color="inherit"
+                  variant="body1"
+                >
                   {message.content}
                 </Typography>
               ) : null}
             </Stack>
           </Card>
           <Box sx={{ display: 'flex', justifyContent: position === 'right' ? 'flex-end' : 'flex-start', px: 2 }}>
-            <Typography color="text.secondary" noWrap variant="caption">
+            <Typography
+              color="text.secondary"
+              noWrap
+              variant="caption"
+            >
               {dayjs(message.createdAt).fromNow()}
             </Typography>
           </Box>

002_source/cms/src/components/dashboard/connective/_constants.ts

@@ -1,6 +1,6 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateForm, LessonCategory } from './type';
+import type { CreateForm, LessonCategory } from './type';
 
 // import type { CreateForm, LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/connective/lesson-categories-filters.tsx

@@ -26,7 +26,7 @@ import { Option } from '@/components/core/option';
 
 // import { LessonCategory } from '../lp_categories/type';
 import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/connective/lesson-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 // import type { LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/connective/lesson-categories-table.tsx

@@ -99,7 +99,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/cr/categories/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CrCategory, CreateFormProps } from './type';
+import type { CrCategory} from './type';
+import { CreateFormProps } from './type';
 
 export const defaultCrCategory: CrCategory = {
   isEmpty: false,

002_source/cms/src/components/dashboard/cr/categories/cr-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { CrCategory } from './type';
+import type { CrCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/cr/categories/cr-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/cr/questions/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, CrQuestion } from './type';
+import type { CrQuestion } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultCrQuestion: CrQuestion = {
   isEmpty: false,

002_source/cms/src/components/dashboard/cr/questions/cr-questions-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useCrQuestionsSelection } from './cr-questions-selection-context';
-import { CrQuestion } from './type';
+import type { CrQuestion } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/cr/questions/cr-questions-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrQuest
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/customer/customers-table.tsx

@@ -89,7 +89,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Custome
 
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/error/index.tsx

@@ -81,7 +81,7 @@ function ErrorDisplay({ message, code, details, severity = 'error' }: PropsError
           {formattedMessage}
         </Typography>
 
-        {details && <ErrorDetails details={details} />}
+        {details ? <ErrorDetails details={details} /> : null}
       </Alert>
     </Box>
   );

002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { usePathname } from 'next/navigation';
+import { MarkOneAsRead } from '@/db/Notifications/mark-one-as-read';
 import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
 import Box from '@mui/material/Box';
@@ -25,6 +26,7 @@ import type { NavItemConfig } from '@/types/nav';
 import type { NavColor } from '@/types/settings';
 import type { User } from '@/types/user';
 import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
 import { isNavItemActive } from '@/lib/is-nav-item-active';
 import { useDialog } from '@/hooks/use-dialog';
 import { usePopover } from '@/hooks/use-popover';
@@ -33,6 +35,7 @@ import { Dropdown } from '@/components/core/dropdown/dropdown';
 import { DropdownPopover } from '@/components/core/dropdown/dropdown-popover';
 import { DropdownTrigger } from '@/components/core/dropdown/dropdown-trigger';
 import { Logo } from '@/components/core/logo';
+import { toast } from '@/components/core/toaster';
 import { SearchDialog } from '@/components/dashboard/layout/search-dialog';
 import type { ColorScheme } from '@/styles/theme/types';
 
@@ -183,6 +186,29 @@ function SearchButton(): React.JSX.Element {
 
 function NotificationsButton(): React.JSX.Element {
   const popover = usePopover<HTMLButtonElement>();
+  const [listLength, setListLength] = React.useState<number>(0);
+
+  function handleMarkAllAsRead(): void {
+    // try {
+    //   await MarkOneAsRead(id);
+    //   toast.success('Notification marked as read');
+    // } catch (error) {
+    //   logger.debug(error);
+    //   toast.error('Something went wrong');
+    // }
+  }
+
+  function handleRemoveOne(id: string, cb: () => void): void {
+    MarkOneAsRead(id)
+      .then(() => {
+        toast.success('Notification marked as read');
+        cb();
+      })
+      .catch((error) => {
+        logger.debug(error);
+        toast.error('Something went wrong');
+      });
+  }
 
   return (
     <React.Fragment>
@@ -190,15 +216,14 @@ function NotificationsButton(): React.JSX.Element {
         <Badge
           color="error"
           sx={{
-            '& .MuiBadge-dot': {
-              borderRadius: '50%',
+            '& .MuiBadge-badge': {
+              height: '20px',
+              width: '20px',
               right: '6px',
               top: '6px',
-              height: '10px',
-              width: '10px',
             },
           }}
-          variant="dot"
+          badgeContent={listLength}
         >
           <IconButton
             onClick={popover.handleOpen}
@@ -212,6 +237,9 @@ function NotificationsButton(): React.JSX.Element {
         anchorEl={popover.anchorRef.current}
         onClose={popover.handleClose}
         open={popover.open}
+        onMarkAllAsRead={handleMarkAllAsRead}
+        onRemoveOne={handleRemoveOne}
+        setListLength={setListLength}
       />
     </React.Fragment>
   );

002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx

@@ -133,7 +133,7 @@ export function NotificationsPopover({
 
           <Typography
             color="lightgray"
-            variant={'subtitle2'}
+            variant="subtitle2"
           >
             {t('list-is-empty')}
           </Typography>

002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx

@@ -1,6 +1,9 @@
 'use client';
-import { Notification } from '@/db/Notifications/type';
+
+import type { Notification } from '@/db/Notifications/type';
+
 import { dayjs } from '@/lib/dayjs';
+
 // import type { Notification } from './type.d.tsx';
 
 export const SampleNotifications = [
@@ -11,6 +14,11 @@ export const SampleNotifications = [
     type: 'new_job',
     author: { id: '0001', collectionId: '0001', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
     job: { title: 'Remote React / React Native Developer' },
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
   },
   {
     id: 'EV-003',
@@ -19,6 +27,11 @@ export const SampleNotifications = [
     type: 'new_job',
     author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
     job: { title: 'Senior Golang Backend Engineer' },
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
   },
   {
     id: 'EV-002',
@@ -27,6 +40,11 @@ export const SampleNotifications = [
     type: 'new_feature',
     author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
     description: 'Logistics management is now available',
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
   },
   {
     id: 'EV-001',
@@ -35,5 +53,10 @@ export const SampleNotifications = [
     type: 'new_company',
     author: { id: '0001', collectionId: '002', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
     company: { name: 'Stripe' },
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
   },
 ] satisfies Notification[];

002_source/cms/src/components/dashboard/layout/user-popover/custom-sign-out/index.tsx

@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
+import { LoadingButton } from '@mui/lab';
+import { Button } from '@mui/material';
 import MenuItem from '@mui/material/MenuItem';
+import { SignOut as SignOutIcon } from '@phosphor-icons/react/dist/ssr/SignOut';
+import { useTranslation } from 'react-i18next';
 
 import { authClient } from '@/lib/auth/custom/client';
 import { logger } from '@/lib/default-logger';
@@ -10,39 +14,44 @@ import { useUser } from '@/hooks/use-user';
 import { toast } from '@/components/core/toaster';
 
 export function CustomSignOut(): React.JSX.Element {
+  const { t } = useTranslation('sign_in');
+
   const { checkSession } = useUser();
+  const [buttonShowLoading, setButtonShowLoading] = React.useState<boolean>(false);
 
   const router = useRouter();
 
   const handleSignOut = React.useCallback(async (): Promise<void> => {
+    setButtonShowLoading(true);
     try {
       const { error } = await authClient.signOut();
-
       if (error) {
         logger.error('Sign out error', error);
-        toast.error('Something went wrong, unable to sign out');
+        toast.error(t('something-went-wrong-unable-to-sign-out'));
         return;
       }
-
       // Refresh the auth state
       await checkSession?.();
-
       // UserProvider, for this case, will not refresh the router and we need to do it manually
       router.refresh();
       // After refresh, AuthGuard will handle the redirect
     } catch (err) {
       logger.error('Sign out error', err);
-      toast.error('Something went wrong, unable to sign out');
+      toast.error(t('something-went-wrong-unable-to-sign-out'));
     }
-  }, [checkSession, router]);
+  }, [checkSession, router, t]);
 
   return (
-    <MenuItem
-      component="div"
+    <LoadingButton
       onClick={handleSignOut}
-      sx={{ justifyContent: 'center' }}
+      sx={{ width: '100%' }}
+      variant="text"
+      disabled={buttonShowLoading}
+      loading={buttonShowLoading}
+      startIcon={<SignOutIcon />}
+      color="secondary"
     >
-      Sign out
-    </MenuItem>
+      {t('sign-out')}
+    </LoadingButton>
   );
 }

002_source/cms/src/components/dashboard/layout/user-popover/user-popover.tsx

@@ -16,15 +16,15 @@ import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import type { User } from '@/types/user';
 import { config } from '@/config';
 import { paths } from '@/paths';
+import { authClient } from '@/lib/auth/custom/client';
 import { AuthStrategy } from '@/lib/auth/strategy';
+import { logger } from '@/lib/default-logger';
 
 import { Auth0SignOut } from './auth0-sign-out';
 import { CognitoSignOut } from './cognito-sign-out';
 import { CustomSignOut } from './custom-sign-out';
 import { FirebaseSignOut } from './firebase-sign-out';
 import { SupabaseSignOut } from './supabase-sign-out';
-import { authClient } from '@/lib/auth/custom/client';
-import { logger } from '@/lib/default-logger';
 
 const defaultUser = {
   id: 'USR-000',
@@ -55,7 +55,8 @@ export function UserPopover({ anchorEl, onClose, open }: UserPopoverProps): Reac
     void loadUserMeta();
   }, []);
 
-  if (!userMeta) return <>loading</>;
+  // NOTE: delay when userMeta is null, used for sign-out
+  if (!userMeta) return <></>;
 
   return (
     <Popover

002_source/cms/src/components/dashboard/layout/vertical/main-nav/notifications-button.tsx

@@ -14,7 +14,7 @@ import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
 import { MarkOneAsRead } from '@/db/Notifications/mark-one-as-read';
 import { getUnreadNotificationsByUserId } from '@/db/Notifications/GetUnreadNotificationsByUserId';
-import { Notification } from '@/db/Notifications/type';
+import type { Notification } from '@/db/Notifications/type';
 import { useUser } from '@/hooks/use-user';
 
 export function NotificationsButton(): React.JSX.Element {

002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx

@@ -6,11 +6,12 @@ import Badge from '@mui/material/Badge';
 import Box from '@mui/material/Box';
 
 import type { User } from '@/types/user';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { usePopover } from '@/hooks/use-popover';
+import { useUser } from '@/hooks/use-user';
 
 import { UserPopover } from '../../user-popover/user-popover';
-import { useUser } from '@/hooks/use-user';
-import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+
 // import { NotificationsButton } from './notifications-button';
 
 // TODO:remove me
@@ -50,7 +51,7 @@ export function UserButton(): React.JSX.Element {
           }}
           variant="dot"
         >
-          <Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)} />
+          <Avatar src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)} />
         </Badge>
       </Box>
       <UserPopover

002_source/cms/src/components/dashboard/layout/vertical/side-nav/index.tsx

@@ -66,6 +66,7 @@ export function SideNav({ color = 'evident', items = [] }: SideNavProps): React.
         spacing={2}
         sx={{ p: 2 }}
       >
+        {/* NOTE: hide logo
         <div>
           <Box
             component={RouterLink}
@@ -79,6 +80,7 @@ export function SideNav({ color = 'evident', items = [] }: SideNavProps): React.
             />
           </Box>
         </div>
+        */}
         <WorkspacesSwitch />
       </Stack>
       <Box

002_source/cms/src/components/dashboard/lesson_category/_constants.ts

@@ -1,6 +1,6 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateForm, LessonCategory } from './type';
+import type { CreateForm, LessonCategory } from './type';
 
 // import type { CreateForm, LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-filters.tsx

@@ -26,7 +26,7 @@ import { Option } from '@/components/core/option';
 
 // import { LessonCategory } from '../lp_categories/type';
 import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 // import type { LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx

@@ -99,7 +99,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx

@@ -37,7 +37,7 @@ import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 
 import { LessonTypeCreateFormDefault } from './_constants';
-import { CreateForm } from './lesson-type';
+import type { CreateForm } from './lesson-type';
 
 const schema = zod.object({
   name: zod.string().min(1, 'Name is required').max(255),

002_source/cms/src/components/dashboard/lesson_type/lesson-types-selection-context.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LessonType } from './lesson-type';
+import type { LessonType } from './lesson-type';
 
 // import { LessonType } from './ILessonType';
 

002_source/cms/src/components/dashboard/lp/categories/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpCategory } from './type';
+import type { LpCategory } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultLpCategory: LpCategory = {
   isEmpty: false,

002_source/cms/src/components/dashboard/lp/categories/lp-categories-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useLpCategoriesSelection } from './lp-categories-selection-context';
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lp/categories/lp-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/lp/categories/lp-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/lp/categories/mf-categories-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useLpCategoriesSelection } from './lp-categories-selection-context';
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lp/categories/mf-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/lp/categories/mf-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/lp/questions/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpQuestion } from './type';
+import type { LpQuestion } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultLpQuestion: LpQuestion = {
   isEmpty: false,

002_source/cms/src/components/dashboard/lp/questions/lp-questions-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useLpQuestionsSelection } from './lp-questions-selection-context';
-import { LpQuestion } from './type';
+import type { LpQuestion } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lp/questions/lp-questions-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuest
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/mf/categories/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, MfCategory } from './type';
+import type { MfCategory } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultMfCategory: MfCategory = {
   isEmpty: false,

002_source/cms/src/components/dashboard/mf/categories/mf-categories-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useMfCategoriesSelection } from './mf-categories-selection-context';
-import { MfCategory } from './type';
+import type { MfCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/mf/categories/mf-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { MfCategory } from './type';
+import type { MfCategory } from './type';
 
 function noop(): void {
   return undefined;