``update Add .env.example file with PocketBase URL configuration for development environment ``

update Add development environment configuration, I18n support, route adjustments, and various hooks refactoring
```

002_source/cms/.eslintrc.js

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

002_source/cms/package.json

@@ -117,4 +117,4 @@
       "protobufjs"
     ]
   }
-}
+}

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/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/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

@@ -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) {

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/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"
               >

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

@@ -31,7 +31,7 @@ import { useUser } from '@/hooks/use-user';
 import { DynamicLogo } from '@/components/core/logo';
 import { toast } from '@/components/core/toaster';
 
-import { OAuthProvider } from '../OAuthProvider';
+import type { OAuthProvider } from '../OAuthProvider';
 import { oAuthProviders } from '../oAuthProviders';
 
 // interface OAuthProvider {
@@ -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

@@ -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/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/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,5 +1,5 @@
 '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';
 

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/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;

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

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

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

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

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

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

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

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

002_source/cms/src/components/dashboard/student/student-create-form.tsx

@@ -43,7 +43,7 @@ import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
 import { toast } from '@/components/core/toaster';
 
 // import ErrorDisplay from '../../error';
-import { CreateFormProps } from './type.d';
+import type { CreateFormProps } from './type.d';
 
 // TODO: review schema
 const schema = zod.object({

002_source/cms/src/components/dashboard/student/students-pagination.tsx

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
-function noop(): void {
-  return undefined;
-}
+// TODO: remove noop
+// function noop(): void {
+//   return undefined;
+// }
 
 interface StudentsPaginationProps {
   count: number;
@@ -30,7 +31,7 @@ export function StudentsPagination({
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setRowsPerPage(parseInt(event.target.value));
     // console.log(parseInt(event.target.value));
   };

002_source/cms/src/components/dashboard/student/students-table.tsx

@@ -5,21 +5,17 @@ import RouterLink from 'next/link';
 import { LoadingButton } from '@mui/lab';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
 import LinearProgress from '@mui/material/LinearProgress';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
-import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
 import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
 import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
 import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';

002_source/cms/src/components/dashboard/teacher/confirm-delete-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { deleteTeacher } from '@/db/Teachers/Delete';
 import { LoadingButton } from '@mui/lab';
 import { Button, Container, Modal, Paper } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
-import { deleteTeacher } from '@/db/Teachers/Delete';
 
 export default function ConfirmDeleteModal({
   open,
@@ -105,7 +105,7 @@ export default function ConfirmDeleteModal({
                     <LoadingButton
                       color="error"
                       variant="contained"
-                      onClick={(e) => {
+                      onClick={() => {
                         handleUserConfirmDelete();
                       }}
                       loading={isDeleteing}

002_source/cms/src/components/dashboard/teacher/teacher-create-form.tsx

@@ -50,7 +50,7 @@ import FormLoading from '@/components/loading';
 
 // import ErrorDisplay from '../../error';
 import ErrorDisplay from '../error';
-import { CreateFormProps } from './type.d';
+import type { CreateFormProps } from './type.d';
 
 // TODO: review schema
 const schema = zod.object({

002_source/cms/src/components/dashboard/teacher/teacher-edit-form.tsx

@@ -148,7 +148,7 @@ export function TeacherEditForm(): React.JSX.Element {
         setIsUpdating(false);
       }
     },
-    [teacherId, router]
+    [teacherId, router, t]
   );
 
   const avatarInputRef = React.useRef<HTMLInputElement>(null);
@@ -197,7 +197,8 @@ export function TeacherEditForm(): React.JSX.Element {
         setShowLoading(false);
       }
     },
-    [reset, setValue]
+
+    [reset, setValue, t]
   );
 
   React.useEffect(() => {

002_source/cms/src/components/dashboard/teacher/teachers-filters.tsx

@@ -33,6 +33,8 @@ import type { Filters, SortDir, TeachersFiltersProps } from './type.d';
 export function TeachersFilters({
   filters = {},
   sortDir = 'desc',
+  // TODO: remove fullData
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
   fullData,
   //
 }: TeachersFiltersProps): React.JSX.Element {

002_source/cms/src/components/dashboard/teacher/teachers-pagination.tsx

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
-function noop(): void {
-  return undefined;
-}
+// TODO: remove noop
+// function noop(): void {
+//   return undefined;
+// }
 
 interface CustomersPaginationProps {
   count: number;
@@ -30,7 +31,7 @@ export function TeachersPagination({
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setRowsPerPage(parseInt(event.target.value));
     // console.log(parseInt(event.target.value));
   };

002_source/cms/src/components/dashboard/user.de/_GUIDELINES.md

@@ -1,25 +0,0 @@
-# GUIDELINES & KEY COMPONENTS
-
-- `_constants.ts` contains the constant for
-
-  - default value (defaultValue)
-  - empty value (emptyValue)
-
-- `users-table.tsx`
-
-- `confirm-delete-modal.tsx` - delete modal component when click delete button on list
-
-  - `users-filters.tsx`
-  - `users-pagination.tsx`
-  - `email-filter-popover.tsx`
-  - `phone-filter-popover.tsx`
-  - `users-selection-context.tsx`
-
-- `user-create-form.tsx` - form to create a new user
-- `user-edit-form.tsx` - form to edit a existing user
-
-- `type.d.tsx` - contains type definition
-
-- `notifications.tsx` - constants used for demonstration
-- `payments.tsx` - constants used for demonstration
-- `shipping-address.tsx` - constants used for demonstration

002_source/cms/src/components/dashboard/user.de/_constants.ts

@@ -1,21 +0,0 @@
-// RULES:
-// default variable value for customer
-// empty valur for customer
-
-import { dayjs } from '@/lib/dayjs';
-import type { User } from './type.d';
-
-export const defaultUser: User = {
-  id: '',
-  name: '',
-  avatar: undefined,
-  email: '',
-  phone: undefined,
-  quota: 0,
-  status: 'pending',
-  createdAt: dayjs().toDate(),
-};
-
-export const emptyLpCategory: User = {
-  ...defaultUser,
-};

002_source/cms/src/components/dashboard/user.de/confirm-delete-modal.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { LoadingButton } from '@mui/lab';
-import { Button, Container, Modal, Paper } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
-import { useTranslation } from 'react-i18next';
-
-import { logger } from '@/lib/default-logger';
-import { toast } from '@/components/core/toaster';
-import { deleteUser } from '@/db/Users/Delete';
-
-export default function ConfirmDeleteModal({
-  open,
-  setOpen,
-  idToDelete,
-  reloadRows,
-}: {
-  open: boolean;
-  setOpen: (b: boolean) => void;
-  idToDelete: string;
-  reloadRows: () => void;
-}): React.JSX.Element {
-  const { t } = useTranslation();
-
-  // const handleClose = () => setOpen(false);
-  function handleClose(): void {
-    setOpen(false);
-  }
-
-  const [isDeleteing, setIsDeleteing] = React.useState(false);
-  const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-  };
-
-  function handleUserConfirmDelete(): void {
-    if (idToDelete) {
-      setIsDeleteing(true);
-
-      // RULES: delete<CollectionName>
-      deleteUser(idToDelete)
-        .then(() => {
-          reloadRows();
-          handleClose();
-          toast(t('delete.success'));
-        })
-        .catch((err) => {
-          // console.error(err)
-          logger.error(err);
-          toast(t('delete.error'));
-        })
-        .finally(() => {
-          setIsDeleteing(false);
-        });
-    }
-  }
-
-  return (
-    <div>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          <Container maxWidth="sm">
-            <Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
-              <Stack
-                direction="row"
-                spacing={2}
-                sx={{ display: 'flex', p: 3 }}
-              >
-                <Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
-                  <NoteIcon fontSize="var(--Icon-fontSize)" />
-                </Avatar>
-                <Stack spacing={3}>
-                  <Stack spacing={1}>
-                    <Typography variant="h5">{t('Delete User ?')}</Typography>
-                    <Typography
-                      color="text.secondary"
-                      variant="body2"
-                    >
-                      {t('Are you sure you want to delete this user ?')}
-                    </Typography>
-                  </Stack>
-                  <Stack
-                    direction="row"
-                    spacing={2}
-                    sx={{ justifyContent: 'flex-end' }}
-                  >
-                    <Button
-                      color="secondary"
-                      onClick={handleClose}
-                    >
-                      {t('Cancel')}
-                    </Button>
-                    <LoadingButton
-                      color="error"
-                      variant="contained"
-                      onClick={(e) => {
-                        handleUserConfirmDelete();
-                      }}
-                      loading={isDeleteing}
-                    >
-                      {t('Delete')}
-                    </LoadingButton>
-                  </Stack>
-                </Stack>
-              </Stack>
-            </Paper>
-          </Container>
-        </Box>
-      </Modal>
-    </div>
-  );
-}

002_source/cms/src/components/dashboard/user.de/email-filter-popover.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-
-import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
-
-// EmailFilterPopover -> email-filter-popover.tsx
-export default function EmailFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
-
-  return (
-    <FilterPopover
-      anchorEl={anchorEl}
-      onClose={onClose}
-      open={open}
-      title="Filter by email"
-    >
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}

002_source/cms/src/components/dashboard/user.de/helloworld.tsx

@@ -1,3 +0,0 @@
-const helloworld = 'helloworld';
-
-export { helloworld };

002_source/cms/src/components/dashboard/user.de/notifications.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Chip from '@mui/material/Chip';
-import Select from '@mui/material/Select';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
-
-import { dayjs } from '@/lib/dayjs';
-import { DataTable } from '@/components/core/data-table';
-import type { ColumnDef } from '@/components/core/data-table';
-import { Option } from '@/components/core/option';
-
-export interface Notification {
-  id: string;
-  type: string;
-  status: 'delivered' | 'pending' | 'failed';
-  createdAt: Date;
-}
-
-const columns = [
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
-        {row.type}
-      </Typography>
-    ),
-    name: 'Type',
-    width: '300px',
-  },
-  {
-    formatter: (row): React.JSX.Element => {
-      const mapping = {
-        delivered: { label: 'Delivered', color: 'success' },
-        pending: { label: 'Pending', color: 'warning' },
-        failed: { label: 'Failed', color: 'error' },
-      } as const;
-      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
-
-      return <Chip color={color} label={label} size="small" variant="soft" />;
-    },
-    name: 'Status',
-    width: '200px',
-  },
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
-        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
-      </Typography>
-    ),
-    name: 'Date',
-    align: 'right',
-  },
-] satisfies ColumnDef<Notification>[];
-
-export interface NotificationsProps {
-  notifications: Notification[];
-}
-
-export function Notifications({ notifications }: NotificationsProps): React.JSX.Element {
-  return (
-    <Card>
-      <CardHeader
-        avatar={
-          <Avatar>
-            <EnvelopeSimpleIcon fontSize="var(--Icon-fontSize)" />
-          </Avatar>
-        }
-        title="Notifications"
-      />
-      <CardContent>
-        <Stack spacing={3}>
-          <Stack spacing={2}>
-            <Select defaultValue="last_invoice" name="type" sx={{ maxWidth: '100%', width: '320px' }}>
-              <Option value="last_invoice">Resend last invoice</Option>
-              <Option value="password_reset">Send password reset</Option>
-              <Option value="verification">Send verification</Option>
-            </Select>
-            <div>
-              <Button startIcon={<EnvelopeSimpleIcon />} variant="contained">
-                Send email
-              </Button>
-            </div>
-          </Stack>
-          <Card sx={{ borderRadius: 1 }} variant="outlined">
-            <Box sx={{ overflowX: 'auto' }}>
-              <DataTable<Notification> columns={columns} rows={notifications} />
-            </Box>
-          </Card>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}

002_source/cms/src/components/dashboard/user.de/payments.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
-import { ShoppingCartSimple as ShoppingCartSimpleIcon } from '@phosphor-icons/react/dist/ssr/ShoppingCartSimple';
-
-import { dayjs } from '@/lib/dayjs';
-import type { ColumnDef } from '@/components/core/data-table';
-import { DataTable } from '@/components/core/data-table';
-
-export interface Payment {
-  currency: string;
-  amount: number;
-  invoiceId: string;
-  status: 'pending' | 'completed' | 'canceled' | 'refunded';
-  createdAt: Date;
-}
-
-const columns = [
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="subtitle2">
-        {new Intl.NumberFormat('en-US', { style: 'currency', currency: row.currency }).format(row.amount)}
-      </Typography>
-    ),
-    name: 'Amount',
-    width: '200px',
-  },
-  {
-    formatter: (row): React.JSX.Element => {
-      const mapping = {
-        pending: { label: 'Pending', color: 'warning' },
-        completed: { label: 'Completed', color: 'success' },
-        canceled: { label: 'Canceled', color: 'error' },
-        refunded: { label: 'Refunded', color: 'error' },
-      } as const;
-      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
-
-      return <Chip color={color} label={label} size="small" variant="soft" />;
-    },
-    name: 'Status',
-    width: '200px',
-  },
-  {
-    formatter: (row): React.JSX.Element => {
-      return <Link variant="inherit">{row.invoiceId}</Link>;
-    },
-    name: 'Invoice ID',
-    width: '150px',
-  },
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
-        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
-      </Typography>
-    ),
-    name: 'Date',
-    align: 'right',
-  },
-] satisfies ColumnDef<Payment>[];
-
-export interface PaymentsProps {
-  ordersValue: number;
-  payments: Payment[];
-  refundsValue: number;
-  totalOrders: number;
-}
-
-export function Payments({ ordersValue, payments = [], refundsValue, totalOrders }: PaymentsProps): React.JSX.Element {
-  return (
-    <Card>
-      <CardHeader
-        action={
-          <Button color="secondary" startIcon={<PlusIcon />}>
-            Create Payment
-          </Button>
-        }
-        avatar={
-          <Avatar>
-            <ShoppingCartSimpleIcon fontSize="var(--Icon-fontSize)" />
-          </Avatar>
-        }
-        title="Payments"
-      />
-      <CardContent>
-        <Stack spacing={3}>
-          <Card sx={{ borderRadius: 1 }} variant="outlined">
-            <Stack
-              direction="row"
-              divider={<Divider flexItem orientation="vertical" />}
-              spacing={3}
-              sx={{ justifyContent: 'space-between', p: 2 }}
-            >
-              <div>
-                <Typography color="text.secondary" variant="overline">
-                  Total orders
-                </Typography>
-                <Typography variant="h6">{new Intl.NumberFormat('en-US').format(totalOrders)}</Typography>
-              </div>
-              <div>
-                <Typography color="text.secondary" variant="overline">
-                  Orders value
-                </Typography>
-                <Typography variant="h6">
-                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(ordersValue)}
-                </Typography>
-              </div>
-              <div>
-                <Typography color="text.secondary" variant="overline">
-                  Refunds
-                </Typography>
-                <Typography variant="h6">
-                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(refundsValue)}
-                </Typography>
-              </div>
-            </Stack>
-          </Card>
-          <Card sx={{ borderRadius: 1 }} variant="outlined">
-            <Box sx={{ overflowX: 'auto' }}>
-              <DataTable<Payment> columns={columns} rows={payments} />
-            </Box>
-          </Card>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}

002_source/cms/src/components/dashboard/user.de/phone-filter-popover.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-
-import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
-
-// phone-filter-popover.tsx
-export default function PhoneFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
-
-  return (
-    <FilterPopover
-      anchorEl={anchorEl}
-      onClose={onClose}
-      open={open}
-      title="Filter by phone number"
-    >
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}

002_source/cms/src/components/dashboard/user.de/shipping-address.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
-
-export interface Address {
-  id: string;
-  country: string;
-  state: string;
-  city: string;
-  zipCode: string;
-  street: string;
-  primary?: boolean;
-}
-
-export interface ShippingAddressProps {
-  address: Address;
-}
-
-export function ShippingAddress({ address }: ShippingAddressProps): React.ReactElement {
-  return (
-    <Card sx={{ borderRadius: 1, height: '100%' }} variant="outlined">
-      <CardContent>
-        <Stack spacing={2}>
-          <Typography>
-            {address.street},
-            <br />
-            {address.city}, {address.state}, {address.country},
-            <br />
-            {address.zipCode}
-          </Typography>
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-            {address.primary ? <Chip color="warning" label="Primary" variant="soft" /> : <span />}
-            <Button color="secondary" size="small" startIcon={<PencilSimpleIcon />}>
-              Edit
-            </Button>
-          </Stack>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}

002_source/cms/src/components/dashboard/user.de/type.d.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-export type SortDir = 'asc' | 'desc';
-
-export interface User {
-  id: string;
-  name: string;
-  avatar?: string;
-  email: string;
-  phone?: string;
-  quota: number;
-  status: 'pending' | 'active' | 'blocked';
-  createdAt: Date;
-  updatedAt?: Date;
-}
-
-export interface CreateFormProps {
-  name: string;
-  email: string;
-  phone?: string;
-  company?: string;
-  billingAddress?: {
-    country: string;
-    state: string;
-    city: string;
-    zipCode: string;
-    line1: string;
-    line2?: string;
-  };
-  taxId?: string;
-  timezone: string;
-  language: string;
-  currency: string;
-  avatar?: string;
-  // quota?: number;
-  // status?: 'pending' | 'active' | 'blocked';
-}
-
-export interface EditFormProps {
-  name: string;
-  email: string;
-  phone?: string;
-  company?: string;
-  billingAddress?: {
-    country: string;
-    state: string;
-    city: string;
-    zipCode: string;
-    line1: string;
-    line2?: string;
-  };
-  taxId?: string;
-  timezone: string;
-  language: string;
-  currency: string;
-  avatar?: string;
-  // quota?: number;
-  // status?: 'pending' | 'active' | 'blocked';
-}
-export interface CustomersFiltersProps {
-  filters?: Filters;
-  sortDir?: SortDir;
-  fullData: User[];
-}
-export interface Filters {
-  email?: string;
-  phone?: string;
-  status?: string;
-}