From 41cc82d54dcdff8136b7ff17dddcb46a2b732a9f Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Wed, 23 Apr 2025 02:02:47 +0800
Subject: [PATCH] update customers,

---
 .../cms/src/app/dashboard/customers/page.tsx  |  14 +-
 .../customer/confirm-delete-modal.tsx         |   5 +-
 .../customer/customer-create-form.tsx         | 227 ++++++++++++++----
 .../dashboard/customer/customer-edit-form.tsx |   5 +-
 .../components/dashboard/customer/type.d.tsx  |  19 +-
 002_source/cms/src/db/Customers/Create.tsx    |   7 +-
 6 files changed, 215 insertions(+), 62 deletions(-)

diff --git a/002_source/cms/src/app/dashboard/customers/page.tsx b/002_source/cms/src/app/dashboard/customers/page.tsx
index 1edb4a0..c016c5e 100644
--- a/002_source/cms/src/app/dashboard/customers/page.tsx
+++ b/002_source/cms/src/app/dashboard/customers/page.tsx
@@ -96,15 +96,13 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+      // reset page number as tab changes
+      setLastListOption(listOption);
+      setCurrentPage(0);
+      void reloadRows();
     } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
-        // reset page number as tab changes
-        setLastListOption(listOption);
-        setCurrentPage(0);
-        void reloadRows();
-      } else {
-        void reloadRows();
-      }
+      void reloadRows();
     }
   }, [currentPage, rowsPerPage, listOption]);
 
diff --git a/002_source/cms/src/components/dashboard/customer/confirm-delete-modal.tsx b/002_source/cms/src/components/dashboard/customer/confirm-delete-modal.tsx
index 4d5b267..ba9aad5 100644
--- a/002_source/cms/src/components/dashboard/customer/confirm-delete-modal.tsx
+++ b/002_source/cms/src/components/dashboard/customer/confirm-delete-modal.tsx
@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
+import { deleteCustomer } from '@/db/Customers/Delete';
 
 export default function ConfirmDeleteModal({
   open,
@@ -46,7 +47,9 @@ export default function ConfirmDeleteModal({
   function handleUserConfirmDelete(): void {
     if (idToDelete) {
       setIsDeleteing(true);
-      deleteQuizLPCategories(idToDelete)
+
+      // RULES: delete<CollectionName>
+      deleteCustomer(idToDelete)
         .then(() => {
           reloadRows();
           handleClose();
diff --git a/002_source/cms/src/components/dashboard/customer/customer-create-form.tsx b/002_source/cms/src/components/dashboard/customer/customer-create-form.tsx
index 7be8fc8..046f16e 100644
--- a/002_source/cms/src/components/dashboard/customer/customer-create-form.tsx
+++ b/002_source/cms/src/components/dashboard/customer/customer-create-form.tsx
@@ -29,6 +29,8 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { Option } from '@/components/core/option';
 import { toast } from '@/components/core/toaster';
+import { createCustomer } from '@/db/Customers/Create';
+import isDevelopment from '@/lib/check-is-development';
 
 function fileToBase64(file: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -67,12 +69,19 @@ type Values = zod.infer<typeof schema>;
 
 const defaultValues = {
   avatar: '',
-  name: '',
-  email: '',
-  phone: '',
+  name: 'new name',
+  email: '123@123.com',
+  phone: '91234567',
   company: '',
-  billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
-  taxId: '',
+  billingAddress: {
+    country: 'US',
+    state: '00000',
+    city: 'NY',
+    zipCode: '00000',
+    line1: 'test line 1',
+    line2: 'test line 2',
+  },
+  taxId: '12345',
   timezone: 'new_york',
   language: 'en',
   currency: 'USD',
@@ -90,14 +99,15 @@ export function CustomerCreateForm(): React.JSX.Element {
   } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
 
   const onSubmit = React.useCallback(
-    async (_: Values): Promise<void> => {
+    async (values: Values): Promise<void> => {
       try {
-        // Make API request
-        toast.success('Customer updated');
-        router.push(paths.dashboard.customers.details('1'));
+        // Use standard create method from db/Customers/Create
+        const record = await createCustomer(values);
+        toast.success('Customer created');
+        router.push(paths.dashboard.customers.details(record.id));
       } catch (err) {
         logger.error(err);
-        toast.error('Something went wrong!');
+        toast.error('Failed to create customer');
       }
     },
     [router]
@@ -122,12 +132,22 @@ export function CustomerCreateForm(): React.JSX.Element {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Card>
         <CardContent>
-          <Stack divider={<Divider />} spacing={4}>
+          <Stack
+            divider={<Divider />}
+            spacing={4}
+          >
             <Stack spacing={3}>
               <Typography variant="h6">Account information</Typography>
-              <Grid container spacing={3}>
+              <Grid
+                container
+                spacing={3}
+              >
                 <Grid xs={12}>
-                  <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    sx={{ alignItems: 'center' }}
+                  >
                     <Box
                       sx={{
                         border: '1px dashed var(--mui-palette-divider)',
@@ -151,7 +171,10 @@ export function CustomerCreateForm(): React.JSX.Element {
                         <CameraIcon fontSize="var(--Icon-fontSize)" />
                       </Avatar>
                     </Box>
-                    <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
+                    <Stack
+                      spacing={1}
+                      sx={{ alignItems: 'flex-start' }}
+                    >
                       <Typography variant="subtitle1">Avatar</Typography>
                       <Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
                       <Button
@@ -163,16 +186,27 @@ export function CustomerCreateForm(): React.JSX.Element {
                       >
                         Select
                       </Button>
-                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
                     </Stack>
                   </Stack>
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="name"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.name)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
                         <InputLabel required>Name</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
@@ -180,25 +214,40 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="email"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.email)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.email)}
+                        fullWidth
+                      >
                         <InputLabel required>Email address</InputLabel>
-                        <OutlinedInput {...field} type="email" />
+                        <OutlinedInput
+                          {...field}
+                          type="email"
+                        />
                         {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="phone"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.phone)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.phone)}
+                        fullWidth
+                      >
                         <InputLabel required>Phone number</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
@@ -206,12 +255,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="company"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.company)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.company)}
+                        fullWidth
+                      >
                         <InputLabel>Company</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
@@ -223,13 +278,22 @@ export function CustomerCreateForm(): React.JSX.Element {
             </Stack>
             <Stack spacing={3}>
               <Typography variant="h6">Billing information</Typography>
-              <Grid container spacing={3}>
-                <Grid md={6} xs={12}>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.country"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.country)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.country)}
+                        fullWidth
+                      >
                         <InputLabel required>Country</InputLabel>
                         <Select {...field}>
                           <Option value="">Choose a country</Option>
@@ -244,12 +308,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.state"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.state)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.state)}
+                        fullWidth
+                      >
                         <InputLabel required>State</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.state ? (
@@ -259,12 +329,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.city"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.city)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.city)}
+                        fullWidth
+                      >
                         <InputLabel required>City</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.city ? (
@@ -274,12 +350,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.zipCode"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.zipCode)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.zipCode)}
+                        fullWidth
+                      >
                         <InputLabel required>Zip code</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.zipCode ? (
@@ -289,12 +371,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.line1"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.billingAddress?.line1)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.line1)}
+                        fullWidth
+                      >
                         <InputLabel required>Address</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.billingAddress?.line1 ? (
@@ -304,14 +392,23 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="taxId"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.taxId)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.taxId)}
+                        fullWidth
+                      >
                         <InputLabel>Tax ID</InputLabel>
-                        <OutlinedInput {...field} placeholder="e.g EU372054390" />
+                        <OutlinedInput
+                          {...field}
+                          placeholder="e.g EU372054390"
+                        />
                         {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
                       </FormControl>
                     )}
@@ -321,17 +418,29 @@ export function CustomerCreateForm(): React.JSX.Element {
             </Stack>
             <Stack spacing={3}>
               <Typography variant="h6">Shipping information</Typography>
-              <FormControlLabel control={<Checkbox defaultChecked />} label="Same as billing address" />
+              <FormControlLabel
+                control={<Checkbox defaultChecked />}
+                label="Same as billing address"
+              />
             </Stack>
             <Stack spacing={3}>
               <Typography variant="h6">Additional information</Typography>
-              <Grid container spacing={3}>
-                <Grid md={6} xs={12}>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="timezone"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.timezone)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.timezone)}
+                        fullWidth
+                      >
                         <InputLabel required>Timezone</InputLabel>
                         <Select {...field}>
                           <Option value="">Select a timezone</Option>
@@ -344,12 +453,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="language"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.language)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.language)}
+                        fullWidth
+                      >
                         <InputLabel required>Language</InputLabel>
                         <Select {...field}>
                           <Option value="">Select a language</Option>
@@ -362,12 +477,18 @@ export function CustomerCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="currency"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.currency)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.currency)}
+                        fullWidth
+                      >
                         <InputLabel>Currency</InputLabel>
                         <Select {...field}>
                           <Option value="">Select a currency</Option>
@@ -385,14 +506,24 @@ export function CustomerCreateForm(): React.JSX.Element {
           </Stack>
         </CardContent>
         <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button color="secondary" component={RouterLink} href={paths.dashboard.customers.list}>
+          <Button
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.customers.list}
+          >
             Cancel
           </Button>
-          <Button type="submit" variant="contained">
+          <Button
+            type="submit"
+            variant="contained"
+          >
             Create customer
           </Button>
         </CardActions>
       </Card>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
+      </Box>
     </form>
   );
 }
diff --git a/002_source/cms/src/components/dashboard/customer/customer-edit-form.tsx b/002_source/cms/src/components/dashboard/customer/customer-edit-form.tsx
index e60adaf..8e9d211 100644
--- a/002_source/cms/src/components/dashboard/customer/customer-edit-form.tsx
+++ b/002_source/cms/src/components/dashboard/customer/customer-edit-form.tsx
@@ -46,7 +46,7 @@ import isDevelopment from '@/lib/check-is-development';
 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(15),
+  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),
@@ -596,6 +596,9 @@ export function CustomerEditForm(): React.JSX.Element {
           </LoadingButton>
         </CardActions>
       </Card>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
+      </Box>
     </form>
   );
 }
diff --git a/002_source/cms/src/components/dashboard/customer/type.d.tsx b/002_source/cms/src/components/dashboard/customer/type.d.tsx
index 85e31b4..a9c7cde 100644
--- a/002_source/cms/src/components/dashboard/customer/type.d.tsx
+++ b/002_source/cms/src/components/dashboard/customer/type.d.tsx
@@ -16,11 +16,24 @@ export interface Customer {
 
 export interface CreateFormProps {
   name: string;
-  avatar?: string;
   email: string;
   phone?: string;
-  quota: number;
-  status: 'pending' | 'active' | 'blocked';
+  company?: string;
+  billingAddress?: {
+    country: string;
+    state: string;
+    city: string;
+    zipCode: string;
+    line1: string;
+    line2?: string;
+  };
+  taxId?: string;
+  timezone: string;
+  language: string;
+  currency: string;
+  avatar?: string;
+  // quota?: number;
+  // status?: 'pending' | 'active' | 'blocked';
 }
 
 export interface EditFormProps {
diff --git a/002_source/cms/src/db/Customers/Create.tsx b/002_source/cms/src/db/Customers/Create.tsx
index 436eb72..957f577 100644
--- a/002_source/cms/src/db/Customers/Create.tsx
+++ b/002_source/cms/src/db/Customers/Create.tsx
@@ -1,6 +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) {
+export async function createCustomer(data: CreateFormProps): Promise<RecordModel> {
   return pb.collection(COL_CUSTOMERS).create(data);
 }