update customers,

001_documentation/Requirements/REQ0006/_ai_workspace/001_update_dbml_from_schema_json.md

@@ -0,0 +1,45 @@
+# AI GUIDELINE
+
+## getting started
+
+Imagine there is a software developer and a QA engineer to solve the problems together
+
+They will:
+
+no need to reply me what you are going on and your digest in this phase.
+just reply me "OK" when done
+
+base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
+
+- `schema.dbml`
+
+  - read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
+    this is file in dbml syntax state the main database
+
+- `schema.json`
+
+  - read `<base_dir>/002_source/cms/src/db/schema.json`
+    this is the file of live pocketbase schema output
+
+- read `<base_dir>/002_source/cms/src/constants.ts`
+  this is the content of `@/constants`
+
+- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
+
+- read, remember and link up the ideas in file stated above,
+  i will tell them the task afterwards
+
+---
+
+Hi, i have 2 files
+`schema.json` is a export from pocketbase (e.g. collections and fields)
+`schema.dbml` is schema file for presentation of the database (e.g. tables)
+
+please take a look in `schema.dbml` and `schema.json`,
+associate the existing `collection` from json file to the `table` in dbml file
+
+keep `schema.json` remain unchanged and update `schema.dbml` to match it.
+
+please modify the `schema.dbml` to align with `schema.json`
+
+to the collection `QuizLPCategories` align the dbml file in the previous prompt

001_documentation/Requirements/REQ0006/schema.dbml

@@ -1,215 +1,266 @@
+// Users table with auth fields
+Table Users {
+  // system field
+  id text [pk]
+  tokenKey text [not null]
+  created datetime [default: `now()`]
+  updated datetime
+  password text [not null]
+
+  // value field
+  email text [not null]
+  emailVisibility boolean
+  verified boolean
+  name text
+  avatar file
+}
+
 // LessonTypes stores different types of lessons
 // lesson_types, lesson_type
 Table LessonTypes {
   // system field
-  id int [pk, increment] // unique identifier for the lesson type
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // timestamp when the lesson type was created
   updated datetime // timestamp when the lesson type was last updated
   // value field
-  name varchar // name of the lesson type
+  name text // changed from varchar to text
-  type varchar // type category
+  type text // changed from varchar to text
+  pos integer
+  visible text
+  field date
 }
 
+
 // LessonCategories stores categories of lessons
 // lesson_categories, lesson_category
 Table LessonCategories {
   // system field
-  id int [pk, increment] // unique identifier for the lesson category
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // timestamp when the category was created
   updated datetime // timestamp when the category was last updated
   // value field
-  cat_name varchar // image file name
+  cat_name text // changed from varchar to text
-  cat_image varchar // image representing the category
+  cat_image_url text // new field
-  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referencing LessonTypes.id
+  cat_image file // changed from varchar to file
+  pos integer
+  lesson_id integer [ref: > LessonTypes.id] // foreign key referencing LessonTypes.id
+  description text // new field
+  remarks text // changed from varchar to text
+  visible text // new field
 }
 
 Table Helloworlds {
   // system field
-  id int [pk, increment] // id field, increment
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // record create time
   updated datetime // record update time
-}
+  hello text // new field
-
-Table Users {
-  // system field
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value field
-  email varchar
-  emailVisibility boolean
-  verified boolean
-  name varchar
-  avatar blob
 }
 
 Table UserMetas {
   // system field
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
 
   // value field
-  helloworld varchar
+  helloworld text // changed from varchar to text
-  app_on_time_s integer
+  meta json // new field
-  user_id integer [ref: > Users.id]
+  user_id text [ref: > Users.id] // changed type and reference
+  state text // new field
+  avatar file // changed from blob to file
+  role text // new field
 }
 
 Table QuizCategories {
   // system field
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
 
   // value field
-  cat_name varchar // category name
+  cat_name text // changed from varchar to text
-  cat_image varchar // category image
+  cat_image text // changed from varchar to text
+  init_answer json // new field
 }
 
+
 // stores all questions of matching frenzy
 Table QuizMatchings {
   // system field
-  id int [pk, increment] // id field, increment
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // record create time
   updated datetime // record update time
 
   // value field
-  word varchar // modal answer
+  word text // changed from varchar to text
-  word_c varchar // question
+  word_c text // changed from varchar to text
-  cat_id integer [ref: > QuizCategories.id] // foreign key to QuizCategories.id
+  cat_id text [ref: > QuizCategories.id] // changed type and reference
 }
 
 // QuizListening stores all listening quiz data
 Table QuizListenings {
   // system field
-  id int [pk, increment] // id field, increment
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // record create time
   updated datetime // record update time
 
   // value field
-  sound varchar // URL to the sound file
+  sound file // changed from varchar to file
-  word varchar // The word in the quiz
+  word text // changed from varchar to text
-  cat_id integer [ref: > QuizCategories.id]
+  cat_id text [ref: > QuizCategories.id] // changed type and reference
 }
 
+
 // stores all categories of connectives revision quiz
 Table QuizConnectivesCategories {
   // system field
-  id int [pk, increment] // id field, increment
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // record create time
   updated datetime // record update time
 
   // value field
-  cat_name varchar // category name
+  cat_name text // changed from varchar to text
-  cat_image varchar // category image
+  cat_image file // changed from varchar to file
 }
 
 // stores all questions of connectives revision quiz
 Table QuizConnectives {
   // system field
-  id int [pk, increment] // id field, increment
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // record create time
   updated datetime // record update time
 
   // value field
-  question_fh varchar // first half
+  question_fh text // changed from varchar to text
-  question_sh varchar // second half
+  question_sh text // changed from varchar to text
-  modal_ans varchar // modal ans
+  modal_ans text // changed from varchar to text
-  cat_id integer [ref: > QuizConnectivesCategories.id] // foreign key to QuizConnectivesCategories.id
+  cat_id text [ref: > QuizConnectivesCategories.id] // changed type and reference
 }
 
 // Lessons stores all lessons in the database
 Table Vocabularies {
   // system field
-  id int [pk, increment] // unique identifier for the lesson
+  id text [pk] // changed from int to text
   created datetime [default: `now()`] // timestamp when the lesson was created
   updated datetime // timestamp when the lesson was last updated
 
   // value field
-  image varchar // URL to the image associated with the lesson
+  image file // changed from varchar to file
-  sound varchar // URL to the sound file associated with the lesson
+  sound file // changed from varchar to file
-  word varchar // The word in English
+  word text // changed from varchar to text
-  word_c varchar // The word in Chinese
+  word_c text // changed from varchar to text
-  sample_e varchar // Sample sentence in English using the word
+  sample_e text // changed from varchar to text
-  sample_c varchar // Sample sentence in Chinese using the word
+  sample_c text // changed from varchar to text
-  cat_id integer [ref: > LessonCategories.id] // foreign key referring to LessonCategories.id
+  cat_id text [ref: > LessonCategories.id] // changed type and reference
-  category varchar // The category to which the lesson belongs
+  category text // changed from varchar to text
-  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referring to LessonTypes.id
+  lesson_type_id text [ref: > LessonTypes.id] // changed type and reference
 }
 
 // Listening Practice Quiz Categories
 // store listening practice category, (LpCategories, LpCategory)
 Table QuizLPCategories {
   // system fields
-  id text [pk] // changed from int to text to match PocketBase
+  id text [pk]
   created datetime [default: `now()`]
   updated datetime
 
   // value fields
-  cat_name varchar [presentable: true] // added presentable flag
+  cat_name text
-  cat_image file // changed from blob to file type
+  cat_image file
-  pos number // changed from integer to number
+  pos number
   init_answer json
+  visible text
+  slug text
+  remarks text
+  description text
 }
 
 // Listening Practice Quiz Questions
 Table QuizLPQuestions {
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
-  word varchar
+  word text // changed from varchar to text
-  sound blob
+  sound file // changed from blob to file
-  cat_id integer [ref: > QuizLPCategories.id]
+  cat_id text [ref: > QuizLPCategories.id] // changed type and reference
+  cat_name text // new field
+  cat_image file // new field
+  pos number // new field
+  init_answer json // new field
+  visible text // new field
+  slug text // new field
+  remarks text // new field
+  description text // new field
 }
 
 // Matching Frenzy Quiz Categories
 Table QuizMFCategories {
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
-  cat_name varchar
+  cat_name text // changed from varchar to text
-  cat_image blob
+  cat_image file // changed from blob to file
-  pos integer
+  pos number // changed from integer to number
   init_answer json
+  visible text // new field
 }
 
 // Matching Frenzy Quiz Questions
 Table QuizMFQuestions {
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
-  word varchar
+  word text // changed from varchar to text
-  word_c varchar
+  word_c text // changed from varchar to text
-  cat_id integer [ref: > QuizMFCategories.id]
+  cat_id text [ref: > QuizMFCategories.id] // changed type and reference
+  visible text // new field
+  sound file // new field
+  cat_image file // new field
 }
 
 // Connectives Revision Quiz Categories
 Table QuizCRCategories {
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
-  cat_name varchar
+  cat_name text // changed from varchar to text
-  cat_image blob
+  cat_image file // changed from blob to file
   pos integer
   init_answer json
 }
 
 // Connectives Revision Quiz Questions
 Table QuizCRQuestions {
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
-  question_fh varchar
+  question_fh text // changed from varchar to text
-  question_sh varchar
+  question_sh text // changed from varchar to text
-  modal_ans varchar
+  modal_ans text // changed from varchar to text
-  cat_id integer [ref: > QuizCRCategories.id]
+  cat_id text [ref: > QuizCRCategories.id] // changed type and reference
+  options json // new field
 }
 
 // Test table
 Table t1 {
-  id int [pk, increment]
+  id text [pk] // changed from int to text
   created datetime [default: `now()`]
   updated datetime
-  name varchar
+  hello text // changed from name to hello
+  test_file file // new field
+}
+
+// Customers table
+Table Customers {
+  id text [pk] // new table
+  created datetime [default: `now()`]
+  updated datetime
+  name text
+  email text
+  phone text
+  quota number
+  status text
+  avatar_file file
+  cat_id text [ref: > QuizMFCategories.id] // refer to a single user in `Users` table
 }

001_documentation/Requirements/REQ0006/schema.dbml.ai_draft

@@ -0,0 +1,215 @@
+// LessonTypes stores different types of lessons
+// lesson_types, lesson_type
+Table LessonTypes {
+  // system field
+  id int [pk, increment] // unique identifier for the lesson type
+  created datetime [default: `now()`] // timestamp when the lesson type was created
+  updated datetime // timestamp when the lesson type was last updated
+  // value field
+  name varchar // name of the lesson type
+  type varchar // type category
+}
+
+// LessonCategories stores categories of lessons
+// lesson_categories, lesson_category
+Table LessonCategories {
+  // system field
+  id int [pk, increment] // unique identifier for the lesson category
+  created datetime [default: `now()`] // timestamp when the category was created
+  updated datetime // timestamp when the category was last updated
+  // value field
+  cat_name varchar // image file name
+  cat_image varchar // image representing the category
+  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referencing LessonTypes.id
+}
+
+Table Helloworlds {
+  // system field
+  id int [pk, increment] // id field, increment
+  created datetime [default: `now()`] // record create time
+  updated datetime // record update time
+}
+
+Table Users {
+  // system field
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+
+  // value field
+  email varchar
+  emailVisibility boolean
+  verified boolean
+  name varchar
+  avatar blob
+}
+
+Table UserMetas {
+  // system field
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+
+  // value field
+  helloworld varchar
+  app_on_time_s integer
+  user_id integer [ref: > Users.id]
+}
+
+Table QuizCategories {
+  // system field
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+
+  // value field
+  cat_name varchar // category name
+  cat_image varchar // category image
+}
+
+// stores all questions of matching frenzy
+Table QuizMatchings {
+  // system field
+  id int [pk, increment] // id field, increment
+  created datetime [default: `now()`] // record create time
+  updated datetime // record update time
+
+  // value field
+  word varchar // modal answer
+  word_c varchar // question
+  cat_id integer [ref: > QuizCategories.id] // foreign key to QuizCategories.id
+}
+
+// QuizListening stores all listening quiz data
+Table QuizListenings {
+  // system field
+  id int [pk, increment] // id field, increment
+  created datetime [default: `now()`] // record create time
+  updated datetime // record update time
+
+  // value field
+  sound varchar // URL to the sound file
+  word varchar // The word in the quiz
+  cat_id integer [ref: > QuizCategories.id]
+}
+
+// stores all categories of connectives revision quiz
+Table QuizConnectivesCategories {
+  // system field
+  id int [pk, increment] // id field, increment
+  created datetime [default: `now()`] // record create time
+  updated datetime // record update time
+
+  // value field
+  cat_name varchar // category name
+  cat_image varchar // category image
+}
+
+// stores all questions of connectives revision quiz
+Table QuizConnectives {
+  // system field
+  id int [pk, increment] // id field, increment
+  created datetime [default: `now()`] // record create time
+  updated datetime // record update time
+
+  // value field
+  question_fh varchar // first half
+  question_sh varchar // second half
+  modal_ans varchar // modal ans
+  cat_id integer [ref: > QuizConnectivesCategories.id] // foreign key to QuizConnectivesCategories.id
+}
+
+// Lessons stores all lessons in the database
+Table Vocabularies {
+  // system field
+  id int [pk, increment] // unique identifier for the lesson
+  created datetime [default: `now()`] // timestamp when the lesson was created
+  updated datetime // timestamp when the lesson was last updated
+
+  // value field
+  image varchar // URL to the image associated with the lesson
+  sound varchar // URL to the sound file associated with the lesson
+  word varchar // The word in English
+  word_c varchar // The word in Chinese
+  sample_e varchar // Sample sentence in English using the word
+  sample_c varchar // Sample sentence in Chinese using the word
+  cat_id integer [ref: > LessonCategories.id] // foreign key referring to LessonCategories.id
+  category varchar // The category to which the lesson belongs
+  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referring to LessonTypes.id
+}
+
+// Listening Practice Quiz Categories
+// store listening practice category, (LpCategories, LpCategory)
+Table QuizLPCategories {
+  // system fields
+  id text [pk] // changed from int to text to match PocketBase
+  created datetime [default: `now()`]
+  updated datetime
+
+  // value fields
+  cat_name varchar [presentable: true] // added presentable flag
+  cat_image file // changed from blob to file type
+  pos number // changed from integer to number
+  init_answer json
+}
+
+// Listening Practice Quiz Questions
+Table QuizLPQuestions {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  word varchar
+  sound blob
+  cat_id integer [ref: > QuizLPCategories.id]
+}
+
+// Matching Frenzy Quiz Categories
+Table QuizMFCategories {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  cat_name varchar
+  cat_image blob
+  pos integer
+  init_answer json
+}
+
+// Matching Frenzy Quiz Questions
+Table QuizMFQuestions {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  word varchar
+  word_c varchar
+  cat_id integer [ref: > QuizMFCategories.id]
+}
+
+// Connectives Revision Quiz Categories
+Table QuizCRCategories {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  cat_name varchar
+  cat_image blob
+  pos integer
+  init_answer json
+}
+
+// Connectives Revision Quiz Questions
+Table QuizCRQuestions {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  question_fh varchar
+  question_sh varchar
+  modal_ans varchar
+  cat_id integer [ref: > QuizCRCategories.id]
+}
+
+// Test table
+Table t1 {
+  id int [pk, increment]
+  created datetime [default: `now()`]
+  updated datetime
+  name varchar
+}

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

@@ -25,7 +25,6 @@ import { defaultCrCategory } from '@/components/dashboard/cr/categories/_constan
 import { Notifications } from '@/components/dashboard/cr/categories/notifications';
 import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 import FormLoading from '@/components/loading';
-
 import BasicDetailCard from './BasicDetailCard';
 import TitleCard from './TitleCard';
 
@@ -37,7 +36,6 @@ export default function Page(): React.JSX.Element {
   //
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
-
   //
   const [showLessonCategory, setShowLessonCategory] = React.useState<CrCategory>(defaultCrCategory);
 
@@ -55,7 +53,6 @@ export default function Page(): React.JSX.Element {
         .catch((err) => {
           logger.error(err);
           toast(t('list.error'));
-
           setShowError({ show: true, detail: JSON.stringify(err) });
         })
         .finally(() => {

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

@@ -34,6 +34,7 @@ import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
+  // TODO: align to customers page.tsx
   const { email, phone, sortDir, status, name, visible, type } = searchParams;
   const router = useRouter();
   const [lessonCategoriesData, setLessonCategoriesData] = React.useState<CrCategory[]>([]);

002_source/cms/src/app/dashboard/customers/[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/customers/[customerId]/TitleCard.tsx

@@ -0,0 +1,74 @@
+'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 { 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}`;
+}
+
+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/customers/[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 type { RecordModel } from 'pocketbase';
-import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { useTranslation } from 'react-i18next';
-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 { logger } from '@/lib/default-logger';
-import { PropertyItem } from '@/components/core/property-item';
+import { pb } from '@/lib/pb';
-import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
-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;
+import ErrorDisplay from '@/components/dashboard/error';
+
+import { Notifications } from '@/components/dashboard/customer/notifications';
+import FormLoading from '@/components/loading';
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+import { defaultCustomer } from '@/components/dashboard/customer/_constants';
+import type { Customer } from '@/components/dashboard/customer/type.d';
+import { COL_CUSTOMERS } 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<Customer>(defaultCustomer);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.customers.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (customerId) {
+      pb.collection(COL_CUSTOMERS)
+        .getOne(customerId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultCustomer, ...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={{
@@ -61,244 +101,38 @@ export default function Page(): React.JSX.Element {
               Customers
             </Link>
           </div>
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+          <Stack
-            <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+            direction={{ xs: 'column', sm: 'row' }}
-              <Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
+            spacing={3}
-                MV
+            sx={{ alignItems: 'flex-start' }}
-              </Avatar>
+          >
-              <div>
+            <TitleCard lpModel={showLessonCategory} />
-                <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
-          <Grid lg={4} xs={12}>
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
             <Stack spacing={4}>
-              <Card>
+              <BasicDetailCard
-                <CardHeader
+                lpModel={showLessonCategory}
-                  action={
+                handleEditClick={handleEditClick}
-                    <IconButton>
+              />
-                      <PencilSimpleIcon />
+              <SampleSecurityCard />
-                    </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}>
+          <Grid
+            lg={8}
+            xs={12}
+          >
             <Stack spacing={4}>
-              <Payments
+              <SamplePaymentCard />
-                ordersValue={2069.48}
+              <SampleAddressCard />
-                payments={[
+              <Notifications notifications={SampleNotifications} />
-                  {
-                    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>

002_source/cms/src/app/dashboard/customers/customers.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/customers/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/customers/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 { CustomerEditForm } from '@/components/dashboard/customer/customer-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.cr_categories.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <CustomerEditForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -1,7 +1,14 @@
+// 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';
@@ -9,184 +16,140 @@ 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 type { Filters } from '@/components/dashboard/customer/customers-filters';
 import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
 import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
 import { CustomersTable } from '@/components/dashboard/customer/customers-table';
-import type { Customer } from '@/components/dashboard/customer/customers-table';
+import type { Customer, Filters } from '@/components/dashboard/customer/type.d';
+import { SampleCustomers } from './customers';
+import { useTranslation } from 'react-i18next';
 
-// export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+import { paths } from '@/paths';
-
+import isDevelopment from '@/lib/check-is-development';
-const customers = [
+import { logger } from '@/lib/default-logger';
-  {
+import { pb } from '@/lib/pb';
-    id: 'USR-005',
+import { toast } from '@/components/core/toaster';
-    name: 'Fran Perez',
+import ErrorDisplay from '@/components/dashboard/error';
-    avatar: '/assets/avatar-5.png',
+import { defaultCustomer } from '@/components/dashboard/customer/_constants';
-    email: 'fran.perez@domain.com',
+import FormLoading from '@/components/loading';
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-  {
-    id: 'USR-005',
-    name: 'Fran Perez',
-    avatar: '/assets/avatar-5.png',
-    email: 'fran.perez@domain.com',
-    phone: '(815) 704-0045',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(1, 'hour').toDate(),
-  },
-  {
-    id: 'USR-004',
-    name: 'Penjani Inyene',
-    avatar: '/assets/avatar-4.png',
-    email: 'penjani.inyene@domain.com',
-    phone: '(803) 937-8925',
-    quota: 100,
-    status: 'active',
-    createdAt: dayjs().subtract(3, 'hour').toDate(),
-  },
-  {
-    id: 'USR-003',
-    name: 'Carson Darrin',
-    avatar: '/assets/avatar-3.png',
-    email: 'carson.darrin@domain.com',
-    phone: '(715) 278-5041',
-    quota: 10,
-    status: 'blocked',
-    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-002',
-    name: 'Siegbert Gottfried',
-    avatar: '/assets/avatar-2.png',
-    email: 'siegbert.gottfried@domain.com',
-    phone: '(603) 766-0431',
-    quota: 0,
-    status: 'pending',
-    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
-  },
-  {
-    id: 'USR-001',
-    name: 'Miron Vitold',
-    avatar: '/assets/avatar-1.png',
-    email: 'miron.vitold@domain.com',
-    phone: '(425) 434-5535',
-    quota: 50,
-    status: 'active',
-    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
-  },
-] satisfies Customer[];
-
-interface PageProps {
-  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
-}
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation(['customers']);
+  const router = useRouter();
+
   const { email, phone, sortDir, status } = searchParams;
 
-  const sortedCustomers = applySort(customers, sortDir);
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Customer[]>([]);
-  const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
+  //
+
+  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<Customer[]>([]);
+  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 sortedCustomers = applySort(SampleCustomers, sortDir);
+  // const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
+
+  //
+  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: Customer[] = items.map((lt) => {
+        return { ...defaultCustomer, ...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(() => {
-    console.log('helloworld');
+    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
@@ -204,35 +167,50 @@ 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
+              {t('list.add')}
-            </Button>
+            </LoadingButton>
           </Box>
         </Stack>
-        <CustomersSelectionProvider customers={filteredCustomers}>
+        <CustomersSelectionProvider customers={f}>
           <Card>
             <CustomersFilters
               filters={{ email, phone, status }}
+              fullData={lessonCategoriesData}
               sortDir={sortDir}
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <CustomersTable rows={filteredCustomers} />
+              <CustomersTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
             </Box>
             <Divider />
             <CustomersPagination
-              count={filteredCustomers.length + 100}
+              count={recordCount}
-              page={0}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
             />
           </Card>
         </CustomersSelectionProvider>
       </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
     </Box>
   );
 }
@@ -272,3 +250,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/app/dashboard/lp/categories/page.tsx

@@ -34,11 +34,10 @@ import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);
-  const { email, phone, sortDir, status, name, visible, type } = searchParams;
   const router = useRouter();
+  const { email, phone, sortDir, status, name, visible, type } = searchParams;
   const [lessonCategoriesData, setLessonCategoriesData] = React.useState<LpCategory[]>([]);
   //
-
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
   const [showError, setShowError] = React.useState({ show: false, detail: '' });

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

@@ -15,7 +15,7 @@ import type { Filters } from '@/components/dashboard/customer/customers-filters'
 import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
 import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
 import { CustomersTable } from '@/components/dashboard/customer/customers-table';
-import type { Customer } from '@/components/dashboard/customer/customers-table';
+import type { Customer } from '@/components/dashboard/customer/type.d';
 
 export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
 
@@ -192,25 +192,38 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       }}
     >
       <Stack spacing={4}>
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={3}
+          sx={{ alignItems: 'flex-start' }}
+        >
           <Box sx={{ flex: '1 1 auto' }}>
             <Typography variant="h4">Customers</Typography>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button startIcon={<PlusIcon />} variant="contained">
+            <Button
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
               Add
             </Button>
           </Box>
         </Stack>
         <CustomersSelectionProvider customers={filteredCustomers}>
           <Card>
-            <CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
+            <CustomersFilters
+              filters={{ email, phone, status }}
+              sortDir={sortDir}
+            />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
               <CustomersTable rows={filteredCustomers} />
             </Box>
             <Divider />
-            <CustomersPagination count={filteredCustomers.length + 100} page={0} />
+            <CustomersPagination
+              count={filteredCustomers.length + 100}
+              page={0}
+            />
           </Card>
         </CustomersSelectionProvider>
       </Stack>

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

@@ -15,7 +15,7 @@ import type { Filters } from '@/components/dashboard/customer/customers-filters'
 import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
 import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
 import { CustomersTable } from '@/components/dashboard/customer/customers-table';
-import type { Customer } from '@/components/dashboard/customer/customers-table';
+import type { Customer } from '@/components/dashboard/customer/type.d';
 
 export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
 
@@ -192,25 +192,38 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       }}
     >
       <Stack spacing={4}>
-        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={3}
+          sx={{ alignItems: 'flex-start' }}
+        >
           <Box sx={{ flex: '1 1 auto' }}>
             <Typography variant="h4">Customers</Typography>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button startIcon={<PlusIcon />} variant="contained">
+            <Button
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
               Add
             </Button>
           </Box>
         </Stack>
         <CustomersSelectionProvider customers={filteredCustomers}>
           <Card>
-            <CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
+            <CustomersFilters
+              filters={{ email, phone, status }}
+              sortDir={sortDir}
+            />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
               <CustomersTable rows={filteredCustomers} />
             </Box>
             <Divider />
-            <CustomersPagination count={filteredCustomers.length + 100} page={0} />
+            <CustomersPagination
+              count={filteredCustomers.length + 100}
+              page={0}
+            />
           </Card>
         </CustomersSelectionProvider>
       </Stack>

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

@@ -44,6 +44,7 @@ export function CrQuestionsPagination({
       page={page}
       rowsPerPage={rowsPerPage}
       rowsPerPageOptions={[5, 10, 25]}
+      //
     />
   );
 }

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

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

@@ -0,0 +1,17 @@
+import { dayjs } from '@/lib/dayjs';
+import type { Customer } from './type.d';
+
+export const defaultCustomer: Customer = {
+  id: '',
+  name: '',
+  avatar: undefined,
+  email: '',
+  phone: undefined,
+  quota: 0,
+  status: 'pending',
+  createdAt: dayjs().toDate(),
+};
+
+export const emptyLpCategory: Customer = {
+  ...defaultCustomer,
+};

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

@@ -0,0 +1,128 @@
+'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';
+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,
+  setOpen,
+  idToDelete,
+  reloadRows,
+}: {
+  open: boolean;
+  setOpen: (b: boolean) => void;
+  idToDelete: string;
+  reloadRows: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  // const handleClose = () => setOpen(false);
+  function handleClose(): void {
+    setOpen(false);
+  }
+
+  const [isDeleteing, setIsDeleteing] = React.useState(false);
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  };
+
+  function handleUserConfirmDelete(): void {
+    if (idToDelete) {
+      setIsDeleteing(true);
+
+      // RULES: delete<CollectionName>
+      deleteCustomer(idToDelete)
+        .then(() => {
+          reloadRows();
+          handleClose();
+          toast(t('delete.success'));
+        })
+        .catch((err) => {
+          // console.error(err)
+          logger.error(err);
+          toast(t('delete.error'));
+        })
+        .finally(() => {
+          setIsDeleteing(false);
+        });
+    }
+  }
+
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Container maxWidth="sm">
+            <Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{ display: 'flex', p: 3 }}
+              >
+                <Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
+                  <NoteIcon fontSize="var(--Icon-fontSize)" />
+                </Avatar>
+                <Stack spacing={3}>
+                  <Stack spacing={1}>
+                    <Typography variant="h5">{t('Delete Lesson Type ?')}</Typography>
+                    <Typography
+                      color="text.secondary"
+                      variant="body2"
+                    >
+                      {t('Are you sure you want to delete lesson type ?')}
+                    </Typography>
+                  </Stack>
+                  <Stack
+                    direction="row"
+                    spacing={2}
+                    sx={{ justifyContent: 'flex-end' }}
+                  >
+                    <Button
+                      color="secondary"
+                      onClick={handleClose}
+                    >
+                      {t('Cancel')}
+                    </Button>
+                    <LoadingButton
+                      color="error"
+                      variant="contained"
+                      onClick={(e) => {
+                        handleUserConfirmDelete();
+                      }}
+                      loading={isDeleteing}
+                    >
+                      {t('Delete')}
+                    </LoadingButton>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          </Container>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

002_source/cms/src/components/dashboard/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: '',
+  name: 'new name',
-  email: '',
+  email: '123@123.com',
-  phone: '',
+  phone: '91234567',
   company: '',
-  billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
+  billingAddress: {
-  taxId: '',
+    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
+        // Use standard create method from db/Customers/Create
-        toast.success('Customer updated');
+        const record = await createCustomer(values);
-        router.push(paths.dashboard.customers.details('1'));
+        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
-                <Grid md={6} xs={12}>
+                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
-                <Grid md={6} xs={12}>
+                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

@@ -0,0 +1,604 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+//
+import { COL_CUSTOMERS } from '@/constants';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { LoadingButton } from '@mui/lab';
+//
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+//
+import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
+//
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
+import { pb } from '@/lib/pb';
+import { toast } from '@/components/core/toaster';
+import FormLoading from '@/components/loading';
+
+// import ErrorDisplay from '../../error';
+import ErrorDisplay from '../error';
+import isDevelopment from '@/lib/check-is-development';
+
+// TODO: review this
+const schema = zod.object({
+  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 = {
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  billingAddress: {
+    country: '',
+    state: '',
+    city: '',
+    zipCode: '',
+    line1: '',
+    line2: '',
+  },
+  taxId: '',
+  timezone: '',
+  language: '',
+  currency: '',
+  avatar: '',
+} satisfies Values;
+
+export function CustomerEditForm(): React.JSX.Element {
+  const router = useRouter();
+  const { t } = useTranslation(['lp_categories']);
+
+  const { customerId } = useParams<{ customerId: string }>();
+  //
+  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(false);
+  //
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+    watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(
+    async (values: Values): Promise<void> => {
+      setIsUpdating(true);
+
+      const 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 {
+        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('Failed to update customer');
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [customerId, router]
+  );
+
+  const avatarInputRef = React.useRef<HTMLInputElement>(null);
+  const avatar = watch('avatar');
+
+  const handleAvatarChange = React.useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        const url = await fileToBase64(file);
+        setValue('avatar', url);
+      }
+    },
+    [setValue]
+  );
+
+  // TODO: need to align with save form
+  // use trycatch
+  const [textDescription, setTextDescription] = React.useState<string>('');
+  const [textRemarks, setTextRemarks] = React.useState<string>('');
+
+  // load existing data when user arrive
+  const loadExistingData = React.useCallback(
+    async (id: string) => {
+      setShowLoading(true);
+
+      try {
+        const result = await pb.collection(COL_CUSTOMERS).getOne(id);
+        reset({ ...defaultValues, ...result });
+        console.log({ result });
+
+        if (result.avatar_file) {
+          const fetchResult = await fetch(
+            `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);
+        }
+      } catch (error) {
+        logger.error(error);
+        toast.error('Failed to load customer data');
+        setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
+      } finally {
+        setShowLoading(false);
+      }
+    },
+    [reset, setValue]
+  );
+
+  React.useEffect(() => {
+    void loadExistingData(customerId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [customerId]);
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardContent>
+          <Stack
+            divider={<Divider />}
+            spacing={4}
+          >
+            <Stack spacing={3}>
+              <Typography variant="h6">{t('edit.basic-info')}</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid xs={12}>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    sx={{ alignItems: 'center' }}
+                  >
+                    <Box
+                      sx={{
+                        border: '1px dashed var(--mui-palette-divider)',
+                        borderRadius: '5%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    >
+                      <Avatar
+                        variant="rounded"
+                        src={avatar}
+                        sx={{
+                          '--Avatar-size': '100px',
+                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
+                          alignItems: 'center',
+                          bgcolor: 'var(--mui-palette-background-level1)',
+                          color: 'var(--mui-palette-text-primary)',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <CameraIcon fontSize="var(--Icon-fontSize)" />
+                      </Avatar>
+                    </Box>
+                    <Stack
+                      spacing={1}
+                      sx={{ alignItems: 'flex-start' }}
+                    >
+                      <Typography variant="subtitle1">{t('edit.avatar')}</Typography>
+                      <Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        {t('edit.avatar_select')}
+                      </Button>
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    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</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</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}
+                          placeholder="no company name"
+                        />
+                        {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}>
+                          <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
+                  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 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.customers.list}
+          >
+            {t('edit.cancelButton')}
+          </Button>
+
+          <LoadingButton
+            disabled={isUpdating}
+            loading={isUpdating}
+            type="submit"
+            variant="contained"
+          >
+            {t('edit.updateButton')}
+          </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

@@ -1,53 +1,72 @@
 'use client';
-
+// RULES:
+// T.B.A.
+//
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
+import { getAllCustomersCount } from '@/db/Customers/GetAllCount';
+
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
+import { FilterButton } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
 import { useCustomersSelection } from './customers-selection-context';
+import GetBlockedCount from '@/db/Customers/GetBlockedCount';
+import GetPendingCount from '@/db/Customers/GetPendingCount';
+import GetActiveCount from '@/db/Customers/GetActiveCount';
+import PhoneFilterPopover from './phone-filter-popover';
+import EmailFilterPopover from './email-filter-popover';
+import type { CustomersFiltersProps, Filters, SortDir } from './type.d';
 
-// The tabs should be generated using API data.
+export function CustomersFilters({
-const tabs = [
+  filters = {},
-  { label: 'All', value: '', count: 5 },
+  sortDir = 'desc',
-  { label: 'Active', value: 'active', count: 3 },
+  fullData,
-  { label: 'Pending', value: 'pending', count: 1 },
+}: CustomersFiltersProps): React.JSX.Element {
-  { label: 'Blocked', value: 'blocked', count: 1 },
+  const { t } = useTranslation();
-] as const;
 
-export interface Filters {
-  email?: string;
-  phone?: string;
-  status?: string;
-}
-
-export type SortDir = 'asc' | 'desc';
-
-export interface CustomersFiltersProps {
-  filters?: Filters;
-  sortDir?: SortDir;
-}
-
-export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFiltersProps): React.JSX.Element {
   const { email, phone, status } = filters;
 
+  const [totalCount, setTotalCount] = React.useState<number>(0);
+  const [activeCount, setActiveCount] = React.useState<number>(0);
+  const [pendingCount, setPendingCount] = React.useState<number>(0);
+  const [blockedCount, setBlockedCount] = React.useState<number>(0);
+
   const router = useRouter();
 
   const selection = useCustomersSelection();
 
+  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);
+  }
+
+  // The tabs should be generated using API data.
+  const tabs = [
+    { label: 'All', value: '', count: totalCount },
+    { label: 'Active', value: 'active', count: activeCount },
+    { label: 'Pending', value: 'pending', count: pendingCount },
+    { label: 'Blocked', value: 'blocked', count: blockedCount },
+  ] as const;
+
   const updateSearchParams = React.useCallback(
     (newFilters: Filters, newSortDir: SortDir): void => {
       const searchParams = new URLSearchParams();
@@ -107,12 +126,43 @@ export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFi
 
   const hasFilters = status || email || phone;
 
+  React.useEffect(() => {
+    const fetchCount = async (): Promise<void> => {
+      try {
+        const tc = await getAllCustomersCount();
+        setTotalCount(tc);
+
+        const bc = await GetBlockedCount();
+        setBlockedCount(bc);
+        const pc = await GetPendingCount();
+        setPendingCount(pc);
+        const ac = await GetActiveCount();
+        setActiveCount(ac);
+      } catch (error) {
+        //
+      }
+    };
+    void fetchCount();
+  }, []);
+
   return (
     <div>
-      <Tabs onChange={handleStatusChange} sx={{ px: 3 }} value={status ?? ''} variant="scrollable">
+      <Tabs
+        onChange={handleStatusChange}
+        sx={{ px: 3 }}
+        value={status ?? ''}
+        variant="scrollable"
+        //
+      >
         {tabs.map((tab) => (
           <Tab
-            icon={<Chip label={tab.count} size="small" variant="soft" />}
+            icon={
+              <Chip
+                label={tab.count}
+                size="small"
+                variant="soft"
+              />
+            }
             iconPosition="end"
             key={tab.value}
             label={tab.label}
@@ -123,8 +173,16 @@ export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFi
         ))}
       </Tabs>
       <Divider />
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
+      <Stack
-        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}
+        >
           <FilterButton
             displayValue={email}
             label="Email"
@@ -137,6 +195,7 @@ export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFi
             popover={<EmailFilterPopover />}
             value={email}
           />
+
           <FilterButton
             displayValue={phone}
             label="Phone number"
@@ -149,19 +208,35 @@ export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFi
             popover={<PhoneFilterPopover />}
             value={phone}
           />
+
           {hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
         </Stack>
         {selection.selectedAny ? (
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+          <Stack
-            <Typography color="text.secondary" variant="body2">
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center' }}
+          >
+            <Typography
+              color="text.secondary"
+              variant="body2"
+            >
               {selection.selected.size} selected
             </Typography>
-            <Button color="error" variant="contained">
+            <Button
+              color="error"
+              variant="contained"
+            >
               Delete
             </Button>
           </Stack>
         ) : null}
-        <Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
+        <Select
+          name="sort"
+          onChange={handleSortChange}
+          sx={{ maxWidth: '100%', width: '120px' }}
+          value={sortDir}
+        >
           <Option value="desc">Newest</Option>
           <Option value="asc">Oldest</Option>
         </Select>
@@ -169,73 +244,3 @@ export function CustomersFilters({ filters = {}, sortDir = 'desc' }: CustomersFi
     </div>
   );
 }
-
-function EmailFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
-
-  return (
-    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}
-
-function PhoneFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
-
-  return (
-    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}

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

@@ -10,20 +10,39 @@ function noop(): void {
 interface CustomersPaginationProps {
   count: number;
   page: number;
+  //
+  setPage: (page: number) => void;
+  setRowsPerPage: (page: number) => void;
+  rowsPerPage: number;
 }
 
-export function CustomersPagination({ count, page }: CustomersPaginationProps): React.JSX.Element {
+export function CustomersPagination({
+  count,
+  page,
+  //
+  setPage,
+  setRowsPerPage,
+  rowsPerPage,
+}: 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.
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value));
+    // console.log(parseInt(event.target.value));
+  };
 
   return (
     <TablePagination
       component="div"
       count={count}
-      onPageChange={noop}
+      onPageChange={handleChangePage}
-      onRowsPerPageChange={noop}
+      onRowsPerPageChange={handleChangeRowsPerPage}
       page={page}
-      rowsPerPage={5}
+      rowsPerPage={rowsPerPage}
       rowsPerPageOptions={[5, 10, 25]}
       //
     />

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import type { Customer } from './customers-table';
+import type { Customer } from './type.d';
 
 function noop(): void {
   return undefined;

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

@@ -2,8 +2,10 @@
 
 import * as React from 'react';
 import RouterLink from 'next/link';
+import { LoadingButton } from '@mui/lab';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -12,109 +14,184 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
+import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
 import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
 import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';
 import { DataTable } from '@/components/core/data-table';
 import type { ColumnDef } from '@/components/core/data-table';
 
+import ConfirmDeleteModal from './confirm-delete-modal';
 import { useCustomersSelection } from './customers-selection-context';
+import type { Customer } from './type.d';
 
-export interface Customer {
+function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Customer>[] {
-  id: string;
+  return [
-  name: string;
+    {
-  avatar?: string;
+      formatter: (row): React.JSX.Element => (
-  email: string;
+        <Stack
-  phone?: string;
+          direction="row"
-  quota: number;
+          spacing={1}
-  status: 'pending' | 'active' | 'blocked';
+          sx={{ alignItems: 'center' }}
-  createdAt: Date;
+        >
-}
+          <Avatar src={row.avatar} />{' '}
-
+          <div>
-const columns = [
+            <Link
-  {
+              color="inherit"
-    formatter: (row): React.JSX.Element => (
+              component={RouterLink}
-      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+              href={paths.dashboard.customers.details(row.id)}
-        <Avatar src={row.avatar} />{' '}
+              sx={{ whiteSpace: 'nowrap' }}
-        <div>
+              variant="subtitle2"
-          <Link
+            >
-            color="inherit"
+              {row.name}
-            component={RouterLink}
+            </Link>
-            href={paths.dashboard.customers.details('1')}
+            <Typography
-            sx={{ whiteSpace: 'nowrap' }}
+              color="text.secondary"
-            variant="subtitle2"
+              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"
           >
-            {row.name}
+            {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
-          </Link>
-          <Typography color="text.secondary" variant="body2">
-            {row.email}
           </Typography>
-        </div>
+        </Stack>
-      </Stack>
+      ),
-    ),
+      name: 'Quota',
-    name: 'Name',
+      width: '150px',
-    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',
+    { field: 'phone', name: 'Phone number', width: '150px' },
-    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" />;
+    {
+      formatter: (row): React.JSX.Element => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+
+        const mapping = {
+          active: {
+            label: 'Active',
+            icon: (
+              <CheckCircleIcon
+                color="var(--mui-palette-success-main)"
+                weight="fill"
+              />
+            ),
+          },
+          blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
+          pending: {
+            label: 'Pending',
+            icon: (
+              <ClockIcon
+                color="var(--mui-palette-warning-main)"
+                weight="fill"
+              />
+            ),
+          },
+        } 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',
     },
-    name: 'Status',
+    {
-    width: '150px',
+      formatter(row) {
-  },
+        return dayjs(row.createdAt).format('MMM D, YYYY');
-  {
+      },
-    formatter: (): React.JSX.Element => (
+      name: 'Created at',
-      <IconButton component={RouterLink} href={paths.dashboard.customers.details('1')}>
+      width: '150px',
-        <PencilSimpleIcon />
+    },
-      </IconButton>
+    {
-    ),
+      formatter: (row): React.JSX.Element => (
-    name: 'Actions',
+        <Stack
-    hideName: true,
+          direction="row"
-    width: '100px',
+          spacing={1}
-    align: 'right',
+        >
-  },
+          <LoadingButton
-] satisfies ColumnDef<Customer>[];
+            //
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.customers.details(row.id)}
+          >
+            <PencilSimpleIcon size={24} />
+          </LoadingButton>
+          <LoadingButton
+            color="error"
+            disabled={row.isEmpty}
+            onClick={() => {
+              handleDeleteClick(row.id);
+            }}
+          >
+            <TrashSimpleIcon size={24} />
+          </LoadingButton>
+        </Stack>
+      ),
+      name: 'Actions',
+      hideName: true,
+      align: 'right',
+    },
+  ];
+}
 
 export interface CustomersTableProps {
   rows: Customer[];
+  reloadRows: () => void;
 }
 
-export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element {
+export function CustomersTable({ rows, reloadRows }: CustomersTableProps): React.JSX.Element {
+  const { t } = useTranslation(['customers']);
   const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
 
+  const [idToDelete, setIdToDelete] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+
+  function handleDeleteClick(testId: string): void {
+    setOpen(true);
+    setIdToDelete(testId);
+  }
+
   return (
     <React.Fragment>
+      <ConfirmDeleteModal
+        idToDelete={idToDelete}
+        open={open}
+        reloadRows={reloadRows}
+        setOpen={setOpen}
+      />
       <DataTable<Customer>
-        columns={columns}
+        columns={columns(handleDeleteClick)}
         onDeselectAll={deselectAll}
         onDeselectOne={(_, row) => {
           deselectOne(row.id);
@@ -129,8 +206,13 @@ export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element
       />
       {!rows.length ? (
         <Box sx={{ p: 3 }}>
-          <Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
+          <Typography
-            No customers found
+            color="text.secondary"
+            sx={{ textAlign: 'center' }}
+            variant="body2"
+          >
+            {/* TODO: update this */}
+            {t('no-record-found')}
           </Typography>
         </Box>
       ) : null}

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

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

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

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

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

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

002_source/cms/src/components/dashboard/lesson_type/lesson-types-filters.tsx

@@ -178,6 +178,7 @@ export function LessonTypesFilters({
     void fetchCount();
   }, []);
 
+  // TODO: align to customers-filters.tsx order, this should be upper
   const hasFilters = status || email || phone || visible || name || type;
 
   return (
@@ -191,7 +192,13 @@ export function LessonTypesFilters({
       >
         {tabs.map((tab) => (
           <Tab
-            icon={<Chip label={tab.count} size="small" variant="soft" />}
+            icon={
+              <Chip
+                label={tab.count}
+                size="small"
+                variant="soft"
+              />
+            }
             iconPosition="end"
             key={tab.value}
             label={tab.label}
@@ -202,8 +209,16 @@ export function LessonTypesFilters({
         ))}
       </Tabs>
       <Divider />
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
+      <Stack
-        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}
+        >
           <FilterButton
             displayValue={name}
             label={t('Name')}
@@ -233,16 +248,31 @@ export function LessonTypesFilters({
           {hasFilters ? <Button onClick={handleClearFilters}>{t('Clear filters')}</Button> : null}
         </Stack>
         {selection.selectedAny ? (
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+          <Stack
-            <Typography color="text.secondary" variant="body2">
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center' }}
+          >
+            <Typography
+              color="text.secondary"
+              variant="body2"
+            >
               {selection.selected.size} {t('selected')}
             </Typography>
-            <Button color="error" variant="contained">
+            <Button
+              color="error"
+              variant="contained"
+            >
               {t('Delete')}
             </Button>
           </Stack>
         ) : null}
-        <Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
+        <Select
+          name="sort"
+          onChange={handleSortChange}
+          sx={{ maxWidth: '100%', width: '120px' }}
+          value={sortDir}
+        >
           <Option value="desc">{t('Newest')}</Option>
           <Option value="asc">{t('Oldest')}</Option>
         </Select>
@@ -261,7 +291,12 @@ function TypeFilterPopover(): React.JSX.Element {
   }, [initialValue]);
 
   return (
-    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by type')}>
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title={t('Filter by type')}
+    >
       <FormControl>
         <OutlinedInput
           onChange={(event) => {
@@ -297,7 +332,12 @@ function NameFilterPopover(): React.JSX.Element {
   }, [initialValue]);
 
   return (
-    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by name')}>
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title={t('Filter by name')}
+    >
       <FormControl>
         <OutlinedInput
           onChange={(event) => {
@@ -332,7 +372,12 @@ function EmailFilterPopover(): React.JSX.Element {
   }, [initialValue]);
 
   return (
-    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title="Filter by email"
+    >
       <FormControl>
         <OutlinedInput
           onChange={(event) => {
@@ -367,7 +412,12 @@ function PhoneFilterPopover(): React.JSX.Element {
   }, [initialValue]);
 
   return (
-    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title="Filter by phone number"
+    >
       <FormControl>
         <OutlinedInput
           onChange={(event) => {

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

@@ -36,7 +36,11 @@ export interface Customer {
 const columns = [
   {
     formatter: (row): React.JSX.Element => (
-      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{ alignItems: 'center' }}
+      >
         <Avatar src={row.avatar} />{' '}
         <div>
           <Link
@@ -48,7 +52,10 @@ const columns = [
           >
             {row.name}
           </Link>
-          <Typography color="text.secondary" variant="body2">
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
             {row.email}
           </Typography>
         </div>
@@ -59,9 +66,20 @@ const columns = [
   },
   {
     formatter: (row): React.JSX.Element => (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+      <Stack
-        <LinearProgress sx={{ flex: '1 1 auto' }} value={row.quota} variant="determinate" />
+        direction="row"
-        <Typography color="text.secondary" variant="body2">
+        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>
@@ -80,20 +98,46 @@ const columns = [
   {
     formatter: (row): React.JSX.Element => {
       const mapping = {
-        active: { label: 'Active', icon: <CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" /> },
+        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" /> },
+        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" />;
+      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')}>
+      <IconButton
+        component={RouterLink}
+        href={paths.dashboard.customers.details('1')}
+      >
         <PencilSimpleIcon />
       </IconButton>
     ),
@@ -129,7 +173,11 @@ export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element
       />
       {!rows.length ? (
         <Box sx={{ p: 3 }}>
-          <Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
+          <Typography
+            color="text.secondary"
+            sx={{ textAlign: 'center' }}
+            variant="body2"
+          >
             No customers found
           </Typography>
         </Box>

002_source/cms/src/constants.ts

@@ -9,6 +9,9 @@ const NS_LESSON_CATEGORY = 'lesson_category';
 const COL_USERS = 'users';
 const COL_USER_METAS = 'UserMetas';
 
+//
+const COL_CUSTOMERS = 'Customers';
+
 // RULES:
 // do not use LP_CATEGORIES anymore
 const COL_QUIZ_LP_CATEGORIES = 'QuizLPCategories';
@@ -20,6 +23,7 @@ const COL_QUIZ_MF_QUESTIONS = 'QuizMFQuestions';
 // New CR versions
 const COL_QUIZ_CR_CATEGORIES = 'QuizCRCategories';
 const COL_QUIZ_CR_QUESTIONS = 'QuizCRQuestions';
+//
 
 export {
   COL_LESSON_TYPES,
@@ -39,4 +43,6 @@ export {
   COL_QUIZ_CR_CATEGORIES,
   COL_QUIZ_CR_QUESTIONS,
   //
+  COL_CUSTOMERS,
+  //
 };

002_source/cms/src/db/Customers/Create.tsx

@@ -0,0 +1,11 @@
+// api method for crate customer record
+// RULES:
+// TBA
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+import type { CreateFormProps } from '@/components/dashboard/customer/type.d';
+import type { RecordModel } from 'pocketbase';
+
+export async function createCustomer(data: CreateFormProps): Promise<RecordModel> {
+  return pb.collection(COL_CUSTOMERS).create(data);
+}

002_source/cms/src/db/Customers/Delete.tsx

@@ -0,0 +1,6 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function deleteCustomer(id) {
+  return pb.collection(COL_CUSTOMERS).delete(id);
+}

002_source/cms/src/db/Customers/GetActiveCount.tsx

@@ -0,0 +1,9 @@
+import { COL_CUSTOMERS } from '@/constants';
+import { pb } from '@/lib/pb';
+
+export default async function GetActiveCount(): Promise<number> {
+  const { totalItems: count } = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
+    filter: 'status = "active"',
+  });
+  return count;
+}

002_source/cms/src/db/Customers/GetAll.tsx

@@ -0,0 +1,6 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function getAllCustomers(options = {}) {
+  return pb.collection(COL_CUSTOMERS).getFullList(options);
+}

002_source/cms/src/db/Customers/GetAllCount.tsx

@@ -0,0 +1,7 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function getAllCustomersCount() {
+  const result = await pb.collection(COL_CUSTOMERS).getList(1, 1);
+  return result.totalItems;
+}

002_source/cms/src/db/Customers/GetBlockedCount.tsx

@@ -0,0 +1,9 @@
+import { COL_CUSTOMERS } from '@/constants';
+import { pb } from '@/lib/pb';
+
+export default async function GetBlockedCount(): Promise<number> {
+  const { totalItems: count } = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
+    filter: 'status = "blocked"',
+  });
+  return count;
+}

002_source/cms/src/db/Customers/GetById.tsx

@@ -0,0 +1,6 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function getCustomerById(id) {
+  return pb.collection(COL_CUSTOMERS).getOne(id);
+}

002_source/cms/src/db/Customers/GetHiddenCount.tsx

@@ -0,0 +1,9 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function getHiddenCustomersCount() {
+  const result = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
+    filter: 'hidden = true',
+  });
+  return result.totalItems;
+}

002_source/cms/src/db/Customers/GetPendingCount.tsx

@@ -0,0 +1,9 @@
+import { COL_CUSTOMERS } from '@/constants';
+import { pb } from '@/lib/pb';
+
+export default async function GetPendingCount(): Promise<number> {
+  const { totalItems: count } = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
+    filter: 'status = "pending"',
+  });
+  return count;
+}

002_source/cms/src/db/Customers/GetVisibleCount.tsx

@@ -0,0 +1,9 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function getVisibleCustomersCount() {
+  const result = await pb.collection(COL_CUSTOMERS).getList(1, 1, {
+    filter: 'hidden = false',
+  });
+  return result.totalItems;
+}

002_source/cms/src/db/Customers/Helloworld.tsx

@@ -0,0 +1,3 @@
+export function helloCustomer() {
+  return 'Hello from Customers module!';
+}

002_source/cms/src/db/Customers/Update.tsx

@@ -0,0 +1,8 @@
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+import type { RecordModel } from 'pocketbase';
+import type { CreateForm } from '@/components/dashboard/customer/type.d';
+
+export async function updateCustomer(id: string, data: Partial<CustomerUpdateData>): Promise<RecordModel> {
+  return pb.collection(COL_CUSTOMERS).update(id, data);
+}

002_source/cms/src/db/Customers/_NOTES.md

@@ -0,0 +1,29 @@
+# NOTES
+
+this folder containing driver for `Customer` / `Customers` record:
+
+- create (Create.tsx)
+- read (GetById.tsx)
+- write (Update.tsx)
+- count (GetAllCount.tsx, GetHiddenCount.tsx, GetVisibleCount.tsx)
+- delete (Delete.tsx)
+- list (GetAll.tsx)
+
+the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
+
+## Assumption and Requirements
+
+- assume `pb` is located in `@/lib/pb`
+- no need to handle error in this function, i'll handle it in the caller
+
+simple template:
+
+```typescript
+import { pb } from '@/lib/pb';
+import { COL_CUSTOMERS } from '@/constants';
+
+export async function createCustomer(data) {
+  // ...content
+  // use direct return of pb.collection (e.g. return pb.collection(xxx))
+}
+```

002_source/cms/src/db/_PROMPT/1.MD

@@ -21,3 +21,15 @@ no need to state me any other things, thanks
 - directory: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/_AI_GUIDELINE`
 
 thanks
+
+---
+
+# task
+
+clone from `LessonTypes` to `Customers`
+
+## steps
+
+1. read `tsx` files from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/LessonTypes`
+1. copy file to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Customers`
+1. modify the copied `tsx` files to suit `customer` fields

002_source/cms/src/db/schema.json

@@ -520,6 +520,149 @@
     "indexes": [],
     "system": false
   },
+  {
+    "id": "pbc_108570809",
+    "listRule": "",
+    "viewRule": "",
+    "createRule": "",
+    "updateRule": "",
+    "deleteRule": "",
+    "name": "Customers",
+    "type": "base",
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3885137012",
+        "max": 0,
+        "min": 0,
+        "name": "email",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1146066909",
+        "max": 0,
+        "min": 0,
+        "name": "phone",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number1813778413",
+        "max": null,
+        "min": null,
+        "name": "quota",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text2063623452",
+        "max": 0,
+        "min": 0,
+        "name": "status",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "file507207115",
+        "maxSelect": 1,
+        "maxSize": 0,
+        "mimeTypes": [],
+        "name": "avatar_file",
+        "presentable": false,
+        "protected": false,
+        "required": false,
+        "system": false,
+        "thumbs": [],
+        "type": "file"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "_pb_users_auth_",
+        "hidden": false,
+        "id": "relation2809058197",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "user_id",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "indexes": [],
+    "system": false
+  },
   {
     "id": "pbc_1196309394",
     "listRule": "",
@@ -1479,6 +1622,26 @@
         "system": false,
         "type": "relation"
       },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
       {
         "autogeneratePattern": "",
         "hidden": false,
@@ -1581,26 +1744,6 @@
         "required": false,
         "system": false,
         "type": "editor"
-      },
-      {
-        "hidden": false,
-        "id": "autodate2990389176",
-        "name": "created",
-        "onCreate": true,
-        "onUpdate": false,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      },
-      {
-        "hidden": false,
-        "id": "autodate3332085495",
-        "name": "updated",
-        "onCreate": true,
-        "onUpdate": true,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
       }
     ],
     "indexes": [],
@@ -1891,6 +2034,48 @@
         "presentable": false,
         "system": false,
         "type": "autodate"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text2058414169",
+        "max": 0,
+        "min": 0,
+        "name": "visible",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "file4170105732",
+        "maxSelect": 1,
+        "maxSize": 0,
+        "mimeTypes": [],
+        "name": "sound",
+        "presentable": false,
+        "protected": false,
+        "required": false,
+        "system": false,
+        "thumbs": [],
+        "type": "file"
+      },
+      {
+        "hidden": false,
+        "id": "file2034676914",
+        "maxSelect": 1,
+        "maxSize": 0,
+        "mimeTypes": [],
+        "name": "cat_image",
+        "presentable": false,
+        "protected": false,
+        "required": false,
+        "system": false,
+        "thumbs": [],
+        "type": "file"
       }
     ],
     "indexes": [],
@@ -1987,11 +2172,11 @@
   },
   {
     "id": "pbc_1305841361",
-    "listRule": null,
+    "listRule": "",
-    "viewRule": null,
+    "viewRule": "",
-    "createRule": null,
+    "createRule": "",
-    "updateRule": null,
+    "updateRule": "",
-    "deleteRule": null,
+    "deleteRule": "",
     "name": "UserMetas",
     "type": "base",
     "fields": [
@@ -2680,6 +2865,138 @@
     ],
     "system": true
   },
+  {
+    "id": "pbc_1509025625",
+    "listRule": null,
+    "viewRule": null,
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "name": "billingAddress",
+    "type": "base",
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1400097126",
+        "max": 0,
+        "min": 0,
+        "name": "country",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text2744374011",
+        "max": 0,
+        "min": 0,
+        "name": "state",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text760939060",
+        "max": 0,
+        "min": 0,
+        "name": "city",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text4114525948",
+        "max": 0,
+        "min": 0,
+        "name": "zipCode",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3620973610",
+        "max": 0,
+        "min": 0,
+        "name": "line1",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1322974608",
+        "max": 0,
+        "min": 0,
+        "name": "line2",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "indexes": [],
+    "system": false
+  },
   {
     "id": "pbc_123408445",
     "listRule": "",

002_source/cms/src/paths.ts

@@ -140,6 +140,7 @@ export const paths = {
       list: '/dashboard/customers',
       create: '/dashboard/customers/create',
       details: (id: string) => `/dashboard/customers/${id}`,
+      edit: (id: string) => `/dashboard/customers/edit/${id}`,
     },
     eCommerce: '/dashboard/e-commerce',
     fileStorage: '/dashboard/file-storage',