Compare commits
6 Commits
develop/cm
...
633a1d3a4c
| Author | SHA1 | Date | |
|---|---|---|---|
|
633a1d3a4c | ||
|
|
64b5f89fdf | ||
|
|
f87dd2c3b1 | ||
|
|
8b3dfe69e4 | ||
|
|
375b0a3593 | ||
|
|
bd907b4dde |
@@ -1,15 +0,0 @@
|
||||
# guideline
|
||||
|
||||
- please divide the problem into small parts
|
||||
- if you found youself cannot understand the problem, please stop and ask how to do
|
||||
- if you found youself cannot solve the problem, plesae stop and ask how to do
|
||||
- review the whole solution before you reply to user
|
||||
- if code syntax is already there, do follow (e.g. naming convention, syntax) the existing code
|
||||
|
||||
- example for page can be found in `./src/app/_helloworld/page.tsx`
|
||||
- example for component can be found in `./src/components/_helloworld/index.tsx`
|
||||
|
||||
- no need to explain the reason until you are told to do so
|
||||
- no need to show me the code change, at the end just simple summary in point form is ok
|
||||
|
||||
Thanks
|
||||
@@ -1,10 +0,0 @@
|
||||
Hi, i need your help.
|
||||
|
||||
i am working on a react typescript project
|
||||
i will show you part of the code and it is located in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/mf`
|
||||
|
||||
it is copied from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp`, i want you to help modifing from `lp` to `mf`, the corrosponding word is `lp -> listening practice` and `mf -> matching frenzy`,
|
||||
|
||||
please help to update the `imports`, variables/constants, functions, classes
|
||||
|
||||
thank you
|
||||
39
002_source/cms/_AI_WORKSPACE/components/001_INIT.md
Normal file
39
002_source/cms/_AI_WORKSPACE/components/001_INIT.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# AI GUIDELINE
|
||||
|
||||
## getting started
|
||||
|
||||
Imagine there is a:
|
||||
|
||||
1. developer (provide the modification)
|
||||
2. QA engineer (provide the feedback, and testing)
|
||||
3. software engineer
|
||||
|
||||
software engineer will:
|
||||
|
||||
- conclude and integrate the ideas from developer and QA engineer
|
||||
- make decision to modify the code accordingly.
|
||||
|
||||
no need to reply me what you are going on and your digest in this phase.
|
||||
just reply me "OK" when done
|
||||
|
||||
base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
|
||||
|
||||
- `schema.dbml`
|
||||
|
||||
- read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
|
||||
this is file in `dbml` format stating the main database structure
|
||||
|
||||
- `schema.json`
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/db/schema.json`
|
||||
this is the file of current pocketbase schema
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/constants.ts`
|
||||
this is the content of `@/constants`
|
||||
|
||||
- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
|
||||
|
||||
- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
|
||||
|
||||
- read, remember and link up the ideas in file stated above,
|
||||
i will tell them the task afterwards
|
||||
22
002_source/cms/_AI_WORKSPACE/components/002_PROMPT.md
Normal file
22
002_source/cms/_AI_WORKSPACE/components/002_PROMPT.md
Normal file
@@ -0,0 +1,22 @@
|
||||
Hi, i need your help.
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
i've already copied the code(and it sub-directories) from
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp` (a.k.a. `lp`)
|
||||
to
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr` (a.k.a. `cr`)
|
||||
|
||||
i want you to:
|
||||
|
||||
- understand the relations (e.g. `lp` -> `lp_categories`, `lp` -> `COL_QUIZ_LP_CATEGORIES`)
|
||||
- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_CATEGORIES` -> `COL_QUIZ_CR_CATEGORIES` )
|
||||
- please create if you find any missing files/codes/constants
|
||||
|
||||
thank you
|
||||
|
||||
---
|
||||
|
||||
- compare the difference between `lp` and `mf`,
|
||||
- remember the differences and
|
||||
- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)
|
||||
@@ -1,36 +1,3 @@
|
||||
# AI GUIDELINE
|
||||
|
||||
## getting started
|
||||
|
||||
Imagine there is a software developer and a QA engineer to solve the problems together
|
||||
|
||||
They will:
|
||||
|
||||
no need to reply me what you are going on and your digest in this phase.
|
||||
just reply me "OK" when done
|
||||
|
||||
base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
|
||||
|
||||
- `schema.dbml`
|
||||
|
||||
- read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
|
||||
this is file in dbml syntax state the main database
|
||||
|
||||
- `schema.json`
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/db/schema.json`
|
||||
this is the file of live pocketbase schema output
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/constants.ts`
|
||||
this is the content of `@/constants`
|
||||
|
||||
- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
|
||||
|
||||
- read, remember and link up the ideas in file stated above,
|
||||
i will tell them the task afterwards
|
||||
|
||||
---
|
||||
|
||||
The software engineer will provide solutions,
|
||||
while QA engineer will feedback the opinion.
|
||||
|
||||
37
002_source/cms/_AI_WORKSPACE/db/001_INIT.md
Normal file
37
002_source/cms/_AI_WORKSPACE/db/001_INIT.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# AI GUIDELINE
|
||||
|
||||
## getting started
|
||||
|
||||
Imagine there is a
|
||||
|
||||
1. software developer and a
|
||||
2. QA engineer
|
||||
|
||||
to solve the problems together
|
||||
|
||||
They will:
|
||||
|
||||
no need to reply me what you are going on and your digest in this phase.
|
||||
just reply me "OK" when done
|
||||
|
||||
base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
|
||||
|
||||
- `schema.dbml`
|
||||
|
||||
- read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
|
||||
this is file in `dbml` format stating the main database structure
|
||||
|
||||
- `schema.json`
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/db/schema.json`
|
||||
this is the file of current pocketbase schema
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/constants.ts`
|
||||
this is the content of `@/constants`
|
||||
|
||||
- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
|
||||
|
||||
- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
|
||||
|
||||
- read, remember and link up the ideas in file stated above,
|
||||
i will tell them the task afterwards
|
||||
22
002_source/cms/_AI_WORKSPACE/db/002_PROMPT.md
Normal file
22
002_source/cms/_AI_WORKSPACE/db/002_PROMPT.md
Normal file
@@ -0,0 +1,22 @@
|
||||
Hi, i need your help.
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
please read the code in directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizLPQuestions` (denoted `QuizLPQuestions`)
|
||||
|
||||
i want you to:
|
||||
|
||||
- list files from directory `QuizLPQuestions` and use them as template
|
||||
- understand the relations (e.g. `lp` -> `lp_categories`, `lp` -> `COL_QUIZ_LP_CATEGORIES`)
|
||||
- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_CATEGORIES` -> `COL_QUIZ_CR_CATEGORIES` )
|
||||
- please create if you find any missing files/codes/constants
|
||||
- using template, create the similar code for `cr` named `QuizCRCategories`
|
||||
|
||||
thank you
|
||||
|
||||
---
|
||||
|
||||
- I proofed the code is working already, what you need to do is refactoring of the `variables`, `functions`, `classes`, `constants` (`lp` -> `cr`)
|
||||
- compare the difference between `lp` and `mf`,
|
||||
- remember the differences and
|
||||
- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)
|
||||
22
002_source/cms/_AI_WORKSPACE/db/002_PROMPT_categories.md
Normal file
22
002_source/cms/_AI_WORKSPACE/db/002_PROMPT_categories.md
Normal file
@@ -0,0 +1,22 @@
|
||||
Hi, i need your help.
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
please read the code in directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizLPCategories` (denoted `QuizLPCategories`)
|
||||
|
||||
i want you to:
|
||||
|
||||
- list files from directory `QuizLPCategories` and use them as template
|
||||
- understand the relations (e.g. `lp` -> `lp_categories`, `lp` -> `COL_QUIZ_LP_CATEGORIES`)
|
||||
- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_CATEGORIES` -> `COL_QUIZ_CR_CATEGORIES` )
|
||||
- please create if you find any missing files/codes/constants
|
||||
- using template, create the similar code for `cr` named `QuizCRCategories`
|
||||
|
||||
thank you
|
||||
|
||||
---
|
||||
|
||||
- I proofed the code is working already, what you need to do is refactoring of the `variables`, `functions`, `classes`, `constants` (`lp` -> `cr`)
|
||||
- compare the difference between `lp` and `mf`,
|
||||
- remember the differences and
|
||||
- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)
|
||||
22
002_source/cms/_AI_WORKSPACE/db/002_PROMPT_questions.md
Normal file
22
002_source/cms/_AI_WORKSPACE/db/002_PROMPT_questions.md
Normal file
@@ -0,0 +1,22 @@
|
||||
Hi, i need your help.
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
please read the code in directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizLPQuestions` (denoted `QuizLPQuestions`)
|
||||
|
||||
i want you to:
|
||||
|
||||
- list files from directory `QuizLPQuestions` and use them as template
|
||||
- understand the relations (e.g. `lp` -> `lp_Questions`, `lp` -> `COL_QUIZ_LP_QUESTIONS`)
|
||||
- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_QUESTIONS` -> `COL_QUIZ_CR_Questions` )
|
||||
- please create if you find any missing files/codes/constants
|
||||
- using template, create the similar code for `cr` named `QuizCRQuestions`
|
||||
|
||||
thank you
|
||||
|
||||
---
|
||||
|
||||
- I proofed the code is working already, what you need to do is refactoring of the `variables`, `functions`, `classes`, `constants` (`lp` -> `cr`)
|
||||
- compare the difference between `lp` and `mf`,
|
||||
- remember the differences and
|
||||
- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)
|
||||
66
002_source/cms/_AI_WORKSPACE/db/DB_PROMPT.MD
Normal file
66
002_source/cms/_AI_WORKSPACE/db/DB_PROMPT.MD
Normal file
@@ -0,0 +1,66 @@
|
||||
The software engineer will provide solutions,
|
||||
while QA engineer will feedback the opinion.
|
||||
|
||||
this is now not in debug phase,
|
||||
so, no need to reply me what they are going on or their insight throught the prompt.
|
||||
just reply me "OK" when done
|
||||
|
||||
---
|
||||
|
||||
clone `GetVisibleCount.tsx` and `GetHiddenCount.tsx` from `LessonTypes` to `LessonCategories` and update it
|
||||
|
||||
please draft `GetHiddenCount.tsx` for COL_LESSON_TYPES and `status = hidden`
|
||||
|
||||
well done !, please proceed to another request
|
||||
|
||||
working directory: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db`
|
||||
|
||||
according information from `schema.json`, get the collection of `Students`
|
||||
|
||||
pleaes clone the `tsx` files from `LessonTypes` and `LessonCategories` to `Students` and update the content
|
||||
|
||||
when you draft coding, review file and append with `.tsx.draft`
|
||||
|
||||
---
|
||||
|
||||
- this is part of react typescript project, with pocketbase
|
||||
- `schema.dbml`, describe the collections(tables)
|
||||
- folder `LessonCategories`, the correct references
|
||||
- folder `LessonTypes`, the correct references
|
||||
- you can find the `schema.dbml` and schema information from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006`
|
||||
- do not read root directory, assume it is a fresh copy of nextjs project is ok
|
||||
|
||||
## instruction
|
||||
|
||||
- break the questions into smaller parts
|
||||
- review file append with `.draft`, see if the content aligned with the correct references
|
||||
- read and understand `dbml` file
|
||||
- lookup the every folder
|
||||
|
||||
## tasks
|
||||
|
||||
Thanks
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
please revise
|
||||
|
||||
please revise
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx` `interface LpCategory`
|
||||
|
||||
to the collection `QuizLPCategories` align the dbml file in the previous prompt
|
||||
|
||||
please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp_categories/_constants.tsx`
|
||||
|
||||
to follow the type definition in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx`, the constant `defaultLpCategory`
|
||||
|
||||
---
|
||||
|
||||
the constants file (`@/constants`) was `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/constants.ts`
|
||||
|
||||
please help to fix the `tsx` files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizMFCategories`,
|
||||
the `COL` constants is wrongly used, it should refer to `COL_QUIZ_MF_CATEGORIES`. thanks
|
||||
|
||||
please update the `COL_XXXX` TO COL_MF_CATEGORIES
|
||||
38
002_source/cms/_AI_WORKSPACE/get_summary/001_INIT.md
Normal file
38
002_source/cms/_AI_WORKSPACE/get_summary/001_INIT.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# AI GUIDELINE
|
||||
|
||||
## getting started
|
||||
|
||||
Imagine there is a
|
||||
|
||||
1. software developer and a
|
||||
2. QA engineer
|
||||
3. technical writer
|
||||
|
||||
to solve the problems together
|
||||
|
||||
They will:
|
||||
|
||||
no need to reply me what you are going on and your digest in this phase.
|
||||
just reply me "OK" when done
|
||||
|
||||
base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
|
||||
|
||||
- `schema.dbml`
|
||||
|
||||
- read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
|
||||
this is file in `dbml` format stating the main database structure
|
||||
|
||||
- `schema.json`
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/db/schema.json`
|
||||
this is the file of current pocketbase schema
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/constants.ts`
|
||||
this is the content of `@/constants`
|
||||
|
||||
- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
|
||||
|
||||
- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
|
||||
|
||||
- read, remember and link up the ideas in file stated above,
|
||||
i will tell them the task afterwards
|
||||
15
002_source/cms/_AI_WORKSPACE/get_summary/002_PROMPT.md
Normal file
15
002_source/cms/_AI_WORKSPACE/get_summary/002_PROMPT.md
Normal file
@@ -0,0 +1,15 @@
|
||||
Hi, i need your help.
|
||||
|
||||
## background
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
## task
|
||||
|
||||
i want you to summarize the code, write it to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/categories/_PROMPT.md`
|
||||
|
||||
## steps
|
||||
|
||||
1. list all `tsx` files from directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/categories`
|
||||
2. take a look to the `tsx` file listed. try to understand what's going on (e.g. it is a component for `cr-categories`, it is a table)
|
||||
3. write your result to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/categories/_PROMPT.md`
|
||||
@@ -0,0 +1,17 @@
|
||||
Hi, i need your help.
|
||||
|
||||
## background
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
## task
|
||||
|
||||
i want you to summarize the code, write it to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/questions/_SUMMARY.md`
|
||||
|
||||
## steps
|
||||
|
||||
1. list all `tsx` files from directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/questions`
|
||||
2. read every `tsx` files listed. try to understand what's going on (e.g. it is a component for `cr-questions`, it is a table)
|
||||
3. read file `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/questions/_SUMMARY.md`.
|
||||
4. make use of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/questions/_SUMMARY.md` as template, update the content and create a new summary
|
||||
5. write your new summary to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/questions/_SUMMARY.md`
|
||||
@@ -0,0 +1,17 @@
|
||||
Hi, i need your help.
|
||||
|
||||
## background
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
## task
|
||||
|
||||
i want you to summarize the code, write it to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/categories/_SUMMARY.md`
|
||||
|
||||
## steps
|
||||
|
||||
1. list all `tsx` files from directory `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/categories`
|
||||
2. read every `tsx` files listed. try to understand what's going on (e.g. it is a component for `cr-categories`, it is a table)
|
||||
3. read file `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/categories/_SUMMARY.md`.
|
||||
4. make use of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/cr/categories/_SUMMARY.md` as template, update the content and create a new summary
|
||||
5. write your new summary to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp/categories/_SUMMARY.md`
|
||||
66
002_source/cms/_AI_WORKSPACE/get_summary/DB_PROMPT.MD
Normal file
66
002_source/cms/_AI_WORKSPACE/get_summary/DB_PROMPT.MD
Normal file
@@ -0,0 +1,66 @@
|
||||
The software engineer will provide solutions,
|
||||
while QA engineer will feedback the opinion.
|
||||
|
||||
this is now not in debug phase,
|
||||
so, no need to reply me what they are going on or their insight throught the prompt.
|
||||
just reply me "OK" when done
|
||||
|
||||
---
|
||||
|
||||
clone `GetVisibleCount.tsx` and `GetHiddenCount.tsx` from `LessonTypes` to `LessonCategories` and update it
|
||||
|
||||
please draft `GetHiddenCount.tsx` for COL_LESSON_TYPES and `status = hidden`
|
||||
|
||||
well done !, please proceed to another request
|
||||
|
||||
working directory: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db`
|
||||
|
||||
according information from `schema.json`, get the collection of `Students`
|
||||
|
||||
pleaes clone the `tsx` files from `LessonTypes` and `LessonCategories` to `Students` and update the content
|
||||
|
||||
when you draft coding, review file and append with `.tsx.draft`
|
||||
|
||||
---
|
||||
|
||||
- this is part of react typescript project, with pocketbase
|
||||
- `schema.dbml`, describe the collections(tables)
|
||||
- folder `LessonCategories`, the correct references
|
||||
- folder `LessonTypes`, the correct references
|
||||
- you can find the `schema.dbml` and schema information from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006`
|
||||
- do not read root directory, assume it is a fresh copy of nextjs project is ok
|
||||
|
||||
## instruction
|
||||
|
||||
- break the questions into smaller parts
|
||||
- review file append with `.draft`, see if the content aligned with the correct references
|
||||
- read and understand `dbml` file
|
||||
- lookup the every folder
|
||||
|
||||
## tasks
|
||||
|
||||
Thanks
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
please revise
|
||||
|
||||
please revise
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx` `interface LpCategory`
|
||||
|
||||
to the collection `QuizLPCategories` align the dbml file in the previous prompt
|
||||
|
||||
please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp_categories/_constants.tsx`
|
||||
|
||||
to follow the type definition in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx`, the constant `defaultLpCategory`
|
||||
|
||||
---
|
||||
|
||||
the constants file (`@/constants`) was `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/constants.ts`
|
||||
|
||||
please help to fix the `tsx` files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizMFCategories`,
|
||||
the `COL` constants is wrongly used, it should refer to `COL_QUIZ_MF_CATEGORIES`. thanks
|
||||
|
||||
please update the `COL_XXXX` TO COL_MF_CATEGORIES
|
||||
37
002_source/cms/_AI_WORKSPACE/pages/001_INIT.md
Normal file
37
002_source/cms/_AI_WORKSPACE/pages/001_INIT.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# AI GUIDELINE
|
||||
|
||||
## getting started
|
||||
|
||||
Imagine there is a
|
||||
|
||||
1. software developer and a
|
||||
2. QA engineer
|
||||
|
||||
to solve the problems together
|
||||
|
||||
They will:
|
||||
|
||||
no need to reply me what you are going on and your digest in this phase.
|
||||
just reply me "OK" when done
|
||||
|
||||
base_dir=`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project`
|
||||
|
||||
- `schema.dbml`
|
||||
|
||||
- read `<base_dir>/001_documentation/Requirements/REQ0006/schema.dbml`
|
||||
this is file in `dbml` format stating the main database structure
|
||||
|
||||
- `schema.json`
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/db/schema.json`
|
||||
this is the file of current pocketbase schema
|
||||
|
||||
- read `<base_dir>/002_source/cms/src/constants.ts`
|
||||
this is the content of `@/constants`
|
||||
|
||||
- look into the md files in folder `<base_dir>/002_source/cms/_AI_WORKSPACE/001_guideline`
|
||||
|
||||
- directory may contain `repomix-output.xml` file, that is a simple summary of all files inside the directory
|
||||
|
||||
- read, remember and link up the ideas in file stated above,
|
||||
i will tell them the task afterwards
|
||||
25
002_source/cms/_AI_WORKSPACE/pages/002_PROMPT.md
Normal file
25
002_source/cms/_AI_WORKSPACE/pages/002_PROMPT.md
Normal file
@@ -0,0 +1,25 @@
|
||||
Hi, i need your help.
|
||||
|
||||
i am working on a nextjs react typescript project
|
||||
|
||||
i've already copied the code(and it sub-directories) from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp` (a.k.a. `lp`) to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/cr` (a.k.a. `cr`)
|
||||
|
||||
i want you to:
|
||||
|
||||
- list files from directory
|
||||
|
||||
- `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lp`
|
||||
- `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/cr`
|
||||
|
||||
- understand the relations (e.g. `lp` -> `lp_categories`, `lp` -> `COL_QUIZ_LP_CATEGORIES`)
|
||||
- review if any remaining `lp` or `mf` exist in `cr` directory and please help to do replace it to `cr`. (e.g. `COL_QUIZ_LP_CATEGORIES` -> `COL_QUIZ_CR_CATEGORIES` )
|
||||
- please create if you find any missing files/codes/constants
|
||||
|
||||
thank you
|
||||
|
||||
---
|
||||
|
||||
- I proofed the code is working already, what you need to do is refactoring of the `variables`, `functions`, `classes`, `constants` (`lp` -> `cr`)
|
||||
- compare the difference between `lp` and `mf`,
|
||||
- remember the differences and
|
||||
- draft the new type `cr` (e.g. modify the `import` locations, variables, functions, classes, constants name etc.)
|
||||
66
002_source/cms/_AI_WORKSPACE/pages/DB_PROMPT.MD
Normal file
66
002_source/cms/_AI_WORKSPACE/pages/DB_PROMPT.MD
Normal file
@@ -0,0 +1,66 @@
|
||||
The software engineer will provide solutions,
|
||||
while QA engineer will feedback the opinion.
|
||||
|
||||
this is now not in debug phase,
|
||||
so, no need to reply me what they are going on or their insight throught the prompt.
|
||||
just reply me "OK" when done
|
||||
|
||||
---
|
||||
|
||||
clone `GetVisibleCount.tsx` and `GetHiddenCount.tsx` from `LessonTypes` to `LessonCategories` and update it
|
||||
|
||||
please draft `GetHiddenCount.tsx` for COL_LESSON_TYPES and `status = hidden`
|
||||
|
||||
well done !, please proceed to another request
|
||||
|
||||
working directory: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db`
|
||||
|
||||
according information from `schema.json`, get the collection of `Students`
|
||||
|
||||
pleaes clone the `tsx` files from `LessonTypes` and `LessonCategories` to `Students` and update the content
|
||||
|
||||
when you draft coding, review file and append with `.tsx.draft`
|
||||
|
||||
---
|
||||
|
||||
- this is part of react typescript project, with pocketbase
|
||||
- `schema.dbml`, describe the collections(tables)
|
||||
- folder `LessonCategories`, the correct references
|
||||
- folder `LessonTypes`, the correct references
|
||||
- you can find the `schema.dbml` and schema information from `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/001_documentation/Requirements/REQ0006`
|
||||
- do not read root directory, assume it is a fresh copy of nextjs project is ok
|
||||
|
||||
## instruction
|
||||
|
||||
- break the questions into smaller parts
|
||||
- review file append with `.draft`, see if the content aligned with the correct references
|
||||
- read and understand `dbml` file
|
||||
- lookup the every folder
|
||||
|
||||
## tasks
|
||||
|
||||
Thanks
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
please revise
|
||||
|
||||
please revise
|
||||
`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx` `interface LpCategory`
|
||||
|
||||
to the collection `QuizLPCategories` align the dbml file in the previous prompt
|
||||
|
||||
please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/lp_categories/_constants.tsx`
|
||||
|
||||
to follow the type definition in `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/types/LpCategory.tsx`, the constant `defaultLpCategory`
|
||||
|
||||
---
|
||||
|
||||
the constants file (`@/constants`) was `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/constants.ts`
|
||||
|
||||
please help to fix the `tsx` files in folder `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/db/QuizMFCategories`,
|
||||
the `COL` constants is wrongly used, it should refer to `COL_QUIZ_MF_CATEGORIES`. thanks
|
||||
|
||||
please update the `COL_XXXX` TO COL_MF_CATEGORIES
|
||||
@@ -22,8 +22,8 @@
|
||||
"test": "jest --watch",
|
||||
"update_doc": "cd 001_documentation/Requirements && node update_req_index.js",
|
||||
"update_doc:w": "pnpx nodemon --ext md --exec \"pnpm run update_doc\"",
|
||||
"update_repomix": "npx repomix",
|
||||
"update_repomix:w": "pnpx nodemon --delay 3 --exec \"pnpx repomix\"",
|
||||
"update_repomix": "node ./scripts/update_repomix.js",
|
||||
"update_repomix:w": "pnpx nodemon --delay 3 --exec \"npm run update_repomix\"",
|
||||
"clean": "rm -rf node_modules && rm -rf .next"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -116,4 +116,4 @@
|
||||
"protobufjs"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,9 @@ const config = {
|
||||
'',
|
||||
'^[./]',
|
||||
],
|
||||
plugins: ['@ianvs/prettier-plugin-sort-imports'],
|
||||
plugins: [
|
||||
// '@ianvs/prettier-plugin-sort-imports'
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.tsx'],
|
||||
|
||||
7
002_source/cms/scripts/005_update_repomix.sh
Executable file
7
002_source/cms/scripts/005_update_repomix.sh
Executable file
@@ -0,0 +1,7 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -ex
|
||||
|
||||
node ./scripts/update_repomix.js
|
||||
|
||||
echo "done"
|
||||
@@ -1,19 +1,23 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -ex
|
||||
set -x
|
||||
|
||||
# ls **/.next
|
||||
# ls **/.pnpm
|
||||
# ls **/node_modules
|
||||
ls **/*.bak
|
||||
ls **/*draft
|
||||
ls **/*.del
|
||||
ls **/*.plan
|
||||
ls **/*Zone*
|
||||
|
||||
set -e
|
||||
# set -e
|
||||
|
||||
read -p "Press [Enter] key to clean directories..."
|
||||
# read -p "Press [Enter] key to clean directories..."
|
||||
|
||||
# rm -rf **/.next
|
||||
# rm -rf **/.pnpm
|
||||
# rm -rf **/node_modules
|
||||
rm -rf **/*Zone*
|
||||
# # rm -rf **/.next
|
||||
# # rm -rf **/.pnpm
|
||||
# # rm -rf **/node_modules
|
||||
# rm -rf **/*Zone*
|
||||
|
||||
echo "clean done"
|
||||
|
||||
37
002_source/cms/scripts/update_repomix.js
Normal file
37
002_source/cms/scripts/update_repomix.js
Normal file
@@ -0,0 +1,37 @@
|
||||
const exec = require('child_process').exec;
|
||||
|
||||
let directories = [
|
||||
//
|
||||
'./src/db',
|
||||
'src/app/dashboard/lp',
|
||||
'src/app/dashboard/mf',
|
||||
'src/app/dashboard/cr',
|
||||
'src/components/dashboard/lp',
|
||||
'src/components/dashboard/mf',
|
||||
'src/components/dashboard/cr',
|
||||
'src/app/dashboard/Sample',
|
||||
].map((directory) => {
|
||||
return `cd ${directory} && pnpx repomix`;
|
||||
});
|
||||
|
||||
Promise.all(
|
||||
directories.map(
|
||||
(directory) =>
|
||||
new Promise((resolve, reject) => {
|
||||
exec(directory, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
reject(error);
|
||||
} else {
|
||||
console.log(stdout);
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
})
|
||||
)
|
||||
)
|
||||
.then(() => {
|
||||
console.log('done');
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
558
002_source/cms/src/app/dashboard/Sample/repomix-output.xml
Normal file
558
002_source/cms/src/app/dashboard/Sample/repomix-output.xml
Normal file
@@ -0,0 +1,558 @@
|
||||
This file is a merged representation of the entire codebase, combined into a single document by Repomix.
|
||||
|
||||
<file_summary>
|
||||
This section contains a summary of this file.
|
||||
|
||||
<purpose>
|
||||
This file contains a packed representation of the entire repository's contents.
|
||||
It is designed to be easily consumable by AI systems for analysis, code review,
|
||||
or other automated processes.
|
||||
</purpose>
|
||||
|
||||
<file_format>
|
||||
The content is organized as follows:
|
||||
1. This summary section
|
||||
2. Repository information
|
||||
3. Directory structure
|
||||
4. Repository files, each consisting of:
|
||||
- File path as an attribute
|
||||
- Full contents of the file
|
||||
</file_format>
|
||||
|
||||
<usage_guidelines>
|
||||
- This file should be treated as read-only. Any changes should be made to the
|
||||
original repository files, not this packed version.
|
||||
- When processing this file, use the file path to distinguish
|
||||
between different files in the repository.
|
||||
- Be aware that this file may contain sensitive information. Handle it with
|
||||
the same level of security as you would the original repository.
|
||||
</usage_guidelines>
|
||||
|
||||
<notes>
|
||||
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
|
||||
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
|
||||
- Files matching patterns in .gitignore are excluded
|
||||
- Files matching default ignore patterns are excluded
|
||||
- Files are sorted by Git change count (files with more changes are at the bottom)
|
||||
</notes>
|
||||
|
||||
<additional_info>
|
||||
|
||||
</additional_info>
|
||||
|
||||
</file_summary>
|
||||
|
||||
<directory_structure>
|
||||
AddressCard/
|
||||
index.tsx
|
||||
SampleAddresses.tsx
|
||||
BasicDetailCard/
|
||||
index.tsx
|
||||
Notifications/
|
||||
index.tsx
|
||||
type.d.ts
|
||||
PaymentCard/
|
||||
index.tsx
|
||||
SamplePayments.tsx
|
||||
SecurityCard/
|
||||
index.tsx
|
||||
TitleCard/
|
||||
index.tsx
|
||||
Helloworld.tsx
|
||||
</directory_structure>
|
||||
|
||||
<files>
|
||||
This section contains the contents of the repository's files.
|
||||
|
||||
<file path="AddressCard/index.tsx">
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import type { Address } from '@/types/Address';
|
||||
import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';
|
||||
|
||||
import { SampleAddresses } from './SampleAddresses';
|
||||
|
||||
export default function SampleAddressCard(): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<Button
|
||||
color="secondary"
|
||||
startIcon={<PlusIcon />}
|
||||
>
|
||||
{t('list.add')}
|
||||
</Button>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<HouseIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('list.shipping-addresses')}
|
||||
/>
|
||||
<CardContent>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
>
|
||||
{(SampleAddresses satisfies Address[]).map((address) => (
|
||||
<Grid
|
||||
key={address.id}
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<ShippingAddress address={address} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
</file>
|
||||
|
||||
<file path="AddressCard/SampleAddresses.tsx">
|
||||
'use client';
|
||||
|
||||
import type { Address } from '@/types/Address';
|
||||
|
||||
export const SampleAddresses: Address[] = [
|
||||
{
|
||||
id: 'ADR-001',
|
||||
country: 'United States',
|
||||
state: 'Michigan',
|
||||
city: 'Lansing',
|
||||
zipCode: '48933',
|
||||
street: '480 Haven Lane',
|
||||
primary: true,
|
||||
},
|
||||
{
|
||||
id: 'ADR-002',
|
||||
country: 'United States',
|
||||
state: 'Missouri',
|
||||
city: 'Springfield',
|
||||
zipCode: '65804',
|
||||
street: '4807 Lighthouse Drive',
|
||||
},
|
||||
];
|
||||
</file>
|
||||
|
||||
<file path="BasicDetailCard/index.tsx">
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import LinearProgress from '@mui/material/LinearProgress';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { PropertyItem } from '@/components/core/property-item';
|
||||
import { PropertyList } from '@/components/core/property-list';
|
||||
|
||||
export default function BasicDetailCard({
|
||||
lpCatId,
|
||||
handleEditClick,
|
||||
}: {
|
||||
lpCatId: string;
|
||||
handleEditClick: () => void;
|
||||
}): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
handleEditClick();
|
||||
}}
|
||||
>
|
||||
<PencilSimpleIcon />
|
||||
</IconButton>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('list.basic-details')}
|
||||
/>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
orientation="vertical"
|
||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{
|
||||
key: 'Customer ID',
|
||||
value: (
|
||||
<Chip
|
||||
label="USR-001"
|
||||
size="small"
|
||||
variant="soft"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: 'Name', value: 'Miron Vitold' },
|
||||
{ key: 'Email', value: 'miron.vitold@domain.com' },
|
||||
{ key: 'Phone', value: '(425) 434-5535' },
|
||||
{ key: 'Company', value: 'Devias IO' },
|
||||
{
|
||||
key: 'Quota',
|
||||
value: (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<LinearProgress
|
||||
sx={{ flex: '1 1 auto' }}
|
||||
value={50}
|
||||
variant="determinate"
|
||||
/>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
50%
|
||||
</Typography>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem
|
||||
key={item.key}
|
||||
name={item.key}
|
||||
value={item.value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
</file>
|
||||
|
||||
<file path="Notifications/index.tsx">
|
||||
'use client';
|
||||
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
|
||||
import type { Notification } from './type';
|
||||
|
||||
export const SampleNotifications: Notification[] = [
|
||||
{
|
||||
id: 'EV-002',
|
||||
type: 'Refund request approved',
|
||||
status: 'pending',
|
||||
createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
|
||||
},
|
||||
{
|
||||
id: 'EV-001',
|
||||
type: 'Order confirmation',
|
||||
status: 'delivered',
|
||||
createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
|
||||
},
|
||||
];
|
||||
</file>
|
||||
|
||||
<file path="Notifications/type.d.ts">
|
||||
export interface Notification {
|
||||
id: string;
|
||||
type: string;
|
||||
status: 'delivered' | 'pending' | 'failed';
|
||||
createdAt: Date;
|
||||
}
|
||||
</file>
|
||||
|
||||
<file path="PaymentCard/index.tsx">
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
|
||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { PropertyItem } from '@/components/core/property-item';
|
||||
import { PropertyList } from '@/components/core/property-list';
|
||||
import { Payments } from '@/components/dashboard/lp/categories/payments';
|
||||
|
||||
import { SamplePayments } from './SamplePayments';
|
||||
|
||||
export default function SamplePaymentCard(): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Payments
|
||||
ordersValue={2069.48}
|
||||
payments={SamplePayments}
|
||||
refundsValue={324.5}
|
||||
totalOrders={5}
|
||||
/>
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<Button
|
||||
color="secondary"
|
||||
startIcon={<PencilSimpleIcon />}
|
||||
>
|
||||
{t('list.edit')}
|
||||
</Button>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<CreditCardIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('list.billing-details')}
|
||||
/>
|
||||
<CardContent>
|
||||
<Card
|
||||
sx={{ borderRadius: 1 }}
|
||||
variant="outlined"
|
||||
>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
sx={{ '--PropertyItem-padding': '16px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ key: t('Credit card'), value: '**** 4142' },
|
||||
{ key: t('Country'), value: t('United States') },
|
||||
{ key: t('State'), value: t('Michigan') },
|
||||
{ key: t('City'), value: t('Southfield') },
|
||||
{ key: t('Address'), value: t('Address') },
|
||||
{ key: t('Tax ID'), value: t('Tax ID') },
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem
|
||||
key={item.key}
|
||||
name={item.key}
|
||||
value={item.value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
</file>
|
||||
|
||||
<file path="PaymentCard/SamplePayments.tsx">
|
||||
'use client';
|
||||
|
||||
// import { dayjs } from 'dayjs';
|
||||
import type { Payment } from '@/types/Payment';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
|
||||
export const SamplePayments: Payment[] = [
|
||||
{
|
||||
currency: 'USD',
|
||||
amount: 500,
|
||||
invoiceId: 'INV-005',
|
||||
status: 'completed',
|
||||
createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
|
||||
},
|
||||
{
|
||||
currency: 'USD',
|
||||
amount: 324.5,
|
||||
invoiceId: 'INV-004',
|
||||
status: 'refunded',
|
||||
createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
|
||||
},
|
||||
{
|
||||
currency: 'USD',
|
||||
amount: 746.5,
|
||||
invoiceId: 'INV-003',
|
||||
status: 'completed',
|
||||
createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
|
||||
},
|
||||
{
|
||||
currency: 'USD',
|
||||
amount: 56.89,
|
||||
invoiceId: 'INV-002',
|
||||
status: 'completed',
|
||||
createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
|
||||
},
|
||||
{
|
||||
currency: 'USD',
|
||||
amount: 541.59,
|
||||
invoiceId: 'INV-001',
|
||||
status: 'completed',
|
||||
createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
|
||||
},
|
||||
];
|
||||
</file>
|
||||
|
||||
<file path="SecurityCard/index.tsx">
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function SampleSecurityCard(): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar>
|
||||
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('list.security')}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={1}>
|
||||
<div>
|
||||
<Button
|
||||
color="error"
|
||||
variant="contained"
|
||||
>
|
||||
{t('Delete account')}
|
||||
</Button>
|
||||
</div>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
{t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
</file>
|
||||
|
||||
<file path="TitleCard/index.tsx">
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@mui/material';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function SampleTitleCard(): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flex: '1 1 auto' }}
|
||||
>
|
||||
<Avatar
|
||||
src="/assets/avatar-1.png"
|
||||
sx={{ '--Avatar-size': '64px' }}
|
||||
>
|
||||
empty
|
||||
</Avatar>
|
||||
<div>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Typography variant="h4">{t('list.customer-name')}</Typography>
|
||||
<Chip
|
||||
icon={
|
||||
<CheckCircleIcon
|
||||
color="var(--mui-palette-success-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
}
|
||||
label={t('list.active')}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body1"
|
||||
>
|
||||
{t('list.customer-email')}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<div>
|
||||
<Button
|
||||
endIcon={<CaretDownIcon />}
|
||||
variant="contained"
|
||||
>
|
||||
{t('list.action')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
</file>
|
||||
|
||||
<file path="Helloworld.tsx">
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
||||
|
||||
function Page(): React.JSX.Element {
|
||||
React.useLayoutEffect(() => {
|
||||
console.log('helloworld');
|
||||
}, []);
|
||||
|
||||
return <>helloworld</>;
|
||||
}
|
||||
|
||||
export default Page;
|
||||
</file>
|
||||
|
||||
</files>
|
||||
@@ -0,0 +1,79 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { PropertyItem } from '@/components/core/property-item';
|
||||
import { PropertyList } from '@/components/core/property-list';
|
||||
import { CrCategory } from '@/components/dashboard/cr/categories/type';
|
||||
|
||||
export default function BasicDetailCard({
|
||||
lpModel: model,
|
||||
handleEditClick,
|
||||
}: {
|
||||
lpModel: CrCategory;
|
||||
handleEditClick: () => void;
|
||||
}): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
handleEditClick();
|
||||
}}
|
||||
>
|
||||
<PencilSimpleIcon />
|
||||
</IconButton>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('list.basic-details')}
|
||||
/>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
orientation="vertical"
|
||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{
|
||||
key: 'Customer ID',
|
||||
value: (
|
||||
<Chip
|
||||
label={model.id}
|
||||
size="small"
|
||||
variant="soft"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: 'Name', value: model.cat_name },
|
||||
{ key: 'Remarks', value: model.remarks },
|
||||
{ key: 'Description', value: model.description },
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem
|
||||
key={item.key}
|
||||
name={item.key}
|
||||
value={item.value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@mui/material';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import type { CrCategory } from '@/components/dashboard/cr/categories/type';
|
||||
|
||||
function getImageUrlFrRecord(record: CrCategory): string {
|
||||
return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
|
||||
}
|
||||
|
||||
export default function SampleTitleCard({ lpModel }: { lpModel: CrCategory }): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flex: '1 1 auto' }}
|
||||
>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={getImageUrlFrRecord(lpModel)}
|
||||
sx={{ '--Avatar-size': '64px' }}
|
||||
>
|
||||
{t('empty')}
|
||||
</Avatar>
|
||||
<div>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Typography variant="h4">{lpModel.cat_name}</Typography>
|
||||
<Chip
|
||||
icon={
|
||||
<CheckCircleIcon
|
||||
color="var(--mui-palette-success-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
}
|
||||
label={lpModel.visible}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body1"
|
||||
>
|
||||
{lpModel.slug}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<div>
|
||||
<Button
|
||||
endIcon={<CaretDownIcon />}
|
||||
variant="contained"
|
||||
>
|
||||
{t('list.action')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
138
002_source/cms/src/app/dashboard/cr/categories/[cat_id]/page.tsx
Normal file
138
002_source/cms/src/app/dashboard/cr/categories/[cat_id]/page.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
|
||||
import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
|
||||
import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
|
||||
import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
import Box from '@mui/material/Box';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import ErrorDisplay from '@/components/dashboard/error';
|
||||
import { defaultCrCategory } from '@/components/dashboard/cr/categories/_constants.ts';
|
||||
import { Notifications } from '@/components/dashboard/cr/categories/notifications';
|
||||
import type { CrCategory } from '@/components/dashboard/cr/categories/type';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
import BasicDetailCard from './BasicDetailCard';
|
||||
import TitleCard from './TitleCard';
|
||||
|
||||
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({ show: false, detail: '' });
|
||||
|
||||
//
|
||||
const [showLessonCategory, setShowLessonCategory] = React.useState<CrCategory>(defaultCrCategory);
|
||||
|
||||
function handleEditClick() {
|
||||
router.push(paths.dashboard.cr_categories.edit(showLessonCategory.id));
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (catId) {
|
||||
pb.collection(COL_QUIZ_CR_CATEGORIES)
|
||||
.getOne(catId)
|
||||
.then((model: RecordModel) => {
|
||||
setShowLessonCategory({ ...defaultCrCategory, ...model });
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast(t('list.error'));
|
||||
|
||||
setShowError({ show: true, detail: JSON.stringify(err) });
|
||||
})
|
||||
.finally(() => {
|
||||
setShowLoading(false);
|
||||
});
|
||||
}
|
||||
}, [catId]);
|
||||
|
||||
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 spacing={3}>
|
||||
<div>
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.cr_categories.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
{t('list.title')}
|
||||
</Link>
|
||||
</div>
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={3}
|
||||
sx={{ alignItems: 'flex-start' }}
|
||||
>
|
||||
<TitleCard lpModel={showLessonCategory} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Grid
|
||||
container
|
||||
spacing={4}
|
||||
>
|
||||
<Grid
|
||||
lg={4}
|
||||
xs={12}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<BasicDetailCard
|
||||
lpModel={showLessonCategory}
|
||||
handleEditClick={handleEditClick}
|
||||
/>
|
||||
<SampleSecurityCard />
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid
|
||||
lg={8}
|
||||
xs={12}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<SamplePaymentCard />
|
||||
<SampleAddressCard />
|
||||
<Notifications notifications={SampleNotifications} />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
'use client';
|
||||
|
||||
// RULES:
|
||||
// T.B.A.
|
||||
//
|
||||
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 { CrCategoryCreateForm } from '@/components/dashboard/cr/categories/cr-category-create-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
// RULES: follow the name of page directory e.g. cr/categoies -> cr_categories
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
|
||||
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.cr_categories.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>
|
||||
<CrCategoryCreateForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
# 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,
|
||||
@@ -0,0 +1,53 @@
|
||||
'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 { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
|
||||
React.useEffect(() => {
|
||||
// console.log('helloworld');
|
||||
}, []);
|
||||
|
||||
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.cr_categories.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>
|
||||
<CrCategoryEditForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { LessonCategory } from '@/components/dashboard/lesson_category/type';
|
||||
|
||||
export const LpCategoriesSampleData = [
|
||||
{
|
||||
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[];
|
||||
275
002_source/cms/src/app/dashboard/cr/categories/page.tsx
Normal file
275
002_source/cms/src/app/dashboard/cr/categories/page.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
'use client';
|
||||
|
||||
// RULES:
|
||||
// contains list page for cr_categories (QuizCRCategories)
|
||||
// contain definition to collection only
|
||||
//
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_QUIZ_CR_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 { defaultCrCategory } from '@/components/dashboard/cr/categories/_constants';
|
||||
import { CrCategoriesFilters } from '@/components/dashboard/cr/categories/cr-categories-filters';
|
||||
import type { Filters } from '@/components/dashboard/cr/categories/cr-categories-filters';
|
||||
import { CrCategoriesPagination } from '@/components/dashboard/cr/categories/cr-categories-pagination';
|
||||
import { CrCategoriesSelectionProvider } from '@/components/dashboard/cr/categories/cr-categories-selection-context';
|
||||
import { CrCategoriesTable } from '@/components/dashboard/cr/categories/cr-categories-table';
|
||||
import type { CrCategory } from '@/components/dashboard/cr/categories/type';
|
||||
import ErrorDisplay from '@/components/dashboard/error';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
const { email, phone, sortDir, status, name, visible, type } = searchParams;
|
||||
const router = useRouter();
|
||||
const [lessonCategoriesData, setLessonCategoriesData] = React.useState<CrCategory[]>([]);
|
||||
//
|
||||
|
||||
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<CrCategory[]>([]);
|
||||
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 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_QUIZ_CR_CATEGORIES)
|
||||
.getList(currentPage + 1, rowsPerPage, listOption);
|
||||
const { items, totalItems } = models;
|
||||
const tempLessonTypes: CrCategory[] = items.map((lt) => {
|
||||
return { ...defaultCrCategory, ...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);
|
||||
}
|
||||
};
|
||||
|
||||
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={-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.cr_categories.create);
|
||||
}}
|
||||
startIcon={<PlusIcon />}
|
||||
variant="contained"
|
||||
>
|
||||
{t('list.add')}
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</Stack>
|
||||
<CrCategoriesSelectionProvider lessonCategories={f}>
|
||||
<Card>
|
||||
<CrCategoriesFilters
|
||||
filters={{ email, phone, status, name, visible, type }}
|
||||
fullData={lessonCategoriesData}
|
||||
sortDir={sortDir}
|
||||
/>
|
||||
<Divider />
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<CrCategoriesTable
|
||||
reloadRows={reloadRows}
|
||||
rows={f}
|
||||
/>
|
||||
</Box>
|
||||
<Divider />
|
||||
<CrCategoriesPagination
|
||||
count={recordCount}
|
||||
page={currentPage}
|
||||
rowsPerPage={rowsPerPage}
|
||||
setPage={setCurrentPage}
|
||||
setRowsPerPage={setRowsPerPage}
|
||||
/>
|
||||
</Card>
|
||||
</CrCategoriesSelectionProvider>
|
||||
</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: CrCategory[], sortDir: 'asc' | 'desc' | undefined): CrCategory[] {
|
||||
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: CrCategory[], { email, phone, status, name, visible }: Filters): CrCategory[] {
|
||||
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,79 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardHeader from '@mui/material/CardHeader';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
|
||||
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { PropertyItem } from '@/components/core/property-item';
|
||||
import { PropertyList } from '@/components/core/property-list';
|
||||
import { LpCategory } from '@/components/dashboard/lp/categories/type';
|
||||
|
||||
export default function BasicDetailCard({
|
||||
lpModel: model,
|
||||
handleEditClick,
|
||||
}: {
|
||||
lpModel: LpCategory;
|
||||
handleEditClick: () => void;
|
||||
}): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
action={
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
handleEditClick();
|
||||
}}
|
||||
>
|
||||
<PencilSimpleIcon />
|
||||
</IconButton>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title={t('list.basic-details')}
|
||||
/>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
orientation="vertical"
|
||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{
|
||||
key: 'Customer ID',
|
||||
value: (
|
||||
<Chip
|
||||
label={model.id}
|
||||
size="small"
|
||||
variant="soft"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: 'Name', value: model.cat_name },
|
||||
{ key: 'Remarks', value: model.remarks },
|
||||
{ key: 'Description', value: model.description },
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem
|
||||
key={item.key}
|
||||
name={item.key}
|
||||
value={item.value}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@mui/material';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
|
||||
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { LpCategory } from '@/components/dashboard/lp/categories/type';
|
||||
|
||||
function getImageUrlFrRecord(record: LpCategory): string {
|
||||
return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;
|
||||
}
|
||||
|
||||
export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flex: '1 1 auto' }}
|
||||
>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={getImageUrlFrRecord(lpModel)}
|
||||
sx={{ '--Avatar-size': '64px' }}
|
||||
>
|
||||
{t('empty')}
|
||||
</Avatar>
|
||||
<div>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
sx={{ alignItems: 'center', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Typography variant="h4">{lpModel.cat_name}</Typography>
|
||||
<Chip
|
||||
icon={
|
||||
<CheckCircleIcon
|
||||
color="var(--mui-palette-success-main)"
|
||||
weight="fill"
|
||||
/>
|
||||
}
|
||||
label={lpModel.visible}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body1"
|
||||
>
|
||||
{lpModel.slug}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<div>
|
||||
<Button
|
||||
endIcon={<CaretDownIcon />}
|
||||
variant="contained"
|
||||
>
|
||||
{t('list.action')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
138
002_source/cms/src/app/dashboard/cr/questions/[cat_id]/page.tsx
Normal file
138
002_source/cms/src/app/dashboard/cr/questions/[cat_id]/page.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
|
||||
import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
|
||||
import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
|
||||
import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
import { Grid } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { paths } from '@/paths';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
import ErrorDisplay from '@/components/dashboard/error';
|
||||
import { defaultCrQuestion } from '@/components/dashboard/cr/questions/_constants.ts';
|
||||
import { Notifications } from '@/components/dashboard/cr/questions/notifications';
|
||||
import type { CrQuestion } from '@/components/dashboard/cr/questions/type';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
import BasicDetailCard from './BasicDetailCard';
|
||||
import TitleCard from './TitleCard';
|
||||
|
||||
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({ show: false, detail: '' });
|
||||
|
||||
//
|
||||
const [showLessonQuestion, setShowLessonQuestion] = React.useState<CrQuestion>(defaultCrQuestion);
|
||||
|
||||
function handleEditClick() {
|
||||
router.push(paths.dashboard.cr_questions.edit(showLessonQuestion.id));
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (catId) {
|
||||
pb.collection(COL_QUIZ_CR_QUESTIONS)
|
||||
.getOne(catId)
|
||||
.then((model: RecordModel) => {
|
||||
setShowLessonQuestion({ ...defaultCrQuestion, ...model });
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error(err);
|
||||
toast(t('list.error'));
|
||||
|
||||
setShowError({ show: true, detail: JSON.stringify(err) });
|
||||
})
|
||||
.finally(() => {
|
||||
setShowLoading(false);
|
||||
});
|
||||
}
|
||||
}, [catId]);
|
||||
|
||||
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 spacing={3}>
|
||||
<div>
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.cr_questions.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
{t('edit.title')}
|
||||
</Link>
|
||||
</div>
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={3}
|
||||
sx={{ alignItems: 'flex-start' }}
|
||||
>
|
||||
<TitleCard lpModel={showLessonQuestion} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Grid
|
||||
container
|
||||
spacing={4}
|
||||
>
|
||||
<Grid
|
||||
lg={4}
|
||||
xs={12}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<BasicDetailCard
|
||||
lpModel={showLessonQuestion}
|
||||
handleEditClick={handleEditClick}
|
||||
/>
|
||||
<SampleSecurityCard />
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid
|
||||
lg={8}
|
||||
xs={12}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<SamplePaymentCard />
|
||||
<SampleAddressCard />
|
||||
<Notifications notifications={SampleNotifications} />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { LessonCategory } from '@/components/dashboard/lesson_category/type';
|
||||
|
||||
export const CrCategoriesSampleData = [
|
||||
{
|
||||
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,19 +1,24 @@
|
||||
'use client';
|
||||
|
||||
// RULES:
|
||||
// T.B.A.
|
||||
//
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
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 { config } from '@/config';
|
||||
import { paths } from '@/paths';
|
||||
import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
|
||||
|
||||
export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
import { CrQuestionCreateForm } from '@/components/dashboard/cr/questions/cr-question-create-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
// RULES: follow the name of page directory
|
||||
const { t } = useTranslation(['lp_questions']);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -29,19 +34,19 @@ export default function Page(): React.JSX.Element {
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.customers.list}
|
||||
href={paths.dashboard.lp_questions.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
Customers
|
||||
{t('title')}
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="h4">Create customer</Typography>
|
||||
<Typography variant="h4">{t('create.title')}</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<CustomerCreateForm />
|
||||
<CrQuestionCreateForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
@@ -0,0 +1,11 @@
|
||||
# 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,
|
||||
@@ -1,19 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
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 { config } from '@/config';
|
||||
import { paths } from '@/paths';
|
||||
import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
|
||||
|
||||
export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
import { CrQuestionEditForm } from '@/components/dashboard/cr/questions/cr-question-edit-form';
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
const { t } = useTranslation(['lp_questions']);
|
||||
|
||||
React.useEffect(() => {
|
||||
// console.log('helloworld');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -29,19 +34,19 @@ export default function Page(): React.JSX.Element {
|
||||
<Link
|
||||
color="text.primary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.customers.list}
|
||||
href={paths.dashboard.lp_questions.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
Customers
|
||||
{t('edit.title')}
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="h4">Create customer</Typography>
|
||||
<Typography variant="h4">{t('edit.title')}</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
<CustomerCreateForm />
|
||||
<CrQuestionEditForm />
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
272
002_source/cms/src/app/dashboard/cr/questions/page.tsx
Normal file
272
002_source/cms/src/app/dashboard/cr/questions/page.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
'use client';
|
||||
|
||||
// RULES:
|
||||
// contains list page for cr_questions (QuizCRQuestions)
|
||||
// contain definition to collection only
|
||||
//
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_QUIZ_CR_QUESTIONS } 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 { defaultCrQuestion } from '@/components/dashboard/cr/questions/_constants';
|
||||
import { CrQuestionsFilters } from '@/components/dashboard/cr/questions/cr-questions-filters';
|
||||
import type { Filters } from '@/components/dashboard/cr/questions/cr-questions-filters';
|
||||
import { CrQuestionsPagination } from '@/components/dashboard/cr/questions/cr-questions-pagination';
|
||||
import { CrQuestionsSelectionProvider } from '@/components/dashboard/cr/questions/cr-questions-selection-context';
|
||||
import { CrQuestionsTable } from '@/components/dashboard/cr/questions/cr-questions-table';
|
||||
import type { CrQuestion } from '@/components/dashboard/cr/questions/type';
|
||||
import FormLoading from '@/components/loading';
|
||||
|
||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['lp_questions']);
|
||||
const { email, phone, sortDir, status, name, visible, type } = searchParams;
|
||||
const router = useRouter();
|
||||
const [lessonQuestionsData, setLessonCategoriesData] = React.useState<CrQuestion[]>([]);
|
||||
//
|
||||
|
||||
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<CrQuestion[]>([]);
|
||||
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 sortedLessonCategories = applySort(lessonQuestionsData, sortDir);
|
||||
const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
|
||||
|
||||
const reloadRows = async (): Promise<void> => {
|
||||
try {
|
||||
const models: ListResult<RecordModel> = await pb
|
||||
.collection(COL_QUIZ_CR_QUESTIONS)
|
||||
.getList(currentPage + 1, rowsPerPage, listOption);
|
||||
const { items, totalItems } = models;
|
||||
const tempLessonTypes: CrQuestion[] = items.map((lt) => {
|
||||
return { ...defaultCrQuestion, ...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);
|
||||
}
|
||||
};
|
||||
|
||||
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={-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.cr_questions.create);
|
||||
}}
|
||||
startIcon={<PlusIcon />}
|
||||
variant="contained"
|
||||
>
|
||||
{t('list.add')}
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</Stack>
|
||||
<CrQuestionsSelectionProvider lessonQuestions={f}>
|
||||
<Card>
|
||||
<CrQuestionsFilters
|
||||
filters={{ email, phone, status, name, visible, type }}
|
||||
fullData={lessonQuestionsData}
|
||||
sortDir={sortDir}
|
||||
/>
|
||||
<Divider />
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<CrQuestionsTable
|
||||
reloadRows={reloadRows}
|
||||
rows={f}
|
||||
/>
|
||||
</Box>
|
||||
<Divider />
|
||||
<CrQuestionsPagination
|
||||
count={recordCount}
|
||||
page={currentPage}
|
||||
rowsPerPage={rowsPerPage}
|
||||
setPage={setCurrentPage}
|
||||
setRowsPerPage={setRowsPerPage}
|
||||
/>
|
||||
</Card>
|
||||
</CrQuestionsSelectionProvider>
|
||||
</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: CrQuestion[], sortDir: 'asc' | 'desc' | undefined): CrQuestion[] {
|
||||
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: CrQuestion[], { email, phone, status, name, visible }: Filters): CrQuestion[] {
|
||||
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;
|
||||
//
|
||||
};
|
||||
}
|
||||
@@ -1,308 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import RouterLink from 'next/link';
|
||||
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 { config } from '@/config';
|
||||
import { paths } from '@/paths';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { PropertyItem } from '@/components/core/property-item';
|
||||
import { PropertyList } from '@/components/core/property-list';
|
||||
import { Notifications } from '@/components/dashboard/customer/notifications';
|
||||
import { Payments } from '@/components/dashboard/customer/payments';
|
||||
import type { Address } from '@/components/dashboard/customer/shipping-address';
|
||||
import { ShippingAddress } from '@/components/dashboard/customer/shipping-address';
|
||||
|
||||
export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
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.customers.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
Customers
|
||||
</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="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
|
||||
MV
|
||||
</Avatar>
|
||||
<div>
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<Typography variant="h4">Miron Vitold</Typography>
|
||||
<Chip
|
||||
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
|
||||
label="Active"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<Typography color="text.secondary" variant="body1">
|
||||
miron.vitold@domain.com
|
||||
</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>
|
||||
<PencilSimpleIcon />
|
||||
</IconButton>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title="Basic details"
|
||||
/>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
orientation="vertical"
|
||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
|
||||
{ key: 'Name', value: 'Miron Vitold' },
|
||||
{ key: 'Email', value: 'miron.vitold@domain.com' },
|
||||
{ key: 'Phone', value: '(425) 434-5535' },
|
||||
{ key: 'Company', value: 'Devias IO' },
|
||||
{
|
||||
key: 'Quota',
|
||||
value: (
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
||||
<LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
50%
|
||||
</Typography>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar>
|
||||
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title="Security"
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={1}>
|
||||
<div>
|
||||
<Button color="error" variant="contained">
|
||||
Delete account
|
||||
</Button>
|
||||
</div>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
A deleted customer 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="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="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>
|
||||
);
|
||||
}
|
||||
@@ -1,255 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
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';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { CustomersFilters } from '@/components/dashboard/customer/customers-filters';
|
||||
import type { Filters } from '@/components/dashboard/customer/customers-filters';
|
||||
import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
|
||||
import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
|
||||
import { CustomersTable } from '@/components/dashboard/customer/customers-table';
|
||||
import type { Customer } from '@/components/dashboard/customer/customers-table';
|
||||
|
||||
export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
const customers = [
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
] satisfies Customer[];
|
||||
|
||||
interface PageProps {
|
||||
searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
|
||||
}
|
||||
|
||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { email, phone, sortDir, status } = searchParams;
|
||||
|
||||
const sortedCustomers = applySort(customers, sortDir);
|
||||
const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
|
||||
|
||||
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">Customers</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button startIcon={<PlusIcon />} variant="contained">
|
||||
Add
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
<CustomersSelectionProvider customers={filteredCustomers}>
|
||||
<Card>
|
||||
<CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
|
||||
<Divider />
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<CustomersTable rows={filteredCustomers} />
|
||||
</Box>
|
||||
<Divider />
|
||||
<CustomersPagination count={filteredCustomers.length + 100} page={0} />
|
||||
</Card>
|
||||
</CustomersSelectionProvider>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Sorting and filtering has to be done on the server.
|
||||
|
||||
function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Customer[] {
|
||||
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: Customer[], { email, phone, status }: Filters): Customer[] {
|
||||
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;
|
||||
});
|
||||
}
|
||||
@@ -1,308 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import RouterLink from 'next/link';
|
||||
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 { config } from '@/config';
|
||||
import { paths } from '@/paths';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { PropertyItem } from '@/components/core/property-item';
|
||||
import { PropertyList } from '@/components/core/property-list';
|
||||
import { Notifications } from '@/components/dashboard/customer/notifications';
|
||||
import { Payments } from '@/components/dashboard/customer/payments';
|
||||
import type { Address } from '@/components/dashboard/customer/shipping-address';
|
||||
import { ShippingAddress } from '@/components/dashboard/customer/shipping-address';
|
||||
|
||||
export const metadata = { title: `Details | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
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.customers.list}
|
||||
sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
|
||||
variant="subtitle2"
|
||||
>
|
||||
<ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
|
||||
Customers
|
||||
</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="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
|
||||
MV
|
||||
</Avatar>
|
||||
<div>
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<Typography variant="h4">Miron Vitold</Typography>
|
||||
<Chip
|
||||
icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
|
||||
label="Active"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<Typography color="text.secondary" variant="body1">
|
||||
miron.vitold@domain.com
|
||||
</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>
|
||||
<PencilSimpleIcon />
|
||||
</IconButton>
|
||||
}
|
||||
avatar={
|
||||
<Avatar>
|
||||
<UserIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title="Basic details"
|
||||
/>
|
||||
<PropertyList
|
||||
divider={<Divider />}
|
||||
orientation="vertical"
|
||||
sx={{ '--PropertyItem-padding': '12px 24px' }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
|
||||
{ key: 'Name', value: 'Miron Vitold' },
|
||||
{ key: 'Email', value: 'miron.vitold@domain.com' },
|
||||
{ key: 'Phone', value: '(425) 434-5535' },
|
||||
{ key: 'Company', value: 'Devias IO' },
|
||||
{
|
||||
key: 'Quota',
|
||||
value: (
|
||||
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
||||
<LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
50%
|
||||
</Typography>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
] satisfies { key: string; value: React.ReactNode }[]
|
||||
).map(
|
||||
(item): React.JSX.Element => (
|
||||
<PropertyItem key={item.key} name={item.key} value={item.value} />
|
||||
)
|
||||
)}
|
||||
</PropertyList>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar>
|
||||
<ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
|
||||
</Avatar>
|
||||
}
|
||||
title="Security"
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={1}>
|
||||
<div>
|
||||
<Button color="error" variant="contained">
|
||||
Delete account
|
||||
</Button>
|
||||
</div>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
A deleted customer 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="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="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>
|
||||
);
|
||||
}
|
||||
@@ -1,255 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
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';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { CustomersFilters } from '@/components/dashboard/customer/customers-filters';
|
||||
import type { Filters } from '@/components/dashboard/customer/customers-filters';
|
||||
import { CustomersPagination } from '@/components/dashboard/customer/customers-pagination';
|
||||
import { CustomersSelectionProvider } from '@/components/dashboard/customer/customers-selection-context';
|
||||
import { CustomersTable } from '@/components/dashboard/customer/customers-table';
|
||||
import type { Customer } from '@/components/dashboard/customer/customers-table';
|
||||
|
||||
export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
const customers = [
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
] satisfies Customer[];
|
||||
|
||||
interface PageProps {
|
||||
searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
|
||||
}
|
||||
|
||||
export default function Page({ searchParams }: PageProps): React.JSX.Element {
|
||||
const { email, phone, sortDir, status } = searchParams;
|
||||
|
||||
const sortedCustomers = applySort(customers, sortDir);
|
||||
const filteredCustomers = applyFilters(sortedCustomers, { email, phone, status });
|
||||
|
||||
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">Customers</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button startIcon={<PlusIcon />} variant="contained">
|
||||
Add
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
<CustomersSelectionProvider customers={filteredCustomers}>
|
||||
<Card>
|
||||
<CustomersFilters filters={{ email, phone, status }} sortDir={sortDir} />
|
||||
<Divider />
|
||||
<Box sx={{ overflowX: 'auto' }}>
|
||||
<CustomersTable rows={filteredCustomers} />
|
||||
</Box>
|
||||
<Divider />
|
||||
<CustomersPagination count={filteredCustomers.length + 100} page={0} />
|
||||
</Card>
|
||||
</CustomersSelectionProvider>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Sorting and filtering has to be done on the server.
|
||||
|
||||
function applySort(row: Customer[], sortDir: 'asc' | 'desc' | undefined): Customer[] {
|
||||
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: Customer[], { email, phone, status }: Filters): Customer[] {
|
||||
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;
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,94 @@
|
||||
# CR Categories Components Summary
|
||||
|
||||
## Main Components
|
||||
|
||||
### `cr-categories-table.tsx`
|
||||
|
||||
- Displays categories in a table format with columns for Name, Status, Created At, etc.
|
||||
- Features:
|
||||
- Row selection functionality
|
||||
- Status indicators (Active/Blocked/Pending)
|
||||
- Progress bars for quota/word count
|
||||
- Edit/delete actions
|
||||
- Image and name display with slugs
|
||||
|
||||
### `cr-category-create-form.tsx`
|
||||
|
||||
- Form for creating new categories
|
||||
- Fields:
|
||||
- Name, image, position, visibility
|
||||
- Slug, description, remarks
|
||||
- Initial answer (JSON)
|
||||
- Uses Zod validation and React Hook Form
|
||||
- Material UI components
|
||||
- Internationalization support
|
||||
|
||||
### `cr-category-edit-form.tsx`
|
||||
|
||||
- Similar to create form but for editing
|
||||
- Pre-fills existing data
|
||||
- Handles image updates
|
||||
- More strict validation for init_answer
|
||||
|
||||
## Supporting Components
|
||||
|
||||
### `confirm-delete-modal.tsx`
|
||||
|
||||
- Confirmation dialog for category deletion
|
||||
- Loading states and toast notifications
|
||||
- Internationalization support
|
||||
|
||||
### `cr-categories-filters.tsx`
|
||||
|
||||
- Filtering functionality:
|
||||
- Visibility status tabs
|
||||
- Text search filters
|
||||
- Sorting options
|
||||
- Shows selected items count
|
||||
|
||||
### `cr-categories-pagination.tsx`
|
||||
|
||||
- Basic pagination controls
|
||||
- Page number and rows per page selection
|
||||
- Default options: [5, 10, 25]
|
||||
|
||||
### `cr-categories-selection-context.tsx`
|
||||
|
||||
- Manages selection state
|
||||
- Provides hooks for:
|
||||
- Selecting/deselecting items
|
||||
- Checking selection state
|
||||
- Bulk operations
|
||||
|
||||
## Types & Constants
|
||||
|
||||
### `type.d.ts`
|
||||
|
||||
- Interfaces:
|
||||
- `CrCategory`: Main category type
|
||||
- `CreateFormProps`: Create form data
|
||||
- `EditFormProps`: Edit form data
|
||||
|
||||
### `_constants.ts`
|
||||
|
||||
- Default values:
|
||||
- `defaultCrCategory`
|
||||
- `emptyCrCategory`
|
||||
|
||||
## Component Relationships
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[cr-categories-table] --> B[cr-category-create-form]
|
||||
A --> C[cr-category-edit-form]
|
||||
A --> D[confirm-delete-modal]
|
||||
A --> E[cr-categories-filters]
|
||||
A --> F[cr-categories-pagination]
|
||||
A --> G[cr-categories-selection-context]
|
||||
H[type.d.ts] --> A
|
||||
H --> B
|
||||
H --> C
|
||||
I[_constants.ts] --> A
|
||||
I --> B
|
||||
I --> C
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
|
||||
import { CrCategory, CreateFormProps } from './type';
|
||||
|
||||
export const defaultCrCategory: CrCategory = {
|
||||
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',
|
||||
slug: '',
|
||||
init_answer: {},
|
||||
// from pocketbase
|
||||
collectionId: '0000000000',
|
||||
createdAt: dayjs('2099-01-01').toDate(),
|
||||
//
|
||||
name: '',
|
||||
avatar: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
quota: 0,
|
||||
status: 'NA',
|
||||
};
|
||||
|
||||
// export const LpCategoryCreateFormDefault: CreateFormProps = {
|
||||
// name: '',
|
||||
// type: '',
|
||||
// pos: 1,
|
||||
// visible: 'visible',
|
||||
// description: '',
|
||||
// isActive: true,
|
||||
// order: 1,
|
||||
// imageUrl: '',
|
||||
// };
|
||||
|
||||
export const emptyCrCategory: CrCategory = {
|
||||
...defaultCrCategory,
|
||||
isEmpty: true,
|
||||
};
|
||||
@@ -0,0 +1,127 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_TYPES } from '@/constants';
|
||||
import deleteQuizCRCategories from '@/db/QuizCRCategories/Delete';
|
||||
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';
|
||||
|
||||
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 handleUserConfirmDelete(): void {
|
||||
if (idToDelete) {
|
||||
setIsDeleteing(true);
|
||||
|
||||
// RULES: CR -> deleteQuizCRCategories
|
||||
deleteQuizCRCategories(idToDelete)
|
||||
.then(() => {
|
||||
reloadRows();
|
||||
handleClose();
|
||||
toast(t('delete.success'));
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.error(err)
|
||||
logger.error(err);
|
||||
toast(t('delete.error'));
|
||||
})
|
||||
.finally(() => {
|
||||
setIsDeleteing(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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,459 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
// import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
|
||||
// RULES: Quiz
|
||||
import GetAllCount from '@/db/QuizMFCategories/GetAllCount';
|
||||
import GetHiddenCount from '@/db/QuizMFCategories/GetHiddenCount';
|
||||
import GetVisibleCount from '@/db/QuizMFCategories/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 { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
|
||||
import { Option } from '@/components/core/option';
|
||||
|
||||
import { useCrCategoriesSelection } from './cr-categories-selection-context';
|
||||
import type { CrCategory } from './type';
|
||||
|
||||
export interface Filters {
|
||||
email?: string;
|
||||
phone?: string;
|
||||
status?: string;
|
||||
name?: string;
|
||||
visible?: string;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
|
||||
export interface CrCategoriesFiltersProps {
|
||||
filters?: Filters;
|
||||
sortDir?: SortDir;
|
||||
fullData: CrCategory[];
|
||||
}
|
||||
|
||||
export function CrCategoriesFilters({
|
||||
filters = {},
|
||||
sortDir = 'desc',
|
||||
fullData,
|
||||
}: CrCategoriesFiltersProps): 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 = useCrCategoriesSelection();
|
||||
|
||||
function getVisible(): number {
|
||||
return fullData.reduce((count, item: CrCategory) => {
|
||||
return item.visible === 'visible' ? count + 1 : count;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function getHidden(): number {
|
||||
return fullData.reduce((count, item: CrCategory) => {
|
||||
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);
|
||||
}
|
||||
|
||||
// NOTE: modify according to COLLECTION
|
||||
router.push(`${paths.dashboard.lp_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>('');
|
||||
const { t } = useTranslation();
|
||||
|
||||
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"
|
||||
>
|
||||
{t('Apply')}
|
||||
</Button>
|
||||
</FilterPopover>
|
||||
);
|
||||
}
|
||||
|
||||
function PhoneFilterPopover(): React.JSX.Element {
|
||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
||||
const [value, setValue] = React.useState<string>('');
|
||||
const { t } = useTranslation();
|
||||
|
||||
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"
|
||||
>
|
||||
{t('Apply')}
|
||||
</Button>
|
||||
</FilterPopover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
// lp-categories-pagination.tsx
|
||||
// RULES:
|
||||
// T.B.A.
|
||||
import * as React from 'react';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
|
||||
function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
interface CrCategoriesPaginationProps {
|
||||
count: number;
|
||||
page: number;
|
||||
//
|
||||
setPage: (page: number) => void;
|
||||
setRowsPerPage: (page: number) => void;
|
||||
rowsPerPage: number;
|
||||
}
|
||||
|
||||
export function CrCategoriesPagination({
|
||||
count,
|
||||
page,
|
||||
//
|
||||
setPage,
|
||||
setRowsPerPage,
|
||||
rowsPerPage,
|
||||
}: CrCategoriesPaginationProps): 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,46 @@
|
||||
'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 { CrCategory } from './type';
|
||||
|
||||
function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export interface CrCategoriesSelectionContextValue extends Selection {}
|
||||
|
||||
export const CrCategoriesSelectionContext = React.createContext<CrCategoriesSelectionContextValue>({
|
||||
deselectAll: noop,
|
||||
deselectOne: noop,
|
||||
selectAll: noop,
|
||||
selectOne: noop,
|
||||
selected: new Set(),
|
||||
selectedAny: false,
|
||||
selectedAll: false,
|
||||
});
|
||||
|
||||
interface LpCategoriesSelectionProviderProps {
|
||||
children: React.ReactNode;
|
||||
lessonCategories: CrCategory[];
|
||||
}
|
||||
|
||||
export function CrCategoriesSelectionProvider({
|
||||
children,
|
||||
lessonCategories = [],
|
||||
}: LpCategoriesSelectionProviderProps): React.JSX.Element {
|
||||
const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
|
||||
const selection = useSelection(customerIds);
|
||||
|
||||
return (
|
||||
<CrCategoriesSelectionContext.Provider value={{ ...selection }}>{children}</CrCategoriesSelectionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useCrCategoriesSelection(): CrCategoriesSelectionContextValue {
|
||||
return React.useContext(CrCategoriesSelectionContext);
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
'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 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 { useCrCategoriesSelection } from './cr-categories-selection-context';
|
||||
import type { CrCategory } from './type';
|
||||
|
||||
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrCategory>[] {
|
||||
return [
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<Link
|
||||
color="inherit"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.cr_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.cr_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: CrCategory[];
|
||||
reloadRows: () => void;
|
||||
}
|
||||
|
||||
export function CrCategoriesTable({ rows, reloadRows }: LessonCategoriesTableProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCrCategoriesSelection();
|
||||
|
||||
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<CrCategory>
|
||||
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: update this */}
|
||||
{t('no-lesson-categories-found')}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,419 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { Avatar, Divider, MenuItem, Select } from '@mui/material';
|
||||
// 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 FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
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 isDevelopment from '@/lib/check-is-development';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { TextEditor } from '@/components/core/text-editor/text-editor';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
|
||||
import type { CreateFormProps } from './type';
|
||||
|
||||
const schema = zod.object({
|
||||
cat_name: zod.string().min(1, 'name-is-required').max(255),
|
||||
cat_image: zod.array(zod.any()).optional(),
|
||||
pos: zod.number().min(1, 'position is required').max(99),
|
||||
init_answer: zod.string().optional(),
|
||||
visible: zod.string(),
|
||||
slug: zod.string().min(1, 'slug-is-required').max(255),
|
||||
remarks: zod.string().optional(),
|
||||
description: zod.string().optional(),
|
||||
// NOTE: for image handling
|
||||
avatar: zod.string().optional(),
|
||||
// TODO: remove me
|
||||
type: zod.string().optional(),
|
||||
isActive: zod.boolean().optional(),
|
||||
order: zod.number().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
export const defaultValues = {
|
||||
cat_name: '',
|
||||
cat_image: undefined,
|
||||
pos: 1,
|
||||
init_answer: '',
|
||||
visible: 'hidden',
|
||||
slug: '',
|
||||
remarks: '',
|
||||
description: '',
|
||||
} satisfies Values;
|
||||
|
||||
export function CrCategoryCreateForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
|
||||
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);
|
||||
|
||||
const payload: CreateFormProps = {
|
||||
cat_name: values.cat_name,
|
||||
cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
|
||||
pos: values.pos,
|
||||
init_answer: values.init_answer,
|
||||
visible: values.visible,
|
||||
slug: values.slug,
|
||||
remarks: values.remarks,
|
||||
description: values.description,
|
||||
//
|
||||
// TODO: remove me
|
||||
type: 'type tet',
|
||||
isActive: true,
|
||||
order: 1,
|
||||
};
|
||||
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).create(payload);
|
||||
|
||||
logger.debug(result);
|
||||
toast.success(t('create.success'));
|
||||
router.push(paths.dashboard.lp_categories.list);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast.error(t('create.failed'));
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
},
|
||||
// t is not necessary here
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[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-info')}</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
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="cat_name"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
disabled={isCreating}
|
||||
error={Boolean(errors.cat_name)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.cat_name')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="pos"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.pos)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.pos')}</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={isCreating}
|
||||
control={control}
|
||||
name="slug"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.slug)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.slug')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.slug ? <FormHelperText>{errors.slug.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="visible"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.visible)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel>{t('edit.visible')}</InputLabel>
|
||||
<Select {...field}>
|
||||
<MenuItem value="visible">{t('edit.visible')}</MenuItem>
|
||||
<MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
|
||||
</Select>
|
||||
|
||||
{errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="init_answer"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.init_answer)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.init_answer')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.init_answer ? <FormHelperText>{errors.init_answer.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
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<Box>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color="text-secondary"
|
||||
>
|
||||
{t('create.description')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor
|
||||
{...field}
|
||||
content=""
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getHTML() } });
|
||||
}}
|
||||
placeholder={t('create.description.default')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="remarks"
|
||||
render={({ field }) => (
|
||||
<Box>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color="text.secondary"
|
||||
>
|
||||
{t('create.remarks')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor
|
||||
content=""
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getText() } });
|
||||
}}
|
||||
hideToolbar
|
||||
placeholder={t('create.remarks.default')}
|
||||
/>
|
||||
</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>
|
||||
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
|
||||
<pre>{JSON.stringify({ errors }, null, 2)}</pre>
|
||||
</Box>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
//
|
||||
import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
//
|
||||
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 Divider from '@mui/material/Divider';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
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 { 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 { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
|
||||
import { pb } from '@/lib/pb';
|
||||
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 type { EditFormProps } from './type';
|
||||
|
||||
// TODO: review this
|
||||
const schema = zod.object({
|
||||
cat_name: zod.string().min(1, 'name-is-required').max(255),
|
||||
// accept file object when user change image
|
||||
// accept http string when user not changing image
|
||||
cat_image: zod.union([zod.array(zod.any()), zod.string()]).optional(),
|
||||
|
||||
// position
|
||||
pos: zod.number().min(1, 'position is required').max(99),
|
||||
|
||||
// it should be a valid JSON
|
||||
init_answer: zod
|
||||
.string()
|
||||
.refine(
|
||||
(value) => {
|
||||
try {
|
||||
JSON.parse(value);
|
||||
return true;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
{ message: 'init_answer must be a valid JSON' }
|
||||
)
|
||||
.optional(),
|
||||
visible: zod.string(),
|
||||
slug: zod.string().min(0, 'slug-is-required').max(255).optional(),
|
||||
remarks: zod.string().optional(),
|
||||
description: zod.string().optional(),
|
||||
// NOTE: for image handling
|
||||
avatar: zod.string().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
const defaultValues = {
|
||||
cat_name: '',
|
||||
cat_image: undefined,
|
||||
pos: 1,
|
||||
init_answer: JSON.stringify({}),
|
||||
visible: 'hidden',
|
||||
slug: '',
|
||||
remarks: '',
|
||||
description: '',
|
||||
} satisfies Values;
|
||||
|
||||
export function CrCategoryEditForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
|
||||
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({ show: false, detail: '' });
|
||||
|
||||
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,
|
||||
cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
|
||||
pos: values.pos,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
init_answer: JSON.parse(values.init_answer || '{}'),
|
||||
|
||||
visible: values.visible,
|
||||
slug: values.slug || 'not-defined',
|
||||
remarks: values.remarks,
|
||||
description: values.description,
|
||||
//
|
||||
// TODO: remove below
|
||||
type: '',
|
||||
};
|
||||
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
|
||||
logger.debug(result);
|
||||
toast.success(t('edit.success'));
|
||||
router.push(paths.dashboard.cr_categories.list);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast.error(t('update.failed'));
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
},
|
||||
// t is not necessary here
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[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]
|
||||
);
|
||||
|
||||
// TODO: need to align with save form
|
||||
// use trycatch
|
||||
const [textDescription, setTextDescription] = React.useState<string>('');
|
||||
const [textRemarks, setTextRemarks] = React.useState<string>('');
|
||||
|
||||
// load existing data when user arrive
|
||||
const loadExistingData = React.useCallback(
|
||||
async (id: string) => {
|
||||
setShowLoading(true);
|
||||
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).getOne(id);
|
||||
|
||||
reset({ ...defaultValues, ...result, init_answer: JSON.stringify(result.init_answer) });
|
||||
setTextDescription(result.description);
|
||||
setTextRemarks(result.remarks);
|
||||
|
||||
if (result.cat_image !== '') {
|
||||
const fetchResult = await fetch(
|
||||
`http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.cat_image}`
|
||||
);
|
||||
|
||||
const blob = await fetchResult.blob();
|
||||
const url = await fileToBase64(blob);
|
||||
|
||||
setValue('avatar', url);
|
||||
} else {
|
||||
setValue('avatar', '');
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast(t('list.error'));
|
||||
|
||||
setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
|
||||
} finally {
|
||||
setShowLoading(false);
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[catId]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadExistingData(catId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [catId]);
|
||||
|
||||
if (showLoading) return <FormLoading />;
|
||||
if (showError.show)
|
||||
return (
|
||||
<ErrorDisplay
|
||||
message={t('error.unable-to-process-request')}
|
||||
code="500"
|
||||
details={showError.detail}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack
|
||||
divider={<Divider />}
|
||||
spacing={4}
|
||||
>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.basic-info')}</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('edit.avatar')}</Typography>
|
||||
<Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
avatarInputRef.current?.click();
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('edit.avatar_select')}
|
||||
</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.cat_name')}</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.pos')}</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="slug"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.slug)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('edit.slug')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.slug ? <FormHelperText>{errors.slug.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')}</InputLabel>
|
||||
<Select {...field}>
|
||||
<MenuItem value="visible">{t('edit.visible')}</MenuItem>
|
||||
<MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
|
||||
</Select>
|
||||
|
||||
{errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="init_answer"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.init_answer)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('edit.init_answer')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.init_answer ? <FormHelperText>{errors.init_answer.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
{/* */}
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.detail-information')}</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('edit.description')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
|
||||
<TextEditor
|
||||
{...field}
|
||||
content={textDescription}
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getHTML() } });
|
||||
}}
|
||||
placeholder={t('edit.description.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('edit.remarks')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
|
||||
<TextEditor
|
||||
content={textRemarks}
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getText() } });
|
||||
}}
|
||||
hideToolbar
|
||||
placeholder={t('edit.remarks.default')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
{/* */}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.cr_categories.list}
|
||||
>
|
||||
{t('edit.cancelButton')}
|
||||
</Button>
|
||||
|
||||
<LoadingButton
|
||||
disabled={isUpdating}
|
||||
loading={isUpdating}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
>
|
||||
{t('edit.updateButton')}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
61
002_source/cms/src/components/dashboard/cr/categories/type.d.ts
vendored
Normal file
61
002_source/cms/src/components/dashboard/cr/categories/type.d.ts
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
export interface CrCategory {
|
||||
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;
|
||||
slug: string;
|
||||
init_answer: any;
|
||||
//
|
||||
name: string;
|
||||
avatar: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
quota: number;
|
||||
status: 'pending' | 'active' | 'blocked' | 'NA';
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface CreateFormProps {
|
||||
cat_name: string;
|
||||
cat_image: File[] | null;
|
||||
pos: number;
|
||||
init_answer?: string;
|
||||
visible: string;
|
||||
slug: string;
|
||||
remarks?: string;
|
||||
description?: string;
|
||||
//
|
||||
// TODO: to remove
|
||||
type: string;
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
name?: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
export interface EditFormProps {
|
||||
cat_name: string;
|
||||
cat_image: File[] | null;
|
||||
pos: number;
|
||||
init_answer: any;
|
||||
visible: string;
|
||||
slug: string;
|
||||
remarks?: string;
|
||||
description?: string;
|
||||
//
|
||||
// TODO: remove below
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface Helloworld {
|
||||
helloworld: string;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
|
||||
import { CreateFormProps, CrQuestion } from './type';
|
||||
|
||||
export const defaultCrQuestion: CrQuestion = {
|
||||
isEmpty: false,
|
||||
id: 'default-id',
|
||||
cat_name: 'default-question-name',
|
||||
cat_image_url: undefined,
|
||||
cat_image: undefined,
|
||||
pos: 0,
|
||||
visible: 'hidden',
|
||||
lesson_id: 'default-lesson-id',
|
||||
description: 'default-description',
|
||||
remarks: 'default-remarks',
|
||||
slug: '',
|
||||
init_answer: {},
|
||||
// from pocketbase
|
||||
collectionId: '0000000000',
|
||||
createdAt: dayjs('2099-01-01').toDate(),
|
||||
//
|
||||
name: '',
|
||||
avatar: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
quota: 0,
|
||||
status: 'NA',
|
||||
};
|
||||
|
||||
// export const LpCategoryCreateFormDefault: CreateFormProps = {
|
||||
// name: '',
|
||||
// type: '',
|
||||
// pos: 1,
|
||||
// visible: 'visible',
|
||||
// description: '',
|
||||
// isActive: true,
|
||||
// order: 1,
|
||||
// imageUrl: '',
|
||||
// };
|
||||
|
||||
export const emptyLpQuestion: CrQuestion = {
|
||||
...defaultCrQuestion,
|
||||
isEmpty: true,
|
||||
};
|
||||
@@ -0,0 +1,125 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_LESSON_TYPES } from '@/constants';
|
||||
import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
|
||||
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';
|
||||
|
||||
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 handleUserConfirmDelete(): void {
|
||||
if (idToDelete) {
|
||||
setIsDeleteing(true);
|
||||
deleteQuizLPCategories(idToDelete)
|
||||
.then(() => {
|
||||
reloadRows();
|
||||
handleClose();
|
||||
toast(t('delete.success'));
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.error(err)
|
||||
logger.error(err);
|
||||
toast(t('delete.error'));
|
||||
})
|
||||
.finally(() => {
|
||||
setIsDeleteing(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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,419 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { Avatar, Divider, MenuItem, Select } from '@mui/material';
|
||||
// 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 FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
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 isDevelopment from '@/lib/check-is-development';
|
||||
import { logger } from '@/lib/default-logger';
|
||||
import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
|
||||
import { pb } from '@/lib/pb';
|
||||
import { TextEditor } from '@/components/core/text-editor/text-editor';
|
||||
import { toast } from '@/components/core/toaster';
|
||||
|
||||
import type { CreateFormProps } from './type';
|
||||
|
||||
const schema = zod.object({
|
||||
cat_name: zod.string().min(1, 'name-is-required').max(255),
|
||||
cat_image: zod.array(zod.any()).optional(),
|
||||
pos: zod.number().min(1, 'position is required').max(99),
|
||||
init_answer: zod.string().optional(),
|
||||
visible: zod.string(),
|
||||
slug: zod.string().min(1, 'slug-is-required').max(255),
|
||||
remarks: zod.string().optional(),
|
||||
description: zod.string().optional(),
|
||||
// NOTE: for image handling
|
||||
avatar: zod.string().optional(),
|
||||
// TODO: remove me
|
||||
type: zod.string().optional(),
|
||||
isActive: zod.boolean().optional(),
|
||||
order: zod.number().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
export const defaultValues = {
|
||||
cat_name: '',
|
||||
cat_image: undefined,
|
||||
pos: 1,
|
||||
init_answer: '',
|
||||
visible: 'hidden',
|
||||
slug: '',
|
||||
remarks: '',
|
||||
description: '',
|
||||
} satisfies Values;
|
||||
|
||||
export function CrQuestionCreateForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
|
||||
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);
|
||||
|
||||
const payload: CreateFormProps = {
|
||||
cat_name: values.cat_name,
|
||||
cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
|
||||
pos: values.pos,
|
||||
init_answer: values.init_answer,
|
||||
visible: values.visible,
|
||||
slug: values.slug,
|
||||
remarks: values.remarks,
|
||||
description: values.description,
|
||||
//
|
||||
// TODO: remove me
|
||||
type: 'type tet',
|
||||
isActive: true,
|
||||
order: 1,
|
||||
};
|
||||
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).create(payload);
|
||||
|
||||
logger.debug(result);
|
||||
toast.success(t('create.success'));
|
||||
router.push(paths.dashboard.lp_categories.list);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast.error(t('create.failed'));
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
},
|
||||
// t is not necessary here
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[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-info')}</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
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="cat_name"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
disabled={isCreating}
|
||||
error={Boolean(errors.cat_name)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.cat_name')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.cat_name ? <FormHelperText>{errors.cat_name.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="pos"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.pos)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.pos')}</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={isCreating}
|
||||
control={control}
|
||||
name="slug"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.slug)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.slug')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.slug ? <FormHelperText>{errors.slug.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="visible"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.visible)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel>{t('edit.visible')}</InputLabel>
|
||||
<Select {...field}>
|
||||
<MenuItem value="visible">{t('edit.visible')}</MenuItem>
|
||||
<MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
|
||||
</Select>
|
||||
|
||||
{errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="init_answer"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.init_answer)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('create.init_answer')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.init_answer ? <FormHelperText>{errors.init_answer.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
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<Box>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color="text-secondary"
|
||||
>
|
||||
{t('create.description')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor
|
||||
{...field}
|
||||
content=""
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getHTML() } });
|
||||
}}
|
||||
placeholder={t('create.description.default')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isCreating}
|
||||
control={control}
|
||||
name="remarks"
|
||||
render={({ field }) => (
|
||||
<Box>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color="text.secondary"
|
||||
>
|
||||
{t('create.remarks')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '400px' } }}>
|
||||
<TextEditor
|
||||
content=""
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getText() } });
|
||||
}}
|
||||
hideToolbar
|
||||
placeholder={t('create.remarks.default')}
|
||||
/>
|
||||
</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>
|
||||
<Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
|
||||
<pre>{JSON.stringify({ errors }, null, 2)}</pre>
|
||||
</Box>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import RouterLink from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
//
|
||||
import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
//
|
||||
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 Divider from '@mui/material/Divider';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
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 { 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 { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
|
||||
import { pb } from '@/lib/pb';
|
||||
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 type { EditFormProps } from './type';
|
||||
|
||||
// TODO: review this
|
||||
const schema = zod.object({
|
||||
cat_name: zod.string().min(1, 'name-is-required').max(255),
|
||||
// accept file object when user change image
|
||||
// accept http string when user not changing image
|
||||
cat_image: zod.union([zod.array(zod.any()), zod.string()]).optional(),
|
||||
|
||||
// position
|
||||
pos: zod.number().min(1, 'position is required').max(99),
|
||||
|
||||
// it should be a valid JSON
|
||||
init_answer: zod
|
||||
.string()
|
||||
.refine(
|
||||
(value) => {
|
||||
try {
|
||||
JSON.parse(value);
|
||||
return true;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
{ message: 'init_answer must be a valid JSON' }
|
||||
)
|
||||
.optional(),
|
||||
visible: zod.string(),
|
||||
slug: zod.string().min(0, 'slug-is-required').max(255).optional(),
|
||||
remarks: zod.string().optional(),
|
||||
description: zod.string().optional(),
|
||||
// NOTE: for image handling
|
||||
avatar: zod.string().optional(),
|
||||
});
|
||||
|
||||
type Values = zod.infer<typeof schema>;
|
||||
|
||||
const defaultValues = {
|
||||
cat_name: '',
|
||||
cat_image: undefined,
|
||||
pos: 1,
|
||||
init_answer: JSON.stringify({}),
|
||||
visible: 'hidden',
|
||||
slug: '',
|
||||
remarks: '',
|
||||
description: '',
|
||||
} satisfies Values;
|
||||
|
||||
export function CrQuestionEditForm(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
|
||||
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({ show: false, detail: '' });
|
||||
|
||||
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,
|
||||
cat_image: values.avatar ? [await base64ToFile(values.avatar)] : null,
|
||||
pos: values.pos,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
init_answer: JSON.parse(values.init_answer || '{}'),
|
||||
|
||||
visible: values.visible,
|
||||
slug: values.slug || 'not-defined',
|
||||
remarks: values.remarks,
|
||||
description: values.description,
|
||||
//
|
||||
// TODO: remove below
|
||||
type: '',
|
||||
};
|
||||
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).update(catId, tempUpdate);
|
||||
logger.debug(result);
|
||||
toast.success(t('edit.success'));
|
||||
router.push(paths.dashboard.lp_categories.list);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast.error(t('update.failed'));
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
},
|
||||
// t is not necessary here
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[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]
|
||||
);
|
||||
|
||||
// TODO: need to align with save form
|
||||
// use trycatch
|
||||
const [textDescription, setTextDescription] = React.useState<string>('');
|
||||
const [textRemarks, setTextRemarks] = React.useState<string>('');
|
||||
|
||||
// load existing data when user arrive
|
||||
const loadExistingData = React.useCallback(
|
||||
async (id: string) => {
|
||||
setShowLoading(true);
|
||||
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_LP_CATEGORIES).getOne(id);
|
||||
|
||||
reset({ ...defaultValues, ...result, init_answer: JSON.stringify(result.init_answer) });
|
||||
setTextDescription(result.description);
|
||||
setTextRemarks(result.remarks);
|
||||
|
||||
if (result.cat_image !== '') {
|
||||
const fetchResult = await fetch(
|
||||
`http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.cat_image}`
|
||||
);
|
||||
|
||||
const blob = await fetchResult.blob();
|
||||
const url = await fileToBase64(blob);
|
||||
|
||||
setValue('avatar', url);
|
||||
} else {
|
||||
setValue('avatar', '');
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
toast(t('list.error'));
|
||||
|
||||
setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
|
||||
} finally {
|
||||
setShowLoading(false);
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[catId]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadExistingData(catId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [catId]);
|
||||
|
||||
if (showLoading) return <FormLoading />;
|
||||
if (showError.show)
|
||||
return (
|
||||
<ErrorDisplay
|
||||
message={t('error.unable-to-process-request')}
|
||||
code="500"
|
||||
details={showError.detail}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Stack
|
||||
divider={<Divider />}
|
||||
spacing={4}
|
||||
>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.basic-info')}</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('edit.avatar')}</Typography>
|
||||
<Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
avatarInputRef.current?.click();
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
{t('edit.avatar_select')}
|
||||
</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.cat_name')}</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.pos')}</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="slug"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.slug)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('edit.slug')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.slug ? <FormHelperText>{errors.slug.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')}</InputLabel>
|
||||
<Select {...field}>
|
||||
<MenuItem value="visible">{t('edit.visible')}</MenuItem>
|
||||
<MenuItem value="hidden">{t('edit.hidden')}</MenuItem>
|
||||
</Select>
|
||||
|
||||
{errors.visible ? <FormHelperText>{errors.visible.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
{/* */}
|
||||
<Grid
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<Controller
|
||||
disabled={isUpdating}
|
||||
control={control}
|
||||
name="init_answer"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
error={Boolean(errors.init_answer)}
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel required>{t('edit.init_answer')}</InputLabel>
|
||||
<OutlinedInput {...field} />
|
||||
{errors.init_answer ? <FormHelperText>{errors.init_answer.message}</FormHelperText> : null}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
{/* */}
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h6">{t('edit.detail-information')}</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('edit.description')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
|
||||
<TextEditor
|
||||
{...field}
|
||||
content={textDescription}
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getHTML() } });
|
||||
}}
|
||||
placeholder={t('edit.description.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('edit.remarks')}
|
||||
</Typography>
|
||||
<Box sx={{ mt: '8px', '& .tiptap-container': { height: '200px' } }}>
|
||||
<TextEditor
|
||||
content={textRemarks}
|
||||
onUpdate={({ editor }) => {
|
||||
field.onChange({ target: { value: editor.getText() } });
|
||||
}}
|
||||
hideToolbar
|
||||
placeholder={t('edit.remarks.default')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
{/* */}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.lp_categories.list}
|
||||
>
|
||||
{t('edit.cancelButton')}
|
||||
</Button>
|
||||
|
||||
<LoadingButton
|
||||
disabled={isUpdating}
|
||||
loading={isUpdating}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
>
|
||||
{t('edit.updateButton')}
|
||||
</LoadingButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,456 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
// import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
import GetAllCount from '@/db/QuizListenings/GetAllCount';
|
||||
import GetHiddenCount from '@/db/QuizListenings/GetHiddenCount';
|
||||
import GetVisibleCount from '@/db/QuizListenings/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 { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
|
||||
import { Option } from '@/components/core/option';
|
||||
|
||||
import { useCrQuestionsSelection } from './cr-questions-selection-context';
|
||||
import { CrQuestion } from './type';
|
||||
|
||||
export interface Filters {
|
||||
email?: string;
|
||||
phone?: string;
|
||||
status?: string;
|
||||
name?: string;
|
||||
visible?: string;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
|
||||
export interface LpQuestionsFiltersProps {
|
||||
filters?: Filters;
|
||||
sortDir?: SortDir;
|
||||
fullData: CrQuestion[];
|
||||
}
|
||||
|
||||
export function CrQuestionsFilters({
|
||||
filters = {},
|
||||
sortDir = 'desc',
|
||||
fullData,
|
||||
}: LpQuestionsFiltersProps): 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 = useCrQuestionsSelection();
|
||||
|
||||
function getVisible(): number {
|
||||
return fullData.reduce((count, item: CrQuestion) => {
|
||||
return item.visible === 'visible' ? count + 1 : count;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function getHidden(): number {
|
||||
return fullData.reduce((count, item: CrQuestion) => {
|
||||
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);
|
||||
}
|
||||
|
||||
// NOTE: modify according to COLLECTION
|
||||
router.push(`${paths.dashboard.lp_questions.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>('');
|
||||
const { t } = useTranslation();
|
||||
|
||||
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"
|
||||
>
|
||||
{t('Apply')}
|
||||
</Button>
|
||||
</FilterPopover>
|
||||
);
|
||||
}
|
||||
|
||||
function PhoneFilterPopover(): React.JSX.Element {
|
||||
const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
|
||||
const [value, setValue] = React.useState<string>('');
|
||||
const { t } = useTranslation();
|
||||
|
||||
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"
|
||||
>
|
||||
{t('Apply')}
|
||||
</Button>
|
||||
</FilterPopover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
|
||||
function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
interface LessonQuestionsPaginationProps {
|
||||
count: number;
|
||||
page: number;
|
||||
//
|
||||
setPage: (page: number) => void;
|
||||
setRowsPerPage: (page: number) => void;
|
||||
rowsPerPage: number;
|
||||
}
|
||||
|
||||
export function CrQuestionsPagination({
|
||||
count,
|
||||
page,
|
||||
//
|
||||
setPage,
|
||||
setRowsPerPage,
|
||||
rowsPerPage,
|
||||
}: LessonQuestionsPaginationProps): 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,46 @@
|
||||
'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 type { CrQuestion } from './type';
|
||||
|
||||
function noop(): void {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export interface CrQuestionsSelectionContextValue extends Selection {}
|
||||
|
||||
export const CrQuestionsSelectionContext = React.createContext<CrQuestionsSelectionContextValue>({
|
||||
deselectAll: noop,
|
||||
deselectOne: noop,
|
||||
selectAll: noop,
|
||||
selectOne: noop,
|
||||
selected: new Set(),
|
||||
selectedAny: false,
|
||||
selectedAll: false,
|
||||
});
|
||||
|
||||
interface CrQuestionsSelectionProviderProps {
|
||||
children: React.ReactNode;
|
||||
lessonQuestions: CrQuestion[];
|
||||
}
|
||||
|
||||
export function CrQuestionsSelectionProvider({
|
||||
children,
|
||||
lessonQuestions = [],
|
||||
}: CrQuestionsSelectionProviderProps): React.JSX.Element {
|
||||
const customerIds = React.useMemo(() => lessonQuestions.map((customer) => customer.id), [lessonQuestions]);
|
||||
const selection = useSelection(customerIds);
|
||||
|
||||
return (
|
||||
<CrQuestionsSelectionContext.Provider value={{ ...selection }}>{children}</CrQuestionsSelectionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useCrQuestionsSelection(): CrQuestionsSelectionContextValue {
|
||||
return React.useContext(CrQuestionsSelectionContext);
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
'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 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 { useCrQuestionsSelection } from './cr-questions-selection-context';
|
||||
import type { CrQuestion } from './type';
|
||||
|
||||
function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrQuestion>[] {
|
||||
return [
|
||||
{
|
||||
formatter: (row): React.JSX.Element => (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
<Link
|
||||
color="inherit"
|
||||
component={RouterLink}
|
||||
href={paths.dashboard.cr_questions.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.cr_questions.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 LessonQuestionsTableProps {
|
||||
rows: CrQuestion[];
|
||||
reloadRows: () => void;
|
||||
}
|
||||
|
||||
export function CrQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps): React.JSX.Element {
|
||||
const { t } = useTranslation(['lp_categories']);
|
||||
const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCrQuestionsSelection();
|
||||
|
||||
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<CrQuestion>
|
||||
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: update this */}
|
||||
{t('no-lesson-categories-found')}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
61
002_source/cms/src/components/dashboard/cr/questions/type.d.ts
vendored
Normal file
61
002_source/cms/src/components/dashboard/cr/questions/type.d.ts
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
export interface CrQuestion {
|
||||
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;
|
||||
slug: string;
|
||||
init_answer: any;
|
||||
//
|
||||
name: string;
|
||||
avatar: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
quota: number;
|
||||
status: 'pending' | 'active' | 'blocked' | 'NA';
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface CreateFormProps {
|
||||
cat_name: string;
|
||||
cat_image: File[] | null;
|
||||
pos: number;
|
||||
init_answer?: string;
|
||||
visible: string;
|
||||
slug: string;
|
||||
remarks?: string;
|
||||
description?: string;
|
||||
//
|
||||
// TODO: to remove
|
||||
type: string;
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
name?: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
export interface EditFormProps {
|
||||
cat_name: string;
|
||||
cat_image: File[] | null;
|
||||
pos: number;
|
||||
init_answer: any;
|
||||
visible: string;
|
||||
slug: string;
|
||||
remarks?: string;
|
||||
description?: string;
|
||||
//
|
||||
// TODO: remove below
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface Helloworld {
|
||||
helloworld: string;
|
||||
}
|
||||
4642
002_source/cms/src/components/dashboard/cr/repomix-output.xml
Normal file
4642
002_source/cms/src/components/dashboard/cr/repomix-output.xml
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,111 @@
|
||||
# LP Categories Components Summary
|
||||
|
||||
## Main Components
|
||||
|
||||
### `lp-categories-table.tsx`
|
||||
|
||||
- Displays LP categories in a table format with columns for:
|
||||
- Name with image
|
||||
- Slug
|
||||
- Status indicators
|
||||
- Created date
|
||||
- Action buttons
|
||||
- Features:
|
||||
- Single and multiple row selection
|
||||
- Status indicators (Active/Inactive)
|
||||
- Edit/view/delete actions
|
||||
- Integration with other LP components
|
||||
|
||||
### `lp-category-create-form.tsx`
|
||||
|
||||
- Form for creating new LP categories
|
||||
- Key fields:
|
||||
- Name (required)
|
||||
- Image upload
|
||||
- Slug (auto-generated)
|
||||
- Status toggle
|
||||
- Description (rich text)
|
||||
- Additional metadata
|
||||
- Features:
|
||||
- Form validation
|
||||
- Image handling
|
||||
- Auto-slug generation
|
||||
- Internationalization support
|
||||
|
||||
### `lp-category-edit-form.tsx`
|
||||
|
||||
- Form for editing existing LP categories
|
||||
- Similar to create form but:
|
||||
- Pre-populates existing data
|
||||
- Handles image updates differently
|
||||
- May have additional edit-specific validation
|
||||
|
||||
## Supporting Components
|
||||
|
||||
### `confirm-delete-modal.tsx`
|
||||
|
||||
- Confirmation dialog for LP category deletion
|
||||
- Shows:
|
||||
- Delete confirmation message
|
||||
- Loading state during deletion
|
||||
- Success/error notifications
|
||||
|
||||
### `lp-categories-filters.tsx`
|
||||
|
||||
- Filtering controls for LP categories table
|
||||
- Includes:
|
||||
- Status filter tabs
|
||||
- Text search
|
||||
- Sort options
|
||||
- Selected items count
|
||||
- Bulk actions
|
||||
|
||||
### `lp-categories-pagination.tsx`
|
||||
|
||||
- Pagination controls for LP categories table
|
||||
- Standard features:
|
||||
- Page navigation
|
||||
- Rows per page selection
|
||||
- Current/total page display
|
||||
|
||||
### `lp-categories-selection-context.tsx`
|
||||
|
||||
- Manages selection state for LP categories
|
||||
- Provides:
|
||||
- Selection/deselection functions
|
||||
- Current selection state
|
||||
- Bulk operation support
|
||||
|
||||
## Types & Constants
|
||||
|
||||
### `type.d.ts`
|
||||
|
||||
- Type definitions including:
|
||||
- `LpCategory`: Main LP category type
|
||||
- Form props for create/edit
|
||||
- Component-specific prop types
|
||||
|
||||
### `_constants.ts`
|
||||
|
||||
- Contains:
|
||||
- Default LP category values
|
||||
- Empty category template
|
||||
- Other shared constants
|
||||
|
||||
## Component Relationships
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[lp-categories-table] --> B[lp-category-create-form]
|
||||
A --> C[lp-category-edit-form]
|
||||
A --> D[confirm-delete-modal]
|
||||
A --> E[lp-categories-filters]
|
||||
A --> F[lp-categories-pagination]
|
||||
A --> G[lp-categories-selection-context]
|
||||
H[type.d.ts] --> A
|
||||
H --> B
|
||||
H --> C
|
||||
I[_constants.ts] --> A
|
||||
I --> B
|
||||
I --> C
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
# LP Questions Components Summary
|
||||
|
||||
## Main Components
|
||||
|
||||
### LP Questions Table
|
||||
|
||||
- Primary data display component using Material UI DataTable
|
||||
- Features:
|
||||
- Column configurations with custom formatters
|
||||
- Status indicators with visual icons
|
||||
- Progress bars for quota visualization
|
||||
- Row selection and bulk operations
|
||||
- Internationalization support
|
||||
- Integration with filters and pagination
|
||||
|
||||
### Question Forms
|
||||
|
||||
- **Create Form**:
|
||||
|
||||
- React Hook Form with Zod schema validation
|
||||
- Image upload with preview functionality
|
||||
- Rich text editors for descriptions
|
||||
- Internationalized labels and error messages
|
||||
- Form submission to PocketBase
|
||||
|
||||
- **Edit Form**:
|
||||
- Pre-fills existing data from PocketBase
|
||||
- Conditional image handling
|
||||
- Loading states and error handling
|
||||
- JSON validation for complex fields
|
||||
- Pre-filled rich text editors
|
||||
|
||||
## Supporting Components
|
||||
|
||||
### Selection Management
|
||||
|
||||
- Context-based selection state
|
||||
- Supports:
|
||||
- Individual selection/deselection
|
||||
- Bulk select/deselect operations
|
||||
- Selection state tracking (selectedAny, selectedAll)
|
||||
- Integration with question IDs
|
||||
|
||||
### Filters & Pagination
|
||||
|
||||
- **Filters**:
|
||||
|
||||
- Tab-based filtering (All/Visible/Hidden) with counts
|
||||
- Name and type search functionality
|
||||
- Sort controls (Newest/Oldest)
|
||||
- URL parameter synchronization
|
||||
|
||||
- **Pagination**:
|
||||
- Material UI TablePagination implementation
|
||||
- Standard page size options
|
||||
- Callback-based integration with parent
|
||||
|
||||
### Delete Confirmation
|
||||
|
||||
- Modal dialog with:
|
||||
- Loading state during deletion
|
||||
- Success/error toast notifications
|
||||
- Internationalized messages
|
||||
- PocketBase integration
|
||||
- Custom error logging
|
||||
|
||||
## Types & Constants
|
||||
|
||||
- Type definitions for LP question data (LpQuestion)
|
||||
- Shared constants for:
|
||||
- Column configurations
|
||||
- Form defaults
|
||||
- Validation rules
|
||||
|
||||
## Component Relationships
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[LP Questions Table] --> B[Question Forms]
|
||||
A --> C[Selection Context]
|
||||
A --> D[Filters]
|
||||
A --> E[Pagination]
|
||||
A --> F[Delete Modal]
|
||||
B --> G[PocketBase]
|
||||
F --> G
|
||||
```
|
||||
@@ -232,6 +232,7 @@ export function LpQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
|
||||
sx={{ textAlign: 'center' }}
|
||||
variant="body2"
|
||||
>
|
||||
{/* TODO: update this */}
|
||||
{t('no-lesson-categories-found')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
6370
002_source/cms/src/components/dashboard/lp/repomix-output.xml
Normal file
6370
002_source/cms/src/components/dashboard/lp/repomix-output.xml
Normal file
File diff suppressed because it is too large
Load Diff
@@ -232,6 +232,7 @@ export function MfCategoriesTable({ rows, reloadRows }: LessonCategoriesTablePro
|
||||
sx={{ textAlign: 'center' }}
|
||||
variant="body2"
|
||||
>
|
||||
{/* TODO: update this */}
|
||||
{t('no-lesson-categories-found')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -232,6 +232,7 @@ export function MfQuestionsTable({ rows, reloadRows }: LessonQuestionsTableProps
|
||||
sx={{ textAlign: 'center' }}
|
||||
variant="body2"
|
||||
>
|
||||
{/* TODO: update this */}
|
||||
{t('no-lesson-categories-found')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
4633
002_source/cms/src/components/dashboard/mf/repomix-output.xml
Normal file
4633
002_source/cms/src/components/dashboard/mf/repomix-output.xml
Normal file
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,10 @@ const COL_QUIZ_LP_QUESTIONS = 'QuizLPQuestions';
|
||||
const COL_QUIZ_MF_CATEGORIES = 'QuizMFCategories';
|
||||
const COL_QUIZ_MF_QUESTIONS = 'QuizMFQuestions';
|
||||
|
||||
// New CR versions
|
||||
const COL_QUIZ_CR_CATEGORIES = 'QuizCRCategories';
|
||||
const COL_QUIZ_CR_QUESTIONS = 'QuizCRQuestions';
|
||||
|
||||
export {
|
||||
COL_LESSON_TYPES,
|
||||
NO_VALUE,
|
||||
@@ -32,4 +36,7 @@ export {
|
||||
COL_QUIZ_MF_CATEGORIES,
|
||||
COL_QUIZ_MF_QUESTIONS,
|
||||
//
|
||||
COL_QUIZ_CR_CATEGORIES,
|
||||
COL_QUIZ_CR_QUESTIONS,
|
||||
//
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp_categories/type';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp/categories/type';
|
||||
|
||||
export default function createLessonCategory(data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_LESSON_CATEGORIES).create(data);
|
||||
|
||||
@@ -2,7 +2,7 @@ import { COL_LESSON_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp_categories/type';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp/categories/type';
|
||||
|
||||
export default function updateLessonCategory(id: string, data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_LESSON_CATEGORIES).update(id, data);
|
||||
|
||||
9
002_source/cms/src/db/QuizCRCategories/Create.tsx
Normal file
9
002_source/cms/src/db/QuizCRCategories/Create.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import { CreateFormProps } from '@/components/dashboard/cr/categories/type';
|
||||
|
||||
export default function createQuizCRCategory(data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_CR_CATEGORIES).create(data);
|
||||
}
|
||||
7
002_source/cms/src/db/QuizCRCategories/Delete.tsx
Normal file
7
002_source/cms/src/db/QuizCRCategories/Delete.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function deleteQuizCRCategories(id: string): Promise<boolean> {
|
||||
return pb.collection(COL_QUIZ_CR_CATEGORIES).delete(id);
|
||||
}
|
||||
7
002_source/cms/src/db/QuizCRCategories/GetAll.tsx
Normal file
7
002_source/cms/src/db/QuizCRCategories/GetAll.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getAllQuizCRCategories(): Promise<RecordModel[]> {
|
||||
return pb.collection(COL_QUIZ_CR_CATEGORIES).getFullList();
|
||||
}
|
||||
9
002_source/cms/src/db/QuizCRCategories/GetAllCount.tsx
Normal file
9
002_source/cms/src/db/QuizCRCategories/GetAllCount.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
// REQ0006
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default async function GetAllCount(): Promise<number> {
|
||||
const { totalItems: count } = await pb.collection(COL_QUIZ_CR_CATEGORIES).getList(1, 9999, {});
|
||||
return count;
|
||||
}
|
||||
8
002_source/cms/src/db/QuizCRCategories/GetById.tsx
Normal file
8
002_source/cms/src/db/QuizCRCategories/GetById.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getQuizCRCategoryById(id: string): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_CR_CATEGORIES).getOne(id);
|
||||
}
|
||||
13
002_source/cms/src/db/QuizCRCategories/GetHiddenCount.tsx
Normal file
13
002_source/cms/src/db/QuizCRCategories/GetHiddenCount.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
// REQ0006
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default async function getHiddenQuizCRCategoriesCount(): Promise<number> {
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_CR_CATEGORIES).getList(1, 9999, { filter: 'visible = "hidden"' });
|
||||
const { totalItems: count } = result;
|
||||
return count;
|
||||
} catch (error) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
14
002_source/cms/src/db/QuizCRCategories/GetVisibleCount.tsx
Normal file
14
002_source/cms/src/db/QuizCRCategories/GetVisibleCount.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
// REQ0006
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default async function getVisibleQuizCRCategoriesCount(): Promise<number> {
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_CR_CATEGORIES).getList(1, 9999, { filter: 'visible = "visible"' });
|
||||
const { totalItems: count } = result;
|
||||
return count;
|
||||
} catch (error) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
9
002_source/cms/src/db/QuizCRCategories/Update.tsx
Normal file
9
002_source/cms/src/db/QuizCRCategories/Update.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { COL_QUIZ_CR_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/cr/categories/type';
|
||||
|
||||
export default function updateQuizCRCategory(id: string, data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_CR_CATEGORIES).update(id, data);
|
||||
}
|
||||
13
002_source/cms/src/db/QuizCRQuestions/Create.tsx
Normal file
13
002_source/cms/src/db/QuizCRQuestions/Create.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/cr/questions/type';
|
||||
|
||||
// interface CreateForm {
|
||||
// // TODO: Add QuizCRQuestions fields
|
||||
// }
|
||||
|
||||
export default function createQuizCRQuestion(data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_CR_QUESTIONS).create(data);
|
||||
}
|
||||
7
002_source/cms/src/db/QuizCRQuestions/Delete.tsx
Normal file
7
002_source/cms/src/db/QuizCRQuestions/Delete.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function deleteQuizCRQuestions(id: string): Promise<boolean> {
|
||||
return pb.collection(COL_QUIZ_CR_QUESTIONS).delete(id);
|
||||
}
|
||||
8
002_source/cms/src/db/QuizCRQuestions/GetAll.tsx
Normal file
8
002_source/cms/src/db/QuizCRQuestions/GetAll.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default function getAllQuizCRQuestions(): Promise<RecordModel[]> {
|
||||
return pb.collection(COL_QUIZ_CR_QUESTIONS).getFullList();
|
||||
}
|
||||
9
002_source/cms/src/db/QuizCRQuestions/GetAllCount.tsx
Normal file
9
002_source/cms/src/db/QuizCRQuestions/GetAllCount.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
// REQ0006
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default async function GetAllCount(): Promise<number> {
|
||||
const { totalItems: count } = await pb.collection(COL_QUIZ_CR_QUESTIONS).getList(1, 9999, {});
|
||||
return count;
|
||||
}
|
||||
14
002_source/cms/src/db/QuizCRQuestions/GetHiddenCount.tsx
Normal file
14
002_source/cms/src/db/QuizCRQuestions/GetHiddenCount.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
// REQ0006
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default async function getHiddenQuizCRQuestionsCount(): Promise<number> {
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_CR_QUESTIONS).getList(1, 9999, { filter: 'visible = "hidden"' });
|
||||
const { totalItems: count } = result;
|
||||
return count;
|
||||
} catch (error) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
14
002_source/cms/src/db/QuizCRQuestions/GetVisibleCount.tsx
Normal file
14
002_source/cms/src/db/QuizCRQuestions/GetVisibleCount.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
// REQ0006
|
||||
import { COL_QUIZ_CR_QUESTIONS } from '@/constants';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
|
||||
export default async function getVisibleQuizCRQuestionsCount(): Promise<number> {
|
||||
try {
|
||||
const result = await pb.collection(COL_QUIZ_CR_QUESTIONS).getList(1, 9999, { filter: 'visible = "visible"' });
|
||||
const { totalItems: count } = result;
|
||||
return count;
|
||||
} catch (error) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp_categories/type';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp/categories/type';
|
||||
|
||||
export default function updateQuizLPCategory(id: string, data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_LP_CATEGORIES).update(id, data);
|
||||
|
||||
@@ -2,7 +2,7 @@ import { COL_QUIZ_LP_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp_categories/type';
|
||||
import type { CreateFormProps } from '@/components/dashboard/lp/categories/type';
|
||||
|
||||
export default function updateQuizLPCategory(id: string, data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_LP_CATEGORIES).update(id, data);
|
||||
|
||||
@@ -2,7 +2,7 @@ import { COL_QUIZ_MF_CATEGORIES } from '@/constants';
|
||||
import type { RecordModel } from 'pocketbase';
|
||||
|
||||
import { pb } from '@/lib/pb';
|
||||
import type { CreateFormProps } from '@/components/dashboard/mf_categories/type';
|
||||
import type { CreateFormProps } from '@/components/dashboard/mf/categories/type';
|
||||
|
||||
export default function createQuizMFCategory(data: CreateFormProps): Promise<RecordModel> {
|
||||
return pb.collection(COL_QUIZ_MF_CATEGORIES).create(data);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user