update vscode plugins,

002_source/cms/.eslintrc.js

@@ -1,7 +1,6 @@
 const { resolve } = require('node:path');
 
 const project = resolve(__dirname, 'tsconfig.json');
-
 module.exports = {
   root: true,
   extends: [
@@ -84,4 +83,13 @@ module.exports = {
     'react/jsx-sort-props': 'off',
   },
   ignorePatterns: ['**/*del', '**/*bak', '**/*copy.*', '**/*copy*.*'],
+  overrides: [
+    {
+      // override to ignore no-def for `describe`, `it`, and `expect`
+      files: ['*.test.ts', '*.test.tsx'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
 };

002_source/cms/.vscode/extensions.json

@@ -0,0 +1,33 @@
+{
+  "recommendations": [
+    "wmaurer.change-case",
+    "saoudrizwan.claude-dev",
+    "naumovs.color-highlight",
+    "bocovo.dbml-erd-visualizer",
+    "aflalo.dbml-formatter",
+    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-next",
+    "tttpob.list-aligner",
+    "bierner.markdown-mermaid",
+    "onatm.open-in-new-window",
+    "christian-kohler.path-intellisense",
+    "esbenp.prettier-vscode",
+    "humao.rest-client",
+    "ryu1kn.text-marker",
+    "gruntfuggly.todo-tree",
+    "bibhasdn.unique-lines",
+    "neptunedesign.vs-sequential-number",
+    "matt-meyers.vscode-dbml",
+    "codeium.codeium",
+    "tencent-cloud.coding-copilot",
+    "yzhang.markdown-all-in-one",
+    "stubedston.align-text",
+    "mads-hartmann.bash-ide-vscode",
+    "duynvu.dbml-language",
+    "mikestead.dotenv",
+    "bpruitt-goddard.mermaid-markdown-syntax-highlighting",
+    "davidanson.vscode-markdownlint",
+    "foxundermoon.shell-format"
+  ]
+}

002_source/cms/_AI_WORKSPACE/code/001_INIT.md

@@ -7,16 +7,19 @@ Imagine there is a:
 1. developer (provide the modification)
 2. QA engineer (provide the feedback, and testing)
 3. software engineer
+4. technical writer
 
-software engineer will:
+they will:
 
 - conclude and integrate the ideas from developer and QA engineer
 - make decision to modify the code accordingly.
 
-no need to reply me what you are going on and your digest in this phase.
-just reply me "OK" when done
+## project background and initial setup
 
-base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
+- 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`
 
@@ -35,5 +38,7 @@ base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/letterso
 
 - directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
 
-- read, remember and link up the ideas in file stated above,
+- if the directory user provided contins `_GUIDELINES.md`, please read the file
+
+- read the files, remember and link up the ideas in file stated above,
   i will tell them the task afterwards

002_source/cms/_AI_WORKSPACE/code/002_nextjs.mdc

@@ -0,0 +1,52 @@
+---
+description: Next.js with TypeScript and Tailwind UI best practices
+globs: **/*.tsx, **/*.ts, src/**/*.ts, src/**/*.tsx
+---
+
+# Next.js Best Practices
+
+## Project Structure
+- Use the App Router directory structure
+- Place components in `app` directory for route-specific components
+- Place shared components in `components` directory
+- Place utilities and helpers in `lib` directory
+- Use lowercase with dashes for directories (e.g., `components/auth-wizard`)
+
+## Components
+- Use Server Components by default
+- Mark client components explicitly with 'use client'
+- Wrap client components in Suspense with fallback
+- Use dynamic loading for non-critical components
+- Implement proper error boundaries
+- Place static content and interfaces at file end
+
+## Performance
+- Optimize images: Use WebP format, size data, lazy loading
+- Minimize use of 'useEffect' and 'setState'
+- Favor Server Components (RSC) where possible
+- Use dynamic loading for non-critical components
+- Implement proper caching strategies
+
+## Data Fetching
+- Use Server Components for data fetching when possible
+- Implement proper error handling for data fetching
+- Use appropriate caching strategies
+- Handle loading and error states appropriately
+
+## Routing
+- Use the App Router conventions
+- Implement proper loading and error states for routes
+- Use dynamic routes appropriately
+- Handle parallel routes when needed
+
+## Forms and Validation
+- Use Zod for form validation
+- Implement proper server-side validation
+- Handle form errors appropriately
+- Show loading states during form submission
+
+## State Management
+- Minimize client-side state
+- Use React Context sparingly
+- Prefer server state when possible
+- Implement proper loading states 

002_source/cms/_AI_WORKSPACE/code/003_typescript.mdc

@@ -0,0 +1,57 @@
+---
+description: TypeScript coding standards and best practices for modern web development
+globs: **/*.ts, **/*.tsx, **/*.d.ts
+---
+
+# TypeScript Best Practices
+
+## Type System
+- Prefer interfaces over types for object definitions
+- Use type for unions, intersections, and mapped types
+- Avoid using `any`, prefer `unknown` for unknown types
+- Use strict TypeScript configuration
+- Leverage TypeScript's built-in utility types
+- Use generics for reusable type patterns
+
+## Naming Conventions
+- Use PascalCase for type names and interfaces
+- Use camelCase for variables and functions
+- Use UPPER_CASE for constants
+- Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
+- Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
+
+## Code Organization
+- Keep type definitions close to where they're used
+- Export types and interfaces from dedicated type files when shared
+- Use barrel exports (index.ts) for organizing exports
+- Place shared types in a `types` directory
+- Co-locate component props with their components
+
+## Functions
+- Use explicit return types for public functions
+- Use arrow functions for callbacks and methods
+- Implement proper error handling with custom error types
+- Use function overloads for complex type scenarios
+- Prefer async/await over Promises
+
+## Best Practices
+- Enable strict mode in tsconfig.json
+- Use readonly for immutable properties
+- Leverage discriminated unions for type safety
+- Use type guards for runtime type checking
+- Implement proper null checking
+- Avoid type assertions unless necessary
+
+## Error Handling
+- Create custom error types for domain-specific errors
+- Use Result types for operations that can fail
+- Implement proper error boundaries
+- Use try-catch blocks with typed catch clauses
+- Handle Promise rejections properly
+
+## Patterns
+- Use the Builder pattern for complex object creation
+- Implement the Repository pattern for data access
+- Use the Factory pattern for object creation
+- Leverage dependency injection
+- Use the Module pattern for encapsulation 

002_source/cms/_AI_WORKSPACE/components/002_PROMPT.md

@@ -1,22 +0,0 @@
-Hi, i need your help.
-
-i am working on a nextjs react typescript project
-
-i've already copied the code(and it sub-directories) from
-`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp` (a.k.a. `lp`)
-to
-`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr` (a.k.a. `cr`)
-
-i want you to:
-
-- understand the relations (e.g. `lp` -> `lp_categories`, `lp` -> `COL_QUIZ_LP_CATEGORIES`)
-- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_CATEGORIES` -> `COL_QUIZ_CR_CATEGORIES` )
-- please create if you find any missing files/codes/constants
-
-thank you
-
----
-
-- compare the difference between `lp` and `mf`,
-- remember the differences and
-- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)

002_source/cms/_AI_WORKSPACE/components/DB_PROMPT.MD

@@ -1,66 +0,0 @@
-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/db/001_INIT.md

@@ -2,19 +2,24 @@
 
 ## getting started
 
-Imagine there is a
+Imagine there is a:
 
-1. software developer and a
-2. QA engineer
+1. developer (provide the modification)
+2. QA engineer (provide the feedback, and testing)
+3. software engineer
+4. technical writer
 
-to solve the problems together
+they will:
 
-They will:
+- conclude and integrate the ideas from developer and QA engineer
+- make decision to modify the code accordingly.
 
-no need to reply me what you are going on and your digest in this phase.
-just reply me "OK" when done
+## project background and initial setup
 
-base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
+- 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`
 
@@ -33,5 +38,7 @@ base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/letterso
 
 - directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
 
-- read, remember and link up the ideas in file stated above,
+- if the directory user provided contins `_GUIDELINES.md`, please read the file
+
+- read the files, remember and link up the ideas in file stated above,
   i will tell them the task afterwards

002_source/cms/_AI_WORKSPACE/db/002_PROMPT_questions.md

@@ -10,7 +10,7 @@ i want you to:
 - understand the relations (e.g. `lp` -> `lp_Questions`, `lp` -> `COL_QUIZ_LP_QUESTIONS`)
 - review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_QUESTIONS` -> `COL_QUIZ_CR_Questions` )
 - please create if you find any missing files/codes/constants
-- using template, create the similar code for `cr` named `QuizCRQuestions`
+- using template, create the similar code for `customer` named `Customers`
 
 thank you
 

002_source/cms/_AI_WORKSPACE/db/003_update_dbml_from_schema.md

@@ -0,0 +1,27 @@
+Hi, i need your help.
+
+## task
+
+i am working on a `dbml` file
+i got a `schema.json` which is exported from pocketbase
+and i want to update it to my current `dbml` file (one way process for documentation usage)
+
+## Rules
+
+- the collection from `json` file started with `_` can be ignored. they are system collection and should not appear in `dbml`
+- one collection from `json` file mapped with one table in `dbml` file
+- the `presentable` field from `json` file should be ignored.
+- the `id` of collection in `json` file should be jod down in the comment of `dbml` file as an reference.
+
+## information
+
+json file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/schema.json`
+dbml file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`
+
+## FAQ
+
+1. 对于json中有但dbml中没有的表，应该如何处理？ 添加为新表
+1. 是否需要保留dbml文件中现有的注释和关系定义？ 完全保留
+1. 字段类型映射是否有特殊规则？ 沒有
+
+thanks

002_source/cms/_AI_WORKSPACE/db/004_clone_db_driver.md

@@ -0,0 +1,38 @@
+---
+tags: db, driver
+---
+
+# clone db driver
+
+please understand the tsx files in folder
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications`
+
+change all occurrence of `customer` to `notification` thanks.
+
+## FAQ
+
+1. 在constants.ts中是否已定义COL_NOTIFICATIONS常量？没有，需要先定义它。
+2. Notification相关的类型定义在哪里？是在现有文件中还是需要新建？ 需要新建
+3. 是否需要保留原始Customer驱动文件，还是完全替换为Notification驱动？
+用 `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications` 中的 code
+
+请确认这些信息，以便我制定完整的修改方案。
+
+当前已确认需要修改的内容包括：
+
+函数名中的customer → notification
+COL_CUSTOMERS → COL_NOTIFICATIONS
+相关类型引用
+注释中的customer → notification
+
+---
+
+<!-- updat type.d -->
+
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/type.d.ts` the fields is currently wrong, please help to update thanks.
+
+update the `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/EmptyNotification.ts` as well thanks.
+
+---
+
+please draft `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/GetNotificationByUserId.tsx` by reference `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/GetById.tsx`

002_source/cms/_AI_WORKSPACE/db/009_draft_db_drivers.md

@@ -0,0 +1,18 @@
+# task
+
+update `dbml` from `schema.json`
+
+## things to note
+
+1. please skip `presentable` properties from `schema.json`
+
+## steps
+
+1. read file `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/schema.json`. this is the export from `pocketbase`.
+1. read file `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`. this is file written in dbml format.
+1. currently the collection in `schama.json` is mapped to table in `schema.dbml`
+1. compare the `schema.json` and `schema.dbml`, remember the differences
+1. you may found some comment already exist in `schema.dbml`, please keep them
+1. while keeping `schema.json` content unchanged. write file to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml` content based on `schema.json`.
+
+thanks.

002_source/cms/_AI_WORKSPACE/db/010_extend_function_by_clone_and_updating_exist_code.md.md

@@ -0,0 +1,10 @@
+# task
+
+extend function by clone and updating exist code
+
+## steps
+
+please read file
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizListenings/GetAllCount.tsx`
+
+duplicate it to cover `GetActiveCount`, `GetPendingCount` and `GetBlockedCount`. create them in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Customers` directory thanks.

002_source/cms/_AI_WORKSPACE/init.md

@@ -0,0 +1 @@
+please read, understand and remember `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/_AI_WORKSPACE/code`

002_source/cms/_AI_WORKSPACE/pages/001_INIT.md

@@ -1,37 +0,0 @@
-# AI GUIDELINE
-
-## getting started
-
-Imagine there is a
-
-1. software developer and a
-2. 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` format stating the main database structure
-
-- `schema.json`
-
-  - read `<base_dir>/002_source/cms/src/db/schema.json`
-    this is the file of current pocketbase schema
-
-- 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`
-
-- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
-
-- read, remember and link up the ideas in file stated above,
-  i will tell them the task afterwards

002_source/cms/_AI_WORKSPACE/pages/002_PROMPT.md

@@ -1,25 +0,0 @@
-Hi, i need your help.
-
-i am working on a nextjs react typescript project
-
-i've already copied the code(and it sub-directories) from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp` (a.k.a. `lp`) to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/cr` (a.k.a. `cr`)
-
-i want you to:
-
-- list files from directory
-
-  - `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp`
-  - `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/cr`
-
-- understand the relations (e.g. `lp` -> `lp_categories`, `lp` -> `COL_QUIZ_LP_CATEGORIES`)
-- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_CATEGORIES` -> `COL_QUIZ_CR_CATEGORIES` )
-- please create if you find any missing files/codes/constants
-
-thank you
-
----
-
-- I proofed the code is working already, what you need to do is refactoring of the `variables`, `functions`, `classes`, `constants` (`lp` -> `cr`)
-- compare the difference between `lp` and `mf`,
-- remember the differences and
-- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)

002_source/cms/_AI_WORKSPACE/pages/DB_PROMPT.MD

@@ -1,66 +0,0 @@
-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/package.json

@@ -91,6 +91,7 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
+    "@faker-js/faker": "^9.7.0",
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",

002_source/cms/pnpm-lock.yaml

@@ -195,6 +195,9 @@ importers:
         specifier: 3.22.4
         version: 3.22.4
     devDependencies:
+      '@faker-js/faker':
+        specifier: ^9.7.0
+        version: 9.7.0
       '@ianvs/prettier-plugin-sort-imports':
         specifier: 4.1.1
         version: 4.1.1(prettier@3.2.5)
@@ -725,6 +728,10 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@faker-js/faker@9.7.0':
+    resolution: {integrity: sha512-aozo5vqjCmDoXLNUJarFZx2IN/GgGaogY4TMJ6so/WLZOWpSV7fvj2dmrV6sEAnUm1O7aCrhTibjpzeDFgNqbg==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
   '@fastify/busboy@2.1.0':
     resolution: {integrity: sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==}
     engines: {node: '>=14'}
@@ -6303,6 +6310,8 @@ snapshots:
 
   '@eslint/js@8.57.0': {}
 
+  '@faker-js/faker@9.7.0': {}
+
   '@fastify/busboy@2.1.0': {}
 
   '@firebase/analytics-compat@0.2.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)':

002_source/cms/scripts/006_test.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+node ./scripts/update_repomix.js
+
+echo "done"

002_source/cms/scripts/999_express_commit.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -ex
+
+git add src
+git commit -m'update,'
+
+echo "done"

002_source/cms/scripts/update_repomix.js

@@ -2,16 +2,17 @@ const exec = require('child_process').exec;
 
 let directories = [
   //
-  './src/db',
-  'src/app/dashboard/lp',
-  'src/app/dashboard/mf',
-  'src/app/dashboard/cr',
-  'src/components/dashboard/lp',
-  'src/components/dashboard/mf',
-  'src/components/dashboard/cr',
-  'src/app/dashboard/Sample',
+  // './src/db',
+  // './src/app/dashboard/lp',
+  // './src/app/dashboard/mf',
+  // './src/app/dashboard/cr',
+  // './src/components/dashboard/lp',
+  // './src/components/dashboard/mf',
+  // './src/components/dashboard/cr',
+  // './src/app/dashboard/Sample',
+  './src/components/dashboard/customer',
 ].map((directory) => {
-  return `cd ${directory} && pnpx repomix`;
+  return `cd ${directory} && pnpx repomix -c /home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/repomix.config.json`;
 });
 
 Promise.all(
@@ -34,4 +35,5 @@ Promise.all(
   })
   .catch((error) => {
     console.error(error);
+    // process.exit(1);
   });

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders homepage unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  >
+    hello world!
+     
+    <div
+      class="MuiBox-root css-0"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1kivl2a-MuiTypography-root"
+      >
+        inner component
+      </p>
+      <div
+        class="MuiListItemIcon-root css-cveggr-MuiListItemIcon-root"
+      />
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 256 256"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

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

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

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

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

002_source/cms/src/app/dashboard/cr/_GUIDELINES.md

@@ -0,0 +1,104 @@
+# Connective Revision Guidelines
+
+## Files and component highlight
+
+1. `_GUIDELINES.md` - this document
+1. categories
+
+- list (page.tsx), also containing a button to delete record
+- read/view ([cat_id]/page.tsx)
+- create (create/page.tsx)
+- edit/update (edit/[cat_id]/page.tsx)
+- optional data for testing(lp-categories-sample-data.tsx)
+
+1. questions
+
+- list (page.tsx), also containing a button to delete record
+- read/view ([cat_id]/page.tsx)
+- create (create/page.tsx)
+- edit/update (edit/[cat_id]/page.tsx)
+- optional data for testing(lp-categories-sample-data.tsx)
+
+## Prompt Documents
+
+Each edit page contains `_PROMPT.md` file that provides guidance for editing.
+
+## Sample Data
+
+- `categories/lp-categories-sample-data.tsx`: Categories sample data
+- `questions/cr-categories-sample-data.tsx`: Questions sample data
+
+## Assumptions & Requirements
+
+1. Using PocketBase to handle ConnectiveRevision records
+2. Each ConnectiveRevision record has:
+   - `id` (autogenerated)
+   - `collectionId` (autogenerated)
+   - `collectionName` (autogenerated)
+   - `created` (autogenerated)
+   - `updated` (autogenerated)
+   - `title` (string)
+   - `description` (string)
+   - `category` (string)
+   - `status` (string)
+   - `priority` (number)
+   - `dueDate` (string)
+   - `assignee` (string)
+   - `reporter` (string)
+   - `comments` (array)
+   - `attachments` (array)
+   - `tags` (array)
+   - `related` (array)
+   - `history` (array)
+
+## Assumption and Requirements
+
+- the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
+- assume `pb` is located in `@/lib/pb`
+- type information defined in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Customers/type.d.tsx`
+
+## Component Development Guidelines
+
+### Requirements
+
+1. **Single Responsibility Principle**:
+
+2. **File Organization**:
+
+   - One file per component
+   - File name should match component name (PascalCase)
+   - Place components in logical directories based on their purpose
+
+3. **Type Safety**:
+
+   - Always use TypeScript types/interfaces
+   - Import types from `@/db/Customers/type.d.tsx`
+
+4. **PocketBase Integration**:
+   - Use `pb` instance from `@/lib/pb`
+
+### Component Example
+
+```typescript
+'use client';
+
+import { pb } from '@/lib/pb';
+import { COL_ExampleModel } from '@/constants';
+import type { ExampleType } from '@/db/ExampleModel/type';
+
+// common reference to error display, Provide user-friendly error messages
+import ErrorDisplay from '@/components/dashboard/error';
+
+// declare `Props` explicitively
+interface Props {
+  initialData?: ExampleType;
+}
+
+export default function ExampleForm({ initialData }: Props) {
+  let { t } = useTranslate();
+
+  // Render form UI
+  return <>helloworld</>
+}
+
+```

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

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

002_source/cms/src/app/dashboard/customers/_GUIDELINES.md

@@ -0,0 +1,49 @@
+# GUIDELINES
+
+this folder is part of nextjs typescript project and containing page definition for `Customer` / `Customers` record:
+
+- list (./page.tsx)
+- view (./[customerId]/page.tsx)
+- create (./create/page.tsx)
+- edit (./[customerId]/page.tsx)
+- translation provided by react-i18next
+
+the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
+
+## Assumption and Requirements
+
+- let one file contains one component only.
+- type information defined in `<base_dir>/002_source/cms/src/db/Customers/type.d.tsx`
+- it mainly consume the db drivers `Customres` in `<base_dir>/002_source/cms/src/db/Customers`
+
+simple template:
+
+```typescript
+// src/app/dashboard/customers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for customers (Customers)
+// contain definition to collection only
+//
+import statements here ...
+...
+...
+...
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  // ...content
+  // use direct return of pb.collection (e.g. return pb.collection(xxx))
+
+  return (
+    <>
+      {* page content *}
+    </>
+  )
+}
+
+
+interface PageProps {
+  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+}
+```

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

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
+import { CustomerEditForm } from '@/components/dashboard/customer/customer-edit-form';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);

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

@@ -25,7 +25,7 @@ import { CustomersPagination } from '@/components/dashboard/customer/customers-p
 import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
 import { CustomersTable } from '@/components/dashboard/customer/customers-table';
 import type { Customer, Filters } from '@/components/dashboard/customer/type.d';
-import { SampleCustomers } from './customers';
+import { SampleCustomers } from './SampleCustomers';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
@@ -96,8 +96,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
       // reset page number as tab changes
       setLastListOption(listOption);
       setCurrentPage(0);
@@ -105,13 +104,16 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     } else {
       void reloadRows();
     }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
     let tempFilter = [],
       tempSortDir = '';
 
+    if (status) {
+      tempFilter.push(`status = "${status}"`);
+    }
+
     if (sortDir) {
       tempSortDir = `-created`;
     }
@@ -136,7 +138,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     //   sort: tempSortDir,
     //   //
     // });
-  }, [sortDir, email, phone]);
+  }, [sortDir, email, phone, status]);
 
   if (showLoading) return <FormLoading />;
 

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

@@ -0,0 +1,157 @@
+// src/app/dashboard/customers/page.tsx
+'use client';
+import type { Customer } from '@/components/dashboard/customer/type.d';
+import { dayjs } from '@/lib/dayjs';
+
+export const SampleCustomers = [
+  {
+    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[];

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

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

002_source/cms/src/app/dashboard/students/_GUIDELINES.md

@@ -0,0 +1,49 @@
+# GUIDELINES
+
+this folder is part of nextjs typescript project and containing page definition for `Customer` / `Customers` record:
+
+- list (./page.tsx)
+- view (./[customerId]/page.tsx)
+- create (./create/page.tsx)
+- edit (./[customerId]/page.tsx)
+- translation provided by react-i18next
+
+the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
+
+## Assumption and Requirements
+
+- let one file contains one component only.
+- type information defined in `<base_dir>/002_source/cms/src/db/Customers/type.d.tsx`
+- it mainly consume the db drivers `Customres` in `<base_dir>/002_source/cms/src/db/Customers`
+
+simple template:
+
+```typescript
+// src/app/dashboard/customers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for customers (Customers)
+// contain definition to collection only
+//
+import statements here ...
+...
+...
+...
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  // ...content
+  // use direct return of pb.collection (e.g. return pb.collection(xxx))
+
+  return (
+    <>
+      {* page content *}
+    </>
+  )
+}
+
+
+interface PageProps {
+  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+}
+```

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

@@ -9,7 +9,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 
 import { config } from '@/config';
 import { paths } from '@/paths';
-import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
+import { CustomerCreateForm } from '@/components/dashboard/student/student-create-form';
 
 export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
 

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

@@ -0,0 +1,80 @@
+'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 { CrCategory } from '@/components/dashboard/cr/categories/type';
+import type { Student } from '@/components/dashboard/student/type.d';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: Student;
+  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: 'Email', value: model.email },
+            { key: 'Quota', value: model.quota },
+            { key: 'Status', value: model.status },
+          ] 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/students/detail/[customerId]/TitleCard.tsx

@@ -0,0 +1,76 @@
+'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 { Student } from '@/components/dashboard/student/type.d';
+
+// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
+
+function getImageUrlFrRecord(record: Student): string {
+  // TODO: fix this
+  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
+  return 'getImageUrlFrRecord(helloworld)';
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: Student }): 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.email}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.quota}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.status}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,142 @@
+'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/PaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
+
+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 { config } from '@/config';
+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 { Notifications } from '@/components/dashboard/student/notifications';
+import FormLoading from '@/components/loading';
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+import { defaultStudent } from '@/components/dashboard/student/_constants';
+import type { Student } from '@/components/dashboard/student/type.d';
+import { COL_STUDENTS } from '@/constants';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { customerId } = useParams<{ customerId: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<Student>(defaultStudent);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.students.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (customerId) {
+      pb.collection(COL_STUDENTS)
+        .getOne(customerId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultStudent, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [customerId]);
+
+  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
+
+  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.students.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              Students
+            </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/students/edit/[customerId]/_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/students/edit/[customerId]/page.tsx

@@ -0,0 +1,54 @@
+'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 { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
+import { StudentEditForm } from '@/components/dashboard/student/student-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.students.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>
+        <StudentEditForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/students/mail/[labelId]/[threadId]/page.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadView } from '@/components/dashboard/mail/thread-view';
+
+export const metadata = { title: `Thread | Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+interface PageProps {
+  params: { threadId: string };
+}
+
+export default function Page({ params }: PageProps): React.JSX.Element {
+  const { threadId } = params;
+
+  return <ThreadView threadId={threadId} />;
+}

002_source/cms/src/app/dashboard/students/mail/[labelId]/layout.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+
+import { dayjs } from '@/lib/dayjs';
+import { MailProvider } from '@/components/dashboard/mail/mail-context';
+import { MailView } from '@/components/dashboard/mail/mail-view';
+import type { Label, Thread } from '@/components/dashboard/mail/types';
+
+function filterThreads(threads: Thread[], labelId: string): Thread[] {
+  return threads.filter((thread) => {
+    if (['inbox', 'sent', 'drafts', 'spam', 'trash'].includes(labelId)) {
+      return thread.folder === labelId;
+    }
+
+    if (labelId === 'important') {
+      return thread.isImportant;
+    }
+
+    if (labelId === 'starred') {
+      return thread.isStarred;
+    }
+
+    if (thread.labels.includes(labelId)) {
+      return true;
+    }
+
+    return false;
+  });
+}
+
+const labels = [
+  { id: 'inbox', type: 'system', name: 'Inbox', unreadCount: 1, totalCount: 0 },
+  { id: 'sent', type: 'system', name: 'Sent', unreadCount: 0, totalCount: 0 },
+  { id: 'drafts', type: 'system', name: 'Drafts', unreadCount: 0, totalCount: 0 },
+  { id: 'spam', type: 'system', name: 'Spam', unreadCount: 0, totalCount: 0 },
+  { id: 'trash', type: 'system', name: 'Trash', unreadCount: 0, totalCount: 1 },
+  { id: 'important', type: 'system', name: 'Important', unreadCount: 0, totalCount: 1 },
+  { id: 'starred', type: 'system', name: 'Starred', unreadCount: 1, totalCount: 1 },
+  { id: 'work', type: 'custom', name: 'Work', color: '#43A048', unreadCount: 0, totalCount: 1 },
+  { id: 'business', type: 'custom', name: 'Business', color: '#1E88E5', unreadCount: 1, totalCount: 2 },
+  { id: 'personal', type: 'custom', name: 'Personal', color: '#FB8A00', unreadCount: 0, totalCount: 1 },
+] satisfies Label[];
+
+const threads = [
+  {
+    id: 'TRD-004',
+    from: { avatar: '/assets/avatar-9.png', email: 'marcus.finn@domain.com', name: 'Marcus Finn' },
+    to: [{ avatar: '/assets/avatar.png', email: 'sofia@devias.io', name: 'Sofia Rivers' }],
+    subject: 'Website redesign. Interested in collaboration',
+    message: `Hey there,
+
+I hope this email finds you well. I'm glad you liked my projects, and I would be happy to provide you with a quote for a similar project.
+
+Please let me know your requirements and any specific details you have in mind, so I can give you an accurate quote.
+
+Looking forward to hearing from you soon.
+
+Best regards,
+
+Marcus Finn`,
+    attachments: [
+      {
+        id: 'ATT-001',
+        name: 'working-sketch.png',
+        size: '128.5 KB',
+        type: 'image',
+        url: '/assets/image-abstract-1.png',
+      },
+      { id: 'ATT-002', name: 'summer-customers.pdf', size: '782.3 KB', type: 'file', url: '#' },
+      {
+        id: 'ATT-003',
+        name: 'desktop-coffee.png',
+        size: '568.2 KB',
+        type: 'image',
+        url: '/assets/image-minimal-1.png',
+      },
+    ],
+    folder: 'inbox',
+    labels: ['work', 'business'],
+    isImportant: true,
+    isStarred: false,
+    isUnread: true,
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'TRD-003',
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    from: { name: 'Miron Vitold', avatar: '/assets/avatar-1.png', email: 'miron.vitold@domain.com' },
+    subject: 'Amazing work',
+    message: `Hey, nice projects! I really liked the one in react. What's your quote on kinda similar project?`,
+    folder: 'spam',
+    labels: [],
+    isImportant: false,
+    isStarred: true,
+    isUnread: false,
+    createdAt: dayjs().subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'TRD-002',
+    from: { name: 'Penjani Inyene', avatar: '/assets/avatar-4.png', email: 'penjani.inyene@domain.com' },
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    subject: 'Flight reminder',
+    message: `Dear Sofia,
+
+Your flight is coming up soon. Please don't forget to check in for your scheduled flight.`,
+    folder: 'inbox',
+    labels: ['business'],
+    isImportant: false,
+    isStarred: false,
+    isUnread: false,
+    createdAt: dayjs().subtract(2, 'day').toDate(),
+  },
+  {
+    id: 'TRD-001',
+    from: { name: 'Carson Darrin', avatar: '/assets/avatar-3.png', email: 'carson.darrin@domain.com' },
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    subject: 'Possible candidates for the position',
+    message: `My market leading client has another fantastic opportunity for an experienced Software Developer to join them on a heavily remote basis`,
+    folder: 'trash',
+    labels: ['personal'],
+    isImportant: false,
+    isStarred: false,
+    isUnread: true,
+    createdAt: dayjs().subtract(2, 'day').toDate(),
+  },
+] satisfies Thread[];
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: { labelId: string };
+}
+
+export default function Layout({ children, params }: LayoutProps): React.JSX.Element {
+  const { labelId } = params;
+
+  const filteredThreads = filterThreads(threads, labelId);
+
+  return (
+    <MailProvider currentLabelId={labelId} labels={labels} threads={filteredThreads}>
+      <MailView>{children}</MailView>
+    </MailProvider>
+  );
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadsView } from '@/components/dashboard/mail/threads-view';
+
+export const metadata = { title: `Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return <ThreadsView />;
+}

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

@@ -1,186 +1,139 @@
+// src/app/dashboard/customers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for customers (Customers)
+// contain definition to collection only
+//
 import * as React from 'react';
-import type { Metadata } from 'next';
+import { useRouter } from 'next/navigation';
+import { COL_CUSTOMERS } from '@/constants';
+import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import type { ListResult, RecordModel } from 'pocketbase';
 
-import { 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/type.d';
+import { StudentsFilters } from '@/components/dashboard/student/students-filters';
+import { StudentsPagination } from '@/components/dashboard/student/students-pagination';
+import { StudentsSelectionProvider } from '@/components/dashboard/student/students-selection-context';
+import { StudentsTable } from '@/components/dashboard/student/students-table';
+import type { Student } from '@/components/dashboard/student/type.d';
+import { useTranslation } from 'react-i18next';
 
-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 };
-}
+import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultStudent } from '@/components/dashboard/student/_constants';
+import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation(['customers']);
+  const router = useRouter();
+
   const { email, phone, sortDir, status } = searchParams;
 
-  const sortedCustomers = applySort(customers, sortDir);
-  const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Student[]>([]);
+  //
+
+  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<Student[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  //
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+
+  //
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_CUSTOMERS)
+        .getList(currentPage + 1, rowsPerPage, listOption);
+      const { items, totalItems } = models;
+      const tempLessonTypes: Student[] = items.map((lt) => {
+        return { ...defaultStudent, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+    } 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(() => {
+    const tempFilter = [];
+    let tempSortDir = '';
+
+    if (status) {
+      tempFilter.push(`status = "${status}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (email) {
+      tempFilter.push(`email ~ "%${email}%"`);
+    }
+    if (phone) {
+      tempFilter.push(`phone ~ "%${phone}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+  }, [sortDir, email, phone, status]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code={-1}
+        details={showError.detail}
+      />
+    );
 
   return (
     <Box
@@ -198,71 +151,60 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           sx={{ alignItems: 'flex-start' }}
         >
           <Box sx={{ flex: '1 1 auto' }}>
-            <Typography variant="h4">Customers</Typography>
+            <Typography variant="h4">{t('list.title')}</Typography>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.customers.create);
+              }}
               startIcon={<PlusIcon />}
               variant="contained"
             >
-              Add
-            </Button>
+              {t('list.add')}
+            </LoadingButton>
           </Box>
         </Stack>
-        <CustomersSelectionProvider customers={filteredCustomers}>
+        <StudentsSelectionProvider customers={f}>
           <Card>
-            <CustomersFilters
+            <StudentsFilters
               filters={{ email, phone, status }}
+              fullData={lessonCategoriesData}
               sortDir={sortDir}
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <CustomersTable rows={filteredCustomers} />
+              <StudentsTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
             </Box>
             <Divider />
-            <CustomersPagination
-              count={filteredCustomers.length + 100}
-              page={0}
+            <StudentsPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
             />
           </Card>
-        </CustomersSelectionProvider>
+        </StudentsSelectionProvider>
       </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: 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;
-  });
+interface PageProps {
+  searchParams: {
+    email?: string;
+    phone?: string;
+    sortDir?: 'asc' | 'desc';
+    status?: string;
+    //
+  };
 }

002_source/cms/src/app/dashboard/students/xxx/BasicDetailCard.tsx

@@ -0,0 +1,80 @@
+'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 { CrCategory } from '@/components/dashboard/cr/categories/type';
+import type { Student } from '@/components/dashboard/student/type.d';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: Student;
+  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: 'Email', value: model.email },
+            { key: 'Quota', value: model.quota },
+            { key: 'Status', value: model.status },
+          ] 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/students/xxx/TitleCard.tsx

@@ -0,0 +1,76 @@
+'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 { Student } from '@/components/dashboard/student/type.d';
+
+// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
+
+function getImageUrlFrRecord(record: Student): string {
+  // TODO: fix this
+  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
+  return 'getImageUrlFrRecord(helloworld)';
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: Student }): 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.email}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.quota}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.status}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,142 @@
+'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/PaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
+
+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 { config } from '@/config';
+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 { Notifications } from '@/components/dashboard/student/notifications';
+import FormLoading from '@/components/loading';
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+import { defaultStudent } from '@/components/dashboard/student/_constants';
+import type { Student } from '@/components/dashboard/student/type.d';
+import { COL_STUDENTS } from '@/constants';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { customerId } = useParams<{ customerId: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<Student>(defaultStudent);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.students.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (customerId) {
+      pb.collection(COL_STUDENTS)
+        .getOne(customerId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultStudent, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [customerId]);
+
+  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
+
+  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.students.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              Students
+            </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/teachers/SampleTeachers.tsx

@@ -0,0 +1,157 @@
+// src/app/dashboard/customers/page.tsx
+'use client';
+import type { Customer } from '@/components/dashboard/customer/type.d';
+import { dayjs } from '@/lib/dayjs';
+
+export const SampleTeachers = [
+  {
+    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[];

002_source/cms/src/app/dashboard/teachers/[customerId]/BasicDetailCard.tsx

@@ -0,0 +1,80 @@
+'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 { CrCategory } from '@/components/dashboard/cr/categories/type';
+import type { Customer } from '@/components/dashboard/customer/type.d';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: Customer;
+  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: 'Email', value: model.email },
+            { key: 'Quota', value: model.quota },
+            { key: 'Status', value: model.status },
+          ] 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/teachers/[customerId]/TitleCard.tsx

@@ -0,0 +1,76 @@
+'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 { Customer } from '@/components/dashboard/customer/type.d';
+
+// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
+
+function getImageUrlFrRecord(record: Customer): string {
+  // TODO: fix this
+  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
+  return 'getImageUrlFrRecord(helloworld)';
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: Customer }): 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.email}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.quota}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.status}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

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

@@ -1,43 +1,83 @@
+'use client';
+
 import * as React from 'react';
-import type { Metadata } from 'next';
 import RouterLink from 'next/link';
-import Avatar from '@mui/material/Avatar';
+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/PaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
+
 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 { 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';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { toast } from '@/components/core/toaster';
 
-export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+import ErrorDisplay from '@/components/dashboard/error';
+
+import { Notifications } from '@/components/dashboard/teacher/notifications';
+import FormLoading from '@/components/loading';
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+import { defaultTeacher } from '@/components/dashboard/teacher/_constants';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
+import { COL_TEACHERS } from '@/constants';
 
 export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { customerId } = useParams<{ customerId: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<Teacher>(defaultTeacher);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.teachers.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (customerId) {
+      pb.collection(COL_TEACHERS)
+        .getOne(customerId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultTeacher, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [customerId]);
+
+  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
   return (
     <Box
       sx={{
@@ -53,252 +93,46 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.customers.list}
+              href={paths.dashboard.teachers.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
+              Teachers
             </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' }}
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
           >
-                  {(
-                    [
-                      { 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>
+            <TitleCard lpModel={showLessonCategory} />
           </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}>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            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}
+              <BasicDetailCard
+                lpModel={showLessonCategory}
+                handleEditClick={handleEditClick}
               />
-              <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} />
+              <SampleSecurityCard />
+            </Stack>
           </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(),
-                  },
-                ]}
-              />
+          <Grid
+            lg={8}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <SamplePaymentCard />
+              <SampleAddressCard />
+              <Notifications notifications={SampleNotifications} />
             </Stack>
           </Grid>
         </Grid>

002_source/cms/src/app/dashboard/teachers/_GUIDELINES.md

@@ -0,0 +1,49 @@
+# GUIDELINES
+
+this folder is part of nextjs typescript project and containing page definition for `Customer` / `Customers` record:
+
+- list (./page.tsx)
+- view (./[customerId]/page.tsx)
+- create (./create/page.tsx)
+- edit (./[customerId]/page.tsx)
+- translation provided by react-i18next
+
+the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
+
+## Assumption and Requirements
+
+- let one file contains one component only.
+- type information defined in `<base_dir>/002_source/cms/src/db/Customers/type.d.tsx`
+- it mainly consume the db drivers `Customres` in `<base_dir>/002_source/cms/src/db/Customers`
+
+simple template:
+
+```typescript
+// src/app/dashboard/customers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for customers (Customers)
+// contain definition to collection only
+//
+import statements here ...
+...
+...
+...
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  // ...content
+  // use direct return of pb.collection (e.g. return pb.collection(xxx))
+
+  return (
+    <>
+      {* page content *}
+    </>
+  )
+}
+
+
+interface PageProps {
+  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+}
+```

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

@@ -1,5 +1,5 @@
+'use client';
 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';
@@ -9,9 +9,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 
 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;
+import { TeacherCreateForm } from '@/components/dashboard/teacher/teacher-create-form';
 
 export default function Page(): React.JSX.Element {
   return (
@@ -29,19 +27,19 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.customers.list}
+              href={paths.dashboard.teachers.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
+              Teachers
             </Link>
           </div>
           <div>
-            <Typography variant="h4">Create customer</Typography>
+            <Typography variant="h4">Create teacher</Typography>
           </div>
         </Stack>
-        <CustomerCreateForm />
+        <TeacherCreateForm />
       </Stack>
     </Box>
   );

002_source/cms/src/app/dashboard/teachers/edit/[customerId]/_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/teachers/edit/[customerId]/page.tsx

@@ -0,0 +1,54 @@
+'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 { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
+import { TeacherEditForm } from '@/components/dashboard/teacher/teacher-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.teachers.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>
+        <TeacherEditForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -1,5 +1,14 @@
+// src/app/dashboard/teachers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for teachers (Teachers)
+// contain definition to collection only
+//
 import * as React from 'react';
-import type { Metadata } from 'next';
+import { useRouter } from 'next/navigation';
+import { COL_TEACHERS } from '@/constants';
+import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
@@ -7,180 +16,136 @@ 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 { 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/type.d';
+import { TeachersFilters } from '@/components/dashboard/teacher/teachers-filters';
+// import type { Filters } from '@/components/dashboard/teacher/customers-filters';
+import { TeachersPagination } from '@/components/dashboard/teacher/teachers-pagination';
+import { TeachersSelectionProvider } from '@/components/dashboard/teacher/teachers-selection-context';
+import { TeachersTable } from '@/components/dashboard/teacher/teachers-table';
+import type { Teacher, Filters } from '@/components/dashboard/teacher/type.d';
+import { SampleTeachers } from './SampleTeachers';
+import { useTranslation } from 'react-i18next';
 
-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 };
-}
+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 { defaultTeacher } from '@/components/dashboard/teacher/_constants';
+import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation(['teachers']);
+  const router = useRouter();
+
   const { email, phone, sortDir, status } = searchParams;
 
-  const sortedCustomers = applySort(customers, sortDir);
-  const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Teacher[]>([]);
+  //
+
+  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<Teacher[]>([]);
+  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 reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_TEACHERS)
+        .getList(currentPage + 1, rowsPerPage, listOption);
+      const { items, totalItems } = models;
+      const tempLessonTypes: Teacher[] = items.map((lt) => {
+        return { ...defaultTeacher, ...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 (status) {
+      tempFilter.push(`status = "${status}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (email) {
+      tempFilter.push(`email ~ "%${email}%"`);
+    }
+    if (phone) {
+      tempFilter.push(`phone ~ "%${phone}%"`);
+    }
+
+    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,
+    //   //
+    // });
+  }, [sortDir, email, phone, status]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code={-1}
+        details={showError.detail}
+      />
+    );
 
   return (
     <Box
@@ -198,42 +163,57 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           sx={{ alignItems: 'flex-start' }}
         >
           <Box sx={{ flex: '1 1 auto' }}>
-            <Typography variant="h4">Customers</Typography>
+            <Typography variant="h4">{t('list.title')}</Typography>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.teachers.create);
+              }}
               startIcon={<PlusIcon />}
               variant="contained"
             >
-              Add
-            </Button>
+              {t('list.add')}
+            </LoadingButton>
           </Box>
         </Stack>
-        <CustomersSelectionProvider customers={filteredCustomers}>
+        <TeachersSelectionProvider teachers={f}>
           <Card>
-            <CustomersFilters
+            <TeachersFilters
               filters={{ email, phone, status }}
+              fullData={lessonCategoriesData}
               sortDir={sortDir}
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <CustomersTable rows={filteredCustomers} />
+              <TeachersTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
             </Box>
             <Divider />
-            <CustomersPagination
-              count={filteredCustomers.length + 100}
-              page={0}
+            <TeachersPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
             />
           </Card>
-        </CustomersSelectionProvider>
+        </TeachersSelectionProvider>
       </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: Customer[], sortDir: 'asc' | 'desc' | undefined): Customer[] {
+function applySort(row: Teacher[], sortDir: 'asc' | 'desc' | undefined): Teacher[] {
   return row.sort((a, b) => {
     if (sortDir === 'asc') {
       return a.createdAt.getTime() - b.createdAt.getTime();
@@ -243,7 +223,7 @@ function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Custom
   });
 }
 
-function applyFilters(row: Customer[], { email, phone, status }: Filters): Customer[] {
+function applyFilters(row: Teacher[], { email, phone, status }: Filters): Teacher[] {
   return row.filter((item) => {
     if (email) {
       if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
@@ -266,3 +246,7 @@ function applyFilters(row: Customer[], { email, phone, status }: Filters): Custo
     return true;
   });
 }
+
+interface PageProps {
+  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+}

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

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

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

@@ -1,139 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import 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

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

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

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

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

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

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

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

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

@@ -1,398 +0,0 @@
-'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-pagination.tsx

@@ -1,31 +0,0 @@
-'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-table.tsx

@@ -1,139 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import 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

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

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

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

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

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

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

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

002_source/cms/src/components/dashboard/cr/repomix-output.xml

@@ -45,7 +45,7 @@ The content is organized as follows:
 <directory_structure>
 categories/
   _constants.ts
-  _PROMPT.MD
+  _SUMMARY.md
   confirm-delete-modal.tsx
   cr-categories-filters.tsx
   cr-categories-pagination.tsx
@@ -59,7 +59,6 @@ categories/
   type.d.ts
 questions/
   _constants.ts
-  _PROMPT.MD
   confirm-delete-modal.tsx
   cr-question-create-form.tsx
   cr-question-edit-form.tsx
@@ -123,8 +122,101 @@ export const emptyCrCategory: CrCategory = {
 };
 </file>
 
-<file path="categories/_PROMPT.MD">
-please review and update translations
+<file path="categories/_SUMMARY.md">
+# CR Categories Components Summary
+
+## Main Components
+
+### `cr-categories-table.tsx`
+
+- Displays categories in a table format with columns for Name, Status, Created At, etc.
+- Features:
+  - Row selection functionality
+  - Status indicators (Active/Blocked/Pending)
+  - Progress bars for quota/word count
+  - Edit/delete actions
+  - Image and name display with slugs
+
+### `cr-category-create-form.tsx`
+
+- Form for creating new categories
+- Fields:
+  - Name, image, position, visibility
+  - Slug, description, remarks
+  - Initial answer (JSON)
+- Uses Zod validation and React Hook Form
+- Material UI components
+- Internationalization support
+
+### `cr-category-edit-form.tsx`
+
+- Similar to create form but for editing
+- Pre-fills existing data
+- Handles image updates
+- More strict validation for init_answer
+
+## Supporting Components
+
+### `confirm-delete-modal.tsx`
+
+- Confirmation dialog for category deletion
+- Loading states and toast notifications
+- Internationalization support
+
+### `cr-categories-filters.tsx`
+
+- Filtering functionality:
+  - Visibility status tabs
+  - Text search filters
+  - Sorting options
+- Shows selected items count
+
+### `cr-categories-pagination.tsx`
+
+- Basic pagination controls
+- Page number and rows per page selection
+- Default options: [5, 10, 25]
+
+### `cr-categories-selection-context.tsx`
+
+- Manages selection state
+- Provides hooks for:
+  - Selecting/deselecting items
+  - Checking selection state
+  - Bulk operations
+
+## Types & Constants
+
+### `type.d.ts`
+
+- Interfaces:
+  - `CrCategory`: Main category type
+  - `CreateFormProps`: Create form data
+  - `EditFormProps`: Edit form data
+
+### `_constants.ts`
+
+- Default values:
+  - `defaultCrCategory`
+  - `emptyCrCategory`
+
+## Component Relationships
+
+```mermaid
+graph TD
+    A[cr-categories-table] --> B[cr-category-create-form]
+    A --> C[cr-category-edit-form]
+    A --> D[confirm-delete-modal]
+    A --> E[cr-categories-filters]
+    A --> F[cr-categories-pagination]
+    A --> G[cr-categories-selection-context]
+    H[type.d.ts] --> A
+    H --> B
+    H --> C
+    I[_constants.ts] --> A
+    I --> B
+    I --> C
+```
 </file>
 
 <file path="categories/confirm-delete-modal.tsx">
@@ -265,10 +357,9 @@ import { useRouter } from 'next/navigation';
 // import { COL_LESSON_CATEGORIES } from '@/constants';
 
 // RULES: Quiz
-import GetAllCount from '@/db/QuizListenings/GetAllCount';
-import GetHiddenCount from '@/db/QuizListenings/GetHiddenCount';
-// import GetVisibleCount from '@/db/QuizListenings/GetVisibleCount';
-// import GetVisibleCount from '@/db/Q';
+import GetAllCount from '@/db/QuizMFCategories/GetAllCount';
+import GetHiddenCount from '@/db/QuizMFCategories/GetHiddenCount';
+import GetVisibleCount from '@/db/QuizMFCategories/GetVisibleCount';
 //
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
@@ -288,7 +379,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useCrCategoriesSelection } from './cr-categories-selection-context';
-import { CrCategory } from './type';
+import type { CrCategory } from './type';
 
 export interface Filters {
   email?: string;
@@ -2355,9 +2446,9 @@ export interface Helloworld {
 <file path="questions/_constants.ts">
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpQuestion } from './type';
+import { CreateFormProps, CrQuestion } from './type';
 
-export const defaultLpQuestion: LpQuestion = {
+export const defaultCrQuestion: CrQuestion = {
   isEmpty: false,
   id: 'default-id',
   cat_name: 'default-question-name',
@@ -2393,36 +2484,12 @@ export const defaultLpQuestion: LpQuestion = {
 //   imageUrl: '',
 // };
 
-export const emptyLpQuestion: LpQuestion = {
-  ...defaultLpQuestion,
+export const emptyLpQuestion: CrQuestion = {
+  ...defaultCrQuestion,
   isEmpty: true,
 };
 </file>
 
-<file path="questions/_PROMPT.MD">
-please review and add translations, e.g. `{t('[word]')}`
-
----
-
-please help to review the `tsx` file in this folder
-`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/questions`
-
-it was clone from
-`category`/`categories`, `lp_category`/`lp_categories`
-please help to modify to `question`/`questions`, `lp_question`/`lp_questions`
-
-please also help to modify the name of
-`variables`, `constants`, `functions`, `classes`, components's name, paths
-
-the db fields structures are the same
-
-do not move the files
-do not create directories
-keep current folder structure is important
-
-thanks
-</file>
-
 <file path="questions/confirm-delete-modal.tsx">
 'use client';
 
@@ -2620,7 +2687,7 @@ export const defaultValues = {
   description: '',
 } satisfies Values;
 
-export function LpQuestionCreateForm(): React.JSX.Element {
+export function CrQuestionCreateForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 
@@ -3064,7 +3131,7 @@ const defaultValues = {
   description: '',
 } satisfies Values;
 
-export function LpQuestionEditForm(): React.JSX.Element {
+export function CrQuestionEditForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 
@@ -3502,8 +3569,8 @@ import { paths } from '@/paths';
 import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
-import { useLpQuestionsSelection } from './cr-questions-selection-context';
-import { LpQuestion } from './type';
+import { useCrQuestionsSelection } from './cr-questions-selection-context';
+import { CrQuestion } from './type';
 
 export interface Filters {
   email?: string;
@@ -3519,10 +3586,10 @@ export type SortDir = 'asc' | 'desc';
 export interface LpQuestionsFiltersProps {
   filters?: Filters;
   sortDir?: SortDir;
-  fullData: LpQuestion[];
+  fullData: CrQuestion[];
 }
 
-export function LpQuestionsFilters({
+export function CrQuestionsFilters({
   filters = {},
   sortDir = 'desc',
   fullData,
@@ -3536,16 +3603,16 @@ export function LpQuestionsFilters({
 
   const router = useRouter();
 
-  const selection = useLpQuestionsSelection();
+  const selection = useCrQuestionsSelection();
 
   function getVisible(): number {
-    return fullData.reduce((count, item: LpQuestion) => {
+    return fullData.reduce((count, item: CrQuestion) => {
       return item.visible === 'visible' ? count + 1 : count;
     }, 0);
   }
 
   function getHidden(): number {
-    return fullData.reduce((count, item: LpQuestion) => {
+    return fullData.reduce((count, item: CrQuestion) => {
       return item.visible === 'hidden' ? count + 1 : count;
     }, 0);
   }
@@ -3954,7 +4021,7 @@ interface LessonQuestionsPaginationProps {
   rowsPerPage: number;
 }
 
-export function LpQuestionsPagination({
+export function CrQuestionsPagination({
   count,
   page,
   //
@@ -3982,6 +4049,7 @@ export function LpQuestionsPagination({
       page={page}
       rowsPerPage={rowsPerPage}
       rowsPerPageOptions={[5, 10, 25]}
+      //
     />
   );
 }
@@ -3996,15 +4064,15 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import type { LpQuestion } from './type';
+import type { CrQuestion } from './type';
 
 function noop(): void {
   return undefined;
 }
 
-export interface LpQuestionsSelectionContextValue extends Selection {}
+export interface CrQuestionsSelectionContextValue extends Selection {}
 
-export const LpQuestionsSelectionContext = React.createContext<LpQuestionsSelectionContextValue>({
+export const CrQuestionsSelectionContext = React.createContext<CrQuestionsSelectionContextValue>({
   deselectAll: noop,
   deselectOne: noop,
   selectAll: noop,
@@ -4014,25 +4082,25 @@ export const LpQuestionsSelectionContext = React.createContext<LpQuestionsSelect
   selectedAll: false,
 });
 
-interface LpQuestionsSelectionProviderProps {
+interface CrQuestionsSelectionProviderProps {
   children: React.ReactNode;
-  lessonQuestions: LpQuestion[];
+  lessonQuestions: CrQuestion[];
 }
 
-export function LpQuestionsSelectionProvider({
+export function CrQuestionsSelectionProvider({
   children,
   lessonQuestions = [],
-}: LpQuestionsSelectionProviderProps): React.JSX.Element {
+}: CrQuestionsSelectionProviderProps): React.JSX.Element {
   const customerIds = React.useMemo(() => lessonQuestions.map((customer) => customer.id), [lessonQuestions]);
   const selection = useSelection(customerIds);
 
   return (
-    <LpQuestionsSelectionContext.Provider value={{ ...selection }}>{children}</LpQuestionsSelectionContext.Provider>
+    <CrQuestionsSelectionContext.Provider value={{ ...selection }}>{children}</CrQuestionsSelectionContext.Provider>
   );
 }
 
-export function useLpQuestionsSelection(): LpQuestionsSelectionContextValue {
-  return React.useContext(LpQuestionsSelectionContext);
+export function useCrQuestionsSelection(): CrQuestionsSelectionContextValue {
+  return React.useContext(CrQuestionsSelectionContext);
 }
 </file>
 
@@ -4064,10 +4132,10 @@ import { DataTable } from '@/components/core/data-table';
 import type { ColumnDef } from '@/components/core/data-table';
 
 import ConfirmDeleteModal from './confirm-delete-modal';
-import { useLpQuestionsSelection } from './cr-questions-selection-context';
-import type { LpQuestion } from './type';
+import { useCrQuestionsSelection } from './cr-questions-selection-context';
+import type { CrQuestion } from './type';
 
-function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuestion>[] {
+function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrQuestion>[] {
   return [
     {
       formatter: (row): React.JSX.Element => (
@@ -4079,7 +4147,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuest
           <Link
             color="inherit"
             component={RouterLink}
-            href={paths.dashboard.lp_categories.details(row.id)}
+            href={paths.dashboard.cr_questions.details(row.id)}
             sx={{ whiteSpace: 'nowrap' }}
             variant="subtitle2"
           >
@@ -4202,7 +4270,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuest
             //
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.lp_categories.details(row.id)}
+            href={paths.dashboard.cr_questions.details(row.id)}
           >
             <PencilSimpleIcon size={24} />
           </LoadingButton>
@@ -4226,13 +4294,13 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuest
 }
 
 export interface LessonQuestionsTableProps {
-  rows: LpQuestion[];
+  rows: CrQuestion[];
   reloadRows: () => void;
 }
 
-export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps): React.JSX.Element {
+export function CrQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
-  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLpQuestionsSelection();
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCrQuestionsSelection();
 
   const [idToDelete, setIdToDelete] = React.useState('');
   const [open, setOpen] = React.useState(false);
@@ -4250,7 +4318,7 @@ export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
         reloadRows={reloadRows}
         setOpen={setOpen}
       />
-      <DataTable<LpQuestion>
+      <DataTable<CrQuestion>
         columns={columns(handleDeleteClick)}
         onDeselectAll={deselectAll}
         onDeselectOne={(_, row) => {
@@ -4576,7 +4644,7 @@ export function ShippingAddress({ address }: ShippingAddressProps): React.ReactE
 </file>
 
 <file path="questions/type.d.ts">
-export interface LpQuestion {
+export interface CrQuestion {
   isEmpty?: boolean;
   //
   id: string;

002_source/cms/src/components/dashboard/customer/_GUIDELINES.md

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

002_source/cms/src/components/dashboard/customer/_NOTES.md

@@ -1,9 +0,0 @@
-# task
-
-Create a customer edit form
-
-## steps
-
-- read other `tsx` files in same directory,
-- draft `customer-edit-form.tsx`.
-- the `customer-edit-form.tsx` is already there with content, you can modify it freely thanks.

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

@@ -1,3 +1,7 @@
+// RULES:
+// default variable value for customer
+// empty valur for customer
+
 import { dayjs } from '@/lib/dayjs';
 import type { Customer } from './type.d';
 

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

@@ -1,9 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useRouter } from 'next/navigation';
-import { COL_LESSON_TYPES } from '@/constants';
-import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
 import { LoadingButton } from '@mui/lab';
 import { Button, Container, Modal, Paper } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
@@ -11,11 +8,11 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
-import PocketBase from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
+import { deleteCustomer } from '@/db/Customers/Delete';
 
 export default function ConfirmDeleteModal({
   open,
@@ -46,7 +43,9 @@ export default function ConfirmDeleteModal({
   function handleUserConfirmDelete(): void {
     if (idToDelete) {
       setIsDeleteing(true);
-      deleteQuizLPCategories(idToDelete)
+
+      // RULES: delete<CollectionName>
+      deleteCustomer(idToDelete)
         .then(() => {
           reloadRows();
           handleClose();

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

@@ -29,6 +29,8 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { Option } from '@/components/core/option';
 import { toast } from '@/components/core/toaster';
+import { createCustomer } from '@/db/Customers/Create';
+import isDevelopment from '@/lib/check-is-development';
 
 function fileToBase64(file: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -67,12 +69,19 @@ type Values = zod.infer<typeof schema>;
 
 const defaultValues = {
   avatar: '',
-  name: '',
-  email: '',
-  phone: '',
+  name: 'new name',
+  email: '123@123.com',
+  phone: '91234567',
   company: '',
-  billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
-  taxId: '',
+  billingAddress: {
+    country: 'US',
+    state: '00000',
+    city: 'NY',
+    zipCode: '00000',
+    line1: 'test line 1',
+    line2: 'test line 2',
+  },
+  taxId: '12345',
   timezone: 'new_york',
   language: 'en',
   currency: 'USD',
@@ -90,14 +99,15 @@ export function CustomerCreateForm(): React.JSX.Element {
   } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
 
   const onSubmit = React.useCallback(
-    async (_: Values): Promise<void> => {
+    async (values: Values): Promise<void> => {
       try {
-        // Make API request
-        toast.success('Customer updated');
-        router.push(paths.dashboard.customers.details('1'));
+        // Use standard create method from db/Customers/Create
+        const record = await createCustomer(values);
+        toast.success('Customer created');
+        router.push(paths.dashboard.customers.details(record.id));
       } catch (err) {
         logger.error(err);
-        toast.error('Something went wrong!');
+        toast.error('Failed to create customer');
       }
     },
     [router]
@@ -122,12 +132,22 @@ export function CustomerCreateForm(): React.JSX.Element {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Card>
         <CardContent>
-          <Stack divider={<Divider />} spacing={4}>
+          <Stack
+            divider={<Divider />}
+            spacing={4}
+          >
             <Stack spacing={3}>
               <Typography variant="h6">Account information</Typography>
-              <Grid container spacing={3}>
+              <Grid
+                container
+                spacing={3}
+              >
                 <Grid xs={12}>
-                  <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    sx={{ alignItems: 'center' }}
+                  >
                     <Box
                       sx={{
                         border: '1px dashed var(--mui-palette-divider)',
@@ -151,7 +171,10 @@ export function CustomerCreateForm(): React.JSX.Element {
                         <CameraIcon fontSize="var(--Icon-fontSize)" />
                       </Avatar>
                     </Box>
-                    <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
+                    <Stack
+                      spacing={1}
+                      sx={{ alignItems: 'flex-start' }}
+                    >
                       <Typography variant="subtitle1">Avatar</Typography>
                       <Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
                       <Button
@@ -163,16 +186,27 @@ export function CustomerCreateForm(): React.JSX.Element {
                       >
                         Select
                       </Button>
-                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
                     </Stack>
                   </Stack>
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="name"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.name)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
                         <InputLabel required>Name</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
@@ -180,25 +214,40 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="email"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.email)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.email)}
+                        fullWidth
+                      >
                         <InputLabel required>Email address</InputLabel>
-                        <OutlinedInput {...field} type="email" />
+                        <OutlinedInput
+                          {...field}
+                          type="email"
+                        />
                         {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="phone"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.phone)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.phone)}
+                        fullWidth
+                      >
                         <InputLabel required>Phone number</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
@@ -206,12 +255,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="company"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.company)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.company)}
+                        fullWidth
+                      >
                         <InputLabel>Company</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
@@ -223,13 +278,22 @@ export function CustomerCreateForm(): React.JSX.Element {
             </Stack>
             <Stack spacing={3}>
               <Typography variant="h6">Billing information</Typography>
-              <Grid container spacing={3}>
-                <Grid md={6} xs={12}>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.country"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.country)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.country)}
+                        fullWidth
+                      >
                         <InputLabel required>Country</InputLabel>
                         <Select {...field}>
                           <Option value="">Choose a country</Option>
@@ -244,12 +308,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.state"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.state)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.state)}
+                        fullWidth
+                      >
                         <InputLabel required>State</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.state ? (
@@ -259,12 +329,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.city"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.city)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.city)}
+                        fullWidth
+                      >
                         <InputLabel required>City</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.city ? (
@@ -274,12 +350,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.zipCode"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.zipCode)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.zipCode)}
+                        fullWidth
+                      >
                         <InputLabel required>Zip code</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.zipCode ? (
@@ -289,12 +371,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.line1"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.line1)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.line1)}
+                        fullWidth
+                      >
                         <InputLabel required>Address</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.line1 ? (
@@ -304,14 +392,23 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="taxId"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.taxId)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.taxId)}
+                        fullWidth
+                      >
                         <InputLabel>Tax ID</InputLabel>
-                        <OutlinedInput {...field} placeholder="e.g EU372054390" />
+                        <OutlinedInput
+                          {...field}
+                          placeholder="e.g EU372054390"
+                        />
                         {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
                       </FormControl>
                     )}
@@ -321,17 +418,29 @@ export function CustomerCreateForm(): React.JSX.Element {
             </Stack>
             <Stack spacing={3}>
               <Typography variant="h6">Shipping information</Typography>
-              <FormControlLabel control={<Checkbox defaultChecked />} label="Same as billing address" />
+              <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}>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="timezone"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.timezone)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.timezone)}
+                        fullWidth
+                      >
                         <InputLabel required>Timezone</InputLabel>
                         <Select {...field}>
                           <Option value="">Select a timezone</Option>
@@ -344,12 +453,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="language"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.language)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.language)}
+                        fullWidth
+                      >
                         <InputLabel required>Language</InputLabel>
                         <Select {...field}>
                           <Option value="">Select a language</Option>
@@ -362,12 +477,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="currency"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.currency)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.currency)}
+                        fullWidth
+                      >
                         <InputLabel>Currency</InputLabel>
                         <Select {...field}>
                           <Option value="">Select a currency</Option>
@@ -385,14 +506,24 @@ export function CustomerCreateForm(): React.JSX.Element {
           </Stack>
         </CardContent>
         <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button color="secondary" component={RouterLink} href={paths.dashboard.customers.list}>
+          <Button
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.customers.list}
+          >
             Cancel
           </Button>
-          <Button type="submit" variant="contained">
+          <Button
+            type="submit"
+            variant="contained"
+          >
             Create customer
           </Button>
         </CardActions>
       </Card>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
+      </Box>
     </form>
   );
 }

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import RouterLink from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 //
-import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
+import { COL_CUSTOMERS } from '@/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LoadingButton } from '@mui/lab';
 //
@@ -35,64 +35,61 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
 import { pb } from '@/lib/pb';
-import { TextEditor } from '@/components/core/text-editor/text-editor';
 import { toast } from '@/components/core/toaster';
 import FormLoading from '@/components/loading';
 
-import ErrorDisplay from '../../error';
-import type { EditFormProps } from './type';
+// import ErrorDisplay from '../../error';
+import ErrorDisplay from '../error';
+import isDevelopment from '@/lib/check-is-development';
 
 // TODO: review this
 const schema = zod.object({
-  cat_name: zod.string().min(1, 'name-is-required').max(255),
-  // accept file object when user change image
-  // accept http string when user not changing image
-  cat_image: zod.union([zod.array(zod.any()), zod.string()]).optional(),
-
-  // position
-  pos: zod.number().min(1, 'position is required').max(99),
-
-  // it should be a valid JSON
-  init_answer: zod
-    .string()
-    .refine(
-      (value) => {
-        try {
-          JSON.parse(value);
-          return true;
-        } catch (error) {
-          return false;
-        }
-      },
-      { message: 'init_answer must be a valid JSON' }
-    )
-    .optional(),
-  visible: zod.string(),
-  slug: zod.string().min(0, 'slug-is-required').max(255).optional(),
-  remarks: zod.string().optional(),
-  description: zod.string().optional(),
-  // NOTE: for image handling
+  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(25),
+  company: zod.string().max(255).optional(),
+  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),
   avatar: zod.string().optional(),
 });
 
 type Values = zod.infer<typeof schema>;
 
 const defaultValues = {
-  cat_name: '',
-  cat_image: undefined,
-  pos: 1,
-  init_answer: JSON.stringify({}),
-  visible: 'hidden',
-  slug: '',
-  remarks: '',
-  description: '',
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  billingAddress: {
+    country: '',
+    state: '',
+    city: '',
+    zipCode: '',
+    line1: '',
+    line2: '',
+  },
+  taxId: '',
+  timezone: '',
+  language: '',
+  currency: '',
+  avatar: '',
 } satisfies Values;
 
-export function CrQuestionEditForm(): React.JSX.Element {
+export function CustomerEditForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['lp_categories']);
 
-  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  const { customerId } = useParams<{ customerId: string }>();
   //
   const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
   const [showLoading, setShowLoading] = React.useState<boolean>(false);
@@ -112,37 +109,31 @@ export function CrQuestionEditForm(): React.JSX.Element {
     async (values: Values): Promise<void> => {
       setIsUpdating(true);
 
-      const tempUpdate: EditFormProps = {
-        cat_name: values.cat_name,
-        cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
-        pos: values.pos,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        init_answer: JSON.parse(values.init_answer || '{}'),
-
-        visible: values.visible,
-        slug: values.slug || 'not-defined',
-        remarks: values.remarks,
-        description: values.description,
-        //
-        // TODO: remove below
-        type: '',
+      const updateData = {
+        name: values.name,
+        email: values.email,
+        phone: values.phone,
+        company: values.company,
+        billingAddress: values.billingAddress,
+        taxId: values.taxId,
+        timezone: values.timezone,
+        language: values.language,
+        currency: values.currency,
+        avatar: values.avatar ? await base64ToFile(values.avatar) : null,
       };
 
       try {
-        const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
-        logger.debug(result);
-        toast.success(t('edit.success'));
-        router.push(paths.dashboard.lp_categories.list);
+        await pb.collection(COL_CUSTOMERS).update(customerId, updateData);
+        toast.success('Customer updated successfully');
+        router.push(paths.dashboard.customers.list);
       } catch (error) {
         logger.error(error);
-        toast.error(t('update.failed'));
+        toast.error('Failed to update customer');
       } finally {
         setIsUpdating(false);
       }
     },
-    // t is not necessary here
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [router]
+    [customerId, router]
   );
 
   const avatarInputRef = React.useRef<HTMLInputElement>(null);
@@ -171,41 +162,33 @@ export function CrQuestionEditForm(): React.JSX.Element {
       setShowLoading(true);
 
       try {
-        const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).getOne(id);
+        const result = await pb.collection(COL_CUSTOMERS).getOne(id);
+        reset({ ...defaultValues, ...result });
+        console.log({ result });
 
-        reset({ ...defaultValues, ...result, init_answer: JSON.stringify(result.init_answer) });
-        setTextDescription(result.description);
-        setTextRemarks(result.remarks);
-
-        if (result.cat_image !== '') {
+        if (result.avatar_file) {
           const fetchResult = await fetch(
-            `http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.cat_image}`
+            `http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar_file}`
           );
-
           const blob = await fetchResult.blob();
           const url = await fileToBase64(blob);
-
           setValue('avatar', url);
-        } else {
-          setValue('avatar', '');
         }
       } catch (error) {
         logger.error(error);
-        toast(t('list.error'));
-
+        toast.error('Failed to load customer data');
         setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
       } finally {
         setShowLoading(false);
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [catId]
+    [reset, setValue]
   );
 
   React.useEffect(() => {
-    void loadExistingData(catId);
+    void loadExistingData(customerId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [catId]);
+  }, [customerId]);
 
   if (showLoading) return <FormLoading />;
   if (showError.show)
@@ -290,112 +273,79 @@ export function CrQuestionEditForm(): React.JSX.Element {
                   xs={12}
                 >
                   <Controller
-                    disabled={isUpdating}
                     control={control}
-                    name="cat_name"
+                    name="name"
                     render={({ field }) => (
                       <FormControl
-                        disabled={isUpdating}
-                        error={Boolean(errors.cat_name)}
+                        error={Boolean(errors.name)}
                         fullWidth
                       >
-                        <InputLabel required>{t('edit.cat_name')}</InputLabel>
+                        <InputLabel required>Name</InputLabel>
                         <OutlinedInput {...field} />
-                        {errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                {/*  */}
                 <Grid
                   md={6}
                   xs={12}
                 >
                   <Controller
-                    disabled={isUpdating}
                     control={control}
-                    name="pos"
+                    name="email"
                     render={({ field }) => (
                       <FormControl
-                        error={Boolean(errors.pos)}
+                        error={Boolean(errors.email)}
                         fullWidth
                       >
-                        <InputLabel required>{t('edit.pos')}</InputLabel>
+                        <InputLabel required>Email</InputLabel>
                         <OutlinedInput
                           {...field}
-                          onChange={(e) => {
-                            field.onChange(parseInt(e.target.value));
-                          }}
-                          type="number"
+                          type="email"
                         />
-                        {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
+                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                {/*  */}
                 <Grid
                   md={6}
                   xs={12}
                 >
                   <Controller
-                    disabled={isUpdating}
                     control={control}
-                    name="slug"
+                    name="phone"
                     render={({ field }) => (
                       <FormControl
-                        error={Boolean(errors.slug)}
+                        error={Boolean(errors.phone)}
                         fullWidth
                       >
-                        <InputLabel required>{t('edit.slug')}</InputLabel>
+                        <InputLabel required>Phone</InputLabel>
                         <OutlinedInput {...field} />
-                        {errors.slug ? <FormHelperText>{errors.slug.message}</FormHelperText> : null}
+                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                {/*  */}
                 <Grid
                   md={6}
                   xs={12}
                 >
                   <Controller
-                    disabled={isUpdating}
                     control={control}
-                    name="visible"
+                    name="company"
                     render={({ field }) => (
                       <FormControl
-                        error={Boolean(errors.visible)}
+                        error={Boolean(errors.company)}
                         fullWidth
                       >
-                        <InputLabel>{t('edit.visible')}</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="visible">{t('edit.visible')}</MenuItem>
-                          <MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
-                        </Select>
-
-                        {errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
+                        <InputLabel>Company</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          placeholder="no company name"
                         />
-                </Grid>
-                {/*  */}
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    disabled={isUpdating}
-                    control={control}
-                    name="init_answer"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.init_answer)}
-                        fullWidth
-                      >
-                        <InputLabel required>{t('edit.init_answer')}</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.init_answer ? <FormHelperText>{errors.init_answer.message}</FormHelperText> : null}
+                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
@@ -404,7 +354,7 @@ export function CrQuestionEditForm(): React.JSX.Element {
             </Stack>
             {/*  */}
             <Stack spacing={3}>
-              <Typography variant="h6">{t('edit.detail-information')}</Typography>
+              <Typography variant="h6">Billing Information</Typography>
               <Grid
                 container
                 spacing={3}
@@ -414,31 +364,24 @@ export function CrQuestionEditForm(): React.JSX.Element {
                   xs={12}
                 >
                   <Controller
-                    disabled={isUpdating}
                     control={control}
-                    name="description"
-                    render={({ field }) => {
-                      return (
-                        <Box>
-                          <Typography
-                            variant="subtitle1"
-                            color="text-secondary"
+                    name="billingAddress.country"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.country)}
+                        fullWidth
                       >
-                            {t('edit.description')}
-                          </Typography>
-                          <Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
-                            <TextEditor
-                              {...field}
-                              content={textDescription}
-                              onUpdate={({ editor }) => {
-                                field.onChange({ target: { value: editor.getHTML() } });
-                              }}
-                              placeholder={t('edit.description.default')}
-                            />
-                          </Box>
-                        </Box>
-                      );
-                    }}
+                        <InputLabel required>Country</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="US">United States</MenuItem>
+                          <MenuItem value="UK">United Kingdom</MenuItem>
+                          <MenuItem value="CA">Canada</MenuItem>
+                        </Select>
+                        {errors.billingAddress?.country ? (
+                          <FormHelperText>{errors.billingAddress.country.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
                   />
                 </Grid>
                 <Grid
@@ -446,41 +389,199 @@ export function CrQuestionEditForm(): React.JSX.Element {
                   xs={12}
                 >
                   <Controller
-                    disabled={isUpdating}
                     control={control}
-                    name="remarks"
+                    name="billingAddress.state"
                     render={({ field }) => (
-                      <Box>
-                        <Typography
-                          variant="subtitle1"
-                          color="text.secondary"
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.state)}
+                        fullWidth
                       >
-                          {t('edit.remarks')}
-                        </Typography>
-                        <Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
-                          <TextEditor
-                            content={textRemarks}
-                            onUpdate={({ editor }) => {
-                              field.onChange({ target: { value: editor.getText() } });
-                            }}
-                            hideToolbar
-                            placeholder={t('edit.remarks.default')}
+                        <InputLabel required>State</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.state ? (
+                          <FormHelperText>{errors.billingAddress.state.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
                   />
-                        </Box>
-                      </Box>
+                </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 Line 1</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="no tax id..."
+                        />
+                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </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}>
+                          <MenuItem value="America/New_York">New York</MenuItem>
+                          <MenuItem value="Europe/London">London</MenuItem>
+                          <MenuItem value="Asia/Tokyo">Tokyo</MenuItem>
+                          <MenuItem value="America/Boa_Vista">Boa Vista</MenuItem>
+                          <MenuItem value="America/Grand_Turk">Grand Turk</MenuItem>
+                          <MenuItem value="Asia/Manila">Manila</MenuItem>
+                          <MenuItem value="Asia/Urumqi">Urumqi</MenuItem>
+                          <MenuItem value="Africa/Tunis">Tunis</MenuItem>
+                        </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}>
+                          <MenuItem value="en">English</MenuItem>
+                          <MenuItem value="es">Spanish</MenuItem>
+                          <MenuItem value="fr">French</MenuItem>
+                        </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 required>Currency</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="USD">USD</MenuItem>
+                          <MenuItem value="EUR">EUR</MenuItem>
+                          <MenuItem value="GBP">GBP</MenuItem>
+                        </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.lp_categories.list}
+            href={paths.dashboard.customers.list}
           >
             {t('edit.cancelButton')}
           </Button>
@@ -495,6 +596,9 @@ export function CrQuestionEditForm(): React.JSX.Element {
           </LoadingButton>
         </CardActions>
       </Card>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
+      </Box>
     </form>
   );
 }

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

@@ -47,17 +47,17 @@ export function CustomersFilters({
 
   const selection = useCustomersSelection();
 
-  function getVisible(): number {
-    return fullData.reduce((count, item: CrQuestion) => {
-      return item.visible === 'visible' ? count + 1 : count;
-    }, 0);
-  }
+  // function getVisible(): number {
+  //   return fullData.reduce((count, item: CrQuestion) => {
+  //     return item.visible === 'visible' ? count + 1 : count;
+  //   }, 0);
+  // }
 
-  function getHidden(): number {
-    return fullData.reduce((count, item: CrQuestion) => {
-      return item.visible === 'hidden' ? count + 1 : count;
-    }, 0);
-  }
+  // function getHidden(): number {
+  //   return fullData.reduce((count, item: CrQuestion) => {
+  //     return item.visible === 'hidden' ? count + 1 : count;
+  //   }, 0);
+  // }
 
   // The tabs should be generated using API data.
   const tabs = [

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

@@ -143,13 +143,14 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Custome
             //
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.cr_questions.details(row.id)}
+            href={paths.dashboard.customers.details(row.id)}
           >
             <PencilSimpleIcon size={24} />
           </LoadingButton>
           <LoadingButton
             color="error"
-            disabled={row.isEmpty}
+            // TODO: originally it is row.isEmpty
+            disabled={false}
             onClick={() => {
               handleDeleteClick(row.id);
             }}

002_source/cms/src/components/dashboard/customer/type.d.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { SortDir } from './phone-filter-popover';
-import { Customer } from './type.d';
+export type SortDir = 'asc' | 'desc';
 
 export interface Customer {
   id: string;
@@ -17,20 +16,46 @@ export interface Customer {
 
 export interface CreateFormProps {
   name: string;
-  avatar?: string;
   email: string;
   phone?: string;
-  quota: number;
-  status: 'pending' | 'active' | 'blocked';
+  company?: string;
+  billingAddress?: {
+    country: string;
+    state: string;
+    city: string;
+    zipCode: string;
+    line1: string;
+    line2?: string;
+  };
+  taxId?: string;
+  timezone: string;
+  language: string;
+  currency: string;
+  avatar?: string;
+  // quota?: number;
+  // status?: 'pending' | 'active' | 'blocked';
 }
 
 export interface EditFormProps {
   name: string;
-  avatar?: string;
   email: string;
   phone?: string;
-  quota: number;
-  status: 'pending' | 'active' | 'blocked';
+  company?: string;
+  billingAddress?: {
+    country: string;
+    state: string;
+    city: string;
+    zipCode: string;
+    line1: string;
+    line2?: string;
+  };
+  taxId?: string;
+  timezone: string;
+  language: string;
+  currency: string;
+  avatar?: string;
+  // quota?: number;
+  // status?: 'pending' | 'active' | 'blocked';
 }
 export interface CustomersFiltersProps {
   filters?: Filters;
@@ -42,5 +67,3 @@ export interface Filters {
   phone?: string;
   status?: string;
 }
-
-export type SortDir = 'asc' | 'desc';

002_source/cms/src/components/dashboard/layout/config.ts

@@ -136,7 +136,7 @@ export const layoutConfig = {
           items: [
             { key: 'students', title: 'List students', href: paths.dashboard.students.list },
             { key: 'students:create', title: 'Create student', href: paths.dashboard.students.create },
-            { key: 'students:details', title: 'Student details', href: paths.dashboard.students.details('1') },
+            { key: 'students:details', title: 'Student details', href: paths.dashboard.students.view('1') },
           ],
         },
         // {

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

@@ -30,7 +30,10 @@ export function HorizontalLayout({ children }: HorizontalLayoutProps): React.JSX
           minHeight: '100%',
         }}
       >
-        <MainNav color={settings.navColor} items={layoutConfig.navItems} />
+        <MainNav
+          color={settings.navColor}
+          items={layoutConfig.navItems}
+        />
         <Box
           component="main"
           sx={{

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

@@ -18,46 +18,14 @@ import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
 import { useTranslation } from 'react-i18next';
 
 import { dayjs } from '@/lib/dayjs';
-
-export type Notification = { id: string; createdAt: Date; read: boolean } & (
-  | { type: 'new_feature'; description: string }
-  | { type: 'new_company'; author: { name: string; avatar?: string }; company: { name: string } }
-  | { type: 'new_job'; author: { name: string; avatar?: string }; job: { title: string } }
-);
-
-const notifications = [
-  {
-    id: 'EV-004',
-    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
-    read: false,
-    type: 'new_job',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
-    job: { title: 'Remote React / React Native Developer' },
-  },
-  {
-    id: 'EV-003',
-    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
-    read: true,
-    type: 'new_job',
-    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
-    job: { title: 'Senior Golang Backend Engineer' },
-  },
-  {
-    id: 'EV-002',
-    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
-    read: true,
-    type: 'new_feature',
-    description: 'Logistics management is now available',
-  },
-  {
-    id: 'EV-001',
-    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
-    read: true,
-    type: 'new_company',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
-    company: { name: 'Stripe' },
-  },
-] satisfies Notification[];
+// import type { Notification } from './type.d.tsx.del';
+import { SampleNotifications } from './sample-notifications';
+import { useHelloworld } from '@/hooks/use-helloworld';
+import { getAllNotifications } from '@/db/Notifications/GetAll';
+import { ListResult, RecordModel } from 'pocketbase';
+import { defaultNotification } from '@/db/Notifications/constants';
+import { getNotificationsByUserId } from '@/db/Notifications/GetNotificationByUserId';
+import { Notification } from '@/db/Notifications/type';
 
 export interface NotificationsPopoverProps {
   anchorEl: null | Element;
@@ -75,6 +43,25 @@ export function NotificationsPopover({
   open = false,
 }: NotificationsPopoverProps): React.JSX.Element {
   const { t } = useTranslation();
+  const [notiList, setNotiList] = React.useState<Notification[]>([]);
+
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const { data, handleClose, handleOpen, open: testOpen } = useHelloworld<string>();
+  React.useEffect(() => {
+    setLoading(true);
+    async function LoadAllNotifications() {
+      const notiList: Notification[] = await getNotificationsByUserId('1');
+      setNotiList(notiList);
+    }
+    setLoading(false);
+    void LoadAllNotifications();
+  }, []);
+
+  if (loading) return <>Loading</>;
+  if (error) return <>Error</>;
+  if (notiList.length == 0)
     return (
       <Popover
         anchorEl={anchorEl}
@@ -84,24 +71,44 @@ export function NotificationsPopover({
         slotProps={{ paper: { sx: { width: '380px' } } }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
       >
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}>
+        list is empty
+      </Popover>
+    );
+
+  return (
+    <Popover
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      onClose={onClose}
+      open={open}
+      slotProps={{ paper: { sx: { width: '380px' } } }}
+      transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+    >
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
+      >
         <Typography variant="h6">{t('Notifications')}</Typography>
         <Tooltip title={t('Mark all as read')}>
-          <IconButton edge="end" onClick={onMarkAllAsRead}>
+          <IconButton
+            edge="end"
+            onClick={onMarkAllAsRead}
+          >
             <EnvelopeSimpleIcon />
           </IconButton>
         </Tooltip>
       </Stack>
-      {notifications.length === 0 ? (
+      {notiList.length === 0 ? (
         <Box sx={{ p: 2 }}>
           <Typography variant="subtitle2">{t('There are no notifications')}</Typography>
         </Box>
       ) : (
         <Box sx={{ maxHeight: '270px', overflowY: 'auto' }}>
           <List disablePadding>
-            {notifications.map((notification, index) => (
+            {notiList.map((notification, index) => (
               <NotificationItem
-                divider={index < notifications.length - 1}
+                divider={index < SampleNotifications.length - 1}
                 key={notification.id}
                 notification={notification}
                 onRemove={() => {
@@ -124,10 +131,17 @@ interface NotificationItemProps {
 
 function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
   return (
-    <ListItem divider={divider} sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}>
+    <ListItem
+      divider={divider}
+      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
+    >
       <NotificationContent notification={notification} />
       <Tooltip title="Remove">
-        <IconButton edge="end" onClick={onRemove} size="small">
+        <IconButton
+          edge="end"
+          onClick={onRemove}
+          size="small"
+        >
           <XIcon />
         </IconButton>
       </Tooltip>
@@ -142,14 +156,21 @@ interface NotificationContentProps {
 function NotificationContent({ notification }: NotificationContentProps): React.JSX.Element {
   if (notification.type === 'new_feature') {
     return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
         <Avatar>
           <ChatTextIcon fontSize="var(--Icon-fontSize)" />
         </Avatar>
         <div>
           <Typography variant="subtitle2">New feature!</Typography>
           <Typography variant="body2">{notification.description}</Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
             {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
           </Typography>
         </div>
@@ -159,22 +180,35 @@ function NotificationContent({ notification }: NotificationContentProps): React.
 
   if (notification.type === 'new_company') {
     return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
         <Avatar src={notification.author.avatar}>
           <UserIcon />
         </Avatar>
         <div>
           <Typography variant="body2">
-            <Typography component="span" variant="subtitle2">
+            <Typography
+              component="span"
+              variant="subtitle2"
+            >
               {notification.author.name}
             </Typography>{' '}
             created{' '}
-            <Link underline="always" variant="body2">
+            <Link
+              underline="always"
+              variant="body2"
+            >
               {notification.company.name}
             </Link>{' '}
             company
           </Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
             {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
           </Typography>
         </div>
@@ -184,21 +218,34 @@ function NotificationContent({ notification }: NotificationContentProps): React.
 
   if (notification.type === 'new_job') {
     return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
         <Avatar src={notification.author.avatar}>
           <UserIcon />
         </Avatar>
         <div>
           <Typography variant="body2">
-            <Typography component="span" variant="subtitle2">
+            <Typography
+              component="span"
+              variant="subtitle2"
+            >
               {notification.author.name}
             </Typography>{' '}
             added a new job{' '}
-            <Link underline="always" variant="body2">
+            <Link
+              underline="always"
+              variant="body2"
+            >
               {notification.job.title}
             </Link>
           </Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
             {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
           </Typography>
         </div>

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

@@ -0,0 +1,37 @@
+'use client';
+import { dayjs } from '@/lib/dayjs';
+import type { Notification } from './type.d.tsx.del';
+
+export const SampleNotifications = [
+  {
+    id: 'EV-004',
+    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
+    read: false,
+    type: 'new_job',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    job: { title: 'Remote React / React Native Developer' },
+  },
+  {
+    id: 'EV-003',
+    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
+    read: true,
+    type: 'new_job',
+    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
+    job: { title: 'Senior Golang Backend Engineer' },
+  },
+  {
+    id: 'EV-002',
+    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
+    read: true,
+    type: 'new_feature',
+    description: 'Logistics management is now available',
+  },
+  {
+    id: 'EV-001',
+    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
+    read: true,
+    type: 'new_company',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    company: { name: 'Stripe' },
+  },
+] satisfies Notification[];

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

@@ -40,7 +40,10 @@ export function VerticalLayout({ children }: VerticalLayoutProps): React.JSX.Ele
           minHeight: '100%',
         }}
       >
-        <SideNav color={settings.navColor} items={layoutConfig.navItems} />
+        <SideNav
+          color={settings.navColor}
+          items={layoutConfig.navItems}
+        />
         <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column', pl: { lg: 'var(--SideNav-width)' } }}>
           <MainNav items={layoutConfig.navItems} />
           <Box

002_source/cms/src/components/dashboard/lp/repomix-output.xml

@@ -46,6 +46,7 @@ The content is organized as follows:
 categories/
   _constants.ts
   _PROMPT.MD
+  _SUMMARY.md
   confirm-delete-modal.tsx
   lp-categories-filters.tsx
   lp-categories-pagination.tsx
@@ -66,6 +67,7 @@ categories/
 questions/
   _constants.ts
   _PROMPT.MD
+  _SUMMARY.md
   confirm-delete-modal.tsx
   lp-question-create-form.tsx
   lp-question-edit-form.tsx
@@ -133,6 +135,120 @@ export const emptyLpCategory: LpCategory = {
 please review and add translations, e.g. `{t('[word]')}`
 </file>
 
+<file path="categories/_SUMMARY.md">
+# LP Categories Components Summary
+
+## Main Components
+
+### `lp-categories-table.tsx`
+
+- Displays LP categories in a table format with columns for:
+  - Name with image
+  - Slug
+  - Status indicators
+  - Created date
+  - Action buttons
+- Features:
+  - Single and multiple row selection
+  - Status indicators (Active/Inactive)
+  - Edit/view/delete actions
+  - Integration with other LP components
+
+### `lp-category-create-form.tsx`
+
+- Form for creating new LP categories
+- Key fields:
+  - Name (required)
+  - Image upload
+  - Slug (auto-generated)
+  - Status toggle
+  - Description (rich text)
+  - Additional metadata
+- Features:
+  - Form validation
+  - Image handling
+  - Auto-slug generation
+  - Internationalization support
+
+### `lp-category-edit-form.tsx`
+
+- Form for editing existing LP categories
+- Similar to create form but:
+  - Pre-populates existing data
+  - Handles image updates differently
+  - May have additional edit-specific validation
+
+## Supporting Components
+
+### `confirm-delete-modal.tsx`
+
+- Confirmation dialog for LP category deletion
+- Shows:
+  - Delete confirmation message
+  - Loading state during deletion
+  - Success/error notifications
+
+### `lp-categories-filters.tsx`
+
+- Filtering controls for LP categories table
+- Includes:
+  - Status filter tabs
+  - Text search
+  - Sort options
+  - Selected items count
+  - Bulk actions
+
+### `lp-categories-pagination.tsx`
+
+- Pagination controls for LP categories table
+- Standard features:
+  - Page navigation
+  - Rows per page selection
+  - Current/total page display
+
+### `lp-categories-selection-context.tsx`
+
+- Manages selection state for LP categories
+- Provides:
+  - Selection/deselection functions
+  - Current selection state
+  - Bulk operation support
+
+## Types & Constants
+
+### `type.d.ts`
+
+- Type definitions including:
+  - `LpCategory`: Main LP category type
+  - Form props for create/edit
+  - Component-specific prop types
+
+### `_constants.ts`
+
+- Contains:
+  - Default LP category values
+  - Empty category template
+  - Other shared constants
+
+## Component Relationships
+
+```mermaid
+graph TD
+    A[lp-categories-table] --> B[lp-category-create-form]
+    A --> C[lp-category-edit-form]
+    A --> D[confirm-delete-modal]
+    A --> E[lp-categories-filters]
+    A --> F[lp-categories-pagination]
+    A --> G[lp-categories-selection-context]
+    H[type.d.ts] --> A
+    H --> B
+    H --> C
+    I[_constants.ts] --> A
+    I --> B
+    I --> C
+```
+</file>
+
 <file path="categories/confirm-delete-modal.tsx">
 'use client';
 
@@ -4151,6 +4267,95 @@ keep current folder structure is important
 thanks
 </file>
 
+<file path="questions/_SUMMARY.md">
+# LP Questions Components Summary
+
+## Main Components
+
+### LP Questions Table
+
+- Primary data display component using Material UI DataTable
+- Features:
+  - Column configurations with custom formatters
+  - Status indicators with visual icons
+  - Progress bars for quota visualization
+  - Row selection and bulk operations
+  - Internationalization support
+  - Integration with filters and pagination
+
+### Question Forms
+
+- **Create Form**:
+
+  - React Hook Form with Zod schema validation
+  - Image upload with preview functionality
+  - Rich text editors for descriptions
+  - Internationalized labels and error messages
+  - Form submission to PocketBase
+
+- **Edit Form**:
+  - Pre-fills existing data from PocketBase
+  - Conditional image handling
+  - Loading states and error handling
+  - JSON validation for complex fields
+  - Pre-filled rich text editors
+
+## Supporting Components
+
+### Selection Management
+
+- Context-based selection state
+- Supports:
+  - Individual selection/deselection
+  - Bulk select/deselect operations
+  - Selection state tracking (selectedAny, selectedAll)
+  - Integration with question IDs
+
+### Filters & Pagination
+
+- **Filters**:
+
+  - Tab-based filtering (All/Visible/Hidden) with counts
+  - Name and type search functionality
+  - Sort controls (Newest/Oldest)
+  - URL parameter synchronization
+
+- **Pagination**:
+  - Material UI TablePagination implementation
+  - Standard page size options
+  - Callback-based integration with parent
+
+### Delete Confirmation
+
+- Modal dialog with:
+  - Loading state during deletion
+  - Success/error toast notifications
+  - Internationalized messages
+  - PocketBase integration
+  - Custom error logging
+
+## Types & Constants
+
+- Type definitions for LP question data (LpQuestion)
+- Shared constants for:
+  - Column configurations
+  - Form defaults
+  - Validation rules
+
+## Component Relationships
+
+```mermaid
+graph TD
+    A[LP Questions Table] --> B[Question Forms]
+    A --> C[Selection Context]
+    A --> D[Filters]
+    A --> E[Pagination]
+    A --> F[Delete Modal]
+    B --> G[PocketBase]
+    F --> G
+```
+</file>
+
 <file path="questions/confirm-delete-modal.tsx">
 'use client';
 

002_source/cms/src/components/dashboard/notification/type.d.ts

@@ -0,0 +1,12 @@
+export interface NotificationFormProps {
+  id?: string;
+  title: string;
+  message: string;
+  isRead: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface NotificationItem extends NotificationFormProps {
+  id: string;
+}

002_source/cms/src/components/dashboard/overview/summary/ActiveUserCount/index.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 /*
-# PROMPT
+RULES:
 
-this is a subset of a typescript project
-
-clone `LessonTypeCount`, `LessonCategoriesCount` to `UserCount` and do modifiy to get the count of users, thanks.
+show loading when fetching record from db
+show error when fetch record failed
 */
 import * as React from 'react';
 import getAllUserMetasCount from '@/db/UserMetas/GetAllCount';
@@ -15,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { Summary } from '@/components/dashboard/overview/summary';
 
 import { LoadingSummary } from '../LoadingSummary';
+import { ErrorSummary } from '../ErrorSummary';
 
 function ActiveUserCount(): React.JSX.Element {
   const { t } = useTranslation();
@@ -50,7 +50,15 @@ function ActiveUserCount(): React.JSX.Element {
     );
   }
 
-  if (showError) return <div>{errorDetail}</div>;
+  if (showError)
+    return (
+      <ErrorSummary
+        diff={10}
+        icon={UsersIcon}
+        title={t('用戶數量')}
+        trend="up"
+      />
+    );
 
   return (
     <Summary

002_source/cms/src/components/dashboard/overview/summary/ErrorSummary/index.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+/*
+# NOTES:
+Show error to user when loading error,
+use together with:
+
+- src/components/dashboard/overview/summary/ActiveUserCount/index.tsx
+*/
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import type { Icon } from '@phosphor-icons/react/dist/lib/types';
+import { TrendDown as TrendDownIcon } from '@phosphor-icons/react/dist/ssr/TrendDown';
+import { TrendUp as TrendUpIcon } from '@phosphor-icons/react/dist/ssr/TrendUp';
+import { useTranslation } from 'react-i18next';
+
+export interface SummaryProps {
+  diff: number;
+  icon: Icon;
+  title: string;
+  trend: 'up' | 'down';
+}
+
+export function ErrorSummary({ diff, icon: Icon, title, trend }: SummaryProps): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardContent>
+        <Stack
+          direction="row"
+          spacing={3}
+          sx={{ alignItems: 'center' }}
+        >
+          <Avatar
+            sx={{
+              '--Avatar-size': '48px',
+              bgcolor: 'var(--mui-palette-background-paper)',
+              boxShadow: 'var(--mui-shadows-8)',
+              color: 'var(--mui-palette-text-primary)',
+            }}
+          >
+            <Icon fontSize="var(--icon-fontSize-lg)" />
+          </Avatar>
+          <div>
+            <Typography
+              color="text.secondary"
+              variant="body1"
+            >
+              {title}
+            </Typography>
+            <Typography variant="h3">Error</Typography>
+          </div>
+        </Stack>
+      </CardContent>
+      <Divider />
+      <Box sx={{ p: '16px' }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center' }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              color: trend === 'up' ? 'var(--mui-palette-success-main)' : 'var(--mui-palette-error-main)',
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
+            {trend === 'up' ? (
+              <TrendUpIcon fontSize="var(--icon-fontSize-md)" />
+            ) : (
+              <TrendDownIcon fontSize="var(--icon-fontSize-md)" />
+            )}
+          </Box>
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
+            <Typography
+              color={trend === 'up' ? 'success.main' : 'error.main'}
+              component="span"
+              variant="subtitle2"
+            >
+              {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(diff / 100)}
+            </Typography>{' '}
+            {trend === 'up' ? t('increase') : t('decrease')} {t('vs last month')}
+          </Typography>
+        </Stack>
+      </Box>
+    </Card>
+  );
+}