update teachers,

002_source/cms/src/app/dashboard/teachers/edit/[customerId]/_PROMPT.md

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

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

@@ -6,7 +6,7 @@
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
-import { COL_TEACHERS } from '@/constants';
+import { COL_USER_METAS } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -49,23 +49,30 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const [currentPage, setCurrentPage] = React.useState<number>(0);
   //
   const [recordCount, setRecordCount] = React.useState<number>(0);
-  const [listOption, setListOption] = React.useState({});
+  const [listOption, setListOption] = React.useState({ filter: '' });
   const [listSort, setListSort] = React.useState({});
 
+  function isListOptionChanged() {
+    return JSON.stringify(listOption) === '{}';
+  }
   //
   const reloadRows = async (): Promise<void> => {
     try {
+      const listOptionTeacherOnly = isListOptionChanged()
+        ? { filter: `role = "teacher"` }
+        : { filter: [listOption.filter, `role = "teacher"`].join(' && ') };
+
       const models: ListResult<RecordModel> = await pb
-        .collection(COL_TEACHERS)
-        .getList(currentPage + 1, rowsPerPage, listOption);
+        .collection(COL_USER_METAS)
+        .getList(currentPage + 1, rowsPerPage, listOptionTeacherOnly);
       const { items, totalItems } = models;
-      const tempLessonTypes: Teacher[] = items.map((lt) => {
+      const tempTeacher: Teacher[] = items.map((lt) => {
         return { ...defaultTeacher, ...lt };
       });
 
-      setLessonCategoriesData(tempLessonTypes);
+      setLessonCategoriesData(tempTeacher);
       setRecordCount(totalItems);
-      setF(tempLessonTypes);
+      setF(tempTeacher);
     } catch (error) {
       logger.error(error);
       setShowError({

002_source/cms/src/app/dashboard/teachers/view/[id]/TitleCard.tsx

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

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

@@ -30,13 +30,13 @@ import BasicDetailCard from './BasicDetailCard';
 import TitleCard from './TitleCard';
 import { defaultTeacher } from '@/components/dashboard/teacher/_constants';
 import type { Teacher } from '@/components/dashboard/teacher/type.d';
-import { COL_TEACHERS } from '@/constants';
+import { COL_USER_METAS } from '@/constants';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation();
   const router = useRouter();
   //
-  const { customerId } = useParams<{ customerId: string }>();
+  const { id } = useParams<{ id: string }>();
   //
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
@@ -48,9 +48,9 @@ export default function Page(): React.JSX.Element {
   }
 
   React.useEffect(() => {
-    if (customerId) {
-      pb.collection(COL_TEACHERS)
-        .getOne(customerId)
+    if (id) {
+      pb.collection(COL_USER_METAS)
+        .getOne(id)
         .then((model: RecordModel) => {
           setShowLessonCategory({ ...defaultTeacher, ...model });
         })
@@ -64,7 +64,8 @@ export default function Page(): React.JSX.Element {
           setShowLoading(false);
         });
     }
-  }, [customerId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
   // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;