update mf build ok,

001_documentation/Requirements/REQ0006/schema.dbml

@@ -1,4 +1,5 @@
 // LessonTypes stores different types of lessons
+// lesson_types, lesson_type
 Table LessonTypes {
   // system field
   id int [pk, increment] // unique identifier for the lesson type
@@ -10,6 +11,7 @@ Table LessonTypes {
 }
 
 // LessonCategories stores categories of lessons
+// lesson_categories, lesson_category
 Table LessonCategories {
   // system field
   id int [pk, increment] // unique identifier for the lesson category
@@ -133,5 +135,81 @@ Table Vocabularies {
   sample_c varchar // Sample sentence in Chinese using the word
   cat_id integer [ref: > LessonCategories.id] // foreign key referring to LessonCategories.id
   category varchar // The category to which the lesson belongs
+  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referring to LessonTypes.id
 }
 
+// Listening Practice Quiz Categories
+// store listening practice category, (LpCategories, LpCategory)
+Table QuizLPCategories {
+  // system fields
+  id text [pk] // changed from int to text to match PocketBase
+  created datetime [default: `now()`]
+  updated datetime
+
+  // value fields
+  cat_name varchar [presentable: true] // added presentable flag
+  cat_image file // changed from blob to file type
+  pos number // changed from integer to number
+  init_answer json
+}
+
+// Listening Practice Quiz Questions
+Table QuizLPQuestions {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  word varchar
+  sound blob
+  cat_id integer [ref: > QuizLPCategories.id]
+}
+
+// Matching Frenzy Quiz Categories
+Table QuizMFCategories {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  cat_name varchar
+  cat_image blob
+  pos integer
+  init_answer json
+}
+
+// Matching Frenzy Quiz Questions
+Table QuizMFQuestions {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  word varchar
+  word_c varchar
+  cat_id integer [ref: > QuizMFCategories.id]
+}
+
+// Connectives Revision Quiz Categories
+Table QuizCRCategories {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  cat_name varchar
+  cat_image blob
+  pos integer
+  init_answer json
+}
+
+// Connectives Revision Quiz Questions
+Table QuizCRQuestions {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  question_fh varchar
+  question_sh varchar
+  modal_ans varchar
+  cat_id integer [ref: > QuizCRCategories.id]
+}
+
+// Test table
+Table t1 {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  name varchar
+}

002_source/cms/.gitignore

@@ -12,6 +12,7 @@
 **/*.log
 **/*.tmp
 **/*.del
+**/*.plan
 **/_archive
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

002_source/cms/_AI_GUIDELINE/index.md

@@ -1,11 +1,15 @@
 # guideline
 
 - please divide the problem into small parts
-- if you found you cannot understand the problem, please ask the question
-- if you found you cannot solve the problem, plesae stop and shout
+- if you found youself cannot understand the problem, please stop and ask how to do
+- if you found youself cannot solve the problem, plesae stop and ask how to do
 - review the whole solution before you reply to user
+- if code syntax is already there, do follow (e.g. naming convention, syntax) the existing code
 
 - example for page can be found in `./src/app/_helloworld/page.tsx`
 - example for component can be found in `./src/components/_helloworld/index.tsx`
 
-Thanks.
+- no need to explain the reason until you are told to do so
+- no need to show me the code change, at the end just simple summary in point form is ok
+
+Thanks

002_source/cms/_AI_WORKSPACE/001_guideline/001_GUIDELINE.md

@@ -0,0 +1,15 @@
+# guideline
+
+- please divide the problem into small parts
+- if you found youself cannot understand the problem, please stop and ask how to do
+- if you found youself cannot solve the problem, plesae stop and ask how to do
+- review the whole solution before you reply to user
+- if code syntax is already there, do follow (e.g. naming convention, syntax) the existing code
+
+- example for page can be found in `./src/app/_helloworld/page.tsx`
+- example for component can be found in `./src/components/_helloworld/index.tsx`
+
+- no need to explain the reason until you are told to do so
+- no need to show me the code change, at the end just simple summary in point form is ok
+
+Thanks

002_source/cms/_AI_WORKSPACE/DB_PROMPT.MD

@@ -0,0 +1,99 @@
+# AI GUIDELINE
+
+## getting started
+
+Imagine there is a software developer and a QA engineer to solve the problems together
+
+They will:
+
+no need to reply me what you are going on and your digest in this phase.
+just reply me "OK" when done
+
+base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
+
+- `schema.dbml`
+
+  - read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
+    this is file in dbml syntax state the main database
+
+- `schema.json`
+
+  - read `<base_dir>/002_source/cms/src/db/schema.json`
+    this is the file of live pocketbase schema output
+
+- read `<base_dir>/002_source/cms/src/constants.ts`
+  this is the content of `@/constants`
+
+- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
+
+- read, remember and link up the ideas in file stated above,
+  i will tell them the task afterwards
+
+---
+
+The software engineer will provide solutions,
+while QA engineer will feedback the opinion.
+
+this is now not in debug phase,
+so, no need to reply me what they are going on or their insight throught the prompt.
+just reply me "OK" when done
+
+---
+
+clone `GetVisibleCount.tsx` and `GetHiddenCount.tsx` from `LessonTypes` to `LessonCategories` and update it
+
+please draft `GetHiddenCount.tsx` for COL_LESSON_TYPES and `status = hidden`
+
+well done !, please proceed to another request
+
+working directory: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db`
+
+according information from `schema.json`, get the collection of `Students`
+
+pleaes clone the `tsx` files from `LessonTypes` and `LessonCategories` to `Students` and update the content
+
+when you draft coding, review file and append with `.tsx.draft`
+
+---
+
+- this is part of react typescript project, with pocketbase
+- `schema.dbml`, describe the collections(tables)
+- folder `LessonCategories`, the correct references
+- folder `LessonTypes`, the correct references
+- you can find the `schema.dbml` and schema information from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006`
+- do not read root directory, assume it is a fresh copy of nextjs project is ok
+
+## instruction
+
+- break the questions into smaller parts
+- review file append with `.draft`, see if the content aligned with the correct references
+- read and understand `dbml` file
+- lookup the every folder
+
+## tasks
+
+Thanks
+
+---
+
+---
+
+please revise
+
+please revise
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx` `interface LpCategory`
+
+to the collection `QuizLPCategories` align the dbml file in the previous prompt
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp_categories/_constants.tsx`
+
+to follow the type definition in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx`, the constant `defaultLpCategory`
+
+---
+
+the constants file (`@/constants`) was `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/constants.ts`
+
+please help to fix the `tsx` files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizMFCategories`,
+the `COL` constants is wrongly used, it should refer to `COL_QUIZ_MF_CATEGORIES`. thanks
+
+please update the `COL_XXXX` TO COL_MF_CATEGORIES

002_source/cms/_AI_WORKSPACE/_PROMPT.md

@@ -0,0 +1,10 @@
+Hi, i need your help.
+
+i am working on a react typescript project
+i will show you part of the code and it is located in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/mf`
+
+it is copied from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp`, i want you to help modifing from `lp` to `mf`, the corrosponding word is `lp -> listening practice` and `mf -> matching frenzy`,
+
+please help to update the `imports`, variables/constants, functions, classes
+
+thank you

002_source/cms/next.config.mjs

@@ -2,7 +2,12 @@
 const config = {
   reactStrictMode: false,
   images: {
-    domains: ['example.com', '127.0.0.1', 'localhost'],
+    domains: [
+      //
+      'example.com',
+      '127.0.0.1',
+      'localhost',
+    ],
   },
 };
 

002_source/cms/package.json

@@ -8,12 +8,12 @@
   },
   "scripts": {
     "dev": "next dev",
-    "build": "rm -rf .next && next build",
+    "build": "next build",
     "build:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 15 --exec \"pnpm run build\"",
     "start": "next start",
     "lint": "next lint --quiet",
     "lint:fix": "next lint --fix",
-    "lint:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 60 --exec \"pnpm run lint\"",
+    "lint:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 5 --exec \"pnpm run lint\"",
     "typecheck": "tsc --noEmit",
     "typecheck:w": "tsc --noEmit -w",
     "format:write": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
@@ -116,4 +116,4 @@
       "protobufjs"
     ]
   }
-}
+}

002_source/cms/prettier.config.mjs

@@ -29,6 +29,14 @@ const config = {
     '^[./]',
   ],
   plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  overrides: [
+    {
+      files: ['*.tsx'],
+      options: {
+        singleAttributePerLine: true,
+      },
+    },
+  ],
 };
 
 export default config;

002_source/cms/public/locales/dev/PROMPT.md

@@ -11,6 +11,7 @@ dashboard.lessonCategories.edit.name
 dashboard.lessonCategories.edit.type
 
 ```
+
 ---
 
 please read `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lesson_category/lesson-category-edit-form.tsx`
@@ -20,3 +21,19 @@ and update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/letter
 
 please refactor `common.json` to smaller translation files, thanks
 e.g. `lessonTypes` -> `lesson_type`
+
+---
+
+Hi, i want you to help merge two translation files.
+
+base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev`
+
+I want you to merge the content
+
+from `<base_dir>/lesson_type.json` (source file)
+to `<base_dir>/listening_practice.json` (dest file)
+
+please extract , link up and remember the document properties
+(e.g. types, functions, variables, constants, etc)
+
+update the variables and properties of dest file to reflect `listening practice categories`/`lp_categories`

002_source/cms/public/locales/dev/common.json

@@ -130,5 +130,6 @@
     "unable-to-process-request": "無法處理您的請求",
     "detailed-error-information": "詳細錯誤資訊"
   },
-  "name-is-required": "名稱為必填"
+  "name-is-required": "名稱為必填",
+  "listening-practice": "聽講練習"
 }

002_source/cms/public/locales/dev/listening_practice.json

@@ -0,0 +1,36 @@
+{
+  "add": "新增",
+  "listening-practice": "聽力練習",
+  "list": {
+    "title": "聽力練習分類列表",
+    "empty": "沒有找到聽力練習分類",
+    "action": "動作?",
+    "basic-details": "基本資料"
+  },
+  "helloworld": "listening_practice",
+  "title": "聽力練習分類",
+  "type": "聽力練習分類",
+  "error": {
+    "invalid": "無效的聽力練習分類",
+    "not_found": "未找到聽力練習分類"
+  },
+  "create": {
+    "title": "創建聽力練習分類",
+    "success": "聽力練習分類創建成功",
+    "error": "創建聽力練習分類時出錯"
+  },
+  "edit": {
+    "title": "編輯聽力練習分類",
+    "success": "聽力練習分類更新成功",
+    "error": "更新聽力練習分類時出錯"
+  },
+  "delete": {
+    "title": "刪除聽力練習分類",
+    "confirm": "確定要刪除聽力練習分類嗎？",
+    "success": "聽力練習分類刪除成功",
+    "error": "刪除聽力練習分類時出錯"
+  },
+  "view": {
+    "title": "查看聽力練習分類詳情"
+  }
+}

002_source/cms/public/locales/dev/translation.json

@@ -165,7 +165,12 @@
   "Cancel": "取消",
   "Delete": "刪除",
   "All": "全部",
-  "categories": "課程分類",
+  "categories": "問題分類",
+  "listening-practice": "聽講練習 (LP)",
+  "matching-frenzy": "配對練習 (MF)",
+  "connective-revision": "連接詞練習 (CR)",
+  "teachers": "導師",
+  "questions": "題目",
   "loading": "載入中",
   "Notifications": "通知",
   "Mark all as read": "標記所有為已讀",
@@ -192,4 +197,4 @@
   "dashboard.lessonTypes.list.error": "課程類型載入失敗",
   "unable-to-process-request": "無法處理請求",
   "detailed-error-information": "詳細錯誤資訊"
-}
+}

002_source/cms/scripts/002_typecheck_w.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+rm -rf tsconfig.tsbuildinfo
+reset
+pnpm run typecheck:w

002_source/cms/scripts/003_build_w.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+reset
+rm -rf .next
+pnpm run build

002_source/cms/scripts/004_dev.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+set -ex
+
+rm -rf .next
+pnpm run dev

002_source/cms/scripts/build_w.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-
-npx nodemon --ext tsx,ts --exec "reset && pnpm run build"

002_source/cms/src/app/dashboard/Sample/AddressCard/index.tsx

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

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

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

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/Notifications/index.tsx

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

002_source/cms/src/app/dashboard/Sample/Notifications/type.d.ts

@@ -0,0 +1,6 @@
+export interface Notification {
+  id: string;
+  type: string;
+  status: 'delivered' | 'pending' | 'failed';
+  createdAt: Date;
+}

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

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

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

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

002_source/cms/src/app/dashboard/Sample/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/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,66 @@
+'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/cr_categories/[customerId]/page.tsx

@@ -0,0 +1,308 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,255 @@
+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

@@ -0,0 +1,308 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,255 @@
+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/customers/page.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import type { Metadata } from 'next';
+// import type { Metadata } from 'next';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
@@ -17,7 +19,7 @@ import { CustomersSelectionProvider } from '@/components/dashboard/customer/cust
 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;
+// export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
 
 const customers = [
   {
@@ -182,6 +184,10 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const sortedCustomers = applySort(customers, sortDir);
   const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
 
+  React.useEffect(() => {
+    console.log('helloworld');
+  }, []);
+
   return (
     <Box
       sx={{
@@ -192,25 +198,38 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       }}
     >
       <Stack spacing={4}>
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+        <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">
+            <Button
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
               Add
             </Button>
           </Box>
         </Stack>
         <CustomersSelectionProvider customers={filteredCustomers}>
           <Card>
-            <CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
+            <CustomersFilters
+              filters={{ email, phone, status }}
+              sortDir={sortDir}
+            />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
               <CustomersTable rows={filteredCustomers} />
             </Box>
             <Divider />
-            <CustomersPagination count={filteredCustomers.length + 100} page={0} />
+            <CustomersPagination
+              count={filteredCustomers.length + 100}
+              page={0}
+            />
           </Card>
         </CustomersSelectionProvider>
       </Stack>

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

@@ -45,13 +45,14 @@ import { Notifications } from '@/components/dashboard/lesson_category/notificati
 import { Payments } from '@/components/dashboard/lesson_category/payments';
 import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
 import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
-import type { LessonCategory } from '@/components/dashboard/lesson_category/types';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 import FormLoading from '@/components/loading';
 
 // export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
 
 export default function Page(): React.JSX.Element {
-  const { t } = useTranslation(['common']);
+  const { t } = useTranslation();
   const router = useRouter();
   //
   const { cat_id: catId } = useParams<{ cat_id: string }>();

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

@@ -12,14 +12,8 @@ import { useTranslation } from 'react-i18next';
 import { paths } from '@/paths';
 import { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
 
-// import { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
-
 export default function Page(): React.JSX.Element {
-  const { t } = useTranslation(['common', 'lesson_category']);
-
-  React.useEffect(() => {
-    console.log('helloworld');
-  }, []);
+  const { t } = useTranslation(['lesson_category']);
 
   return (
     <Box

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

@@ -1,5 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/types';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
 // import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';

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

@@ -24,7 +24,8 @@ import type { Filters } from '@/components/dashboard/lesson_category/lesson-cate
 import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
 import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
 import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
-import type { LessonCategory } from '@/components/dashboard/lesson_category/types';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 import FormLoading from '@/components/loading';
 
 // import { lessonCategoriesSampleData } from './lesson-categories-sample-data';

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,41 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
-import Avatar from '@mui/material/Avatar';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import BasicDetailCard from '@/app/dashboard/Sample/BasicDetailCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
+import SampleTitleCard from '@/app/dashboard/Sample/SampleTitleCard';
 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 { type LessonType } from '@/components/dashboard/lesson_type/lesson-type';
 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';
 
 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 +55,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 +71,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 +95,41 @@ 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>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <SampleTitleCard />
           </Stack>
         </Stack>
-        <Grid container spacing={4}>
-          <Grid lg={4} xs={12}>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
             <Stack spacing={4}>
-              <Card>
-                <CardHeader
-                  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}>
+          <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/lesson-types-data.tsx

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

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

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

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

@@ -1,5 +1,9 @@
 'use client';
 
+// RULES:
+// contains list page for lp_categories (QuizLPCategories)
+// contain definition to collection only
+//
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
 import { COL_LESSON_TYPES } from '@/constants';
@@ -19,14 +23,12 @@ import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultLessonType } from '@/components/dashboard/lesson_type/_constants';
-// import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
-// import { defaultLessonType, emptyLessonType, safeAssignment } from '@/components/dashboard/lesson_type/interfaces';
+import type { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
 import { LessonTypesFilters } from '@/components/dashboard/lesson_type/lesson-types-filters';
 import type { Filters } from '@/components/dashboard/lesson_type/lesson-types-filters';
 import { LessonTypesPagination } from '@/components/dashboard/lesson_type/lesson-types-pagination';
 import { LessonTypesSelectionProvider } from '@/components/dashboard/lesson_type/lesson-types-selection-context';
 import { LessonTypesTable } from '@/components/dashboard/lesson_type/lesson-types-table';
-import type { LessonType } from '@/components/dashboard/lesson_type/types';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
@@ -38,14 +40,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
 
   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 [showError, setShowError] = React.useState({ show: false, detail: '' });
   //
+  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({});
 
@@ -65,6 +65,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       setF(tempLessonTypes);
     } catch (error) {
       //
+      logger.error(error);
+      setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
     } finally {
       setShowLoading(false);
     }
@@ -105,7 +107,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
 
   if (showError)
     return (
-      <ErrorDisplay message={t('unable-to-process-request')} code="500" details={t('detailed-error-information')} />
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
     );
 
   return (
@@ -118,7 +124,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       }}
     >
       <Stack spacing={4}>
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={3}
+          sx={{ alignItems: 'flex-start' }}
+        >
           <Box sx={{ flex: '1 1 auto' }}>
             <Typography variant="h4">{t('list.title')}</Typography>
           </Box>
@@ -143,10 +153,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/[cat_id]/BasicDetailCard.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+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 { 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';
+import { LpCategory } from '@/components/dashboard/lp_categories/type';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: LpCategory;
+  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={model.id}
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Name', value: model.cat_name },
+            { key: 'Remarks', value: model.remarks },
+            { key: 'Description', value: model.description },
+          ] 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/lp/categories/[cat_id]/TitleCard.tsx

@@ -0,0 +1,73 @@
+'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';
+
+import { LpCategory } from '@/components/dashboard/lp_categories/type';
+
+function getImageUrlFrRecord(record: LpCategory): string {
+  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          variant="rounded"
+          src={getImageUrlFrRecord(lpModel)}
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          {t('empty')}
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{lpModel.cat_name}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.visible}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.slug}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
+import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
+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 { paths } from '@/paths';
+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 { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import type { LpCategory } from '@/components/dashboard/lp_categories/type';
+import FormLoading from '@/components/loading';
+
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<LpCategory>(defaultLpCategory);
+
+  function handleEditClick() {
+    router.push(paths.dashboard.lp_categories.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (catId) {
+      pb.collection(COL_QUIZ_LP_CATEGORIES)
+        .getOne(catId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultLpCategory, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  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' }}
+          >
+            <TitleCard lpModel={showLessonCategory} />
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <BasicDetailCard
+                lpModel={showLessonCategory}
+                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/create/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+// RULES:
+// T.B.A.
+//
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { LpCategoryCreateForm } from '@/components/dashboard/lp_categories/lp-category-create-form';
+
+export default function Page(): React.JSX.Element {
+  // RULES: follow the name of page directory
+  const { t } = useTranslation(['lp_categories']);
+
+  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('title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('create.title')}</Typography>
+          </div>
+        </Stack>
+        <LpCategoryCreateForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/lp/categories/edit/[cat_id]/_PROMPT.md

@@ -0,0 +1,11 @@
+# task
+
+## instruction
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
+
+please draft a tsx for showing error to user thanks,

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

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { LpCategoryEditForm } from '@/components/dashboard/lp_categories/lp-category-edit-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['lp_categories']);
+
+  React.useEffect(() => {
+    // console.log('helloworld');
+  }, []);
+
+  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('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <LpCategoryEditForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { dayjs } from '@/lib/dayjs';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+export const LpCategoriesSampleData = [
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+] satisfies LessonCategory[];

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

@@ -0,0 +1,217 @@
+'use client';
+
+// RULES:
+// contains list page for lp_categories (QuizLPCategories)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+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 { paths } from '@/paths';
+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 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 [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [f, setF] = React.useState<LpCategory[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const sortedLessonCategories = applySort(lessonCategoriesData, sortDir);
+  const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
+
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_QUIZ_LP_CATEGORIES)
+        .getList(currentPage + 1, rowsPerPage, listOption);
+      const { items, totalItems } = models;
+      const tempLessonTypes: LpCategory[] = items.map((lt) => {
+        return { ...defaultLpCategory, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+      console.log({ currentPage, f });
+    } catch (error) {
+      //
+      setShowError({ show: true, detail: JSON.stringify(error) });
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    void reloadRows();
+  }, [currentPage, rowsPerPage, listOption]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  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">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.lp_categories.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <LpCategoriesSelectionProvider lessonCategories={f}>
+          <Card>
+            <LpCategoriesFilters
+              filters={{ email, phone, status, name, visible, type }}
+              fullData={lessonCategoriesData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <LpCategoriesTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <LpCategoriesPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </LpCategoriesSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: LpCategory[], sortDir: 'asc' | 'desc' | undefined): LpCategory[] {
+  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: LpCategory[], { email, phone, status, name, visible }: Filters): LpCategory[] {
+  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;
+      }
+    }
+
+    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;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
+}

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

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+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 { 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';
+import { LpCategory } from '@/components/dashboard/lp_categories/type';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: LpCategory;
+  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={model.id}
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Name', value: model.cat_name },
+            { key: 'Remarks', value: model.remarks },
+            { key: 'Description', value: model.description },
+          ] 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/lp/questions/[cat_id]/TitleCard.tsx

@@ -0,0 +1,73 @@
+'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';
+
+import { LpCategory } from '@/components/dashboard/lp_categories/type';
+
+function getImageUrlFrRecord(record: LpCategory): string {
+  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          variant="rounded"
+          src={getImageUrlFrRecord(lpModel)}
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          {t('empty')}
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{lpModel.cat_name}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.visible}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.slug}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
+import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
+import { Grid } from '@mui/material';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+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 { Notifications } from '@/components/dashboard/lp_questions/notifications';
+import type { LpQuestion } from '@/components/dashboard/lp_questions/type';
+import FormLoading from '@/components/loading';
+
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+
+  //
+  const [showLessonQuestion, setShowLessonQuestion] = React.useState<LpQuestion>(defaultLpQuestion);
+
+  function handleEditClick() {
+    router.push(paths.dashboard.lp_questions.edit(showLessonQuestion.id));
+  }
+
+  React.useEffect(() => {
+    if (catId) {
+      pb.collection(COL_QUIZ_LP_QUESTIONS)
+        .getOne(catId)
+        .then((model: RecordModel) => {
+          setShowLessonQuestion({ ...defaultLpQuestion, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  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_questions.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <TitleCard lpModel={showLessonQuestion} />
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <BasicDetailCard
+                lpModel={showLessonQuestion}
+                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/questions/create/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+// RULES:
+// T.B.A.
+//
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { LpQuestionCreateForm } from '@/components/dashboard/lp_questions/lp-question-create-form';
+
+export default function Page(): React.JSX.Element {
+  // RULES: follow the name of page directory
+  const { t } = useTranslation(['lp_questions']);
+
+  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_questions.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('create.title')}</Typography>
+          </div>
+        </Stack>
+        <LpQuestionCreateForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/lp/questions/edit/[cat_id]/_PROMPT.md

@@ -0,0 +1,11 @@
+# task
+
+## instruction
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
+
+please draft a tsx for showing error to user thanks,

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

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { LpQuestionEditForm } from '@/components/dashboard/lp_questions/lp-question-edit-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['lp_questions']);
+
+  React.useEffect(() => {
+    // console.log('helloworld');
+  }, []);
+
+  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_questions.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <LpQuestionEditForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { dayjs } from '@/lib/dayjs';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+export const LpCategoriesSampleData = [
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+] satisfies LessonCategory[];

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

@@ -0,0 +1,272 @@
+'use client';
+
+// RULES:
+// contains list page for lp_questions (QuizLPQuestions)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+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 { paths } from '@/paths';
+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 ErrorDisplay from '@/components/dashboard/error';
+import { defaultLpQuestion } from '@/components/dashboard/lp_questions/_constants';
+import { LpQuestionsFilters } from '@/components/dashboard/lp_questions/lp-questions-filters';
+import type { Filters } from '@/components/dashboard/lp_questions/lp-questions-filters';
+import { LpQuestionsPagination } from '@/components/dashboard/lp_questions/lp-questions-pagination';
+import { LpQuestionsSelectionProvider } from '@/components/dashboard/lp_questions/lp-questions-selection-context';
+import { LpQuestionsTable } from '@/components/dashboard/lp_questions/lp-questions-table';
+import type { LpQuestion } from '@/components/dashboard/lp_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 [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [f, setF] = React.useState<LpQuestion[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const sortedLessonCategories = applySort(lessonQuestionsData, sortDir);
+  const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
+
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_QUIZ_LP_QUESTIONS)
+        .getList(currentPage + 1, rowsPerPage, listOption);
+      const { items, totalItems } = models;
+      const tempLessonTypes: LpQuestion[] = items.map((lt) => {
+        return { ...defaultLpQuestion, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+      // console.log({ currentPage, f });
+    } catch (error) {
+      //
+      logger.error(error);
+      setShowError({
+        //
+        show: true,
+        detail: JSON.stringify(error, null, 2),
+      });
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
+  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 {
+        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}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+    // setListOption({
+    //   filter: tempFilter.join(' && '),
+    //   sort: tempSortDir,
+    //   //
+    // });
+  }, [visible, sortDir, name, type]);
+
+  // return <>helloworld</>;
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code={-1}
+        details={showError.detail}
+      />
+    );
+
+  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">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.lp_questions.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <LpQuestionsSelectionProvider lessonQuestions={f}>
+          <Card>
+            <LpQuestionsFilters
+              filters={{ email, phone, status, name, visible, type }}
+              fullData={lessonQuestionsData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <LpQuestionsTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <LpQuestionsPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </LpQuestionsSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: LpQuestion[], sortDir: 'asc' | 'desc' | undefined): LpQuestion[] {
+  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: LpQuestion[], { email, phone, status, name, visible }: Filters): LpQuestion[] {
+  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;
+      }
+    }
+
+    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;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
+}

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

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+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 { 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';
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: MfCategory;
+  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={model.id}
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Name', value: model.cat_name },
+            { key: 'Remarks', value: model.remarks },
+            { key: 'Description', value: model.description },
+          ] 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/mf/categories/[cat_id]/TitleCard.tsx

@@ -0,0 +1,73 @@
+'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';
+
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
+
+function getImageUrlFrRecord(record: MfCategory): string {
+  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          variant="rounded"
+          src={getImageUrlFrRecord(lpModel)}
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          {t('empty')}
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{lpModel.cat_name}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.visible}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.slug}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
+import { COL_QUIZ_MF_CATEGORIES } from '@/constants';
+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 { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultMfCategory } from '@/components/dashboard/mf/categories/_constants.ts';
+import { Notifications } from '@/components/dashboard/mf/categories/notifications';
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
+import FormLoading from '@/components/loading';
+
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<MfCategory>(defaultMfCategory);
+
+  function handleEditClick() {
+    router.push(paths.dashboard.mf_categories.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (catId) {
+      pb.collection(COL_QUIZ_MF_CATEGORIES)
+        .getOne(catId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultMfCategory, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  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.mf_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' }}
+          >
+            <TitleCard lpModel={showLessonCategory} />
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <BasicDetailCard
+                lpModel={showLessonCategory}
+                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/mf/categories/create/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+// RULES:
+// T.B.A.
+//
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { MfCategoryCreateForm } from '@/components/dashboard/mf/categories/lp-category-create-form';
+
+export default function Page(): React.JSX.Element {
+  // RULES: follow the name of page directory
+  const { t } = useTranslation(['lp_categories']);
+
+  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.mf_categories.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('create.title')}</Typography>
+          </div>
+        </Stack>
+        <MfCategoryCreateForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/mf/categories/edit/[cat_id]/_PROMPT.md

@@ -0,0 +1,11 @@
+# task
+
+## instruction
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
+
+please draft a tsx for showing error to user thanks,

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

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { MfCategoryEditForm } from '@/components/dashboard/mf/categories/mf-category-edit-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['lp_categories']);
+
+  React.useEffect(() => {
+    // console.log('helloworld');
+  }, []);
+
+  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.mf_categories.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <MfCategoryEditForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { dayjs } from '@/lib/dayjs';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+export const LpCategoriesSampleData = [
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+] satisfies LessonCategory[];

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

@@ -0,0 +1,218 @@
+'use client';
+
+// RULES:
+// contains list page for lp_categories (QuizLPCategories)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_QUIZ_MF_CATEGORIES } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+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 { paths } from '@/paths';
+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 ErrorDisplay from '@/components/dashboard/error';
+import { defaultMfCategory } from '@/components/dashboard/mf/categories/_constants';
+import { MfCategoriesFilters } from '@/components/dashboard/mf/categories/mf-categories-filters';
+import type { Filters } from '@/components/dashboard/mf/categories/mf-categories-filters';
+import { MfCategoriesPagination } from '@/components/dashboard/mf/categories/mf-categories-pagination';
+import { MfCategoriesSelectionProvider } from '@/components/dashboard/mf/categories/mf-categories-selection-context';
+import { MfCategoriesTable } from '@/components/dashboard/mf/categories/mf-categories-table';
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
+import FormLoading from '@/components/loading';
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  // TODO: modify from lp_categories to mf_categories
+  const { t } = useTranslation(['lp_categories']);
+  const { email, phone, sortDir, status, name, visible, type } = searchParams;
+  const router = useRouter();
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<MfCategory[]>([]);
+  //
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [f, setF] = React.useState<MfCategory[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const sortedLessonCategories = applySort(lessonCategoriesData, sortDir);
+  const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
+
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_QUIZ_MF_CATEGORIES)
+        .getList(currentPage + 1, rowsPerPage, {});
+      const { items, totalItems } = models;
+      const tempLessonTypes: MfCategory[] = items.map((lt) => {
+        return { ...defaultMfCategory, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+      console.log({ currentPage, f });
+    } catch (error) {
+      //
+      setShowError({ show: true, detail: JSON.stringify(error) });
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    void reloadRows();
+  }, [currentPage, rowsPerPage, listOption]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  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">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.mf_categories.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <MfCategoriesSelectionProvider lessonCategories={f}>
+          <Card>
+            <MfCategoriesFilters
+              filters={{ email, phone, status, name, visible, type }}
+              fullData={lessonCategoriesData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <MfCategoriesTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <MfCategoriesPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </MfCategoriesSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: MfCategory[], sortDir: 'asc' | 'desc' | undefined): MfCategory[] {
+  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: MfCategory[], { email, phone, status, name, visible }: Filters): MfCategory[] {
+  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;
+      }
+    }
+
+    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;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
+}

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

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+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 { 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';
+import { MfCategory } from '@/components/dashboard/mf/categories/type';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: MfCategory;
+  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={model.id}
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Name', value: model.cat_name },
+            { key: 'Remarks', value: model.remarks },
+            { key: 'Description', value: model.description },
+          ] 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/mf/questions/[cat_id]/TitleCard.tsx

@@ -0,0 +1,73 @@
+'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';
+
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
+
+function getImageUrlFrRecord(record: MfCategory): string {
+  return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: MfCategory }): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          variant="rounded"
+          src={getImageUrlFrRecord(lpModel)}
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          {t('empty')}
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{lpModel.cat_name}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.visible}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.slug}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
+import { COL_QUIZ_MF_QUESTIONS } from '@/constants';
+import { Grid } from '@mui/material';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultMfQuestion } from '@/components/dashboard/mf/questions/_constants.ts';
+import { Notifications } from '@/components/dashboard/mf/questions/notifications';
+import type { MfQuestion } from '@/components/dashboard/mf/questions/type';
+import FormLoading from '@/components/loading';
+
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+
+  //
+  const [showLessonQuestion, setShowLessonQuestion] = React.useState<MfQuestion>(defaultMfQuestion);
+
+  function handleEditClick() {
+    router.push(paths.dashboard.mf_questions.edit(showLessonQuestion.id));
+  }
+
+  React.useEffect(() => {
+    if (catId) {
+      pb.collection(COL_QUIZ_MF_QUESTIONS)
+        .getOne(catId)
+        .then((model: RecordModel) => {
+          setShowLessonQuestion({ ...defaultMfQuestion, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  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.mf_questions.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <TitleCard lpModel={showLessonQuestion} />
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <BasicDetailCard
+                lpModel={showLessonQuestion}
+                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/mf/questions/create/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+// RULES:
+// T.B.A.
+//
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { MfQuestionCreateForm } from '@/components/dashboard/mf/questions/mf-question-create-form';
+
+export default function Page(): React.JSX.Element {
+  // RULES: follow the name of page directory
+  const { t } = useTranslation(['lp_questions']);
+
+  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.mf_questions.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('create.title')}</Typography>
+          </div>
+        </Stack>
+        <MfQuestionCreateForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/mf/questions/edit/[cat_id]/_PROMPT.md

@@ -0,0 +1,11 @@
+# task
+
+## instruction
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
+
+please draft a tsx for showing error to user thanks,

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

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { MfQuestionEditForm } from '@/components/dashboard/mf/questions/mf-question-edit-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['lp_questions']);
+
+  React.useEffect(() => {
+    // console.log('helloworld');
+  }, []);
+
+  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.mf_questions.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <MfQuestionEditForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { dayjs } from '@/lib/dayjs';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+export const LpCategoriesSampleData = [
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    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(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+] satisfies LessonCategory[];

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

@@ -0,0 +1,272 @@
+'use client';
+
+// RULES:
+// contains list page for lp_questions (QuizLPQuestions)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_QUIZ_MF_QUESTIONS } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+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 { paths } from '@/paths';
+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 ErrorDisplay from '@/components/dashboard/error';
+import { defaultMfQuestion } from '@/components/dashboard/mf/questions/_constants';
+import { MfQuestionsFilters } from '@/components/dashboard/mf/questions/mf-questions-filters';
+import type { Filters } from '@/components/dashboard/mf/questions/mf-questions-filters';
+import { MfQuestionsPagination } from '@/components/dashboard/mf/questions/mf-questions-pagination';
+import { MfQuestionsSelectionProvider } from '@/components/dashboard/mf/questions/mf-questions-selection-context';
+import { MfQuestionsTable } from '@/components/dashboard/mf/questions/mf-questions-table';
+import type { MfQuestion } from '@/components/dashboard/mf/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<MfQuestion[]>([]);
+  //
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [f, setF] = React.useState<MfQuestion[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const sortedLessonCategories = applySort(lessonQuestionsData, sortDir);
+  const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
+
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_QUIZ_MF_QUESTIONS)
+        .getList(currentPage + 1, rowsPerPage, listOption);
+      const { items, totalItems } = models;
+      const tempLessonTypes: MfQuestion[] = items.map((lt) => {
+        return { ...defaultMfQuestion, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+      // console.log({ currentPage, f });
+    } catch (error) {
+      //
+      logger.error(error);
+      setShowError({
+        //
+        show: true,
+        detail: JSON.stringify(error, null, 2),
+      });
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
+  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 {
+        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}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+    // setListOption({
+    //   filter: tempFilter.join(' && '),
+    //   sort: tempSortDir,
+    //   //
+    // });
+  }, [visible, sortDir, name, type]);
+
+  // return <>helloworld</>;
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code={-1}
+        details={showError.detail}
+      />
+    );
+
+  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">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.lp_questions.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <MfQuestionsSelectionProvider lessonQuestions={f}>
+          <Card>
+            <MfQuestionsFilters
+              filters={{ email, phone, status, name, visible, type }}
+              fullData={lessonQuestionsData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <MfQuestionsTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <MfQuestionsPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </MfQuestionsSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: MfQuestion[], sortDir: 'asc' | 'desc' | undefined): MfQuestion[] {
+  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: MfQuestion[], { email, phone, status, name, visible }: Filters): MfQuestion[] {
+  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;
+      }
+    }
+
+    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;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
+}

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

@@ -0,0 +1,308 @@
+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/students/create/page.tsx

@@ -0,0 +1,48 @@
+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/students/page.tsx

@@ -0,0 +1,255 @@
+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/teachers/[customerId]/page.tsx

@@ -0,0 +1,308 @@
+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/teachers/create/page.tsx

@@ -0,0 +1,48 @@
+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/teachers/page.tsx

@@ -0,0 +1,255 @@
+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/cf_categories/customer-create-form.tsx

@@ -0,0 +1,398 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { zodResolver } from '@hookform/resolvers/zod';
+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 Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+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 { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { Option } from '@/components/core/option';
+import { toast } from '@/components/core/toaster';
+
+function fileToBase64(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = () => {
+      reject(new Error('Error converting file to base64'));
+    };
+  });
+}
+
+const schema = zod.object({
+  avatar: zod.string().optional(),
+  name: zod.string().min(1, 'Name is required').max(255),
+  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
+  phone: zod.string().min(1, 'Phone is required').max(15),
+  company: zod.string().max(255),
+  billingAddress: zod.object({
+    country: zod.string().min(1, 'Country is required').max(255),
+    state: zod.string().min(1, 'State is required').max(255),
+    city: zod.string().min(1, 'City is required').max(255),
+    zipCode: zod.string().min(1, 'Zip code is required').max(255),
+    line1: zod.string().min(1, 'Street line 1 is required').max(255),
+    line2: zod.string().max(255).optional(),
+  }),
+  taxId: zod.string().max(255).optional(),
+  timezone: zod.string().min(1, 'Timezone is required').max(255),
+  language: zod.string().min(1, 'Language is required').max(255),
+  currency: zod.string().min(1, 'Currency is required').max(255),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  avatar: '',
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
+  taxId: '',
+  timezone: 'new_york',
+  language: 'en',
+  currency: 'USD',
+} satisfies Values;
+
+export function CustomerCreateForm(): React.JSX.Element {
+  const router = useRouter();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(
+    async (_: Values): Promise<void> => {
+      try {
+        // Make API request
+        toast.success('Customer updated');
+        router.push(paths.dashboard.customers.details('1'));
+      } catch (err) {
+        logger.error(err);
+        toast.error('Something went wrong!');
+      }
+    },
+    [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">Account information</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: '50%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    >
+                      <Avatar
+                        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">Avatar</Typography>
+                      <Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        Select
+                      </Button>
+                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.name)} fullWidth>
+                        <InputLabel required>Name</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.email)} fullWidth>
+                        <InputLabel required>Email address</InputLabel>
+                        <OutlinedInput {...field} type="email" />
+                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="phone"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.phone)} fullWidth>
+                        <InputLabel required>Phone number</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="company"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.company)} fullWidth>
+                        <InputLabel>Company</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Billing information</Typography>
+              <Grid container spacing={3}>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.country"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.country)} fullWidth>
+                        <InputLabel required>Country</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Choose a country</Option>
+                          <Option value="us">United States</Option>
+                          <Option value="de">Germany</Option>
+                          <Option value="es">Spain</Option>
+                        </Select>
+                        {errors.billingAddress?.country ? (
+                          <FormHelperText>{errors.billingAddress?.country?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.state"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.state)} fullWidth>
+                        <InputLabel required>State</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.state ? (
+                          <FormHelperText>{errors.billingAddress?.state?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.city"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.city)} fullWidth>
+                        <InputLabel required>City</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.city ? (
+                          <FormHelperText>{errors.billingAddress?.city?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.zipCode"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.zipCode)} fullWidth>
+                        <InputLabel required>Zip code</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.zipCode ? (
+                          <FormHelperText>{errors.billingAddress?.zipCode?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.line1"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.line1)} fullWidth>
+                        <InputLabel required>Address</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.line1 ? (
+                          <FormHelperText>{errors.billingAddress?.line1?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="taxId"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.taxId)} fullWidth>
+                        <InputLabel>Tax ID</InputLabel>
+                        <OutlinedInput {...field} placeholder="e.g EU372054390" />
+                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Shipping information</Typography>
+              <FormControlLabel control={<Checkbox defaultChecked />} label="Same as billing address" />
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Additional information</Typography>
+              <Grid container spacing={3}>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="timezone"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.timezone)} fullWidth>
+                        <InputLabel required>Timezone</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a timezone</Option>
+                          <Option value="new_york">US - New York</Option>
+                          <Option value="california">US - California</Option>
+                          <Option value="london">UK - London</Option>
+                        </Select>
+                        {errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="language"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.language)} fullWidth>
+                        <InputLabel required>Language</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a language</Option>
+                          <Option value="en">English</Option>
+                          <Option value="es">Spanish</Option>
+                          <Option value="de">German</Option>
+                        </Select>
+                        {errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="currency"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.currency)} fullWidth>
+                        <InputLabel>Currency</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a currency</Option>
+                          <Option value="USD">USD</Option>
+                          <Option value="EUR">EUR</Option>
+                          <Option value="RON">RON</Option>
+                        </Select>
+                        {errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button color="secondary" component={RouterLink} href={paths.dashboard.customers.list}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="contained">
+            Create customer
+          </Button>
+        </CardActions>
+      </Card>
+    </form>
+  );
+}

002_source/cms/src/components/dashboard/cf_categories/customers-filters.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+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 { paths } from '@/paths';
+import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
+import { Option } from '@/components/core/option';
+
+import { useCustomersSelection } from './customers-selection-context';
+
+// The tabs should be generated using API data.
+const tabs = [
+  { label: 'All', value: '', count: 5 },
+  { label: 'Active', value: 'active', count: 3 },
+  { label: 'Pending', value: 'pending', count: 1 },
+  { label: 'Blocked', value: 'blocked', count: 1 },
+] as const;
+
+export interface Filters {
+  email?: string;
+  phone?: string;
+  status?: string;
+}
+
+export type SortDir = 'asc' | 'desc';
+
+export interface CustomersFiltersProps {
+  filters?: Filters;
+  sortDir?: SortDir;
+}
+
+export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFiltersProps): React.JSX.Element {
+  const { email, phone, status } = filters;
+
+  const router = useRouter();
+
+  const selection = useCustomersSelection();
+
+  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);
+      }
+
+      router.push(`${paths.dashboard.customers.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 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]
+  );
+
+  const hasFilters = status || email || phone;
+
+  return (
+    <div>
+      <Tabs onChange={handleStatusChange} sx={{ px: 3 }} value={status ?? ''} 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={email}
+            label="Email"
+            onFilterApply={(value) => {
+              handleEmailChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleEmailChange();
+            }}
+            popover={<EmailFilterPopover />}
+            value={email}
+          />
+          <FilterButton
+            displayValue={phone}
+            label="Phone number"
+            onFilterApply={(value) => {
+              handlePhoneChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handlePhoneChange();
+            }}
+            popover={<PhoneFilterPopover />}
+            value={phone}
+          />
+          {hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
+        </Stack>
+        {selection.selectedAny ? (
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+            <Typography color="text.secondary" variant="body2">
+              {selection.selected.size} selected
+            </Typography>
+            <Button color="error" variant="contained">
+              Delete
+            </Button>
+          </Stack>
+        ) : null}
+        <Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
+          <Option value="desc">Newest</Option>
+          <Option value="asc">Oldest</Option>
+        </Select>
+      </Stack>
+    </div>
+  );
+}
+
+function EmailFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function PhoneFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}

002_source/cms/src/components/dashboard/cf_categories/customers-pagination.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import TablePagination from '@mui/material/TablePagination';
+
+function noop(): void {
+  return undefined;
+}
+
+interface CustomersPaginationProps {
+  count: number;
+  page: number;
+}
+
+export function CustomersPagination({ count, page }: CustomersPaginationProps): 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.
+
+  return (
+    <TablePagination
+      component="div"
+      count={count}
+      onPageChange={noop}
+      onRowsPerPageChange={noop}
+      page={page}
+      rowsPerPage={5}
+      rowsPerPageOptions={[5, 10, 25]}
+      //
+    />
+  );
+}

002_source/cms/src/components/dashboard/cf_categories/customers-selection-context.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+
+import { useSelection } from '@/hooks/use-selection';
+import type { Selection } from '@/hooks/use-selection';
+
+import type { Customer } from './customers-table';
+
+function noop(): void {
+  return undefined;
+}
+
+export interface CustomersSelectionContextValue extends Selection {}
+
+export const CustomersSelectionContext = React.createContext<CustomersSelectionContextValue>({
+  deselectAll: noop,
+  deselectOne: noop,
+  selectAll: noop,
+  selectOne: noop,
+  selected: new Set(),
+  selectedAny: false,
+  selectedAll: false,
+});
+
+interface CustomersSelectionProviderProps {
+  children: React.ReactNode;
+  customers: Customer[];
+}
+
+export function CustomersSelectionProvider({
+  children,
+  customers = [],
+}: CustomersSelectionProviderProps): React.JSX.Element {
+  const customerIds = React.useMemo(() => customers.map((customer) => customer.id), [customers]);
+  const selection = useSelection(customerIds);
+
+  return <CustomersSelectionContext.Provider value={{ ...selection }}>{children}</CustomersSelectionContext.Provider>;
+}
+
+export function useCustomersSelection(): CustomersSelectionContextValue {
+  return React.useContext(CustomersSelectionContext);
+}

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

@@ -0,0 +1,139 @@
+'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 Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
+import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+
+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 { useCustomersSelection } from './customers-selection-context';
+
+export interface Customer {
+  id: string;
+  name: string;
+  avatar?: string;
+  email: string;
+  phone?: string;
+  quota: number;
+  status: 'pending' | 'active' | 'blocked';
+  createdAt: Date;
+}
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Avatar src={row.avatar} />{' '}
+        <div>
+          <Link
+            color="inherit"
+            component={RouterLink}
+            href={paths.dashboard.customers.details('1')}
+            sx={{ whiteSpace: 'nowrap' }}
+            variant="subtitle2"
+          >
+            {row.name}
+          </Link>
+          <Typography color="text.secondary" variant="body2">
+            {row.email}
+          </Typography>
+        </div>
+      </Stack>
+    ),
+    name: 'Name',
+    width: '250px',
+  },
+  {
+    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>
+    ),
+    name: 'Quota',
+    width: '250px',
+  },
+  { field: 'phone', name: 'Phone number', width: '150px' },
+  {
+    formatter(row) {
+      return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
+    },
+    name: 'Created at',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      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" /> },
+      } as const;
+      const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
+
+      return <Chip icon={icon} label={label} size="small" variant="outlined" />;
+    },
+    name: 'Status',
+    width: '150px',
+  },
+  {
+    formatter: (): React.JSX.Element => (
+      <IconButton component={RouterLink} href={paths.dashboard.customers.details('1')}>
+        <PencilSimpleIcon />
+      </IconButton>
+    ),
+    name: 'Actions',
+    hideName: true,
+    width: '100px',
+    align: 'right',
+  },
+] satisfies ColumnDef<Customer>[];
+
+export interface CustomersTableProps {
+  rows: Customer[];
+}
+
+export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element {
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
+
+  return (
+    <React.Fragment>
+      <DataTable<Customer>
+        columns={columns}
+        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">
+            No customers found
+          </Typography>
+        </Box>
+      ) : null}
+    </React.Fragment>
+  );
+}

002_source/cms/src/components/dashboard/cf_categories/helloworld.tsx

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

002_source/cms/src/components/dashboard/cf_categories/notifications.tsx

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

002_source/cms/src/components/dashboard/cf_categories/payments.tsx

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

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

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

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

@@ -0,0 +1,398 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { zodResolver } from '@hookform/resolvers/zod';
+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 Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+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 { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { Option } from '@/components/core/option';
+import { toast } from '@/components/core/toaster';
+
+function fileToBase64(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = () => {
+      reject(new Error('Error converting file to base64'));
+    };
+  });
+}
+
+const schema = zod.object({
+  avatar: zod.string().optional(),
+  name: zod.string().min(1, 'Name is required').max(255),
+  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
+  phone: zod.string().min(1, 'Phone is required').max(15),
+  company: zod.string().max(255),
+  billingAddress: zod.object({
+    country: zod.string().min(1, 'Country is required').max(255),
+    state: zod.string().min(1, 'State is required').max(255),
+    city: zod.string().min(1, 'City is required').max(255),
+    zipCode: zod.string().min(1, 'Zip code is required').max(255),
+    line1: zod.string().min(1, 'Street line 1 is required').max(255),
+    line2: zod.string().max(255).optional(),
+  }),
+  taxId: zod.string().max(255).optional(),
+  timezone: zod.string().min(1, 'Timezone is required').max(255),
+  language: zod.string().min(1, 'Language is required').max(255),
+  currency: zod.string().min(1, 'Currency is required').max(255),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  avatar: '',
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
+  taxId: '',
+  timezone: 'new_york',
+  language: 'en',
+  currency: 'USD',
+} satisfies Values;
+
+export function CustomerCreateForm(): React.JSX.Element {
+  const router = useRouter();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(
+    async (_: Values): Promise<void> => {
+      try {
+        // Make API request
+        toast.success('Customer updated');
+        router.push(paths.dashboard.customers.details('1'));
+      } catch (err) {
+        logger.error(err);
+        toast.error('Something went wrong!');
+      }
+    },
+    [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">Account information</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: '50%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    >
+                      <Avatar
+                        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">Avatar</Typography>
+                      <Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        Select
+                      </Button>
+                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.name)} fullWidth>
+                        <InputLabel required>Name</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.email)} fullWidth>
+                        <InputLabel required>Email address</InputLabel>
+                        <OutlinedInput {...field} type="email" />
+                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="phone"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.phone)} fullWidth>
+                        <InputLabel required>Phone number</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="company"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.company)} fullWidth>
+                        <InputLabel>Company</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Billing information</Typography>
+              <Grid container spacing={3}>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.country"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.country)} fullWidth>
+                        <InputLabel required>Country</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Choose a country</Option>
+                          <Option value="us">United States</Option>
+                          <Option value="de">Germany</Option>
+                          <Option value="es">Spain</Option>
+                        </Select>
+                        {errors.billingAddress?.country ? (
+                          <FormHelperText>{errors.billingAddress?.country?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.state"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.state)} fullWidth>
+                        <InputLabel required>State</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.state ? (
+                          <FormHelperText>{errors.billingAddress?.state?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.city"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.city)} fullWidth>
+                        <InputLabel required>City</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.city ? (
+                          <FormHelperText>{errors.billingAddress?.city?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.zipCode"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.zipCode)} fullWidth>
+                        <InputLabel required>Zip code</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.zipCode ? (
+                          <FormHelperText>{errors.billingAddress?.zipCode?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="billingAddress.line1"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.billingAddress?.line1)} fullWidth>
+                        <InputLabel required>Address</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.line1 ? (
+                          <FormHelperText>{errors.billingAddress?.line1?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="taxId"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.taxId)} fullWidth>
+                        <InputLabel>Tax ID</InputLabel>
+                        <OutlinedInput {...field} placeholder="e.g EU372054390" />
+                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Shipping information</Typography>
+              <FormControlLabel control={<Checkbox defaultChecked />} label="Same as billing address" />
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Additional information</Typography>
+              <Grid container spacing={3}>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="timezone"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.timezone)} fullWidth>
+                        <InputLabel required>Timezone</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a timezone</Option>
+                          <Option value="new_york">US - New York</Option>
+                          <Option value="california">US - California</Option>
+                          <Option value="london">UK - London</Option>
+                        </Select>
+                        {errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="language"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.language)} fullWidth>
+                        <InputLabel required>Language</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a language</Option>
+                          <Option value="en">English</Option>
+                          <Option value="es">Spanish</Option>
+                          <Option value="de">German</Option>
+                        </Select>
+                        {errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="currency"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.currency)} fullWidth>
+                        <InputLabel>Currency</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a currency</Option>
+                          <Option value="USD">USD</Option>
+                          <Option value="EUR">EUR</Option>
+                          <Option value="RON">RON</Option>
+                        </Select>
+                        {errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button color="secondary" component={RouterLink} href={paths.dashboard.customers.list}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="contained">
+            Create customer
+          </Button>
+        </CardActions>
+      </Card>
+    </form>
+  );
+}

002_source/cms/src/components/dashboard/cf_questions/customers-filters.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+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 { paths } from '@/paths';
+import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
+import { Option } from '@/components/core/option';
+
+import { useCustomersSelection } from './customers-selection-context';
+
+// The tabs should be generated using API data.
+const tabs = [
+  { label: 'All', value: '', count: 5 },
+  { label: 'Active', value: 'active', count: 3 },
+  { label: 'Pending', value: 'pending', count: 1 },
+  { label: 'Blocked', value: 'blocked', count: 1 },
+] as const;
+
+export interface Filters {
+  email?: string;
+  phone?: string;
+  status?: string;
+}
+
+export type SortDir = 'asc' | 'desc';
+
+export interface CustomersFiltersProps {
+  filters?: Filters;
+  sortDir?: SortDir;
+}
+
+export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFiltersProps): React.JSX.Element {
+  const { email, phone, status } = filters;
+
+  const router = useRouter();
+
+  const selection = useCustomersSelection();
+
+  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);
+      }
+
+      router.push(`${paths.dashboard.customers.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 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]
+  );
+
+  const hasFilters = status || email || phone;
+
+  return (
+    <div>
+      <Tabs onChange={handleStatusChange} sx={{ px: 3 }} value={status ?? ''} 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={email}
+            label="Email"
+            onFilterApply={(value) => {
+              handleEmailChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleEmailChange();
+            }}
+            popover={<EmailFilterPopover />}
+            value={email}
+          />
+          <FilterButton
+            displayValue={phone}
+            label="Phone number"
+            onFilterApply={(value) => {
+              handlePhoneChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handlePhoneChange();
+            }}
+            popover={<PhoneFilterPopover />}
+            value={phone}
+          />
+          {hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
+        </Stack>
+        {selection.selectedAny ? (
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+            <Typography color="text.secondary" variant="body2">
+              {selection.selected.size} selected
+            </Typography>
+            <Button color="error" variant="contained">
+              Delete
+            </Button>
+          </Stack>
+        ) : null}
+        <Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
+          <Option value="desc">Newest</Option>
+          <Option value="asc">Oldest</Option>
+        </Select>
+      </Stack>
+    </div>
+  );
+}
+
+function EmailFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function PhoneFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}

002_source/cms/src/components/dashboard/cf_questions/customers-pagination.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import TablePagination from '@mui/material/TablePagination';
+
+function noop(): void {
+  return undefined;
+}
+
+interface CustomersPaginationProps {
+  count: number;
+  page: number;
+}
+
+export function CustomersPagination({ count, page }: CustomersPaginationProps): 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.
+
+  return (
+    <TablePagination
+      component="div"
+      count={count}
+      onPageChange={noop}
+      onRowsPerPageChange={noop}
+      page={page}
+      rowsPerPage={5}
+      rowsPerPageOptions={[5, 10, 25]}
+      //
+    />
+  );
+}

002_source/cms/src/components/dashboard/cf_questions/customers-selection-context.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+
+import { useSelection } from '@/hooks/use-selection';
+import type { Selection } from '@/hooks/use-selection';
+
+import type { Customer } from './customers-table';
+
+function noop(): void {
+  return undefined;
+}
+
+export interface CustomersSelectionContextValue extends Selection {}
+
+export const CustomersSelectionContext = React.createContext<CustomersSelectionContextValue>({
+  deselectAll: noop,
+  deselectOne: noop,
+  selectAll: noop,
+  selectOne: noop,
+  selected: new Set(),
+  selectedAny: false,
+  selectedAll: false,
+});
+
+interface CustomersSelectionProviderProps {
+  children: React.ReactNode;
+  customers: Customer[];
+}
+
+export function CustomersSelectionProvider({
+  children,
+  customers = [],
+}: CustomersSelectionProviderProps): React.JSX.Element {
+  const customerIds = React.useMemo(() => customers.map((customer) => customer.id), [customers]);
+  const selection = useSelection(customerIds);
+
+  return <CustomersSelectionContext.Provider value={{ ...selection }}>{children}</CustomersSelectionContext.Provider>;
+}
+
+export function useCustomersSelection(): CustomersSelectionContextValue {
+  return React.useContext(CustomersSelectionContext);
+}

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

@@ -0,0 +1,139 @@
+'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 Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
+import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+
+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 { useCustomersSelection } from './customers-selection-context';
+
+export interface Customer {
+  id: string;
+  name: string;
+  avatar?: string;
+  email: string;
+  phone?: string;
+  quota: number;
+  status: 'pending' | 'active' | 'blocked';
+  createdAt: Date;
+}
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Avatar src={row.avatar} />{' '}
+        <div>
+          <Link
+            color="inherit"
+            component={RouterLink}
+            href={paths.dashboard.customers.details('1')}
+            sx={{ whiteSpace: 'nowrap' }}
+            variant="subtitle2"
+          >
+            {row.name}
+          </Link>
+          <Typography color="text.secondary" variant="body2">
+            {row.email}
+          </Typography>
+        </div>
+      </Stack>
+    ),
+    name: 'Name',
+    width: '250px',
+  },
+  {
+    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>
+    ),
+    name: 'Quota',
+    width: '250px',
+  },
+  { field: 'phone', name: 'Phone number', width: '150px' },
+  {
+    formatter(row) {
+      return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
+    },
+    name: 'Created at',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      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" /> },
+      } as const;
+      const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
+
+      return <Chip icon={icon} label={label} size="small" variant="outlined" />;
+    },
+    name: 'Status',
+    width: '150px',
+  },
+  {
+    formatter: (): React.JSX.Element => (
+      <IconButton component={RouterLink} href={paths.dashboard.customers.details('1')}>
+        <PencilSimpleIcon />
+      </IconButton>
+    ),
+    name: 'Actions',
+    hideName: true,
+    width: '100px',
+    align: 'right',
+  },
+] satisfies ColumnDef<Customer>[];
+
+export interface CustomersTableProps {
+  rows: Customer[];
+}
+
+export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element {
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
+
+  return (
+    <React.Fragment>
+      <DataTable<Customer>
+        columns={columns}
+        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">
+            No customers found
+          </Typography>
+        </Box>
+      ) : null}
+    </React.Fragment>
+  );
+}

002_source/cms/src/components/dashboard/cf_questions/helloworld.tsx

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

002_source/cms/src/components/dashboard/cf_questions/notifications.tsx

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

002_source/cms/src/components/dashboard/cf_questions/payments.tsx

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

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

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