update,

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/_AI_WORKSPACE/code/002_update_app_page.md

@@ -0,0 +1,20 @@
+# task
+
+update app page to cover `vocabulary`
+
+## steps
+
+1. read `tsx` from folder: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/vocabularies.draft`
+1. fix the paths, variable, function names, class etc from `lesson-categories` to `vocabularies`.
+
+thanks
+
+## FAQ
+
+1. 在 `constants.ts` 中是否已定义 `COL_VOCABULARIES` 常量？没有，需要先定义它。
+2. Vocabulary 相关的类型定义在哪里？是在现有文件中还是需要新建？ 需要新建
+3. 是否需要保留原始 `lessonCategories` 驱动文件? 不需要
+
+- `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/vocabularies.draft`
+
+- `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/vocabulary.draft`

002_source/cms/_AI_WORKSPACE/code/004-update-constants-file.md

@@ -0,0 +1,13 @@
+---
+tags: update-constants-file
+---
+
+# task
+
+update constants file
+
+## steps
+
+- have a look to `_constants.ts` files in slibing directory
+- get the convention
+- update `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/vocabulary/_constants.ts` according to dbml thanks

002_source/cms/_AI_WORKSPACE/code/005_review-function-name.md

@@ -0,0 +1,13 @@
+---
+tags: review-function-names
+---
+
+# task
+
+review function names
+
+## steps
+
+- have a look to `tsx` files in slibing directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Vocabularies`
+- get the convention
+- update the function name of `tsx` file in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Vocabularies`

002_source/cms/_AI_WORKSPACE/db/001_INIT.md

@@ -16,7 +16,8 @@ they will:
 
 ## project background and initial setup
 
-- No need to reply me what you are going on and your digest in this phase.
+- **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`
@@ -36,9 +37,13 @@ they will:
 
 - look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
 
-- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
-
 - 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,
+- read the files, remember and link up the ideas in file stated above,  i will tell them the task afterwards
-  i will tell them the task afterwards
+
+- please review at least 3 times after you modified the code
+
+## frameworks documentation and samples
+
+- `MUI`
+  - `<base_dir>/002_source/cms/src/components/widgets/forms` contains sample forms,

002_source/cms/_AI_WORKSPACE/db/003_update_dbml_from_schema.md

@@ -2,19 +2,26 @@ Hi, i need your help.
 
 ## task
 
-i am working on a dbml file
+i am working on a `dbml` file
-i got a schema.json from exported from pocketbase
+i got a `schema.json` which is exported from pocketbase
-and i want to update it to my current dbml file (for documentation)
+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
+- 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
+- one collection from `json` file mapped with one table in `dbml` file
-- the `presentable` field from json file should be ignored.
+- 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.
 
 ## information
 
 json file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/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. 字段类型映射是否有特殊规则？ 沒有
+
 thanks

002_source/cms/_AI_WORKSPACE/db/004_clone_db_driver.md

@@ -5,6 +5,33 @@ tags: db, driver
 # clone db driver
 
 please understand the tsx files in folder
-`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Teachers`
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/vocabularies.draft`
 
-change all occurrence of `customer` to `teacher` thanks.
+change all occurrence of `lessonCategories` to `vocabularies` thanks.
+
+## FAQ
+
+1. 在 `constants.ts` 中是否已定义 `COL_VOCABULARIES` 常量？没有，需要先定义它。
+2. Vocabulary 相关的类型定义在哪里？是在现有文件中还是需要新建？ 需要新建
+3. 是否需要保留原始 `lessonCategories` 驱动文件? 不需要
+
+请确认这些信息，以便我制定完整的修改方案。
+
+当前已确认需要修改的内容包括：
+
+函数名中的customer → notification
+COL_CUSTOMERS → COL_NOTIFICATIONS
+相关类型引用
+注释中的customer → notification
+
+---
+
+<!-- updat type.d -->
+
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/type.d.ts` the fields is currently wrong, please help to update thanks.
+
+update the `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/EmptyNotification.ts` as well thanks.
+
+---
+
+please draft `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/GetNotificationByUserId.tsx` by reference `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Notifications/GetById.tsx`

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

@@ -1,39 +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`
-
----
-
-Hi, i want you to help merge two translation files.
-
-base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/public/locales/dev`
-
-I want you to merge the content
-
-from `<base_dir>/lesson_type.json` (source file)
-to `<base_dir>/listening_practice.json` (dest file)
-
-please extract , link up and remember the document properties
-(e.g. types, functions, variables, constants, etc)
-
-update the variables and properties of dest file to reflect `listening practice categories`/`lp_categories`

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

@@ -1,135 +1 @@
-{
+{}
-  "languageChanged": "語言已更改",
-  "type": "類型",
-  "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": "名稱為必填",
-  "listening-practice": "聽講練習"
-}

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/listening_practice.json

@@ -1,36 +0,0 @@
-{
-  "add": "新增",
-  "listening-practice": "聽力練習",
-  "list": {
-    "title": "聽力練習分類列表",
-    "empty": "沒有找到聽力練習分類",
-    "action": "動作?",
-    "basic-details": "基本資料"
-  },
-  "helloworld": "listening_practice",
-  "title": "聽力練習分類",
-  "type": "聽力練習分類",
-  "error": {
-    "invalid": "無效的聽力練習分類",
-    "not_found": "未找到聽力練習分類"
-  },
-  "create": {
-    "title": "創建聽力練習分類",
-    "success": "聽力練習分類創建成功",
-    "error": "創建聽力練習分類時出錯"
-  },
-  "edit": {
-    "title": "編輯聽力練習分類",
-    "success": "聽力練習分類更新成功",
-    "error": "更新聽力練習分類時出錯"
-  },
-  "delete": {
-    "title": "刪除聽力練習分類",
-    "confirm": "確定要刪除聽力練習分類嗎？",
-    "success": "聽力練習分類刪除成功",
-    "error": "刪除聽力練習分類時出錯"
-  },
-  "view": {
-    "title": "查看聽力練習分類詳情"
-  }
-}

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

@@ -1,200 +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": "問題分類",
-  "listening-practice": "聽講練習 (LP)",
-  "matching-frenzy": "配對練習 (MF)",
-  "connective-revision": "連接詞練習 (CR)",
-  "teachers": "導師",
-  "questions": "題目",
-  "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/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>
+  );
+}

002_source/cms/src/app/dashboard/connectives/lesson-categories-sample-data.tsx

@@ -0,0 +1,95 @@
+import { dayjs } from '@/lib/dayjs';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
+
+// import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
+// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
+
+export const lessonCategoriesSampleData = [
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-003',
+    name: 'Carson Darrin',
+    avatar: '/assets/avatar-3.png',
+    email: 'carson.darrin@domain.com',
+    phone: '(715) 278-5041',
+    quota: 10,
+    status: 'blocked',
+    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-002',
+    name: 'Siegbert Gottfried',
+    avatar: '/assets/avatar-2.png',
+    email: 'siegbert.gottfried@domain.com',
+    phone: '(603) 766-0431',
+    quota: 0,
+    status: 'pending',
+    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-001',
+    name: 'Miron Vitold',
+    avatar: '/assets/avatar-1.png',
+    email: 'miron.vitold@domain.com',
+    phone: '(425) 434-5535',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+] satisfies LessonCategory[];

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

@@ -1,104 +0,0 @@
-# Connective Revision Guidelines
-
-## Files and component highlight
-
-1. `_GUIDELINES.md` - this document
-1. categories
-
-- list (page.tsx), also containing a button to delete record
-- read/view ([cat_id]/page.tsx)
-- create (create/page.tsx)
-- edit/update (edit/[cat_id]/page.tsx)
-- optional data for testing(lp-categories-sample-data.tsx)
-
-1. questions
-
-- list (page.tsx), also containing a button to delete record
-- read/view ([cat_id]/page.tsx)
-- create (create/page.tsx)
-- edit/update (edit/[cat_id]/page.tsx)
-- optional data for testing(lp-categories-sample-data.tsx)
-
-## Prompt Documents
-
-Each edit page contains `_PROMPT.md` file that provides guidance for editing.
-
-## Sample Data
-
-- `categories/lp-categories-sample-data.tsx`: Categories sample data
-- `questions/cr-categories-sample-data.tsx`: Questions sample data
-
-## Assumptions & Requirements
-
-1. Using PocketBase to handle ConnectiveRevision records
-2. Each ConnectiveRevision record has:
-   - `id` (autogenerated)
-   - `collectionId` (autogenerated)
-   - `collectionName` (autogenerated)
-   - `created` (autogenerated)
-   - `updated` (autogenerated)
-   - `title` (string)
-   - `description` (string)
-   - `category` (string)
-   - `status` (string)
-   - `priority` (number)
-   - `dueDate` (string)
-   - `assignee` (string)
-   - `reporter` (string)
-   - `comments` (array)
-   - `attachments` (array)
-   - `tags` (array)
-   - `related` (array)
-   - `history` (array)
-
-## Assumption and Requirements
-
-- the `@` sign refer to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src`
-- assume `pb` is located in `@/lib/pb`
-- type information defined in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/Customers/type.d.tsx`
-
-## Component Development Guidelines
-
-### Requirements
-
-1. **Single Responsibility Principle**:
-
-2. **File Organization**:
-
-   - One file per component
-   - File name should match component name (PascalCase)
-   - Place components in logical directories based on their purpose
-
-3. **Type Safety**:
-
-   - Always use TypeScript types/interfaces
-   - Import types from `@/db/Customers/type.d.tsx`
-
-4. **PocketBase Integration**:
-   - Use `pb` instance from `@/lib/pb`
-
-### Component Example
-
-```typescript
-'use client';
-
-import { pb } from '@/lib/pb';
-import { COL_ExampleModel } from '@/constants';
-import type { ExampleType } from '@/db/ExampleModel/type';
-
-// common reference to error display, Provide user-friendly error messages
-import ErrorDisplay from '@/components/dashboard/error';
-
-// declare `Props` explicitively
-interface Props {
-  initialData?: ExampleType;
-}
-
-export default function ExampleForm({ initialData }: Props) {
-  let { t } = useTranslate();
-
-  // Render form UI
-  return <>helloworld</>
-}
-
-```

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

@@ -0,0 +1,302 @@
+'use client';
+
+// RULES:
+// contains list page for lesson_categories (LessonCategories)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_LESSON_CATEGORIES } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import type { ListResult, RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants';
+import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
+import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
+import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
+import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
+import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
+import FormLoading from '@/components/loading';
+
+// import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation(['lesson_category']);
+  const { email, phone, sortDir, status, name, visible, type } = searchParams;
+  const router = useRouter();
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<LessonCategory[]>([]);
+  //
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  //
+  const [f, setF] = React.useState<LessonCategory[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  //
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const sortedLessonCategories = applySort(lessonCategoriesData, sortDir);
+  const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
+
+  //
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_LESSON_CATEGORIES)
+        .getList(currentPage + 1, rowsPerPage, listOption);
+      const { items, totalItems } = models;
+      const tempLessonTypes: LessonCategory[] = items.map((lt) => {
+        return { ...defaultLessonCategory, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+      // console.log({ currentPage, f });
+    } catch (error) {
+      //
+      logger.error(error);
+      setShowError({
+        //
+        show: true,
+        detail: JSON.stringify(error, null, 2),
+      });
+    } finally {
+      setShowLoading(false);
+    }
+
+    // pb.collection(COL_LESSON_CATEGORIES)
+    //   .getList(currentPage, rowsPerPage, listOption)
+    //   .then((lessonCategories: ListResult<RecordModel>) => {
+    //     // console.log(lessonTypes);
+    //     const { items, page, perPage, totalItems, totalPages } = lessonCategories;
+    //     const tempLessonCategories: LessonCategory[] = items.map((item) => {
+    //       return { ...defaultLessonCategory, ...item };
+    //     });
+
+    //     setLessonCategoriesData(tempLessonCategories);
+    //     setRecordCount(totalItems);
+    //     setF(tempLessonCategories);
+    //     // console.log({ currentPage, f });
+    //   })
+    //   .catch((error) => {
+    //     logger.error(error);
+    //     setShowError({
+    //       //
+    //       show: true,
+    //       detail: JSON.stringify(error, null, 2),
+    //     });
+    //   })
+    //   .finally(() => {
+    //     setShowLoading(false);
+    //   });
+  };
+
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
+  React.useEffect(() => {
+    if (!isFirstRun.current) {
+      isFirstRun.current = true;
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+      // reset page number as tab changes
+      setLastListOption(listOption);
+      setCurrentPage(0);
+      void reloadRows();
+    } else {
+      void reloadRows();
+    }
+  }, [currentPage, rowsPerPage, listOption]);
+
+  React.useEffect(() => {
+    let tempFilter = [],
+      tempSortDir = '';
+
+    if (visible) {
+      tempFilter.push(`visible = "${visible}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (name) {
+      tempFilter.push(`name ~ "%${name}%"`);
+    }
+
+    if (type) {
+      tempFilter.push(`type ~ "%${type}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+    // setListOption({
+    //   filter: tempFilter.join(' && '),
+    //   sort: tempSortDir,
+    //   //
+    // });
+  }, [visible, sortDir, name, type]);
+
+  // return <>helloworld</>;
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={3}
+          sx={{ alignItems: 'flex-start' }}
+        >
+          <Box sx={{ flex: '1 1 auto' }}>
+            <Typography variant="h4">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.lesson_categories.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {/* add new lesson type */}
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <LessonCategoriesSelectionProvider lessonCategories={f}>
+          <Card>
+            <LessonCategoriesFilters
+              filters={{ email, phone, status, name, visible, type }}
+              fullData={lessonCategoriesData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <LessonCategoriesTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <LessonCategoriesPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </LessonCategoriesSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: LessonCategory[], sortDir: 'asc' | 'desc' | undefined): LessonCategory[] {
+  return row.sort((a, b) => {
+    if (sortDir === 'asc') {
+      return a.createdAt.getTime() - b.createdAt.getTime();
+    }
+
+    return b.createdAt.getTime() - a.createdAt.getTime();
+  });
+}
+
+function applyFilters(row: LessonCategory[], { email, phone, status, name, visible }: Filters): LessonCategory[] {
+  return row.filter((item) => {
+    if (email) {
+      if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (phone) {
+      if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (status) {
+      if (item.status !== status) {
+        return false;
+      }
+    }
+
+    if (name) {
+      if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (visible) {
+      if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}
+
+interface PageProps {
+  searchParams: {
+    email?: string;
+    phone?: string;
+    sortDir?: 'asc' | 'desc';
+    status?: string;
+    name?: string;
+    visible?: string;
+    type?: string;
+  };
+}

002_source/cms/src/app/dashboard/lesson_categories/view/[cat_id]/page.tsx

@@ -0,0 +1,383 @@
+'use client';
+
+import * as React from 'react';
+// import type { Metadata } from 'next';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import { COL_LESSON_CATEGORIES } from '@/constants';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+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 Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultLessonCategory } from '@/components/dashboard/lesson_category/_constants.ts';
+// import { defaultLessonCategory } from '@/components/dashboard/lesson_category/defaultLessonCategory';
+import { Notifications } from '@/components/dashboard/lesson_category/notifications';
+import { Payments } from '@/components/dashboard/lesson_category/payments';
+import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
+import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
+import FormLoading from '@/components/loading';
+
+// export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState<boolean>(false);
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<LessonCategory>(defaultLessonCategory);
+
+  function handleEditClick() {
+    router.push(paths.dashboard.lesson_categories.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (catId) {
+      pb.collection(COL_LESSON_CATEGORIES)
+        .getOne(catId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultLessonCategory, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('dashboard.lessonTypes.list.error'));
+
+          setShowError(true);
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request', { ns: 'common' })}
+        code="500"
+        details={t('error.detailed-error-information', { ns: 'common' })}
+      />
+    );
+
+  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('dashboard.lessonCategorys.list.title')}
+            </Link>
+          </div>
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+            <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+              <Avatar
+                src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
+                sx={{ '--Avatar-size': '64px' }}
+                variant="rounded"
+              >
+                empty
+              </Avatar>
+              <div>
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+                  <Typography variant="h4">{showLessonCategory.name}</Typography>
+                  <Chip
+                    icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
+                    label={showLessonCategory.visible}
+                    size="small"
+                    variant="outlined"
+                  />
+                </Stack>
+                <Typography color="text.secondary" variant="body1">
+                  {showLessonCategory.id}
+                </Typography>
+              </div>
+            </Stack>
+            <div>
+              <Button endIcon={<CaretDownIcon />} variant="contained">
+                Action
+              </Button>
+            </div>
+          </Stack>
+        </Stack>
+        <Grid container spacing={4}>
+          <Grid lg={4} xs={12}>
+            <Stack spacing={4}>
+              <Card>
+                <CardHeader
+                  action={
+                    <IconButton
+                      onClick={() => {
+                        handleEditClick();
+                      }}
+                    >
+                      <PencilSimpleIcon />
+                    </IconButton>
+                  }
+                  avatar={
+                    <Avatar>
+                      <UserIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('basic-details', { ns: 'lesson_category' })}
+                />
+                <PropertyList
+                  divider={<Divider />}
+                  orientation="vertical"
+                  sx={{ '--PropertyItem-padding': '12px 24px' }}
+                >
+                  {(
+                    [
+                      { key: 'Customer ID', value: <Chip label={showLessonCategory.id} size="small" variant="soft" /> },
+                      { key: 'Name', value: showLessonCategory.name },
+                      { key: 'Pos', value: showLessonCategory.pos },
+                      {
+                        key: 'Visible',
+                        value: (
+                          <Chip
+                            //
+                            label={showLessonCategory.visible}
+                            size="small"
+                            variant="soft"
+                          />
+                        ),
+                      },
+                      {
+                        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>
+              <Card>
+                <CardHeader
+                  avatar={
+                    <Avatar>
+                      <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('security', { ns: 'lesson_category' })}
+                />
+                <CardContent>
+                  <Stack spacing={1}>
+                    <div>
+                      <Button color="error" variant="contained">
+                        Delete account
+                      </Button>
+                    </div>
+                    <Typography color="text.secondary" variant="body2">
+                      A deleted lesson category cannot be restored. All data will be permanently removed.
+                    </Typography>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Stack>
+          </Grid>
+          <Grid lg={8} xs={12}>
+            <Stack spacing={4}>
+              <Payments
+                ordersValue={2069.48}
+                payments={[
+                  {
+                    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(),
+                  },
+                ]}
+                refundsValue={324.5}
+                totalOrders={5}
+              />
+              <Card>
+                <CardHeader
+                  action={
+                    <Button color="secondary" startIcon={<PencilSimpleIcon />}>
+                      Edit
+                    </Button>
+                  }
+                  avatar={
+                    <Avatar>
+                      <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('billing-details', { ns: 'lesson_category' })}
+                />
+                <CardContent>
+                  <Card sx={{ borderRadius: 1 }} variant="outlined">
+                    <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
+                      {(
+                        [
+                          { key: 'Credit card', value: '**** 4142' },
+                          { key: 'Country', value: 'United States' },
+                          { key: 'State', value: 'Michigan' },
+                          { key: 'City', value: 'Southfield' },
+                          { key: 'Address', value: '1721 Bartlett Avenue, 48034' },
+                          { key: 'Tax ID', value: 'EU87956621' },
+                        ] 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>
+              <Card>
+                <CardHeader
+                  action={
+                    <Button color="secondary" startIcon={<PlusIcon />}>
+                      Add
+                    </Button>
+                  }
+                  avatar={
+                    <Avatar>
+                      <HouseIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('shipping-addresses', { ns: 'lesson_category' })}
+                />
+                <CardContent>
+                  <Grid container spacing={3}>
+                    {(
+                      [
+                        {
+                          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',
+                        },
+                      ] satisfies Address[]
+                    ).map((address) => (
+                      <Grid key={address.id} md={6} xs={12}>
+                        <ShippingAddress address={address} />
+                      </Grid>
+                    ))}
+                  </Grid>
+                </CardContent>
+              </Card>
+              <Notifications
+                notifications={[
+                  {
+                    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(),
+                  },
+                ]}
+              />
+            </Stack>
+          </Grid>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/lp/categories/edit/[cat_id]/_PROMPT.md

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

002_source/cms/src/app/dashboard/mail/[labelId]/layout.tsx

@@ -135,7 +135,11 @@ export default function Layout({ children, params }: LayoutProps): React.JSX.Ele
   const filteredThreads = filterThreads(threads, labelId);
 
   return (
-    <MailProvider currentLabelId={labelId} labels={labels} threads={filteredThreads}>
+    <MailProvider
+      currentLabelId={labelId}
+      labels={labels}
+      threads={filteredThreads}
+    >
       <MailView>{children}</MailView>
     </MailProvider>
   );

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

@@ -1,16 +1,14 @@
-// src/app/dashboard/teachers/page.tsx
+// src/app/dashboard/teachers/list/page.tsx
 'use client';
 
 // RULES:
 // contains list page for teachers (Teachers)
-// contain definition to collection only
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
 import { COL_TEACHERS } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
@@ -18,21 +16,17 @@ import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import type { ListResult, RecordModel } from 'pocketbase';
 
-import { config } from '@/config';
 import { TeachersFilters } from '@/components/dashboard/teacher/teachers-filters';
-// import type { Filters } from '@/components/dashboard/teacher/customers-filters';
 import { TeachersPagination } from '@/components/dashboard/teacher/teachers-pagination';
 import { TeachersSelectionProvider } from '@/components/dashboard/teacher/teachers-selection-context';
 import { TeachersTable } from '@/components/dashboard/teacher/teachers-table';
-import type { Teacher, Filters } from '@/components/dashboard/teacher/type.d';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
-import { SampleTeachers } from './SampleTeachers';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
-import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultTeacher } from '@/components/dashboard/teacher/_constants';
 import FormLoading from '@/components/loading';
@@ -44,7 +38,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { email, phone, sortDir, status } = searchParams;
 
   const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Teacher[]>([]);
-  //
 
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
@@ -73,12 +66,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       setLessonCategoriesData(tempLessonTypes);
       setRecordCount(totalItems);
       setF(tempLessonTypes);
-      // console.log({ currentPage, f });
     } catch (error) {
-      //
       logger.error(error);
       setShowError({
-        //
         show: true,
         detail: JSON.stringify(error, null, 2),
       });
@@ -117,6 +107,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     if (email) {
       tempFilter.push(`email ~ "%${email}%"`);
     }
+
     if (phone) {
       tempFilter.push(`phone ~ "%${phone}%"`);
     }
@@ -129,11 +120,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
     }
     setListOption(preFinalListOption);
-    // setListOption({
-    //   filter: tempFilter.join(' && '),
-    //   sort: tempSortDir,
-    //   //
-    // });
   }, [sortDir, email, phone, status]);
 
   if (showLoading) return <FormLoading />;
@@ -211,42 +197,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   );
 }
 
-// Sorting and filtering has to be done on the server.
-
-function applySort(row: Teacher[], sortDir: 'asc' | 'desc' | undefined): Teacher[] {
-  return row.sort((a, b) => {
-    if (sortDir === 'asc') {
-      return a.createdAt.getTime() - b.createdAt.getTime();
-    }
-
-    return b.createdAt.getTime() - a.createdAt.getTime();
-  });
-}
-
-function applyFilters(row: Teacher[], { email, phone, status }: Filters): Teacher[] {
-  return row.filter((item) => {
-    if (email) {
-      if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
-        return false;
-      }
-    }
-
-    if (phone) {
-      if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
-        return false;
-      }
-    }
-
-    if (status) {
-      if (item.status !== status) {
-        return false;
-      }
-    }
-
-    return true;
-  });
-}
-
 interface PageProps {
   searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
 }

002_source/cms/src/app/dashboard/teachers/mail/[labelId]/SampleThreads.tsx

@@ -0,0 +1,86 @@
+import type { Thread } from '@/components/dashboard/teacher/mail/types';
+import { dayjs } from '@/lib/dayjs';
+
+export const SampleThreads = [
+  {
+    id: 'TRD-004',
+    from: { avatar: '/assets/avatar-9.png', email: 'marcus.finn@domain.com', name: 'Marcus Finn' },
+    to: [{ avatar: '/assets/avatar.png', email: 'sofia@devias.io', name: 'Sofia Rivers' }],
+    subject: 'Website redesign. Interested in collaboration',
+    message: `Hey there,
+
+I hope this email finds you well. I'm glad you liked my projects, and I would be happy to provide you with a quote for a similar project.
+
+Please let me know your requirements and any specific details you have in mind, so I can give you an accurate quote.
+
+Looking forward to hearing from you soon.
+
+Best regards,
+
+Marcus Finn`,
+    attachments: [
+      {
+        id: 'ATT-001',
+        name: 'working-sketch.png',
+        size: '128.5 KB',
+        type: 'image',
+        url: '/assets/image-abstract-1.png',
+      },
+      { id: 'ATT-002', name: 'summer-customers.pdf', size: '782.3 KB', type: 'file', url: '#' },
+      {
+        id: 'ATT-003',
+        name: 'desktop-coffee.png',
+        size: '568.2 KB',
+        type: 'image',
+        url: '/assets/image-minimal-1.png',
+      },
+    ],
+    folder: 'inbox',
+    labels: ['work', 'business'],
+    isImportant: true,
+    isStarred: false,
+    isUnread: true,
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'TRD-003',
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    from: { name: 'Miron Vitold', avatar: '/assets/avatar-1.png', email: 'miron.vitold@domain.com' },
+    subject: 'Amazing work',
+    message: `Hey, nice projects! I really liked the one in react. What's your quote on kinda similar project?`,
+    folder: 'spam',
+    labels: [],
+    isImportant: false,
+    isStarred: true,
+    isUnread: false,
+    createdAt: dayjs().subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'TRD-002',
+    from: { name: 'Penjani Inyene', avatar: '/assets/avatar-4.png', email: 'penjani.inyene@domain.com' },
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    subject: 'Flight reminder',
+    message: `Dear Sofia,
+
+Your flight is coming up soon. Please don't forget to check in for your scheduled flight.`,
+    folder: 'inbox',
+    labels: ['business'],
+    isImportant: false,
+    isStarred: false,
+    isUnread: false,
+    createdAt: dayjs().subtract(2, 'day').toDate(),
+  },
+  {
+    id: 'TRD-001',
+    from: { name: 'Carson Darrin', avatar: '/assets/avatar-3.png', email: 'carson.darrin@domain.com' },
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    subject: 'Possible candidates for the position',
+    message: `My market leading client has another fantastic opportunity for an experienced Software Developer to join them on a heavily remote basis`,
+    folder: 'trash',
+    labels: ['personal'],
+    isImportant: false,
+    isStarred: false,
+    isUnread: true,
+    createdAt: dayjs().subtract(2, 'day').toDate(),
+  },
+] satisfies Thread[];

002_source/cms/src/app/dashboard/teachers/mail/[labelId]/[threadId]/page.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadView } from '@/components/dashboard/teacher/mail/thread-view';
+
+export const metadata = { title: `Thread | Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+interface PageProps {
+  params: { threadId: string };
+}
+
+export default function Page({ params }: PageProps): React.JSX.Element {
+  const { threadId } = params;
+
+  return <ThreadView threadId={threadId} />;
+}

002_source/cms/src/app/dashboard/teachers/mail/[labelId]/layout.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import { MailProvider } from '@/components/dashboard/teacher/mail/mail-context';
+import { MailView } from '@/components/dashboard/teacher/mail/mail-view';
+import type { Label, Thread } from '@/components/dashboard/teacher/mail/types';
+import { SampleThreads } from './SampleThreads';
+
+function filterThreads(threads: Thread[], labelId: string): Thread[] {
+  return threads.filter((thread) => {
+    if (['inbox', 'sent', 'drafts', 'spam', 'trash'].includes(labelId)) {
+      return thread.folder === labelId;
+    }
+
+    if (labelId === 'important') {
+      return thread.isImportant;
+    }
+
+    if (labelId === 'starred') {
+      return thread.isStarred;
+    }
+
+    if (thread.labels.includes(labelId)) {
+      return true;
+    }
+
+    return false;
+  });
+}
+
+const labels = [
+  { id: 'inbox', type: 'system', name: 'Inbox', unreadCount: 1, totalCount: 0 },
+  { id: 'sent', type: 'system', name: 'Sent', unreadCount: 0, totalCount: 0 },
+  { id: 'drafts', type: 'system', name: 'Drafts', unreadCount: 0, totalCount: 0 },
+  { id: 'spam', type: 'system', name: 'Spam', unreadCount: 0, totalCount: 0 },
+  { id: 'trash', type: 'system', name: 'Trash', unreadCount: 0, totalCount: 1 },
+  { id: 'important', type: 'system', name: 'Important', unreadCount: 0, totalCount: 1 },
+  { id: 'starred', type: 'system', name: 'Starred', unreadCount: 1, totalCount: 1 },
+  { id: 'work', type: 'custom', name: 'Work', color: '#43A048', unreadCount: 0, totalCount: 1 },
+  { id: 'business', type: 'custom', name: 'Business', color: '#1E88E5', unreadCount: 1, totalCount: 2 },
+  { id: 'personal', type: 'custom', name: 'Personal', color: '#FB8A00', unreadCount: 0, totalCount: 1 },
+] satisfies Label[];
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: { labelId: string };
+}
+
+export default function Layout({ children, params }: LayoutProps): React.JSX.Element {
+  const { labelId } = params;
+
+  const filteredThreads = filterThreads(SampleThreads, labelId);
+
+  return (
+    <MailProvider
+      currentLabelId={labelId}
+      labels={labels}
+      threads={filteredThreads}
+    >
+      <MailView>{children}</MailView>
+    </MailProvider>
+  );
+}

002_source/cms/src/app/dashboard/teachers/mail/[labelId]/list/page.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadsView } from '@/components/dashboard/teacher/mail/threads-view';
+
+export const metadata = { title: `Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return <ThreadsView />;
+}

002_source/cms/src/app/dashboard/teachers/mail/[labelId]/page.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadsView } from '@/components/dashboard/teacher/mail/threads-view';
+
+export const metadata = { title: `Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return <ThreadsView />;
+}

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

@@ -0,0 +1,49 @@
+// src/app/dashboard/vocabularies/create/page.tsx
+'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 { VocabularyCreateForm } from '@/components/dashboard/vocabulary/vocabulary-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.vocabularies.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('create.title')}</Typography>
+          </div>
+        </Stack>
+        <VocabularyCreateForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/vocabularies/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 { VocabularyEditForm } from '@/components/dashboard/vocabulary/vocabulary-edit-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.vocabularies.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <VocabularyEditForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/vocabularies/lesson-categories-sample-data.tsx

@@ -0,0 +1,95 @@
+import { dayjs } from '@/lib/dayjs';
+import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+
+// import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
+
+// import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
+// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
+
+export const lessonCategoriesSampleData = [
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-003',
+    name: 'Carson Darrin',
+    avatar: '/assets/avatar-3.png',
+    email: 'carson.darrin@domain.com',
+    phone: '(715) 278-5041',
+    quota: 10,
+    status: 'blocked',
+    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-002',
+    name: 'Siegbert Gottfried',
+    avatar: '/assets/avatar-2.png',
+    email: 'siegbert.gottfried@domain.com',
+    phone: '(603) 766-0431',
+    quota: 0,
+    status: 'pending',
+    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+  {
+    id: 'USR-001',
+    name: 'Miron Vitold',
+    avatar: '/assets/avatar-1.png',
+    email: 'miron.vitold@domain.com',
+    phone: '(425) 434-5535',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+    collectionId: '0000000001',
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
+  },
+] satisfies LessonCategory[];

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

@@ -0,0 +1,228 @@
+// src/app/dashboard/vocabularies/list/page.tsx
+'use client';
+
+// RULES:
+// contains list page for vocabularies (Vocabularies)
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_VOCABULARIES } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import type { ListResult, RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants';
+import { VocabulariesFilters } from '@/components/dashboard/vocabulary/vocabularies-filters';
+import { VocabulariesPagination } from '@/components/dashboard/vocabulary/vocabularies-pagination';
+import { VocabulariesSelectionProvider } from '@/components/dashboard/vocabulary/vocabularies-selection-context';
+import { VocabulariesTable } from '@/components/dashboard/vocabulary/vocabularies-table';
+import type { Vocabulary } from '@/components/dashboard/vocabulary/type';
+import FormLoading from '@/components/loading';
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const { email, phone, sortDir, status, name, visible, type, word, category } = searchParams;
+
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Vocabulary[]>([]);
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  //
+  const [f, setF] = React.useState<Vocabulary[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  //
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_VOCABULARIES)
+        .getList(currentPage + 1, rowsPerPage, {
+          ...listOption,
+          expand: 'cat_id',
+        });
+
+      const { items, totalItems } = models;
+      const tempVocabularies: Vocabulary[] = items.map((v) => {
+        return { ...defaultVocabulary, ...v };
+      });
+
+      setLessonCategoriesData(tempVocabularies);
+      setRecordCount(totalItems);
+      setF(tempVocabularies);
+      // console.log({ currentPage, f });
+    } catch (error) {
+      logger.error(error);
+      setShowError({
+        show: true,
+        detail: JSON.stringify(error, null, 2),
+      });
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
+  React.useEffect(() => {
+    if (!isFirstRun.current) {
+      isFirstRun.current = true;
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+      // reset page number as tab changes
+      setLastListOption(listOption);
+      setCurrentPage(0);
+      void reloadRows();
+    } else {
+      void reloadRows();
+    }
+  }, [currentPage, rowsPerPage, listOption]);
+
+  React.useEffect(() => {
+    let tempFilter = [],
+      tempSortDir = '';
+
+    if (visible) {
+      tempFilter.push(`visible = "${visible}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (name) {
+      tempFilter.push(`name ~ "%${name}%"`);
+    }
+
+    if (type) {
+      tempFilter.push(`type ~ "%${type}%"`);
+    }
+
+    if (word) {
+      tempFilter.push(`word ~ "%${word}%"`);
+    }
+
+    if (category) {
+      tempFilter.push(`cat_id ~ "%000000000000003%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+  }, [visible, sortDir, name, type, word, category]);
+
+  // return <>helloworld</>;
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code={-1}
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={3}
+          sx={{ alignItems: 'flex-start' }}
+        >
+          <Box sx={{ flex: '1 1 auto' }}>
+            <Typography variant="h4">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.vocabularies.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {/* add new lesson type */}
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <VocabulariesSelectionProvider lessonCategories={f}>
+          <Card>
+            <VocabulariesFilters
+              // category
+              filters={{ email, phone, status, name, visible, type, word, category }}
+              fullData={lessonCategoriesData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <VocabulariesTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <VocabulariesPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </VocabulariesSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+interface PageProps {
+  searchParams: {
+    email?: string;
+    phone?: string;
+    sortDir?: 'asc' | 'desc';
+    status?: string;
+    word?: string;
+    name?: string;
+    visible?: string;
+    type?: string;
+    category?: string;
+  };
+}

002_source/cms/src/app/dashboard/vocabularies/view/[cat_id]/page.tsx

@@ -0,0 +1,466 @@
+'use client';
+
+import * as React from 'react';
+// import type { Metadata } from 'next';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import { COL_VOCABULARIES } from '@/constants';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+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 Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants.ts';
+import { Notifications } from '@/components/dashboard/vocabulary/notifications';
+import { Payments } from '@/components/dashboard/vocabulary/payments';
+import type { Address } from '@/components/dashboard/vocabulary/shipping-address';
+import { ShippingAddress } from '@/components/dashboard/vocabulary/shipping-address';
+import type { Vocabulary } from '@/components/dashboard/vocabulary/type';
+import FormLoading from '@/components/loading';
+
+// export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState<boolean>(false);
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<Vocabulary>(defaultVocabulary);
+
+  function handleEditClick() {
+    router.push(paths.dashboard.vocabularies.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (catId) {
+      pb.collection(COL_VOCABULARIES)
+        .getOne(catId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultVocabulary, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('dashboard.lessonTypes.list.error'));
+
+          setShowError(true);
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request', { ns: 'common' })}
+        code="500"
+        details={t('error.detailed-error-information', { ns: 'common' })}
+      />
+    );
+
+  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.vocabularies.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('dashboard.lessonCategorys.list.title')}
+            </Link>
+          </div>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{ alignItems: 'center', flex: '1 1 auto' }}
+            >
+              <Avatar
+                src={`http://127.0.0.1:8090/api/files/${showLessonCategory.collectionId}/${showLessonCategory.id}/${showLessonCategory.cat_image}`}
+                sx={{ '--Avatar-size': '64px' }}
+                variant="rounded"
+              >
+                empty
+              </Avatar>
+              <div>
+                <Stack
+                  direction="row"
+                  spacing={2}
+                  sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+                >
+                  <Typography variant="h4">{showLessonCategory.name}</Typography>
+                  <Chip
+                    icon={
+                      <CheckCircleIcon
+                        color="var(--mui-palette-success-main)"
+                        weight="fill"
+                      />
+                    }
+                    label={showLessonCategory.visible}
+                    size="small"
+                    variant="outlined"
+                  />
+                </Stack>
+                <Typography
+                  color="text.secondary"
+                  variant="body1"
+                >
+                  {showLessonCategory.id}
+                </Typography>
+              </div>
+            </Stack>
+            <div>
+              <Button
+                endIcon={<CaretDownIcon />}
+                variant="contained"
+              >
+                Action
+              </Button>
+            </div>
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <Card>
+                <CardHeader
+                  action={
+                    <IconButton
+                      onClick={() => {
+                        handleEditClick();
+                      }}
+                    >
+                      <PencilSimpleIcon />
+                    </IconButton>
+                  }
+                  avatar={
+                    <Avatar>
+                      <UserIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('basic-details')}
+                />
+                <PropertyList
+                  divider={<Divider />}
+                  orientation="vertical"
+                  sx={{ '--PropertyItem-padding': '12px 24px' }}
+                >
+                  {(
+                    [
+                      {
+                        key: 'word',
+                        value: (
+                          <Chip
+                            label={showLessonCategory.word}
+                            size="small"
+                            variant="soft"
+                          />
+                        ),
+                      },
+                      { key: 'word_c', value: showLessonCategory.word_c },
+                      { key: 'Pos', value: showLessonCategory.pos },
+                      {
+                        key: 'Visible',
+                        value: (
+                          <Chip
+                            //
+                            label={showLessonCategory.visible}
+                            size="small"
+                            variant="soft"
+                          />
+                        ),
+                      },
+                      {
+                        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>
+              <Card>
+                <CardHeader
+                  avatar={
+                    <Avatar>
+                      <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('security')}
+                />
+                <CardContent>
+                  <Stack spacing={1}>
+                    <div>
+                      <Button
+                        color="error"
+                        variant="contained"
+                      >
+                        Delete account
+                      </Button>
+                    </div>
+                    <Typography
+                      color="text.secondary"
+                      variant="body2"
+                    >
+                      A deleted lesson category cannot be restored. All data will be permanently removed.
+                    </Typography>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Stack>
+          </Grid>
+          <Grid
+            lg={8}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <Payments
+                ordersValue={2069.48}
+                payments={[
+                  {
+                    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(),
+                  },
+                ]}
+                refundsValue={324.5}
+                totalOrders={5}
+              />
+              <Card>
+                <CardHeader
+                  action={
+                    <Button
+                      color="secondary"
+                      startIcon={<PencilSimpleIcon />}
+                    >
+                      Edit
+                    </Button>
+                  }
+                  avatar={
+                    <Avatar>
+                      <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('billing-details')}
+                />
+                <CardContent>
+                  <Card
+                    sx={{ borderRadius: 1 }}
+                    variant="outlined"
+                  >
+                    <PropertyList
+                      divider={<Divider />}
+                      sx={{ '--PropertyItem-padding': '16px' }}
+                    >
+                      {(
+                        [
+                          { key: 'Credit card', value: '**** 4142' },
+                          { key: 'Country', value: 'United States' },
+                          { key: 'State', value: 'Michigan' },
+                          { key: 'City', value: 'Southfield' },
+                          { key: 'Address', value: '1721 Bartlett Avenue, 48034' },
+                          { key: 'Tax ID', value: 'EU87956621' },
+                        ] 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>
+              <Card>
+                <CardHeader
+                  action={
+                    <Button
+                      color="secondary"
+                      startIcon={<PlusIcon />}
+                    >
+                      Add
+                    </Button>
+                  }
+                  avatar={
+                    <Avatar>
+                      <HouseIcon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                  }
+                  title={t('shipping-addresses')}
+                />
+                <CardContent>
+                  <Grid
+                    container
+                    spacing={3}
+                  >
+                    {(
+                      [
+                        {
+                          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',
+                        },
+                      ] satisfies Address[]
+                    ).map((address) => (
+                      <Grid
+                        key={address.id}
+                        md={6}
+                        xs={12}
+                      >
+                        <ShippingAddress address={address} />
+                      </Grid>
+                    ))}
+                  </Grid>
+                </CardContent>
+              </Card>
+              <Notifications
+                notifications={[
+                  {
+                    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(),
+                  },
+                ]}
+              />
+            </Stack>
+          </Grid>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/components/dashboard/connective/_constants.ts

@@ -0,0 +1,44 @@
+import { dayjs } from '@/lib/dayjs';
+
+import { CreateForm, LessonCategory } from './type';
+
+// import type { CreateForm, LessonCategory } from '../lp_categories/type';
+
+export const defaultLessonCategory: LessonCategory = {
+  isEmpty: false,
+  id: 'default-id',
+  cat_name: 'default-category-name',
+  cat_image_url: undefined,
+  cat_image: undefined,
+  pos: 0,
+  visible: 'hidden',
+  lesson_id: 'default-lesson-id',
+  description: 'default-description',
+  remarks: 'default-remarks',
+  //
+  collectionId: '0000000000',
+  createdAt: dayjs('2099-01-01').toDate(),
+  //
+  name: '',
+  avatar: '',
+  email: '',
+  phone: '',
+  quota: 0,
+  status: 'NA',
+};
+
+export const LessonCategoryCreateFormDefault: CreateForm = {
+  name: '',
+  type: '',
+  pos: 1,
+  visible: 'visible',
+  description: '',
+  isActive: true,
+  order: 1,
+  imageUrl: '',
+};
+
+export const emptyLessonCategory: LessonCategory = {
+  ...defaultLessonCategory,
+  isEmpty: true,
+};

002_source/cms/src/components/dashboard/connective/confirm-delete-modal.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_LESSON_TYPES } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import { Button, Container, Modal, Paper } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
+import PocketBase from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+
+const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
+
+export default function ConfirmDeleteModal({
+  open,
+  setOpen,
+  idToDelete,
+  reloadRows,
+}: {
+  open: boolean;
+  setOpen: (b: boolean) => void;
+  idToDelete: string;
+  reloadRows: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  // const handleClose = () => setOpen(false);
+  function handleClose(): void {
+    setOpen(false);
+  }
+
+  const [isDeleteing, setIsDeleteing] = React.useState(false);
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  };
+
+  function performDelete(id: string): Promise<void> {
+    return pb
+      .collection(COL_LESSON_TYPES)
+      .delete(id)
+      .then(() => {
+        toast(t('dashboard.lessonTypes.delete.success'));
+        reloadRows();
+      })
+      .catch((err) => {
+        logger.error(err);
+        toast(t('dashboard.lessonTypes.delete.error'));
+      })
+      .finally(() => {});
+  }
+
+  function handleUserConfirmDelete(): void {
+    if (idToDelete) {
+      setIsDeleteing(true);
+      performDelete(idToDelete)
+        .then(() => {
+          handleClose();
+          setIsDeleteing(false);
+        })
+        .catch((err) => {
+          // console.error(err)
+          logger.error(err);
+          toast(t('dashboard.lessonTypes.delete.error'));
+        });
+    }
+  }
+
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Container maxWidth="sm">
+            <Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
+              <Stack direction="row" spacing={2} sx={{ display: 'flex', p: 3 }}>
+                <Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
+                  <NoteIcon fontSize="var(--Icon-fontSize)" />
+                </Avatar>
+                <Stack spacing={3}>
+                  <Stack spacing={1}>
+                    <Typography variant="h5">{t('Delete Lesson Type ?')}</Typography>
+                    <Typography color="text.secondary" variant="body2">
+                      {t('Are you sure you want to delete lesson type ?')}
+                    </Typography>
+                  </Stack>
+                  <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
+                    <Button color="secondary" onClick={handleClose}>
+                      {t('Cancel')}
+                    </Button>
+                    <LoadingButton
+                      color="error"
+                      variant="contained"
+                      onClick={(e) => {
+                        handleUserConfirmDelete();
+                      }}
+                      loading={isDeleteing}
+                    >
+                      {t('Delete')}
+                    </LoadingButton>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          </Container>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

002_source/cms/src/components/dashboard/connective/helloworld.tsx

@@ -0,0 +1,3 @@
+const helloworld = 'helloworld';
+
+export { helloworld };

002_source/cms/src/components/dashboard/connective/interfaces.1ts

@@ -0,0 +1,64 @@
+import { dayjs } from '@/lib/dayjs';
+
+export interface LessonCategory {
+  isEmpty?: boolean;
+  //
+  id: string;
+  cat_name: string;
+  cat_image_url?: string;
+  cat_image?: string;
+  pos: number;
+  visible: string;
+  lesson_id: string;
+  description: string;
+  remarks: string;
+  //
+  name: string;
+  avatar: string;
+  email: string;
+  phone: string;
+  quota: number;
+  status: 'pending' | 'active' | 'blocked' | 'NA';
+  createdAt: Date;
+}
+
+export const defaultLessonCategory: LessonCategory = {
+  isEmpty: false,
+  id: 'default-id',
+  cat_name: 'default-category-name',
+  cat_image_url: undefined,
+  cat_image: undefined,
+  pos: 0,
+  visible: 'hidden',
+  lesson_id: 'default-lesson-id',
+  description: 'default-description',
+  remarks: 'default-remarks',
+  //
+  createdAt: dayjs('2099-01-01').toDate(),
+  //
+  name: '',
+  avatar: '',
+  email: '',
+  phone: '',
+  quota: 0,
+  status: 'NA',
+};
+
+export const emptyLessonCategory: LessonCategory = {
+  ...defaultLessonCategory,
+  isEmpty: true,
+};
+
+export interface CreateForm {
+  name: string;
+  type: string;
+  pos: number;
+  visible: string;
+}
+
+export const LessonCategoryCreateFormDefault: CreateForm = {
+  name: '',
+  type: '',
+  pos: 1,
+  visible: 'visible',
+};

002_source/cms/src/components/dashboard/connective/lesson-categories-filters.tsx

@@ -0,0 +1,401 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_LESSON_CATEGORIES } from '@/constants';
+import GetAllCount from '@/db/LessonCategories/GetAllCount';
+import GetHiddenCount from '@/db/LessonCategories/GetHiddenCount';
+import GetVisibleCount from '@/db/LessonCategories/GetVisibleCount';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { pb } from '@/lib/pb';
+import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
+import { Option } from '@/components/core/option';
+
+// import { LessonCategory } from '../lp_categories/type';
+import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
+import { LessonCategory } from './type';
+
+export interface Filters {
+  email?: string;
+  phone?: string;
+  status?: string;
+  name?: string;
+  visible?: string;
+  type?: string;
+}
+
+export type SortDir = 'asc' | 'desc';
+
+export interface LessonCategoriesFiltersProps {
+  filters?: Filters;
+  sortDir?: SortDir;
+  fullData: LessonCategory[];
+}
+
+export function LessonCategoriesFilters({
+  filters = {},
+  sortDir = 'desc',
+  fullData,
+}: LessonCategoriesFiltersProps): React.JSX.Element {
+  const { t } = useTranslation();
+  const { email, phone, status, name, visible, type } = filters;
+
+  const [totalCount, setTotalCount] = React.useState<number>(0);
+  const [visibleCount, setVisibleCount] = React.useState<number>(0);
+  const [hiddenCount, setHiddenCount] = React.useState<number>(0);
+
+  const router = useRouter();
+
+  const selection = useLessonCategoriesSelection();
+
+  function getVisible(): number {
+    return fullData.reduce((count, item: LessonCategory) => {
+      return item.visible === 'visible' ? count + 1 : count;
+    }, 0);
+  }
+
+  function getHidden(): number {
+    return fullData.reduce((count, item: LessonCategory) => {
+      return item.visible === 'hidden' ? count + 1 : count;
+    }, 0);
+  }
+
+  // The tabs should be generated using API data.
+  const tabs = [
+    { label: t('All'), value: '', count: totalCount },
+    // { label: 'Active', value: 'active', count: 3 },
+    // { label: 'Pending', value: 'pending', count: 1 },
+    // { label: 'Blocked', value: 'blocked', count: 1 },
+    { label: t('visible'), value: 'visible', count: visibleCount },
+    { label: t('hidden'), value: 'hidden', count: hiddenCount },
+  ] as const;
+
+  const updateSearchParams = React.useCallback(
+    (newFilters: Filters, newSortDir: SortDir): void => {
+      const searchParams = new URLSearchParams();
+
+      if (newSortDir === 'asc') {
+        searchParams.set('sortDir', newSortDir);
+      }
+
+      if (newFilters.status) {
+        searchParams.set('status', newFilters.status);
+      }
+
+      if (newFilters.email) {
+        searchParams.set('email', newFilters.email);
+      }
+
+      if (newFilters.phone) {
+        searchParams.set('phone', newFilters.phone);
+      }
+
+      if (newFilters.name) {
+        searchParams.set('name', newFilters.name);
+      }
+
+      if (newFilters.type) {
+        searchParams.set('type', newFilters.type);
+      }
+
+      if (newFilters.visible) {
+        searchParams.set('visible', newFilters.visible);
+      }
+
+      router.push(`${paths.dashboard.lesson_categories.list}?${searchParams.toString()}`);
+    },
+    [router]
+  );
+
+  const handleClearFilters = React.useCallback(() => {
+    updateSearchParams({}, sortDir);
+  }, [updateSearchParams, sortDir]);
+
+  const handleStatusChange = React.useCallback(
+    (_: React.SyntheticEvent, value: string) => {
+      updateSearchParams({ ...filters, status: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleVisibleChange = React.useCallback(
+    (_: React.SyntheticEvent, value: string) => {
+      updateSearchParams({ ...filters, visible: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleNameChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, name: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleTypeChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, type: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleEmailChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, email: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handlePhoneChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, phone: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleSortChange = React.useCallback(
+    (event: SelectChangeEvent) => {
+      updateSearchParams(filters, event.target.value as SortDir);
+    },
+    [updateSearchParams, filters]
+  );
+
+  React.useEffect(() => {
+    const fetchCount = async (): Promise<void> => {
+      try {
+        const tc = await GetAllCount();
+        setTotalCount(tc);
+
+        const vc = await GetVisibleCount();
+        setVisibleCount(vc);
+
+        const hc = await GetHiddenCount();
+        setHiddenCount(hc);
+      } catch (error) {
+        //
+      }
+    };
+    void fetchCount();
+  }, []);
+
+  const hasFilters = status || email || phone || visible || name || type;
+
+  return (
+    <div>
+      <Tabs onChange={handleVisibleChange} sx={{ px: 3 }} value={visible ?? ''} variant="scrollable">
+        {tabs.map((tab) => (
+          <Tab
+            icon={<Chip label={tab.count} size="small" variant="soft" />}
+            iconPosition="end"
+            key={tab.value}
+            label={tab.label}
+            sx={{ minHeight: 'auto' }}
+            tabIndex={0}
+            value={tab.value}
+          />
+        ))}
+      </Tabs>
+      <Divider />
+      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
+          <FilterButton
+            displayValue={name}
+            label={t('Name')}
+            onFilterApply={(value) => {
+              handleNameChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleNameChange();
+            }}
+            popover={<NameFilterPopover />}
+            value={name}
+          />
+
+          <FilterButton
+            displayValue={type}
+            label={t('Type')}
+            onFilterApply={(value) => {
+              handleTypeChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleTypeChange();
+            }}
+            popover={<TypeFilterPopover />}
+            value={type}
+          />
+
+          {hasFilters ? <Button onClick={handleClearFilters}>{t('Clear filters')}</Button> : null}
+        </Stack>
+        {selection.selectedAny ? (
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+            <Typography color="text.secondary" variant="body2">
+              {selection.selected.size} {t('selected')}
+            </Typography>
+            <Button color="error" variant="contained">
+              {t('Delete')}
+            </Button>
+          </Stack>
+        ) : null}
+        <Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
+          <Option value="desc">{t('Newest')}</Option>
+          <Option value="asc">{t('Oldest')}</Option>
+        </Select>
+      </Stack>
+    </div>
+  );
+}
+
+function TypeFilterPopover(): React.JSX.Element {
+  const { t } = useTranslation();
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by type')}>
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        {t('Apply')}
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function NameFilterPopover(): React.JSX.Element {
+  const { t } = useTranslation();
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title={t('Filter by name')}>
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        {t('Apply')}
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function EmailFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function PhoneFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}

002_source/cms/src/components/dashboard/connective/lesson-categories-pagination.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+// lesson-categories-pagination.tsx
+// RULES:
+// T.B.A.
+import * as React from 'react';
+import TablePagination from '@mui/material/TablePagination';
+
+function noop(): void {
+  return undefined;
+}
+
+interface LessonCategoriesPaginationProps {
+  count: number;
+  page: number;
+  //
+  setPage: (page: number) => void;
+  setRowsPerPage: (page: number) => void;
+  rowsPerPage: number;
+}
+
+export function LessonCategoriesPagination({
+  count,
+  page,
+  //
+  setPage,
+  setRowsPerPage,
+  rowsPerPage,
+}: LessonCategoriesPaginationProps): React.JSX.Element {
+  // You should implement the pagination using a similar logic as the filters.
+  // Note that when page change, you should keep the filter search params.
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value));
+    // console.log(parseInt(event.target.value));
+  };
+
+  return (
+    <TablePagination
+      component="div"
+      count={count}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rowsPerPage={rowsPerPage}
+      rowsPerPageOptions={[5, 10, 25]}
+    />
+  );
+}

002_source/cms/src/components/dashboard/connective/lesson-categories-selection-context.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+
+// import type { LessonCategory } from '@/types/lesson-type';
+import { useSelection } from '@/hooks/use-selection';
+import type { Selection } from '@/hooks/use-selection';
+
+import { LessonCategory } from './type';
+
+// import type { LessonCategory } from '../lp_categories/type';
+
+// import type { LessonCategory } from './lesson-categories-table';
+// import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
+
+function noop(): void {
+  return undefined;
+}
+
+export interface LessonCategoriesSelectionContextValue extends Selection {}
+
+export const LessonCategoriesSelectionContext = React.createContext<LessonCategoriesSelectionContextValue>({
+  deselectAll: noop,
+  deselectOne: noop,
+  selectAll: noop,
+  selectOne: noop,
+  selected: new Set(),
+  selectedAny: false,
+  selectedAll: false,
+});
+
+interface LessonCategoriesSelectionProviderProps {
+  children: React.ReactNode;
+  lessonCategories: LessonCategory[];
+}
+
+export function LessonCategoriesSelectionProvider({
+  children,
+  lessonCategories = [],
+}: LessonCategoriesSelectionProviderProps): React.JSX.Element {
+  const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
+  const selection = useSelection(customerIds);
+
+  return (
+    <LessonCategoriesSelectionContext.Provider value={{ ...selection }}>
+      {children}
+    </LessonCategoriesSelectionContext.Provider>
+  );
+}
+
+export function useLessonCategoriesSelection(): LessonCategoriesSelectionContextValue {
+  return React.useContext(LessonCategoriesSelectionContext);
+}

002_source/cms/src/components/dashboard/connective/lesson-categories-table.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { LoadingButton } from '@mui/lab';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
+import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
+import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { DataTable } from '@/components/core/data-table';
+import type { ColumnDef } from '@/components/core/data-table';
+
+import ConfirmDeleteModal from './confirm-delete-modal';
+import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
+import type { LessonCategory } from './type';
+
+function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonCategory>[] {
+  return [
+    {
+      formatter: (row): React.JSX.Element => (
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center' }}
+        >
+          <Link
+            color="inherit"
+            component={RouterLink}
+            href={paths.dashboard.lesson_categories.details(row.id)}
+            sx={{ whiteSpace: 'nowrap' }}
+            variant="subtitle2"
+          >
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{ alignItems: 'center' }}
+            >
+              <Avatar
+                src={`http://127.0.0.1:8090/api/files/${row.collectionId}/${row.id}/${row.cat_image}`}
+                variant="rounded"
+              >
+                <ImagesIcon size={32} />
+              </Avatar>{' '}
+              <div>
+                <Box sx={{ whiteSpace: 'nowrap' }}>{row.cat_name}</Box>
+                <Typography
+                  color="text.secondary"
+                  variant="body2"
+                >
+                  slug: {row.cat_name}
+                </Typography>
+              </div>
+            </Stack>
+          </Link>
+        </Stack>
+      ),
+      name: 'Name',
+      width: '200px',
+    },
+    {
+      formatter: (row): React.JSX.Element => (
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center' }}
+        >
+          <LinearProgress
+            sx={{ flex: '1 1 auto' }}
+            value={row.quota}
+            variant="determinate"
+          />
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
+            {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
+          </Typography>
+        </Stack>
+      ),
+      // NOTE: please refer to translation.json here
+      name: 'word-count',
+      width: '100px',
+    },
+    {
+      formatter: (row): React.JSX.Element => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+
+        const mapping = {
+          active: {
+            label: 'Active',
+            icon: (
+              <CheckCircleIcon
+                color="var(--mui-palette-success-main)"
+                weight="fill"
+              />
+            ),
+          },
+          blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
+          pending: {
+            label: 'Pending',
+            icon: (
+              <ClockIcon
+                color="var(--mui-palette-warning-main)"
+                weight="fill"
+              />
+            ),
+          },
+          NA: {
+            label: 'NA',
+            icon: (
+              <ClockIcon
+                color="var(--mui-palette-warning-main)"
+                weight="fill"
+              />
+            ),
+          },
+        } as const;
+        const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
+
+        return (
+          <Button
+            onClick={() => {
+              toast.error('sorry but not implementd');
+            }}
+            style={{ backgroundColor: 'transparent' }}
+          >
+            {/* <Chip icon={icon} label={label} size="small" variant="outlined" /> */}
+            {label}
+          </Button>
+        );
+      },
+      name: 'Status',
+      width: '150px',
+    },
+    {
+      formatter(row) {
+        return dayjs(row.createdAt).format('MMM D, YYYY');
+      },
+      name: 'Created at',
+      width: '100px',
+    },
+    {
+      formatter: (row): React.JSX.Element => (
+        <Stack
+          direction="row"
+          spacing={1}
+        >
+          <LoadingButton
+            //
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.lesson_categories.details(row.id)}
+          >
+            <PencilSimpleIcon size={24} />
+          </LoadingButton>
+          <LoadingButton
+            color="error"
+            disabled={row.isEmpty}
+            onClick={() => {
+              handleDeleteClick(row.id);
+            }}
+          >
+            <TrashSimpleIcon size={24} />
+          </LoadingButton>
+        </Stack>
+      ),
+      name: 'Actions',
+      hideName: true,
+      width: '100px',
+      align: 'right',
+    },
+  ];
+}
+
+export interface LessonCategoriesTableProps {
+  rows: LessonCategory[];
+  reloadRows: () => void;
+}
+
+export function LessonCategoriesTable({ rows, reloadRows }: LessonCategoriesTableProps): React.JSX.Element {
+  const { t } = useTranslation(['lesson_category']);
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLessonCategoriesSelection();
+
+  const [idToDelete, setIdToDelete] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+
+  function handleDeleteClick(testId: string): void {
+    setOpen(true);
+    setIdToDelete(testId);
+  }
+
+  return (
+    <React.Fragment>
+      <ConfirmDeleteModal
+        idToDelete={idToDelete}
+        open={open}
+        reloadRows={reloadRows}
+        setOpen={setOpen}
+      />
+      <DataTable<LessonCategory>
+        columns={columns(handleDeleteClick)}
+        onDeselectAll={deselectAll}
+        onDeselectOne={(_, row) => {
+          deselectOne(row.id);
+        }}
+        onSelectAll={selectAll}
+        onSelectOne={(_, row) => {
+          selectOne(row.id);
+        }}
+        rows={rows}
+        selectable
+        selected={selected}
+      />
+      {!rows.length ? (
+        <Box sx={{ p: 3 }}>
+          <Typography
+            color="text.secondary"
+            sx={{ textAlign: 'center' }}
+            variant="body2"
+          >
+            {/* TODO: use hyphen here */}
+            {t('no-lesson-categories-found')}
+          </Typography>
+        </Box>
+      ) : null}
+    </React.Fragment>
+  );
+}

002_source/cms/src/components/dashboard/connective/lesson-category-create-form.tsx

@@ -0,0 +1,350 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { COL_LESSON_CATEGORIES, NS_LESSON_CATEGORY } from '@/constants';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { LoadingButton } from '@mui/lab';
+import { Avatar, Divider, MenuItem } from '@mui/material';
+// import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
+// import axios from 'axios';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { fileToBase64 } from '@/lib/file-to-base64';
+import { Option } from '@/components/core/option';
+import { TextEditor } from '@/components/core/text-editor/text-editor';
+import { toast } from '@/components/core/toaster';
+
+const schema = zod.object({
+  avatar: zod.string().optional(),
+  name: zod.string().min(1, 'Name is required').max(255),
+  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
+  phone: zod.string().min(1, 'Phone is required').max(15),
+  company: zod.string().max(255),
+  billingAddress: zod.object({
+    country: zod.string().min(1, 'Country is required').max(255),
+    state: zod.string().min(1, 'State is required').max(255),
+    city: zod.string().min(1, 'City is required').max(255),
+    zipCode: zod.string().min(1, 'Zip code is required').max(255),
+    line1: zod.string().min(1, 'Street line 1 is required').max(255),
+    line2: zod.string().max(255).optional(),
+  }),
+  taxId: zod.string().max(255).optional(),
+  timezone: zod.string().min(1, 'Timezone is required').max(255),
+  language: zod.string().min(1, 'Language is required').max(255),
+  currency: zod.string().min(1, 'Currency is required').max(255),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  avatar: '',
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  billingAddress: { country: '', state: '', city: '', zipCode: '', line1: '', line2: '' },
+  taxId: '',
+  timezone: 'new_york',
+  language: 'en',
+  currency: 'USD',
+} satisfies Values;
+
+export function LessonCategoryCreateForm(): React.JSX.Element {
+  const router = useRouter();
+  const { t } = useTranslation(['common', 'lesson_category']);
+
+  const NS_DEFAULT = { ns: 'lesson_category' };
+
+  const [isCreating, setIsCreating] = React.useState<boolean>(false);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(
+    async (values: Values): Promise<void> => {
+      setIsCreating(true);
+      try {
+        // Make API request
+        toast.success('Customer updated');
+        router.push(paths.dashboard.lesson_categories.details('1'));
+      } catch (err) {
+        logger.error(err);
+        toast.error('Something went wrong!');
+      }
+    },
+    [router]
+  );
+
+  const avatarInputRef = React.useRef<HTMLInputElement>(null);
+  const avatar = watch('avatar');
+
+  const handleAvatarChange = React.useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        const url = await fileToBase64(file);
+        setValue('avatar', url);
+      }
+    },
+    [setValue]
+  );
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardContent>
+          <Stack
+            divider={<Divider />}
+            spacing={4}
+          >
+            <Stack spacing={3}>
+              <Typography variant="h6">{t('create.basic')}</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid xs={12}>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    sx={{ alignItems: 'center' }}
+                  >
+                    <Box
+                      sx={{
+                        border: '1px dashed var(--mui-palette-divider)',
+                        borderRadius: '5%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    >
+                      <Avatar
+                        variant="rounded"
+                        src={avatar}
+                        sx={{
+                          '--Avatar-size': '100px',
+                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
+                          alignItems: 'center',
+                          bgcolor: 'var(--mui-palette-background-level1)',
+                          color: 'var(--mui-palette-text-primary)',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <CameraIcon fontSize="var(--Icon-fontSize)" />
+                      </Avatar>
+                    </Box>
+                    <Stack
+                      spacing={1}
+                      sx={{ alignItems: 'flex-start' }}
+                    >
+                      <Typography variant="subtitle1">{t('create.avatar')}</Typography>
+                      <Typography variant="caption">{t('create.avatarRequirements')}</Typography>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        {t('create.avatar_select')}
+                      </Button>
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
+                        <InputLabel required>{t('create.name')}</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.email)}
+                        fullWidth
+                      >
+                        <InputLabel required>Email address</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          type="email"
+                        />
+                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="phone"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.phone)}
+                        fullWidth
+                      >
+                        <InputLabel required>Phone number</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="company"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.company)}
+                        fullWidth
+                      >
+                        <InputLabel>Company</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">{t('create.detail-information')}</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.country"
+                    render={({ field }) => (
+                      <Box>
+                        <Typography
+                          variant="subtitle1"
+                          color="text-secondary"
+                        >
+                          {t('create.description')}
+                        </Typography>
+                        <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
+                          <TextEditor
+                            content=""
+                            placeholder="Write something"
+                          />
+                        </Box>
+                      </Box>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.state"
+                    render={({ field }) => (
+                      <Box>
+                        <Typography
+                          variant="subtitle1"
+                          color="text.secondary"
+                        >
+                          {t('create.remarks')}
+                        </Typography>
+                        <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
+                          <TextEditor
+                            content=""
+                            placeholder="Write something"
+                          />
+                        </Box>
+                      </Box>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.lesson_categories.list}
+          >
+            {t('create.cancelButton')}
+          </Button>
+
+          <LoadingButton
+            disabled={isCreating}
+            loading={isCreating}
+            type="submit"
+            variant="contained"
+          >
+            {t('create.createButton')}
+          </LoadingButton>
+        </CardActions>
+      </Card>
+    </form>
+  );
+}

002_source/cms/src/components/dashboard/connective/lesson-category-edit-form.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import { COL_LESSON_CATEGORIES, NS_LESSON_CATEGORY } from '@/constants';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { LoadingButton } from '@mui/lab';
+import { Avatar, Divider, MenuItem } from '@mui/material';
+// import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+// import Checkbox from '@mui/material/Checkbox';
+
+import FormControl from '@mui/material/FormControl';
+// import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
+import type { RecordModel } from 'pocketbase';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { fileToBase64 } from '@/lib/file-to-base64';
+import { pb } from '@/lib/pb';
+import { Option } from '@/components/core/option';
+import { TextEditor } from '@/components/core/text-editor/text-editor';
+import { toast } from '@/components/core/toaster';
+import FormLoading from '@/components/loading';
+
+import ErrorDisplay from '../error';
+import { defaultLessonCategory } from './_constants';
+import type { EditFormProps, LessonCategory } from './type';
+
+// TODO: review this
+const schema = zod.object({
+  cat_name: zod.string().min(1, 'name-is-required').max(255),
+  //
+  pos: zod.number().min(1, 'Phone is required').max(99),
+  visible: zod.string().max(255),
+  //
+  description: zod.string().optional(),
+  remarks: zod.string().optional(),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  cat_name: '',
+  // cat_image: undefined,
+  pos: 0,
+  visible: 'hidden',
+  // lesson_id: 'default-lesson-id',
+  description: 'default-description',
+  remarks: 'default-remarks',
+  //
+} satisfies Values;
+
+export function LessonCategoryEditForm(): React.JSX.Element {
+  const router = useRouter();
+  const { t } = useTranslation(['common', 'lesson_category']);
+
+  const NS_DEFAULT = { ns: 'lesson_category' };
+
+  const { cat_id: catId } = useParams<{ cat_id: string }>();
+  //
+  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(false);
+  const [showError, setShowError] = React.useState<boolean>(false);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+    watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(async (values: Values): Promise<void> => {
+    setIsUpdating(true);
+    const tempUpdate: EditFormProps = {
+      cat_name: values.cat_name,
+      pos: values.pos,
+      visible: values.visible,
+      description: values.description,
+      remarks: values.remarks,
+      type: '',
+    };
+
+    pb.collection(COL_LESSON_CATEGORIES)
+      .update(catId, tempUpdate)
+      .then((res) => {
+        logger.debug(res);
+        toast.success(t('update.success', NS_DEFAULT));
+        router.push(paths.dashboard.lesson_categories.list);
+      })
+      .catch((err) => {
+        logger.error(err);
+        toast.error('Something went wrong!');
+      })
+      .finally(() => {
+        //
+        setIsUpdating(false);
+      });
+  }, []);
+
+  const avatarInputRef = React.useRef<HTMLInputElement>(null);
+  // const avatar = watch('avatar');
+
+  const handleAvatarChange = React.useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        const url = await fileToBase64(file);
+        // setValue('avatar', url);
+      }
+    },
+    [setValue]
+  );
+
+  const [textDescription, setTextDescription] = React.useState<string>('loading');
+  const [textRemarks, setTextRemarks] = React.useState<string>('loading');
+  const handleLoad = React.useCallback(
+    (id: string) => {
+      setShowLoading(true);
+      pb.collection(COL_LESSON_CATEGORIES)
+        .getOne(id)
+        .then((model: RecordModel) => {
+          const temp: LessonCategory = { ...defaultLessonCategory, ...model };
+          reset(temp);
+          setTextDescription(temp.description);
+          setTextRemarks(temp.remarks);
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error', NS_DEFAULT));
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [catId]
+  );
+
+  React.useEffect(() => {
+    handleLoad(catId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [catId]);
+
+  if (showLoading) return <FormLoading />;
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request', NS_DEFAULT)}
+        code="500"
+        details={t('error.detailed-error-information', NS_DEFAULT)}
+      />
+    );
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardContent>
+          <Stack divider={<Divider />} spacing={4}>
+            <Stack spacing={3}>
+              <Typography variant="h6">{t('edit.basic-info', NS_DEFAULT)}</Typography>
+              <Grid container spacing={3}>
+                <Grid xs={12}>
+                  <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
+                    <Box
+                      sx={{
+                        border: '1px dashed var(--mui-palette-divider)',
+                        borderRadius: '5%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    >
+                      {/*
+                      <Avatar
+                        src={avatar}
+                        sx={{
+                          '--Avatar-size': '100px',
+                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
+                          alignItems: 'center',
+                          bgcolor: 'var(--mui-palette-background-level1)',
+                          color: 'var(--mui-palette-text-primary)',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        // TODO: resume me
+                         <CameraIcon fontSize="var(--Icon-fontSize)" />
+                      </Avatar>
+                       */}
+                    </Box>
+                    <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
+                      <Typography variant="subtitle1">{t('edit.avatar', NS_DEFAULT)}</Typography>
+                      <Typography variant="caption">{t('edit.avatarRequirements', NS_DEFAULT)}</Typography>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        {t('edit.select', NS_DEFAULT)}
+                      </Button>
+                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    disabled={isUpdating}
+                    control={control}
+                    name="cat_name"
+                    render={({ field }) => (
+                      <FormControl disabled={isUpdating} error={Boolean(errors.cat_name)} fullWidth>
+                        <InputLabel required>{t('edit.name', NS_DEFAULT)}</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+
+                <Grid md={6} xs={12}>
+                  <Controller
+                    disabled={isUpdating}
+                    control={control}
+                    name="pos"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.pos)} fullWidth>
+                        <InputLabel required>{t('edit.position', NS_DEFAULT)}</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(parseInt(e.target.value));
+                          }}
+                          type="number"
+                        />
+
+                        {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    disabled={isUpdating}
+                    control={control}
+                    name="visible"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.visible)} fullWidth>
+                        <InputLabel>{t('edit.visible', NS_DEFAULT)}</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="visible">{t('edit.visible', NS_DEFAULT)}</MenuItem>
+                          <MenuItem value="hidden">{t('edit.hidden', NS_DEFAULT)}</MenuItem>
+                        </Select>
+
+                        {errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+
+            <Stack spacing={3}>
+              <Typography variant="h6">{t('create.detail-information', NS_DEFAULT)}</Typography>
+              <Grid container spacing={3}>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    disabled={isUpdating}
+                    control={control}
+                    name="description"
+                    render={({ field }) => {
+                      return (
+                        <Box>
+                          <Typography variant="subtitle1" color="text-secondary">
+                            {t('create.description', NS_DEFAULT)}
+                          </Typography>
+                          <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
+                            <TextEditor
+                              {...field}
+                              content={textDescription}
+                              onUpdate={({ editor }) => {
+                                field.onChange({ target: { value: editor.getHTML() } });
+                              }}
+                              placeholder={t('edit.write-something', NS_DEFAULT)}
+                            />
+                          </Box>
+                        </Box>
+                      );
+                    }}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    disabled={isUpdating}
+                    control={control}
+                    name="remarks"
+                    render={({ field }) => (
+                      <Box>
+                        <Typography variant="subtitle1" color="text.secondary">
+                          {t('create.remarks', NS_DEFAULT)}
+                        </Typography>
+                        <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
+                          <TextEditor
+                            content={textRemarks}
+                            onUpdate={({ editor }) => {
+                              field.onChange({ target: { value: editor.getText() } });
+                            }}
+                            hideToolbar
+                            placeholder={t('edit.write-something', NS_DEFAULT)}
+                          />
+                        </Box>
+                      </Box>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
+            {t('edit.cancelButton', NS_DEFAULT)}
+          </Button>
+
+          <LoadingButton disabled={isUpdating} loading={isUpdating} type="submit" variant="contained">
+            {t('edit.updateButton', NS_DEFAULT)}
+          </LoadingButton>
+        </CardActions>
+      </Card>
+    </form>
+  );
+}

002_source/cms/src/components/dashboard/connective/notifications.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+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 Chip from '@mui/material/Chip';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+
+import { dayjs } from '@/lib/dayjs';
+import { DataTable } from '@/components/core/data-table';
+import type { ColumnDef } from '@/components/core/data-table';
+import { Option } from '@/components/core/option';
+
+export interface Notification {
+  id: string;
+  type: string;
+  status: 'delivered' | 'pending' | 'failed';
+  createdAt: Date;
+}
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
+        {row.type}
+      </Typography>
+    ),
+    name: 'Type',
+    width: '300px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      const mapping = {
+        delivered: { label: 'Delivered', color: 'success' },
+        pending: { label: 'Pending', color: 'warning' },
+        failed: { label: 'Failed', color: 'error' },
+      } as const;
+      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
+
+      return <Chip color={color} label={label} size="small" variant="soft" />;
+    },
+    name: 'Status',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => (
+      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
+        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
+      </Typography>
+    ),
+    name: 'Date',
+    align: 'right',
+  },
+] satisfies ColumnDef<Notification>[];
+
+export interface NotificationsProps {
+  notifications: Notification[];
+}
+
+export function Notifications({ notifications }: NotificationsProps): React.JSX.Element {
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar>
+            <EnvelopeSimpleIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title="Notifications"
+      />
+      <CardContent>
+        <Stack spacing={3}>
+          <Stack spacing={2}>
+            <Select defaultValue="last_invoice" name="type" sx={{ maxWidth: '100%', width: '320px' }}>
+              <Option value="last_invoice">Resend last invoice</Option>
+              <Option value="password_reset">Send password reset</Option>
+              <Option value="verification">Send verification</Option>
+            </Select>
+            <div>
+              <Button startIcon={<EnvelopeSimpleIcon />} variant="contained">
+                Send email
+              </Button>
+            </div>
+          </Stack>
+          <Card sx={{ borderRadius: 1 }} variant="outlined">
+            <Box sx={{ overflowX: 'auto' }}>
+              <DataTable<Notification> columns={columns} rows={notifications} />
+            </Box>
+          </Card>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

002_source/cms/src/components/dashboard/connective/payments.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+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 Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { ShoppingCartSimple as ShoppingCartSimpleIcon } from '@phosphor-icons/react/dist/ssr/ShoppingCartSimple';
+
+import { dayjs } from '@/lib/dayjs';
+import type { ColumnDef } from '@/components/core/data-table';
+import { DataTable } from '@/components/core/data-table';
+
+export interface Payment {
+  currency: string;
+  amount: number;
+  invoiceId: string;
+  status: 'pending' | 'completed' | 'canceled' | 'refunded';
+  createdAt: Date;
+}
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Typography sx={{ whiteSpace: 'nowrap' }} variant="subtitle2">
+        {new Intl.NumberFormat('en-US', { style: 'currency', currency: row.currency }).format(row.amount)}
+      </Typography>
+    ),
+    name: 'Amount',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      const mapping = {
+        pending: { label: 'Pending', color: 'warning' },
+        completed: { label: 'Completed', color: 'success' },
+        canceled: { label: 'Canceled', color: 'error' },
+        refunded: { label: 'Refunded', color: 'error' },
+      } as const;
+      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
+
+      return <Chip color={color} label={label} size="small" variant="soft" />;
+    },
+    name: 'Status',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      return <Link variant="inherit">{row.invoiceId}</Link>;
+    },
+    name: 'Invoice ID',
+    width: '150px',
+  },
+  {
+    formatter: (row): React.JSX.Element => (
+      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
+        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
+      </Typography>
+    ),
+    name: 'Date',
+    align: 'right',
+  },
+] satisfies ColumnDef<Payment>[];
+
+export interface PaymentsProps {
+  ordersValue: number;
+  payments: Payment[];
+  refundsValue: number;
+  totalOrders: number;
+}
+
+export function Payments({ ordersValue, payments = [], refundsValue, totalOrders }: PaymentsProps): React.JSX.Element {
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <Button color="secondary" startIcon={<PlusIcon />}>
+            Create Payment
+          </Button>
+        }
+        avatar={
+          <Avatar>
+            <ShoppingCartSimpleIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title="Payments"
+      />
+      <CardContent>
+        <Stack spacing={3}>
+          <Card sx={{ borderRadius: 1 }} variant="outlined">
+            <Stack
+              direction="row"
+              divider={<Divider flexItem orientation="vertical" />}
+              spacing={3}
+              sx={{ justifyContent: 'space-between', p: 2 }}
+            >
+              <div>
+                <Typography color="text.secondary" variant="overline">
+                  Total orders
+                </Typography>
+                <Typography variant="h6">{new Intl.NumberFormat('en-US').format(totalOrders)}</Typography>
+              </div>
+              <div>
+                <Typography color="text.secondary" variant="overline">
+                  Orders value
+                </Typography>
+                <Typography variant="h6">
+                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(ordersValue)}
+                </Typography>
+              </div>
+              <div>
+                <Typography color="text.secondary" variant="overline">
+                  Refunds
+                </Typography>
+                <Typography variant="h6">
+                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(refundsValue)}
+                </Typography>
+              </div>
+            </Stack>
+          </Card>
+          <Card sx={{ borderRadius: 1 }} variant="outlined">
+            <Box sx={{ overflowX: 'auto' }}>
+              <DataTable<Payment> columns={columns} rows={payments} />
+            </Box>
+          </Card>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

002_source/cms/src/components/dashboard/connective/shipping-address.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+
+export interface Address {
+  id: string;
+  country: string;
+  state: string;
+  city: string;
+  zipCode: string;
+  street: string;
+  primary?: boolean;
+}
+
+export interface ShippingAddressProps {
+  address: Address;
+}
+
+export function ShippingAddress({ address }: ShippingAddressProps): React.ReactElement {
+  return (
+    <Card sx={{ borderRadius: 1, height: '100%' }} variant="outlined">
+      <CardContent>
+        <Stack spacing={2}>
+          <Typography>
+            {address.street},
+            <br />
+            {address.city}, {address.state}, {address.country},
+            <br />
+            {address.zipCode}
+          </Typography>
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+            {address.primary ? <Chip color="warning" label="Primary" variant="soft" /> : <span />}
+            <Button color="secondary" size="small" startIcon={<PencilSimpleIcon />}>
+              Edit
+            </Button>
+          </Stack>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

002_source/cms/src/components/dashboard/connective/type.d.ts

@@ -0,0 +1,47 @@
+export interface LessonCategory {
+  isEmpty?: boolean;
+  //
+  id: string;
+  collectionId: string;
+  //
+  cat_name: string;
+  cat_image_url?: string;
+  cat_image?: string;
+  pos: number;
+  visible: string;
+  lesson_id: string;
+  description: string;
+  remarks: string;
+  createdAt: Date;
+  //
+  name: string;
+  avatar: string;
+  email: string;
+  phone: string;
+  quota: number;
+  status: 'pending' | 'active' | 'blocked' | 'NA';
+}
+
+export interface CreateForm {
+  name: string;
+  type: string;
+  pos: number;
+  visible: string;
+  description: string;
+  isActive: boolean;
+  order: number;
+  imageUrl: string;
+}
+
+export interface EditFormProps {
+  cat_name: string;
+  pos: number;
+  visible: string;
+  description?: string;
+  remarks?: string;
+  type: string;
+}
+
+export interface Helloworld {
+  helloworld: string;
+}

002_source/cms/src/components/dashboard/cr/categories/cr-category-edit-form.tsx

@@ -127,7 +127,7 @@ export function CrCategoryEditForm(): React.JSX.Element {
         // TODO: remove below
         type: '',
       };
-
+      //
       try {
         const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
         logger.debug(result);

002_source/cms/src/components/dashboard/layout/config.ts

@@ -28,39 +28,32 @@ export const layoutConfig = {
       items: [
         {
           key: 'lesson-types',
-          title: 'type',
+          title: 'lesson-types',
           icon: 'users',
           items: [
             {
               key: 'lesson-types',
-              title: 'dashboard.lessonTypes.list',
+              title: 'lessonTypes.list',
               href: paths.dashboard.lesson_types.list,
-              //
-            },
-            {
-              key: 'lesson-types:create',
-              title: 'dashboard.lessonTypes.create',
-              href: paths.dashboard.lesson_types.create,
-            },
-          ],
             },
             {
               key: 'lesson-categories',
-          title: 'categories',
+              title: 'lessonCategories.list',
-          icon: 'users',
-          items: [
-            {
-              key: 'lesson-categories',
-              title: 'dashboard.lessonTypes.list',
               href: paths.dashboard.lesson_categories.list,
             },
             {
-              key: 'lesson-categories:create',
+              key: 'vocabulary',
-              title: 'dashboard.lessonTypes.create',
+              title: 'vocabularies.list',
-              href: paths.dashboard.lesson_categories.create,
+              href: paths.dashboard.vocabularies.list,
+            },
+            {
+              key: 'connective',
+              title: 'connectives.list',
+              href: paths.dashboard.connectives.list,
             },
           ],
         },
+
         {
           key: 'quiz_lp',
           title: 'listening-practice',
@@ -124,9 +117,10 @@ export const layoutConfig = {
           title: 'teachers',
           icon: 'users',
           items: [
-            { key: 'teachers', title: 'List teachers', href: paths.dashboard.teachers.list },
+            { key: 'teachers', title: 'List', href: paths.dashboard.teachers.list },
-            { key: 'teachers:create', title: 'Create teacher', href: paths.dashboard.teachers.create },
+            { key: 'teacher-mail', title: 'Mail', href: paths.dashboard.teachers.mail.list('1') },
-            { key: 'teachers:details', title: 'Teacher details', href: paths.dashboard.teachers.details('1') },
+            // { key: 'teachers:create', title: 'Create teacher', href: paths.dashboard.teachers.create },
+            // { key: 'teachers:details', title: 'Teacher details', href: paths.dashboard.teachers.details('1') },
           ],
         },
         {

002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx

@@ -18,46 +18,14 @@ import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
 import { useTranslation } from 'react-i18next';
 
 import { dayjs } from '@/lib/dayjs';
-
+// import type { Notification } from './type.d.tsx.del';
-export type Notification = { id: string; createdAt: Date; read: boolean } & (
+import { SampleNotifications } from './sample-notifications';
-  | { type: 'new_feature'; description: string }
+import { useHelloworld } from '@/hooks/use-helloworld';
-  | { type: 'new_company'; author: { name: string; avatar?: string }; company: { name: string } }
+import { getAllNotifications } from '@/db/Notifications/GetAll';
-  | { type: 'new_job'; author: { name: string; avatar?: string }; job: { title: string } }
+import { ListResult, RecordModel } from 'pocketbase';
-);
+import { defaultNotification } from '@/db/Notifications/constants';
-
+import { getNotificationsByUserId } from '@/db/Notifications/GetNotificationByUserId';
-const notifications = [
+import { Notification } from '@/db/Notifications/type';
-  {
-    id: 'EV-004',
-    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
-    read: false,
-    type: 'new_job',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
-    job: { title: 'Remote React / React Native Developer' },
-  },
-  {
-    id: 'EV-003',
-    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
-    read: true,
-    type: 'new_job',
-    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
-    job: { title: 'Senior Golang Backend Engineer' },
-  },
-  {
-    id: 'EV-002',
-    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
-    read: true,
-    type: 'new_feature',
-    description: 'Logistics management is now available',
-  },
-  {
-    id: 'EV-001',
-    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
-    read: true,
-    type: 'new_company',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
-    company: { name: 'Stripe' },
-  },
-] satisfies Notification[];
 
 export interface NotificationsPopoverProps {
   anchorEl: null | Element;
@@ -75,6 +43,25 @@ export function NotificationsPopover({
   open = false,
 }: NotificationsPopoverProps): React.JSX.Element {
   const { t } = useTranslation();
+  const [notiList, setNotiList] = React.useState<Notification[]>([]);
+
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const { data, handleClose, handleOpen, open: testOpen } = useHelloworld<string>();
+  React.useEffect(() => {
+    setLoading(true);
+    async function LoadAllNotifications() {
+      const notiList: Notification[] = await getNotificationsByUserId('1');
+      setNotiList(notiList);
+    }
+    setLoading(false);
+    void LoadAllNotifications();
+  }, []);
+
+  if (loading) return <>Loading</>;
+  if (error) return <>Error</>;
+  if (notiList.length == 0)
     return (
       <Popover
         anchorEl={anchorEl}
@@ -84,24 +71,44 @@ export function NotificationsPopover({
         slotProps={{ paper: { sx: { width: '380px' } } }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
       >
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}>
+        list is empty
+      </Popover>
+    );
+
+  return (
+    <Popover
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      onClose={onClose}
+      open={open}
+      slotProps={{ paper: { sx: { width: '380px' } } }}
+      transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+    >
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
+      >
         <Typography variant="h6">{t('Notifications')}</Typography>
         <Tooltip title={t('Mark all as read')}>
-          <IconButton edge="end" onClick={onMarkAllAsRead}>
+          <IconButton
+            edge="end"
+            onClick={onMarkAllAsRead}
+          >
             <EnvelopeSimpleIcon />
           </IconButton>
         </Tooltip>
       </Stack>
-      {notifications.length === 0 ? (
+      {notiList.length === 0 ? (
         <Box sx={{ p: 2 }}>
           <Typography variant="subtitle2">{t('There are no notifications')}</Typography>
         </Box>
       ) : (
         <Box sx={{ maxHeight: '270px', overflowY: 'auto' }}>
           <List disablePadding>
-            {notifications.map((notification, index) => (
+            {notiList.map((notification, index) => (
               <NotificationItem
-                divider={index < notifications.length - 1}
+                divider={index < SampleNotifications.length - 1}
                 key={notification.id}
                 notification={notification}
                 onRemove={() => {
@@ -124,10 +131,17 @@ interface NotificationItemProps {
 
 function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
   return (
-    <ListItem divider={divider} sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}>
+    <ListItem
+      divider={divider}
+      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
+    >
       <NotificationContent notification={notification} />
       <Tooltip title="Remove">
-        <IconButton edge="end" onClick={onRemove} size="small">
+        <IconButton
+          edge="end"
+          onClick={onRemove}
+          size="small"
+        >
           <XIcon />
         </IconButton>
       </Tooltip>
@@ -142,14 +156,21 @@ interface NotificationContentProps {
 function NotificationContent({ notification }: NotificationContentProps): React.JSX.Element {
   if (notification.type === 'new_feature') {
     return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
         <Avatar>
           <ChatTextIcon fontSize="var(--Icon-fontSize)" />
         </Avatar>
         <div>
           <Typography variant="subtitle2">New feature!</Typography>
           <Typography variant="body2">{notification.description}</Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
             {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
           </Typography>
         </div>
@@ -159,22 +180,35 @@ function NotificationContent({ notification }: NotificationContentProps): React.
 
   if (notification.type === 'new_company') {
     return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
         <Avatar src={notification.author.avatar}>
           <UserIcon />
         </Avatar>
         <div>
           <Typography variant="body2">
-            <Typography component="span" variant="subtitle2">
+            <Typography
+              component="span"
+              variant="subtitle2"
+            >
               {notification.author.name}
             </Typography>{' '}
             created{' '}
-            <Link underline="always" variant="body2">
+            <Link
+              underline="always"
+              variant="body2"
+            >
               {notification.company.name}
             </Link>{' '}
             company
           </Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
             {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
           </Typography>
         </div>
@@ -184,21 +218,34 @@ function NotificationContent({ notification }: NotificationContentProps): React.
 
   if (notification.type === 'new_job') {
     return (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'flex-start' }}
+      >
         <Avatar src={notification.author.avatar}>
           <UserIcon />
         </Avatar>
         <div>
           <Typography variant="body2">
-            <Typography component="span" variant="subtitle2">
+            <Typography
+              component="span"
+              variant="subtitle2"
+            >
               {notification.author.name}
             </Typography>{' '}
             added a new job{' '}
-            <Link underline="always" variant="body2">
+            <Link
+              underline="always"
+              variant="body2"
+            >
               {notification.job.title}
             </Link>
           </Typography>
-          <Typography color="text.secondary" variant="caption">
+          <Typography
+            color="text.secondary"
+            variant="caption"
+          >
             {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
           </Typography>
         </div>

002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx

@@ -0,0 +1,37 @@
+'use client';
+import { dayjs } from '@/lib/dayjs';
+import type { Notification } from './type.d.tsx.del';
+
+export const SampleNotifications = [
+  {
+    id: 'EV-004',
+    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
+    read: false,
+    type: 'new_job',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    job: { title: 'Remote React / React Native Developer' },
+  },
+  {
+    id: 'EV-003',
+    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
+    read: true,
+    type: 'new_job',
+    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
+    job: { title: 'Senior Golang Backend Engineer' },
+  },
+  {
+    id: 'EV-002',
+    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
+    read: true,
+    type: 'new_feature',
+    description: 'Logistics management is now available',
+  },
+  {
+    id: 'EV-001',
+    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
+    read: true,
+    type: 'new_company',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    company: { name: 'Stripe' },
+  },
+] satisfies Notification[];

002_source/cms/src/components/dashboard/lesson_category/lesson-category-create-form.tsx

@@ -75,8 +75,6 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
   const router = useRouter();
   const { t } = useTranslation(['common', 'lesson_category']);
 
-  const NS_DEFAULT = { ns: 'lesson_category' };
-
   const [isCreating, setIsCreating] = React.useState<boolean>(false);
 
   const {
@@ -121,12 +119,22 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Card>
         <CardContent>
-          <Stack divider={<Divider />} spacing={4}>
+          <Stack
+            divider={<Divider />}
+            spacing={4}
+          >
             <Stack spacing={3}>
-              <Typography variant="h6">{t('create.typeInformation', NS_DEFAULT)}</Typography>
+              <Typography variant="h6">{t('create.basic')}</Typography>
-              <Grid container spacing={3}>
+              <Grid
+                container
+                spacing={3}
+              >
                 <Grid xs={12}>
-                  <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    sx={{ alignItems: 'center' }}
+                  >
                     <Box
                       sx={{
                         border: '1px dashed var(--mui-palette-divider)',
@@ -151,9 +159,12 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
                         <CameraIcon fontSize="var(--Icon-fontSize)" />
                       </Avatar>
                     </Box>
-                    <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
+                    <Stack
-                      <Typography variant="subtitle1">{t('create.avatar', NS_DEFAULT)}</Typography>
+                      spacing={1}
-                      <Typography variant="caption">{t('create.avatarRequirements', NS_DEFAULT)}</Typography>
+                      sx={{ alignItems: 'flex-start' }}
+                    >
+                      <Typography variant="subtitle1">{t('create.avatar')}</Typography>
+                      <Typography variant="caption">{t('create.avatarRequirements')}</Typography>
                       <Button
                         color="secondary"
                         onClick={() => {
@@ -161,44 +172,70 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
                         }}
                         variant="outlined"
                       >
-                        {t('create.avatar_select', NS_DEFAULT)}
+                        {t('create.avatar_select')}
                       </Button>
-                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
                     </Stack>
                   </Stack>
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="name"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.name)} fullWidth>
+                      <FormControl
-                        <InputLabel required>{t('create.name', NS_DEFAULT)}</InputLabel>
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
+                        <InputLabel required>{t('create.name')}</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="email"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.email)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.email)}
+                        fullWidth
+                      >
                         <InputLabel required>Email address</InputLabel>
-                        <OutlinedInput {...field} type="email" />
+                        <OutlinedInput
+                          {...field}
+                          type="email"
+                        />
                         {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
                       </FormControl>
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="phone"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.phone)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.phone)}
+                        fullWidth
+                      >
                         <InputLabel required>Phone number</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
@@ -206,12 +243,18 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="company"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.company)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.company)}
+                        fullWidth
+                      >
                         <InputLabel>Company</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
@@ -222,35 +265,56 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
               </Grid>
             </Stack>
             <Stack spacing={3}>
-              <Typography variant="h6">{t('create.detail-information', NS_DEFAULT)}</Typography>
+              <Typography variant="h6">{t('create.detail-information')}</Typography>
-              <Grid container spacing={3}>
+              <Grid
-                <Grid md={6} xs={12}>
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.country"
                     render={({ field }) => (
                       <Box>
-                        <Typography variant="subtitle1" color="text-secondary">
+                        <Typography
-                          {t('create.description', NS_DEFAULT)}
+                          variant="subtitle1"
+                          color="text-secondary"
+                        >
+                          {t('create.description')}
                         </Typography>
                         <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
-                          <TextEditor content="" placeholder="Write something" />
+                          <TextEditor
+                            content=""
+                            placeholder="Write something"
+                          />
                         </Box>
                       </Box>
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="billingAddress.state"
                     render={({ field }) => (
                       <Box>
-                        <Typography variant="subtitle1" color="text.secondary">
+                        <Typography
-                          {t('create.remarks', NS_DEFAULT)}
+                          variant="subtitle1"
+                          color="text.secondary"
+                        >
+                          {t('create.remarks')}
                         </Typography>
                         <Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
-                          <TextEditor content="" placeholder="Write something" />
+                          <TextEditor
+                            content=""
+                            placeholder="Write something"
+                          />
                         </Box>
                       </Box>
                     )}
@@ -261,12 +325,21 @@ export function LessonCategoryCreateForm(): React.JSX.Element {
           </Stack>
         </CardContent>
         <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_categories.list}>
+          <Button
-            {t('create.cancelButton', NS_DEFAULT)}
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.lesson_categories.list}
+          >
+            {t('create.cancelButton')}
           </Button>
 
-          <LoadingButton disabled={isCreating} loading={isCreating} type="submit" variant="contained">
+          <LoadingButton
-            {t('create.createButton', NS_DEFAULT)}
+            disabled={isCreating}
+            loading={isCreating}
+            type="submit"
+            variant="contained"
+          >
+            {t('create.createButton')}
           </LoadingButton>
         </CardActions>
       </Card>

002_source/cms/src/components/dashboard/lesson_category/type.d.ts

@@ -1,3 +1,5 @@
+// RULES: obsoleted
+// please use `./cms/src/db/LessonCategories/type.d.ts`
 export interface LessonCategory {
   isEmpty?: boolean;
   //

002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx

@@ -113,12 +113,22 @@ export function LessonTypeCreateForm(): React.JSX.Element {
     <form onSubmit={handleSubmit(onSubmit)}>
       <Card>
         <CardContent>
-          <Stack divider={<Divider />} spacing={4}>
+          <Stack
+            divider={<Divider />}
+            spacing={4}
+          >
             <Stack spacing={3}>
-              <Typography variant="h6">{t('dashboard.lessonTypes.create.typeInformation')}</Typography>
+              <Typography variant="h6">{t('create.basic')}</Typography>
-              <Grid container spacing={3}>
+              <Grid
+                container
+                spacing={3}
+              >
                 <Grid xs={12}>
-                  <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
+                  <Stack
+                    direction="row"
+                    spacing={3}
+                    sx={{ alignItems: 'center' }}
+                  >
                     <Box
                       sx={{
                         border: '1px dashed var(--mui-palette-divider)',
@@ -127,7 +137,10 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                         p: '4px',
                       }}
                     />
-                    <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
+                    <Stack
+                      spacing={1}
+                      sx={{ alignItems: 'flex-start' }}
+                    >
                       <Typography variant="subtitle1">{t('dashboard.lessonTypes.create.avatar')}</Typography>
                       <Typography variant="caption">{t('dashboard.lessonTypes.create.avatarRequirements')}</Typography>
                       <Button
@@ -139,16 +152,27 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                       >
                         {t('dashboard.lessonTypes.create.select')}
                       </Button>
-                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
                     </Stack>
                   </Stack>
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="name"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.name)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
                         <InputLabel required>{t('dashboard.lessonTypes.create.name')}</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
@@ -156,12 +180,18 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="type"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.type)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.type)}
+                        fullWidth
+                      >
                         <InputLabel required>{t('dashboard.lessonTypes.create.type')}</InputLabel>
                         <OutlinedInput {...field} />
                         {errors.type ? <FormHelperText>{errors.type.message}</FormHelperText> : null}
@@ -169,12 +199,18 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="pos"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.pos)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.pos)}
+                        fullWidth
+                      >
                         <InputLabel required>{t('dashboard.lessonTypes.create.position')}</InputLabel>
                         <OutlinedInput
                           {...field}
@@ -188,12 +224,18 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                     )}
                   />
                 </Grid>
-                <Grid md={6} xs={12}>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
                   <Controller
                     control={control}
                     name="visible_to_user"
                     render={({ field }) => (
-                      <FormControl error={Boolean(errors.visible_to_user)} fullWidth>
+                      <FormControl
+                        error={Boolean(errors.visible_to_user)}
+                        fullWidth
+                      >
                         <InputLabel>{t('dashboard.lessonTypes.create.visibleToUser')}</InputLabel>
                         <Select {...field}>
                           <MenuItem value="visible">visible</MenuItem>
@@ -212,10 +254,19 @@ export function LessonTypeCreateForm(): React.JSX.Element {
           </Stack>
         </CardContent>
         <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
+          <Button
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.lesson_types.list}
+          >
             {t('dashboard.lessonTypes.create.cancelButton')}
           </Button>
-          <LoadingButton disabled={isCreating} loading={isCreating} type="submit" variant="contained">
+          <LoadingButton
+            disabled={isCreating}
+            loading={isCreating}
+            type="submit"
+            variant="contained"
+          >
             {t('dashboard.lessonTypes.create.createButton')}
           </LoadingButton>
         </CardActions>

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

@@ -127,7 +127,7 @@ export function MfCategoryEditForm(): React.JSX.Element {
         // TODO: remove below
         type: '',
       };
-
+      //
       try {
         const result = await pb.collection(COL_QUIZ_MF_CATEGORIES).update(catId, tempUpdate);
         logger.debug(result);

002_source/cms/src/components/dashboard/notification/type.d.ts

@@ -0,0 +1,12 @@
+export interface NotificationFormProps {
+  id?: string;
+  title: string;
+  message: string;
+  isRead: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface NotificationItem extends NotificationFormProps {
+  id: string;
+}

002_source/cms/src/components/dashboard/student/type.d.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+// RULES: sorting direction for student lists
 export type SortDir = 'asc' | 'desc';
 
+// RULES: core student data structure
 export interface Student {
   id: string;
   name: string;
@@ -14,6 +16,7 @@ export interface Student {
   updatedAt?: Date;
 }
 
+// RULES: form data structure for creating new student
 export interface CreateFormProps {
   name: string;
   email: string;
@@ -36,6 +39,7 @@ export interface CreateFormProps {
   // status?: 'pending' | 'active' | 'blocked';
 }
 
+// RULES: form data structure for editing existing student
 export interface EditFormProps {
   name: string;
   email: string;
@@ -57,11 +61,14 @@ export interface EditFormProps {
   // quota?: number;
   // status?: 'pending' | 'active' | 'blocked';
 }
+// RULES: filter props for student search and filtering
 export interface CustomersFiltersProps {
   filters?: Filters;
   sortDir?: SortDir;
   fullData: Student[];
 }
+
+// RULES: available filter options for student data
 export interface Filters {
   email?: string;
   phone?: string;

002_source/cms/src/components/dashboard/teacher/mail/attachments.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { DownloadSimple as DownloadSimpleIcon } from '@phosphor-icons/react/dist/ssr/DownloadSimple';
+import { File as FileIcon } from '@phosphor-icons/react/dist/ssr/File';
+
+import type { Attachment } from './types';
+
+export interface AttachmentsProps {
+  attachments?: Attachment[];
+}
+
+export function Attachments({ attachments = [] }: AttachmentsProps): React.JSX.Element {
+  const count = attachments.length;
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6">{count} attachments</Typography>
+      <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start', flexWrap: 'wrap' }}>
+        {attachments.map((attachment) => (
+          <Stack
+            direction="row"
+            key={attachment.id}
+            spacing={1}
+            sx={{ alignItems: 'center', cursor: 'pointer', display: 'flex' }}
+          >
+            {attachment.type === 'image' ? <Avatar src={attachment.url} variant="rounded" /> : null}
+            {attachment.type === 'file' ? (
+              <Avatar variant="rounded">
+                <FileIcon fontSize="var(--Icon-fontSize)" />
+              </Avatar>
+            ) : null}
+            <div>
+              <Typography noWrap variant="subtitle2">
+                {attachment.name}
+              </Typography>
+              <Typography color="text.secondary" variant="body2">
+                {attachment.size}
+              </Typography>
+            </div>
+          </Stack>
+        ))}
+      </Stack>
+      <div>
+        <Button color="secondary" size="small" startIcon={<DownloadSimpleIcon />}>
+          Download all
+        </Button>
+      </div>
+    </Stack>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/composer.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { ArrowsInSimple as ArrowsInSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsInSimple';
+import { ArrowsOutSimple as ArrowsOutSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsOutSimple';
+import { Image as ImageIcon } from '@phosphor-icons/react/dist/ssr/Image';
+import { Paperclip as PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';
+import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
+import type { EditorEvents } from '@tiptap/react';
+
+import { TextEditor } from '@/components/core/text-editor/text-editor';
+
+export interface ComposerProps {
+  onClose?: () => void;
+  open: boolean;
+}
+
+export function Composer({ onClose, open }: ComposerProps): React.JSX.Element | null {
+  const [isMaximized, setIsMaximized] = React.useState<boolean>(false);
+  const [message, setMessage] = React.useState<string>('');
+  const [subject, setSubject] = React.useState<string>('');
+  const [to, setTo] = React.useState<string>('');
+
+  const handleSubjectChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setSubject(event.target.value);
+  }, []);
+
+  const handleMessageChange = React.useCallback(({ editor }: EditorEvents['update']) => {
+    setMessage(editor.getText());
+  }, []);
+
+  const handleToChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setTo(event.target.value);
+  }, []);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Paper
+      sx={{
+        border: '1px solid var(--mui-palette-divider)',
+        bottom: 0,
+        boxShadow: 'var(--mui-shadows-16)',
+        height: '600px',
+        m: 2,
+        maxWidth: '100%',
+        position: 'fixed',
+        right: 0,
+        width: '600px',
+        zIndex: 'var(--mui-zIndex-modal)',
+        ...(isMaximized && { borderRadius: 0, height: '100%', left: 0, m: 0, top: 0, width: '100%' }),
+      }}
+    >
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center', display: 'flex', p: 2 }}>
+        <Box sx={{ flex: '1 1 auto' }}>
+          <Typography variant="h6">New message</Typography>
+        </Box>
+        {isMaximized ? (
+          <IconButton
+            onClick={() => {
+              setIsMaximized(false);
+            }}
+          >
+            <ArrowsInSimpleIcon />
+          </IconButton>
+        ) : (
+          <IconButton
+            onClick={() => {
+              setIsMaximized(true);
+            }}
+          >
+            <ArrowsOutSimpleIcon />
+          </IconButton>
+        )}
+        <IconButton onClick={onClose}>
+          <XIcon />
+        </IconButton>
+      </Stack>
+      <div>
+        <Input onChange={handleToChange} placeholder="To" value={to} />
+        <Divider />
+        <Input onChange={handleSubjectChange} placeholder="Subject" value={subject} />
+        <Divider />
+        <Box sx={{ '& .tiptap-root': { border: 'none', borderRadius: 0 }, '& .tiptap-container': { height: '300px' } }}>
+          <TextEditor content={message} onUpdate={handleMessageChange} placeholder="Leave a message" />
+        </Box>
+        <Divider />
+        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between', p: 2 }}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+            <Tooltip title="Attach image">
+              <IconButton>
+                <ImageIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Attach file">
+              <IconButton>
+                <PaperclipIcon />
+              </IconButton>
+            </Tooltip>
+          </Stack>
+          <div>
+            <Button variant="contained">Send</Button>
+          </div>
+        </Stack>
+      </div>
+    </Paper>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/label-item.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { Icon } from '@phosphor-icons/react/dist/lib/types';
+import { Bookmark as BookmarkIcon } from '@phosphor-icons/react/dist/ssr/Bookmark';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+import { File as FileIcon } from '@phosphor-icons/react/dist/ssr/File';
+import { PaperPlaneTilt as PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/ssr/PaperPlaneTilt';
+import { Star as StarIcon } from '@phosphor-icons/react/dist/ssr/Star';
+import { Tag as TagIcon } from '@phosphor-icons/react/dist/ssr/Tag';
+import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
+import { WarningCircle as WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';
+
+import type { Label } from './types';
+
+const systemLabelIcons: Record<string, Icon> = {
+  inbox: EnvelopeSimpleIcon,
+  sent: PaperPlaneTiltIcon,
+  trash: TrashIcon,
+  drafts: FileIcon,
+  spam: WarningCircleIcon,
+  starred: StarIcon,
+  important: BookmarkIcon,
+};
+
+function getIcon(label: Label): Icon {
+  if (label.type === 'system') {
+    return systemLabelIcons[label.id] ?? systemLabelIcons.inbox;
+  }
+
+  return TagIcon;
+}
+
+function getIconColor(label: Label, active?: boolean): string {
+  if (label.type === 'custom') {
+    return label.color ?? 'var(--mui-palette-text-secondary)';
+  }
+
+  return active ? 'var(--mui-palette-text-primary)' : 'var(--mui-palette-text-secondary)';
+}
+
+export interface LabelItemProps {
+  active?: boolean;
+  label: Label;
+  onSelect?: () => void;
+}
+
+export function LabelItem({ active, label, onSelect }: LabelItemProps): React.JSX.Element {
+  const Icon = getIcon(label);
+  const iconColor = getIconColor(label, active);
+  const showUnreadCount = (label.unreadCount ?? 0) > 0;
+
+  return (
+    <Box component="li" sx={{ userSelect: 'none' }}>
+      <Box
+        onClick={onSelect}
+        onKeyUp={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            onSelect?.();
+          }
+        }}
+        role="button"
+        sx={{
+          alignItems: 'center',
+          borderRadius: 1,
+          color: 'var(--mui-palette-text-secondary)',
+          cursor: 'pointer',
+          display: 'flex',
+          flex: '0 0 auto',
+          gap: 1,
+          p: '6px 16px',
+          textDecoration: 'none',
+          whiteSpace: 'nowrap',
+          ...(active && { bgcolor: 'var(--mui-palette-action-selected)', color: 'var(--mui-palette-text-primary)' }),
+          '&:hover': {
+            ...(!active && { bgcolor: 'var(--mui-palette-action-hover)', color: 'var(---mui-palette-text-primary)' }),
+          },
+        }}
+        tabIndex={0}
+      >
+        <Box sx={{ display: 'flex', flex: '0 0 auto' }}>
+          <Icon color={iconColor} fontSize="var(--icon-fontSize-md)" weight={active ? 'fill' : undefined} />
+        </Box>
+        <Box sx={{ flex: '1 1 auto' }}>
+          <Typography
+            component="span"
+            sx={{ color: 'inherit', fontSize: '0.875rem', fontWeight: 500, lineHeight: '28px' }}
+          >
+            {label.name}
+          </Typography>
+        </Box>
+        {showUnreadCount ? (
+          <Typography color="inherit" variant="subtitle2">
+            {label.unreadCount}
+          </Typography>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/mail-context.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+
+import type { Label, Thread } from './types';
+
+function noop(): void {
+  return undefined;
+}
+
+export interface MailContextValue {
+  labels: Label[];
+  threads: Thread[];
+  currentLabelId: string;
+  openDesktopSidebar: boolean;
+  setOpenDesktopSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+  openMobileSidebar: boolean;
+  setOpenMobileSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+  openCompose: boolean;
+  setOpenCompose: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const MailContext = React.createContext<MailContextValue>({
+  labels: [],
+  threads: [],
+  currentLabelId: 'inbox',
+  openDesktopSidebar: true,
+  setOpenDesktopSidebar: noop,
+  openMobileSidebar: true,
+  setOpenMobileSidebar: noop,
+  openCompose: false,
+  setOpenCompose: noop,
+});
+
+export interface MailProviderProps {
+  children: React.ReactNode;
+  labels: Label[];
+  threads: Thread[];
+  currentLabelId: string;
+}
+
+export function MailProvider({
+  children,
+  labels: initialLabels = [],
+  threads: initialThreads = [],
+  currentLabelId,
+}: MailProviderProps): React.JSX.Element {
+  const [labels, setLabels] = React.useState<Label[]>([]);
+  const [threads, setThreads] = React.useState<Thread[]>([]);
+  const [openDesktopSidebar, setOpenDesktopSidebar] = React.useState<boolean>(true);
+  const [openMobileSidebar, setOpenMobileSidebar] = React.useState<boolean>(false);
+  const [openCompose, setOpenCompose] = React.useState<boolean>(false);
+
+  React.useEffect((): void => {
+    setLabels(initialLabels);
+  }, [initialLabels]);
+
+  React.useEffect((): void => {
+    setThreads(initialThreads);
+  }, [initialThreads]);
+
+  return (
+    <MailContext.Provider
+      value={{
+        labels,
+        threads,
+        currentLabelId,
+        openDesktopSidebar,
+        setOpenDesktopSidebar,
+        openMobileSidebar,
+        setOpenMobileSidebar,
+        openCompose,
+        setOpenCompose,
+      }}
+    >
+      {children}
+    </MailContext.Provider>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/mail-view.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import { Composer } from './composer';
+import { MailContext } from './mail-context';
+import { Sidebar } from './sidebar';
+
+export interface MailViewProps {
+  children: React.ReactNode;
+}
+
+export function MailView({ children }: MailViewProps): React.JSX.Element {
+  const {
+    labels,
+    currentLabelId,
+    openDesktopSidebar,
+    openMobileSidebar,
+    setOpenMobileSidebar,
+    openCompose,
+    setOpenCompose,
+  } = React.useContext(MailContext);
+
+  return (
+    <React.Fragment>
+      <Box sx={{ display: 'flex', flex: '1 1 0', minHeight: 0 }}>
+        <Sidebar
+          currentLabelId={currentLabelId}
+          labels={labels}
+          onCloseMobile={() => {
+            setOpenMobileSidebar(false);
+          }}
+          onCompose={() => {
+            setOpenCompose(true);
+          }}
+          openDesktop={openDesktopSidebar}
+          openMobile={openMobileSidebar}
+        />
+        <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column', overflow: 'hidden' }}>{children}</Box>
+      </Box>
+      <Composer
+        onClose={() => {
+          setOpenCompose(false);
+        }}
+        open={openCompose}
+      />
+    </React.Fragment>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/message.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Markdown from 'react-markdown';
+
+export interface MessageProps {
+  content: string;
+}
+
+export function Message({ content }: MessageProps): React.JSX.Element {
+  return (
+    <Box
+      sx={{
+        '& h2': { fontWeight: 500, fontSize: '1.5rem', lineHeight: 1.2, mb: 3 },
+        '& h3': { fontWeight: 500, fontSize: '1.25rem', lineHeight: 1.2, mb: 3 },
+        '& p': { fontWeight: 400, fontSize: '1rem', lineHeight: 1.5, mb: 2, mt: 0 },
+      }}
+    >
+      <Markdown>{content}</Markdown>
+    </Box>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/reply.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { Image as ImageIcon } from '@phosphor-icons/react/dist/ssr/Image';
+import { Link as LinkIcon } from '@phosphor-icons/react/dist/ssr/Link';
+import { Paperclip as PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';
+import { Smiley as SmileyIcon } from '@phosphor-icons/react/dist/ssr/Smiley';
+
+import type { User } from '@/types/user';
+
+const user = {
+  id: 'USR-000',
+  name: 'Sofia Rivers',
+  avatar: '/assets/avatar.png',
+  email: 'sofia@devias.io',
+} satisfies User;
+
+export function Reply(): React.JSX.Element {
+  return (
+    <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start', flex: '0 0 auto', p: 3 }}>
+      <Avatar src={user.avatar} />
+      <Stack spacing={2} sx={{ flex: '1 1 auto' }}>
+        <OutlinedInput maxRows={7} minRows={3} multiline placeholder="Leave a message" />
+        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+            <Tooltip title="Attach image">
+              <IconButton>
+                <ImageIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Attach file">
+              <IconButton>
+                <PaperclipIcon />
+              </IconButton>
+            </Tooltip>
+            <IconButton>
+              <LinkIcon />
+            </IconButton>
+            <IconButton>
+              <SmileyIcon />
+            </IconButton>
+          </Stack>
+          <div>
+            <Button variant="contained">Reply</Button>
+          </div>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

002_source/cms/src/components/dashboard/teacher/mail/sidebar.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import ListSubheader from '@mui/material/ListSubheader';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
+
+import { paths } from '@/paths';
+import { useMediaQuery } from '@/hooks/use-media-query';
+
+import { LabelItem } from './label-item';
+import type { Label, LabelType } from './types';
+
+interface GroupedLabels {
+  system: Label[];
+  custom: Label[];
+}
+
+function groupLabels(labels: Label[]): GroupedLabels {
+  const groups: GroupedLabels = { system: [], custom: [] };
+
+  labels.forEach((label) => {
+    if (label.type === 'system') {
+      groups.system.push(label);
+    } else {
+      groups.custom.push(label);
+    }
+  });
+
+  return groups;
+}
+
+// A single sidebar component is used, because you might need to have internal state
+// shared between both mobile and desktop
+
+export interface SidebarProps {
+  currentLabelId?: string;
+  labels: Label[];
+  openDesktop?: boolean;
+  openMobile?: boolean;
+  onCloseMobile?: () => void;
+  onCompose?: () => void;
+}
+
+export function Sidebar({
+  currentLabelId,
+  labels,
+  onCloseMobile,
+  onCompose,
+  openDesktop = false,
+  openMobile = false,
+}: SidebarProps): React.JSX.Element {
+  const mdUp = useMediaQuery('up', 'md');
+
+  const content = (
+    <SidebarContent
+      closeOnSelect={!mdUp}
+      currentLabelId={currentLabelId}
+      labels={labels}
+      onClose={onCloseMobile}
+      onCompose={onCompose}
+    />
+  );
+
+  if (mdUp) {
+    return (
+      <Box
+        sx={{
+          borderRight: '1px solid var(--mui-palette-divider)',
+          flex: '0 0 auto',
+          ml: openDesktop ? 0 : '-320px',
+          position: 'relative',
+          transition: 'margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+          width: '320px',
+        }}
+      >
+        {content}
+      </Box>
+    );
+  }
+
+  return (
+    <Drawer PaperProps={{ sx: { maxWidth: '100%', width: '320px' } }} onClose={onCloseMobile} open={openMobile}>
+      {content}
+    </Drawer>
+  );
+}
+
+export interface SidebarContentProps {
+  closeOnSelect?: boolean;
+  currentLabelId?: string;
+  labels: Label[];
+  open?: boolean;
+  onClose?: () => void;
+  onCompose?: () => void;
+}
+
+function SidebarContent({
+  closeOnSelect,
+  currentLabelId,
+  labels,
+  onClose,
+  onCompose,
+}: SidebarContentProps): React.JSX.Element {
+  const router = useRouter();
+
+  const handleLabelSelect = React.useCallback(
+    (labelId: string) => {
+      if (closeOnSelect) {
+        onClose?.();
+      }
+
+      const href = paths.dashboard.mail.list(labelId);
+
+      router.push(href);
+    },
+    [router, closeOnSelect, onClose]
+  );
+
+  // Maybe use memo
+  const groupedLabels: GroupedLabels = groupLabels(labels);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Stack spacing={1} sx={{ flex: '0 0 auto', p: 2 }}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <Typography variant="h5">Mailbox</Typography>
+          <IconButton onClick={onClose} sx={{ display: { md: 'none' } }}>
+            <XIcon />
+          </IconButton>
+        </Stack>
+        <Button onClick={onCompose} startIcon={<PlusIcon />} variant="contained">
+          Compose
+        </Button>
+      </Stack>
+      <Divider />
+      <Box sx={{ flex: '1 1 auto', overflowY: 'auto', p: 2 }}>
+        {Object.keys(groupedLabels).map((type) => (
+          <React.Fragment key={type}>
+            {type === 'custom' ? (
+              <ListSubheader disableSticky>
+                <Typography color="text.secondary" variant="overline">
+                  Custom Labels
+                </Typography>
+              </ListSubheader>
+            ) : null}
+            <Stack component="ul" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
+              {groupedLabels[type as LabelType].map((label) => (
+                <LabelItem
+                  active={currentLabelId === label.id}
+                  key={label.id}
+                  label={label}
+                  onSelect={() => {
+                    handleLabelSelect(label.id);
+                  }}
+                />
+              ))}
+            </Stack>
+          </React.Fragment>
+        ))}
+      </Box>
+    </Box>
+  );
+}