update mf build ok,

002_source/cms/_AI_WORKSPACE/001_guideline/001_GUIDELINE.md

@@ -0,0 +1,15 @@
+# guideline
+
+- please divide the problem into small parts
+- if you found youself cannot understand the problem, please stop and ask how to do
+- if you found youself cannot solve the problem, plesae stop and ask how to do
+- review the whole solution before you reply to user
+- if code syntax is already there, do follow (e.g. naming convention, syntax) the existing code
+
+- example for page can be found in `./src/app/_helloworld/page.tsx`
+- example for component can be found in `./src/components/_helloworld/index.tsx`
+
+- no need to explain the reason until you are told to do so
+- no need to show me the code change, at the end just simple summary in point form is ok
+
+Thanks

002_source/cms/_AI_WORKSPACE/DB_PROMPT.MD

@@ -0,0 +1,99 @@
+# 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
+
+---
+
+The software engineer will provide solutions,
+while QA engineer will feedback the opinion.
+
+this is now not in debug phase,
+so, no need to reply me what they are going on or their insight throught the prompt.
+just reply me "OK" when done
+
+---
+
+clone `GetVisibleCount.tsx` and `GetHiddenCount.tsx` from `LessonTypes` to `LessonCategories` and update it
+
+please draft `GetHiddenCount.tsx` for COL_LESSON_TYPES and `status = hidden`
+
+well done !, please proceed to another request
+
+working directory: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db`
+
+according information from `schema.json`, get the collection of `Students`
+
+pleaes clone the `tsx` files from `LessonTypes` and `LessonCategories` to `Students` and update the content
+
+when you draft coding, review file and append with `.tsx.draft`
+
+---
+
+- this is part of react typescript project, with pocketbase
+- `schema.dbml`, describe the collections(tables)
+- folder `LessonCategories`, the correct references
+- folder `LessonTypes`, the correct references
+- you can find the `schema.dbml` and schema information from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006`
+- do not read root directory, assume it is a fresh copy of nextjs project is ok
+
+## instruction
+
+- break the questions into smaller parts
+- review file append with `.draft`, see if the content aligned with the correct references
+- read and understand `dbml` file
+- lookup the every folder
+
+## tasks
+
+Thanks
+
+---
+
+---
+
+please revise
+
+please revise
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx` `interface LpCategory`
+
+to the collection `QuizLPCategories` align the dbml file in the previous prompt
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp_categories/_constants.tsx`
+
+to follow the type definition in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx`, the constant `defaultLpCategory`
+
+---
+
+the constants file (`@/constants`) was `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/constants.ts`
+
+please help to fix the `tsx` files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizMFCategories`,
+the `COL` constants is wrongly used, it should refer to `COL_QUIZ_MF_CATEGORIES`. thanks
+
+please update the `COL_XXXX` TO COL_MF_CATEGORIES

002_source/cms/_AI_WORKSPACE/_PROMPT.md

@@ -0,0 +1,10 @@
+Hi, i need your help.
+
+i am working on a react typescript project
+i will show you part of the code and it is located in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/mf`
+
+it is copied from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp`, i want you to help modifing from `lp` to `mf`, the corrosponding word is `lp -> listening practice` and `mf -> matching frenzy`,
+
+please help to update the `imports`, variables/constants, functions, classes
+
+thank you

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

@@ -18,6 +18,7 @@ import type { ListResult, RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
@@ -147,6 +148,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           </Card>
         </LpCategoriesSelectionProvider>
       </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
     </Box>
   );
 }

002_source/cms/src/app/dashboard/lp/questions/page.tsx

@@ -18,6 +18,7 @@ import type { ListResult, RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
@@ -202,7 +203,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           </Card>
         </LpQuestionsSelectionProvider>
       </Stack>
-      <pre>{JSON.stringify(f, null, 2)}</pre>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
     </Box>
   );
 }

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

@@ -18,6 +18,7 @@ import type { ListResult, RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
@@ -148,6 +149,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           </Card>
         </MfCategoriesSelectionProvider>
       </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
     </Box>
   );
 }

002_source/cms/src/app/dashboard/mf/questions/[cat_id]/page.tsx

@@ -23,7 +23,7 @@ import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultMfQuestion } from '@/components/dashboard/mf/questions/_constants.ts';
 import { Notifications } from '@/components/dashboard/mf/questions/notifications';
-import type { LpQuestion } from '@/components/dashboard/mf/questions/type';
+import type { MfQuestion } from '@/components/dashboard/mf/questions/type';
 import FormLoading from '@/components/loading';
 
 import BasicDetailCard from './BasicDetailCard';
@@ -39,10 +39,10 @@ export default function Page(): React.JSX.Element {
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
 
   //
-  const [showLessonQuestion, setShowLessonQuestion] = React.useState<LpQuestion>(defaultMfQuestion);
+  const [showLessonQuestion, setShowLessonQuestion] = React.useState<MfQuestion>(defaultMfQuestion);
 
   function handleEditClick() {
-    router.push(paths.dashboard.lp_questions.edit(showLessonQuestion.id));
+    router.push(paths.dashboard.mf_questions.edit(showLessonQuestion.id));
   }
 
   React.useEffect(() => {
@@ -89,7 +89,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_questions.list}
+              href={paths.dashboard.mf_questions.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >

002_source/cms/src/app/dashboard/mf/questions/create/page.tsx

@@ -34,7 +34,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_questions.list}
+              href={paths.dashboard.mf_questions.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >

002_source/cms/src/app/dashboard/mf/questions/edit/[cat_id]/page.tsx

@@ -34,7 +34,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.lp_questions.list}
+              href={paths.dashboard.mf_questions.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >

002_source/cms/src/app/dashboard/mf/questions/page.tsx

@@ -18,6 +18,7 @@ import type { ListResult, RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
@@ -202,7 +203,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           </Card>
         </MfQuestionsSelectionProvider>
       </Stack>
-      <pre>{JSON.stringify(f, null, 2)}</pre>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
     </Box>
   );
 }

002_source/cms/src/components/dashboard/mf/categories/lp-category-create-form.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useRouter } from 'next/navigation';
-import { COL_QUIZ_MF_CATEGORIES } from '@/constants';
+import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LoadingButton } from '@mui/lab';
 import { Avatar, Divider, MenuItem, Select } from '@mui/material';
@@ -101,7 +101,7 @@ export function MfCategoryCreateForm(): React.JSX.Element {
       };
 
       try {
-        const result = await pb.collection(COL_QUIZ_MF_CATEGORIES).create(payload);
+        const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).create(payload);
 
         logger.debug(result);
         toast.success(t('create.success'));

002_source/cms/src/components/dashboard/mf/questions/mf-questions-table.tsx

@@ -40,7 +40,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<MfQuest
           <Link
             color="inherit"
             component={RouterLink}
-            href={paths.dashboard.mf_categories.details(row.id)}
+            href={paths.dashboard.mf_questions.details(row.id)}
             sx={{ whiteSpace: 'nowrap' }}
             variant="subtitle2"
           >
@@ -163,7 +163,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<MfQuest
             //
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.mf_categories.details(row.id)}
+            href={paths.dashboard.mf_questions.details(row.id)}
           >
             <PencilSimpleIcon size={24} />
           </LoadingButton>