Compare commits
20 Commits
b8e8968866
...
develop/io
| Author | SHA1 | Date | |
|---|---|---|---|
|
51935d203a | ||
|
|
9d3e832081 | ||
|
|
4c72861eda | ||
|
|
d0ea7e5452 | ||
|
|
7d70b5826b | ||
|
|
a00d1ee7ce | ||
|
|
7296a10ec1 | ||
|
|
957df690f4 | ||
|
|
45d5c23512 | ||
|
|
caa224cbb6 | ||
|
|
9be92b41d1 | ||
|
|
6e8fea3bdd | ||
|
|
df87cfb037 | ||
|
|
d73e5f9c22 | ||
|
|
6884f1466f | ||
|
|
d308131a8a | ||
|
|
b3ebe8309a | ||
|
|
fa35ef2bef | ||
|
|
0785fcd144 | ||
|
|
2dcc765072 |
33
002_source/cms/.vscode/extensions.json
vendored
Normal file
33
002_source/cms/.vscode/extensions.json
vendored
Normal file
@@ -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"
|
||||
]
|
||||
}
|
||||
20
002_source/cms/_AI_WORKSPACE/code/002_update_app_page.md
Normal file
20
002_source/cms/_AI_WORKSPACE/code/002_update_app_page.md
Normal file
@@ -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`
|
||||
@@ -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
|
||||
@@ -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`
|
||||
@@ -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,
|
||||
i will tell them the task afterwards
|
||||
- read the files, remember and link up the ideas in file stated above, i will tell them the task afterwards
|
||||
|
||||
- please review at least 3 times after you modified the code
|
||||
|
||||
## frameworks documentation and samples
|
||||
|
||||
- `MUI`
|
||||
- `<base_dir>/002_source/cms/src/components/widgets/forms` contains sample forms,
|
||||
|
||||
@@ -2,19 +2,26 @@ Hi, i need your help.
|
||||
|
||||
## task
|
||||
|
||||
i am working on a dbml file
|
||||
i got a schema.json from exported from pocketbase
|
||||
and i want to update it to my current dbml file (for documentation)
|
||||
i am working on a `dbml` file
|
||||
i got a `schema.json` which is exported from pocketbase
|
||||
and i want to update it to my current `dbml` file (one way process for documentation usage)
|
||||
|
||||
## Rules
|
||||
|
||||
- the collection from json file started with `_` can be ignored. they are system collection and should not appear in dbml
|
||||
- one collection from json file mapped with one table in dbml file
|
||||
- the `presentable` field from json file should be ignored.
|
||||
- the collection from `json` file started with `_` can be ignored. they are system collection and should not appear in `dbml`
|
||||
- one collection from `json` file mapped with one table in `dbml` file
|
||||
- the `presentable` field from `json` file should be ignored.
|
||||
- the `id` of collection in `json` file should be jod down in the comment of `dbml` file as an reference.
|
||||
|
||||
## 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
|
||||
|
||||
@@ -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`
|
||||
|
||||
0
002_source/cms/autogen_config.py
Normal file
0
002_source/cms/autogen_config.py
Normal file
@@ -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`
|
||||
@@ -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": "聽講練習"
|
||||
}
|
||||
{}
|
||||
|
||||
@@ -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 ?": "確定要刪除課程類型嗎?"
|
||||
}
|
||||
@@ -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 ?": "確定要刪除課程類型嗎?"
|
||||
}
|
||||
@@ -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": "查看聽力練習分類詳情"
|
||||
}
|
||||
}
|
||||
@@ -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": "詳細錯誤資訊"
|
||||
}
|
||||
48
002_source/cms/src/app/dashboard/connectives/create/page.tsx
Normal file
48
002_source/cms/src/app/dashboard/connectives/create/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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[];
|
||||
@@ -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</>
|
||||
}
|
||||
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
302
002_source/cms/src/app/dashboard/lesson_categories/list/page.tsx
Normal file
302
002_source/cms/src/app/dashboard/lesson_categories/list/page.tsx
Normal file
@@ -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;
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 { SampleTeachers } from './SampleTeachers';
|
||||
import type { Teacher } from '@/components/dashboard/teacher/type.d';
|
||||
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 };
|
||||
}
|
||||
@@ -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[];
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 />;
|
||||
}
|
||||
@@ -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 />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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[];
|
||||
228
002_source/cms/src/app/dashboard/vocabularies/list/page.tsx
Normal file
228
002_source/cms/src/app/dashboard/vocabularies/list/page.tsx
Normal file
@@ -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;
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
const helloworld = 'helloworld';
|
||||
|
||||
export { helloworld };
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
138
002_source/cms/src/components/dashboard/connective/payments.tsx
Normal file
138
002_source/cms/src/components/dashboard/connective/payments.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
47
002_source/cms/src/components/dashboard/connective/type.d.ts
vendored
Normal file
47
002_source/cms/src/components/dashboard/connective/type.d.ts
vendored
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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',
|
||||
icon: 'users',
|
||||
items: [
|
||||
{
|
||||
key: 'lesson-categories',
|
||||
title: 'dashboard.lessonTypes.list',
|
||||
title: 'lessonCategories.list',
|
||||
href: paths.dashboard.lesson_categories.list,
|
||||
},
|
||||
{
|
||||
key: 'lesson-categories:create',
|
||||
title: 'dashboard.lessonTypes.create',
|
||||
href: paths.dashboard.lesson_categories.create,
|
||||
key: 'vocabulary',
|
||||
title: 'vocabularies.list',
|
||||
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:create', title: 'Create teacher', href: paths.dashboard.teachers.create },
|
||||
{ key: 'teachers:details', title: 'Teacher details', href: paths.dashboard.teachers.details('1') },
|
||||
{ key: 'teachers', title: 'List', href: paths.dashboard.teachers.list },
|
||||
{ key: 'teacher-mail', title: 'Mail', href: paths.dashboard.teachers.mail.list('1') },
|
||||
// { key: 'teachers:create', title: 'Create teacher', href: paths.dashboard.teachers.create },
|
||||
// { key: 'teachers:details', title: 'Teacher details', href: paths.dashboard.teachers.details('1') },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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';
|
||||
|
||||
export type Notification = { id: string; createdAt: Date; read: boolean } & (
|
||||
| { type: 'new_feature'; description: string }
|
||||
| { type: 'new_company'; author: { name: string; avatar?: string }; company: { name: string } }
|
||||
| { type: 'new_job'; author: { name: string; avatar?: string }; job: { title: string } }
|
||||
);
|
||||
|
||||
const notifications = [
|
||||
{
|
||||
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[];
|
||||
// import type { Notification } from './type.d.tsx.del';
|
||||
import { SampleNotifications } from './sample-notifications';
|
||||
import { useHelloworld } from '@/hooks/use-helloworld';
|
||||
import { getAllNotifications } from '@/db/Notifications/GetAll';
|
||||
import { ListResult, RecordModel } from 'pocketbase';
|
||||
import { defaultNotification } from '@/db/Notifications/constants';
|
||||
import { getNotificationsByUserId } from '@/db/Notifications/GetNotificationByUserId';
|
||||
import { Notification } from '@/db/Notifications/type';
|
||||
|
||||
export interface NotificationsPopoverProps {
|
||||
anchorEl: null | Element;
|
||||
@@ -75,6 +43,38 @@ 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}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
slotProps={{ paper: { sx: { width: '380px' } } }}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
>
|
||||
list is empty
|
||||
</Popover>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
anchorEl={anchorEl}
|
||||
@@ -84,24 +84,31 @@ 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 }}>
|
||||
<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>
|
||||
@@ -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[];
|
||||
@@ -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>
|
||||
<Grid container spacing={3}>
|
||||
<Typography variant="h6">{t('create.basic')}</Typography>
|
||||
<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' }}>
|
||||
<Typography variant="subtitle1">{t('create.avatar', NS_DEFAULT)}</Typography>
|
||||
<Typography variant="caption">{t('create.avatarRequirements', NS_DEFAULT)}</Typography>
|
||||
<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={() => {
|
||||
@@ -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>
|
||||
<InputLabel required>{t('create.name', NS_DEFAULT)}</InputLabel>
|
||||
<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}>
|
||||
<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>
|
||||
<Grid container spacing={3}>
|
||||
<Grid md={6} xs={12}>
|
||||
<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', NS_DEFAULT)}
|
||||
<Typography
|
||||
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">
|
||||
{t('create.remarks', NS_DEFAULT)}
|
||||
<Typography
|
||||
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}>
|
||||
{t('create.cancelButton', NS_DEFAULT)}
|
||||
<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', NS_DEFAULT)}
|
||||
<LoadingButton
|
||||
disabled={isCreating}
|
||||
loading={isCreating}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
>
|
||||
{t('create.createButton')}
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// RULES: obsoleted
|
||||
// please use `./cms/src/db/LessonCategories/type.d.ts`
|
||||
export interface LessonCategory {
|
||||
isEmpty?: boolean;
|
||||
//
|
||||
|
||||
@@ -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>
|
||||
<Grid container spacing={3}>
|
||||
<Typography variant="h6">{t('create.basic')}</Typography>
|
||||
<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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
12
002_source/cms/src/components/dashboard/notification/type.d.ts
vendored
Normal file
12
002_source/cms/src/components/dashboard/notification/type.d.ts
vendored
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
172
002_source/cms/src/components/dashboard/teacher/mail/sidebar.tsx
Normal file
172
002_source/cms/src/components/dashboard/teacher/mail/sidebar.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user