update requirements,

001_documentation/Requirements/REQ0001/index.md

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

001_documentation/Requirements/REQ0002/index.md

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

001_documentation/Requirements/REQ0006/008_update_dbml_from_json.md

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

001_documentation/Requirements/REQ0006/PROMPT_LessonCategories.MD

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

001_documentation/Requirements/REQ0006/PROMPT_LessonTypes.MD

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

001_documentation/Requirements/REQ0006/PROMPT_QuizCategories.MD

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

001_documentation/Requirements/REQ0006/PROMPT_QuizConnectives.MD

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

001_documentation/Requirements/REQ0006/PROMPT_QuizConnectivesCategories.MD

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

001_documentation/Requirements/REQ0006/PROMPT_QuizListenings.MD

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

001_documentation/Requirements/REQ0006/PROMPT_QuizMatchings.MD

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

001_documentation/Requirements/REQ0006/PROMPT_UserMetas.MD

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

001_documentation/Requirements/REQ0006/PROMPT_Users.MD

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

001_documentation/Requirements/REQ0006/PROMPT_Vocabularies.MD

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

001_documentation/Requirements/REQ0006/_GUIDELINE.md

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

001_documentation/Requirements/REQ0006/convert.js

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

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

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

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

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

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

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

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

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

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

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

001_documentation/Requirements/REQ0006/schema.dbml

@@ -1,266 +1,465 @@
-// Users table with auth fields
-Table Users {
-  // system field
-  id text [pk]
-  tokenKey text [not null]
-  created datetime [default: `now()`]
-  updated datetime
-  password text [not null]
+// Generated at:  2025-05-08T05:00:49.862Z
 
-  // value field
+
+// 
+// collection id:   pbc_3142635823 
+// collection name: _superusers 
+// collection type: auth 
+Table _superusers {
+  id text [pk, not null]
+  password varchar [not null]
+  tokenKey text [not null]
+  email text [not null]
+  emailVisibility boolean
+  verified boolean
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   _pb_users_auth_ 
+// collection name: users 
+// collection type: auth 
+Table users {
+  id text [pk, not null]
+  password varchar [not null]
+  tokenKey text [not null]
   email text [not null]
   emailVisibility boolean
   verified boolean
   name text
   avatar file
+  created datetime
+  updated datetime
+  visible text
 }
 
-// LessonTypes stores different types of lessons
-// lesson_types, lesson_type
-Table LessonTypes {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // timestamp when the lesson type was created
-  updated datetime // timestamp when the lesson type was last updated
-  // value field
-  name text // changed from varchar to text
-  type text // changed from varchar to text
+// 
+// collection id:   pbc_1430376151 
+// collection name: Categories 
+// collection type: base 
+Table Categories {
+  id text [pk, not null]
+  cat_name text
+  cat_image_url text
+  cat_image file
+  pos integer
+  lesson_id integer [ref: > LessonsTypes.id] // relation3455582614
+  remarks text
+  visible text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_108570809 
+// collection name: Customers 
+// collection type: base 
+Table Customers {
+  id text [pk, not null]
+  name text
+  email text
+  phone text
+  quota integer
+  status text
+  avatar_file file
+  user_id integer [ref: > users.id] // relation2809058197
+  billingAddress text
+  timezone text
+  language text
+  currency text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1196309394 
+// collection name: LessonsCategories 
+// collection type: base 
+Table LessonsCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image_url text
+  cat_image file
+  pos integer
+  lesson_id integer [ref: > LessonsTypes.id] // relation3455582614
+  description text
+  remarks text
+  visible text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2328411368 
+// collection name: LessonsTypes 
+// collection type: base 
+Table LessonsTypes {
+  id text [pk, not null]
+  name text
+  type text
   pos integer
   visible text
-  field date
-}
-
-
-// LessonCategories stores categories of lessons
-// lesson_categories, lesson_category
-Table LessonCategories {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // timestamp when the category was created
-  updated datetime // timestamp when the category was last updated
-  // value field
-  cat_name text // changed from varchar to text
-  cat_image_url text // new field
-  cat_image file // changed from varchar to file
-  pos integer
-  lesson_id integer [ref: > LessonTypes.id] // foreign key referencing LessonTypes.id
-  description text // new field
-  remarks text // changed from varchar to text
-  visible text // new field
-}
-
-Table Helloworlds {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-  hello text // new field
-}
-
-Table UserMetas {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
+  created datetime
   updated datetime
-
-  // value field
-  helloworld text // changed from varchar to text
-  meta json // new field
-  user_id text [ref: > Users.id] // changed type and reference
-  state text // new field
-  avatar file // changed from blob to file
-  role text // new field
+  field datetime
 }
 
-Table QuizCategories {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
+// 
+// collection id:   pbc_977978967 
+// collection name: Notifications 
+// collection type: base 
+Table Notifications {
+  id text [pk, not null]
+  read boolean
+  type text
+  author text
+  job text
+  description text
+  NOTI_ID text
+  created datetime
   updated datetime
-
-  // value field
-  cat_name text // changed from varchar to text
-  cat_image text // changed from varchar to text
-  init_answer json // new field
 }
 
-
-// stores all questions of matching frenzy
-Table QuizMatchings {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  word text // changed from varchar to text
-  word_c text // changed from varchar to text
-  cat_id text [ref: > QuizCategories.id] // changed type and reference
-}
-
-// QuizListening stores all listening quiz data
-Table QuizListenings {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  sound file // changed from varchar to file
-  word text // changed from varchar to text
-  cat_id text [ref: > QuizCategories.id] // changed type and reference
-}
-
-
-// stores all categories of connectives revision quiz
-Table QuizConnectivesCategories {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  cat_name text // changed from varchar to text
-  cat_image file // changed from varchar to file
-}
-
-// stores all questions of connectives revision quiz
-Table QuizConnectives {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  question_fh text // changed from varchar to text
-  question_sh text // changed from varchar to text
-  modal_ans text // changed from varchar to text
-  cat_id text [ref: > QuizConnectivesCategories.id] // changed type and reference
-}
-
-// Lessons stores all lessons in the database
-Table Vocabularies {
-  // system field
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`] // timestamp when the lesson was created
-  updated datetime // timestamp when the lesson was last updated
-
-  // value field
-  image file // changed from varchar to file
-  sound file // changed from varchar to file
-  word text // changed from varchar to text
-  word_c text // changed from varchar to text
-  sample_e text // changed from varchar to text
-  sample_c text // changed from varchar to text
-  cat_id text [ref: > LessonCategories.id] // changed type and reference
-  category text // changed from varchar to text
-  lesson_type_id text [ref: > LessonTypes.id] // changed type and reference
-}
-
-// Listening Practice Quiz Categories
-// store listening practice category, (LpCategories, LpCategory)
-Table QuizLPCategories {
-  // system fields
-  id text [pk]
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value fields
+// 
+// collection id:   pbc_4061499106 
+// collection name: QuizCRCategories 
+// collection type: base 
+Table QuizCRCategories {
+  id text [pk, not null]
   cat_name text
   cat_image file
-  pos number
-  init_answer json
+  pos integer
+  init_answer text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_3141885671 
+// collection name: QuizCRQuestions 
+// collection type: base 
+Table QuizCRQuestions {
+  id text [pk, not null]
+  question_fh text
+  question_sh text
+  modal_ans text
+  cat_id integer [ref: > QuizCRCategories.id] // relation1827623476
+  options text
+  created datetime
+  updated datetime
+  init_answer text
+}
+
+// 
+// collection id:   pbc_3571292172 
+// collection name: QuizCategories 
+// collection type: base 
+Table QuizCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image text
+  init_answer text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_96745150 
+// collection name: QuizConnectives 
+// collection type: base 
+Table QuizConnectives {
+  id text [pk, not null]
+  question_fh text
+  question_sh text
+  modal_ans text
+  cat_id integer [ref: > QuizConnectivesCategories.id] // relation3870140739
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_342761728 
+// collection name: QuizConnectivesCategories 
+// collection type: base 
+Table QuizConnectivesCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_3639453778 
+// collection name: QuizLPCategories 
+// collection type: base 
+Table QuizLPCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  pos integer
+  init_answer text
+  created datetime
+  updated datetime
   visible text
   slug text
   remarks text
   description text
 }
 
-// Listening Practice Quiz Questions
+// 
+// collection id:   pbc_742947356 
+// collection name: QuizLPQuestions 
+// collection type: base 
 Table QuizLPQuestions {
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
+  id text [pk, not null]
+  word text
+  sound file
+  cat_id integer [ref: > QuizLPCategories.id] // relation3870140739
+  created datetime
   updated datetime
-  word text // changed from varchar to text
-  sound file // changed from blob to file
-  cat_id text [ref: > QuizLPCategories.id] // changed type and reference
-  cat_name text // new field
-  cat_image file // new field
-  pos number // new field
-  init_answer json // new field
-  visible text // new field
-  slug text // new field
-  remarks text // new field
-  description text // new field
-}
-
-// Matching Frenzy Quiz Categories
-Table QuizMFCategories {
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
-  updated datetime
-  cat_name text // changed from varchar to text
-  cat_image file // changed from blob to file
-  pos number // changed from integer to number
-  init_answer json
-  visible text // new field
-}
-
-// Matching Frenzy Quiz Questions
-Table QuizMFQuestions {
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
-  updated datetime
-  word text // changed from varchar to text
-  word_c text // changed from varchar to text
-  cat_id text [ref: > QuizMFCategories.id] // changed type and reference
-  visible text // new field
-  sound file // new field
-  cat_image file // new field
-}
-
-// Connectives Revision Quiz Categories
-Table QuizCRCategories {
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
-  updated datetime
-  cat_name text // changed from varchar to text
-  cat_image file // changed from blob to file
+  cat_name text
+  cat_image file
   pos integer
-  init_answer json
+  init_answer text
+  visible text
+  slug text
+  remarks text
+  description text
 }
 
-// Connectives Revision Quiz Questions
-Table QuizCRQuestions {
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
+// 
+// collection id:   pbc_2511066072 
+// collection name: QuizListenings 
+// collection type: base 
+Table QuizListenings {
+  id text [pk, not null]
+  sound file
+  word text
+  cat_id integer [ref: > QuizCategories.id] // relation3870140739
+  created datetime
   updated datetime
-  question_fh text // changed from varchar to text
-  question_sh text // changed from varchar to text
-  modal_ans text // changed from varchar to text
-  cat_id text [ref: > QuizCRCategories.id] // changed type and reference
-  options json // new field
 }
 
-// Test table
-Table t1 {
-  id text [pk] // changed from int to text
-  created datetime [default: `now()`]
+// 
+// collection id:   pbc_84667061 
+// collection name: QuizMFCategories 
+// collection type: base 
+Table QuizMFCategories {
+  id text [pk, not null]
+  cat_name text
+  cat_image file
+  pos integer
+  init_answer text
+  created datetime
   updated datetime
-  hello text // changed from name to hello
-  test_file file // new field
+  visible text
 }
 
-// Customers table
-Table Customers {
-  id text [pk] // new table
-  created datetime [default: `now()`]
+// 
+// collection id:   pbc_3346420851 
+// collection name: QuizMFQuestions 
+// collection type: base 
+Table QuizMFQuestions {
+  id text [pk, not null]
+  word text
+  word_c text
+  cat_id integer [ref: > QuizMFCategories.id] // relation3870140739
+  created datetime
   updated datetime
+  visible text
+  sound file
+  cat_image file
+  init_answer text
+}
+
+// 
+// collection id:   pbc_2936646783 
+// collection name: QuizMatchings 
+// collection type: base 
+Table QuizMatchings {
+  id text [pk, not null]
+  word text
+  word_c text
+  cat_id integer [ref: > QuizCategories.id] // relation3870140739
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_491894781 
+// collection name: Students 
+// collection type: base 
+Table Students {
+  id text [pk, not null]
   name text
   email text
   phone text
-  quota number
+  quota integer
   status text
   avatar_file file
-  cat_id text [ref: > QuizMFCategories.id] // refer to a single user in `Users` table
+  user_id integer [ref: > users.id] // relation2809058197
+  billingAddress text
+  timezone text
+  language text
+  currency text
+  created datetime
+  updated datetime
 }
+
+// 
+// collection id:   pbc_1413424569 
+// collection name: Teachers 
+// collection type: base 
+Table Teachers {
+  id text [pk, not null]
+  name text
+  email text
+  phone text
+  quota integer
+  status text
+  avatar_file file
+  user_id integer [ref: > users.id] // relation2809058197
+  billingAddress text
+  timezone text
+  language text
+  currency text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1305841361 
+// collection name: UserMetas 
+// collection type: base 
+Table UserMetas {
+  id text [pk, not null]
+  helloworld text
+  meta text
+  user_id integer [ref: > users.id] // relation2809058197
+  created datetime
+  updated datetime
+  status text
+  avatar file
+  role text
+  name text
+  email text
+  phone text
+  avatar_file file
+}
+
+// 
+// collection id:   pbc_1638686383 
+// collection name: Vocabularies 
+// collection type: base 
+Table Vocabularies {
+  id text [pk, not null]
+  image file
+  sound file
+  word text
+  word_c text
+  sample_e text
+  sample_c text
+  cat_id integer [ref: > Categories.id] // relation3870140739
+  category text
+  lesson_type_id integer [ref: > LessonsTypes.id] // relation808508980
+  created datetime
+  updated datetime
+  visible text
+  type text
+}
+
+// 
+// collection id:   pbc_4275539003 
+// collection name: _authOrigins 
+// collection type: base 
+Table _authOrigins {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  fingerprint text [not null]
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2281828961 
+// collection name: _externalAuths 
+// collection type: base 
+Table _externalAuths {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  provider text [not null]
+  providerId text [not null]
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2279338944 
+// collection name: _mfas 
+// collection type: base 
+Table _mfas {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  method text [not null]
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1638494021 
+// collection name: _otps 
+// collection type: base 
+Table _otps {
+  id text [pk, not null]
+  collectionRef text [not null]
+  recordRef text [not null]
+  password varchar [not null]
+  sentTo text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_1509025625 
+// collection name: billingAddress 
+// collection type: base 
+Table billingAddress {
+  id text [pk, not null]
+  country text
+  state text
+  city text
+  zipCode text
+  line1 text
+  line2 text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_123408445 
+// collection name: helloworlds 
+// collection type: base 
+Table helloworlds {
+  id text [pk, not null]
+  hello text
+  created datetime
+  updated datetime
+}
+
+// 
+// collection id:   pbc_2109205374 
+// collection name: t1 
+// collection type: base 
+Table t1 {
+  id text [pk, not null]
+  hello text
+  created datetime
+  updated datetime
+  test_file file
+}
+

001_documentation/Requirements/REQ0006/schema.dbml.ai_draft

@@ -1,215 +0,0 @@
-// LessonTypes stores different types of lessons
-// lesson_types, lesson_type
-Table LessonTypes {
-  // system field
-  id int [pk, increment] // unique identifier for the lesson type
-  created datetime [default: `now()`] // timestamp when the lesson type was created
-  updated datetime // timestamp when the lesson type was last updated
-  // value field
-  name varchar // name of the lesson type
-  type varchar // type category
-}
-
-// LessonCategories stores categories of lessons
-// lesson_categories, lesson_category
-Table LessonCategories {
-  // system field
-  id int [pk, increment] // unique identifier for the lesson category
-  created datetime [default: `now()`] // timestamp when the category was created
-  updated datetime // timestamp when the category was last updated
-  // value field
-  cat_name varchar // image file name
-  cat_image varchar // image representing the category
-  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referencing LessonTypes.id
-}
-
-Table Helloworlds {
-  // system field
-  id int [pk, increment] // id field, increment
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-}
-
-Table Users {
-  // system field
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value field
-  email varchar
-  emailVisibility boolean
-  verified boolean
-  name varchar
-  avatar blob
-}
-
-Table UserMetas {
-  // system field
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value field
-  helloworld varchar
-  app_on_time_s integer
-  user_id integer [ref: > Users.id]
-}
-
-Table QuizCategories {
-  // system field
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value field
-  cat_name varchar // category name
-  cat_image varchar // category image
-}
-
-// stores all questions of matching frenzy
-Table QuizMatchings {
-  // system field
-  id int [pk, increment] // id field, increment
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  word varchar // modal answer
-  word_c varchar // question
-  cat_id integer [ref: > QuizCategories.id] // foreign key to QuizCategories.id
-}
-
-// QuizListening stores all listening quiz data
-Table QuizListenings {
-  // system field
-  id int [pk, increment] // id field, increment
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  sound varchar // URL to the sound file
-  word varchar // The word in the quiz
-  cat_id integer [ref: > QuizCategories.id]
-}
-
-// stores all categories of connectives revision quiz
-Table QuizConnectivesCategories {
-  // system field
-  id int [pk, increment] // id field, increment
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  cat_name varchar // category name
-  cat_image varchar // category image
-}
-
-// stores all questions of connectives revision quiz
-Table QuizConnectives {
-  // system field
-  id int [pk, increment] // id field, increment
-  created datetime [default: `now()`] // record create time
-  updated datetime // record update time
-
-  // value field
-  question_fh varchar // first half
-  question_sh varchar // second half
-  modal_ans varchar // modal ans
-  cat_id integer [ref: > QuizConnectivesCategories.id] // foreign key to QuizConnectivesCategories.id
-}
-
-// Lessons stores all lessons in the database
-Table Vocabularies {
-  // system field
-  id int [pk, increment] // unique identifier for the lesson
-  created datetime [default: `now()`] // timestamp when the lesson was created
-  updated datetime // timestamp when the lesson was last updated
-
-  // value field
-  image varchar // URL to the image associated with the lesson
-  sound varchar // URL to the sound file associated with the lesson
-  word varchar // The word in English
-  word_c varchar // The word in Chinese
-  sample_e varchar // Sample sentence in English using the word
-  sample_c varchar // Sample sentence in Chinese using the word
-  cat_id integer [ref: > LessonCategories.id] // foreign key referring to LessonCategories.id
-  category varchar // The category to which the lesson belongs
-  lesson_type_id integer [ref: > LessonTypes.id] // foreign key referring to LessonTypes.id
-}
-
-// Listening Practice Quiz Categories
-// store listening practice category, (LpCategories, LpCategory)
-Table QuizLPCategories {
-  // system fields
-  id text [pk] // changed from int to text to match PocketBase
-  created datetime [default: `now()`]
-  updated datetime
-
-  // value fields
-  cat_name varchar [presentable: true] // added presentable flag
-  cat_image file // changed from blob to file type
-  pos number // changed from integer to number
-  init_answer json
-}
-
-// Listening Practice Quiz Questions
-Table QuizLPQuestions {
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-  word varchar
-  sound blob
-  cat_id integer [ref: > QuizLPCategories.id]
-}
-
-// Matching Frenzy Quiz Categories
-Table QuizMFCategories {
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-  cat_name varchar
-  cat_image blob
-  pos integer
-  init_answer json
-}
-
-// Matching Frenzy Quiz Questions
-Table QuizMFQuestions {
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-  word varchar
-  word_c varchar
-  cat_id integer [ref: > QuizMFCategories.id]
-}
-
-// Connectives Revision Quiz Categories
-Table QuizCRCategories {
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-  cat_name varchar
-  cat_image blob
-  pos integer
-  init_answer json
-}
-
-// Connectives Revision Quiz Questions
-Table QuizCRQuestions {
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-  question_fh varchar
-  question_sh varchar
-  modal_ans varchar
-  cat_id integer [ref: > QuizCRCategories.id]
-}
-
-// Test table
-Table t1 {
-  id int [pk, increment]
-  created datetime [default: `now()`]
-  updated datetime
-  name varchar
-}

001_documentation/Requirements/REQ0013/index.md

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

001_documentation/Requirements/REQ0014/index.md

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

001_documentation/Requirements/REQ0015/convert.js

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

001_documentation/Requirements/REQ0015/index.md

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

001_documentation/Requirements/REQ0015/schema.dbml

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

001_documentation/Requirements/REQ0015/schema.json

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

001_documentation/Requirements/REQ0016/index.md

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

001_documentation/Requirements/REQ0017/index.md

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

001_documentation/Requirements/index.md

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

001_documentation/Requirements/update.sh

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

001_documentation/Requirements/update_req_index.js

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

002_source/cms/src/app/dashboard/students/edit/[customerId]/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+// src/app/dashboard/students/edit/[customerId]/page.tsx
 
 import * as React from 'react';
 import RouterLink from 'next/link';

002_source/cms/src/app/dashboard/user_metas/SampleTeachers.tsx

@@ -3,7 +3,7 @@
 import type { Customer } from '@/components/dashboard/customer/type.d';
 import { dayjs } from '@/lib/dayjs';
 
-export const SampleCustomers = [
+export const SampleTeachers = [
   {
     id: 'USR-005',
     name: 'Fran Perez',

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

@@ -1,11 +1,11 @@
 # GUIDELINES
 
-this folder is part of nextjs typescript project and containing page definition for `Customer` / `Customers` record:
+this folder is part of nextjs typescript project and containing page definition for `UserMeta` / `UserMetas` record:
 
 - list (./page.tsx)
-- view (./[customerId]/page.tsx)
+- view (./[userMetaId]/page.tsx)
 - create (./create/page.tsx)
-- edit (./[customerId]/page.tsx)
+- edit (./[userMetaId]/page.tsx)
 - translation provided by react-i18next
 
 the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
@@ -13,17 +13,17 @@ the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
 ## Assumption and Requirements
 
 - let one file contains one component only.
-- type information defined in `<base_dir>/002_source/cms/src/db/Customers/type.d.tsx`
-- it mainly consume the db drivers `Customres` in `<base_dir>/002_source/cms/src/db/Customers`
+- type information defined in `<base_dir>/002_source/cms/src/db/UserMetas/type.d.tsx`
+- it mainly consume the db drivers `UserMetas` in `<base_dir>/002_source/cms/src/db/UserMetas`
 
 simple template:
 
 ```typescript
-// src/app/dashboard/customers/page.tsx
+// src/app/dashboard/users/page.tsx
 'use client';
 
 // RULES:
-// contains list page for customers (Customers)
+// contains list page for user metas (UserMetas)
 // contain definition to collection only
 //
 import statements here ...
@@ -44,6 +44,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
 
 
 interface PageProps {
-  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+  searchParams: { userId?: string; key?: string; sortDir?: 'asc' | 'desc'; value?: string };
 }
 ```

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

@@ -1,5 +1,5 @@
+'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';
@@ -9,9 +9,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 
 import { config } from '@/config';
 import { paths } from '@/paths';
-import { UserCreateForm } from '@/components/dashboard/user/user-create-form';
-
-export const metadata = { title: `Create | Users | Dashboard | ${config.site.name}` } satisfies Metadata;
+import { TeacherCreateForm } from '@/components/dashboard/teacher/teacher-create-form';
 
 export default function Page(): React.JSX.Element {
   return (
@@ -29,19 +27,19 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.users.list}
+              href={paths.dashboard.teachers.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Users
+              Teachers
             </Link>
           </div>
           <div>
-            <Typography variant="h4">Create user</Typography>
+            <Typography variant="h4">Create teacher</Typography>
           </div>
         </Stack>
-        <UserCreateForm />
+        <TeacherCreateForm />
       </Stack>
     </Box>
   );

002_source/cms/src/app/dashboard/user_metas/edit/[id]/_PROMPT.md

@@ -0,0 +1,3 @@
+this `tsx` file is clone from elsewhere, please understand, modify and update the content of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/user_metas/edit/[id]/page.tsx.draft` to handle `UserMeta` record thanks, modify comments/variables/paths/functions name please
+
+e.g. why `lessonCategories` still exist ?

002_source/cms/src/app/dashboard/user_metas/edit/[id]/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+// src/app/dashboard/user_metas/edit/[id]/page.tsx
 
 import * as React from 'react';
 import RouterLink from 'next/link';
@@ -11,10 +12,10 @@ import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
-import { UserEditForm } from '@/components/dashboard/user/user-edit-form';
+import { UserMetaEditForm } from '@/components/dashboard/user_meta/user-meta-edit-form';
 
 export default function Page(): React.JSX.Element {
-  const { t } = useTranslation(['users']);
+  const { t } = useTranslation(['lp_categories']);
 
   React.useEffect(() => {
     // console.log('helloworld');
@@ -35,7 +36,7 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.users.list}
+              href={paths.dashboard.user_metas.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
@@ -47,7 +48,7 @@ export default function Page(): React.JSX.Element {
             <Typography variant="h4">{t('edit.title')}</Typography>
           </div>
         </Stack>
-        <UserEditForm />
+        <UserMetaEditForm />
       </Stack>
     </Box>
   );

002_source/cms/src/app/dashboard/user_metas/list/_PROMPT.md

@@ -0,0 +1,3 @@
+this `tsx` file is clone from elsewhere, please understand, modify and update the content of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/user_metas/list/page.tsx.draft` to handle `UserMeta` record thanks, modify comments/variables/paths/functions name please
+
+e.g. why `lessonCategories` still exist ?

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

@@ -1,13 +1,12 @@
-// src/app/dashboard/customers/page.tsx
+// src/app/dashboard/user_metas/list/page.tsx
 'use client';
 
 // RULES:
-// contains list page for customers (Customers)
-// contain definition to collection only
+// contains list page for user metas (UserMetas)
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
-import { COL_USERS } from '@/constants';
+import { COL_USER_METAS } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -17,11 +16,11 @@ import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import type { ListResult, RecordModel } from 'pocketbase';
 
-import { UsersFilters } from '@/components/dashboard/user/users-filters';
-import { UsersPagination } from '@/components/dashboard/user/users-pagination';
-import { UsersSelectionProvider } from '@/components/dashboard/user/users-selection-context';
-import { UsersTable } from '@/components/dashboard/user/users-table';
-import type { User } from '@/components/dashboard/user/type.d';
+import { UserMetasFilters } from '@/components/dashboard/user_meta/user-metas-filters';
+import { UserMetasPagination } from '@/components/dashboard/user_meta/user-metas-pagination';
+import { UserMetasSelectionProvider } from '@/components/dashboard/user_meta/user-metas-selection-context';
+import { UserMetasTable } from '@/components/dashboard/user_meta/user-metas-table';
+import type { UserMeta } from '@/components/dashboard/user_meta/type.d';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
@@ -29,17 +28,16 @@ import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultUser } from '@/components/dashboard/user/_constants';
+import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
-  const { t } = useTranslation(['customers']);
+  const { t } = useTranslation(['teachers']);
   const router = useRouter();
 
   const { email, phone, sortDir, status } = searchParams;
 
-  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<User[]>([]);
-  //
+  const [userMetaData, setUserMetaData] = React.useState<UserMeta[]>([]);
 
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
@@ -47,27 +45,31 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   //
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
   //
-  const [f, setF] = React.useState<User[]>([]);
+  const [f, setF] = React.useState<UserMeta[]>([]);
   const [currentPage, setCurrentPage] = React.useState<number>(0);
   //
   const [recordCount, setRecordCount] = React.useState<number>(0);
-  const [listOption, setListOption] = React.useState({});
+  const [listOption, setListOption] = React.useState({ filter: '' });
+  const [listSort, setListSort] = React.useState({});
 
+  function isListOptionChanged() {
+    return JSON.stringify(listOption) === JSON.stringify({ filter: '' });
+  }
   //
   const reloadRows = async (): Promise<void> => {
     try {
-      const models: ListResult<RecordModel> = await pb.collection(COL_USERS).getList(currentPage + 1, rowsPerPage, {});
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_USER_METAS)
+        .getList(currentPage + 1, rowsPerPage, listOption);
       const { items, totalItems } = models;
-
-      const tempLessonTypes: User[] = items.map((lt) => {
-        return { ...defaultUser, ...lt };
+      const tempUserMeta: UserMeta[] = items.map((lt) => {
+        return { ...defaultUserMeta, ...lt };
       });
 
-      setLessonCategoriesData(tempLessonTypes);
+      setUserMetaData(tempUserMeta);
       setRecordCount(totalItems);
-      setF(tempLessonTypes);
+      setF(tempUserMeta);
     } catch (error) {
-      //
       logger.error(error);
       setShowError({
         //
@@ -95,7 +97,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
-    const tempFilter = [];
+    let tempFilter = [];
     let tempSortDir = '';
 
     if (status) {
@@ -109,11 +111,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     if (email) {
       tempFilter.push(`email ~ "%${email}%"`);
     }
+
     if (phone) {
       tempFilter.push(`phone ~ "%${phone}%"`);
     }
 
-    let preFinalListOption = {};
+    let preFinalListOption = { filter: '' };
     if (tempFilter.length > 0) {
       preFinalListOption = { filter: tempFilter.join(' && ') };
     }
@@ -157,7 +160,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               loading={isLoadingAddPage}
               onClick={(): void => {
                 setIsLoadingAddPage(true);
-                router.push(paths.dashboard.users.create);
+                router.push(paths.dashboard.user_metas.create);
               }}
               startIcon={<PlusIcon />}
               variant="contained"
@@ -166,22 +169,22 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
             </LoadingButton>
           </Box>
         </Stack>
-        <UsersSelectionProvider users={f}>
+        <UserMetasSelectionProvider userMetas={f}>
           <Card>
-            <UsersFilters
+            <UserMetasFilters
               filters={{ email, phone, status }}
-              fullData={lessonCategoriesData}
+              fullData={userMetaData}
               sortDir={sortDir}
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
-              <UsersTable
+              <UserMetasTable
                 reloadRows={reloadRows}
                 rows={f}
               />
             </Box>
             <Divider />
-            <UsersPagination
+            <UserMetasPagination
               count={recordCount}
               page={currentPage}
               rowsPerPage={rowsPerPage}
@@ -189,7 +192,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               setRowsPerPage={setRowsPerPage}
             />
           </Card>
-        </UsersSelectionProvider>
+        </UserMetasSelectionProvider>
       </Stack>
       <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
         <pre>{JSON.stringify(f, null, 2)}</pre>

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

@@ -1,46 +1,7 @@
-import * as React from 'react';
-
+import type { Thread } from '@/components/dashboard/teacher/mail/types';
 import { dayjs } from '@/lib/dayjs';
-import { MailProvider } from '@/components/dashboard/mail/mail-context';
-import { MailView } from '@/components/dashboard/mail/mail-view';
-import type { Label, Thread } from '@/components/dashboard/mail/types';
 
-function filterThreads(threads: Thread[], labelId: string): Thread[] {
-  return threads.filter((thread) => {
-    if (['inbox', 'sent', 'drafts', 'spam', 'trash'].includes(labelId)) {
-      return thread.folder === labelId;
-    }
-
-    if (labelId === 'important') {
-      return thread.isImportant;
-    }
-
-    if (labelId === 'starred') {
-      return thread.isStarred;
-    }
-
-    if (thread.labels.includes(labelId)) {
-      return true;
-    }
-
-    return false;
-  });
-}
-
-const labels = [
-  { id: 'inbox', type: 'system', name: 'Inbox', unreadCount: 1, totalCount: 0 },
-  { id: 'sent', type: 'system', name: 'Sent', unreadCount: 0, totalCount: 0 },
-  { id: 'drafts', type: 'system', name: 'Drafts', unreadCount: 0, totalCount: 0 },
-  { id: 'spam', type: 'system', name: 'Spam', unreadCount: 0, totalCount: 0 },
-  { id: 'trash', type: 'system', name: 'Trash', unreadCount: 0, totalCount: 1 },
-  { id: 'important', type: 'system', name: 'Important', unreadCount: 0, totalCount: 1 },
-  { id: 'starred', type: 'system', name: 'Starred', unreadCount: 1, totalCount: 1 },
-  { id: 'work', type: 'custom', name: 'Work', color: '#43A048', unreadCount: 0, totalCount: 1 },
-  { id: 'business', type: 'custom', name: 'Business', color: '#1E88E5', unreadCount: 1, totalCount: 2 },
-  { id: 'personal', type: 'custom', name: 'Personal', color: '#FB8A00', unreadCount: 0, totalCount: 1 },
-] satisfies Label[];
-
-const threads = [
+export const SampleThreads = [
   {
     id: 'TRD-004',
     from: { avatar: '/assets/avatar-9.png', email: 'marcus.finn@domain.com', name: 'Marcus Finn' },
@@ -123,20 +84,3 @@ Your flight is coming up soon. Please don't forget to check in for your schedule
     createdAt: dayjs().subtract(2, 'day').toDate(),
   },
 ] satisfies Thread[];
-
-interface LayoutProps {
-  children: React.ReactNode;
-  params: { labelId: string };
-}
-
-export default function Layout({ children, params }: LayoutProps): React.JSX.Element {
-  const { labelId } = params;
-
-  const filteredThreads = filterThreads(threads, labelId);
-
-  return (
-    <MailProvider currentLabelId={labelId} labels={labels} threads={filteredThreads}>
-      <MailView>{children}</MailView>
-    </MailProvider>
-  );
-}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Metadata } from 'next';
 
 import { config } from '@/config';
-import { ThreadView } from '@/components/dashboard/mail/thread-view';
+import { ThreadView } from '@/components/dashboard/teacher/mail/thread-view';
 
 export const metadata = { title: `Thread | Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
 

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

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

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Metadata } from 'next';
 
 import { config } from '@/config';
-import { ThreadsView } from '@/components/dashboard/mail/threads-view';
+import { ThreadsView } from '@/components/dashboard/teacher/mail/threads-view';
 
 export const metadata = { title: `Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
 

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

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

002_source/cms/src/app/dashboard/user_metas/view/[id]/BasicDetailCard.tsx

@@ -14,13 +14,13 @@ 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';
-import type { User } from '@/components/dashboard/user/type.d';
+import type { UserMeta } from '@/components/dashboard/user_meta/type.d';
 
 export default function BasicDetailCard({
-  user: model,
+  userMeta,
   handleEditClick,
 }: {
-  user: User;
+  userMeta: UserMeta;
   handleEditClick: () => void;
 }): React.JSX.Element {
   const { t } = useTranslation();
@@ -55,15 +55,15 @@ export default function BasicDetailCard({
               key: 'Customer ID',
               value: (
                 <Chip
-                  label={model.id}
+                  label={userMeta.id}
                   size="small"
                   variant="soft"
                 />
               ),
             },
-            { key: 'Email', value: model.email },
-            { key: 'Quota', value: model.quota },
-            { key: 'Status', value: model.status },
+            { key: 'Email', value: userMeta.email },
+            { key: 'Quota', value: userMeta.quota },
+            { key: 'Status', value: userMeta.status },
           ] satisfies { key: string; value: React.ReactNode }[]
         ).map(
           (item): React.JSX.Element => (

002_source/cms/src/app/dashboard/user_metas/view/[id]/TitleCard.tsx

@@ -9,17 +9,15 @@ 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 { Student } from '@/components/dashboard/student/type.d';
+import { Teacher } from '@/components/dashboard/teacher/type.d';
 
 // import type { CrCategory } from '@/components/dashboard/cr/categories/type';
 
-function getImageUrlFrRecord(record: Student): string {
-  // TODO: fix this
-  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
-  return 'getImageUrlFrRecord(helloworld)';
+function getImageUrlFrRecord(teacher: Teacher): string {
+  return `http://127.0.0.1:8090/api/files/${teacher.collectionId}/${teacher.id}/${teacher.avatar}`;
 }
 
-export default function SampleTitleCard({ lpModel }: { lpModel: Student }): React.JSX.Element {
+export default function SampleTitleCard({ teacherRecord }: { teacherRecord: Teacher }): React.JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -31,7 +29,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: Student }): Reac
       >
         <Avatar
           variant="rounded"
-          src={getImageUrlFrRecord(lpModel)}
+          src={getImageUrlFrRecord(teacherRecord)}
           sx={{ '--Avatar-size': '64px' }}
         >
           {t('empty')}
@@ -42,7 +40,7 @@ export default function SampleTitleCard({ lpModel }: { lpModel: Student }): Reac
             spacing={2}
             sx={{ alignItems: 'center', flexWrap: 'wrap' }}
           >
-            <Typography variant="h4">{lpModel.email}</Typography>
+            <Typography variant="h4">{teacherRecord.name || teacherRecord.email}</Typography>
             <Chip
               icon={
                 <CheckCircleIcon
@@ -50,17 +48,11 @@ export default function SampleTitleCard({ lpModel }: { lpModel: Student }): Reac
                   weight="fill"
                 />
               }
-              label={lpModel.quota}
+              label={teacherRecord.status}
               size="small"
               variant="outlined"
             />
           </Stack>
-          <Typography
-            color="text.secondary"
-            variant="body1"
-          >
-            {lpModel.status}
-          </Typography>
         </div>
       </Stack>
       <div>

002_source/cms/src/app/dashboard/user_metas/view/[id]/_PROMPT.md

@@ -0,0 +1,7 @@
+working file: `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/user_metas/view/[id]/page.tsx.draft`
+
+this file is clone from elsewhere, please understand, modify and update the content of working file to handle `UserMeta` record thanks, modify comments/variables/paths/functions name please
+
+restrict your modifications in this file only
+
+e.g. why `lessonCategories` still exist ?

002_source/cms/src/app/dashboard/user_metas/view/[id]/page.tsx

@@ -24,35 +24,35 @@ import { toast } from '@/components/core/toaster';
 
 import ErrorDisplay from '@/components/dashboard/error';
 
-import { Notifications } from '@/components/dashboard/user/notifications';
+import { Notifications } from '@/components/dashboard/user_meta/notifications';
 import FormLoading from '@/components/loading';
 import BasicDetailCard from './BasicDetailCard';
 import TitleCard from './TitleCard';
-import { defaultUser } from '@/components/dashboard/user/_constants';
-import type { User } from '@/components/dashboard/user/type.d';
-import { COL_USERS } from '@/constants';
+import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
+import type { UserMeta } from '@/components/dashboard/user_meta/type.d';
+import { COL_USER_METAS } from '@/constants';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation();
   const router = useRouter();
   //
-  const { id: userId } = useParams<{ id: string }>();
+  const { id } = useParams<{ id: string }>();
   //
   const [showLoading, setShowLoading] = React.useState<boolean>(true);
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
   //
-  const [showUser, setShowUser] = React.useState<User>(defaultUser);
+  const [userMeta, setUserMeta] = React.useState<UserMeta>(defaultUserMeta);
 
   function handleEditClick(): void {
-    router.push(paths.dashboard.users.edit(showUser.id));
+    router.push(paths.dashboard.user_metas.edit(userMeta.id));
   }
 
   React.useEffect(() => {
-    if (userId) {
-      pb.collection(COL_USERS)
-        .getOne(userId)
+    if (id) {
+      pb.collection(COL_USER_METAS)
+        .getOne(id)
         .then((model: RecordModel) => {
-          setShowUser({ ...defaultUser, ...model });
+          setUserMeta({ ...defaultUserMeta, ...model });
         })
         .catch((err) => {
           logger.error(err);
@@ -64,9 +64,8 @@ export default function Page(): React.JSX.Element {
           setShowLoading(false);
         });
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userId]);
+  }, [id]);
 
   // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
 
@@ -95,12 +94,12 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.users.list}
+              href={paths.dashboard.user_metas.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Users
+              User Metas
             </Link>
           </div>
           <Stack
@@ -108,7 +107,7 @@ export default function Page(): React.JSX.Element {
             spacing={3}
             sx={{ alignItems: 'flex-start' }}
           >
-            <TitleCard user={showUser} />
+            <TitleCard teacherRecord={userMeta} />
           </Stack>
         </Stack>
         <Grid
@@ -121,7 +120,7 @@ export default function Page(): React.JSX.Element {
           >
             <Stack spacing={4}>
               <BasicDetailCard
-                user={showUser}
+                userMeta={userMeta}
                 handleEditClick={handleEditClick}
               />
               <SampleSecurityCard />

002_source/cms/src/app/dashboard/users/edit/[id]/_PROMPT.md

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

002_source/cms/src/app/dashboard/users/view/[id]/TitleCard.tsx

@@ -1,76 +0,0 @@
-'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 { Student } from '@/components/dashboard/student/type.d';
-
-// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
-
-function getImageUrlFrRecord(record: Student): string {
-  // TODO: fix this
-  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
-  return 'getImageUrlFrRecord(helloworld)';
-}
-
-export default function SampleTitleCard({ user: lpModel }: { user: Student }): 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.email}</Typography>
-            <Chip
-              icon={
-                <CheckCircleIcon
-                  color="var(--mui-palette-success-main)"
-                  weight="fill"
-                />
-              }
-              label={lpModel.quota}
-              size="small"
-              variant="outlined"
-            />
-          </Stack>
-          <Typography
-            color="text.secondary"
-            variant="body1"
-          >
-            {lpModel.status}
-          </Typography>
-        </div>
-      </Stack>
-      <div>
-        <Button
-          endIcon={<CaretDownIcon />}
-          variant="contained"
-        >
-          {t('list.action')}
-        </Button>
-      </div>
-    </>
-  );
-}

002_source/cms/src/app/dashboard/users/xxx/BasicDetailCard.tsx

@@ -1,80 +0,0 @@
-'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';
-import type { Student } from '@/components/dashboard/student/type.d';
-
-export default function BasicDetailCard({
-  lpModel: model,
-  handleEditClick,
-}: {
-  lpModel: Student;
-  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: 'Email', value: model.email },
-            { key: 'Quota', value: model.quota },
-            { key: 'Status', value: model.status },
-          ] satisfies { key: string; value: React.ReactNode }[]
-        ).map(
-          (item): React.JSX.Element => (
-            <PropertyItem
-              key={item.key}
-              name={item.key}
-              value={item.value}
-            />
-          )
-        )}
-      </PropertyList>
-    </Card>
-  );
-}

002_source/cms/src/app/dashboard/users/xxx/page.tsx

@@ -1,142 +0,0 @@
-'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 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 { config } from '@/config';
-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 { Notifications } from '@/components/dashboard/student/notifications';
-import FormLoading from '@/components/loading';
-import BasicDetailCard from './BasicDetailCard';
-import TitleCard from './TitleCard';
-import { defaultStudent } from '@/components/dashboard/student/_constants';
-import type { Student } from '@/components/dashboard/student/type.d';
-import { COL_STUDENTS } from '@/constants';
-
-export default function Page(): React.JSX.Element {
-  const { t } = useTranslation();
-  const router = useRouter();
-  //
-  const { customerId } = useParams<{ customerId: string }>();
-  //
-  const [showLoading, setShowLoading] = React.useState<boolean>(true);
-  const [showError, setShowError] = React.useState({ show: false, detail: '' });
-  //
-  const [showLessonCategory, setShowLessonCategory] = React.useState<Student>(defaultStudent);
-
-  function handleEditClick(): void {
-    router.push(paths.dashboard.students.edit(showLessonCategory.id));
-  }
-
-  React.useEffect(() => {
-    if (customerId) {
-      pb.collection(COL_STUDENTS)
-        .getOne(customerId)
-        .then((model: RecordModel) => {
-          setShowLessonCategory({ ...defaultStudent, ...model });
-        })
-        .catch((err) => {
-          logger.error(err);
-          toast(t('list.error'));
-
-          setShowError({ show: true, detail: JSON.stringify(err) });
-        })
-        .finally(() => {
-          setShowLoading(false);
-        });
-    }
-  }, [customerId]);
-
-  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
-
-  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.students.list}
-              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
-              variant="subtitle2"
-            >
-              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Students
-            </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>
-  );
-}

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

@@ -116,9 +116,9 @@ export const layoutConfig = {
           title: 'users',
           icon: 'users',
           items: [
-            { key: 'users', title: 'List users', href: paths.dashboard.users.list },
-            { key: 'users:create', title: 'Create user', href: paths.dashboard.users.create },
-            { key: 'users:details', title: 'User details', href: paths.dashboard.users.view('1') },
+            { key: 'users', title: 'List users', href: paths.dashboard.user_metas.list },
+            { key: 'users:create', title: 'Create user', href: paths.dashboard.user_metas.create },
+            { key: 'users:details', title: 'User details', href: paths.dashboard.user_metas.view('1') },
           ],
         },
         {

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

@@ -6,6 +6,7 @@ export type SortDir = 'asc' | 'desc';
 // RULES: core student data structure
 export interface Student {
   id: string;
+  collectionId: string;
   name: string;
   avatar?: string;
   email: string;

002_source/cms/src/components/dashboard/user.de/user-create-form.tsx

@@ -104,7 +104,7 @@ export function UserCreateForm(): React.JSX.Element {
         // Use standard create method from db/Customers/Create
         const record = await createUser(values);
         toast.success('User created successfully');
-        router.push(paths.dashboard.users.details(record.id));
+        router.push(paths.dashboard.user_metas.details(record.id));
       } catch (err) {
         logger.error(err);
         toast.error('Failed to create user. Please try again.');
@@ -509,7 +509,7 @@ export function UserCreateForm(): React.JSX.Element {
           <Button
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.users.list}
+            href={paths.dashboard.user_metas.list}
           >
             Cancel
           </Button>

002_source/cms/src/components/dashboard/user.de/user-edit-form.tsx

@@ -125,7 +125,7 @@ export function UserEditForm(): React.JSX.Element {
       try {
         await pb.collection(COL_USERS).update(userId, updateData);
         toast.success('User updated successfully');
-        router.push(paths.dashboard.users.list);
+        router.push(paths.dashboard.user_metas.list);
       } catch (error) {
         logger.error(error);
         toast.error('Failed to update user');
@@ -581,7 +581,7 @@ export function UserEditForm(): React.JSX.Element {
           <Button
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.users.list}
+            href={paths.dashboard.user_metas.list}
           >
             {t('edit.cancelButton')}
           </Button>

002_source/cms/src/components/dashboard/user.de/users-table.tsx

@@ -44,7 +44,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<User>[]
             <Link
               color="inherit"
               component={RouterLink}
-              href={paths.dashboard.users.view(row.id)}
+              href={paths.dashboard.user_metas.view(row.id)}
               sx={{ whiteSpace: 'nowrap' }}
               variant="subtitle2"
             >
@@ -143,7 +143,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<User>[]
             //
             color="secondary"
             component={RouterLink}
-            href={paths.dashboard.users.view(row.id)}
+            href={paths.dashboard.user_metas.view(row.id)}
           >
             <PencilSimpleIcon size={24} />
           </LoadingButton>

002_source/cms/src/components/dashboard/user_meta/_GUIDELINES.md

@@ -0,0 +1,26 @@
+# USER META GUIDELINES & KEY COMPONENTS
+
+## Core Files
+
+- `_constants.ts` - Contains default and empty values for UserMeta records
+- `user-meta-table.tsx` - Main table component for displaying UserMeta records
+- `type.d.tsx` - Type definitions for UserMeta
+
+## CRUD Components
+
+- `confirm-delete-modal.tsx` - Delete confirmation modal
+- `user-meta-create-form.tsx` - Form for creating new UserMeta records
+- `user-meta-edit-form.tsx` - Form for editing existing UserMeta records
+
+## Supporting Components
+
+- `user-meta-filters.tsx` - Filter controls for the table
+- `user-meta-pagination.tsx` - Pagination controls
+- `user-meta-selection-context.tsx` - Context for selected records
+
+## Implementation Notes
+
+1. All components should work with the UserMeta type from `type.d.tsx`
+2. Follow existing patterns for API calls and state management
+3. Ensure proper validation for all UserMeta fields
+4. Maintain consistent naming conventions (userMeta prefix for components)

002_source/cms/src/components/dashboard/user_meta/_PROMPT.md

@@ -0,0 +1,3 @@
+this `tsx` file is clone from elsewhere, please understand, modify and update the content of `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/user_meta/confirm-delete-modal.tsx.draft` to handle `UserMeta` record thanks, modify comments/variables/paths/functions name please
+
+e.g. why `lessonCategories` still exist ?

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

@@ -0,0 +1,21 @@
+// RULES:
+// default variable value for customer
+// empty valur for customer
+
+import { dayjs } from '@/lib/dayjs';
+import type { UserMeta } from './type.d';
+
+export const defaultUserMeta: UserMeta = {
+  id: '',
+  name: '',
+  avatar: undefined,
+  email: '',
+  phone: undefined,
+  quota: 0,
+  status: 'pending',
+  createdAt: dayjs().toDate(),
+};
+
+export const emptyLpCategory: UserMeta = {
+  ...defaultUserMeta,
+};

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

@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+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 { useTranslation } from 'react-i18next';
+
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+import { deleteUserMeta } from '@/db/UserMetas/Delete';
+
+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: delete<CollectionName>
+      deleteUserMeta(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 This User ?')}</Typography>
+                    <Typography
+                      color="text.secondary"
+                      variant="body2"
+                    >
+                      {t('Are you sure you want to delete this user ?')}
+                    </Typography>
+                  </Stack>
+                  <Stack
+                    direction="row"
+                    spacing={2}
+                    sx={{ justifyContent: 'flex-end' }}
+                  >
+                    <Button
+                      color="secondary"
+                      onClick={handleClose}
+                    >
+                      {t('Cancel')}
+                    </Button>
+                    <LoadingButton
+                      color="error"
+                      variant="contained"
+                      onClick={(e) => {
+                        handleUserConfirmDelete();
+                      }}
+                      loading={isDeleteing}
+                    >
+                      {t('Delete')}
+                    </LoadingButton>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          </Container>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

002_source/cms/src/components/dashboard/user_meta/email-filter-popover.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
+
+// EmailFilterPopover -> email-filter-popover.tsx
+export default function EmailFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title="Filter by email"
+    >
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

002_source/cms/src/components/dashboard/user_meta/mail/thread-item.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { BookmarkSimple as BookmarkSimpleIcon } from '@phosphor-icons/react/dist/ssr/BookmarkSimple';
+import { Paperclip as PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';
+import { Star as StarIcon } from '@phosphor-icons/react/dist/ssr/Star';
+
+import { dayjs } from '@/lib/dayjs';
+
+import type { Thread } from './types';
+
+export interface ThreadItemProps {
+  href: string;
+  onDeselect?: () => void;
+  onSelect?: () => void;
+  selected: boolean;
+  thread: Thread;
+}
+
+export function ThreadItem({ thread, onDeselect, onSelect, selected, href }: ThreadItemProps): React.JSX.Element {
+  const hasAnyAttachments = (thread.attachments ?? []).length > 0;
+  const hasManyAttachments = (thread.attachments ?? []).length > 1;
+
+  const handleSelectToggle = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.checked) {
+        onSelect?.();
+      } else {
+        onDeselect?.();
+      }
+    },
+    [onSelect, onDeselect]
+  );
+
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        borderBottom: '1px solid var(--mui-palette-divider)',
+        display: 'flex',
+        gap: 1,
+        p: 2,
+        ...(!thread.isUnread && {
+          position: 'relative',
+          '&::before': {
+            bgcolor: 'var(--mui-palette-primary-main)',
+            bottom: 0,
+            content: '" "',
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            width: '4px',
+          },
+        }),
+        ...(selected && { bgcolor: 'var(--mui-palette-primary-selected)' }),
+        '&:hover': { ...(!selected && { bgcolor: 'var(--mui-palette-action-hover)' }) },
+      }}
+    >
+      <Box sx={{ alignItems: 'center', display: { md: 'flex', xs: 'none' }, flex: '0 0 auto' }}>
+        <Checkbox checked={selected} onChange={handleSelectToggle} />
+        <Tooltip title="Starred">
+          <IconButton>
+            <StarIcon
+              color={thread.isStarred ? 'var(--mui-palette-warning-main)' : undefined}
+              weight={thread.isStarred ? 'fill' : undefined}
+            />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Important">
+          <IconButton>
+            <BookmarkSimpleIcon
+              color={thread.isImportant ? 'var(--mui-palette-warning-main)' : undefined}
+              weight={thread.isImportant ? 'fill' : undefined}
+            />
+          </IconButton>
+        </Tooltip>
+      </Box>
+      <Box
+        component={RouterLink}
+        href={href}
+        sx={{
+          alignItems: 'center',
+          color: 'var(--mui-palette-text-primary)',
+          cursor: 'pointer',
+          display: 'flex',
+          flex: '1 1 auto',
+          flexWrap: { xs: 'wrap', md: 'nowrap' },
+          gap: 2,
+          minWidth: 0,
+          textDecoration: 'none',
+        }}
+      >
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', display: 'flex' }}>
+          <Avatar src={thread.from.avatar} />
+          <Typography noWrap sx={{ width: '120px' }} variant={thread.isUnread ? 'body2' : 'subtitle2'}>
+            {thread.from.name}
+          </Typography>
+        </Stack>
+        <Stack spacing={1} sx={{ flex: '1 1 auto', overflow: 'hidden', width: { xs: '100%', md: 'auto' } }}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center', maxWidth: '800px', width: '100%' }}>
+            <Typography noWrap sx={{ minWidth: '100px', maxWidth: '400px' }} variant="subtitle2">
+              {thread.subject}
+            </Typography>
+            <Typography color="text.secondary" noWrap variant="body2">
+              —{thread.message}
+            </Typography>
+          </Stack>
+          {hasAnyAttachments ? (
+            <Stack direction="row" spacing={1}>
+              <Chip icon={<PaperclipIcon />} label={thread.attachments![0].name} size="small" variant="soft" />
+              {hasManyAttachments ? <Chip label="+1" size="small" variant="soft" /> : null}
+            </Stack>
+          ) : null}
+        </Stack>
+        <Typography
+          color="text.secondary"
+          sx={{ display: 'block', textAlign: { xs: 'left', md: 'right' }, whiteSpace: 'nowrap', width: '100px' }}
+          variant="caption"
+        >
+          {dayjs(thread.createdAt).format('DD MMM')}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,170 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import Link from '@mui/material/Link';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { CaretLeft as CaretLeftIcon } from '@phosphor-icons/react/dist/ssr/CaretLeft';
+import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight';
+import { Chat as ChatIcon } from '@phosphor-icons/react/dist/ssr/Chat';
+import { Chats as ChatsIcon } from '@phosphor-icons/react/dist/ssr/Chats';
+import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
+import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
+import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+
+import { Attachments } from './attachments';
+import { MailContext } from './mail-context';
+import { Message } from './message';
+import { Reply } from './reply';
+import type { Thread } from './types';
+
+/**
+ * This method is used to get the thread from the context based on the thread ID.
+ * The thread should be loaded from the API in the page, but for the sake of simplicity we are just using the context.
+ */
+function useThread(threadId: string): Thread | undefined {
+  const { threads } = React.useContext(MailContext);
+
+  return threads.find((thread) => thread.id === threadId);
+}
+
+export interface ThreadViewProps {
+  threadId: string;
+}
+
+export function ThreadView({ threadId }: ThreadViewProps): React.JSX.Element {
+  const { currentLabelId } = React.useContext(MailContext);
+
+  const thread = useThread(threadId);
+
+  if (!thread) {
+    return (
+      <Box sx={{ alignItems: 'center', display: 'flex', flex: '1 1 auto', justifyContent: 'center' }}>
+        <Typography color="textSecondary" variant="h6">
+          Thread not found
+        </Typography>
+      </Box>
+    );
+  }
+
+  const backHref = paths.dashboard.mail.list(currentLabelId);
+
+  const hasMessage = Boolean(thread.message);
+  const hasAttachments = (thread.attachments ?? []).length > 0;
+
+  return (
+    <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column', minHeight: 0 }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{
+          alignItems: 'center',
+          borderBottom: '1px solid var(--mui-palette-divider)',
+          flex: '0 0 auto',
+          justifyContent: 'space-between',
+          p: 2,
+        }}
+      >
+        <div>
+          <IconButton component={RouterLink} href={backHref}>
+            <ArrowLeftIcon />
+          </IconButton>
+        </div>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <OutlinedInput
+            placeholder="Search message"
+            startAdornment={
+              <InputAdornment position="start">
+                <MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />
+              </InputAdornment>
+            }
+            sx={{ width: '200px' }}
+          />
+          <Tooltip title="Previous">
+            <IconButton>
+              <CaretLeftIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Next">
+            <IconButton>
+              <CaretRightIcon />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+      </Stack>
+      <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column', overflowY: 'auto', p: 3 }}>
+        <Box sx={{ flex: '1 1 auto' }}>
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+            <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+              <Avatar src={thread.from.avatar} sx={{ '--Avatar-size': '48px' }} />
+              <div>
+                <Typography component="span" variant="subtitle2">
+                  {thread.from.name}
+                </Typography>{' '}
+                <Link color="text.secondary" component="span" variant="body2">
+                  {thread.from.email}
+                </Link>
+                <Typography color="text.secondary" variant="subtitle2">
+                  To:{' '}
+                  {thread.to.map((person) => (
+                    <Link color="inherit" key={person.email}>
+                      {person.email}
+                    </Link>
+                  ))}
+                </Typography>
+                {thread.createdAt ? (
+                  <Typography color="text.secondary" noWrap variant="caption">
+                    {dayjs(thread.createdAt).format('MMM D, YYYY hh:mm:ss A')}
+                  </Typography>
+                ) : null}
+              </div>
+            </Stack>
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center', display: { xs: 'none', md: 'flex' } }}>
+              <Tooltip title="Reply">
+                <IconButton>
+                  <ChatIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Reply all">
+                <IconButton>
+                  <ChatsIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Delete">
+                <IconButton>
+                  <TrashIcon />
+                </IconButton>
+              </Tooltip>
+            </Stack>
+            <Box sx={{ display: { md: 'none' } }}>
+              <Tooltip title="More options">
+                <IconButton>
+                  <DotsThreeIcon weight="bold" />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          </Stack>
+          <Box sx={{ py: 3 }}>
+            <Typography variant="h4">{thread.subject}</Typography>
+          </Box>
+          <Stack spacing={3}>
+            {hasMessage ? <Message content={thread.message} /> : null}
+            {hasAttachments ? <Attachments attachments={thread.attachments} /> : null}
+          </Stack>
+        </Box>
+        <Reply />
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,163 @@
+'use client';
+
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { ArrowCounterClockwise as ArrowCounterClockwiseIcon } from '@phosphor-icons/react/dist/ssr/ArrowCounterClockwise';
+import { CaretLeft as CaretLeftIcon } from '@phosphor-icons/react/dist/ssr/CaretLeft';
+import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight';
+import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
+import { List as ListIcon } from '@phosphor-icons/react/dist/ssr/List';
+import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
+
+import { paths } from '@/paths';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { useSelection } from '@/hooks/use-selection';
+
+import { MailContext } from './mail-context';
+import { ThreadItem } from './thread-item';
+
+export function ThreadsView(): React.JSX.Element {
+  const { currentLabelId, threads, setOpenDesktopSidebar, setOpenMobileSidebar } = React.useContext(MailContext);
+
+  const mdDown = useMediaQuery('down', 'md');
+
+  const threadIds = React.useMemo(() => threads.map((thread) => thread.id), [threads]);
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useSelection(threadIds);
+
+  return (
+    <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column', minHeight: 0 }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{
+          alignItems: 'center',
+          borderBottom: '1px solid var(--mui-palette-divider)',
+          flex: '0 0 auto',
+          justifyContent: 'space-between',
+          p: 2,
+        }}
+      >
+        <div>
+          <IconButton
+            onClick={() => {
+              if (mdDown) {
+                setOpenMobileSidebar((prev) => !prev);
+              } else {
+                setOpenDesktopSidebar((prev) => !prev);
+              }
+            }}
+          >
+            <ListIcon />
+          </IconButton>
+        </div>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: '0 0 auto' }}>
+          <OutlinedInput
+            placeholder="Search thread"
+            startAdornment={
+              <InputAdornment position="start">
+                <MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />
+              </InputAdornment>
+            }
+            sx={{ width: '200px' }}
+          />
+          <Tooltip title="Next page">
+            <IconButton>
+              <CaretLeftIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Previous page">
+            <IconButton>
+              <CaretRightIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Refresh">
+            <IconButton sx={{ display: { xs: 'none', md: 'inline-flex' } }}>
+              <ArrowCounterClockwiseIcon />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+      </Stack>
+      {threads.length ? (
+        <React.Fragment>
+          <Box
+            sx={{
+              alignItems: 'center',
+              borderBottom: '1px solid var(--mui-palette-divider)',
+              display: { xs: 'none', md: 'flex' },
+              p: 2,
+            }}
+          >
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+              <Checkbox
+                checked={selected.size === threads.length}
+                indeterminate={selected.size > 0 && selected.size < threads.length}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  if (event.target.checked) {
+                    selectAll();
+                  } else {
+                    deselectAll();
+                  }
+                }}
+              />
+              <Typography variant="subtitle2">Select all</Typography>
+            </Stack>
+            <Tooltip title="More options">
+              <IconButton>
+                <DotsThreeIcon weight="bold" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box sx={{ overflowY: 'auto' }}>
+            {threads.map((thread) => (
+              <ThreadItem
+                href={paths.dashboard.mail.details(currentLabelId, thread.id)}
+                key={thread.id}
+                onDeselect={() => {
+                  deselectOne(thread.id);
+                }}
+                onSelect={() => {
+                  selectOne(thread.id);
+                }}
+                selected={selected.has(thread.id)}
+                thread={thread}
+              />
+            ))}
+          </Box>
+        </React.Fragment>
+      ) : (
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            overflowY: 'auto',
+            p: 3,
+          }}
+        >
+          <Stack spacing={2} sx={{ alignItems: 'center' }}>
+            <Box>
+              <Box
+                alt="No threads"
+                component="img"
+                src="/assets/not-found.svg"
+                sx={{ height: 'auto', maxWidth: '100%', width: '120px' }}
+              />
+            </Box>
+            <Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="h6">
+              There are no threads
+            </Typography>
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  );
+}

002_source/cms/src/components/dashboard/user_meta/mail/types.d.ts

@@ -0,0 +1,47 @@
+export interface Attachment {
+  id: string;
+  type: 'file' | 'image';
+  name?: string;
+  size?: string;
+  url?: string;
+}
+
+export interface Sender {
+  name: string;
+  avatar?: string;
+  email: string;
+}
+
+export interface Receiver {
+  name: string;
+  avatar?: string;
+  email: string;
+}
+
+export interface Thread {
+  id: string;
+  from: Sender;
+  to: Receiver[];
+  subject: string;
+  message: string;
+  attachments?: Attachment[];
+  folder: Folder;
+  labels: string[];
+  isImportant: boolean;
+  isStarred: boolean;
+  isUnread: boolean;
+  createdAt: Date;
+}
+
+export type Folder = 'inbox' | 'sent' | 'drafts' | 'spam' | 'trash';
+
+export type LabelType = 'system' | 'custom';
+
+export interface Label {
+  id: string;
+  type: LabelType;
+  name: string;
+  color?: string;
+  unreadCount?: number;
+  totalCount?: number;
+}

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

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

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

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

002_source/cms/src/components/dashboard/user_meta/phone-filter-popover.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
+
+// phone-filter-popover.tsx
+export default function PhoneFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title="Filter by phone number"
+    >
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}

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

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

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

@@ -0,0 +1,84 @@
+'use client';
+
+// RULES: sorting direction for teacher lists
+export type SortDir = 'asc' | 'desc';
+
+// RULES: core teacher data structure
+export interface UserMeta {
+  name: string;
+  //
+  // NOTE: obslete "avatar" and use "avatar_file"
+  avatar?: string;
+  avatar_file?: string;
+  //
+  email: string;
+  phone?: string;
+  quota: number;
+
+  // status is obsoleted, replace by state
+  status: 'pending' | 'active' | 'blocked';
+  state: 'pending' | 'active' | 'blocked';
+  //
+  id: string;
+  createdAt: Date;
+  updatedAt?: Date;
+  collectionId: string;
+}
+
+// RULES: form data structure for creating new teacher
+export interface CreateFormProps {
+  name: string;
+  email: string;
+  phone?: string;
+  company?: string;
+  billingAddress?: {
+    country: string;
+    state: string;
+    city: string;
+    zipCode: string;
+    line1: string;
+    line2?: string;
+  };
+  taxId?: string;
+  timezone: string;
+  language: string;
+  currency: string;
+  avatar?: string;
+  // quota?: number;
+  // status?: 'pending' | 'active' | 'blocked';
+}
+
+// RULES: form data structure for editing existing teacher
+export interface EditFormProps {
+  name: string;
+  email: string;
+  phone?: string;
+  company?: string;
+  billingAddress?: {
+    country: string;
+    state: string;
+    city: string;
+    zipCode: string;
+    line1: string;
+    line2?: string;
+  };
+  taxId?: string;
+  timezone: string;
+  language: string;
+  currency: string;
+  avatar?: string;
+  // quota?: number;
+  // status?: 'pending' | 'active' | 'blocked';
+}
+
+// RULES: filter props for teacher search and filtering
+export interface UserMetasFiltersProps {
+  filters?: Filters;
+  sortDir?: SortDir;
+  fullData: UserMeta[];
+}
+export interface Filters {
+  email?: string;
+  phone?: string;
+  status?: string;
+}

002_source/cms/src/components/dashboard/user_meta/user-meta-create-form.tsx

@@ -0,0 +1,529 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
+import { Controller, useForm } from 'react-hook-form';
+import { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { Option } from '@/components/core/option';
+import { toast } from '@/components/core/toaster';
+import { createTeacher } from '@/db/Teachers/Create';
+import isDevelopment from '@/lib/check-is-development';
+
+function fileToBase64(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = () => {
+      reject(new Error('Error converting file to base64'));
+    };
+  });
+}
+
+const schema = zod.object({
+  avatar: zod.string().optional(),
+  name: zod.string().min(1, 'Name is required').max(255),
+  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
+  phone: zod.string().min(1, 'Phone is required').max(15),
+  company: zod.string().max(255),
+  billingAddress: zod.object({
+    country: zod.string().min(1, 'Country is required').max(255),
+    state: zod.string().min(1, 'State is required').max(255),
+    city: zod.string().min(1, 'City is required').max(255),
+    zipCode: zod.string().min(1, 'Zip code is required').max(255),
+    line1: zod.string().min(1, 'Street line 1 is required').max(255),
+    line2: zod.string().max(255).optional(),
+  }),
+  taxId: zod.string().max(255).optional(),
+  timezone: zod.string().min(1, 'Timezone is required').max(255),
+  language: zod.string().min(1, 'Language is required').max(255),
+  currency: zod.string().min(1, 'Currency is required').max(255),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  avatar: '',
+  name: 'new name',
+  email: '123@123.com',
+  phone: '91234567',
+  company: '',
+  billingAddress: {
+    country: 'US',
+    state: '00000',
+    city: 'NY',
+    zipCode: '00000',
+    line1: 'test line 1',
+    line2: 'test line 2',
+  },
+  taxId: '12345',
+  timezone: 'new_york',
+  language: 'en',
+  currency: 'USD',
+} satisfies Values;
+
+export function TeacherCreateForm(): React.JSX.Element {
+  const router = useRouter();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(
+    async (values: Values): Promise<void> => {
+      try {
+        // Use standard create method from db/Customers/Create
+        const record = await createTeacher(values);
+        toast.success('Customer created');
+        router.push(paths.dashboard.teachers.details(record.id));
+      } catch (err) {
+        logger.error(err);
+        toast.error('Failed to create customer');
+      }
+    },
+    [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">Account information</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: '50%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    >
+                      <Avatar
+                        src={avatar}
+                        sx={{
+                          '--Avatar-size': '100px',
+                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
+                          alignItems: 'center',
+                          bgcolor: 'var(--mui-palette-background-level1)',
+                          color: 'var(--mui-palette-text-primary)',
+                          display: 'flex',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <CameraIcon fontSize="var(--Icon-fontSize)" />
+                      </Avatar>
+                    </Box>
+                    <Stack
+                      spacing={1}
+                      sx={{ alignItems: 'flex-start' }}
+                    >
+                      <Typography variant="subtitle1">Avatar</Typography>
+                      <Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        Select
+                      </Button>
+                      <input
+                        hidden
+                        onChange={handleAvatarChange}
+                        ref={avatarInputRef}
+                        type="file"
+                      />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
+                        <InputLabel required>Name</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.email)}
+                        fullWidth
+                      >
+                        <InputLabel required>Email address</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          type="email"
+                        />
+                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="phone"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.phone)}
+                        fullWidth
+                      >
+                        <InputLabel required>Phone number</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="company"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.company)}
+                        fullWidth
+                      >
+                        <InputLabel>Company</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Billing information</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.country"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.country)}
+                        fullWidth
+                      >
+                        <InputLabel required>Country</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Choose a country</Option>
+                          <Option value="us">United States</Option>
+                          <Option value="de">Germany</Option>
+                          <Option value="es">Spain</Option>
+                        </Select>
+                        {errors.billingAddress?.country ? (
+                          <FormHelperText>{errors.billingAddress?.country?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.state"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.state)}
+                        fullWidth
+                      >
+                        <InputLabel required>State</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.state ? (
+                          <FormHelperText>{errors.billingAddress?.state?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.city"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.city)}
+                        fullWidth
+                      >
+                        <InputLabel required>City</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.city ? (
+                          <FormHelperText>{errors.billingAddress?.city?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.zipCode"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.zipCode)}
+                        fullWidth
+                      >
+                        <InputLabel required>Zip code</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.zipCode ? (
+                          <FormHelperText>{errors.billingAddress?.zipCode?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.line1"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.line1)}
+                        fullWidth
+                      >
+                        <InputLabel required>Address</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.line1 ? (
+                          <FormHelperText>{errors.billingAddress?.line1?.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="taxId"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.taxId)}
+                        fullWidth
+                      >
+                        <InputLabel>Tax ID</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          placeholder="e.g EU372054390"
+                        />
+                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Shipping information</Typography>
+              <FormControlLabel
+                control={<Checkbox defaultChecked />}
+                label="Same as billing address"
+              />
+            </Stack>
+            <Stack spacing={3}>
+              <Typography variant="h6">Additional information</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="timezone"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.timezone)}
+                        fullWidth
+                      >
+                        <InputLabel required>Timezone</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a timezone</Option>
+                          <Option value="new_york">US - New York</Option>
+                          <Option value="california">US - California</Option>
+                          <Option value="london">UK - London</Option>
+                        </Select>
+                        {errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="language"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.language)}
+                        fullWidth
+                      >
+                        <InputLabel required>Language</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a language</Option>
+                          <Option value="en">English</Option>
+                          <Option value="es">Spanish</Option>
+                          <Option value="de">German</Option>
+                        </Select>
+                        {errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="currency"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.currency)}
+                        fullWidth
+                      >
+                        <InputLabel>Currency</InputLabel>
+                        <Select {...field}>
+                          <Option value="">Select a currency</Option>
+                          <Option value="USD">USD</Option>
+                          <Option value="EUR">EUR</Option>
+                          <Option value="RON">RON</Option>
+                        </Select>
+                        {errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.teachers.list}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            variant="contained"
+          >
+            Create teacher
+          </Button>
+        </CardActions>
+      </Card>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
+      </Box>
+    </form>
+  );
+}

002_source/cms/src/components/dashboard/user_meta/user-meta-edit-form.tsx

@@ -0,0 +1,604 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+//
+import { COL_TEACHERS, COL_USER_METAS } 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 { toast } from '@/components/core/toaster';
+import FormLoading from '@/components/loading';
+
+// import ErrorDisplay from '../../error';
+import ErrorDisplay from '../error';
+import isDevelopment from '@/lib/check-is-development';
+
+// TODO: review this
+const schema = zod.object({
+  name: zod.string().min(1, 'Name is required').max(255),
+  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
+  phone: zod.string().min(1, 'Phone is required').max(25),
+  company: zod.string().max(255).optional(),
+  billingAddress: zod.object({
+    country: zod.string().min(1, 'Country is required').max(255),
+    state: zod.string().min(1, 'State is required').max(255),
+    city: zod.string().min(1, 'City is required').max(255),
+    zipCode: zod.string().min(1, 'Zip code is required').max(255),
+    line1: zod.string().min(1, 'Street line 1 is required').max(255),
+    line2: zod.string().max(255).optional(),
+  }),
+  taxId: zod.string().max(255).optional(),
+  timezone: zod.string().min(1, 'Timezone is required').max(255),
+  language: zod.string().min(1, 'Language is required').max(255),
+  currency: zod.string().min(1, 'Currency is required').max(255),
+  avatar: zod.string().optional(),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  billingAddress: {
+    country: '',
+    state: '',
+    city: '',
+    zipCode: '',
+    line1: '',
+    line2: '',
+  },
+  taxId: '',
+  timezone: '',
+  language: '',
+  currency: '',
+  avatar: '',
+} satisfies Values;
+
+export function UserMetaEditForm(): React.JSX.Element {
+  const router = useRouter();
+  const { t } = useTranslation(['lp_categories']);
+
+  const { id: teacherId } = useParams<{ 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 updateData = {
+        name: values.name,
+        email: values.email,
+        phone: values.phone,
+        company: values.company,
+        billingAddress: values.billingAddress,
+        taxId: values.taxId,
+        timezone: values.timezone,
+        language: values.language,
+        currency: values.currency,
+        avatar: values.avatar ? await base64ToFile(values.avatar) : null,
+      };
+
+      try {
+        await pb.collection(COL_USER_METAS).update(teacherId, updateData);
+        toast.success('Teacher updated successfully');
+        router.push(paths.dashboard.teachers.list);
+      } catch (error) {
+        logger.error(error);
+        toast.error('Failed to update teacher');
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [teacherId, 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_USER_METAS).getOne(id);
+        reset({ ...defaultValues, ...result });
+        console.log({ result });
+
+        if (result.avatar) {
+          const fetchResult = await fetch(
+            `http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar}`
+          );
+          const blob = await fetchResult.blob();
+          const url = await fileToBase64(blob);
+          setValue('avatar', url);
+        }
+      } catch (error) {
+        logger.error(error);
+        toast.error('Failed to load teacher data');
+        setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
+      } finally {
+        setShowLoading(false);
+      }
+    },
+    [reset, setValue]
+  );
+
+  React.useEffect(() => {
+    void loadExistingData(teacherId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [teacherId]);
+
+  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
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.name)}
+                        fullWidth
+                      >
+                        <InputLabel required>Name</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.email)}
+                        fullWidth
+                      >
+                        <InputLabel required>Email</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          type="email"
+                        />
+                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="phone"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.phone)}
+                        fullWidth
+                      >
+                        <InputLabel required>Phone</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="company"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.company)}
+                        fullWidth
+                      >
+                        <InputLabel>Company</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          placeholder="no company name"
+                        />
+                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+            {/*  */}
+            <Stack spacing={3}>
+              <Typography variant="h6">Billing Information</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.country"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.country)}
+                        fullWidth
+                      >
+                        <InputLabel required>Country</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="US">United States</MenuItem>
+                          <MenuItem value="UK">United Kingdom</MenuItem>
+                          <MenuItem value="CA">Canada</MenuItem>
+                        </Select>
+                        {errors.billingAddress?.country ? (
+                          <FormHelperText>{errors.billingAddress.country.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.state"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.state)}
+                        fullWidth
+                      >
+                        <InputLabel required>State</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.state ? (
+                          <FormHelperText>{errors.billingAddress.state.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.city"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.city)}
+                        fullWidth
+                      >
+                        <InputLabel required>City</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.city ? (
+                          <FormHelperText>{errors.billingAddress.city.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.zipCode"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.zipCode)}
+                        fullWidth
+                      >
+                        <InputLabel required>Zip Code</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.zipCode ? (
+                          <FormHelperText>{errors.billingAddress.zipCode.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="billingAddress.line1"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.billingAddress?.line1)}
+                        fullWidth
+                      >
+                        <InputLabel required>Address Line 1</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.billingAddress?.line1 ? (
+                          <FormHelperText>{errors.billingAddress.line1.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="taxId"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.taxId)}
+                        fullWidth
+                      >
+                        <InputLabel>Tax ID</InputLabel>
+                        <OutlinedInput
+                          {...field}
+                          placeholder="no tax id..."
+                        />
+                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+
+            <Stack spacing={3}>
+              <Typography variant="h6">Additional Information</Typography>
+              <Grid
+                container
+                spacing={3}
+              >
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="timezone"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.timezone)}
+                        fullWidth
+                      >
+                        <InputLabel required>Timezone</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="America/New_York">New York</MenuItem>
+                          <MenuItem value="Europe/London">London</MenuItem>
+                          <MenuItem value="Asia/Tokyo">Tokyo</MenuItem>
+                          <MenuItem value="America/Boa_Vista">Boa Vista</MenuItem>
+                          <MenuItem value="America/Grand_Turk">Grand Turk</MenuItem>
+                          <MenuItem value="Asia/Manila">Manila</MenuItem>
+                          <MenuItem value="Asia/Urumqi">Urumqi</MenuItem>
+                          <MenuItem value="Africa/Tunis">Tunis</MenuItem>
+                        </Select>
+                        {errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="language"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.language)}
+                        fullWidth
+                      >
+                        <InputLabel required>Language</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="en">English</MenuItem>
+                          <MenuItem value="es">Spanish</MenuItem>
+                          <MenuItem value="fr">French</MenuItem>
+                        </Select>
+                        {errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid
+                  md={6}
+                  xs={12}
+                >
+                  <Controller
+                    control={control}
+                    name="currency"
+                    render={({ field }) => (
+                      <FormControl
+                        error={Boolean(errors.currency)}
+                        fullWidth
+                      >
+                        <InputLabel required>Currency</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="USD">USD</MenuItem>
+                          <MenuItem value="EUR">EUR</MenuItem>
+                          <MenuItem value="GBP">GBP</MenuItem>
+                        </Select>
+                        {errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button
+            color="secondary"
+            component={RouterLink}
+            href={paths.dashboard.teachers.list}
+          >
+            {t('edit.cancelButton')}
+          </Button>
+
+          <LoadingButton
+            disabled={isUpdating}
+            loading={isUpdating}
+            type="submit"
+            variant="contained"
+          >
+            {t('edit.updateButton')}
+          </LoadingButton>
+        </CardActions>
+      </Card>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
+      </Box>
+    </form>
+  );
+}

002_source/cms/src/components/dashboard/user_meta/user-metas-filters.tsx

@@ -0,0 +1,249 @@
+'use client';
+// RULES:
+// T.B.A.
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import getAllUserMetasCount from '@/db/UserMetas/GetAllCount';
+
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+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 } from '@/components/core/filter-button';
+import { Option } from '@/components/core/option';
+
+import { useUserMetasSelection } from './user-metas-selection-context';
+import GetBlockedCount from '@/db/UserMetas/GetBlockedCount';
+import GetPendingCount from '@/db/UserMetas/GetPendingCount';
+import GetActiveCount from '@/db/UserMetas/GetActiveCount';
+import PhoneFilterPopover from './phone-filter-popover';
+import EmailFilterPopover from './email-filter-popover';
+import type { UserMetasFiltersProps, Filters, SortDir } from './type.d';
+import { logger } from '@/lib/default-logger';
+
+export function UserMetasFilters({
+  filters = {},
+  sortDir = 'desc',
+  fullData,
+  //
+}: UserMetasFiltersProps): React.JSX.Element {
+  const { t } = useTranslation();
+
+  const { email, phone, status } = filters;
+
+  const [totalCount, setTotalCount] = React.useState<number>(0);
+  const [activeCount, setActiveCount] = React.useState<number>(0);
+  const [pendingCount, setPendingCount] = React.useState<number>(0);
+  const [blockedCount, setBlockedCount] = React.useState<number>(0);
+
+  const router = useRouter();
+
+  const selection = useUserMetasSelection();
+
+  // 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: 'All', value: '', count: totalCount },
+    { label: 'Active', value: 'active', count: activeCount },
+    { label: 'Pending', value: 'pending', count: pendingCount },
+    { label: 'Blocked', value: 'blocked', count: blockedCount },
+  ] 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);
+      }
+
+      router.push(`${paths.dashboard.user_metas.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 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]
+  );
+
+  const hasFilters = status || email || phone;
+
+  React.useEffect(() => {
+    const fetchCount = async (): Promise<void> => {
+      try {
+        const tc = await getAllUserMetasCount();
+        setTotalCount(tc);
+
+        const bc = await GetBlockedCount();
+        setBlockedCount(bc);
+        const pc = await GetPendingCount();
+        setPendingCount(pc);
+        const ac = await GetActiveCount();
+        setActiveCount(ac);
+      } catch (error) {
+        //
+        logger.error(error);
+      }
+    };
+    void fetchCount();
+  }, []);
+
+  return (
+    <div>
+      <Tabs
+        onChange={handleStatusChange}
+        sx={{ px: 3 }}
+        value={status ?? ''}
+        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={email}
+            label="Email"
+            onFilterApply={(value) => {
+              handleEmailChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleEmailChange();
+            }}
+            popover={<EmailFilterPopover />}
+            value={email}
+          />
+
+          <FilterButton
+            displayValue={phone}
+            label="Phone number"
+            onFilterApply={(value) => {
+              handlePhoneChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handlePhoneChange();
+            }}
+            popover={<PhoneFilterPopover />}
+            value={phone}
+          />
+
+          {hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
+        </Stack>
+        {selection.selectedAny ? (
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center' }}
+          >
+            <Typography
+              color="text.secondary"
+              variant="body2"
+            >
+              {selection.selected.size} selected
+            </Typography>
+            <Button
+              color="error"
+              variant="contained"
+            >
+              Delete
+            </Button>
+          </Stack>
+        ) : null}
+        <Select
+          name="sort"
+          onChange={handleSortChange}
+          sx={{ maxWidth: '100%', width: '120px' }}
+          value={sortDir}
+        >
+          <Option value="desc">Newest</Option>
+          <Option value="asc">Oldest</Option>
+        </Select>
+      </Stack>
+    </div>
+  );
+}