update,

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

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

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

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

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

@@ -25,7 +25,7 @@ import { CustomersPagination } from '@/components/dashboard/customer/customers-p
 import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
 import { CustomersTable } from '@/components/dashboard/customer/customers-table';
 import type { Customer, Filters } from '@/components/dashboard/customer/type.d';
-import { SampleCustomers } from './customers';
+import { SampleCustomers } from './SampleCustomers';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';