update build ok,

002_source/cms/src/app/dashboard/Sample/BasicDetailCard.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { useParams, 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 { paths } from '@/paths';
+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();
+  const router = useRouter();
+
+  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>
+  );
+}

002_source/cms/src/app/dashboard/Sample/Helloworld.tsx

@@ -0,0 +1,14 @@
+'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;

002_source/cms/src/app/dashboard/Sample/SampleAddressCard.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import getLessonCategoryById from '@/db/LessonCategories/GetById';
+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 type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { LpCategory } from '@/types/LpCategory';
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import LpCategoryDefaultValue, { defaultLpCategory } from '@/components/dashboard/lp_categories/_constants';
+import { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import { Payments } from '@/components/dashboard/lp_categories/payments';
+import { ShippingAddress } from '@/components/dashboard/lp_categories/shipping-address';
+
+import { SampleAddresses } from './SampleAddresses';
+import { SampleNotifications } from './SampleNotifications';
+import { SamplePayments } from './SamplePayments';
+
+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>
+  );
+}

002_source/cms/src/app/dashboard/Sample/SamplePaymentCard.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import getLessonCategoryById from '@/db/LessonCategories/GetById';
+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 type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { LpCategory } from '@/types/LpCategory';
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import LpCategoryDefaultValue, { defaultLpCategory } from '@/components/dashboard/lp_categories/_constants';
+import { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import { Payments } from '@/components/dashboard/lp_categories/payments';
+import { ShippingAddress } from '@/components/dashboard/lp_categories/shipping-address';
+
+import SampleAddressCard from './SampleAddressCard';
+import { SampleAddresses } from './SampleAddresses';
+import { SampleNotifications } from './SampleNotifications';
+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>
+    </>
+  );
+}

002_source/cms/src/app/dashboard/Sample/SampleSecurityCard.tsx

@@ -0,0 +1,41 @@
+'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>
+  );
+}

002_source/cms/src/app/dashboard/Sample/SampleTitleCard.tsx

@@ -0,0 +1,44 @@
+'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>
+    </>
+  );
+}

002_source/cms/src/app/dashboard/lesson_types/[type_id]/SamplePayments.tsx

@@ -0,0 +1,43 @@
+'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(),
+  },
+];

002_source/cms/src/app/dashboard/lesson_types/[type_id]/page.tsx

@@ -3,59 +3,42 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
-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 type { RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { dayjs } from '@/lib/dayjs';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
-import { PropertyItem } from '@/components/core/property-item';
-import { PropertyList } from '@/components/core/property-list';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultLessonType, LessonTypeDefaultValue } from '@/components/dashboard/lesson_type/_constants';
-// import { getLessonTypeById } from '@/components/dashboard/lesson_type/http-actions';
-// import { LessonTypeDefaultValue, type LessonType } from '@/components/dashboard/lesson_type/ILessonType';
-// import { defaultLessonType } from '@/components/dashboard/lesson_type/interfaces';
 import { Notifications } from '@/components/dashboard/lesson_type/notifications';
-import { Payments } from '@/components/dashboard/lesson_type/payments';
-import type { Address } from '@/components/dashboard/lesson_type/shipping-address';
-import { ShippingAddress } from '@/components/dashboard/lesson_type/shipping-address';
 import { type LessonType } from '@/components/dashboard/lesson_type/types';
 import FormLoading from '@/components/loading';
 
+import BasicDetailCard from '../../Sample/BasicDetailCard';
+import SampleAddressCard from '../../Sample/SampleAddressCard';
+import { SampleNotifications } from '../../Sample/SampleNotifications';
+import SamplePaymentCard from '../../Sample/SamplePaymentCard';
+import SampleSecurityCard from '../../Sample/SampleSecurityCard';
+import SampleTitleCard from '../../Sample/SampleTitleCard';
+
 export default function Page(): React.JSX.Element {
-  const { t } = useTranslation(['common', 'lesson_type']);
+  const { t } = useTranslation(['lesson_type']);
   const router = useRouter();
   //
   const { type_id: typeId } = useParams<{ type_id: string }>();
+
   //
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
   const [showError, setShowError] = React.useState<boolean>(false);
+  const [errorDetails, setErrorDetails] = React.useState('');
+
   //
   const [showLessonType, setShowLessonType] = React.useState<LessonType>(LessonTypeDefaultValue);
 
@@ -73,7 +56,7 @@ export default function Page(): React.JSX.Element {
         .catch((err) => {
           logger.error(err);
           toast(t('dashboard.lessonTypes.list.error'));
-
+          setErrorDetails(err);
           setShowError(true);
         })
         .finally(() => {
@@ -89,7 +72,7 @@ export default function Page(): React.JSX.Element {
       <ErrorDisplay
         message={t('error.unable-to-process-request', { ns: 'common' })}
         code="500"
-        details={t('error.detailed-error-information', { ns: 'common' })}
+        details={JSON.stringify(errorDetails, null, 2)}
       />
     );
 
@@ -113,261 +96,25 @@ export default function Page(): React.JSX.Element {
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              {t('list.title', { ns: 'lesson_type' })}
+              {t('list.title')}
             </Link>
           </div>
           <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
-            <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
-              <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">{showLessonType.name}</Typography>
-                  <Chip
-                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
-                    label={showLessonType.visible}
-                    size="small"
-                    variant="outlined"
-                  />
-                </Stack>
-                <Typography color="text.secondary" variant="body1">
-                  {showLessonType.id}
-                </Typography>
-              </div>
-            </Stack>
-            <div>
-              <Button endIcon={<CaretDownIcon />} variant="contained">
-                Action
-              </Button>
-            </div>
+            <SampleTitleCard />
           </Stack>
         </Stack>
         <Grid container spacing={4}>
           <Grid lg={4} xs={12}>
             <Stack spacing={4}>
-              <Card>
-                <CardHeader
-                  action={
-                    <IconButton
-                      onClick={() => {
-                        handleEditClick();
-                      }}
-                    >
-                      <PencilSimpleIcon />
-                    </IconButton>
-                  }
-                  avatar={
-                    <Avatar>
-                      <UserIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title={t('basic-details', { ns: 'lesson_type' })}
-                />
-                <PropertyList
-                  divider={<Divider />}
-                  orientation="vertical"
-                  sx={{ '--PropertyItem-padding': '12px 24px' }}
-                >
-                  {(
-                    [
-                      { key: 'Customer ID', value: <Chip label={showLessonType.id} size="small" variant="soft" /> },
-                      { key: 'Name', value: showLessonType.name },
-                      { key: 'Type', value: showLessonType.type },
-                      { key: 'Pos', value: showLessonType.pos },
-                      {
-                        key: 'Visible',
-                        value: (
-                          <Chip
-                            //
-                            label={showLessonType.visible}
-                            size="small"
-                            variant="soft"
-                          />
-                        ),
-                      },
-                      {
-                        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={t('security', { ns: 'lesson_type' })}
-                />
-                <CardContent>
-                  <Stack spacing={1}>
-                    <div>
-                      <Button color="error" variant="contained">
-                        Delete account
-                      </Button>
-                    </div>
-                    <Typography color="text.secondary" variant="body2">
-                      A deleted lesson type cannot be restored. All data will be permanently removed.
-                    </Typography>
-                  </Stack>
-                </CardContent>
-              </Card>
+              <BasicDetailCard lpCatId={showLessonType.id} handleEditClick={handleEditClick} />
+              <SampleSecurityCard />
             </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={t('billing-details', { ns: 'lesson_type' })}
-                />
-                <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={t('shipping-addresses', { ns: 'lesson_type' })}
-                />
-                <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(),
-                  },
-                ]}
-              />
+              <SamplePaymentCard />
+              <SampleAddressCard />
+              <Notifications notifications={SampleNotifications} />
             </Stack>
           </Grid>
         </Grid>

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

@@ -40,12 +40,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
   const [showError, setShowError] = React.useState<boolean>(false);
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
-  //
   const [f, setF] = React.useState<LessonType[]>([]);
   const [currentPage, setCurrentPage] = React.useState<number>(0);
-  //
   const [recordCount, setRecordCount] = React.useState<number>(0);
-
   const [listOption, setListOption] = React.useState({});
   const [listSort, setListSort] = React.useState({});
 
@@ -143,10 +140,15 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               filters={{ email, phone, status, name, visible, type }}
               fullData={lessonTypesData}
               sortDir={sortDir}
+              //
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <LessonTypesTable reloadRows={reloadRows} rows={f} />
+              <LessonTypesTable
+                reloadRows={reloadRows}
+                rows={f}
+                //
+              />
             </Box>
             <Divider />
             <LessonTypesPagination

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

@@ -1,236 +0,0 @@
-'use client';
-
-import * as React from 'react';
-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 { useTranslation } from 'react-i18next';
-
-import type { Address } from '@/types/Address';
-import { paths } from '@/paths';
-import { PropertyItem } from '@/components/core/property-item';
-import { PropertyList } from '@/components/core/property-list';
-import { Notifications } from '@/components/dashboard/lp_categories/notifications';
-import { Payments } from '@/components/dashboard/lp_categories/payments';
-import { ShippingAddress } from '@/components/dashboard/lp_categories/shipping-address';
-
-import { SampleAddresses } from './SampleAddresses';
-import { SampleNotifications } from './SampleNotifications';
-import { SamplePayments } from './SamplePayments';
-
-export default function Page(): React.JSX.Element {
-  const { t } = useTranslation();
-
-  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.lp_categories.list}
-              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
-              variant="subtitle2"
-            >
-              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              {t('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">{t('Customer name')}</Typography>
-                  <Chip
-                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
-                    label={t('Active')}
-                    size="small"
-                    variant="outlined"
-                  />
-                </Stack>
-                <Typography color="text.secondary" variant="body1">
-                  {t('Customer email')}
-                </Typography>
-              </div>
-            </Stack>
-            <div>
-              <Button endIcon={<CaretDownIcon />} variant="contained">
-                {t('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={t('Basic details')}
-                />
-                <PropertyList
-                  divider={<Divider />}
-                  orientation="vertical"
-                  sx={{ '--PropertyItem-padding': '12px 24px' }}
-                >
-                  {(
-                    [
-                      { key: t('Customer ID'), value: <Chip label={t('USR-001')} size="small" variant="soft" /> },
-                      { key: t('Name'), value: t('Customer name') },
-                      { key: t('Email'), value: t('Customer email') },
-                      { key: t('Phone'), value: t('Customer phone') },
-                      { key: t('Company'), value: t('Company name') },
-                      {
-                        key: t('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={t('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>
-            </Stack>
-          </Grid>
-          <Grid lg={8} xs={12}>
-            <Stack spacing={4}>
-              <Payments ordersValue={2069.48} payments={SamplePayments} refundsValue={324.5} totalOrders={5} />
-              <Card>
-                <CardHeader
-                  action={
-                    <Button color="secondary" startIcon={<PencilSimpleIcon />}>
-                      {t('Edit')}
-                    </Button>
-                  }
-                  avatar={
-                    <Avatar>
-                      <CreditCardIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title={t('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>
-              <Card>
-                <CardHeader
-                  action={
-                    <Button color="secondary" startIcon={<PlusIcon />}>
-                      {t('Add')}
-                    </Button>
-                  }
-                  avatar={
-                    <Avatar>
-                      <HouseIcon fontSize="var(--Icon-fontSize)" />
-                    </Avatar>
-                  }
-                  title={t('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>
-              <Notifications notifications={SampleNotifications} />
-            </Stack>
-          </Grid>
-        </Grid>
-      </Stack>
-    </Box>
-  );
-}

002_source/cms/src/app/dashboard/lp_categories/[lp_cat_id]/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import getQuizListeningById from '@/db/QuizListenings/GetById';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import type { LpCategory } from '@/types/LpCategory';
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultLpCategory, LpCategoryDefaultValue } from '@/components/dashboard/lp_categories/_constants';
+import { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import FormLoading from '@/components/loading';
+
+import BasicDetailCard from '../../Sample/BasicDetailCard';
+import SampleAddressCard from '../../Sample/SampleAddressCard';
+import { SampleNotifications } from '../../Sample/SampleNotifications';
+import SamplePaymentCard from '../../Sample/SamplePaymentCard';
+import SampleSecurityCard from '../../Sample/SampleSecurityCard';
+import SampleTitleCard from '../../Sample/SampleTitleCard';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['listening_practice']);
+  const router = useRouter();
+  //
+  const { lp_cat_id: lpCatId } = useParams<{ lp_cat_id: string }>();
+
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState<boolean>(false);
+  const [errorDetails, setErrorDetails] = React.useState('');
+
+  //
+  const [showLessonType, setShowLessonType] = React.useState<LpCategory>(LpCategoryDefaultValue.default);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.lp_categories.edit(lpCatId));
+  }
+
+  React.useEffect(() => {
+    getQuizListeningById(lpCatId)
+      .then((model: RecordModel) => {
+        setShowLessonType({ ...defaultLpCategory, ...model });
+      })
+      .catch((err) => {
+        logger.error(err);
+        toast(t('list.error'));
+        setErrorDetails(err);
+        setShowError(true);
+      })
+      .finally(() => {
+        setShowLoading(false);
+      });
+  }, [lpCatId]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request', { ns: 'common' })}
+        code="500"
+        details={JSON.stringify(errorDetails, null, 2)}
+      />
+    );
+
+  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.lp_categories.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('list.title')}
+            </Link>
+          </div>
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+            <SampleTitleCard />
+          </Stack>
+        </Stack>
+        <Grid container spacing={4}>
+          <Grid lg={4} xs={12}>
+            <Stack spacing={4}>
+              <BasicDetailCard lpCatId={showLessonType.id} handleEditClick={handleEditClick} />
+              <SampleSecurityCard />
+            </Stack>
+          </Grid>
+          <Grid lg={8} xs={12}>
+            <Stack spacing={4}>
+              <SamplePaymentCard />
+              <SampleAddressCard />
+              <Notifications notifications={SampleNotifications} />
+            </Stack>
+          </Grid>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

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

@@ -2,35 +2,106 @@
 
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
-import getAllQuizListenings from '@/db/QuizListenings/GetAll';
+import listWithOption from '@/db/QuizListenings/ListWithOption';
+import { LoadingButton } from '@mui/lab';
 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 type { ListResult, RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import type { LpCategory } from '@/types/LpCategory';
 import { paths } from '@/paths';
+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 { LpCategories } from './lp-categories';
+import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
-  const router = useRouter();
   const { t } = useTranslation(['listening_practice']);
-  const { email, phone, sortDir, status } = searchParams;
+  const { email, phone, sortDir, status, name, visible, type } = searchParams;
+  const router = useRouter();
+  const [lpCategoriesData, setLpCategoriesData] = React.useState<LpCategory[]>([]);
+  //
 
-  const sortedCustomers = applySort(LpCategories, sortDir);
-  const lpCategories = applyFilters(sortedCustomers, { email, phone, status });
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState<boolean>(false);
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [f, setF] = React.useState<LpCategory[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
 
-  React.useEffect(() => {}, []);
+  //
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await listWithOption({
+        currentPage: currentPage + 1,
+        rowsPerPage,
+        listOption,
+      });
+
+      const { items, totalItems } = models;
+      const tempLpCategories: LpCategory[] = items.map((lt) => {
+        return { ...defaultLpCategory, ...lt };
+      });
+
+      setLpCategoriesData(tempLpCategories);
+      setRecordCount(totalItems);
+      setF(tempLpCategories);
+    } catch (error) {
+      //
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    void reloadRows();
+  }, [currentPage, rowsPerPage, listOption]);
+
+  React.useEffect(() => {
+    let tempFilter = [],
+      tempSortDir = '';
+
+    if (visible) {
+      tempFilter.push(`visible = "${visible}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (name) {
+      tempFilter.push(`name ~ "%${name}%"`);
+    }
+
+    if (type) {
+      tempFilter.push(`type ~ "%${type}%"`);
+    }
+
+    setListOption({
+      filter: tempFilter.join(' && '),
+      sort: tempSortDir,
+      //
+    });
+  }, [visible, sortDir, name, type]);
+
+  if (f.length === 0 || showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay message={t('unable-to-process-request')} code="500" details={t('detailed-error-information')} />
+    );
 
   return (
     <Box
@@ -44,29 +115,45 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       <Stack spacing={4}>
         <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
           <Box sx={{ flex: '1 1 auto' }}>
-            <Typography variant="h4">{t('listening-practice')}</Typography>
+            <Typography variant="h4">{t('list.title')}</Typography>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button
-              onClick={() => {
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
                 router.push(paths.dashboard.lp_categories.create);
               }}
               startIcon={<PlusIcon />}
               variant="contained"
             >
               {t('add')}
-            </Button>
+            </LoadingButton>
           </Box>
         </Stack>
-        <LpCategoriesSelectionProvider LpCategories={lpCategories}>
+        <LpCategoriesSelectionProvider LpCategories={f}>
           <Card>
-            <LpCategoriesFilters filters={{ email, phone, status }} sortDir={sortDir} />
+            <LpCategoriesFilters
+              filters={{ email, phone, status }}
+              fullData={f}
+              sortDir={sortDir}
+              //
+            />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <LpCategoriesTable rows={lpCategories} />
+              <LpCategoriesTable
+                rows={f}
+                //
+              />
             </Box>
             <Divider />
-            <LpCategoriesPagination count={lpCategories.length + 100} page={0} />
+            <LpCategoriesPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
           </Card>
         </LpCategoriesSelectionProvider>
       </Stack>
@@ -86,7 +173,7 @@ function applySort(row: LpCategory[], sortDir: 'asc' | 'desc' | undefined): LpCa
   });
 }
 
-function applyFilters(row: LpCategory[], { email, phone, status }: Filters): LpCategory[] {
+function applyFilters(row: LpCategory[], { email, phone, status, name, visible }: Filters): LpCategory[] {
   return row.filter((item) => {
     if (email) {
       if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
@@ -106,10 +193,31 @@ function applyFilters(row: LpCategory[], { email, phone, status }: Filters): LpC
       }
     }
 
+    if (name) {
+      if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (visible) {
+      if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
+        return false;
+      }
+    }
+
     return true;
   });
 }
 
 interface PageProps {
-  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+  searchParams: {
+    email?: string;
+    phone?: string;
+    sortDir?: 'asc' | 'desc';
+    status?: string;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
 }