Update multiple markdown files with project guidelines, tasks, and database handling instructions

000_AI_WORKSPACE/software-engineer/_examples/001_clone.md

@@ -0,0 +1,25 @@
+this `tsx` file is clone from elsewhere, please understand, modify and update the content of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/teachers/view/[id]/page.tsx.draft` to handle `Teacher` record thanks, modify comments/variables/paths/functions name please
+
+---
+
+please review and update all tsx files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Users` to make it handle `user` record thanks
+
+---
+
+<!-- read and understand @/_AI_WORKSPACE/greetings/001_greetings.md  -->
+## clone source code from one type to another
+
+please understand, modify and update the content of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/teacher/_GUIDELINES.md` to handle `Teacher` record thanks,
+modify comments/variables/paths/functions name please
+
+---
+
+please help to update the tsx files inside folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/student` to handle the `student` record
+
+## steps
+
+- list all `tsx` files inside directory, remember the list
+- clone the original `<original>.tsx` files to `<original>.tsx.draft`
+- do all your modification within `<original>.tsx.draft` files, leave `original.tsx` unchange
+
+---

000_AI_WORKSPACE/software-engineer/_examples/003_update_dbml_from_schema.md

@@ -0,0 +1,33 @@
+Hi, i need your help.
+
+## task
+
+i am working on a `dbml` file
+i got a `schema.json` which is exported from pocketbase
+and i want to update it to my current `dbml` file (one way process for documentation usage)
+
+## Rules
+
+- the collection from `json` file started with `_` can be ignored. they are system collection and should not appear in `dbml`
+- one collection from `json` file mapped with one table in `dbml` file
+- the `presentable` field from `json` file should be ignored.
+- the `id` of collection in `json` file should be jod down in the comment of `dbml` file as an reference.
+- you can find the comments in `schema.dbml` contains `pb_xxx` and that is the reference to the table in `schema.json` file.
+
+## steps
+
+- list the collection
+
+## information
+
+json file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.json`
+dbml file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`
+
+## FAQ
+
+1. 对于json中有但dbml中没有的表，应该如何处理？ 添加为新表
+1. 是否需要保留dbml文件中现有的注释和关系定义？ 完全保留
+1. 字段类型映射是否有特殊规则？ 沒有
+1. please keep the existing comment
+
+thanks

000_AI_WORKSPACE/software-engineer/greetings/001_greetings.md

@@ -0,0 +1,11 @@
+# Greetings
+
+Hi,
+Imaging you are a software engineer and i will send you the guideline.
+plesae read it, prepare yourself and i will tell you the task afterwards
+
+please read and understand the markdown files in directory
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/000_AI_WORKSPACE/software_engineer/greetings`,
+it provides background information of project i want you to help.
+
+thanks

000_AI_WORKSPACE/software-engineer/greetings/002_guideline.md

@@ -0,0 +1,32 @@
+# guideline
+
+## principles
+
+- at any time, please keep your answer, solution, explaination simple and short (K.I.S.S. or 大道至簡)
+- 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
+- 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
+
+## highlighted project directories and their meanings
+
+- `_ignore_this_directory` please ignore this directory and any files inside it
+
+- `001_documentation` documentation of this project
+- `002_source` source code of this project
+- `002_source/cms` home of Context management system of this project
+  - use singular form for `src/components/dashboard` (e.g. `src/components/dashboard/student`)
+  - use plural form for `src/app/dashboard` (e.g. `src/app/dashboard/students`)
+- `002_source/ionic_mobile` home of mobile client of this project
+- `002_source/pocketbase` home of pocketbase home directory this project
+- `003_test` e2e test of this project (not yet implemented)
+- `004_marketing` marketing page of this project (not yet implemented)
+- `005_references` opensource refence of this project
+- `006_lab` my test (POC) of this project
+- `README.md` Readme of this project
+- `TODO.md` todo list of this project
+
+- if the directory contains `_GUIDELINES.md`, please read it before operation

000_AI_WORKSPACE/software-engineer/greetings/003_knowledgebase.md

@@ -0,0 +1,12 @@
+# Knowledgebase
+
+you can answer the question with below knowledge:
+
+## frameworks and stacks
+
+- if code syntax is already there, do follow (e.g. naming convention, syntax) the existing code
+- make use of MCP `Context7` when you troubleshoot the problem with below topics:
+  - [pocketbase javascript SDK](https://context7.com/pocketbase/js-sdk/llms.txt)
+  - [DBML](https://context7.com/holistics/dbml/llms.txt)
+  - [ionic framework](https://context7.com/ionic-team/ionic-framework/llms.txt)
+  - [nextjs 14 app router](https://context7.com/nextjsargentina/next.js-docs/llms.txt)

000_AI_WORKSPACE/software-engineer/greetings/010_FAQ.md

@@ -0,0 +1,22 @@
+# FAQ
+
+Q: where is `dbml` file ?
+A: dbml file located in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`
+
+Q: when file not found, do i need to search it in `_ignore_this_directory` ?
+A: No, you just stop there and voice out.
+
+Q: Shall I assume the component is already exist ?
+A: yes, you can assume that
+
+Q: Is `COL_USER_METAS` the collection for User related (e.g. `Teacher`, `Student`) collections?
+A: yes
+
+Q: Shall I verify `import` or `types` when do modification job ?
+A: No, you just replace the name of the function, variables etc is ok. no need to check for dependencies thanks.
+
+Q: how to list files with `.tsx.draft` extensions in `src/db/UserMetas` folder?
+A: using command like `find src/db/UserMetas -name "*.tsx.draft" -type f -ls` to list the files with `.tsx.draft` extendions only exist in `src/db/UserMetas`
+
+Q: when user want to modify `.tsx.draft` file, do i need to take care the `.tsx` file as well?
+A: No, no don't need to, user will handle the remaining modifications. please restrict your modification in the mentioned file or directory only.

000_AI_WORKSPACE/software-engineer/greetings/013_DB.md

@@ -0,0 +1,39 @@
+# database and schemas
+
+## getting started
+
+Imagine there is a:
+
+1. developer (provide the modification)
+2. QA engineer (provide the feedback, and testing)
+3. software engineer
+4. technical writer
+
+they will:
+
+- conclude and integrate the ideas from developer and QA engineer
+- make decision to modify the code accordingly.
+
+## project background and initial setup
+
+- **IMPORTANT**: No need to reply me what you are going on and your digest in this phase.
+  No need to show me your code plan
+  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` format stating the main database structure
+
+- `schema.json`
+  - read `<base_dir>/002_source/cms/src/db/schema.json`
+    this is the file of current pocketbase schema
+
+- look into the md files in folder `<base_dir>/002_source/ionic_mobile/_AI_WORKSPACE/001_guideline`
+
+- if the directory user provided contins `_GUIDELINES.md`, please read the file
+
+- read the files, remember and link up the ideas in file stated above,  i will tell them the task afterwards
+
+- please review at least 3 times after you modified the code

000_AI_WORKSPACE/testing-engineer/_examples/001_clone.md

@@ -0,0 +1,21 @@
+please review and update all tsx files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Users` to make it handle `user` record thanks
+
+---
+
+<!-- read and understand @/_AI_WORKSPACE/greetings/001_greetings.md  -->
+## clone source code from one type to another
+
+please understand, modify and update the content of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/teacher/_GUIDELINES.md` to handle `Teacher` record thanks,
+modify comments/variables/paths/functions name please
+
+---
+
+please help to update the tsx files inside folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/student` to handle the `student` record
+
+## steps
+
+- list all `tsx` files inside directory, remember the list
+- clone the original `<original>.tsx` files to `<original>.tsx.draft`
+- do all your modification within `<original>.tsx.draft` files, leave `original.tsx` unchange
+
+---

000_AI_WORKSPACE/testing-engineer/_examples/003_update_dbml_from_schema.md

@@ -0,0 +1,33 @@
+Hi, i need your help.
+
+## task
+
+i am working on a `dbml` file
+i got a `schema.json` which is exported from pocketbase
+and i want to update it to my current `dbml` file (one way process for documentation usage)
+
+## Rules
+
+- the collection from `json` file started with `_` can be ignored. they are system collection and should not appear in `dbml`
+- one collection from `json` file mapped with one table in `dbml` file
+- the `presentable` field from `json` file should be ignored.
+- the `id` of collection in `json` file should be jod down in the comment of `dbml` file as an reference.
+- you can find the comments in `schema.dbml` contains `pb_xxx` and that is the reference to the table in `schema.json` file.
+
+## steps
+
+- list the collection
+
+## information
+
+json file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.json`
+dbml file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`
+
+## FAQ
+
+1. 对于json中有但dbml中没有的表，应该如何处理？ 添加为新表
+1. 是否需要保留dbml文件中现有的注释和关系定义？ 完全保留
+1. 字段类型映射是否有特殊规则？ 沒有
+1. please keep the existing comment
+
+thanks

000_AI_WORKSPACE/testing-engineer/greetings/001_greetings.md

@@ -0,0 +1,8 @@
+Hi, i will send you the guideline,
+plesae read it, prepare yourself and i will tell you the task afterwards
+
+please read and understand the markdown files in directory
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/000_AI_WORKSPACE/_AI_WORKSPACE/greetings`,
+it provides background information of project i want you to help.
+
+thanks

000_AI_WORKSPACE/testing-engineer/greetings/002_guideline.md

@@ -0,0 +1,28 @@
+# guideline
+
+## principles
+
+- at any time, please keep your answer, solution, explaination simple and short (K.I.S.S. or 大道至簡)
+- 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
+- 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
+
+## highlighted project directories and their meanings
+
+- `_ignore_this_directory` please ignore this directory and any files inside it
+
+- `001_documentation` documentation of this project
+- `002_source` source code of this project
+- `002_source/cms` home of Context management system of this project
+- `002_source/ionic_mobile` home of mobile client of this project
+- `002_source/pocketbase` home of pocketbase home directory this project
+- `003_test` e2e test of this project (not yet implemented)
+- `004_marketing` marketing page of this project (not yet implemented)
+- `005_references` opensource refence of this project
+- `006_lab` my test (POC) of this project
+- `README.md` Readme of this project
+- `TODO.md` todo list of this project

000_AI_WORKSPACE/testing-engineer/greetings/003_knowledgebase.md

@@ -0,0 +1,12 @@
+# Knowledgebase
+
+you can answer the question with below knowledge:
+
+## frameworks and stacks
+
+- if code syntax is already there, do follow (e.g. naming convention, syntax) the existing code
+- make use of MCP `Context7` when you troubleshoot the problem with below topics:
+  - [pocketbase javascript SDK](https://context7.com/pocketbase/js-sdk/llms.txt)
+  - [DBML](https://context7.com/holistics/dbml/llms.txt)
+  - [ionic framework](https://context7.com/ionic-team/ionic-framework/llms.txt)
+  - [nextjs 14 app router](https://context7.com/nextjsargentina/next.js-docs/llms.txt)

000_AI_WORKSPACE/testing-engineer/greetings/010_FAQ.md

@@ -0,0 +1,7 @@
+# FAQ
+
+Q: where is `dbml` file ?
+A: dbml file located in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`
+
+Q: when file not found, do i need to search it in `_ignore_this_directory` ?
+A: No, you just stop there and voice out.

000_AI_WORKSPACE/testing-engineer/greetings/013_DB.md

@@ -0,0 +1,48 @@
+# database and schemas
+
+## getting started
+
+Imagine there is a:
+
+1. developer (provide the modification)
+2. QA engineer (provide the feedback, and testing)
+3. software engineer
+4. technical writer
+
+they will:
+
+- conclude and integrate the ideas from developer and QA engineer
+- make decision to modify the code accordingly.
+
+## project background and initial setup
+
+- **IMPORTANT**: No need to reply me what you are going on and your digest in this phase.
+  No need to show me your code plan
+  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` format stating the main database structure
+
+- `schema.json`
+  - read `<base_dir>/002_source/cms/src/db/schema.json`
+    this is the file of current pocketbase schema
+
+- look into the md files in folder `<base_dir>/002_source/ionic_mobile/_AI_WORKSPACE/001_guideline`
+
+- if the directory user provided contins `_GUIDELINES.md`, please read the file
+
+- read the files, remember and link up the ideas in file stated above,  i will tell them the task afterwards
+
+- please review at least 3 times after you modified the code
+
+## frameworks documentation and samples
+
+- react
+- ionic and capacitor
+- pocketbase
+- tanstack/react-query
+- vite
+- typescript

001_documentation/Requirements/REQ0001/index.md

@@ -24,5 +24,4 @@ mindmap
     Tools
       Pen and paper
       Mermaid
-
 ```

001_documentation/Requirements/REQ0002/index.md

@@ -1,9 +1,27 @@
 ---
-tags: mobile, lesson
+tags: time
 ---
 
-# lesson page documentation
+# time tracking
 
-it should have a lesson page
+T.B.A.
 
-![alt text](image.png)
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
+```
+
+---
+
+## TODOs of the project
+
+- [cms TODO](../../../002_source/cms/TODO.md)
+- [ionic TODO](../../../002_source/ionic_mobile/TODO.md)
+- [pocketbase TODO](../../../002_source/pocketbase/TODO.md)

001_documentation/Requirements/REQ0006/008_update_dbml_from_json.md

@@ -0,0 +1,20 @@
+# task
+
+update `dbml` from `schema.json`, for collection `billingAddress`
+
+## Background information
+
+1. please ignore `presentable` properties from `schema.json`, this is for pocketbase internal usage
+1. please ignore collections with `_` as its first character, this is for pocketbase internal usage
+1. just return the collection with `billingAddress` is ok, please ignore other collections
+
+## steps
+
+1. read file `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/schema.json`. this is the export from `pocketbase`.
+1. read file `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema.dbml`. this is file written in dbml format.
+1. currently the collection in `schama.json` is mapped to table in `schema.dbml`
+1. compare the `schema.json` and `schema.dbml`, remember the differences
+1. you may found some comment already exist in `schema.dbml`, please keep them
+1. while keeping `schema.json` content unchanged. write file to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006/schema_ai_draft.dbml` content based on `schema.json`.
+
+thanks.

001_documentation/Requirements/REQ0006/PROMPT_LessonCategories.MD

@@ -1,20 +0,0 @@
-
-# LessonCategories / LessonCategory
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listLessonCategories.ts to cover `LessonCategories`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistLessonCategories,`
-- `getListByFilterLessonCategories,`
-- `getFirstListItemLessonCategories,`
-- `getOneLessonCategory,`
-- `getListLessonCategoryById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_LessonTypes.MD

@@ -1,20 +0,0 @@
-
-# LessonTypes / LessonType
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listLessonTypes.ts to cover `LessonTypes`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistLessonTypes,`
-- `getListByFilterLessonTypes,`
-- `getFirstListItemLessonTypes,`
-- `getOneLessonType,`
-- `getListLessonTypeById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_QuizCategories.MD

@@ -1,20 +0,0 @@
-
-# QuizCategories / QuizCategory
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listQuizCategories.ts to cover `QuizCategories`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistQuizCategories,`
-- `getListByFilterQuizCategories,`
-- `getFirstListItemQuizCategories,`
-- `getOneQuizCategory,`
-- `getListQuizCategoryById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_QuizConnectives.MD

@@ -1,20 +0,0 @@
-
-# QuizConnectives / QuizConnective
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listQuizConnectives.ts to cover `QuizConnectives`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistQuizConnectives,`
-- `getListByFilterQuizConnectives,`
-- `getFirstListItemQuizConnectives,`
-- `getOneQuizConnective,`
-- `getListQuizConnectiveById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_QuizConnectivesCategories.MD

@@ -1,20 +0,0 @@
-
-# QuizConnectivesCategories / QuizConnectivesCategory
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listQuizConnectivesCategories.ts to cover `QuizConnectivesCategories`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistQuizConnectivesCategories,`
-- `getListByFilterQuizConnectivesCategories,`
-- `getFirstListItemQuizConnectivesCategories,`
-- `getOneQuizConnectivesCategory,`
-- `getListQuizConnectivesCategoryById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_QuizListenings.MD

@@ -1,20 +0,0 @@
-
-# QuizListenings / QuizListening
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listQuizListenings.ts to cover `QuizListenings`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistQuizListenings,`
-- `getListByFilterQuizListenings,`
-- `getFirstListItemQuizListenings,`
-- `getOneQuizListening,`
-- `getListQuizListeningById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_QuizMatchings.MD

@@ -1,20 +0,0 @@
-
-# QuizMatchings / QuizMatching
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listQuizMatchings.ts to cover `QuizMatchings`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistQuizMatchings,`
-- `getListByFilterQuizMatchings,`
-- `getFirstListItemQuizMatchings,`
-- `getOneQuizMatching,`
-- `getListQuizMatchingById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_UserMetas.MD

@@ -1,20 +0,0 @@
-
-# UserMetas / UserMeta
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listUserMetas.ts to cover `UserMetas`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistUserMetas,`
-- `getListByFilterUserMetas,`
-- `getFirstListItemUserMetas,`
-- `getOneUserMeta,`
-- `getListUserMetaById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_Users.MD

@@ -1,20 +0,0 @@
-
-# Users / User
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listUsers.ts to cover `Users`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistUsers,`
-- `getListByFilterUsers,`
-- `getFirstListItemUsers,`
-- `getOneUser,`
-- `getListUserById`
-
-thanks

001_documentation/Requirements/REQ0006/PROMPT_Vocabularies.MD

@@ -1,20 +0,0 @@
-
-# Vocabularies / Vocabulary
-
-Hi, using information from
-
-- @schema.dbml for schemas, fields and table names,
-- @listHelloworld.ts for skeleton for ts script
-- @listVocabularies.ts, @listUserMetas.ts, @listQuizListening.ts, @listQuisMatching.ts, @listQuizConnectivesCategories for reference
-
-extend @listVocabularies.ts to cover `Vocabularies`,
-draft `ts` code
-
-- `CRUD`
-- `getFulllistVocabularies,`
-- `getListByFilterVocabularies,`
-- `getFirstListItemVocabularies,`
-- `getOneVocabulary,`
-- `getListVocabularyById`
-
-thanks

001_documentation/Requirements/REQ0006/_GUIDELINE.md

@@ -0,0 +1,6 @@
+# GUIDELINES
+
+- `schema.dbml` means DB schema in `dbml` format
+- `schema.json` contains the exported DB schema from pocketbase
+- the `Collection ID: xxx` in `dbml` file contains the collection `id` mapping from `schema.json`
+- the `presentable` field from `json` file should be ignored.

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/convert.js

@@ -0,0 +1,86 @@
+//
+// # REQ0015:
+// ## PURPOSE:
+//
+// This is a script to convert `schema.json` exported from pocketbase to dbml formatted file `schema.dbml`
+//
+//
+
+const fs = require("fs");
+const path = require("path");
+// Load schema.json
+const schemaPath = path.join(process.cwd(), "schema.json");
+const schema = JSON.parse(fs.readFileSync(schemaPath, "utf8"));
+
+// Type mapping from PocketBase to DBML/SQL
+const typeMapping = {
+  text: "text",
+  number: "integer",
+  bool: "boolean",
+  email: "text",
+  url: "varchar",
+  date: "datetime",
+  select: "varchar",
+  json: "text",
+  file: "file",
+  password: "varchar",
+  relation: "integer", // Assuming relations are stored as integer IDs
+  autodate: "datetime",
+};
+
+function convertToDBML(schema) {
+  let dbml = "";
+  dbml = "// Generated at:  " + new Date().toISOString();
+  dbml = dbml + "\n\n\n";
+
+  let collectionIdToTableMapping = {};
+  for (const [idx, tableDef] of Object.entries(schema)) {
+    collectionIdToTableMapping[tableDef.id] = tableDef.name;
+  }
+
+  for (const [idx, tableDef] of Object.entries(schema)) {
+    console.log({ idx });
+    dbml += `// \n`;
+    dbml += `// collection id:   ${tableDef.id} \n`;
+    dbml += `// collection name: ${tableDef.name} \n`;
+    dbml += `// collection type: ${tableDef.type} \n`;
+    dbml += `Table ${tableDef.name} {\n`;
+
+    for (const field of tableDef.fields) {
+      // Get field type
+      let fieldType = typeMapping[field.type] || "text";
+
+      // Handle special cases
+      if (field.type === "number" && field.options?.max === 1) {
+        fieldType = "boolean";
+      }
+
+      // Build field definition
+      let line = `  ${field.name} ${fieldType}`;
+
+      // Add constraints
+      const constraints = [];
+      if (field.name === "id" || field.primary) constraints.push("pk");
+      if (field.required) constraints.push("not null");
+      if (constraints.length > 0) line += ` [${constraints.join(", ")}]`;
+
+      if (field.collectionId) {
+        line += ` [ref: > ${
+          collectionIdToTableMapping[field.collectionId]
+        }.id] // ${field.id}`;
+      }
+
+      dbml += `${line}\n`;
+      console.log({ line });
+    }
+
+    dbml += "}\n\n";
+  }
+
+  return dbml;
+}
+
+// Convert and save
+const dbmlOutput = convertToDBML(schema);
+fs.writeFileSync("schema.dbml", dbmlOutput);
+console.log("DBML file generated successfully!");

001_documentation/Requirements/REQ0006/gen_customer/gen_customer.mjs

@@ -0,0 +1,31 @@
+import { faker } from "@faker-js/faker";
+
+const getId = (id) => id.padStart(15, "0");
+
+const row_array = Array.from({ length: 10 }, (_, i) => [
+  getId(String(i + 1)),
+  faker.person.firstName(),
+  "",
+  faker.internet.email(),
+  faker.phone.number(),
+  faker.company.name(),
+  {
+    country: faker.location.country(),
+    state: faker.location.state(),
+    city: faker.location.city(),
+    zipCode: faker.location.zipCode(),
+    line1: faker.location.streetAddress(),
+    line2: faker.location.secondaryAddress(),
+  },
+  Math.floor(Math.random() * (100 - 0 + 1)) + 0,
+  faker.location.timeZone(),
+  ["en", "de", "es", "fr", "ja", "ko", "zh-CN"].sort(
+    () => Math.random() - 0.5
+  )[0],
+  faker.finance.currencyCode(),
+]);
+
+import fs from "fs";
+const filePath = "output.json";
+fs.writeFileSync(filePath, JSON.stringify(row_array, null, 2));
+console.log(`Wrote ${row_array.length} records to ${filePath}`);

001_documentation/Requirements/REQ0006/gen_customer/output.json

@@ -0,0 +1,202 @@
+[
+  [
+    "000000000000001",
+    "May",
+    "",
+    "June_Wintheiser33@hotmail.com",
+    "281-378-5900 x822",
+    "Green, Rempel and Hoeger",
+    {
+      "country": "Central African Republic",
+      "state": "Arizona",
+      "city": "Winfieldburgh",
+      "zipCode": "92017-8004",
+      "line1": "1838 Willa Freeway",
+      "line2": "Suite 307"
+    },
+    98,
+    "Asia/Urumqi",
+    "de",
+    "MUR"
+  ],
+  [
+    "000000000000002",
+    "Marilyne",
+    "",
+    "Carol_Blick@yahoo.com",
+    "(893) 919-2445 x193",
+    "White - Hessel",
+    {
+      "country": "Iraq",
+      "state": "Nevada",
+      "city": "Casa Grande",
+      "zipCode": "83831-3843",
+      "line1": "6984 Alberto Radial",
+      "line2": "Suite 154"
+    },
+    49,
+    "Africa/Tunis",
+    "zh-CN",
+    "CHF"
+  ],
+  [
+    "000000000000003",
+    "Jacklyn",
+    "",
+    "Tamara_Lynch11@yahoo.com",
+    "597-593-0144 x168",
+    "Rolfson LLC",
+    {
+      "country": "Grenada",
+      "state": "Georgia",
+      "city": "New Brodyfort",
+      "zipCode": "18887-7075",
+      "line1": "493 Pfannerstill Meadow",
+      "line2": "Apt. 358"
+    },
+    44,
+    "Asia/Manila",
+    "zh-CN",
+    "CDF"
+  ],
+  [
+    "000000000000004",
+    "Alana",
+    "",
+    "Ahmed_Willms@hotmail.com",
+    "401.212.0386 x31125",
+    "Friesen, Langworth and Thompson",
+    {
+      "country": "Australia",
+      "state": "North Carolina",
+      "city": "Fort Jerrell",
+      "zipCode": "14211",
+      "line1": "1763 West Street",
+      "line2": "Suite 699"
+    },
+    34,
+    "America/Boa_Vista",
+    "ja",
+    "KES"
+  ],
+  [
+    "000000000000005",
+    "Rocky",
+    "",
+    "Angela_Kuhic@gmail.com",
+    "653.964.0412",
+    "Hayes - Morar",
+    {
+      "country": "Reunion",
+      "state": "New York",
+      "city": "Kayton",
+      "zipCode": "82048-0645",
+      "line1": "636 Angel Junction",
+      "line2": "Apt. 361"
+    },
+    70,
+    "America/Grand_Turk",
+    "fr",
+    "PGK"
+  ],
+  [
+    "000000000000006",
+    "Carmela",
+    "",
+    "Larry94@hotmail.com",
+    "1-508-980-1889 x134",
+    "Goodwin - Brown",
+    {
+      "country": "Heard Island and McDonald Islands",
+      "state": "Wisconsin",
+      "city": "Jalenbury",
+      "zipCode": "75732-7013",
+      "line1": "669 Sven Trail",
+      "line2": "Suite 409"
+    },
+    48,
+    "Asia/Karachi",
+    "fr",
+    "AMD"
+  ],
+  [
+    "000000000000007",
+    "Lucious",
+    "",
+    "Lera67@yahoo.com",
+    "(684) 748-3653 x8745",
+    "Harvey - Kilback",
+    {
+      "country": "Israel",
+      "state": "Maryland",
+      "city": "East Allenmouth",
+      "zipCode": "21779",
+      "line1": "6070 W Grand Avenue",
+      "line2": "Suite 448"
+    },
+    83,
+    "America/St_Barthelemy",
+    "en",
+    "SBD"
+  ],
+  [
+    "000000000000008",
+    "Anika",
+    "",
+    "Shane.Moore@gmail.com",
+    "(996) 909-3575 x614",
+    "Donnelly, Larson and Stamm",
+    {
+      "country": "Canada",
+      "state": "Michigan",
+      "city": "Lafayette",
+      "zipCode": "90430-8775",
+      "line1": "430 Orland Place",
+      "line2": "Suite 891"
+    },
+    64,
+    "America/Toronto",
+    "fr",
+    "PKR"
+  ],
+  [
+    "000000000000009",
+    "Otto",
+    "",
+    "Emery_Wisozk@yahoo.com",
+    "1-602-251-7035 x9461",
+    "Kreiger - Boehm",
+    {
+      "country": "South Georgia and the South Sandwich Islands",
+      "state": "Colorado",
+      "city": "Lake Isaias",
+      "zipCode": "26025-5909",
+      "line1": "143 Kautzer Unions",
+      "line2": "Apt. 752"
+    },
+    98,
+    "Africa/Ndjamena",
+    "fr",
+    "JOD"
+  ],
+  [
+    "000000000000010",
+    "Cortez",
+    "",
+    "Jameson13@hotmail.com",
+    "1-660-472-1494",
+    "Parisian LLC",
+    {
+      "country": "Mali",
+      "state": "Illinois",
+      "city": "Stammburgh",
+      "zipCode": "92318",
+      "line1": "7669 Jude Drive",
+      "line2": "Apt. 594"
+    },
+    59,
+    "Africa/Lubumbashi",
+    "en",
+    "VND"
+  ]
+]

001_documentation/Requirements/REQ0006/gen_customer/package-lock.json

@@ -0,0 +1,33 @@
+{
+  "name": "gen_customer",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gen_customer",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@faker-js/faker": "^9.7.0"
+      }
+    },
+    "node_modules/@faker-js/faker": {
+      "version": "9.7.0",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-9.7.0.tgz",
+      "integrity": "sha512-aozo5vqjCmDoXLNUJarFZx2IN/GgGaogY4TMJ6so/WLZOWpSV7fvj2dmrV6sEAnUm1O7aCrhTibjpzeDFgNqbg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=9.0.0"
+      }
+    }
+  }
+}

001_documentation/Requirements/REQ0006/gen_customer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "gen_customer",
+  "version": "1.0.0",
+  "main": "gen_customer.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@faker-js/faker": "^9.7.0"
+  }
+}

001_documentation/Requirements/REQ0006/gen_customer/pnpm-lock.yaml

@@ -0,0 +1,23 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@faker-js/faker':
+        specifier: ^9.7.0
+        version: 9.7.0
+
+packages:
+
+  '@faker-js/faker@9.7.0':
+    resolution: {integrity: sha512-aozo5vqjCmDoXLNUJarFZx2IN/GgGaogY4TMJ6so/WLZOWpSV7fvj2dmrV6sEAnUm1O7aCrhTibjpzeDFgNqbg==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
+snapshots:
+
+  '@faker-js/faker@9.7.0': {}

001_documentation/Requirements/REQ0006/schema.dbml

@@ -1,137 +1,465 @@
-// LessonTypes stores different types of lessons
+// Generated at:  2025-05-08T05:00:49.862Z
-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
-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
+// collection id:   pbc_3142635823 
-  id int [pk, increment] // id field, increment
+// collection name: _superusers 
-  created datetime [default: `now()`] // record create time
+// collection type: auth 
-  updated datetime // record update time
+Table _superusers {
-}
+  id text [pk, not null]
-
+  password varchar [not null]
-Table Users {
+  tokenKey text [not null]
-  // system field
+  email text [not null]
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value field
-  email varchar
   emailVisibility boolean
   verified boolean
-  name varchar
+  created datetime
-  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]
 }
 
+// 
+// collection id:   _pb_users_auth_ 
+// collection name: users 
+// collection type: auth 
+Table users {
+  id text [pk, not null]
+  password varchar [not null]
+  tokenKey text [not null]
+  email text [not null]
+  emailVisibility boolean
+  verified boolean
+  name text
+  avatar file
+  created datetime
+  updated datetime
+  visible text
+}
+
+// 
+// collection id:   pbc_1430376151 
+// collection name: Categories 
+// collection type: base 
+Table Categories {
+  id text [pk, not null]
+  cat_name text
+  cat_image_url text
+  cat_image file
+  pos integer
+  lesson_id integer [ref: > LessonsTypes.id] // relation3455582614
+  remarks text
+  visible text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_108570809 
+// collection name: Customers 
+// collection type: base 
+Table Customers {
+  id text [pk, not null]
+  name text
+  email text
+  phone text
+  quota integer
+  status text
+  avatar_file file
+  user_id integer [ref: > users.id] // relation2809058197
+  billingAddress text
+  timezone text
+  language text
+  currency text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1196309394 
+// collection name: LessonsCategories 
+// collection type: base 
+Table LessonsCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image_url text
+  cat_image file
+  pos integer
+  lesson_id integer [ref: > LessonsTypes.id] // relation3455582614
+  description text
+  remarks text
+  visible text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2328411368 
+// collection name: LessonsTypes 
+// collection type: base 
+Table LessonsTypes {
+  id text [pk, not null]
+  name text
+  type text
+  pos integer
+  visible text
+  created datetime
+  updated datetime
+  field datetime
+}
+
+// 
+// collection id:   pbc_977978967 
+// collection name: Notifications 
+// collection type: base 
+Table Notifications {
+  id text [pk, not null]
+  read boolean
+  type text
+  author text
+  job text
+  description text
+  NOTI_ID text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_4061499106 
+// collection name: QuizCRCategories 
+// collection type: base 
+Table QuizCRCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  pos integer
+  init_answer text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_3141885671 
+// collection name: QuizCRQuestions 
+// collection type: base 
+Table QuizCRQuestions {
+  id text [pk, not null]
+  question_fh text
+  question_sh text
+  modal_ans text
+  cat_id integer [ref: > QuizCRCategories.id] // relation1827623476
+  options text
+  created datetime
+  updated datetime
+  init_answer text
+}
+
+// 
+// collection id:   pbc_3571292172 
+// collection name: QuizCategories 
+// collection type: base 
 Table QuizCategories {
-  // system field
+  id text [pk, not null]
-  id int [pk, increment]
+  cat_name text
-  created datetime [default: `now()`]
+  cat_image text
+  init_answer text
+  created datetime
   updated datetime
-
-  // value field
-  cat_name varchar // category name
-  cat_image varchar // category image
 }
 
-// stores all questions of matching frenzy
+// 
-Table QuizMatchings {
+// collection id:   pbc_96745150 
-  // system field
+// collection name: QuizConnectives 
-  id int [pk, increment] // id field, increment
+// collection type: base 
-  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 text [pk, not null]
-  id int [pk, increment] // id field, increment
+  question_fh text
-  created datetime [default: `now()`] // record create time
+  question_sh text
-  updated datetime // record update time
+  modal_ans text
-
+  cat_id integer [ref: > QuizConnectivesCategories.id] // relation3870140739
-  // value field
+  created datetime
-  question_fh varchar // first half
+  updated datetime
-  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
+// 
+// collection id:   pbc_342761728 
+// collection name: QuizConnectivesCategories 
+// collection type: base 
+Table QuizConnectivesCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_3639453778 
+// collection name: QuizLPCategories 
+// collection type: base 
+Table QuizLPCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  pos integer
+  init_answer text
+  created datetime
+  updated datetime
+  visible text
+  slug text
+  remarks text
+  description text
+}
+
+// 
+// collection id:   pbc_742947356 
+// collection name: QuizLPQuestions 
+// collection type: base 
+Table QuizLPQuestions {
+  id text [pk, not null]
+  word text
+  sound file
+  cat_id integer [ref: > QuizLPCategories.id] // relation3870140739
+  created datetime
+  updated datetime
+  cat_name text
+  cat_image file
+  pos integer
+  init_answer text
+  visible text
+  slug text
+  remarks text
+  description text
+}
+
+// 
+// collection id:   pbc_2511066072 
+// collection name: QuizListenings 
+// collection type: base 
+Table QuizListenings {
+  id text [pk, not null]
+  sound file
+  word text
+  cat_id integer [ref: > QuizCategories.id] // relation3870140739
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_84667061 
+// collection name: QuizMFCategories 
+// collection type: base 
+Table QuizMFCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  pos integer
+  init_answer text
+  created datetime
+  updated datetime
+  visible text
+}
+
+// 
+// collection id:   pbc_3346420851 
+// collection name: QuizMFQuestions 
+// collection type: base 
+Table QuizMFQuestions {
+  id text [pk, not null]
+  word text
+  word_c text
+  cat_id integer [ref: > QuizMFCategories.id] // relation3870140739
+  created datetime
+  updated datetime
+  visible text
+  sound file
+  cat_image file
+  init_answer text
+}
+
+// 
+// collection id:   pbc_2936646783 
+// collection name: QuizMatchings 
+// collection type: base 
+Table QuizMatchings {
+  id text [pk, not null]
+  word text
+  word_c text
+  cat_id integer [ref: > QuizCategories.id] // relation3870140739
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_491894781 
+// collection name: Students 
+// collection type: base 
+Table Students {
+  id text [pk, not null]
+  name text
+  email text
+  phone text
+  quota integer
+  status text
+  avatar_file file
+  user_id integer [ref: > users.id] // relation2809058197
+  billingAddress text
+  timezone text
+  language text
+  currency text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1413424569 
+// collection name: Teachers 
+// collection type: base 
+Table Teachers {
+  id text [pk, not null]
+  name text
+  email text
+  phone text
+  quota integer
+  status text
+  avatar_file file
+  user_id integer [ref: > users.id] // relation2809058197
+  billingAddress text
+  timezone text
+  language text
+  currency text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1305841361 
+// collection name: UserMetas 
+// collection type: base 
+Table UserMetas {
+  id text [pk, not null]
+  helloworld text
+  meta text
+  user_id integer [ref: > users.id] // relation2809058197
+  created datetime
+  updated datetime
+  status text
+  avatar file
+  role text
+  name text
+  email text
+  phone text
+  avatar_file file
+}
+
+// 
+// collection id:   pbc_1638686383 
+// collection name: Vocabularies 
+// collection type: base 
 Table Vocabularies {
-  // system field
+  id text [pk, not null]
-  id int [pk, increment] // unique identifier for the lesson
+  image file
-  created datetime [default: `now()`] // timestamp when the lesson was created
+  sound file
-  updated datetime // timestamp when the lesson was last updated
+  word text
-
+  word_c text
-  // value field
+  sample_e text
-  image varchar // URL to the image associated with the lesson
+  sample_c text
-  sound varchar // URL to the sound file associated with the lesson
+  cat_id integer [ref: > Categories.id] // relation3870140739
-  word varchar // The word in English
+  category text
-  word_c varchar // The word in Chinese
+  lesson_type_id integer [ref: > LessonsTypes.id] // relation808508980
-  sample_e varchar // Sample sentence in English using the word
+  created datetime
-  sample_c varchar // Sample sentence in Chinese using the word
+  updated datetime
-  cat_id integer [ref: > LessonCategories.id] // foreign key referring to LessonCategories.id
+  visible text
-  category varchar // The category to which the lesson belongs
+  type text
+}
+
+// 
+// collection id:   pbc_4275539003 
+// collection name: _authOrigins 
+// collection type: base 
+Table _authOrigins {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  fingerprint text [not null]
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2281828961 
+// collection name: _externalAuths 
+// collection type: base 
+Table _externalAuths {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  provider text [not null]
+  providerId text [not null]
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2279338944 
+// collection name: _mfas 
+// collection type: base 
+Table _mfas {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  method text [not null]
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1638494021 
+// collection name: _otps 
+// collection type: base 
+Table _otps {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  password varchar [not null]
+  sentTo text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1509025625 
+// collection name: billingAddress 
+// collection type: base 
+Table billingAddress {
+  id text [pk, not null]
+  country text
+  state text
+  city text
+  zipCode text
+  line1 text
+  line2 text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_123408445 
+// collection name: helloworlds 
+// collection type: base 
+Table helloworlds {
+  id text [pk, not null]
+  hello text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2109205374 
+// collection name: t1 
+// collection type: base 
+Table t1 {
+  id text [pk, not null]
+  hello text
+  created datetime
+  updated datetime
+  test_file file
 }
 

001_documentation/Requirements/REQ0013/index.md

@@ -0,0 +1,11 @@
+---
+tags: cms
+---
+
+# cms dashboard
+
+cms
+
+## files
+
+T.B.A.

001_documentation/Requirements/REQ0014/index.md

@@ -0,0 +1,11 @@
+---
+tags: mobile
+---
+
+# mobile client
+
+mobile
+
+## files
+
+T.B.A.

001_documentation/Requirements/REQ0015/convert.js

@@ -0,0 +1,86 @@
+//
+// # REQ0015:
+// ## PURPOSE:
+//
+// This is a script to convert `schema.json` exported from pocketbase to dbml formatted file `schema.dbml`
+//
+//
+
+const fs = require("fs");
+const path = require("path");
+// Load schema.json
+const schemaPath = path.join(process.cwd(), "schema.json");
+const schema = JSON.parse(fs.readFileSync(schemaPath, "utf8"));
+
+// Type mapping from PocketBase to DBML/SQL
+const typeMapping = {
+  text: "text",
+  number: "integer",
+  bool: "boolean",
+  email: "text",
+  url: "varchar",
+  date: "datetime",
+  select: "varchar",
+  json: "text",
+  file: "file",
+  password: "varchar",
+  relation: "integer", // Assuming relations are stored as integer IDs
+  autodate: "datetime",
+};
+
+function convertToDBML(schema) {
+  let dbml = "";
+  dbml = "// Generated at:  " + new Date().toISOString();
+  dbml = dbml + "\n\n\n";
+
+  let collectionIdToTableMapping = {};
+  for (const [idx, tableDef] of Object.entries(schema)) {
+    collectionIdToTableMapping[tableDef.id] = tableDef.name;
+  }
+
+  for (const [idx, tableDef] of Object.entries(schema)) {
+    console.log({ idx });
+    dbml += `// \n`;
+    dbml += `// collection id:   ${tableDef.id} \n`;
+    dbml += `// collection name: ${tableDef.name} \n`;
+    dbml += `// collection type: ${tableDef.type} \n`;
+    dbml += `Table ${tableDef.name} {\n`;
+
+    for (const field of tableDef.fields) {
+      // Get field type
+      let fieldType = typeMapping[field.type] || "text";
+
+      // Handle special cases
+      if (field.type === "number" && field.options?.max === 1) {
+        fieldType = "boolean";
+      }
+
+      // Build field definition
+      let line = `  ${field.name} ${fieldType}`;
+
+      // Add constraints
+      const constraints = [];
+      if (field.name === "id" || field.primary) constraints.push("pk");
+      if (field.required) constraints.push("not null");
+      if (constraints.length > 0) line += ` [${constraints.join(", ")}]`;
+
+      if (field.collectionId) {
+        line += ` [ref: > ${
+          collectionIdToTableMapping[field.collectionId]
+        }.id] // ${field.id}`;
+      }
+
+      dbml += `${line}\n`;
+      console.log({ line });
+    }
+
+    dbml += "}\n\n";
+  }
+
+  return dbml;
+}
+
+// Convert and save
+const dbmlOutput = convertToDBML(schema);
+fs.writeFileSync("schema.dbml", dbmlOutput);
+console.log("DBML file generated successfully!");

001_documentation/Requirements/REQ0015/index.md

@@ -0,0 +1,9 @@
+---
+tags: mobile, cms, db, schema
+---
+
+# pocketbase json schema to dbml converter
+
+## description
+
+to generate a `schema.dbml` form `schema.json` exported from pocketbase

001_documentation/Requirements/REQ0015/schema.dbml

@@ -0,0 +1,18 @@
+// Generated at:  2025-05-06T06:24:44.009Z
+
+
+// 
+// collection id:   pbc_3142635823 
+// collection name: helloworld 
+// collection type: auth 
+Table helloworld {
+  id text [pk, not null]
+  password varchar [not null]
+  tokenKey text [not null]
+  email text [not null]
+  emailVisibility boolean
+  verified boolean
+  created datetime
+  updated datetime
+}
+

001_documentation/Requirements/REQ0015/schema.json

@@ -0,0 +1,174 @@
+[
+  {
+    "id": "pbc_3142635823",
+    "listRule": null,
+    "viewRule": null,
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "name": "helloworld",
+    "type": "auth",
+    "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"
+      },
+      {
+        "cost": 0,
+        "hidden": true,
+        "id": "password901924565",
+        "max": 0,
+        "min": 8,
+        "name": "password",
+        "pattern": "",
+        "presentable": false,
+        "required": true,
+        "system": true,
+        "type": "password"
+      },
+      {
+        "autogeneratePattern": "[a-zA-Z0-9]{50}",
+        "hidden": true,
+        "id": "text2504183744",
+        "max": 60,
+        "min": 30,
+        "name": "tokenKey",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "exceptDomains": null,
+        "hidden": false,
+        "id": "email3885137012",
+        "name": "email",
+        "onlyDomains": null,
+        "presentable": false,
+        "required": true,
+        "system": true,
+        "type": "email"
+      },
+      {
+        "hidden": false,
+        "id": "bool1547992806",
+        "name": "emailVisibility",
+        "presentable": false,
+        "required": false,
+        "system": true,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "bool256245529",
+        "name": "verified",
+        "presentable": false,
+        "required": false,
+        "system": true,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": true,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": true,
+        "type": "autodate"
+      }
+    ],
+    "indexes": [
+      "CREATE UNIQUE INDEX `idx_tokenKey_pbc_3142635823` ON `_superusers` (`tokenKey`)",
+      "CREATE UNIQUE INDEX `idx_email_pbc_3142635823` ON `_superusers` (`email`) WHERE `email` != ''"
+    ],
+    "system": true,
+    "authRule": "",
+    "manageRule": null,
+    "authAlert": {
+      "enabled": true,
+      "emailTemplate": {
+        "subject": "Login from a new location",
+        "body": "<p>Hello,</p>\n<p>We noticed a login to your {APP_NAME} account from a new location.</p>\n<p>If this was you, you may disregard this email.</p>\n<p><strong>If this wasn't you, you should immediately change your {APP_NAME} account password to revoke access from all other locations.</strong></p>\n<p>\n  Thanks,<br/>\n  {APP_NAME} team\n</p>"
+      }
+    },
+    "oauth2": {
+      "mappedFields": {
+        "id": "",
+        "name": "",
+        "username": "",
+        "avatarURL": ""
+      },
+      "enabled": false
+    },
+    "passwordAuth": {
+      "enabled": true,
+      "identityFields": [
+        "email"
+      ]
+    },
+    "mfa": {
+      "enabled": false,
+      "duration": 1800,
+      "rule": ""
+    },
+    "otp": {
+      "enabled": false,
+      "duration": 180,
+      "length": 8,
+      "emailTemplate": {
+        "subject": "OTP for {APP_NAME}",
+        "body": "<p>Hello,</p>\n<p>Your one-time password is: <strong>{OTP}</strong></p>\n<p><i>If you didn't ask for the one-time password, you can ignore this email.</i></p>\n<p>\n  Thanks,<br/>\n  {APP_NAME} team\n</p>"
+      }
+    },
+    "authToken": {
+      "duration": 86400
+    },
+    "passwordResetToken": {
+      "duration": 1800
+    },
+    "emailChangeToken": {
+      "duration": 1800
+    },
+    "verificationToken": {
+      "duration": 259200
+    },
+    "fileToken": {
+      "duration": 180
+    },
+    "verificationTemplate": {
+      "subject": "Verify your {APP_NAME} email",
+      "body": "<p>Hello,</p>\n<p>Thank you for joining us at {APP_NAME}.</p>\n<p>Click on the button below to verify your email address.</p>\n<p>\n  <a class=\"btn\" href=\"{APP_URL}/_/#/auth/confirm-verification/{TOKEN}\" target=\"_blank\" rel=\"noopener\">Verify</a>\n</p>\n<p>\n  Thanks,<br/>\n  {APP_NAME} team\n</p>"
+    },
+    "resetPasswordTemplate": {
+      "subject": "Reset your {APP_NAME} password",
+      "body": "<p>Hello,</p>\n<p>Click on the button below to reset your password.</p>\n<p>\n  <a class=\"btn\" href=\"{APP_URL}/_/#/auth/confirm-password-reset/{TOKEN}\" target=\"_blank\" rel=\"noopener\">Reset password</a>\n</p>\n<p><i>If you didn't ask to reset your password, you can ignore this email.</i></p>\n<p>\n  Thanks,<br/>\n  {APP_NAME} team\n</p>"
+    },
+    "confirmEmailChangeTemplate": {
+      "subject": "Confirm your {APP_NAME} new email address",
+      "body": "<p>Hello,</p>\n<p>Click on the button below to confirm your new email address.</p>\n<p>\n  <a class=\"btn\" href=\"{APP_URL}/_/#/auth/confirm-email-change/{TOKEN}\" target=\"_blank\" rel=\"noopener\">Confirm new email</a>\n</p>\n<p><i>If you didn't ask to change your email address, you can ignore this email.</i></p>\n<p>\n  Thanks,<br/>\n  {APP_NAME} team\n</p>"
+    }
+  }
+]

001_documentation/Requirements/REQ0016/index.md

@@ -0,0 +1,33 @@
+---
+tags: cms, login-flow
+---
+
+# login flow
+
+## description
+
+```mermaid
+graph TD;
+  Start-->A;
+  A-->B;
+  B-->C;
+  B-->D;
+  D-->E;
+  E-->F;
+  C-->G;
+  G-->A
+
+  F-->End;
+
+  A[greeting, asking username and password]
+  B[check if username and password is valid]
+  C[pasword failed]
+  D[pasword ok]
+  E[login success]
+  F[redirect to '/dashboard']
+
+  G[prompt user wrong username and password]
+
+  Start((start));
+  End((end))
+```

001_documentation/Requirements/REQ0017/index.md

@@ -0,0 +1,9 @@
+---
+tags: mobile, lesson
+---
+
+# lesson page documentation
+
+it should have a lesson page
+
+![alt text](image.png)

001_documentation/Requirements/index.md

@@ -1,50 +1,21 @@
 # Requirements Index
 
-## REQ0001: project overview
+- [REQ0001: project overview](./REQ0001/index.md)
-
+- [REQ0002: time tracking](./REQ0002/index.md)
-[View Requirement](./REQ0001/index.md)
+- [REQ0003: quiz page documentation](./REQ0003/index.md)
-
+- [REQ0004: record page documentation](./REQ0004/index.md)
-## REQ0002: lesson page documentation
+- [REQ0005: settings page documentation](./REQ0005/index.md)
-
+- [REQ0006: task](./REQ0006/008_update_dbml_from_json.md)
-[View Requirement](./REQ0002/index.md)
+- [REQ0006: GUIDELINES](./REQ0006/_GUIDELINE.md)
-
+- [REQ0006: db schema design](./REQ0006/index.md)
-## REQ0003: quiz page documentation
+- [REQ0007: testing of mobile app home](./REQ0007/index.md)
-
+- [REQ0008: schema design](./REQ0008/index.md)
-[View Requirement](./REQ0003/index.md)
+- [REQ0009: loading screen](./REQ0009/index.md)
-
+- [REQ0010: user friendly error messages](./REQ0010/index.md)
-## REQ0004: record page documentation
+- [REQ0011: developer friendly error messages](./REQ0011/index.md)
-
+- [REQ0012: cms navigation system](./REQ0012/index.md)
-[View Requirement](./REQ0004/index.md)
+- [REQ0013: cms dashboard](./REQ0013/index.md)
-
+- [REQ0014: mobile client](./REQ0014/index.md)
-## REQ0005: settings page documentation
+- [REQ0015: pocketbase json schema to dbml converter](./REQ0015/index.md)
-
+- [REQ0016: login flow](./REQ0016/index.md)
-[View Requirement](./REQ0005/index.md)
+- [REQ0017: lesson page documentation](./REQ0017/index.md)
-
-## REQ0006: db schema design
-
-[View Requirement](./REQ0006/index.md)
-
-## REQ0007: testing of mobile app home
-
-[View Requirement](./REQ0007/index.md)
-
-## REQ0008: schema design
-
-[View Requirement](./REQ0008/index.md)
-
-## REQ0009: loading screen
-
-[View Requirement](./REQ0009/index.md)
-
-## REQ0010: user friendly error messages
-
-[View Requirement](./REQ0010/index.md)
-
-## REQ0011: developer friendly error messages
-
-[View Requirement](./REQ0011/index.md)
-
-## REQ0012: cms navigation system
-
-[View Requirement](./REQ0012/index.md)
-

001_documentation/Requirements/update.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -ex
+
+npx nodemon --delay 0.1 --ext md,js --ignore ./index.md --exec "node ./update_req_index.js"

001_documentation/Requirements/update_req_index.js

@@ -36,8 +36,8 @@ async function updateIndex() {
         const heading = extractH1(content);
 
         if (heading) {
-          indexContent += `## ${dir}: ${heading}\n\n`;
+          indexContent += `- [${dir}: ${heading}](./${dir}/${file})\n`;
-          indexContent += `[View Requirement](./${dir}/${file})\n\n`;
+          // indexContent += `[View Requirement](./${dir}/${file})\n\n`;
         }
       }
     }

002_source/cms/.eslintrc.js

@@ -1,7 +1,6 @@
 const { resolve } = require('node:path');
 
 const project = resolve(__dirname, 'tsconfig.json');
-
 module.exports = {
   root: true,
   extends: [
@@ -84,4 +83,13 @@ module.exports = {
     'react/jsx-sort-props': 'off',
   },
   ignorePatterns: ['**/*del', '**/*bak', '**/*copy.*', '**/*copy*.*'],
+  overrides: [
+    {
+      // override to ignore no-def for `describe`, `it`, and `expect`
+      files: ['*.test.ts', '*.test.tsx'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
 };

002_source/cms/.gitignore

@@ -1,3 +1,8 @@
+**/*del
+**/*bak
+**/*log
+**/*tmp
+
 .env
 .env.production
 
@@ -12,6 +17,7 @@
 **/*.log
 **/*.tmp
 **/*.del
+**/*.plan
 **/_archive
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

002_source/cms/.vscode/extensions.json

@@ -0,0 +1,33 @@
+{
+  "recommendations": [
+    "wmaurer.change-case",
+    "saoudrizwan.claude-dev",
+    "naumovs.color-highlight",
+    "bocovo.dbml-erd-visualizer",
+    "aflalo.dbml-formatter",
+    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-next",
+    "tttpob.list-aligner",
+    "bierner.markdown-mermaid",
+    "onatm.open-in-new-window",
+    "christian-kohler.path-intellisense",
+    "esbenp.prettier-vscode",
+    "humao.rest-client",
+    "ryu1kn.text-marker",
+    "gruntfuggly.todo-tree",
+    "bibhasdn.unique-lines",
+    "neptunedesign.vs-sequential-number",
+    "matt-meyers.vscode-dbml",
+    "codeium.codeium",
+    "tencent-cloud.coding-copilot",
+    "yzhang.markdown-all-in-one",
+    "stubedston.align-text",
+    "mads-hartmann.bash-ide-vscode",
+    "duynvu.dbml-language",
+    "mikestead.dotenv",
+    "bpruitt-goddard.mermaid-markdown-syntax-highlighting",
+    "davidanson.vscode-markdownlint",
+    "foxundermoon.shell-format"
+  ]
+}

002_source/cms/TODO.md

@@ -1,9 +1,12 @@
+# TODO
+
 need to fix local storage error
 
 page right (next page) button is not working
 in the middle of clone lesson type to lesson category
-  - [ ] listing page
+
-    - [ ] delete button on each row
+- [ ] listing page
-  - [ ] create page
+  - [ ] delete button on each row
-  - [ ] edit
+- [ ] create page
-  - [ ] delete
+- [ ] edit
+- [ ] delete

002_source/cms/_AI_GUIDELINE/index.md

@@ -1,11 +0,0 @@
-# guideline
-
-- please divide the problem into small parts
-- if you found you cannot understand the problem, please ask the question
-- if you found you cannot solve the problem, plesae stop and shout
-- review the whole solution before you reply to user
-
-- example for page can be found in `./src/app/_helloworld/page.tsx`
-- example for component can be found in `./src/components/_helloworld/index.tsx`
-
-Thanks.

002_source/cms/cms-letter_soup.code-workspace

@@ -0,0 +1,14 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "./../../001_documentation"
+		},
+		{
+			"path": "../../000_AI_WORKSPACE"
+		}
+	],
+	"settings": {}
+}

002_source/cms/next.config.mjs

@@ -2,7 +2,12 @@
 const config = {
   reactStrictMode: false,
   images: {
-    domains: ['example.com', '127.0.0.1', 'localhost'],
+    domains: [
+      //
+      'example.com',
+      '127.0.0.1',
+      'localhost',
+    ],
   },
 };
 

002_source/cms/package.json

@@ -4,16 +4,16 @@
   "version": "7.0.0",
   "private": true,
   "engines": {
-    "node": ">=18"
+    "node": "==22"
   },
   "scripts": {
     "dev": "next dev",
-    "build": "rm -rf .next && next build",
+    "build": "next build",
     "build:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 15 --exec \"pnpm run build\"",
     "start": "next start",
     "lint": "next lint --quiet",
     "lint:fix": "next lint --fix",
-    "lint:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 60 --exec \"pnpm run lint\"",
+    "lint:w": "pnpx nodemon --ext ts,tsx,json,mjs,js,jsx --delay 5 --exec \"pnpm run lint\"",
     "typecheck": "tsc --noEmit",
     "typecheck:w": "tsc --noEmit -w",
     "format:write": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
@@ -22,8 +22,8 @@
     "test": "jest --watch",
     "update_doc": "cd 001_documentation/Requirements && node update_req_index.js",
     "update_doc:w": "pnpx nodemon --ext md --exec \"pnpm run update_doc\"",
-    "update_repomix": "npx repomix",
+    "update_repomix": "node ./scripts/update_repomix.js",
-    "update_repomix:w": "pnpx nodemon --delay 3 --exec \"pnpx repomix\"",
+    "update_repomix:w": "pnpx nodemon --delay 3 --exec \"npm run update_repomix\"",
     "clean": "rm -rf node_modules && rm -rf .next"
   },
   "dependencies": {
@@ -91,6 +91,7 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
+    "@faker-js/faker": "^9.7.0",
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
@@ -116,4 +117,4 @@
       "protobufjs"
     ]
   }
-}
+}

002_source/cms/pnpm-lock.yaml

@@ -195,6 +195,9 @@ importers:
         specifier: 3.22.4
         version: 3.22.4
     devDependencies:
+      '@faker-js/faker':
+        specifier: ^9.7.0
+        version: 9.7.0
       '@ianvs/prettier-plugin-sort-imports':
         specifier: 4.1.1
         version: 4.1.1(prettier@3.2.5)
@@ -725,6 +728,10 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@faker-js/faker@9.7.0':
+    resolution: {integrity: sha512-aozo5vqjCmDoXLNUJarFZx2IN/GgGaogY4TMJ6so/WLZOWpSV7fvj2dmrV6sEAnUm1O7aCrhTibjpzeDFgNqbg==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
   '@fastify/busboy@2.1.0':
     resolution: {integrity: sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==}
     engines: {node: '>=14'}
@@ -6303,6 +6310,8 @@ snapshots:
 
   '@eslint/js@8.57.0': {}
 
+  '@faker-js/faker@9.7.0': {}
+
   '@fastify/busboy@2.1.0': {}
 
   '@firebase/analytics-compat@0.2.7(@firebase/app-compat@0.2.27)(@firebase/app@0.9.27)':

002_source/cms/prettier.config.mjs

@@ -28,7 +28,17 @@ const config = {
     '',
     '^[./]',
   ],
-  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  plugins: [
+    // '@ianvs/prettier-plugin-sort-imports'
+  ],
+  overrides: [
+    {
+      files: ['*.tsx'],
+      options: {
+        singleAttributePerLine: true,
+      },
+    },
+  ],
 };
 
 export default config;

002_source/cms/public/locales/de/teachers.json

@@ -0,0 +1,3 @@
+{
+  "back-to-list": "Teachers"
+}

002_source/cms/public/locales/de/translation.json

@@ -1,3 +1,6 @@
 {
-  "languageChanged": "Sprache geändert"
+  "languageChanged": "Sprache geändert",
+  "teachers": {
+    "back-to-list": "Lehrer"
+  }
 }

002_source/cms/public/locales/dev/PROMPT.md

@@ -1,22 +0,0 @@
-# PROMPT
-
-please update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev/translation.json`
-to add below translations, thanks.
-
-```
-dashboard.lessonCategories.edit.title
-dashboard.lessonCategories.edit.avatar
-dashboard.lessonCategories.edit.avatarRequirements
-dashboard.lessonCategories.edit.name
-dashboard.lessonCategories.edit.type
-
-```
----
-
-please read `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lesson_category/lesson-category-edit-form.tsx`
-and update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev/translation.json` the missing translations, thanks.
-
----
-
-please refactor `common.json` to smaller translation files, thanks
-e.g. `lessonTypes` -> `lesson_type`

002_source/cms/public/locales/dev/common.json

@@ -1,134 +1,4 @@
 {
-  "languageChanged": "語言已更改",
+  "hello": "world",
-  "type": "類型",
+  "teachers": "teachers"
-  "helloworld": "你好，世界",
+}
-  "Add": "新增項目",
-  "visible": "可視",
-  "hidden": "屏閉",
-  "Hidden": "屏閉",
-  "Newest": "最新",
-  "Oldest": "最舊",
-  "Lesson position": "位置",
-  "Lesson type": "種類",
-  "Type": "種類",
-  "Name": "名稱",
-  "Filter by name": "依名稱過濾",
-  "Filter by type": "依類型過濾",
-  "Actions": "動作",
-  "Created at": "建立時間",
-  "Updated at": "更新時間",
-  "Position": "位置",
-  "Visible": "顯示",
-  "Apply": "套用",
-  "Overview": "概觀",
-  "Dashboard": "儀表板",
-  "Tickets": "票券",
-  "Sign ups": "註冊",
-  "Open issues": "開啟問題",
-  "Closed issues": "關閉問題",
-  "increase": "增加",
-  "decrease": "減少",
-  "common.loading": "載入中",
-  "vs last month": "與上個月相比",
-  "Dashboards": "儀表板",
-  "App usage": "應用程式使用情況",
-  "Find your dream job": "找到你的夢想工作",
-  "Need help figuring things out?": "需要幫助嗎?",
-  "Search for jobs that match your skills and apply to them directly": "搜索符合你技能的工作,直接申請",
-  "Find answers to your questions and get in touch with our team.": "找到你的問題並與我們的團隊聯繫",
-  "Explore documentation": "探索文件",
-  "Learn how to get started with our product and make the most of it.": "學習如何開始使用我們的產品並充分利用它",
-  "Search Jobs": "搜索工作",
-  "Help Center": "幫助中心",
-  "Documentation": "文件",
-  "increase_in_app_usage_with": "使用者量增加",
-  "new_products_purchased": "新產品購買",
-  "Our subscriptions": "我們的訂閱",
-  "this_year": "今年",
-  "is_forecasted_to_increase_in_your_traffic_by_the_end_of_the_current_month": "今年預計增加你的流量",
-  "Jan": "一月",
-  "Feb": "二月",
-  "Mar": "三月",
-  "Apr": "四月",
-  "May": "五月",
-  "Jun": "六月",
-  "Jul": "七月",
-  "Aug": "八月",
-  "Sep": "九月",
-  "Oct": "十月",
-  "Nov": "十一月",
-  "Dec": "十二月",
-  "See all subscriptions": "查看所有訂閱",
-  "app_chat": "應用程式聊天",
-  "Upcoming events": "即將發生的事件",
-  "Based on the linked bank accounts": "基於連結的銀行帳戶",
-  "App limits": "應用程式限制",
-  "You have used {percentage} of your available spots.": "您已使用 {percentage} 的可用座位。升級計劃以建立更多專案",
-  "userMessagesUnread": "hello userMessagesUnread",
-  "Upgrade plan to create more projects": "升級計劃以建立更多專案",
-  "You have almost reached your limit": "您已接近您的限制",
-  "Upgrade plan": "升級計劃",
-  "Help center": "幫助中心",
-  "Jobs": "工作",
-  "go_to_chat": "前往聊天",
-  "See all events": "查看所有事件",
-  "You have used": "您已使用",
-  "of your available spots": "的可用座位",
-  "Paid": "已付款",
-  "Canceled": "已取消",
-  "Pending": "待付款",
-  "Expiring": "已過期",
-  "Refunded": "已退款",
-  "Total": "總計",
-  "Total paid": "已付款",
-  "Total cancelled": "已取消",
-  "Total pending": "待付款",
-  "year": "年",
-  "month": "月",
-  "week": "週",
-  "day": "日",
-  "hour": "小時",
-  "minute": "分鐘",
-  "second": "秒",
-  "ago": "前",
-  "remaining": "剩下",
-  "days": "天",
-  "hours": "小時",
-  "minutes": "分鐘",
-  "seconds": "秒",
-  "Clear filters": "清除篩選",
-  "Type information": "輸入資訊",
-  "Cancel": "取消",
-  "Delete": "刪除",
-  "All": "全部",
-  "categories": "課程分類",
-  "loading": "載入中",
-  "Notifications": "通知",
-  "Mark all as read": "標記所有為已讀",
-  "There are no notifications": "沒有通知",
-  "listenings": "聽講 (Listenings)",
-  "question_category": "問題分類",
-  "question_list": "問題",
-  "matching_frenzy": "配對 (Matching Frenzy)",
-  "connective_revision": "連接詞 (Connective Revision)",
-  "settings": "設定",
-  "students": "學生",
-  "dashboard.lessonCategories.title": "課程分類",
-  "dashboard.lessonCategorys.edit.name": "課程分類名稱",
-  "dashboard.lessonCategorys.edit.position": "課程分類順序",
-  "dashboard.lessonCategorys.edit.title": "編輯課程分類",
-  "dashboard.lessonCategorys.edit.visibleToUser": "顯示給使用者",
-  "dashboard.lessonCategorys.edit.visible": "顯示",
-  "dashboard.lessonCategorys.edit.hidden": "隱藏",
-  "dashboard.lessonCategorys.edit.cancelButton": "取消",
-  "dashboard.lessonCategorys.edit.updateButton": "更新",
-  "dashboard.lessonCategorys.list.title": "課堂種類",
-  "word-count": "字數",
-  "unable-to-process-request": "無法處理請求",
-  "detailed-error-information": "詳細錯誤資訊",
-  "error": {
-    "unable-to-process-request": "無法處理您的請求",
-    "detailed-error-information": "詳細錯誤資訊"
-  },
-  "name-is-required": "名稱為必填"
-}

002_source/cms/public/locales/dev/lesson_category.json

@@ -1,70 +0,0 @@
-{
-  "add": "新增課程分類",
-  "title": "課程分類",
-  "basic_info": "基本資訊",
-  "error": {
-    "unable-to-process-request": "無法處理您的請求",
-    "detailed-error-information": "詳細錯誤資訊"
-  },
-  "create": {
-    "title": "建立課程類型",
-    "createButton": "建立",
-    "cancelButton": "取消",
-    "message": "請輸入課程類型名稱",
-    "success": "課程類型建立成功",
-    "error": "課程類型建立失敗",
-    "typeInformation": "輸入課程類型資訊",
-    "avatar": "上傳課程類型圖片",
-    "avatar_select": "選擇圖片",
-    "avatarRequirements": "最小 400x400 像素，PNG 或 JPEG",
-    "select": "請選擇",
-    "name": "課程類型名稱",
-    "position": "課程類型順序",
-    "visibleToUser": "顯示給使用者",
-    "detail-information": "詳細資訊",
-    "description": "課程類型描述",
-    "remarks": "備註"
-  },
-  "edit": {
-    "avatar": "上傳圖片",
-    "avatarRequirements": "最小 400x400 像素，PNG 或 JPEG",
-    "cancelButton": "取消",
-    "error": "課程類型更新失敗",
-    "hidden": "隱藏",
-    "name": "課程分類名稱",
-    "position": "課程分類順序",
-    "select": "請選擇",
-    "success": "課程類型更新成功",
-    "title": "編輯課程分類",
-    "basic-info": "基本資訊",
-    "type": "類型",
-    "updateButton": "更新",
-    "visible": "顯示",
-    "visibleToUser": "顯示給使用者",
-    "write-something": "輸入一些內容"
-  },
-  "delete": {
-    "title": "刪除課程類型",
-    "message": "確定要刪除課程類型嗎？",
-    "success": "課程類型刪除成功",
-    "error": "課程類型刪除失敗",
-    "cancelButton": "取消",
-    "deleteButton": "刪除"
-  },
-  "list": {
-    "title": "課堂種類",
-    "message": "請選擇課程類型",
-    "empty": {
-      "title": "目前沒有課程類型",
-      "message": "請建立課程類型",
-      "create": "建立課程類型"
-    },
-    "error": "課程類型載入失敗",
-    "add": "新增課程分類"
-  },
-  "view": {
-    "basic-details": "基本資訊"
-  },
-  "Delete Lesson Type ?": "刪除課程類型?",
-  "Are you sure you want to delete lesson type ?": "確定要刪除課程類型嗎?"
-}

002_source/cms/public/locales/dev/lesson_type.json

@@ -1,65 +0,0 @@
-{
-  "add": "新增課程類型",
-  "title": "課程類型",
-  "type": "類型",
-  "error": {
-    "unable-to-process-request": "無法處理您的請求",
-    "detailed-error-information": "詳細錯誤資訊"
-  },
-  "create": {
-    "title": "建立課程類型",
-    "createButton": "建立",
-    "cancelButton": "取消",
-    "message": "請輸入課程類型名稱",
-    "success": "課程類型建立成功",
-    "error": "課程類型建立失敗",
-    "typeInformation": "輸入課程類型資訊",
-    "avatar": "上傳課程類型圖片",
-    "avatarRequirements": "上傳課程類型圖片",
-    "select": "請選擇",
-    "name": "課程類型名稱",
-    "position": "課程類型順序",
-    "visibleToUser": "顯示給使用者"
-  },
-  "edit": {
-    "avatar": "上傳課程類型圖片",
-    "avatarRequirements": "上傳課程類型圖片",
-    "cancelButton": "取消",
-    "error": "課程類型更新失敗",
-    "hidden": "隱藏",
-    "name": "課程類型名稱",
-    "position": "課程類型順序",
-    "select": "請選擇",
-    "success": "課程類型更新成功",
-    "title": "編輯課程類型",
-    "typeInformation": "輸入課程類型資訊",
-    "updateButton": "更新",
-    "visible": "顯示",
-    "visibleToUser": "顯示給使用者"
-  },
-  "delete": {
-    "title": "刪除課程類型",
-    "message": "確定要刪除課程類型嗎？",
-    "success": "課程類型刪除成功",
-    "error": "課程類型刪除失敗",
-    "cancelButton": "取消",
-    "deleteButton": "刪除"
-  },
-  "list": {
-    "title": "課程類型列表",
-    "message": "請選擇課程類型",
-    "empty": {
-      "title": "目前沒有課程類型",
-      "message": "請建立課程類型",
-      "create": "建立課程類型"
-    },
-    "error": "課程類型載入失敗"
-  },
-  "view": {
-    "basic-details": "基本資訊"
-  },
-  "Lesson Type": "課程類型",
-  "Lesson Types": "課程類型",
-  "Delete Lesson Type ?": "刪除課程類型?",
-  "Are you sure you want to delete lesson type ?": "確定要刪除課程類型嗎?"
-}

002_source/cms/public/locales/dev/teachers.json

@@ -0,0 +1,3 @@
+{
+  "back-to-list": "Teachers"
+}

002_source/cms/public/locales/dev/translation.json

@@ -1,195 +0,0 @@
-{
-  "languageChanged": "語言已更改",
-  "type": "類型",
-  "helloworld": "你好，世界",
-  "Add": "新增項目",
-  "visible": "可視",
-  "hidden": "屏閉",
-  "Hidden": "屏閉",
-  "Newest": "最新",
-  "Oldest": "最舊",
-  "Lesson position": "位置",
-  "Lesson type": "種類",
-  "Type": "種類",
-  "Name": "名稱",
-  "Filter by name": "依名稱過濾",
-  "Filter by type": "依類型過濾",
-  "dashboard.lessonTypes.add": "新增課程類型",
-  "dashboard.lessonTypes.title": "課程類型",
-  "dashboard.lessonTypes.type": "類型",
-  "dashboard.lessonTypes.create.title": "建立課程類型",
-  "dashboard.lessonTypes.create.createButton": "建立",
-  "dashboard.lessonTypes.create.cancelButton": "取消",
-  "dashboard.lessonTypes.edit.title": "編輯課程類型",
-  "Actions": "動作",
-  "Created at": "建立時間",
-  "Updated at": "更新時間",
-  "dashboard.lessonTypes.edit": "編輯課程類型",
-  "dashboard.lessonTypes.delete": "刪除課程類型",
-  "dashboard.lessonTypes.delete.title": "刪除課程類型",
-  "dashboard.lessonTypes.delete.message": "確定要刪除課程類型嗎？",
-  "Lesson Type": "課程類型",
-  "dashboard.lessonTypes.create": "建立課程類型",
-  "dashboard.lessonTypes.create.message": "請輸入課程類型名稱",
-  "dashboard.lessonTypes.create.success": "課程類型建立成功",
-  "dashboard.lessonTypes.create.error": "課程類型建立失敗",
-  "dashboard.lessonTypes.edit.success": "課程類型更新成功",
-  "dashboard.lessonTypes.edit.error": "課程類型更新失敗",
-  "dashboard.lessonTypes.delete.success": "課程類型刪除成功",
-  "dashboard.lessonTypes.delete.error": "課程類型刪除失敗",
-  "dashboard.lessonTypes.list": "課程類型列表",
-  "dashboard.lessonTypes.list.title": "課程類型列表",
-  "dashboard.lessonTypes.list.message": "請選擇課程類型",
-  "dashboard.lessonTypes.list.empty": "目前沒有課程類型",
-  "dashboard.lessonTypes.list.empty.title": "目前沒有課程類型",
-  "dashboard.lessonTypes.list.empty.message": "請建立課程類型",
-  "dashboard.lessonTypes.list.empty.create": "建立課程類型",
-  "Lesson Name": "課程名稱",
-  "dashboard.lessonTypes.list.empty.create.title": "建立課程類型",
-  "dashboard.lessonTypes.list.empty.create.message": "請輸入課程名稱",
-  "dashboard.lessonTypes.list.empty.create.success": "課程建立成功",
-  "dashboard.lessonTypes.list.empty.create.error": "課程建立失敗",
-  "dashboard.lessonTypes.list.empty.create.name": "課程名稱",
-  "dashboard.lessonTypes.list.empty.create.type": "課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.placeholder": "請選擇課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.title": "課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.message": "請選擇課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.empty": "目前沒有課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.empty.title": "目前沒有課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.empty.message": "請建立課程類型",
-  "dashboard.lessonTypes.list.empty.create.type.empty.create": "建立課程類型",
-  "Position": "位置",
-  "Visible": "顯示",
-  "Lesson Types": "課程類型",
-  "Apply": "套用",
-  "Overview": "概觀",
-  "Dashboard": "儀表板",
-  "Tickets": "票券",
-  "Sign ups": "註冊",
-  "Open issues": "開啟問題",
-  "Closed issues": "關閉問題",
-  "increase": "增加",
-  "decrease": "減少",
-  "common.loading": "載入中",
-  "vs last month": "與上個月相比",
-  "Dashboards": "儀表板",
-  "App usage": "應用程式使用情況",
-  "Find your dream job": "找到你的夢想工作",
-  "Need help figuring things out?": "需要幫助嗎?",
-  "Search for jobs that match your skills and apply to them directly": "搜索符合你技能的工作,直接申請",
-  "Find answers to your questions and get in touch with our team.": "找到你的問題並與我們的團隊聯繫",
-  "Explore documentation": "探索文件",
-  "Learn how to get started with our product and make the most of it.": "學習如何開始使用我們的產品並充分利用它",
-  "Search Jobs": "搜索工作",
-  "Help Center": "幫助中心",
-  "Documentation": "文件",
-  "increase_in_app_usage_with": "使用者量增加",
-  "new_products_purchased": "新產品購買",
-  "Our subscriptions": "我們的訂閱",
-  "this_year": "今年",
-  "is_forecasted_to_increase_in_your_traffic_by_the_end_of_the_current_month": "今年預計增加你的流量",
-  "Jan": "一月",
-  "Feb": "二月",
-  "Mar": "三月",
-  "Apr": "四月",
-  "May": "五月",
-  "Jun": "六月",
-  "Jul": "七月",
-  "Aug": "八月",
-  "Sep": "九月",
-  "Oct": "十月",
-  "Nov": "十一月",
-  "Dec": "十二月",
-  "See all subscriptions": "查看所有訂閱",
-  "app_chat": "應用程式聊天",
-  "Upcoming events": "即將發生的事件",
-  "Based on the linked bank accounts": "基於連結的銀行帳戶",
-  "App limits": "應用程式限制",
-  "You have used {percentage} of your available spots.": "您已使用 {percentage} 的可用座位。升級計劃以建立更多專案",
-  "userMessagesUnread": "hello userMessagesUnread",
-  "Upgrade plan to create more projects": "升級計劃以建立更多專案",
-  "You have almost reached your limit": "您已接近您的限制",
-  "Upgrade plan": "升級計劃",
-  "Help center": "幫助中心",
-  "Jobs": "工作",
-  "go_to_chat": "前往聊天",
-  "See all events": "查看所有事件",
-  "You have used": "您已使用",
-  "of your available spots": "的可用座位",
-  "Paid": "已付款",
-  "Canceled": "已取消",
-  "Pending": "待付款",
-  "Expiring": "已過期",
-  "Refunded": "已退款",
-  "Total": "總計",
-  "Total paid": "已付款",
-  "Total cancelled": "已取消",
-  "Total pending": "待付款",
-  "year": "年",
-  "month": "月",
-  "week": "週",
-  "day": "日",
-  "hour": "小時",
-  "minute": "分鐘",
-  "second": "秒",
-  "ago": "前",
-  "remaining": "剩下",
-  "days": "天",
-  "hours": "小時",
-  "minutes": "分鐘",
-  "seconds": "秒",
-  "Clear filters": "清除篩選",
-  "Type information": "輸入資訊",
-  "dashboard.lessonTypes.create.typeInformation": "輸入課程類型資訊",
-  "dashboard.lessonTypes.create.avatar": "上傳課程類型圖片",
-  "dashboard.lessonTypes.create.avatarRequirements": "上傳課程類型圖片",
-  "dashboard.lessonTypes.create.select": "請選擇",
-  "dashboard.lessonTypes.create.name": "課程類型名稱",
-  "dashboard.lessonTypes.create.type": "課程類型",
-  "dashboard.lessonTypes.create.position": "課程類型順序",
-  "dashboard.lessonTypes.create.visibleToUser": "顯示給使用者",
-  "dashboard.lessonTypes.edit.typeInformation": "輸入課程類型資訊",
-  "dashboard.lessonTypes.edit.avatar": "上傳課程類型圖片",
-  "dashboard.lessonTypes.edit.avatarRequirements": "上傳課程類型圖片",
-  "dashboard.lessonTypes.edit.select": "請選擇",
-  "dashboard.lessonTypes.edit.name": "課程類型名稱",
-  "dashboard.lessonTypes.edit.type": "課程類型",
-  "dashboard.lessonTypes.edit.position": "課程類型順序",
-  "dashboard.lessonTypes.edit.visibleToUser": "顯示給使用者",
-  "dashboard.lessonTypes.edit.visible": "顯示",
-  "dashboard.lessonTypes.edit.hidden": "隱藏",
-  "dashboard.lessonTypes.edit.cancelButton": "取消",
-  "dashboard.lessonTypes.edit.updateButton": "更新",
-  "Delete Lesson Type ?": "刪除課程類型?",
-  "Are you sure you want to delete lesson type ?": "確定要刪除課程類型嗎?",
-  "Cancel": "取消",
-  "Delete": "刪除",
-  "All": "全部",
-  "categories": "課程分類",
-  "loading": "載入中",
-  "Notifications": "通知",
-  "Mark all as read": "標記所有為已讀",
-  "There are no notifications": "沒有通知",
-  "listenings": "聽講 (Listenings)",
-  "question_category": "問題分類",
-  "question_list": "問題",
-  "matching_frenzy": "配對 (Matching Frenzy)",
-  "connective_revision": "連接詞 (Connective Revision)",
-  "settings": "設定",
-  "students": "學生",
-  "dashboard.lessonCategories.add": "新增課程分類",
-  "dashboard.lessonCategories.title": "課程分類",
-  "dashboard.lessonCategorys.edit.name": "課程分類名稱",
-  "dashboard.lessonCategorys.edit.position": "課程分類順序",
-  "dashboard.lessonCategorys.edit.title": "編輯課程分類",
-  "dashboard.lessonCategorys.edit.visibleToUser": "顯示給使用者",
-  "dashboard.lessonCategorys.edit.visible": "顯示",
-  "dashboard.lessonCategorys.edit.hidden": "隱藏",
-  "dashboard.lessonCategorys.edit.cancelButton": "取消",
-  "dashboard.lessonCategorys.edit.updateButton": "更新",
-  "dashboard.lessonCategorys.list.title": "課堂種類",
-  "word-count": "字數",
-  "dashboard.lessonTypes.list.error": "課程類型載入失敗",
-  "unable-to-process-request": "無法處理請求",
-  "detailed-error-information": "詳細錯誤資訊"
-}

002_source/cms/public/locales/en/teachers.json

@@ -0,0 +1,3 @@
+{
+  "back-to-list": "Teachers"
+}

002_source/cms/public/locales/en/translation.json

@@ -1,3 +1,7 @@
 {
-  "languageChanged": "Language changed"
+  "languageChanged": "Language changed",
+  "teachers": {
+    "nav-title": "teachers",
+    "back-to-list": "Teachers"
+  }
 }

002_source/cms/public/locales/es/teachers.json

@@ -0,0 +1,3 @@
+{
+  "back-to-list": "Teachers"
+}

002_source/cms/public/locales/es/translation.json

@@ -1,3 +1,6 @@
 {
-  "languageChanged": "Idioma cambiado"
+  "languageChanged": "Idioma cambiado",
+  "teachers": {
+    "back-to-list": "Profesores"
+  }
 }

002_source/cms/scripts/002_typecheck_w.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+rm -rf tsconfig.tsbuildinfo
+reset
+pnpm run typecheck:w

002_source/cms/scripts/003_build_w.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+reset
+rm -rf .next
+pnpm run build

002_source/cms/scripts/004_dev.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -ex
+
+pnpm run dev

002_source/cms/scripts/005_update_repomix.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+node ./scripts/update_repomix.js
+
+echo "done"

002_source/cms/scripts/006_test.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -ex
+
+node ./scripts/update_repomix.js
+
+echo "done"

002_source/cms/scripts/999_express_commit.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -ex
+
+git add src
+git commit -m'update,'
+
+echo "done"

002_source/cms/scripts/build_w.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-
-npx nodemon --ext tsx,ts --exec "reset && pnpm run build"

002_source/cms/scripts/clean.sh

@@ -1,19 +1,23 @@
 #!/usr/bin/env bash
 
-set -ex
+set -x
 
 # ls **/.next
 # ls **/.pnpm
 # ls **/node_modules
+ls **/*.bak
+ls **/*draft
+ls **/*.del
+ls **/*.plan
 ls **/*Zone*
 
-set -e
+# set -e
 
-read -p "Press [Enter] key to clean directories..."
+# read -p "Press [Enter] key to clean directories..."
 
-# rm -rf **/.next
+# # rm -rf **/.next
-# rm -rf **/.pnpm
+# # rm -rf **/.pnpm
-# rm -rf **/node_modules
+# # rm -rf **/node_modules
-rm -rf **/*Zone*
+# rm -rf **/*Zone*
 
 echo "clean done"

002_source/cms/scripts/update_repomix.js

@@ -0,0 +1,39 @@
+const exec = require('child_process').exec;
+
+let directories = [
+  //
+  // './src/db',
+  // './src/app/dashboard/lp',
+  // './src/app/dashboard/mf',
+  // './src/app/dashboard/cr',
+  // './src/components/dashboard/lp',
+  // './src/components/dashboard/mf',
+  // './src/components/dashboard/cr',
+  // './src/app/dashboard/Sample',
+  './src/components/dashboard/customer',
+].map((directory) => {
+  return `cd ${directory} && pnpx repomix -c /home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/repomix.config.json`;
+});
+
+Promise.all(
+  directories.map(
+    (directory) =>
+      new Promise((resolve, reject) => {
+        exec(directory, (error, stdout, stderr) => {
+          if (error) {
+            reject(error);
+          } else {
+            console.log(stdout);
+            resolve();
+          }
+        });
+      })
+  )
+)
+  .then(() => {
+    console.log('done');
+  })
+  .catch((error) => {
+    console.error(error);
+    // process.exit(1);
+  });

002_source/cms/src/__tests__/__snapshots__/snapshot.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders homepage unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  >
+    hello world!
+     
+    <div
+      class="MuiBox-root css-0"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1kivl2a-MuiTypography-root"
+      >
+        inner component
+      </p>
+      <div
+        class="MuiListItemIcon-root css-cveggr-MuiListItemIcon-root"
+      />
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 256 256"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

002_source/cms/src/__tests__/app/_helloworld/page.test.tsx

@@ -0,0 +1,21 @@
+/// <reference types="jest" />
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Page from '@/app/_helloworld/page';
+
+// Mock the translation hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe('Page', () => {
+  it('renders a heading', () => {
+    render(<Page hello={'world'} />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

002_source/cms/src/__tests__/snapshot.js

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+
+// CUT = Component Under Test
+import CUT from '../components/_helloworld';
+
+it('renders homepage unchanged', () => {
+  const { container } = render(<CUT />);
+  expect(container).toMatchSnapshot();
+});

002_source/cms/src/app/dashboard/Sample/AddressCard/SampleAddresses.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { Address } from '@/types/Address';
+
+export const SampleAddresses: Address[] = [
+  {
+    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',
+  },
+];

002_source/cms/src/app/dashboard/Sample/AddressCard/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Grid from '@mui/material/Unstable_Grid2';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';
+
+import { SampleAddresses } from './SampleAddresses';
+
+export default function SampleAddressCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <Button
+            color="secondary"
+            startIcon={<PlusIcon />}
+          >
+            {t('list.add')}
+          </Button>
+        }
+        avatar={
+          <Avatar>
+            <HouseIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.shipping-addresses')}
+      />
+      <CardContent>
+        <Grid
+          container
+          spacing={3}
+        >
+          {(SampleAddresses satisfies Address[]).map((address) => (
+            <Grid
+              key={address.id}
+              md={6}
+              xs={12}
+            >
+              <ShippingAddress address={address} />
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+}

002_source/cms/src/app/dashboard/Sample/BasicDetailCard/index.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+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 LinearProgress from '@mui/material/LinearProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+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';
+
+export default function BasicDetailCard({
+  lpCatId,
+  handleEditClick,
+}: {
+  lpCatId: string;
+  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="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>
+  );
+}

002_source/cms/src/app/dashboard/Sample/Helloworld.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+
+function Page(): React.JSX.Element {
+  React.useLayoutEffect(() => {
+    console.log('helloworld');
+  }, []);
+
+  return <>helloworld</>;
+}
+
+export default Page;

002_source/cms/src/app/dashboard/Sample/Notifications/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { dayjs } from '@/lib/dayjs';
+
+import type { Notification } from './type';
+
+export const SampleNotifications: Notification[] = [
+  {
+    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(),
+  },
+];

002_source/cms/src/app/dashboard/Sample/Notifications/type.d.ts

@@ -0,0 +1,6 @@
+export interface Notification {
+  id: string;
+  type: string;
+  status: 'delivered' | 'pending' | 'failed';
+  createdAt: Date;
+}

002_source/cms/src/app/dashboard/Sample/PaymentCard/SamplePayments.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+// import { dayjs } from 'dayjs';
+import type { Payment } from '@/types/Payment';
+import { dayjs } from '@/lib/dayjs';
+
+export const SamplePayments: Payment[] = [
+  {
+    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(),
+  },
+];

002_source/cms/src/app/dashboard/Sample/PaymentCard/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Divider from '@mui/material/Divider';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { Payments } from '@/components/dashboard/lp/categories/payments';
+
+import { SamplePayments } from './SamplePayments';
+
+export default function SamplePaymentCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Payments
+        ordersValue={2069.48}
+        payments={SamplePayments}
+        refundsValue={324.5}
+        totalOrders={5}
+      />
+      <Card>
+        <CardHeader
+          action={
+            <Button
+              color="secondary"
+              startIcon={<PencilSimpleIcon />}
+            >
+              {t('list.edit')}
+            </Button>
+          }
+          avatar={
+            <Avatar>
+              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+            </Avatar>
+          }
+          title={t('list.billing-details')}
+        />
+        <CardContent>
+          <Card
+            sx={{ borderRadius: 1 }}
+            variant="outlined"
+          >
+            <PropertyList
+              divider={<Divider />}
+              sx={{ '--PropertyItem-padding': '16px' }}
+            >
+              {(
+                [
+                  { key: t('Credit card'), value: '**** 4142' },
+                  { key: t('Country'), value: t('United States') },
+                  { key: t('State'), value: t('Michigan') },
+                  { key: t('City'), value: t('Southfield') },
+                  { key: t('Address'), value: t('Address') },
+                  { key: t('Tax ID'), value: t('Tax ID') },
+                ] 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>
+    </>
+  );
+}

002_source/cms/src/app/dashboard/Sample/SecurityCard/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { useTranslation } from 'react-i18next';
+
+export default function SampleSecurityCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar>
+            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.security')}
+      />
+      <CardContent>
+        <Stack spacing={1}>
+          <div>
+            <Button
+              color="error"
+              variant="contained"
+            >
+              {t('Delete account')}
+            </Button>
+          </div>
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
+            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

002_source/cms/src/app/dashboard/Sample/TitleCard/index.tsx

@@ -0,0 +1,66 @@
+'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';
+
+export default function SampleTitleCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          src="/assets/avatar-1.png"
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          empty
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{t('list.customer-name')}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={t('list.active')}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {t('list.customer-email')}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

002_source/cms/src/app/dashboard/Sample/repomix-output.xml

@@ -0,0 +1,558 @@
+This file is a merged representation of the entire codebase, combined into a single document by Repomix.
+
+<file_summary>
+This section contains a summary of this file.
+
+<purpose>
+This file contains a packed representation of the entire repository's contents.
+It is designed to be easily consumable by AI systems for analysis, code review,
+or other automated processes.
+</purpose>
+
+<file_format>
+The content is organized as follows:
+1. This summary section
+2. Repository information
+3. Directory structure
+4. Repository files, each consisting of:
+  - File path as an attribute
+  - Full contents of the file
+</file_format>
+
+<usage_guidelines>
+- This file should be treated as read-only. Any changes should be made to the
+  original repository files, not this packed version.
+- When processing this file, use the file path to distinguish
+  between different files in the repository.
+- Be aware that this file may contain sensitive information. Handle it with
+  the same level of security as you would the original repository.
+</usage_guidelines>
+
+<notes>
+- Some files may have been excluded based on .gitignore rules and Repomix's configuration
+- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
+- Files matching patterns in .gitignore are excluded
+- Files matching default ignore patterns are excluded
+- Files are sorted by Git change count (files with more changes are at the bottom)
+</notes>
+
+<additional_info>
+
+</additional_info>
+
+</file_summary>
+
+<directory_structure>
+AddressCard/
+  index.tsx
+  SampleAddresses.tsx
+BasicDetailCard/
+  index.tsx
+Notifications/
+  index.tsx
+  type.d.ts
+PaymentCard/
+  index.tsx
+  SamplePayments.tsx
+SecurityCard/
+  index.tsx
+TitleCard/
+  index.tsx
+Helloworld.tsx
+</directory_structure>
+
+<files>
+This section contains the contents of the repository's files.
+
+<file path="AddressCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Grid from '@mui/material/Unstable_Grid2';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';
+
+import { SampleAddresses } from './SampleAddresses';
+
+export default function SampleAddressCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <Button
+            color="secondary"
+            startIcon={<PlusIcon />}
+          >
+            {t('list.add')}
+          </Button>
+        }
+        avatar={
+          <Avatar>
+            <HouseIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.shipping-addresses')}
+      />
+      <CardContent>
+        <Grid
+          container
+          spacing={3}
+        >
+          {(SampleAddresses satisfies Address[]).map((address) => (
+            <Grid
+              key={address.id}
+              md={6}
+              xs={12}
+            >
+              <ShippingAddress address={address} />
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+}
+</file>
+
+<file path="AddressCard/SampleAddresses.tsx">
+'use client';
+
+import type { Address } from '@/types/Address';
+
+export const SampleAddresses: Address[] = [
+  {
+    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',
+  },
+];
+</file>
+
+<file path="BasicDetailCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+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 LinearProgress from '@mui/material/LinearProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+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';
+
+export default function BasicDetailCard({
+  lpCatId,
+  handleEditClick,
+}: {
+  lpCatId: string;
+  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="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>
+  );
+}
+</file>
+
+<file path="Notifications/index.tsx">
+'use client';
+
+import { dayjs } from '@/lib/dayjs';
+
+import type { Notification } from './type';
+
+export const SampleNotifications: Notification[] = [
+  {
+    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(),
+  },
+];
+</file>
+
+<file path="Notifications/type.d.ts">
+export interface Notification {
+  id: string;
+  type: string;
+  status: 'delivered' | 'pending' | 'failed';
+  createdAt: Date;
+}
+</file>
+
+<file path="PaymentCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Divider from '@mui/material/Divider';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { Payments } from '@/components/dashboard/lp/categories/payments';
+
+import { SamplePayments } from './SamplePayments';
+
+export default function SamplePaymentCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Payments
+        ordersValue={2069.48}
+        payments={SamplePayments}
+        refundsValue={324.5}
+        totalOrders={5}
+      />
+      <Card>
+        <CardHeader
+          action={
+            <Button
+              color="secondary"
+              startIcon={<PencilSimpleIcon />}
+            >
+              {t('list.edit')}
+            </Button>
+          }
+          avatar={
+            <Avatar>
+              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+            </Avatar>
+          }
+          title={t('list.billing-details')}
+        />
+        <CardContent>
+          <Card
+            sx={{ borderRadius: 1 }}
+            variant="outlined"
+          >
+            <PropertyList
+              divider={<Divider />}
+              sx={{ '--PropertyItem-padding': '16px' }}
+            >
+              {(
+                [
+                  { key: t('Credit card'), value: '**** 4142' },
+                  { key: t('Country'), value: t('United States') },
+                  { key: t('State'), value: t('Michigan') },
+                  { key: t('City'), value: t('Southfield') },
+                  { key: t('Address'), value: t('Address') },
+                  { key: t('Tax ID'), value: t('Tax ID') },
+                ] 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>
+    </>
+  );
+}
+</file>
+
+<file path="PaymentCard/SamplePayments.tsx">
+'use client';
+
+// import { dayjs } from 'dayjs';
+import type { Payment } from '@/types/Payment';
+import { dayjs } from '@/lib/dayjs';
+
+export const SamplePayments: Payment[] = [
+  {
+    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(),
+  },
+];
+</file>
+
+<file path="SecurityCard/index.tsx">
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { useTranslation } from 'react-i18next';
+
+export default function SampleSecurityCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar>
+            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.security')}
+      />
+      <CardContent>
+        <Stack spacing={1}>
+          <div>
+            <Button
+              color="error"
+              variant="contained"
+            >
+              {t('Delete account')}
+            </Button>
+          </div>
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
+            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}
+</file>
+
+<file path="TitleCard/index.tsx">
+'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';
+
+export default function SampleTitleCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          src="/assets/avatar-1.png"
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          empty
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{t('list.customer-name')}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={t('list.active')}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {t('list.customer-email')}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}
+</file>
+
+<file path="Helloworld.tsx">
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+
+function Page(): React.JSX.Element {
+  React.useLayoutEffect(() => {
+    console.log('helloworld');
+  }, []);
+
+  return <>helloworld</>;
+}
+
+export default Page;
+</file>
+
+</files>

002_source/cms/src/app/dashboard/connectives/create/page.tsx

@@ -0,0 +1,48 @@
+'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 { LessonCategoryCreateForm } from '@/components/dashboard/lesson_category/lesson-category-create-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  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.lesson_categories.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('title', { ns: 'lesson_category' })}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('create.title', { ns: 'lesson_category' })}</Typography>
+          </div>
+        </Stack>
+        <LessonCategoryCreateForm />
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,49 @@
+'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 { LessonCategoryEditForm } from '@/components/dashboard/lesson_category/lesson-category-edit-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['lesson_category']);
+
+  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.lesson_categories.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title', { ns: 'lesson_category' })}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title', { ns: 'lesson_category' })}</Typography>
+          </div>
+        </Stack>
+        <LessonCategoryEditForm />
+      </Stack>
+    </Box>
+  );
+}