update, in the middle,

002_source/cms/src/app/dashboard/Sample/repomix-output.xml

@@ -0,0 +1,558 @@
+This file is a merged representation of the entire codebase, combined into a single document by Repomix.
+
+<file_summary>
+This section contains a summary of this file.
+
+<purpose>
+This file contains a packed representation of the entire repository's contents.
+It is designed to be easily consumable by AI systems for analysis, code review,
+or other automated processes.
+</purpose>
+
+<file_format>
+The content is organized as follows:
+1. This summary section
+2. Repository information
+3. Directory structure
+4. Repository files, each consisting of:
+  - File path as an attribute
+  - Full contents of the file
+</file_format>
+
+<usage_guidelines>
+- This file should be treated as read-only. Any changes should be made to the
+  original repository files, not this packed version.
+- When processing this file, use the file path to distinguish
+  between different files in the repository.
+- Be aware that this file may contain sensitive information. Handle it with
+  the same level of security as you would the original repository.
+</usage_guidelines>
+
+<notes>
+- Some files may have been excluded based on .gitignore rules and Repomix's configuration
+- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
+- Files matching patterns in .gitignore are excluded
+- Files matching default ignore patterns are excluded
+- Files are sorted by Git change count (files with more changes are at the bottom)
+</notes>
+
+<additional_info>
+
+</additional_info>
+
+</file_summary>
+
+<directory_structure>
+AddressCard/
+  index.tsx
+  SampleAddresses.tsx
+BasicDetailCard/
+  index.tsx
+Notifications/
+  index.tsx
+  type.d.ts
+PaymentCard/
+  index.tsx
+  SamplePayments.tsx
+SecurityCard/
+  index.tsx
+TitleCard/
+  index.tsx
+Helloworld.tsx
+</directory_structure>
+
+<files>
+This section contains the contents of the repository's files.
+
+<file path="AddressCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Grid from '@mui/material/Unstable_Grid2';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';
+
+import { SampleAddresses } from './SampleAddresses';
+
+export default function SampleAddressCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <Button
+            color="secondary"
+            startIcon={<PlusIcon />}
+          >
+            {t('list.add')}
+          </Button>
+        }
+        avatar={
+          <Avatar>
+            <HouseIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.shipping-addresses')}
+      />
+      <CardContent>
+        <Grid
+          container
+          spacing={3}
+        >
+          {(SampleAddresses satisfies Address[]).map((address) => (
+            <Grid
+              key={address.id}
+              md={6}
+              xs={12}
+            >
+              <ShippingAddress address={address} />
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+}
+</file>
+
+<file path="AddressCard/SampleAddresses.tsx">
+'use client';
+
+import type { Address } from '@/types/Address';
+
+export const SampleAddresses: Address[] = [
+  {
+    id: 'ADR-001',
+    country: 'United States',
+    state: 'Michigan',
+    city: 'Lansing',
+    zipCode: '48933',
+    street: '480 Haven Lane',
+    primary: true,
+  },
+  {
+    id: 'ADR-002',
+    country: 'United States',
+    state: 'Missouri',
+    city: 'Springfield',
+    zipCode: '65804',
+    street: '4807 Lighthouse Drive',
+  },
+];
+</file>
+
+<file path="BasicDetailCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import Avatar from '@mui/material/Avatar';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+
+export default function BasicDetailCard({
+  lpCatId,
+  handleEditClick,
+}: {
+  lpCatId: string;
+  handleEditClick: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <IconButton
+            onClick={() => {
+              handleEditClick();
+            }}
+          >
+            <PencilSimpleIcon />
+          </IconButton>
+        }
+        avatar={
+          <Avatar>
+            <UserIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.basic-details')}
+      />
+      <PropertyList
+        divider={<Divider />}
+        orientation="vertical"
+        sx={{ '--PropertyItem-padding': '12px 24px' }}
+      >
+        {(
+          [
+            {
+              key: 'Customer ID',
+              value: (
+                <Chip
+                  label="USR-001"
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Name', value: 'Miron Vitold' },
+            { key: 'Email', value: 'miron.vitold@domain.com' },
+            { key: 'Phone', value: '(425) 434-5535' },
+            { key: 'Company', value: 'Devias IO' },
+            {
+              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"
+                  >
+                    50%
+                  </Typography>
+                </Stack>
+              ),
+            },
+          ] satisfies { key: string; value: React.ReactNode }[]
+        ).map(
+          (item): React.JSX.Element => (
+            <PropertyItem
+              key={item.key}
+              name={item.key}
+              value={item.value}
+            />
+          )
+        )}
+      </PropertyList>
+    </Card>
+  );
+}
+</file>
+
+<file path="Notifications/index.tsx">
+'use client';
+
+import { dayjs } from '@/lib/dayjs';
+
+import type { Notification } from './type';
+
+export const SampleNotifications: Notification[] = [
+  {
+    id: 'EV-002',
+    type: 'Refund request approved',
+    status: 'pending',
+    createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
+  },
+  {
+    id: 'EV-001',
+    type: 'Order confirmation',
+    status: 'delivered',
+    createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
+  },
+];
+</file>
+
+<file path="Notifications/type.d.ts">
+export interface Notification {
+  id: string;
+  type: string;
+  status: 'delivered' | 'pending' | 'failed';
+  createdAt: Date;
+}
+</file>
+
+<file path="PaymentCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Divider from '@mui/material/Divider';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { Payments } from '@/components/dashboard/lp/categories/payments';
+
+import { SamplePayments } from './SamplePayments';
+
+export default function SamplePaymentCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Payments
+        ordersValue={2069.48}
+        payments={SamplePayments}
+        refundsValue={324.5}
+        totalOrders={5}
+      />
+      <Card>
+        <CardHeader
+          action={
+            <Button
+              color="secondary"
+              startIcon={<PencilSimpleIcon />}
+            >
+              {t('list.edit')}
+            </Button>
+          }
+          avatar={
+            <Avatar>
+              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+            </Avatar>
+          }
+          title={t('list.billing-details')}
+        />
+        <CardContent>
+          <Card
+            sx={{ borderRadius: 1 }}
+            variant="outlined"
+          >
+            <PropertyList
+              divider={<Divider />}
+              sx={{ '--PropertyItem-padding': '16px' }}
+            >
+              {(
+                [
+                  { key: t('Credit card'), value: '**** 4142' },
+                  { key: t('Country'), value: t('United States') },
+                  { key: t('State'), value: t('Michigan') },
+                  { key: t('City'), value: t('Southfield') },
+                  { key: t('Address'), value: t('Address') },
+                  { key: t('Tax ID'), value: t('Tax ID') },
+                ] satisfies { key: string; value: React.ReactNode }[]
+              ).map(
+                (item): React.JSX.Element => (
+                  <PropertyItem
+                    key={item.key}
+                    name={item.key}
+                    value={item.value}
+                  />
+                )
+              )}
+            </PropertyList>
+          </Card>
+        </CardContent>
+      </Card>
+    </>
+  );
+}
+</file>
+
+<file path="PaymentCard/SamplePayments.tsx">
+'use client';
+
+// import { dayjs } from 'dayjs';
+import type { Payment } from '@/types/Payment';
+import { dayjs } from '@/lib/dayjs';
+
+export const SamplePayments: Payment[] = [
+  {
+    currency: 'USD',
+    amount: 500,
+    invoiceId: 'INV-005',
+    status: 'completed',
+    createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 324.5,
+    invoiceId: 'INV-004',
+    status: 'refunded',
+    createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 746.5,
+    invoiceId: 'INV-003',
+    status: 'completed',
+    createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 56.89,
+    invoiceId: 'INV-002',
+    status: 'completed',
+    createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 541.59,
+    invoiceId: 'INV-001',
+    status: 'completed',
+    createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
+  },
+];
+</file>
+
+<file path="SecurityCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { useTranslation } from 'react-i18next';
+
+export default function SampleSecurityCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar>
+            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.security')}
+      />
+      <CardContent>
+        <Stack spacing={1}>
+          <div>
+            <Button
+              color="error"
+              variant="contained"
+            >
+              {t('Delete account')}
+            </Button>
+          </div>
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
+            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}
+</file>
+
+<file path="TitleCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import { Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+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';
+
+export default function SampleTitleCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          src="/assets/avatar-1.png"
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          empty
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{t('list.customer-name')}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={t('list.active')}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {t('list.customer-email')}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}
+</file>
+
+<file path="Helloworld.tsx">
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+
+function Page(): React.JSX.Element {
+  React.useLayoutEffect(() => {
+    console.log('helloworld');
+  }, []);
+
+  return <>helloworld</>;
+}
+
+export default Page;
+</file>
+
+</files>

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

@@ -13,13 +13,13 @@ 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 { CrCategory } from '@/components/dashboard/cr/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,
   handleEditClick,
 }: {
-  lpModel: LpCategory;
+  lpModel: CrCategory;
   handleEditClick: () => void;
 }): React.JSX.Element {
   const { t } = useTranslation();

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

@@ -10,13 +10,13 @@ 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';
+import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 
-function getImageUrlFrRecord(record: LpCategory): string {
+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: LpCategory }): React.JSX.Element {
+export default function SampleTitleCard({ lpModel }: { lpModel: CrCategory }): React.JSX.Element {
   const { t } = useTranslation();
 
   return (

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

@@ -7,7 +7,7 @@ import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
 import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
 import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
 import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
-import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
+import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
@@ -21,9 +21,9 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpCategory } from '@/components/dashboard/lp/categories/_constants.ts';
+import { defaultCrCategory } from '@/components/dashboard/cr/categories/_constants.ts';
-import { Notifications } from '@/components/dashboard/lp/categories/notifications';
+import { Notifications } from '@/components/dashboard/cr/categories/notifications';
-import type { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 import FormLoading from '@/components/loading';
 
 import BasicDetailCard from './BasicDetailCard';
@@ -39,18 +39,18 @@ export default function Page(): React.JSX.Element {
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
 
   //
-  const [showLessonCategory, setShowLessonCategory] = React.useState<LpCategory>(defaultLpCategory);
+  const [showLessonCategory, setShowLessonCategory] = React.useState<CrCategory>(defaultCrCategory);
 
   function handleEditClick() {
-    router.push(paths.dashboard.lp_categories.edit(showLessonCategory.id));
+    router.push(paths.dashboard.cr_categories.edit(showLessonCategory.id));
   }
 
   React.useEffect(() => {
     if (catId) {
-      pb.collection(COL_QUIZ_LP_CATEGORIES)
+      pb.collection(COL_QUIZ_CR_CATEGORIES)
         .getOne(catId)
         .then((model: RecordModel) => {
-          setShowLessonCategory({ ...defaultLpCategory, ...model });
+          setShowLessonCategory({ ...defaultCrCategory, ...model });
         })
         .catch((err) => {
           logger.error(err);
@@ -89,7 +89,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_categories.list}
+              href={paths.dashboard.cr_categories.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >

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

@@ -13,10 +13,10 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpCategoryCreateForm } from '@/components/dashboard/lp/categories/lp-category-create-form';
+import { CrCategoryCreateForm } from '@/components/dashboard/cr/categories/cr-category-create-form';
 
 export default function Page(): React.JSX.Element {
-  // RULES: follow the name of page directory
+  // RULES: follow the name of page directory e.g. cr/categoies -> cr_categories
   const { t } = useTranslation(['lp_categories']);
 
   return (
@@ -34,7 +34,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_categories.list}
+              href={paths.dashboard.cr_categories.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
             <Typography variant="h4">{t('create.title')}</Typography>
           </div>
         </Stack>
-        <LpCategoryCreateForm />
+        <CrCategoryCreateForm />
       </Stack>
     </Box>
   );

002_source/cms/src/app/dashboard/cr/categories/edit/[cat_id]/page.tsx

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpCategoryEditForm } from '@/components/dashboard/lp/categories/lp-category-edit-form';
+import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
@@ -34,7 +34,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_categories.list}
+              href={paths.dashboard.cr_categories.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
             <Typography variant="h4">{t('edit.title')}</Typography>
           </div>
         </Stack>
-        <LpCategoryEditForm />
+        <CrCategoryEditForm />
       </Stack>
     </Box>
   );

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

@@ -1,12 +1,12 @@
 'use client';
 
 // RULES:
-// contains list page for lp_categories (QuizLPCategories)
+// contains list page for cr_categories (QuizCRCategories)
 // contain definition to collection only
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
-import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
+import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -22,21 +22,21 @@ import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
+import { defaultCrCategory } from '@/components/dashboard/cr/categories/_constants';
+import { CrCategoriesFilters } from '@/components/dashboard/cr/categories/cr-categories-filters';
+import type { Filters } from '@/components/dashboard/cr/categories/cr-categories-filters';
+import { CrCategoriesPagination } from '@/components/dashboard/cr/categories/cr-categories-pagination';
+import { CrCategoriesSelectionProvider } from '@/components/dashboard/cr/categories/cr-categories-selection-context';
+import { CrCategoriesTable } from '@/components/dashboard/cr/categories/cr-categories-table';
+import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpCategory } from '@/components/dashboard/lp/categories/_constants';
-import { LpCategoriesFilters } from '@/components/dashboard/lp/categories/lp-categories-filters';
-import type { Filters } from '@/components/dashboard/lp/categories/lp-categories-filters';
-import { LpCategoriesPagination } from '@/components/dashboard/lp/categories/lp-categories-pagination';
-import { LpCategoriesSelectionProvider } from '@/components/dashboard/lp/categories/lp-categories-selection-context';
-import { LpCategoriesTable } from '@/components/dashboard/lp/categories/lp-categories-table';
-import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
   const { email, phone, sortDir, status, name, visible, type } = searchParams;
   const router = useRouter();
-  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<LpCategory[]>([]);
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<CrCategory[]>([]);
   //
 
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -45,7 +45,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   //
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
   //
-  const [f, setF] = React.useState<LpCategory[]>([]);
+  const [f, setF] = React.useState<CrCategory[]>([]);
   const [currentPage, setCurrentPage] = React.useState<number>(0);
   //
   const [recordCount, setRecordCount] = React.useState<number>(0);
@@ -60,11 +60,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const reloadRows = async (): Promise<void> => {
     try {
       const models: ListResult<RecordModel> = await pb
-        .collection(COL_QUIZ_LP_CATEGORIES)
+        .collection(COL_QUIZ_CR_CATEGORIES)
         .getList(currentPage + 1, rowsPerPage, listOption);
       const { items, totalItems } = models;
-      const tempLessonTypes: LpCategory[] = items.map((lt) => {
+      const tempLessonTypes: CrCategory[] = items.map((lt) => {
-        return { ...defaultLpCategory, ...lt };
+        return { ...defaultCrCategory, ...lt };
       });
 
       setLessonCategoriesData(tempLessonTypes);
@@ -172,7 +172,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               loading={isLoadingAddPage}
               onClick={(): void => {
                 setIsLoadingAddPage(true);
-                router.push(paths.dashboard.lp_categories.create);
+                router.push(paths.dashboard.cr_categories.create);
               }}
               startIcon={<PlusIcon />}
               variant="contained"
@@ -181,22 +181,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
             </LoadingButton>
           </Box>
         </Stack>
-        <LpCategoriesSelectionProvider lessonCategories={f}>
+        <CrCategoriesSelectionProvider lessonCategories={f}>
           <Card>
-            <LpCategoriesFilters
+            <CrCategoriesFilters
               filters={{ email, phone, status, name, visible, type }}
               fullData={lessonCategoriesData}
               sortDir={sortDir}
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <LpCategoriesTable
+              <CrCategoriesTable
                 reloadRows={reloadRows}
                 rows={f}
               />
             </Box>
             <Divider />
-            <LpCategoriesPagination
+            <CrCategoriesPagination
               count={recordCount}
               page={currentPage}
               rowsPerPage={rowsPerPage}
@@ -204,7 +204,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               setRowsPerPage={setRowsPerPage}
             />
           </Card>
-        </LpCategoriesSelectionProvider>
+        </CrCategoriesSelectionProvider>
       </Stack>
       <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
         <pre>{JSON.stringify(f, null, 2)}</pre>
@@ -215,7 +215,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
 
 // Sorting and filtering has to be done on the server.
 
-function applySort(row: LpCategory[], sortDir: 'asc' | 'desc' | undefined): LpCategory[] {
+function applySort(row: CrCategory[], sortDir: 'asc' | 'desc' | undefined): CrCategory[] {
   return row.sort((a, b) => {
     if (sortDir === 'asc') {
       return a.createdAt.getTime() - b.createdAt.getTime();
@@ -225,7 +225,7 @@ function applySort(row: LpCategory[], sortDir: 'asc' | 'desc' | undefined): LpCa
   });
 }
 
-function applyFilters(row: LpCategory[], { email, phone, status, name, visible }: Filters): LpCategory[] {
+function applyFilters(row: CrCategory[], { email, phone, status, name, visible }: Filters): CrCategory[] {
   return row.filter((item) => {
     if (email) {
       if (!item.email?.toLowerCase().includes(email.toLowerCase())) {

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

@@ -7,7 +7,7 @@ import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
 import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
 import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
 import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
-import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
+import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
 import { Grid } from '@mui/material';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
@@ -21,9 +21,9 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpQuestion } from '@/components/dashboard/lp/questions/_constants.ts';
+import { defaultCrQuestion } from '@/components/dashboard/cr/questions/_constants.ts';
-import { Notifications } from '@/components/dashboard/lp/questions/notifications';
+import { Notifications } from '@/components/dashboard/cr/questions/notifications';
-import type { LpQuestion } from '@/components/dashboard/lp/questions/type';
+import type { CrQuestion } from '@/components/dashboard/cr/questions/type';
 import FormLoading from '@/components/loading';
 
 import BasicDetailCard from './BasicDetailCard';
@@ -39,18 +39,18 @@ export default function Page(): React.JSX.Element {
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
 
   //
-  const [showLessonQuestion, setShowLessonQuestion] = React.useState<LpQuestion>(defaultLpQuestion);
+  const [showLessonQuestion, setShowLessonQuestion] = React.useState<CrQuestion>(defaultCrQuestion);
 
   function handleEditClick() {
-    router.push(paths.dashboard.lp_questions.edit(showLessonQuestion.id));
+    router.push(paths.dashboard.cr_questions.edit(showLessonQuestion.id));
   }
 
   React.useEffect(() => {
     if (catId) {
-      pb.collection(COL_QUIZ_LP_QUESTIONS)
+      pb.collection(COL_QUIZ_CR_QUESTIONS)
         .getOne(catId)
         .then((model: RecordModel) => {
-          setShowLessonQuestion({ ...defaultLpQuestion, ...model });
+          setShowLessonQuestion({ ...defaultCrQuestion, ...model });
         })
         .catch((err) => {
           logger.error(err);
@@ -89,7 +89,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_questions.list}
+              href={paths.dashboard.cr_questions.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >

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

@@ -1,7 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 import { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
-export const LpCategoriesSampleData = [
+export const CrCategoriesSampleData = [
   {
     id: 'USR-005',
     name: 'Fran Perez',

002_source/cms/src/app/dashboard/cr/questions/create/page.tsx

@@ -13,7 +13,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpQuestionCreateForm } from '@/components/dashboard/lp/questions/lp-question-create-form';
+import { CrQuestionCreateForm } from '@/components/dashboard/cr/questions/cr-question-create-form';
 
 export default function Page(): React.JSX.Element {
   // RULES: follow the name of page directory
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
             <Typography variant="h4">{t('create.title')}</Typography>
           </div>
         </Stack>
-        <LpQuestionCreateForm />
+        <CrQuestionCreateForm />
       </Stack>
     </Box>
   );

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

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpQuestionEditForm } from '@/components/dashboard/lp/questions/lp-question-edit-form';
+import { CrQuestionEditForm } from '@/components/dashboard/cr/questions/cr-question-edit-form';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation(['lp_questions']);
@@ -46,7 +46,7 @@ export default function Page(): React.JSX.Element {
             <Typography variant="h4">{t('edit.title')}</Typography>
           </div>
         </Stack>
-        <LpQuestionEditForm />
+        <CrQuestionEditForm />
       </Stack>
     </Box>
   );

002_source/cms/src/app/dashboard/cr/questions/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 // RULES:
-// contains list page for lp_questions (QuizLPQuestions)
+// contains list page for cr_questions (QuizCRQuestions)
 // contain definition to collection only
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
-import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
+import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -23,20 +23,20 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpQuestion } from '@/components/dashboard/lp/questions/_constants';
+import { defaultCrQuestion } from '@/components/dashboard/cr/questions/_constants';
-import { LpQuestionsFilters } from '@/components/dashboard/lp/questions/lp-questions-filters';
+import { CrQuestionsFilters } from '@/components/dashboard/cr/questions/cr-questions-filters';
-import type { Filters } from '@/components/dashboard/lp/questions/lp-questions-filters';
+import type { Filters } from '@/components/dashboard/cr/questions/cr-questions-filters';
-import { LpQuestionsPagination } from '@/components/dashboard/lp/questions/lp-questions-pagination';
+import { CrQuestionsPagination } from '@/components/dashboard/cr/questions/cr-questions-pagination';
-import { LpQuestionsSelectionProvider } from '@/components/dashboard/lp/questions/lp-questions-selection-context';
+import { CrQuestionsSelectionProvider } from '@/components/dashboard/cr/questions/cr-questions-selection-context';
-import { LpQuestionsTable } from '@/components/dashboard/lp/questions/lp-questions-table';
+import { CrQuestionsTable } from '@/components/dashboard/cr/questions/cr-questions-table';
-import type { LpQuestion } from '@/components/dashboard/lp/questions/type';
+import type { CrQuestion } from '@/components/dashboard/cr/questions/type';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['lp_questions']);
   const { email, phone, sortDir, status, name, visible, type } = searchParams;
   const router = useRouter();
-  const [lessonQuestionsData, setLessonCategoriesData] = React.useState<LpQuestion[]>([]);
+  const [lessonQuestionsData, setLessonCategoriesData] = React.useState<CrQuestion[]>([]);
   //
 
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -45,7 +45,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   //
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
   //
-  const [f, setF] = React.useState<LpQuestion[]>([]);
+  const [f, setF] = React.useState<CrQuestion[]>([]);
   const [currentPage, setCurrentPage] = React.useState<number>(0);
   //
   const [recordCount, setRecordCount] = React.useState<number>(0);
@@ -59,11 +59,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const reloadRows = async (): Promise<void> => {
     try {
       const models: ListResult<RecordModel> = await pb
-        .collection(COL_QUIZ_LP_QUESTIONS)
+        .collection(COL_QUIZ_CR_QUESTIONS)
         .getList(currentPage + 1, rowsPerPage, listOption);
       const { items, totalItems } = models;
-      const tempLessonTypes: LpQuestion[] = items.map((lt) => {
+      const tempLessonTypes: CrQuestion[] = items.map((lt) => {
-        return { ...defaultLpQuestion, ...lt };
+        return { ...defaultCrQuestion, ...lt };
       });
 
       setLessonCategoriesData(tempLessonTypes);
@@ -88,15 +88,13 @@ 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)) {
+      // reset page number as tab changes
+      setLastListOption(listOption);
+      setCurrentPage(0);
+      void reloadRows();
     } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+      void reloadRows();
-        // reset page number as tab changes
-        setLastListOption(listOption);
-        setCurrentPage(0);
-        void reloadRows();
-      } else {
-        void reloadRows();
-      }
     }
   }, [currentPage, rowsPerPage, listOption]);
 
@@ -171,7 +169,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               loading={isLoadingAddPage}
               onClick={(): void => {
                 setIsLoadingAddPage(true);
-                router.push(paths.dashboard.lp_questions.create);
+                router.push(paths.dashboard.cr_questions.create);
               }}
               startIcon={<PlusIcon />}
               variant="contained"
@@ -180,22 +178,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
             </LoadingButton>
           </Box>
         </Stack>
-        <LpQuestionsSelectionProvider lessonQuestions={f}>
+        <CrQuestionsSelectionProvider lessonQuestions={f}>
           <Card>
-            <LpQuestionsFilters
+            <CrQuestionsFilters
               filters={{ email, phone, status, name, visible, type }}
               fullData={lessonQuestionsData}
               sortDir={sortDir}
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <LpQuestionsTable
+              <CrQuestionsTable
                 reloadRows={reloadRows}
                 rows={f}
               />
             </Box>
             <Divider />
-            <LpQuestionsPagination
+            <CrQuestionsPagination
               count={recordCount}
               page={currentPage}
               rowsPerPage={rowsPerPage}
@@ -203,7 +201,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               setRowsPerPage={setRowsPerPage}
             />
           </Card>
-        </LpQuestionsSelectionProvider>
+        </CrQuestionsSelectionProvider>
       </Stack>
       <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
         <pre>{JSON.stringify(f, null, 2)}</pre>
@@ -214,7 +212,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
 
 // Sorting and filtering has to be done on the server.
 
-function applySort(row: LpQuestion[], sortDir: 'asc' | 'desc' | undefined): LpQuestion[] {
+function applySort(row: CrQuestion[], sortDir: 'asc' | 'desc' | undefined): CrQuestion[] {
   return row.sort((a, b) => {
     if (sortDir === 'asc') {
       return a.createdAt.getTime() - b.createdAt.getTime();
@@ -224,7 +222,7 @@ function applySort(row: LpQuestion[], sortDir: 'asc' | 'desc' | undefined): LpQu
   });
 }
 
-function applyFilters(row: LpQuestion[], { email, phone, status, name, visible }: Filters): LpQuestion[] {
+function applyFilters(row: CrQuestion[], { email, phone, status, name, visible }: Filters): CrQuestion[] {
   return row.filter((item) => {
     if (email) {
       if (!item.email?.toLowerCase().includes(email.toLowerCase())) {

002_source/cms/src/app/dashboard/cr_categories/[customerId]/page.tsx

@@ -1,308 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import RouterLink from 'next/link';
-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 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 Grid from '@mui/material/Unstable_Grid2';
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
-import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
-import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
-import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
-import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
-import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
-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 { config } from '@/config';
-import { paths } from '@/paths';
-import { dayjs } from '@/lib/dayjs';
-import { PropertyItem } from '@/components/core/property-item';
-import { PropertyList } from '@/components/core/property-list';
-import { Notifications } from '@/components/dashboard/customer/notifications';
-import { Payments } from '@/components/dashboard/customer/payments';
-import type { Address } from '@/components/dashboard/customer/shipping-address';
-import { ShippingAddress } from '@/components/dashboard/customer/shipping-address';
-
-export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
-export default function Page(): React.JSX.Element {
-  return (
-    <Box
-      sx={{
-        maxWidth: 'var(--Content-maxWidth)',
-        m: 'var(--Content-margin)',
-        p: 'var(--Content-padding)',
-        width: 'var(--Content-width)',
-      }}
-    >
-      <Stack spacing={4}>
-        <Stack spacing={3}>
-          <div>
-            <Link
-              color="text.primary"
-              component={RouterLink}
-              href={paths.dashboard.customers.list}
-              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
-              variant="subtitle2"
-            >
-              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
-            </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' }}>
-              <Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
-                MV
-              </Avatar>
-              <div>
-                <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
-                  <Typography variant="h4">Miron Vitold</Typography>
-                  <Chip
-                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
-                    label="Active"
-                    size="small"
-                    variant="outlined"
-                  />
-                </Stack>
-                <Typography color="text.secondary" variant="body1">
-                  miron.vitold@domain.com
-                </Typography>
-              </div>
-            </Stack>
-            <div>
-              <Button endIcon={<CaretDownIcon />} variant="contained">
-                Action
-              </Button>
-            </div>
-          </Stack>
-        </Stack>
-        <Grid container spacing={4}>
-          <Grid lg={4} xs={12}>
-            <Stack spacing={4}>
-              <Card>
-                <CardHeader
-                  action={
-                    <IconButton>
-                      <PencilSimpleIcon />
-                    </IconButton>
-                  }
-                  avatar={
-                    <Avatar>
-                      <UserIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Basic details"
-                />
-                <PropertyList
-                  divider={<Divider />}
-                  orientation="vertical"
-                  sx={{ '--PropertyItem-padding': '12px 24px' }}
-                >
-                  {(
-                    [
-                      { key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
-                      { key: 'Name', value: 'Miron Vitold' },
-                      { key: 'Email', value: 'miron.vitold@domain.com' },
-                      { key: 'Phone', value: '(425) 434-5535' },
-                      { key: 'Company', value: 'Devias IO' },
-                      {
-                        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">
-                              50%
-                            </Typography>
-                          </Stack>
-                        ),
-                      },
-                    ] satisfies { key: string; value: React.ReactNode }[]
-                  ).map(
-                    (item): React.JSX.Element => (
-                      <PropertyItem key={item.key} name={item.key} value={item.value} />
-                    )
-                  )}
-                </PropertyList>
-              </Card>
-              <Card>
-                <CardHeader
-                  avatar={
-                    <Avatar>
-                      <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Security"
-                />
-                <CardContent>
-                  <Stack spacing={1}>
-                    <div>
-                      <Button color="error" variant="contained">
-                        Delete account
-                      </Button>
-                    </div>
-                    <Typography color="text.secondary" variant="body2">
-                      A deleted customer cannot be restored. All data will be permanently removed.
-                    </Typography>
-                  </Stack>
-                </CardContent>
-              </Card>
-            </Stack>
-          </Grid>
-          <Grid lg={8} xs={12}>
-            <Stack spacing={4}>
-              <Payments
-                ordersValue={2069.48}
-                payments={[
-                  {
-                    currency: 'USD',
-                    amount: 500,
-                    invoiceId: 'INV-005',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 324.5,
-                    invoiceId: 'INV-004',
-                    status: 'refunded',
-                    createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 746.5,
-                    invoiceId: 'INV-003',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 56.89,
-                    invoiceId: 'INV-002',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 541.59,
-                    invoiceId: 'INV-001',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
-                  },
-                ]}
-                refundsValue={324.5}
-                totalOrders={5}
-              />
-              <Card>
-                <CardHeader
-                  action={
-                    <Button color="secondary" startIcon={<PencilSimpleIcon />}>
-                      Edit
-                    </Button>
-                  }
-                  avatar={
-                    <Avatar>
-                      <CreditCardIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Billing details"
-                />
-                <CardContent>
-                  <Card sx={{ borderRadius: 1 }} variant="outlined">
-                    <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
-                      {(
-                        [
-                          { key: 'Credit card', value: '**** 4142' },
-                          { key: 'Country', value: 'United States' },
-                          { key: 'State', value: 'Michigan' },
-                          { key: 'City', value: 'Southfield' },
-                          { key: 'Address', value: '1721 Bartlett Avenue, 48034' },
-                          { key: 'Tax ID', value: 'EU87956621' },
-                        ] satisfies { key: string; value: React.ReactNode }[]
-                      ).map(
-                        (item): React.JSX.Element => (
-                          <PropertyItem key={item.key} name={item.key} value={item.value} />
-                        )
-                      )}
-                    </PropertyList>
-                  </Card>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader
-                  action={
-                    <Button color="secondary" startIcon={<PlusIcon />}>
-                      Add
-                    </Button>
-                  }
-                  avatar={
-                    <Avatar>
-                      <HouseIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Shipping addresses"
-                />
-                <CardContent>
-                  <Grid container spacing={3}>
-                    {(
-                      [
-                        {
-                          id: 'ADR-001',
-                          country: 'United States',
-                          state: 'Michigan',
-                          city: 'Lansing',
-                          zipCode: '48933',
-                          street: '480 Haven Lane',
-                          primary: true,
-                        },
-                        {
-                          id: 'ADR-002',
-                          country: 'United States',
-                          state: 'Missouri',
-                          city: 'Springfield',
-                          zipCode: '65804',
-                          street: '4807 Lighthouse Drive',
-                        },
-                      ] satisfies Address[]
-                    ).map((address) => (
-                      <Grid key={address.id} md={6} xs={12}>
-                        <ShippingAddress address={address} />
-                      </Grid>
-                    ))}
-                  </Grid>
-                </CardContent>
-              </Card>
-              <Notifications
-                notifications={[
-                  {
-                    id: 'EV-002',
-                    type: 'Refund request approved',
-                    status: 'pending',
-                    createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
-                  },
-                  {
-                    id: 'EV-001',
-                    type: 'Order confirmation',
-                    status: 'delivered',
-                    createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
-                  },
-                ]}
-              />
-            </Stack>
-          </Grid>
-        </Grid>
-      </Stack>
-    </Box>
-  );
-}

002_source/cms/src/app/dashboard/cr_categories/create/page.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import RouterLink from 'next/link';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
-
-import { config } from '@/config';
-import { paths } from '@/paths';
-import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
-
-export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
-export default function Page(): React.JSX.Element {
-  return (
-    <Box
-      sx={{
-        maxWidth: 'var(--Content-maxWidth)',
-        m: 'var(--Content-margin)',
-        p: 'var(--Content-padding)',
-        width: 'var(--Content-width)',
-      }}
-    >
-      <Stack spacing={4}>
-        <Stack spacing={3}>
-          <div>
-            <Link
-              color="text.primary"
-              component={RouterLink}
-              href={paths.dashboard.customers.list}
-              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
-              variant="subtitle2"
-            >
-              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
-            </Link>
-          </div>
-          <div>
-            <Typography variant="h4">Create customer</Typography>
-          </div>
-        </Stack>
-        <CustomerCreateForm />
-      </Stack>
-    </Box>
-  );
-}

002_source/cms/src/app/dashboard/cr_categories/page.tsx

@@ -1,255 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
-
-import { config } from '@/config';
-import { dayjs } from '@/lib/dayjs';
-import { CustomersFilters } from '@/components/dashboard/customer/customers-filters';
-import type { Filters } from '@/components/dashboard/customer/customers-filters';
-import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
-import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
-import { CustomersTable } from '@/components/dashboard/customer/customers-table';
-import type { Customer } from '@/components/dashboard/customer/customers-table';
-
-export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
-const customers = [
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-] satisfies Customer[];
-
-interface PageProps {
-  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
-}
-
-export default function Page({ searchParams }: PageProps): React.JSX.Element {
-  const { email, phone, sortDir, status } = searchParams;
-
-  const sortedCustomers = applySort(customers, sortDir);
-  const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
-
-  return (
-    <Box
-      sx={{
-        maxWidth: 'var(--Content-maxWidth)',
-        m: 'var(--Content-margin)',
-        p: 'var(--Content-padding)',
-        width: 'var(--Content-width)',
-      }}
-    >
-      <Stack spacing={4}>
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
-          <Box sx={{ flex: '1 1 auto' }}>
-            <Typography variant="h4">Customers</Typography>
-          </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button startIcon={<PlusIcon />} variant="contained">
-              Add
-            </Button>
-          </Box>
-        </Stack>
-        <CustomersSelectionProvider customers={filteredCustomers}>
-          <Card>
-            <CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
-            <Divider />
-            <Box sx={{ overflowX: 'auto' }}>
-              <CustomersTable rows={filteredCustomers} />
-            </Box>
-            <Divider />
-            <CustomersPagination count={filteredCustomers.length + 100} page={0} />
-          </Card>
-        </CustomersSelectionProvider>
-      </Stack>
-    </Box>
-  );
-}
-
-// Sorting and filtering has to be done on the server.
-
-function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Customer[] {
-  return row.sort((a, b) => {
-    if (sortDir === 'asc') {
-      return a.createdAt.getTime() - b.createdAt.getTime();
-    }
-
-    return b.createdAt.getTime() - a.createdAt.getTime();
-  });
-}
-
-function applyFilters(row: Customer[], { email, phone, status }: Filters): Customer[] {
-  return row.filter((item) => {
-    if (email) {
-      if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
-        return false;
-      }
-    }
-
-    if (phone) {
-      if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
-        return false;
-      }
-    }
-
-    if (status) {
-      if (item.status !== status) {
-        return false;
-      }
-    }
-
-    return true;
-  });
-}

002_source/cms/src/app/dashboard/cr_questions/[customerId]/page.tsx

@@ -1,308 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import RouterLink from 'next/link';
-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 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 Grid from '@mui/material/Unstable_Grid2';
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
-import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
-import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
-import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
-import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
-import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
-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 { config } from '@/config';
-import { paths } from '@/paths';
-import { dayjs } from '@/lib/dayjs';
-import { PropertyItem } from '@/components/core/property-item';
-import { PropertyList } from '@/components/core/property-list';
-import { Notifications } from '@/components/dashboard/customer/notifications';
-import { Payments } from '@/components/dashboard/customer/payments';
-import type { Address } from '@/components/dashboard/customer/shipping-address';
-import { ShippingAddress } from '@/components/dashboard/customer/shipping-address';
-
-export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
-export default function Page(): React.JSX.Element {
-  return (
-    <Box
-      sx={{
-        maxWidth: 'var(--Content-maxWidth)',
-        m: 'var(--Content-margin)',
-        p: 'var(--Content-padding)',
-        width: 'var(--Content-width)',
-      }}
-    >
-      <Stack spacing={4}>
-        <Stack spacing={3}>
-          <div>
-            <Link
-              color="text.primary"
-              component={RouterLink}
-              href={paths.dashboard.customers.list}
-              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
-              variant="subtitle2"
-            >
-              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
-            </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' }}>
-              <Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
-                MV
-              </Avatar>
-              <div>
-                <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
-                  <Typography variant="h4">Miron Vitold</Typography>
-                  <Chip
-                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
-                    label="Active"
-                    size="small"
-                    variant="outlined"
-                  />
-                </Stack>
-                <Typography color="text.secondary" variant="body1">
-                  miron.vitold@domain.com
-                </Typography>
-              </div>
-            </Stack>
-            <div>
-              <Button endIcon={<CaretDownIcon />} variant="contained">
-                Action
-              </Button>
-            </div>
-          </Stack>
-        </Stack>
-        <Grid container spacing={4}>
-          <Grid lg={4} xs={12}>
-            <Stack spacing={4}>
-              <Card>
-                <CardHeader
-                  action={
-                    <IconButton>
-                      <PencilSimpleIcon />
-                    </IconButton>
-                  }
-                  avatar={
-                    <Avatar>
-                      <UserIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Basic details"
-                />
-                <PropertyList
-                  divider={<Divider />}
-                  orientation="vertical"
-                  sx={{ '--PropertyItem-padding': '12px 24px' }}
-                >
-                  {(
-                    [
-                      { key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
-                      { key: 'Name', value: 'Miron Vitold' },
-                      { key: 'Email', value: 'miron.vitold@domain.com' },
-                      { key: 'Phone', value: '(425) 434-5535' },
-                      { key: 'Company', value: 'Devias IO' },
-                      {
-                        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">
-                              50%
-                            </Typography>
-                          </Stack>
-                        ),
-                      },
-                    ] satisfies { key: string; value: React.ReactNode }[]
-                  ).map(
-                    (item): React.JSX.Element => (
-                      <PropertyItem key={item.key} name={item.key} value={item.value} />
-                    )
-                  )}
-                </PropertyList>
-              </Card>
-              <Card>
-                <CardHeader
-                  avatar={
-                    <Avatar>
-                      <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Security"
-                />
-                <CardContent>
-                  <Stack spacing={1}>
-                    <div>
-                      <Button color="error" variant="contained">
-                        Delete account
-                      </Button>
-                    </div>
-                    <Typography color="text.secondary" variant="body2">
-                      A deleted customer cannot be restored. All data will be permanently removed.
-                    </Typography>
-                  </Stack>
-                </CardContent>
-              </Card>
-            </Stack>
-          </Grid>
-          <Grid lg={8} xs={12}>
-            <Stack spacing={4}>
-              <Payments
-                ordersValue={2069.48}
-                payments={[
-                  {
-                    currency: 'USD',
-                    amount: 500,
-                    invoiceId: 'INV-005',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 324.5,
-                    invoiceId: 'INV-004',
-                    status: 'refunded',
-                    createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 746.5,
-                    invoiceId: 'INV-003',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 56.89,
-                    invoiceId: 'INV-002',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
-                  },
-                  {
-                    currency: 'USD',
-                    amount: 541.59,
-                    invoiceId: 'INV-001',
-                    status: 'completed',
-                    createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
-                  },
-                ]}
-                refundsValue={324.5}
-                totalOrders={5}
-              />
-              <Card>
-                <CardHeader
-                  action={
-                    <Button color="secondary" startIcon={<PencilSimpleIcon />}>
-                      Edit
-                    </Button>
-                  }
-                  avatar={
-                    <Avatar>
-                      <CreditCardIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Billing details"
-                />
-                <CardContent>
-                  <Card sx={{ borderRadius: 1 }} variant="outlined">
-                    <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
-                      {(
-                        [
-                          { key: 'Credit card', value: '**** 4142' },
-                          { key: 'Country', value: 'United States' },
-                          { key: 'State', value: 'Michigan' },
-                          { key: 'City', value: 'Southfield' },
-                          { key: 'Address', value: '1721 Bartlett Avenue, 48034' },
-                          { key: 'Tax ID', value: 'EU87956621' },
-                        ] satisfies { key: string; value: React.ReactNode }[]
-                      ).map(
-                        (item): React.JSX.Element => (
-                          <PropertyItem key={item.key} name={item.key} value={item.value} />
-                        )
-                      )}
-                    </PropertyList>
-                  </Card>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader
-                  action={
-                    <Button color="secondary" startIcon={<PlusIcon />}>
-                      Add
-                    </Button>
-                  }
-                  avatar={
-                    <Avatar>
-                      <HouseIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title="Shipping addresses"
-                />
-                <CardContent>
-                  <Grid container spacing={3}>
-                    {(
-                      [
-                        {
-                          id: 'ADR-001',
-                          country: 'United States',
-                          state: 'Michigan',
-                          city: 'Lansing',
-                          zipCode: '48933',
-                          street: '480 Haven Lane',
-                          primary: true,
-                        },
-                        {
-                          id: 'ADR-002',
-                          country: 'United States',
-                          state: 'Missouri',
-                          city: 'Springfield',
-                          zipCode: '65804',
-                          street: '4807 Lighthouse Drive',
-                        },
-                      ] satisfies Address[]
-                    ).map((address) => (
-                      <Grid key={address.id} md={6} xs={12}>
-                        <ShippingAddress address={address} />
-                      </Grid>
-                    ))}
-                  </Grid>
-                </CardContent>
-              </Card>
-              <Notifications
-                notifications={[
-                  {
-                    id: 'EV-002',
-                    type: 'Refund request approved',
-                    status: 'pending',
-                    createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
-                  },
-                  {
-                    id: 'EV-001',
-                    type: 'Order confirmation',
-                    status: 'delivered',
-                    createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
-                  },
-                ]}
-              />
-            </Stack>
-          </Grid>
-        </Grid>
-      </Stack>
-    </Box>
-  );
-}

002_source/cms/src/app/dashboard/cr_questions/create/page.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import RouterLink from 'next/link';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
-
-import { config } from '@/config';
-import { paths } from '@/paths';
-import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
-
-export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
-export default function Page(): React.JSX.Element {
-  return (
-    <Box
-      sx={{
-        maxWidth: 'var(--Content-maxWidth)',
-        m: 'var(--Content-margin)',
-        p: 'var(--Content-padding)',
-        width: 'var(--Content-width)',
-      }}
-    >
-      <Stack spacing={4}>
-        <Stack spacing={3}>
-          <div>
-            <Link
-              color="text.primary"
-              component={RouterLink}
-              href={paths.dashboard.customers.list}
-              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
-              variant="subtitle2"
-            >
-              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
-            </Link>
-          </div>
-          <div>
-            <Typography variant="h4">Create customer</Typography>
-          </div>
-        </Stack>
-        <CustomerCreateForm />
-      </Stack>
-    </Box>
-  );
-}

002_source/cms/src/app/dashboard/cr_questions/page.tsx

@@ -1,255 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
-
-import { config } from '@/config';
-import { dayjs } from '@/lib/dayjs';
-import { CustomersFilters } from '@/components/dashboard/customer/customers-filters';
-import type { Filters } from '@/components/dashboard/customer/customers-filters';
-import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
-import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
-import { CustomersTable } from '@/components/dashboard/customer/customers-table';
-import type { Customer } from '@/components/dashboard/customer/customers-table';
-
-export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
-const customers = [
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-] satisfies Customer[];
-
-interface PageProps {
-  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
-}
-
-export default function Page({ searchParams }: PageProps): React.JSX.Element {
-  const { email, phone, sortDir, status } = searchParams;
-
-  const sortedCustomers = applySort(customers, sortDir);
-  const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
-
-  return (
-    <Box
-      sx={{
-        maxWidth: 'var(--Content-maxWidth)',
-        m: 'var(--Content-margin)',
-        p: 'var(--Content-padding)',
-        width: 'var(--Content-width)',
-      }}
-    >
-      <Stack spacing={4}>
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
-          <Box sx={{ flex: '1 1 auto' }}>
-            <Typography variant="h4">Customers</Typography>
-          </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button startIcon={<PlusIcon />} variant="contained">
-              Add
-            </Button>
-          </Box>
-        </Stack>
-        <CustomersSelectionProvider customers={filteredCustomers}>
-          <Card>
-            <CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
-            <Divider />
-            <Box sx={{ overflowX: 'auto' }}>
-              <CustomersTable rows={filteredCustomers} />
-            </Box>
-            <Divider />
-            <CustomersPagination count={filteredCustomers.length + 100} page={0} />
-          </Card>
-        </CustomersSelectionProvider>
-      </Stack>
-    </Box>
-  );
-}
-
-// Sorting and filtering has to be done on the server.
-
-function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Customer[] {
-  return row.sort((a, b) => {
-    if (sortDir === 'asc') {
-      return a.createdAt.getTime() - b.createdAt.getTime();
-    }
-
-    return b.createdAt.getTime() - a.createdAt.getTime();
-  });
-}
-
-function applyFilters(row: Customer[], { email, phone, status }: Filters): Customer[] {
-  return row.filter((item) => {
-    if (email) {
-      if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
-        return false;
-      }
-    }
-
-    if (phone) {
-      if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
-        return false;
-      }
-    }
-
-    if (status) {
-      if (item.status !== status) {
-        return false;
-      }
-    }
-
-    return true;
-  });
-}

002_source/cms/src/components/dashboard/cr/categories/_PROMPT.MD

@@ -1 +0,0 @@
-please review and add translations, e.g. `{t('[word]')}`

002_source/cms/src/components/dashboard/cr/categories/_SUMMARY.md

@@ -0,0 +1,94 @@
+# CR Categories Components Summary
+
+## Main Components
+
+### `cr-categories-table.tsx`
+
+- Displays categories in a table format with columns for Name, Status, Created At, etc.
+- Features:
+  - Row selection functionality
+  - Status indicators (Active/Blocked/Pending)
+  - Progress bars for quota/word count
+  - Edit/delete actions
+  - Image and name display with slugs
+
+### `cr-category-create-form.tsx`
+
+- Form for creating new categories
+- Fields:
+  - Name, image, position, visibility
+  - Slug, description, remarks
+  - Initial answer (JSON)
+- Uses Zod validation and React Hook Form
+- Material UI components
+- Internationalization support
+
+### `cr-category-edit-form.tsx`
+
+- Similar to create form but for editing
+- Pre-fills existing data
+- Handles image updates
+- More strict validation for init_answer
+
+## Supporting Components
+
+### `confirm-delete-modal.tsx`
+
+- Confirmation dialog for category deletion
+- Loading states and toast notifications
+- Internationalization support
+
+### `cr-categories-filters.tsx`
+
+- Filtering functionality:
+  - Visibility status tabs
+  - Text search filters
+  - Sorting options
+- Shows selected items count
+
+### `cr-categories-pagination.tsx`
+
+- Basic pagination controls
+- Page number and rows per page selection
+- Default options: [5, 10, 25]
+
+### `cr-categories-selection-context.tsx`
+
+- Manages selection state
+- Provides hooks for:
+  - Selecting/deselecting items
+  - Checking selection state
+  - Bulk operations
+
+## Types & Constants
+
+### `type.d.ts`
+
+- Interfaces:
+  - `CrCategory`: Main category type
+  - `CreateFormProps`: Create form data
+  - `EditFormProps`: Edit form data
+
+### `_constants.ts`
+
+- Default values:
+  - `defaultCrCategory`
+  - `emptyCrCategory`
+
+## Component Relationships
+
+```mermaid
+graph TD
+    A[cr-categories-table] --> B[cr-category-create-form]
+    A --> C[cr-category-edit-form]
+    A --> D[confirm-delete-modal]
+    A --> E[cr-categories-filters]
+    A --> F[cr-categories-pagination]
+    A --> G[cr-categories-selection-context]
+    H[type.d.ts] --> A
+    H --> B
+    H --> C
+    I[_constants.ts] --> A
+    I --> B
+    I --> C
+```

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

@@ -1,8 +1,8 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpCategory } from './type';
+import { CrCategory, CreateFormProps } from './type';
 
-export const defaultLpCategory: LpCategory = {
+export const defaultCrCategory: CrCategory = {
   isEmpty: false,
   id: 'default-id',
   cat_name: 'default-category-name',
@@ -38,7 +38,7 @@ export const defaultLpCategory: LpCategory = {
 //   imageUrl: '',
 // };
 
-export const emptyLpCategory: LpCategory = {
+export const emptyCrCategory: CrCategory = {
-  ...defaultLpCategory,
+  ...defaultCrCategory,
   isEmpty: true,
 };

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

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
 import { COL_LESSON_TYPES } from '@/constants';
-import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
+import deleteQuizCRCategories from '@/db/QuizCRCategories/Delete';
 import { LoadingButton } from '@mui/lab';
 import { Button, Container, Modal, Paper } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
@@ -46,7 +46,9 @@ export default function ConfirmDeleteModal({
   function handleUserConfirmDelete(): void {
     if (idToDelete) {
       setIsDeleteing(true);
-      deleteQuizLPCategories(idToDelete)
+
+      // RULES: CR -> deleteQuizCRCategories
+      deleteQuizCRCategories(idToDelete)
         .then(() => {
           reloadRows();
           handleClose();

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

@@ -3,9 +3,13 @@
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
 // import { COL_LESSON_CATEGORIES } from '@/constants';
+
+// RULES: Quiz
 import GetAllCount from '@/db/QuizListenings/GetAllCount';
 import GetHiddenCount from '@/db/QuizListenings/GetHiddenCount';
-import GetVisibleCount from '@/db/QuizListenings/GetVisibleCount';
+// import GetVisibleCount from '@/db/QuizListenings/GetVisibleCount';
+// import GetVisibleCount from '@/db/Q';
+//
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
@@ -23,8 +27,8 @@ import { paths } from '@/paths';
 import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
-import { useLpCategoriesSelection } from './lp-categories-selection-context';
+import { useCrCategoriesSelection } from './cr-categories-selection-context';
-import { LpCategory } from './type';
+import { CrCategory } from './type';
 
 export interface Filters {
   email?: string;
@@ -37,17 +41,17 @@ export interface Filters {
 
 export type SortDir = 'asc' | 'desc';
 
-export interface LpCategoriesFiltersProps {
+export interface CrCategoriesFiltersProps {
   filters?: Filters;
   sortDir?: SortDir;
-  fullData: LpCategory[];
+  fullData: CrCategory[];
 }
 
-export function LpCategoriesFilters({
+export function CrCategoriesFilters({
   filters = {},
   sortDir = 'desc',
   fullData,
-}: LpCategoriesFiltersProps): React.JSX.Element {
+}: CrCategoriesFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
   const { email, phone, status, name, visible, type } = filters;
 
@@ -57,16 +61,16 @@ export function LpCategoriesFilters({
 
   const router = useRouter();
 
-  const selection = useLpCategoriesSelection();
+  const selection = useCrCategoriesSelection();
 
   function getVisible(): number {
-    return fullData.reduce((count, item: LpCategory) => {
+    return fullData.reduce((count, item: CrCategory) => {
       return item.visible === 'visible' ? count + 1 : count;
     }, 0);
   }
 
   function getHidden(): number {
-    return fullData.reduce((count, item: LpCategory) => {
+    return fullData.reduce((count, item: CrCategory) => {
       return item.visible === 'hidden' ? count + 1 : count;
     }, 0);
   }

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

@@ -10,7 +10,7 @@ function noop(): void {
   return undefined;
 }
 
-interface LpCategoriesPaginationProps {
+interface CrCategoriesPaginationProps {
   count: number;
   page: number;
   //
@@ -19,14 +19,14 @@ interface LpCategoriesPaginationProps {
   rowsPerPage: number;
 }
 
-export function LpCategoriesPagination({
+export function CrCategoriesPagination({
   count,
   page,
   //
   setPage,
   setRowsPerPage,
   rowsPerPage,
-}: LpCategoriesPaginationProps): React.JSX.Element {
+}: CrCategoriesPaginationProps): React.JSX.Element {
   // You should implement the pagination using a similar logic as the filters.
   // Note that when page change, you should keep the filter search params.
   const handleChangePage = (event: unknown, newPage: number) => {

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

@@ -6,15 +6,15 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LpCategory } from './type';
+import { CrCategory } from './type';
 
 function noop(): void {
   return undefined;
 }
 
-export interface LpCategoriesSelectionContextValue extends Selection {}
+export interface CrCategoriesSelectionContextValue extends Selection {}
 
-export const LpCategoriesSelectionContext = React.createContext<LpCategoriesSelectionContextValue>({
+export const CrCategoriesSelectionContext = React.createContext<CrCategoriesSelectionContextValue>({
   deselectAll: noop,
   deselectOne: noop,
   selectAll: noop,
@@ -26,10 +26,10 @@ export const LpCategoriesSelectionContext = React.createContext<LpCategoriesSele
 
 interface LpCategoriesSelectionProviderProps {
   children: React.ReactNode;
-  lessonCategories: LpCategory[];
+  lessonCategories: CrCategory[];
 }
 
-export function LpCategoriesSelectionProvider({
+export function CrCategoriesSelectionProvider({
   children,
   lessonCategories = [],
 }: LpCategoriesSelectionProviderProps): React.JSX.Element {
@@ -37,10 +37,10 @@ export function LpCategoriesSelectionProvider({
   const selection = useSelection(customerIds);
 
   return (
-    <LpCategoriesSelectionContext.Provider value={{ ...selection }}>{children}</LpCategoriesSelectionContext.Provider>
+    <CrCategoriesSelectionContext.Provider value={{ ...selection }}>{children}</CrCategoriesSelectionContext.Provider>
   );
 }
 
-export function useLpCategoriesSelection(): LpCategoriesSelectionContextValue {
+export function useCrCategoriesSelection(): CrCategoriesSelectionContextValue {
-  return React.useContext(LpCategoriesSelectionContext);
+  return React.useContext(CrCategoriesSelectionContext);
 }

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

@@ -25,10 +25,10 @@ import { DataTable } from '@/components/core/data-table';
 import type { ColumnDef } from '@/components/core/data-table';
 
 import ConfirmDeleteModal from './confirm-delete-modal';
-import { useLpCategoriesSelection } from './lp-categories-selection-context';
+import { useCrCategoriesSelection } from './cr-categories-selection-context';
-import type { LpCategory } from './type';
+import type { CrCategory } from './type';
 
-function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCategory>[] {
+function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrCategory>[] {
   return [
     {
       formatter: (row): React.JSX.Element => (
@@ -40,7 +40,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
           <Link
             color="inherit"
             component={RouterLink}
-            href={paths.dashboard.lp_categories.details(row.id)}
+            href={paths.dashboard.cr_categories.details(row.id)}
             sx={{ whiteSpace: 'nowrap' }}
             variant="subtitle2"
           >
@@ -163,7 +163,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
             //
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.lp_categories.details(row.id)}
+            href={paths.dashboard.cr_categories.details(row.id)}
           >
             <PencilSimpleIcon size={24} />
           </LoadingButton>
@@ -187,13 +187,13 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
 }
 
 export interface LessonCategoriesTableProps {
-  rows: LpCategory[];
+  rows: CrCategory[];
   reloadRows: () => void;
 }
 
-export function LpCategoriesTable({ rows, reloadRows }: LessonCategoriesTableProps): React.JSX.Element {
+export function CrCategoriesTable({ rows, reloadRows }: LessonCategoriesTableProps): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
-  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLpCategoriesSelection();
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCrCategoriesSelection();
 
   const [idToDelete, setIdToDelete] = React.useState('');
   const [open, setOpen] = React.useState(false);
@@ -211,7 +211,7 @@ export function LpCategoriesTable({ rows, reloadRows }: LessonCategoriesTablePro
         reloadRows={reloadRows}
         setOpen={setOpen}
       />
-      <DataTable<LpCategory>
+      <DataTable<CrCategory>
         columns={columns(handleDeleteClick)}
         onDeselectAll={deselectAll}
         onDeselectOne={(_, row) => {
@@ -232,6 +232,7 @@ export function LpCategoriesTable({ rows, reloadRows }: LessonCategoriesTablePro
             sx={{ textAlign: 'center' }}
             variant="body2"
           >
+            {/* TODO: update this */}
             {t('no-lesson-categories-found')}
           </Typography>
         </Box>

002_source/cms/src/components/dashboard/cr/categories/cr-category-create-form.tsx

@@ -66,7 +66,7 @@ export const defaultValues = {
   description: '',
 } satisfies Values;
 
-export function LpCategoryCreateForm(): React.JSX.Element {
+export function CrCategoryCreateForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 

002_source/cms/src/components/dashboard/cr/categories/cr-category-edit-form.tsx

@@ -88,7 +88,7 @@ const defaultValues = {
   description: '',
 } satisfies Values;
 
-export function LpQuestionEditForm(): React.JSX.Element {
+export function CrCategoryEditForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 
@@ -132,7 +132,7 @@ export function LpQuestionEditForm(): React.JSX.Element {
         const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
         logger.debug(result);
         toast.success(t('edit.success'));
-        router.push(paths.dashboard.lp_categories.list);
+        router.push(paths.dashboard.cr_categories.list);
       } catch (error) {
         logger.error(error);
         toast.error(t('update.failed'));
@@ -480,7 +480,7 @@ export function LpQuestionEditForm(): React.JSX.Element {
           <Button
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.lp_categories.list}
+            href={paths.dashboard.cr_categories.list}
           >
             {t('edit.cancelButton')}
           </Button>

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

@@ -1,241 +0,0 @@
-'use client';
-
-import * as React from 'react';
-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 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';
-import { DataTable } from '@/components/core/data-table';
-import type { ColumnDef } from '@/components/core/data-table';
-
-import ConfirmDeleteModal from './confirm-delete-modal';
-import { useLpCategoriesSelection } from './lp-categories-selection-context';
-import type { LpCategory } from './type';
-
-function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCategory>[] {
-  return [
-    {
-      formatter: (row): React.JSX.Element => (
-        <Stack
-          direction="row"
-          spacing={1}
-          sx={{ alignItems: 'center' }}
-        >
-          <Link
-            color="inherit"
-            component={RouterLink}
-            href={paths.dashboard.lp_categories.details(row.id)}
-            sx={{ whiteSpace: 'nowrap' }}
-            variant="subtitle2"
-          >
-            <Stack
-              direction="row"
-              spacing={1}
-              sx={{ alignItems: 'center' }}
-            >
-              <Avatar
-                src={`http://127.0.0.1:8090/api/files/${row.collectionId}/${row.id}/${row.cat_image}`}
-                variant="rounded"
-              >
-                <ImagesIcon size={32} />
-              </Avatar>{' '}
-              <div>
-                <Box sx={{ whiteSpace: 'nowrap' }}>{row.cat_name}</Box>
-                <Typography
-                  color="text.secondary"
-                  variant="body2"
-                >
-                  slug: {row.cat_name}
-                </Typography>
-              </div>
-            </Stack>
-          </Link>
-        </Stack>
-      ),
-      name: 'Name',
-      width: '200px',
-    },
-    {
-      formatter: (row): React.JSX.Element => (
-        <Stack
-          direction="row"
-          spacing={2}
-          sx={{ alignItems: 'center' }}
-        >
-          <LinearProgress
-            sx={{ flex: '1 1 auto' }}
-            value={row.quota}
-            variant="determinate"
-          />
-          <Typography
-            color="text.secondary"
-            variant="body2"
-          >
-            {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
-          </Typography>
-        </Stack>
-      ),
-      // NOTE: please refer to translation.json here
-      name: 'word-count',
-      width: '100px',
-    },
-    {
-      formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-
-        const mapping = {
-          active: {
-            label: 'Active',
-            icon: (
-              <CheckCircleIcon
-                color="var(--mui-palette-success-main)"
-                weight="fill"
-              />
-            ),
-          },
-          blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
-          pending: {
-            label: 'Pending',
-            icon: (
-              <ClockIcon
-                color="var(--mui-palette-warning-main)"
-                weight="fill"
-              />
-            ),
-          },
-          NA: {
-            label: 'NA',
-            icon: (
-              <ClockIcon
-                color="var(--mui-palette-warning-main)"
-                weight="fill"
-              />
-            ),
-          },
-        } as const;
-        const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
-
-        return (
-          <Button
-            onClick={() => {
-              toast.error('sorry but not implementd');
-            }}
-            style={{ backgroundColor: 'transparent' }}
-          >
-            {/* <Chip icon={icon} label={label} size="small" variant="outlined" /> */}
-            {label}
-          </Button>
-        );
-      },
-      name: 'Status',
-      width: '150px',
-    },
-    {
-      formatter(row) {
-        return dayjs(row.createdAt).format('MMM D, YYYY');
-      },
-      name: 'Created at',
-      width: '100px',
-    },
-    {
-      formatter: (row): React.JSX.Element => (
-        <Stack
-          direction="row"
-          spacing={1}
-        >
-          <LoadingButton
-            //
-            color="secondary"
-            component={RouterLink}
-            href={paths.dashboard.lp_categories.details(row.id)}
-          >
-            <PencilSimpleIcon size={24} />
-          </LoadingButton>
-          <LoadingButton
-            color="error"
-            disabled={row.isEmpty}
-            onClick={() => {
-              handleDeleteClick(row.id);
-            }}
-          >
-            <TrashSimpleIcon size={24} />
-          </LoadingButton>
-        </Stack>
-      ),
-      name: 'Actions',
-      hideName: true,
-      width: '100px',
-      align: 'right',
-    },
-  ];
-}
-
-export interface LessonCategoriesTableProps {
-  rows: LpCategory[];
-  reloadRows: () => void;
-}
-
-export function LpCategoriesTable({ rows, reloadRows }: LessonCategoriesTableProps): React.JSX.Element {
-  const { t } = useTranslation(['lp_categories']);
-  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLpCategoriesSelection();
-
-  const [idToDelete, setIdToDelete] = React.useState('');
-  const [open, setOpen] = React.useState(false);
-
-  function handleDeleteClick(testId: string): void {
-    setOpen(true);
-    setIdToDelete(testId);
-  }
-
-  return (
-    <React.Fragment>
-      <ConfirmDeleteModal
-        idToDelete={idToDelete}
-        open={open}
-        reloadRows={reloadRows}
-        setOpen={setOpen}
-      />
-      <DataTable<LpCategory>
-        columns={columns(handleDeleteClick)}
-        onDeselectAll={deselectAll}
-        onDeselectOne={(_, row) => {
-          deselectOne(row.id);
-        }}
-        onSelectAll={selectAll}
-        onSelectOne={(_, row) => {
-          selectOne(row.id);
-        }}
-        rows={rows}
-        selectable
-        selected={selected}
-      />
-      {!rows.length ? (
-        <Box sx={{ p: 3 }}>
-          <Typography
-            color="text.secondary"
-            sx={{ textAlign: 'center' }}
-            variant="body2"
-          >
-            {t('no-lesson-categories-found')}
-          </Typography>
-        </Box>
-      ) : null}
-    </React.Fragment>
-  );
-}

002_source/cms/src/components/dashboard/cr/categories/lp-category-create-form.tsx

@@ -1,419 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import { useRouter } from 'next/navigation';
-import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { LoadingButton } from '@mui/lab';
-import { Avatar, Divider, MenuItem, Select } from '@mui/material';
-// 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 CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import InputLabel from '@mui/material/InputLabel';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
-import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
-// import axios from 'axios';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z as zod } from 'zod';
-
-import { paths } from '@/paths';
-import isDevelopment from '@/lib/check-is-development';
-import { logger } from '@/lib/default-logger';
-import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
-import { pb } from '@/lib/pb';
-import { TextEditor } from '@/components/core/text-editor/text-editor';
-import { toast } from '@/components/core/toaster';
-
-import type { CreateFormProps } from './type';
-
-const schema = zod.object({
-  cat_name: zod.string().min(1, 'name-is-required').max(255),
-  cat_image: zod.array(zod.any()).optional(),
-  pos: zod.number().min(1, 'position is required').max(99),
-  init_answer: zod.string().optional(),
-  visible: zod.string(),
-  slug: zod.string().min(1, 'slug-is-required').max(255),
-  remarks: zod.string().optional(),
-  description: zod.string().optional(),
-  // NOTE: for image handling
-  avatar: zod.string().optional(),
-  // TODO: remove me
-  type: zod.string().optional(),
-  isActive: zod.boolean().optional(),
-  order: zod.number().optional(),
-});
-
-type Values = zod.infer<typeof schema>;
-
-export const defaultValues = {
-  cat_name: '',
-  cat_image: undefined,
-  pos: 1,
-  init_answer: '',
-  visible: 'hidden',
-  slug: '',
-  remarks: '',
-  description: '',
-} satisfies Values;
-
-export function LpCategoryCreateForm(): React.JSX.Element {
-  const router = useRouter();
-  const { t } = useTranslation(['lp_categories']);
-
-  const [isCreating, setIsCreating] = React.useState<boolean>(false);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    watch,
-  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
-
-  const onSubmit = React.useCallback(
-    async (values: Values): Promise<void> => {
-      setIsCreating(true);
-
-      const payload: CreateFormProps = {
-        cat_name: values.cat_name,
-        cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
-        pos: values.pos,
-        init_answer: values.init_answer,
-        visible: values.visible,
-        slug: values.slug,
-        remarks: values.remarks,
-        description: values.description,
-        //
-        // TODO: remove me
-        type: 'type tet',
-        isActive: true,
-        order: 1,
-      };
-
-      try {
-        const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).create(payload);
-
-        logger.debug(result);
-        toast.success(t('create.success'));
-        router.push(paths.dashboard.lp_categories.list);
-      } catch (error) {
-        logger.error(error);
-        toast.error(t('create.failed'));
-      } finally {
-        setIsCreating(false);
-      }
-    },
-    // t is not necessary here
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [router]
-  );
-
-  const avatarInputRef = React.useRef<HTMLInputElement>(null);
-  const avatar = watch('avatar');
-
-  const handleAvatarChange = React.useCallback(
-    async (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-
-      if (file) {
-        const url = await fileToBase64(file);
-        setValue('avatar', url);
-      }
-    },
-    [setValue]
-  );
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Card>
-        <CardContent>
-          <Stack
-            divider={<Divider />}
-            spacing={4}
-          >
-            <Stack spacing={3}>
-              <Typography variant="h6">{t('create.basic-info')}</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid xs={12}>
-                  <Stack
-                    direction="row"
-                    spacing={3}
-                    sx={{ alignItems: 'center' }}
-                  >
-                    <Box
-                      sx={{
-                        border: '1px dashed var(--mui-palette-divider)',
-                        borderRadius: '5%',
-                        display: 'inline-flex',
-                        p: '4px',
-                      }}
-                    >
-                      <Avatar
-                        variant="rounded"
-                        src={avatar}
-                        sx={{
-                          '--Avatar-size': '100px',
-                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
-                          alignItems: 'center',
-                          bgcolor: 'var(--mui-palette-background-level1)',
-                          color: 'var(--mui-palette-text-primary)',
-                          display: 'flex',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <CameraIcon fontSize="var(--Icon-fontSize)" />
-                      </Avatar>
-                    </Box>
-                    <Stack
-                      spacing={1}
-                      sx={{ alignItems: 'flex-start' }}
-                    >
-                      <Typography variant="subtitle1">{t('create.avatar')}</Typography>
-                      <Typography variant="caption">{t('create.avatarRequirements')}</Typography>
-                      <Button
-                        color="secondary"
-                        onClick={() => {
-                          avatarInputRef.current?.click();
-                        }}
-                        variant="outlined"
-                      >
-                        {t('create.avatar_select')}
-                      </Button>
-                      <input
-                        hidden
-                        onChange={handleAvatarChange}
-                        ref={avatarInputRef}
-                        type="file"
-                      />
-                    </Stack>
-                  </Stack>
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="cat_name"
-                    render={({ field }) => (
-                      <FormControl
-                        disabled={isCreating}
-                        error={Boolean(errors.cat_name)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('create.cat_name')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="pos"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.pos)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('create.pos')}</InputLabel>
-                        <OutlinedInput
-                          {...field}
-                          onChange={(e) => {
-                            field.onChange(parseInt(e.target.value));
-                          }}
-                          type="number"
-                        />
-                        {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="slug"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.slug)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('create.slug')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.slug ? <FormHelperText>{errors.slug.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="visible"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.visible)}
-                        fullWidth
-                      >
-                        <InputLabel>{t('edit.visible')}</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="visible">{t('edit.visible')}</MenuItem>
-                          <MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
-                        </Select>
-
-                        {errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="init_answer"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.init_answer)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('create.init_answer')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.init_answer ? <FormHelperText>{errors.init_answer.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            {/*  */}
-            <Stack spacing={3}>
-              <Typography variant="h6">{t('create.detail-information')}</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="description"
-                    render={({ field }) => {
-                      return (
-                        <Box>
-                          <Typography
-                            variant="subtitle1"
-                            color="text-secondary"
-                          >
-                            {t('create.description')}
-                          </Typography>
-                          <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
-                            <TextEditor
-                              {...field}
-                              content=""
-                              onUpdate={({ editor }) => {
-                                field.onChange({ target: { value: editor.getHTML() } });
-                              }}
-                              placeholder={t('create.description.default')}
-                            />
-                          </Box>
-                        </Box>
-                      );
-                    }}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isCreating}
-                    control={control}
-                    name="remarks"
-                    render={({ field }) => (
-                      <Box>
-                        <Typography
-                          variant="subtitle1"
-                          color="text.secondary"
-                        >
-                          {t('create.remarks')}
-                        </Typography>
-                        <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
-                          <TextEditor
-                            content=""
-                            onUpdate={({ editor }) => {
-                              field.onChange({ target: { value: editor.getText() } });
-                            }}
-                            hideToolbar
-                            placeholder={t('create.remarks.default')}
-                          />
-                        </Box>
-                      </Box>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            {/*  */}
-          </Stack>
-        </CardContent>
-        <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button
-            color="secondary"
-            component={RouterLink}
-            href={paths.dashboard.lesson_categories.list}
-          >
-            {t('create.cancelButton')}
-          </Button>
-
-          <LoadingButton
-            disabled={isCreating}
-            loading={isCreating}
-            type="submit"
-            variant="contained"
-          >
-            {t('create.createButton')}
-          </LoadingButton>
-        </CardActions>
-      </Card>
-      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
-        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
-      </Box>
-    </form>
-  );
-}

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

@@ -1,456 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useRouter } from 'next/navigation';
-// import { COL_LESSON_CATEGORIES } from '@/constants';
-import GetAllCount from '@/db/QuizListenings/GetAllCount';
-import GetHiddenCount from '@/db/QuizListenings/GetHiddenCount';
-import GetVisibleCount from '@/db/QuizListenings/GetVisibleCount';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Select from '@mui/material/Select';
-import type { SelectChangeEvent } from '@mui/material/Select';
-import Stack from '@mui/material/Stack';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import Typography from '@mui/material/Typography';
-import { useTranslation } from 'react-i18next';
-
-import { paths } from '@/paths';
-import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
-import { Option } from '@/components/core/option';
-
-import { useLpCategoriesSelection } from './lp-categories-selection-context';
-import { LpCategory } from './type';
-
-export interface Filters {
-  email?: string;
-  phone?: string;
-  status?: string;
-  name?: string;
-  visible?: string;
-  type?: string;
-}
-
-export type SortDir = 'asc' | 'desc';
-
-export interface LpCategoriesFiltersProps {
-  filters?: Filters;
-  sortDir?: SortDir;
-  fullData: LpCategory[];
-}
-
-export function LpCategoriesFilters({
-  filters = {},
-  sortDir = 'desc',
-  fullData,
-}: LpCategoriesFiltersProps): React.JSX.Element {
-  const { t } = useTranslation();
-  const { email, phone, status, name, visible, type } = filters;
-
-  const [totalCount, setTotalCount] = React.useState<number>(0);
-  const [visibleCount, setVisibleCount] = React.useState<number>(0);
-  const [hiddenCount, setHiddenCount] = React.useState<number>(0);
-
-  const router = useRouter();
-
-  const selection = useLpCategoriesSelection();
-
-  function getVisible(): number {
-    return fullData.reduce((count, item: LpCategory) => {
-      return item.visible === 'visible' ? count + 1 : count;
-    }, 0);
-  }
-
-  function getHidden(): number {
-    return fullData.reduce((count, item: LpCategory) => {
-      return item.visible === 'hidden' ? count + 1 : count;
-    }, 0);
-  }
-
-  // The tabs should be generated using API data.
-  const tabs = [
-    { label: t('All'), value: '', count: totalCount },
-    // { label: 'Active', value: 'active', count: 3 },
-    // { label: 'Pending', value: 'pending', count: 1 },
-    // { label: 'Blocked', value: 'blocked', count: 1 },
-    { label: t('visible'), value: 'visible', count: visibleCount },
-    { label: t('hidden'), value: 'hidden', count: hiddenCount },
-  ] as const;
-
-  const updateSearchParams = React.useCallback(
-    (newFilters: Filters, newSortDir: SortDir): void => {
-      const searchParams = new URLSearchParams();
-
-      if (newSortDir === 'asc') {
-        searchParams.set('sortDir', newSortDir);
-      }
-
-      if (newFilters.status) {
-        searchParams.set('status', newFilters.status);
-      }
-
-      if (newFilters.email) {
-        searchParams.set('email', newFilters.email);
-      }
-
-      if (newFilters.phone) {
-        searchParams.set('phone', newFilters.phone);
-      }
-
-      if (newFilters.name) {
-        searchParams.set('name', newFilters.name);
-      }
-
-      if (newFilters.type) {
-        searchParams.set('type', newFilters.type);
-      }
-
-      if (newFilters.visible) {
-        searchParams.set('visible', newFilters.visible);
-      }
-
-      // NOTE: modify according to COLLECTION
-      router.push(`${paths.dashboard.lp_categories.list}?${searchParams.toString()}`);
-    },
-    [router]
-  );
-
-  const handleClearFilters = React.useCallback(() => {
-    updateSearchParams({}, sortDir);
-  }, [updateSearchParams, sortDir]);
-
-  const handleStatusChange = React.useCallback(
-    (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, status: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleVisibleChange = React.useCallback(
-    (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, visible: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleNameChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, name: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleTypeChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, type: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleEmailChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, email: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handlePhoneChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, phone: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleSortChange = React.useCallback(
-    (event: SelectChangeEvent) => {
-      updateSearchParams(filters, event.target.value as SortDir);
-    },
-    [updateSearchParams, filters]
-  );
-
-  React.useEffect(() => {
-    const fetchCount = async (): Promise<void> => {
-      try {
-        const tc = await GetAllCount();
-        setTotalCount(tc);
-
-        const vc = await GetVisibleCount();
-        setVisibleCount(vc);
-
-        const hc = await GetHiddenCount();
-        setHiddenCount(hc);
-      } catch (error) {
-        //
-      }
-    };
-    void fetchCount();
-  }, []);
-
-  const hasFilters = status || email || phone || visible || name || type;
-
-  return (
-    <div>
-      <Tabs
-        onChange={handleVisibleChange}
-        sx={{ px: 3 }}
-        value={visible ?? ''}
-        variant="scrollable"
-      >
-        {tabs.map((tab) => (
-          <Tab
-            icon={
-              <Chip
-                label={tab.count}
-                size="small"
-                variant="soft"
-              />
-            }
-            iconPosition="end"
-            key={tab.value}
-            label={tab.label}
-            sx={{ minHeight: 'auto' }}
-            tabIndex={0}
-            value={tab.value}
-          />
-        ))}
-      </Tabs>
-      <Divider />
-      <Stack
-        direction="row"
-        spacing={2}
-        sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}
-      >
-        <Stack
-          direction="row"
-          spacing={2}
-          sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}
-        >
-          <FilterButton
-            displayValue={name}
-            label={t('Name')}
-            onFilterApply={(value) => {
-              handleNameChange(value as string);
-            }}
-            onFilterDelete={() => {
-              handleNameChange();
-            }}
-            popover={<NameFilterPopover />}
-            value={name}
-          />
-
-          <FilterButton
-            displayValue={type}
-            label={t('Type')}
-            onFilterApply={(value) => {
-              handleTypeChange(value as string);
-            }}
-            onFilterDelete={() => {
-              handleTypeChange();
-            }}
-            popover={<TypeFilterPopover />}
-            value={type}
-          />
-
-          {hasFilters ? <Button onClick={handleClearFilters}>{t('Clear filters')}</Button> : null}
-        </Stack>
-        {selection.selectedAny ? (
-          <Stack
-            direction="row"
-            spacing={2}
-            sx={{ alignItems: 'center' }}
-          >
-            <Typography
-              color="text.secondary"
-              variant="body2"
-            >
-              {selection.selected.size} {t('selected')}
-            </Typography>
-            <Button
-              color="error"
-              variant="contained"
-            >
-              {t('Delete')}
-            </Button>
-          </Stack>
-        ) : null}
-        <Select
-          name="sort"
-          onChange={handleSortChange}
-          sx={{ maxWidth: '100%', width: '120px' }}
-          value={sortDir}
-        >
-          <Option value="desc">{t('Newest')}</Option>
-          <Option value="asc">{t('Oldest')}</Option>
-        </Select>
-      </Stack>
-    </div>
-  );
-}
-
-function TypeFilterPopover(): React.JSX.Element {
-  const { t } = useTranslation();
-  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={t('Filter by type')}
-    >
-      <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"
-      >
-        {t('Apply')}
-      </Button>
-    </FilterPopover>
-  );
-}
-
-function NameFilterPopover(): React.JSX.Element {
-  const { t } = useTranslation();
-  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={t('Filter by name')}
-    >
-      <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"
-      >
-        {t('apply')}
-      </Button>
-    </FilterPopover>
-  );
-}
-
-function EmailFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-  const { t } = useTranslation();
-
-  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"
-      >
-        {t('Apply')}
-      </Button>
-    </FilterPopover>
-  );
-}
-
-function PhoneFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-  const { t } = useTranslation();
-
-  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"
-      >
-        {t('Apply')}
-      </Button>
-    </FilterPopover>
-  );
-}

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

@@ -1,49 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import TablePagination from '@mui/material/TablePagination';
-
-function noop(): void {
-  return undefined;
-}
-
-interface LessonCategoriesPaginationProps {
-  count: number;
-  page: number;
-  //
-  setPage: (page: number) => void;
-  setRowsPerPage: (page: number) => void;
-  rowsPerPage: number;
-}
-
-export function LpCategoriesPagination({
-  count,
-  page,
-  //
-  setPage,
-  setRowsPerPage,
-  rowsPerPage,
-}: LessonCategoriesPaginationProps): React.JSX.Element {
-  // You should implement the pagination using a similar logic as the filters.
-  // Note that when page change, you should keep the filter search params.
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setRowsPerPage(parseInt(event.target.value));
-    // console.log(parseInt(event.target.value));
-  };
-
-  return (
-    <TablePagination
-      component="div"
-      count={count}
-      onPageChange={handleChangePage}
-      onRowsPerPageChange={handleChangeRowsPerPage}
-      page={page}
-      rowsPerPage={rowsPerPage}
-      rowsPerPageOptions={[5, 10, 25]}
-    />
-  );
-}

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

@@ -1,46 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-// import type { LessonCategory } from '@/types/lesson-type';
-import { useSelection } from '@/hooks/use-selection';
-import type { Selection } from '@/hooks/use-selection';
-
-import { LpCategory } from './type';
-
-function noop(): void {
-  return undefined;
-}
-
-export interface LpCategoriesSelectionContextValue extends Selection {}
-
-export const LpCategoriesSelectionContext = React.createContext<LpCategoriesSelectionContextValue>({
-  deselectAll: noop,
-  deselectOne: noop,
-  selectAll: noop,
-  selectOne: noop,
-  selected: new Set(),
-  selectedAny: false,
-  selectedAll: false,
-});
-
-interface LpCategoriesSelectionProviderProps {
-  children: React.ReactNode;
-  lessonCategories: LpCategory[];
-}
-
-export function LpCategoriesSelectionProvider({
-  children,
-  lessonCategories = [],
-}: LpCategoriesSelectionProviderProps): React.JSX.Element {
-  const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
-  const selection = useSelection(customerIds);
-
-  return (
-    <LpCategoriesSelectionContext.Provider value={{ ...selection }}>{children}</LpCategoriesSelectionContext.Provider>
-  );
-}
-
-export function useLpCategoriesSelection(): LpCategoriesSelectionContextValue {
-  return React.useContext(LpCategoriesSelectionContext);
-}

002_source/cms/src/components/dashboard/cr/categories/mf-category-edit-form.tsx

@@ -1,500 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-//
-import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { LoadingButton } from '@mui/lab';
-//
-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 CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Divider from '@mui/material/Divider';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Select from '@mui/material/Select';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
-//
-import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
-//
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z as zod } from 'zod';
-
-import { paths } from '@/paths';
-import { logger } from '@/lib/default-logger';
-import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
-import { pb } from '@/lib/pb';
-import { TextEditor } from '@/components/core/text-editor/text-editor';
-import { toast } from '@/components/core/toaster';
-import FormLoading from '@/components/loading';
-
-import ErrorDisplay from '../../error';
-import type { EditFormProps } from './type';
-
-// TODO: review this
-const schema = zod.object({
-  cat_name: zod.string().min(1, 'name-is-required').max(255),
-  // accept file object when user change image
-  // accept http string when user not changing image
-  cat_image: zod.union([zod.array(zod.any()), zod.string()]).optional(),
-
-  // position
-  pos: zod.number().min(1, 'position is required').max(99),
-
-  // it should be a valid JSON
-  init_answer: zod
-    .string()
-    .refine(
-      (value) => {
-        try {
-          JSON.parse(value);
-          return true;
-        } catch (error) {
-          return false;
-        }
-      },
-      { message: 'init_answer must be a valid JSON' }
-    )
-    .optional(),
-  visible: zod.string(),
-  slug: zod.string().min(0, 'slug-is-required').max(255).optional(),
-  remarks: zod.string().optional(),
-  description: zod.string().optional(),
-  // NOTE: for image handling
-  avatar: zod.string().optional(),
-});
-
-type Values = zod.infer<typeof schema>;
-
-const defaultValues = {
-  cat_name: '',
-  cat_image: undefined,
-  pos: 1,
-  init_answer: JSON.stringify({}),
-  visible: 'hidden',
-  slug: '',
-  remarks: '',
-  description: '',
-} satisfies Values;
-
-export function LpCategoryEditForm(): React.JSX.Element {
-  const router = useRouter();
-  const { t } = useTranslation(['lp_categories']);
-
-  const { cat_id: catId } = useParams<{ cat_id: string }>();
-  //
-  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
-  const [showLoading, setShowLoading] = React.useState<boolean>(false);
-  //
-  const [showError, setShowError] = React.useState({ show: false, detail: '' });
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    reset,
-    watch,
-  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
-
-  const onSubmit = React.useCallback(
-    async (values: Values): Promise<void> => {
-      setIsUpdating(true);
-
-      const tempUpdate: EditFormProps = {
-        cat_name: values.cat_name,
-        cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
-        pos: values.pos,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        init_answer: JSON.parse(values.init_answer || '{}'),
-
-        visible: values.visible,
-        slug: values.slug || 'not-defined',
-        remarks: values.remarks,
-        description: values.description,
-        //
-        // TODO: remove below
-        type: '',
-      };
-
-      try {
-        const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
-        logger.debug(result);
-        toast.success(t('edit.success'));
-        router.push(paths.dashboard.lp_categories.list);
-      } catch (error) {
-        logger.error(error);
-        toast.error(t('update.failed'));
-      } finally {
-        setIsUpdating(false);
-      }
-    },
-    // t is not necessary here
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [router]
-  );
-
-  const avatarInputRef = React.useRef<HTMLInputElement>(null);
-  const avatar = watch('avatar');
-
-  const handleAvatarChange = React.useCallback(
-    async (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-
-      if (file) {
-        const url = await fileToBase64(file);
-        setValue('avatar', url);
-      }
-    },
-    [setValue]
-  );
-
-  // TODO: need to align with save form
-  // use trycatch
-  const [textDescription, setTextDescription] = React.useState<string>('');
-  const [textRemarks, setTextRemarks] = React.useState<string>('');
-
-  // load existing data when user arrive
-  const loadExistingData = React.useCallback(
-    async (id: string) => {
-      setShowLoading(true);
-
-      try {
-        const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).getOne(id);
-
-        reset({ ...defaultValues, ...result, init_answer: JSON.stringify(result.init_answer) });
-        setTextDescription(result.description);
-        setTextRemarks(result.remarks);
-
-        if (result.cat_image !== '') {
-          const fetchResult = await fetch(
-            `http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.cat_image}`
-          );
-
-          const blob = await fetchResult.blob();
-          const url = await fileToBase64(blob);
-
-          setValue('avatar', url);
-        } else {
-          setValue('avatar', '');
-        }
-      } catch (error) {
-        logger.error(error);
-        toast(t('list.error'));
-
-        setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
-      } finally {
-        setShowLoading(false);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [catId]
-  );
-
-  React.useEffect(() => {
-    void loadExistingData(catId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [catId]);
-
-  if (showLoading) return <FormLoading />;
-  if (showError.show)
-    return (
-      <ErrorDisplay
-        message={t('error.unable-to-process-request')}
-        code="500"
-        details={showError.detail}
-      />
-    );
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Card>
-        <CardContent>
-          <Stack
-            divider={<Divider />}
-            spacing={4}
-          >
-            <Stack spacing={3}>
-              <Typography variant="h6">{t('edit.basic-info')}</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid xs={12}>
-                  <Stack
-                    direction="row"
-                    spacing={3}
-                    sx={{ alignItems: 'center' }}
-                  >
-                    <Box
-                      sx={{
-                        border: '1px dashed var(--mui-palette-divider)',
-                        borderRadius: '5%',
-                        display: 'inline-flex',
-                        p: '4px',
-                      }}
-                    >
-                      <Avatar
-                        variant="rounded"
-                        src={avatar}
-                        sx={{
-                          '--Avatar-size': '100px',
-                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
-                          alignItems: 'center',
-                          bgcolor: 'var(--mui-palette-background-level1)',
-                          color: 'var(--mui-palette-text-primary)',
-                          display: 'flex',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <CameraIcon fontSize="var(--Icon-fontSize)" />
-                      </Avatar>
-                    </Box>
-                    <Stack
-                      spacing={1}
-                      sx={{ alignItems: 'flex-start' }}
-                    >
-                      <Typography variant="subtitle1">{t('edit.avatar')}</Typography>
-                      <Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
-                      <Button
-                        color="secondary"
-                        onClick={() => {
-                          avatarInputRef.current?.click();
-                        }}
-                        variant="outlined"
-                      >
-                        {t('edit.avatar_select')}
-                      </Button>
-                      <input
-                        hidden
-                        onChange={handleAvatarChange}
-                        ref={avatarInputRef}
-                        type="file"
-                      />
-                    </Stack>
-                  </Stack>
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="cat_name"
-                    render={({ field }) => (
-                      <FormControl
-                        disabled={isUpdating}
-                        error={Boolean(errors.cat_name)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('edit.cat_name')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="pos"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.pos)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('edit.pos')}</InputLabel>
-                        <OutlinedInput
-                          {...field}
-                          onChange={(e) => {
-                            field.onChange(parseInt(e.target.value));
-                          }}
-                          type="number"
-                        />
-                        {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="slug"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.slug)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('edit.slug')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.slug ? <FormHelperText>{errors.slug.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="visible"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.visible)}
-                        fullWidth
-                      >
-                        <InputLabel>{t('edit.visible')}</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="visible">{t('edit.visible')}</MenuItem>
-                          <MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
-                        </Select>
-
-                        {errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="init_answer"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.init_answer)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('edit.init_answer')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.init_answer ? <FormHelperText>{errors.init_answer.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            {/*  */}
-            <Stack spacing={3}>
-              <Typography variant="h6">{t('edit.detail-information')}</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="description"
-                    render={({ field }) => {
-                      return (
-                        <Box>
-                          <Typography
-                            variant="subtitle1"
-                            color="text-secondary"
-                          >
-                            {t('edit.description')}
-                          </Typography>
-                          <Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
-                            <TextEditor
-                              {...field}
-                              content={textDescription}
-                              onUpdate={({ editor }) => {
-                                field.onChange({ target: { value: editor.getHTML() } });
-                              }}
-                              placeholder={t('edit.description.default')}
-                            />
-                          </Box>
-                        </Box>
-                      );
-                    }}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="remarks"
-                    render={({ field }) => (
-                      <Box>
-                        <Typography
-                          variant="subtitle1"
-                          color="text.secondary"
-                        >
-                          {t('edit.remarks')}
-                        </Typography>
-                        <Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
-                          <TextEditor
-                            content={textRemarks}
-                            onUpdate={({ editor }) => {
-                              field.onChange({ target: { value: editor.getText() } });
-                            }}
-                            hideToolbar
-                            placeholder={t('edit.remarks.default')}
-                          />
-                        </Box>
-                      </Box>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            {/*  */}
-          </Stack>
-        </CardContent>
-        <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button
-            color="secondary"
-            component={RouterLink}
-            href={paths.dashboard.lp_categories.list}
-          >
-            {t('edit.cancelButton')}
-          </Button>
-
-          <LoadingButton
-            disabled={isUpdating}
-            loading={isUpdating}
-            type="submit"
-            variant="contained"
-          >
-            {t('edit.updateButton')}
-          </LoadingButton>
-        </CardActions>
-      </Card>
-    </form>
-  );
-}

002_source/cms/src/components/dashboard/cr/categories/type.d.ts

@@ -1,4 +1,4 @@
-export interface LpCategory {
+export interface CrCategory {
   isEmpty?: boolean;
   //
   id: string;

002_source/cms/src/components/dashboard/cr/questions/_PROMPT.MD

@@ -1,21 +0,0 @@
-please review and add translations, e.g. `{t('[word]')}`
-
----
-
-please help to review the `tsx` file in this folder
-`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/questions`
-
-it was clone from
-`category`/`categories`, `lp_category`/`lp_categories`
-please help to modify to `question`/`questions`, `lp_question`/`lp_questions`
-
-please also help to modify the name of
-`variables`, `constants`, `functions`, `classes`, components's name, paths
-
-the db fields structures are the same
-
-do not move the files
-do not create directories
-keep current folder structure is important
-
-thanks

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

@@ -1,8 +1,8 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpQuestion } from './type';
+import { CreateFormProps, CrQuestion } from './type';
 
-export const defaultLpQuestion: LpQuestion = {
+export const defaultCrQuestion: CrQuestion = {
   isEmpty: false,
   id: 'default-id',
   cat_name: 'default-question-name',
@@ -38,7 +38,7 @@ export const defaultLpQuestion: LpQuestion = {
 //   imageUrl: '',
 // };
 
-export const emptyLpQuestion: LpQuestion = {
+export const emptyLpQuestion: CrQuestion = {
-  ...defaultLpQuestion,
+  ...defaultCrQuestion,
   isEmpty: true,
 };

002_source/cms/src/components/dashboard/cr/questions/cr-question-create-form.tsx

@@ -66,7 +66,7 @@ export const defaultValues = {
   description: '',
 } satisfies Values;
 
-export function LpQuestionCreateForm(): React.JSX.Element {
+export function CrQuestionCreateForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 

002_source/cms/src/components/dashboard/cr/questions/cr-question-edit-form.tsx

@@ -88,7 +88,7 @@ const defaultValues = {
   description: '',
 } satisfies Values;
 
-export function LpCategoryEditForm(): React.JSX.Element {
+export function CrQuestionEditForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 

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

@@ -23,8 +23,8 @@ import { paths } from '@/paths';
 import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
-import { useLpQuestionsSelection } from './lp-questions-selection-context';
+import { useLpQuestionsSelection } from './cr-questions-selection-context';
-import { LpQuestion } from './type';
+import { CrQuestion } from './type';
 
 export interface Filters {
   email?: string;
@@ -40,10 +40,10 @@ export type SortDir = 'asc' | 'desc';
 export interface LpQuestionsFiltersProps {
   filters?: Filters;
   sortDir?: SortDir;
-  fullData: LpQuestion[];
+  fullData: CrQuestion[];
 }
 
-export function LpQuestionsFilters({
+export function CrQuestionsFilters({
   filters = {},
   sortDir = 'desc',
   fullData,
@@ -60,13 +60,13 @@ export function LpQuestionsFilters({
   const selection = useLpQuestionsSelection();
 
   function getVisible(): number {
-    return fullData.reduce((count, item: LpQuestion) => {
+    return fullData.reduce((count, item: CrQuestion) => {
       return item.visible === 'visible' ? count + 1 : count;
     }, 0);
   }
 
   function getHidden(): number {
-    return fullData.reduce((count, item: LpQuestion) => {
+    return fullData.reduce((count, item: CrQuestion) => {
       return item.visible === 'hidden' ? count + 1 : count;
     }, 0);
   }

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

@@ -16,7 +16,7 @@ interface LessonQuestionsPaginationProps {
   rowsPerPage: number;
 }
 
-export function LpQuestionsPagination({
+export function CrQuestionsPagination({
   count,
   page,
   //

002_source/cms/src/components/dashboard/cr/questions/cr-questions-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 type { LpQuestion } from './type';
+import type { CrQuestion } from './type';
 
 function noop(): void {
   return undefined;
@@ -26,10 +26,10 @@ export const LpQuestionsSelectionContext = React.createContext<LpQuestionsSelect
 
 interface LpQuestionsSelectionProviderProps {
   children: React.ReactNode;
-  lessonQuestions: LpQuestion[];
+  lessonQuestions: CrQuestion[];
 }
 
-export function LpQuestionsSelectionProvider({
+export function CrQuestionsSelectionProvider({
   children,
   lessonQuestions = [],
 }: LpQuestionsSelectionProviderProps): React.JSX.Element {

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

@@ -25,10 +25,10 @@ import { DataTable } from '@/components/core/data-table';
 import type { ColumnDef } from '@/components/core/data-table';
 
 import ConfirmDeleteModal from './confirm-delete-modal';
-import { useLpQuestionsSelection } from './lp-questions-selection-context';
+import { useLpQuestionsSelection } from './cr-questions-selection-context';
-import type { LpQuestion } from './type';
+import type { CrQuestion } from './type';
 
-function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuestion>[] {
+function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrQuestion>[] {
   return [
     {
       formatter: (row): React.JSX.Element => (
@@ -187,11 +187,11 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuest
 }
 
 export interface LessonQuestionsTableProps {
-  rows: LpQuestion[];
+  rows: CrQuestion[];
   reloadRows: () => void;
 }
 
-export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps): React.JSX.Element {
+export function CrQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
   const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLpQuestionsSelection();
 
@@ -211,7 +211,7 @@ export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
         reloadRows={reloadRows}
         setOpen={setOpen}
       />
-      <DataTable<LpQuestion>
+      <DataTable<CrQuestion>
         columns={columns(handleDeleteClick)}
         onDeselectAll={deselectAll}
         onDeselectOne={(_, row) => {
@@ -232,6 +232,7 @@ export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
             sx={{ textAlign: 'center' }}
             variant="body2"
           >
+            {/* TODO: update this */}
             {t('no-lesson-categories-found')}
           </Typography>
         </Box>

002_source/cms/src/components/dashboard/cr/questions/type.d.ts

@@ -1,4 +1,4 @@
-export interface LpQuestion {
+export interface CrQuestion {
   isEmpty?: boolean;
   //
   id: string;

002_source/cms/src/components/dashboard/lp/categories/_SUMMARY.md

@@ -0,0 +1,111 @@
+# LP Categories Components Summary
+
+## Main Components
+
+### `lp-categories-table.tsx`
+
+- Displays LP categories in a table format with columns for:
+  - Name with image
+  - Slug
+  - Status indicators
+  - Created date
+  - Action buttons
+- Features:
+  - Single and multiple row selection
+  - Status indicators (Active/Inactive)
+  - Edit/view/delete actions
+  - Integration with other LP components
+
+### `lp-category-create-form.tsx`
+
+- Form for creating new LP categories
+- Key fields:
+  - Name (required)
+  - Image upload
+  - Slug (auto-generated)
+  - Status toggle
+  - Description (rich text)
+  - Additional metadata
+- Features:
+  - Form validation
+  - Image handling
+  - Auto-slug generation
+  - Internationalization support
+
+### `lp-category-edit-form.tsx`
+
+- Form for editing existing LP categories
+- Similar to create form but:
+  - Pre-populates existing data
+  - Handles image updates differently
+  - May have additional edit-specific validation
+
+## Supporting Components
+
+### `confirm-delete-modal.tsx`
+
+- Confirmation dialog for LP category deletion
+- Shows:
+  - Delete confirmation message
+  - Loading state during deletion
+  - Success/error notifications
+
+### `lp-categories-filters.tsx`
+
+- Filtering controls for LP categories table
+- Includes:
+  - Status filter tabs
+  - Text search
+  - Sort options
+  - Selected items count
+  - Bulk actions
+
+### `lp-categories-pagination.tsx`
+
+- Pagination controls for LP categories table
+- Standard features:
+  - Page navigation
+  - Rows per page selection
+  - Current/total page display
+
+### `lp-categories-selection-context.tsx`
+
+- Manages selection state for LP categories
+- Provides:
+  - Selection/deselection functions
+  - Current selection state
+  - Bulk operation support
+
+## Types & Constants
+
+### `type.d.ts`
+
+- Type definitions including:
+  - `LpCategory`: Main LP category type
+  - Form props for create/edit
+  - Component-specific prop types
+
+### `_constants.ts`
+
+- Contains:
+  - Default LP category values
+  - Empty category template
+  - Other shared constants
+
+## Component Relationships
+
+```mermaid
+graph TD
+    A[lp-categories-table] --> B[lp-category-create-form]
+    A --> C[lp-category-edit-form]
+    A --> D[confirm-delete-modal]
+    A --> E[lp-categories-filters]
+    A --> F[lp-categories-pagination]
+    A --> G[lp-categories-selection-context]
+    H[type.d.ts] --> A
+    H --> B
+    H --> C
+    I[_constants.ts] --> A
+    I --> B
+    I --> C
+```

002_source/cms/src/components/dashboard/lp/questions/_SUMMARY.md

@@ -0,0 +1,86 @@
+# LP Questions Components Summary
+
+## Main Components
+
+### LP Questions Table
+
+- Primary data display component using Material UI DataTable
+- Features:
+  - Column configurations with custom formatters
+  - Status indicators with visual icons
+  - Progress bars for quota visualization
+  - Row selection and bulk operations
+  - Internationalization support
+  - Integration with filters and pagination
+
+### Question Forms
+
+- **Create Form**:
+
+  - React Hook Form with Zod schema validation
+  - Image upload with preview functionality
+  - Rich text editors for descriptions
+  - Internationalized labels and error messages
+  - Form submission to PocketBase
+
+- **Edit Form**:
+  - Pre-fills existing data from PocketBase
+  - Conditional image handling
+  - Loading states and error handling
+  - JSON validation for complex fields
+  - Pre-filled rich text editors
+
+## Supporting Components
+
+### Selection Management
+
+- Context-based selection state
+- Supports:
+  - Individual selection/deselection
+  - Bulk select/deselect operations
+  - Selection state tracking (selectedAny, selectedAll)
+  - Integration with question IDs
+
+### Filters & Pagination
+
+- **Filters**:
+
+  - Tab-based filtering (All/Visible/Hidden) with counts
+  - Name and type search functionality
+  - Sort controls (Newest/Oldest)
+  - URL parameter synchronization
+
+- **Pagination**:
+  - Material UI TablePagination implementation
+  - Standard page size options
+  - Callback-based integration with parent
+
+### Delete Confirmation
+
+- Modal dialog with:
+  - Loading state during deletion
+  - Success/error toast notifications
+  - Internationalized messages
+  - PocketBase integration
+  - Custom error logging
+
+## Types & Constants
+
+- Type definitions for LP question data (LpQuestion)
+- Shared constants for:
+  - Column configurations
+  - Form defaults
+  - Validation rules
+
+## Component Relationships
+
+```mermaid
+graph TD
+    A[LP Questions Table] --> B[Question Forms]
+    A --> C[Selection Context]
+    A --> D[Filters]
+    A --> E[Pagination]
+    A --> F[Delete Modal]
+    B --> G[PocketBase]
+    F --> G
+```

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

@@ -232,6 +232,7 @@ export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
             sx={{ textAlign: 'center' }}
             variant="body2"
           >
+            {/* TODO: update this */}
             {t('no-lesson-categories-found')}
           </Typography>
         </Box>

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

@@ -232,6 +232,7 @@ export function MfCategoriesTable({ rows, reloadRows }: LessonCategoriesTablePro
             sx={{ textAlign: 'center' }}
             variant="body2"
           >
+            {/* TODO: update this */}
             {t('no-lesson-categories-found')}
           </Typography>
         </Box>

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

@@ -232,6 +232,7 @@ export function MfQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
             sx={{ textAlign: 'center' }}
             variant="body2"
           >
+            {/* TODO: update this */}
             {t('no-lesson-categories-found')}
           </Typography>
         </Box>