update,

.gitignore

@@ -1,4 +1,8 @@
 04_poc
+**/*del
+**/*bak
+**/*copy*
+
 
 # Created by https://www.toptal.com/developers/gitignore/api/node,python,nextjs
 # Edit at https://www.toptal.com/developers/gitignore?templates=node,python,nextjs

03_source/cms_backend/dev.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+while true; do
+  yarn --dev
+  yarn dev
+
+  echo "restarting..."
+  sleep 1
+done

03_source/cms_backend/helloworld.txt

@@ -0,0 +1 @@
+helloworld

03_source/cms_backend/package.json

@@ -23,6 +23,7 @@
     "tsc:print": "npx tsc --showConfig",
     "migrate": "npx prisma migrate dev --skip-seed",
     "seed": "tsx ./prisma/seed.ts",
+    "seed:w": "npx nodemon --ext \"ts,tsx,json\" -w prisma --exec \"yarn seed\"",
     "unseed": "tsx ./prisma/unseed.ts",
     "db:generate": "prisma generate",
     "db:push": "prisma db push --force-reset",
@@ -36,6 +37,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@faker-js/faker": "^9.8.0",
     "@mui/material": "^6.4.8",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/adapter-pg": "^6.8.2",
@@ -45,6 +47,7 @@
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.33.0",
     "jose": "^6.0.10",
+    "lodash": "^4.17.21",
     "next": "^14.2.26",
     "pg": "^8.16.0",
     "prisma": "^5.6.0",
@@ -56,6 +59,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",
+    "@types/lodash": "^4.17.17",
     "@types/node": "^22.13.13",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",

03_source/cms_backend/prisma/schema.prisma

@@ -511,7 +511,7 @@ model UserCard {
 }
 
 model UserItem {
-  id          Int      @id @default(autoincrement())
+  id          String   @id @default(uuid())
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
   //
@@ -528,6 +528,9 @@ model UserItem {
   avatarUrl   String
   phoneNumber String
   isVerified  Boolean
+  //
+  username    String
+  password    String
 }
 
 model UserAccountBillingHistory {
@@ -860,6 +863,8 @@ model FileStore {
   preview    String
   size       Float
   type       String
+  //
+  content    Bytes    @db.ByteA
 }
 
 // invoice.ts

03_source/cms_backend/prisma/seed.ts

@@ -21,6 +21,8 @@ import { superuserSeed } from './seeds/superuser';
 import { userSeed } from './seeds/user';
 import { ProductReview } from './seeds/productReview';
 import { ProductItem } from './seeds/productItem';
+import { FileStore } from './seeds/fileStore';
+import { userItemSeed } from './seeds/userItem';
 //
 // import { Blog } from './seeds/blog';
 // import { Mail } from './seeds/mail';
@@ -34,7 +36,9 @@ import { ProductItem } from './seeds/productItem';
   await superuserSeed;
   await userSeed;
   await ProductReview;
+  await FileStore;
   await ProductItem;
+  await userItemSeed;
   // await Blog;
   // await Mail;
   // await File;

03_source/cms_backend/prisma/seeds/fileStore.ts

@@ -0,0 +1,36 @@
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+const fs = require('fs');
+
+const content = Buffer.from(fs.readFileSync('./helloworld.txt', 'utf-8'), 'utf-8');
+
+async function fileStore() {
+  for (let i = 0; i < 2 + 1; i++) {
+    const temp = await prisma.fileStore.upsert({
+      where: { id: i },
+      update: {},
+      create: {
+        name: 'helloworld.txt',
+        path: './helloworld.txt',
+        preview: '',
+        size: content.byteLength,
+        type: 'txt',
+        content: content,
+      },
+    });
+  }
+
+  console.log('seed fileStore done');
+}
+
+const FileStore = fileStore()
+  .then(async () => {
+    await prisma.$disconnect();
+  })
+  .catch(async (e) => {
+    console.error(e);
+    await prisma.$disconnect();
+    process.exit(1);
+  });
+
+export { FileStore };

03_source/cms_backend/prisma/seeds/user.ts

@@ -8,8 +8,8 @@ async function user() {
     create: {
       email: 'alice@prisma.io',
       name: 'Alice',
-      password: 'Aa12345678'
-    }
+      password: 'Aa12345678',
+    },
   });
 
   const bob = await prisma.user.upsert({
@@ -18,8 +18,8 @@ async function user() {
     create: {
       email: 'bob@prisma.io',
       name: 'Bob',
-      password: 'Aa12345678'
-    }
+      password: 'Aa12345678',
+    },
   });
   console.log('seed user done');
 }

03_source/cms_backend/prisma/seeds/userItem.ts

@@ -0,0 +1,126 @@
+import { PrismaClient } from '@prisma/client';
+import { generateHash } from 'src/utils/hash';
+import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
+import { faker } from '@faker-js/faker';
+
+import { faker as enFaker } from '@faker-js/faker/locale/en_US';
+import { faker as zhFaker } from '@faker-js/faker/locale/zh_CN';
+import { faker as jaFaker } from '@faker-js/faker/locale/ja';
+import { faker as koFaker } from '@faker-js/faker/locale/ko';
+import { faker as twFaker } from '@faker-js/faker/locale/zh_TW';
+
+const SEED_EMAIL_DOMAIN = 'seed.com';
+
+const prisma = new PrismaClient();
+
+async function userItem() {
+  const config: Config = { dictionaries: [names] };
+  const firstName = uniqueNamesGenerator(config);
+  const lastName = uniqueNamesGenerator(config);
+  const username = `${firstName.toLowerCase()}-${lastName.toLowerCase()}`;
+
+  const alice = await prisma.userItem.upsert({
+    where: { id: 'admin_uuid' },
+    update: {},
+    create: {
+      name: `admin test`,
+      city: '',
+      role: '',
+      email: `admin@123.com`,
+      state: '',
+      status: '',
+      address: '',
+      country: '',
+      zipCode: '',
+      company: '',
+      avatarUrl: '',
+      phoneNumber: '',
+      isVerified: true,
+      //
+      username: 'admin@123.com',
+      password: await generateHash('Aa1234567'),
+    },
+  });
+
+  for (let i = 1; i < 20; i++) {
+    const CJK_LOCALES = {
+      en: enFaker,
+      zh: zhFaker,
+      ja: jaFaker,
+      ko: koFaker,
+      tw: twFaker,
+    };
+    function getRandomCJKFaker() {
+      const locales = Object.keys(CJK_LOCALES);
+      const randomKey = locales[Math.floor(Math.random() * locales.length)] as keyof typeof CJK_LOCALES;
+      return CJK_LOCALES[randomKey];
+    }
+    const randomFaker = getRandomCJKFaker();
+
+    await prisma.userItem.upsert({
+      where: { id: i.toString() },
+      update: {},
+      create: {
+        name: randomFaker.person.fullName(),
+        city: randomFaker.location.city(),
+        role: ROLE[Math.floor(Math.random() * ROLE.length)],
+        email: randomFaker.internet.email(),
+        state: randomFaker.location.state(),
+        status: STATUS[Math.floor(Math.random() * STATUS.length)],
+        address: randomFaker.location.streetAddress(),
+        country: randomFaker.location.country(),
+        zipCode: randomFaker.location.zipCode(),
+        company: randomFaker.company.name(),
+        avatarUrl: randomFaker.image.avatar(),
+        phoneNumber: randomFaker.phone.number(),
+        isVerified: true,
+        //
+        username: randomFaker.internet.username(),
+        password: await generateHash('Abc1234!'),
+      },
+    });
+  }
+
+  console.log('seed user done');
+}
+
+const userItemSeed = userItem()
+  .then(async () => {
+    await prisma.$disconnect();
+  })
+  .catch(async (e) => {
+    console.error(e);
+    await prisma.$disconnect();
+    process.exit(1);
+  });
+
+export { userItemSeed };
+
+const ROLE = [
+  `CEO`,
+  `CTO`,
+  `Project Coordinator`,
+  `Team Leader`,
+  `Software Developer`,
+  `Marketing Strategist`,
+  `Data Analyst`,
+  `Product Owner`,
+  `Graphic Designer`,
+  `Operations Manager`,
+  `Customer Support Specialist`,
+  `Sales Manager`,
+  `HR Recruiter`,
+  `Business Consultant`,
+  `Financial Planner`,
+  `Network Engineer`,
+  `Content Creator`,
+  `Quality Assurance Tester`,
+  `Public Relations Officer`,
+  `IT Administrator`,
+  `Compliance Officer`,
+  `Event Planner`,
+  `Legal Counsel`,
+  `Training Coordinator`,
+];
+
+const STATUS = ['active', 'pending', 'banned'];

03_source/cms_backend/src/app/api/helloworld/route.ts

@@ -7,7 +7,6 @@ import prisma from '../../lib/prisma';
 export async function GET(req: NextRequest, res: NextResponse) {
   try {
     const users = await prisma.user.findMany();
-    console.log({ users });
 
     return response({ users }, STATUS.OK);
   } catch (error) {

03_source/cms_backend/src/app/api/helloworld/test.http

@@ -0,0 +1,4 @@
+###
+
+GET http://localhost:7272/api/helloworld
+

03_source/cms_backend/src/app/api/product/createProduct/route.ts

@@ -0,0 +1,75 @@
+// src/app/api/product/createProduct/route.ts
+//
+// PURPOSE:
+// create product to db
+//
+// RULES:
+// T.B.A.
+//
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * POST - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  // logger('[Product] list', products.length);
+  const { data } = await req.json();
+  const createForm: CreateProductData = data as unknown as CreateProductData;
+
+  console.log({ createForm });
+
+  try {
+    console.log({ data });
+    await prisma.productItem.create({ data: createForm });
+    return response({ hello: 'world' }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world', data });
+    return handleError('Product - Create', error);
+  }
+}
+
+type CreateProductData = {
+  // id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number;
+  taxes: number;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: string[];
+  colors: string[];
+  quantity: number;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number;
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  // ratings: {
+  //   name: string;
+  //   starCount: number;
+  //   reviewCount: number;
+  // }[];
+};

03_source/cms_backend/src/app/api/product/deleteProduct/route.ts

@@ -0,0 +1,44 @@
+// src/app/api/product/deleteProduct/route.ts
+//
+// PURPOSE:
+// delete product from db by id
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { logger } from 'src/utils/logger';
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * handle Delete Products
+ *************************************** */
+export async function DELETE(req: NextRequest) {
+  try {
+    const { searchParams } = req.nextUrl;
+
+    // RULES: productId must exist
+    const productId = searchParams.get('productId');
+    if (!productId) {
+      return response({ message: 'Product ID is required!' }, STATUS.BAD_REQUEST);
+    }
+
+    // NOTE: productId confirmed exist, run below
+    const product = await prisma.productItem.delete({ where: { id: productId } });
+
+    if (!product) {
+      return response({ message: 'Product not found!' }, STATUS.NOT_FOUND);
+    }
+
+    logger('[Product] details', product.id);
+
+    return response({ product }, STATUS.OK);
+  } catch (error) {
+    return handleError('Product - Get details', error);
+  }
+}

03_source/cms_backend/src/app/api/product/deleteProduct/test.http

@@ -0,0 +1,3 @@
+###
+
+DELETE http://localhost:7272/api/product/deleteProduct?productId=e99f09a7-dd88-49d5-b1c8-1daf80c2d7b06

03_source/cms_backend/src/app/api/product/details/route.ts

@@ -1,25 +1,38 @@
+// src/app/api/product/details/route.ts
+//
+// PURPOSE:
+// save product to db by id
+//
+// RULES:
+// T.B.A.
+
 import type { NextRequest } from 'next/server';
 
 import { logger } from 'src/utils/logger';
 import { STATUS, response, handleError } from 'src/utils/response';
 
-import { _products } from 'src/_mock/_product';
+import prisma from '../../../lib/prisma';
 
 // ----------------------------------------------------------------------
 
-export const runtime = 'edge';
-
 /** **************************************
- * Get product details
+ * GET Product detail
  *************************************** */
 export async function GET(req: NextRequest) {
   try {
     const { searchParams } = req.nextUrl;
+
+    // RULES: productId must exist
     const productId = searchParams.get('productId');
+    if (!productId) {
+      return response({ message: 'Product ID is required!' }, STATUS.BAD_REQUEST);
+    }
 
-    const products = _products();
-
-    const product = products.find((productItem) => productItem.id === productId);
+    // NOTE: productId confirmed exist, run below
+    const product = await prisma.productItem.findFirst({
+      include: { reviews: true },
+      where: { id: productId },
+    });
 
     if (!product) {
       return response({ message: 'Product not found!' }, STATUS.NOT_FOUND);

03_source/cms_backend/src/app/api/product/image/upload/route.ts

@@ -0,0 +1,30 @@
+// src/app/api/product/image/upload/route.ts
+//
+// PURPOSE:
+// handle upload product image
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+// import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  try {
+    const { data } = await req.json();
+    console.log('helloworld');
+
+    return response({ hello: 'world' }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world' });
+    return handleError('Product - store product image', error);
+  }
+}

03_source/cms_backend/src/app/api/product/list/route.ts

@@ -1,3 +1,4 @@
+// src/app/api/product/list/route.ts
 import { logger } from 'src/utils/logger';
 import { STATUS, response, handleError } from 'src/utils/response';
 

03_source/cms_backend/src/app/api/product/saveProduct/route.ts

@@ -0,0 +1,129 @@
+// src/app/api/product/saveProduct/route.ts
+//
+// PURPOSE:
+// save product to db by id
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  // logger('[Product] list', products.length);
+  const { data } = await req.json();
+
+  try {
+    const products = await prisma.productItem.updateMany({
+      data: {
+        name: data.name,
+        sku: data.sku,
+        code: data.code,
+        price: data.price,
+        taxes: data.taxes,
+        tags: data.tags,
+        sizes: data.sizes,
+        publish: data.publish,
+        gender: data.gender,
+        coverUrl: data.coverUrl,
+        images: data.images,
+        colors: data.colors,
+        quantity: data.quantity,
+        category: data.category,
+        available: data.available,
+        totalSold: data.totalSold,
+        description: data.description,
+        totalRatings: data.totalRatings,
+        totalReviews: data.totalReviews,
+        inventoryType: data.inventoryType,
+        subDescription: data.subDescription,
+        priceSale: data.priceSale,
+        //
+        newLabel: {
+          content: data.newLabel?.content || '',
+          enabled: data.newLabel?.enabled ?? false,
+        },
+        saleLabel: {
+          content: data.saleLabel?.content || '',
+          enabled: data.saleLabel?.enabled ?? false,
+        },
+        ratings: {
+          set: data.ratings.map((rating: { name: string; starCount: number; reviewCount: number }) => ({
+            name: rating.name,
+            starCount: rating.starCount,
+            reviewCount: rating.reviewCount,
+          })),
+        },
+      },
+      where: { id: data.id },
+    });
+
+    return response({ hello: 'world', data }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world', data });
+    return handleError('Product - Get list', error);
+  }
+}
+
+export type IProductItem = {
+  id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number;
+  taxes: number;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: string[];
+  colors: string[];
+  quantity: number;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  // createdAt: IDateValue;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  // reviews: IProductReview[];
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  ratings: {
+    name: string;
+    starCount: number;
+    reviewCount: number;
+  }[];
+};
+
+export type IDateValue = string | number | null;
+
+export type IProductReview = {
+  id: string;
+  name: string;
+  rating: number;
+  comment: string;
+  helpful: number;
+  avatarUrl: string;
+  postedAt: IDateValue;
+  isPurchased: boolean;
+  attachments?: string[];
+};

03_source/cms_backend/src/app/api/product/search/route.ts

@@ -24,9 +24,7 @@ export async function GET(req: NextRequest) {
     const products = _products();
 
     // Accept search by name or sku
-    const results = products.filter(
-      ({ name, sku }) => name.toLowerCase().includes(query) || sku?.toLowerCase().includes(query)
-    );
+    const results = products.filter(({ name, sku }) => name.toLowerCase().includes(query) || sku?.toLowerCase().includes(query));
 
     logger('[Product] search-results', results.length);
 

03_source/cms_backend/src/app/api/user/createUser/route.ts

@@ -0,0 +1,53 @@
+// src/app/api/user/createUser/route.ts
+//
+// PURPOSE:
+// create user to db
+//
+// RULES:
+// T.B.A.
+//
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/**
+ ***************************************
+ * POST - create User
+ ***************************************
+ */
+export async function POST(req: NextRequest) {
+  // logger('[User] list', users.length);
+  const { data } = await req.json();
+  const createForm: CreateUserData = data as unknown as CreateUserData;
+
+  try {
+    const user = await prisma.userItem.create({ data: createForm });
+    return response({ user }, STATUS.OK);
+  } catch (error) {
+    return handleError('User - Create', error);
+  }
+}
+
+type CreateUserData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  username: string;
+  password: string;
+};

03_source/cms_backend/src/app/api/user/createUser/test.http

@@ -0,0 +1,4 @@
+###
+
+POST http://localhost:7272/api/user/createUser
+

03_source/cms_backend/src/app/api/user/deleteUser/route.ts

@@ -0,0 +1,47 @@
+// src/app/api/product/deleteUser/route.ts
+//
+// PURPOSE:
+// delete product from db by id
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { logger } from 'src/utils/logger';
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * handle Delete Users
+ *************************************** */
+export async function DELETE(req: NextRequest) {
+  try {
+    const { searchParams } = req.nextUrl;
+
+    // RULES: userId must exist
+    const userId = searchParams.get('userId');
+    if (!userId) {
+      return response({ message: 'User ID is required!' }, STATUS.BAD_REQUEST);
+    }
+
+    // NOTE: userId confirmed exist, run below
+    const user = await prisma.userItem.delete({
+      //
+      where: { id: userId },
+    });
+
+    if (!user) {
+      return response({ message: 'User not found!' }, STATUS.NOT_FOUND);
+    }
+
+    logger('[User] details', user.id);
+
+    return response({ user }, STATUS.OK);
+  } catch (error) {
+    return handleError('User - Get details', error);
+  }
+}

03_source/cms_backend/src/app/api/user/deleteUser/test.http

@@ -0,0 +1,3 @@
+###
+
+DELETE http://localhost:7272/api/user/deleteUser?userId=3f431e6f-ad05-4d60-9c25-6a7e92a954ad

03_source/cms_backend/src/app/api/user/details/route.ts

@@ -0,0 +1,47 @@
+// src/app/api/product/details/route.ts
+//
+// PURPOSE:
+// read user from db by id
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { logger } from 'src/utils/logger';
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET User detail
+ *************************************** */
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = req.nextUrl;
+
+    // RULES: userId must exist
+    const userId = searchParams.get('userId');
+    if (!userId) {
+      return response({ message: 'userId is required!' }, STATUS.BAD_REQUEST);
+    }
+
+    // NOTE: userId confirmed exist, run below
+    const user = await prisma.userItem.findFirst({
+      // include: { reviews: true },
+      where: { id: userId },
+    });
+
+    if (!user) {
+      return response({ message: 'User not found!' }, STATUS.NOT_FOUND);
+    }
+
+    logger('[User] details', user.id);
+
+    return response({ user }, STATUS.OK);
+  } catch (error) {
+    return handleError('Product - Get details', error);
+  }
+}

03_source/cms_backend/src/app/api/user/details/test.http

@@ -0,0 +1,4 @@
+###
+
+GET http://localhost:7272/api/user/details?userId=1165ce3a-29b8-4e1a-9148-1ae08d7e8e01
+

03_source/cms_backend/src/app/api/user/image/upload/route.ts

@@ -0,0 +1,30 @@
+// src/app/api/product/image/upload/route.ts
+//
+// PURPOSE:
+// handle upload product image
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+// import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  try {
+    const { data } = await req.json();
+    console.log('helloworld');
+
+    return response({ hello: 'world' }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world' });
+    return handleError('Product - store product image', error);
+  }
+}

03_source/cms_backend/src/app/api/user/list/route.ts

@@ -0,0 +1,22 @@
+// src/app/api/product/list/route.ts
+import { logger } from 'src/utils/logger';
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET - Products
+ *************************************** */
+export async function GET() {
+  try {
+    const users = await prisma.userItem.findMany();
+
+    logger('[User] list', users.length);
+
+    return response({ users }, STATUS.OK);
+  } catch (error) {
+    return handleError('Product - Get list', error);
+  }
+}

03_source/cms_backend/src/app/api/user/list/test.http

@@ -0,0 +1,3 @@
+###
+
+GET http://localhost:7272/api/user/list

03_source/cms_backend/src/app/api/user/saveUser/route.ts

@@ -0,0 +1,115 @@
+// src/app/api/product/saveProduct/route.ts
+//
+// PURPOSE:
+// save product to db by id
+//
+// RULES:
+// T.B.A.
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * GET - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  // logger('[Product] list', products.length);
+  const { searchParams } = req.nextUrl;
+  const userId = searchParams.get('userId');
+
+  // RULES: userId must exist
+  if (!userId) {
+    return response({ message: 'Product ID is required!' }, STATUS.BAD_REQUEST);
+  }
+
+  const { data } = await req.json();
+
+  try {
+    const user = await prisma.userItem.updateMany({
+      where: { id: userId },
+      data: {
+        status: data.status,
+        avatarUrl: data.avatarUrl,
+        isVerified: data.isVerified,
+        name: data.name,
+        email: data.email,
+        phoneNumber: data.phoneNumber,
+        country: data.country,
+        state: data.state,
+        city: data.city,
+        address: data.address,
+        zipCode: data.zipCode,
+        company: data.company,
+        role: data.role,
+        //
+        username: data.username,
+        password: data.password,
+      },
+    });
+
+    return response({ user }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world', data });
+    return handleError('Product - Get list', error);
+  }
+}
+
+export type IProductItem = {
+  id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number;
+  taxes: number;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: string[];
+  colors: string[];
+  quantity: number;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  // createdAt: IDateValue;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  // reviews: IProductReview[];
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  ratings: {
+    name: string;
+    starCount: number;
+    reviewCount: number;
+  }[];
+};
+
+export type IDateValue = string | number | null;
+
+export type IProductReview = {
+  id: string;
+  name: string;
+  rating: number;
+  comment: string;
+  helpful: number;
+  avatarUrl: string;
+  postedAt: IDateValue;
+  isPurchased: boolean;
+  attachments?: string[];
+};

03_source/cms_backend/src/app/api/user/saveUser/test.http

@@ -0,0 +1,3 @@
+###
+
+POST http://localhost:7272/api/user/list

03_source/cms_backend/src/app/api/user/search/route.ts

@@ -0,0 +1,37 @@
+import type { NextRequest } from 'next/server';
+
+import { logger } from 'src/utils/logger';
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import { _products } from 'src/_mock/_product';
+
+// ----------------------------------------------------------------------
+
+export const runtime = 'edge';
+
+/** **************************************
+ * GET - Search products
+ *************************************** */
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = req.nextUrl;
+    const query = searchParams.get('query')?.trim().toLowerCase();
+
+    if (!query) {
+      return response({ results: [] }, STATUS.OK);
+    }
+
+    const products = _products();
+
+    // Accept search by name or sku
+    const results = products.filter(
+      ({ name, sku }) => name.toLowerCase().includes(query) || sku?.toLowerCase().includes(query)
+    );
+
+    logger('[Product] search-results', results.length);
+
+    return response({ results }, STATUS.OK);
+  } catch (error) {
+    return handleError('Product - Get search', error);
+  }
+}

03_source/cms_backend/tsconfig.json

@@ -1,42 +1,54 @@
 {
   "compilerOptions": {
+    "allowJs": true,
     /* Bundler */
     "baseUrl": ".",
-    "module": "esnext",
+    "esModuleInterop": true,
+    "incremental": true,
+    "isolatedModules": true,
     "jsx": "preserve",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    /* Build */
-    "target": "ES2017",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "incremental": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    /* Linting */
-    "strict": true,
     "noEmit": true,
-    "strictNullChecks": true,
     /* Plugins */
     "plugins": [
       {
         "name": "next"
       }
-    ]
+    ],
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    /* Linting */
+    "strict": true,
+    "strictNullChecks": true,
+    /* Build */
+    "target": "ES2017",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
   },
+  "exclude": [
+    "node_modules",
+    ".next",
+    //
+    "**/* copy *.tsx",
+    "**/* copy.tsx",
+    "**/*.bak",
+    "**/*.bak",
+    "**/*.bug",
+    "**/*.del",
+    "**/*.draft",
+    "**/*.log",
+    "**/*.tmp",
+    "**/*del"
+  ],
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
   ]
 }

03_source/cms_backend/yarn.lock

@@ -411,6 +411,11 @@
     "@eslint/core" "^0.12.0"
     levn "^0.4.1"
 
+"@faker-js/faker@^9.8.0":
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.8.0.tgz#3344284028d1c9dc98dee2479f82939310370d88"
+  integrity sha512-U9wpuSrJC93jZBxx/Qq2wPjCuYISBueyVUGK7qqdmj7r/nxaxwW8AQDCLeRO7wZnjj94sh3p246cAYjUKuqgfg==
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz"
@@ -780,6 +785,11 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.17.17":
+  version "4.17.17"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.17.tgz#fb85a04f47e9e4da888384feead0de05f7070355"
+  integrity sha512-RRVJ+J3J+WmyOTqnz3PiBLA501eKwXl2noseKOrNo/6+XEHjTAxO4xHvxQB6QuNm+s4WRbn6rSiap8+EA+ykFQ==
+
 "@types/node@^22.13.13":
   version "22.13.13"
   resolved "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz"
@@ -2428,6 +2438,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"

03_source/docker/00_dc_up.sh

@@ -5,15 +5,11 @@ set -ex
 #  -f docker-compose.db.yml
 DOCKER_COMPOSE_FILES=" -f docker-compose.yml "
 
-
-#
-
-docker compose $DOCKER_COMPOSE_FILES build
+# docker compose $DOCKER_COMPOSE_FILES build
 docker compose $DOCKER_COMPOSE_FILES up -d
 
 # cd ../api_server
 #   yarn docker:dev
 # cd ..
 
-
 # docker compose $DOCKER_COMPOSE_FILES logs -f

03_source/docker/01_frontent_bash.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+set -ex
+
+#  -f docker-compose.db.yml
+DOCKER_COMPOSE_FILES=" -f docker-compose.yml "
+
+docker compose $DOCKER_COMPOSE_FILES exec -it frontend bash
+
+# cd ../api_server
+#   yarn docker:dev
+# cd ..
+
+
+# docker compose $DOCKER_COMPOSE_FILES logs -f

03_source/docker/docker-compose.yml

@@ -12,7 +12,8 @@ services:
     volumes:
       - ../frontend:/app
     working_dir: "/app"
-    command: "yarn dev"
+    # command: "yarn dev"
+    command: "sleep infinity"
 
   mobile:
     image: 192.168.10.61:5000/hksingleparty_mobile
@@ -37,7 +38,8 @@ services:
     volumes:
       - ../cms_backend:/app
     working_dir: "/app"
-    command: "yarn dev"
+    # command: "yarn dev"
+    command: "sleep infinity"
 
   postgres:
     container_name: postgres

03_source/frontend/dev.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+while true; do
+  yarn --dev
+
+  yarn dev --force --clearScreen
+
+  echo "restarting..."
+  sleep 1
+done

03_source/frontend/eslint.config.mjs

@@ -1,11 +1,11 @@
-import globals from 'globals';
 import eslintJs from '@eslint/js';
-import eslintTs from 'typescript-eslint';
-import reactPlugin from 'eslint-plugin-react';
 import importPlugin from 'eslint-plugin-import';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import perfectionistPlugin from 'eslint-plugin-perfectionist';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import unusedImportsPlugin from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+import eslintTs from 'typescript-eslint';
 
 // ----------------------------------------------------------------------
 
@@ -92,8 +92,6 @@ const sortImportsRules = () => {
   };
 
   return {
-    'perfectionist/sort-named-imports': [1, { type: 'line-length', order: 'asc' }],
-    'perfectionist/sort-named-exports': [1, { type: 'line-length', order: 'asc' }],
     'perfectionist/sort-exports': [
       1,
       {
@@ -102,6 +100,8 @@ const sortImportsRules = () => {
         groupKind: 'values-first',
       },
     ],
+    'perfectionist/sort-named-imports': [1, { type: 'line-length', order: 'asc' }],
+    'perfectionist/sort-named-exports': [1, { type: 'line-length', order: 'asc' }],
     'perfectionist/sort-imports': [
       2,
       {
@@ -172,7 +172,8 @@ export const customConfig = {
     ...commonRules(),
     ...importRules(),
     ...unusedImportsRules(),
-    ...sortImportsRules(),
+    // NOTE: disabled sortImportRules
+    // ...sortImportsRules(),
   },
 };
 

03_source/frontend/package.json

@@ -15,6 +15,7 @@
     "fm:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "fm:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "fix:all": "npm run lint:fix && npm run fm:fix",
+    "fix:all:w": "npx nodemon --delay 1 --ext js,jsx,ts,tsx --exec \"npm run fix:all\"",
     "clean": "rm -rf node_modules .next out dist build",
     "re:dev": "yarn clean && yarn install && yarn dev",
     "re:build": "yarn clean && yarn install && yarn build",
@@ -37,8 +38,11 @@
     "@emotion/styled": "^11.14.0",
     "@fontsource-variable/dm-sans": "^5.2.5",
     "@fontsource-variable/inter": "^5.2.5",
+    "@fontsource-variable/noto-sans": "^5.2.7",
+    "@fontsource-variable/noto-sans-jp": "^5.2.5",
+    "@fontsource-variable/noto-sans-sc": "^5.2.5",
+    "@fontsource-variable/noto-sans-tc": "^5.2.5",
     "@fontsource-variable/nunito-sans": "^5.2.5",
-    "@fontsource-variable/public-sans": "^5.2.5",
     "@fontsource/barlow": "^5.2.5",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
@@ -48,6 +52,7 @@
     "@fullcalendar/timegrid": "^6.1.15",
     "@fullcalendar/timeline": "^6.1.15",
     "@hookform/resolvers": "^4.1.3",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@iconify/react": "^5.2.0",
     "@mui/lab": "^7.0.0-beta.10",
     "@mui/material": "^7.0.1",
@@ -137,4 +142,4 @@
     "vite": "^6.2.3",
     "vite-plugin-checker": "^0.9.1"
   }
-}
+}

03_source/frontend/prettier.config.mjs

@@ -10,6 +10,9 @@ const config = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'es5',
+  plugins: [
+    // '@ianvs/prettier-plugin-sort-imports'
+  ],
 };
 
 export default config;

03_source/frontend/src/_mock/_product.ts

@@ -50,6 +50,7 @@ export const PRODUCT_STOCK_OPTIONS = [
   { value: 'out of stock', label: 'Out of stock' },
 ];
 
+// not used due to i18n
 export const PRODUCT_PUBLISH_OPTIONS = [
   { value: 'published', label: 'Published' },
   { value: 'draft', label: 'Draft' },

03_source/frontend/src/actions/product.ts

@@ -1,10 +1,8 @@
-import type { SWRConfiguration } from 'swr';
-import type { IProductItem } from 'src/types/product';
-
-import useSWR from 'swr';
 import { useMemo } from 'react';
-
-import { fetcher, endpoints } from 'src/lib/axios';
+import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
+import type { IProductItem } from 'src/types/product';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 
 // ----------------------------------------------------------------------
 
@@ -23,7 +21,11 @@ type ProductsData = {
 export function useGetProducts() {
   const url = endpoints.product.list;
 
-  const { data, isLoading, error, isValidating } = useSWR<ProductsData>(url, fetcher, swrOptions);
+  const { data, isLoading, error, isValidating, mutate } = useSWR<ProductsData>(
+    url,
+    fetcher,
+    swrOptions
+  );
 
   const memoizedValue = useMemo(
     () => ({
@@ -32,8 +34,9 @@ export function useGetProducts() {
       productsError: error,
       productsValidating: isValidating,
       productsEmpty: !isLoading && !isValidating && !data?.products.length,
+      mutate,
     }),
-    [data?.products, error, isLoading, isValidating]
+    [data?.products, error, isLoading, isValidating, mutate]
   );
 
   return memoizedValue;
@@ -90,3 +93,142 @@ export function useSearchProducts(query: string) {
 
   return memoizedValue;
 }
+
+// ----------------------------------------------------------------------
+
+type SaveProductData = {
+  // id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number | null;
+  taxes: number | null;
+  tags: string[];
+  sizes: string[];
+  // publish: string;
+  gender: string[];
+  // coverUrl: string;
+  images: (string | File)[];
+  colors: string[];
+  quantity: number | null;
+  category: string;
+  // available: number;
+  // totalSold: number;
+  description: string;
+  // totalRatings: number;
+  // totalReviews: number;
+  // inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  // ratings: {
+  //   name: string;
+  //   starCount: number;
+  //   reviewCount: number;
+  // }[];
+};
+
+export async function saveProduct(productId: string, saveProductData: SaveProductData) {
+  console.log('save product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/product/saveProduct', {
+    data: saveProductData,
+  });
+
+  return res;
+}
+
+export async function uploadProductImage(saveProductData: SaveProductData) {
+  console.log('save product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.get('http://localhost:7272/api/product/helloworld');
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type CreateProductData = {
+  // id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number | null;
+  taxes: number | null;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: (string | File)[];
+  colors: string[];
+  quantity: number | null;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  // ratings: {
+  //   name: string;
+  //   starCount: number;
+  //   reviewCount: number;
+  // }[];
+};
+
+export async function createProduct(createProductData: CreateProductData) {
+  console.log('create product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/product/createProduct', {
+    data: createProductData,
+  });
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type DeleteProductResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function deleteProduct(productId: string): Promise<DeleteProductResponse> {
+  const url = `http://localhost:7272/api/product/deleteProduct?productId=${productId}`;
+
+  try {
+    const res = await axiosInstance.delete(url);
+    console.log({ res });
+
+    return {
+      success: true,
+      message: 'Product deleted successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}

03_source/frontend/src/actions/user.ts

@@ -0,0 +1,197 @@
+import { useMemo } from 'react';
+import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
+import type { IProductItem } from 'src/types/product';
+import { IUserItem } from 'src/types/user';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
+
+// ----------------------------------------------------------------------
+
+const swrOptions: SWRConfiguration = {
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+};
+
+// ----------------------------------------------------------------------
+
+type UsersData = {
+  users: IUserItem[];
+};
+
+export function useGetUsers() {
+  const url = `http://localhost:7272/api/user/list`;
+
+  const { data, isLoading, error, isValidating, mutate } = useSWR<UsersData>(
+    url,
+    fetcher,
+    swrOptions
+  );
+
+  const memoizedValue = useMemo(
+    () => ({
+      users: data?.users || [],
+      usersLoading: isLoading,
+      usersError: error,
+      usersValidating: isValidating,
+      usersEmpty: !isLoading && !isValidating && !data?.users.length,
+      mutate,
+    }),
+    [data?.users, error, isLoading, isValidating, mutate]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type UserData = {
+  user: IUserItem;
+};
+
+export function useGetUser(userId: string) {
+  const url = userId ? [endpoints.user.details, { params: { userId } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<UserData>(url, fetcher, swrOptions);
+
+  const memoizedValue = useMemo(
+    () => ({
+      user: data?.user,
+      userLoading: isLoading,
+      userError: error,
+      userValidating: isValidating,
+    }),
+    [data?.user, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SearchResultsData = {
+  results: IProductItem[];
+};
+
+export function useSearchProducts(query: string) {
+  const url = query ? [endpoints.product.search, { params: { query } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<SearchResultsData>(url, fetcher, {
+    ...swrOptions,
+    keepPreviousData: true,
+  });
+
+  const memoizedValue = useMemo(
+    () => ({
+      searchResults: data?.results || [],
+      searchLoading: isLoading,
+      searchError: error,
+      searchValidating: isValidating,
+      searchEmpty: !isLoading && !isValidating && !data?.results.length,
+    }),
+    [data?.results, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SaveUserData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  username: string;
+  password: string;
+};
+
+export async function saveUser(userId: string, saveUserData: SaveUserData) {
+  // const url = userId ? [endpoints.user.details, { params: { userId } }] : '';
+
+  const res = await axiosInstance.post(
+    //
+    `http://localhost:7272/api/user/saveUser?userId=${userId}`,
+    {
+      data: saveUserData,
+    }
+  );
+
+  return res;
+}
+
+export async function uploadUserImage(saveUserData: SaveUserData) {
+  console.log('uploadUserImage ?');
+  // const url = userId ? [endpoints.user.details, { params: { userId } }] : '';
+
+  const res = await axiosInstance.get('http://localhost:7272/api/product/helloworld');
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type CreateUserData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  username: string;
+  password: string;
+};
+
+export async function createUser(createUserData: CreateUserData) {
+  console.log('create product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/user/createUser', {
+    data: createUserData,
+  });
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type DeleteUserResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function deleteUser(userId: string): Promise<DeleteUserResponse> {
+  const url = `http://localhost:7272/api/user/deleteUser?userId=${userId}`;
+
+  try {
+    const res = await axiosInstance.delete(url);
+
+    return {
+      success: true,
+      message: 'User deleted successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}

03_source/frontend/src/app.tsx

@@ -1,26 +1,20 @@
 import 'src/global.css';
-
 import { useEffect } from 'react';
-
-import { usePathname } from 'src/routes/hooks';
-
+import { AuthProvider as AmplifyAuthProvider } from 'src/auth/context/amplify';
+import { AuthProvider as Auth0AuthProvider } from 'src/auth/context/auth0';
+import { AuthProvider as FirebaseAuthProvider } from 'src/auth/context/firebase';
+import { AuthProvider as JwtAuthProvider } from 'src/auth/context/jwt';
+import { AuthProvider as SupabaseAuthProvider } from 'src/auth/context/supabase';
+import { MotionLazy } from 'src/components/animate/motion-lazy';
+import { ProgressBar } from 'src/components/progress-bar';
+import { defaultSettings, SettingsDrawer, SettingsProvider } from 'src/components/settings';
+import { Snackbar } from 'src/components/snackbar';
 import { CONFIG } from 'src/global-config';
 import { LocalizationProvider } from 'src/locales';
-import { themeConfig, ThemeProvider } from 'src/theme';
 import { I18nProvider } from 'src/locales/i18n-provider';
-
-import { Snackbar } from 'src/components/snackbar';
-import { ProgressBar } from 'src/components/progress-bar';
-import { MotionLazy } from 'src/components/animate/motion-lazy';
-import { SettingsDrawer, defaultSettings, SettingsProvider } from 'src/components/settings';
-
+import { usePathname } from 'src/routes/hooks';
 import { CheckoutProvider } from 'src/sections/checkout/context';
-
-import { AuthProvider as JwtAuthProvider } from 'src/auth/context/jwt';
-import { AuthProvider as Auth0AuthProvider } from 'src/auth/context/auth0';
-import { AuthProvider as AmplifyAuthProvider } from 'src/auth/context/amplify';
-import { AuthProvider as SupabaseAuthProvider } from 'src/auth/context/supabase';
-import { AuthProvider as FirebaseAuthProvider } from 'src/auth/context/firebase';
+import { themeConfig, ThemeProvider } from 'src/theme';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/components/custom-dialog/confirm-dialog.tsx

@@ -5,17 +5,13 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 
 import type { ConfirmDialogProps } from './types';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
-export function ConfirmDialog({
-  open,
-  title,
-  action,
-  content,
-  onClose,
-  ...other
-}: ConfirmDialogProps) {
+export function ConfirmDialog({ open, title, action, content, onClose, ...other }: ConfirmDialogProps) {
+  const { t } = useTranslation();
+
   return (
     <Dialog fullWidth maxWidth="xs" open={open} onClose={onClose} {...other}>
       <DialogTitle sx={{ pb: 2 }}>{title}</DialogTitle>
@@ -26,7 +22,7 @@ export function ConfirmDialog({
         {action}
 
         <Button variant="outlined" color="inherit" onClick={onClose}>
-          Cancel
+          {t('Cancel')}
         </Button>
       </DialogActions>
     </Dialog>

03_source/frontend/src/components/file-thumbnail/file-thumbnail.tsx

@@ -1,13 +1,10 @@
-import { mergeClasses } from 'minimal-shared/utils';
-
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
-
+import Tooltip from '@mui/material/Tooltip';
+import { mergeClasses } from 'minimal-shared/utils';
+import { DownloadButton, RemoveButton } from './action-buttons';
 import { fileThumbnailClasses } from './classes';
-import { fileData, fileThumb, fileFormat } from './utils';
-import { RemoveButton, DownloadButton } from './action-buttons';
-
 import type { FileThumbnailProps } from './types';
+import { fileData, fileFormat, fileThumb } from './utils';
 
 // ----------------------------------------------------------------------
 
@@ -29,14 +26,26 @@ export function FileThumbnail({
   const previewUrl = typeof file === 'string' ? file : URL.createObjectURL(file);
 
   const format = fileFormat(path ?? previewUrl);
+  const isDataUrl = format.startsWith('data');
 
-  const renderItem = () => (
-    <ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
-      {format === 'image' && imageView ? (
+  const TestImg = () => (
+    <>
+      {!isDataUrl && format === 'image' && imageView ? (
         <ItemImg src={previewUrl} className={fileThumbnailClasses.img} {...slotProps?.img} />
       ) : (
         <ItemIcon src={fileThumb(format)} className={fileThumbnailClasses.icon} {...icon} />
       )}
+    </>
+  );
+
+  const DataUrlImg = () => (
+    <ItemImg src={previewUrl} className={fileThumbnailClasses.img} {...slotProps?.img} />
+  );
+
+  const renderItem = () => (
+    <ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
+      {/*  */}
+      {isDataUrl ? <DataUrlImg /> : <TestImg />}
 
       {onRemove && (
         <RemoveButton

03_source/frontend/src/components/hook-form/fields.tsx

@@ -1,17 +1,21 @@
+// src/components/hook-form/fields.tsx
+//
 import { RHFCode } from './rhf-code';
 import { RHFRating } from './rhf-rating';
 import { RHFEditor } from './rhf-editor';
 import { RHFSlider } from './rhf-slider';
+import { RHFUpload } from './rhf-upload';
 import { RHFTextField } from './rhf-text-field';
+import { RHFUploadBox } from './rhf-upload-box';
 import { RHFRadioGroup } from './rhf-radio-group';
 import { RHFPhoneInput } from './rhf-phone-input';
 import { RHFNumberInput } from './rhf-number-input';
 import { RHFAutocomplete } from './rhf-autocomplete';
+import { RHFUploadAvatar } from './rhf-upload-avatar';
 import { RHFCountrySelect } from './rhf-country-select';
 import { RHFSwitch, RHFMultiSwitch } from './rhf-switch';
 import { RHFSelect, RHFMultiSelect } from './rhf-select';
 import { RHFCheckbox, RHFMultiCheckbox } from './rhf-checkbox';
-import { RHFUpload, RHFUploadBox, RHFUploadAvatar } from './rhf-upload';
 import { RHFDatePicker, RHFMobileDateTimePicker } from './rhf-date-picker';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/components/hook-form/rhf-upload-avatar.tsx

@@ -0,0 +1,45 @@
+import type { BoxProps } from '@mui/material/Box';
+
+import { Controller, useFormContext } from 'react-hook-form';
+
+import Box from '@mui/material/Box';
+
+import { HelperText } from './help-text';
+import { UploadAvatar } from '../upload';
+
+import type { UploadProps } from '../upload';
+
+// ----------------------------------------------------------------------
+
+export type RHFUploadProps = UploadProps & {
+  name: string;
+  slotProps?: {
+    wrapper?: BoxProps;
+  };
+};
+
+export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
+  const { control, setValue } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => {
+        const onDrop = (acceptedFiles: File[]) => {
+          const value = acceptedFiles[0];
+
+          setValue(name, value, { shouldValidate: true });
+        };
+
+        return (
+          <Box {...slotProps?.wrapper}>
+            <UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
+
+            <HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
+          </Box>
+        );
+      }}
+    />
+  );
+}

03_source/frontend/src/components/hook-form/rhf-upload-box.tsx

@@ -0,0 +1,30 @@
+import type { BoxProps } from '@mui/material/Box';
+
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { UploadBox } from '../upload';
+
+import type { UploadProps } from '../upload';
+
+// ----------------------------------------------------------------------
+
+export type RHFUploadProps = UploadProps & {
+  name: string;
+  slotProps?: {
+    wrapper?: BoxProps;
+  };
+};
+
+export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <UploadBox value={field.value} error={!!error} {...other} />
+      )}
+    />
+  );
+}

03_source/frontend/src/components/hook-form/rhf-upload.tsx

@@ -1,12 +1,6 @@
 import type { BoxProps } from '@mui/material/Box';
-
 import { Controller, useFormContext } from 'react-hook-form';
-
-import Box from '@mui/material/Box';
-
-import { HelperText } from './help-text';
-import { Upload, UploadBox, UploadAvatar } from '../upload';
-
+import { Upload } from '../upload';
 import type { UploadProps } from '../upload';
 
 // ----------------------------------------------------------------------
@@ -18,48 +12,6 @@ export type RHFUploadProps = UploadProps & {
   };
 };
 
-export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
-  const { control, setValue } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => {
-        const onDrop = (acceptedFiles: File[]) => {
-          const value = acceptedFiles[0];
-
-          setValue(name, value, { shouldValidate: true });
-        };
-
-        return (
-          <Box {...slotProps?.wrapper}>
-            <UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
-
-            <HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
-          </Box>
-        );
-      }}
-    />
-  );
-}
-
-// ----------------------------------------------------------------------
-
-export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <UploadBox value={field.value} error={!!error} {...other} />
-      )}
-    />
-  );
-}
-
 // ----------------------------------------------------------------------
 
 export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadProps) {
@@ -83,6 +35,8 @@ export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadPro
           setValue(name, value, { shouldValidate: true });
         };
 
+        // return <>{JSON.stringify({ t: field.value })}</>;
+
         return <Upload {...uploadProps} value={field.value} onDrop={onDrop} {...other} />;
       }}
     />

03_source/frontend/src/components/mega-menu/components/nav-dropdown-content.tsx

@@ -6,11 +6,11 @@ import Typography from '@mui/material/Typography';
 
 import { RouterLink } from 'src/routes/components';
 
+import { NavUl } from './nav-elements';
 import { Iconify } from '../../iconify';
 import { NavSubList } from './nav-sub-list';
 import { megaMenuClasses } from '../styles';
 import { NavCarousel } from './nav-carousel';
-import { NavUl } from './nav-elements';
 
 import type { NavListProps } from '../types';
 

03_source/frontend/src/components/mega-menu/components/nav-sub-list.tsx

@@ -11,24 +11,20 @@ import { megaMenuClasses } from '../styles';
 import { NavUl, NavLi } from './nav-elements';
 
 import type { NavSubItemProps, NavSubListProps } from '../types';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
 export function NavSubList({ data, slotProps, ...other }: NavSubListProps) {
   const pathname = usePathname();
+  const { t } = useTranslation();
 
   return (
     <>
       {data?.map((list) => (
         <NavLi key={list?.subheader ?? list.items[0].title} {...other}>
           {list?.subheader && (
-            <Typography
-              noWrap
-              component="div"
-              variant="subtitle2"
-              className={megaMenuClasses.subheader}
-              sx={{ mb: 1, ...slotProps?.subheader }}
-            >
+            <Typography noWrap component="div" variant="subtitle2" className={megaMenuClasses.subheader} sx={{ mb: 1, ...slotProps?.subheader }}>
               {list.subheader}
             </Typography>
           )}

03_source/frontend/src/components/nav-section/components/nav-subheader.tsx

@@ -13,16 +13,8 @@ import { Iconify, iconifyClasses } from '../../iconify';
 export type NavSubheaderProps = ListSubheaderProps & { open?: boolean };
 
 export const NavSubheader = styled(({ open, children, className, ...other }: NavSubheaderProps) => (
-  <ListSubheader
-    disableSticky
-    component="div"
-    {...other}
-    className={mergeClasses([navSectionClasses.subheader, className])}
-  >
-    <Iconify
-      width={16}
-      icon={open ? 'eva:arrow-ios-downward-fill' : 'eva:arrow-ios-forward-fill'}
-    />
+  <ListSubheader disableSticky component="div" {...other} className={mergeClasses([navSectionClasses.subheader, className])}>
+    <Iconify width={16} icon={open ? 'eva:arrow-ios-downward-fill' : 'eva:arrow-ios-forward-fill'} />
     {children}
   </ListSubheader>
 ))(({ theme }) => ({

03_source/frontend/src/components/nav-section/horizontal/nav-section-horizontal.tsx

@@ -27,10 +27,7 @@ export function NavSectionHorizontal({
   const cssVars = { ...navSectionCssVars.horizontal(theme), ...overridesVars };
 
   return (
-    <Scrollbar
-      sx={{ height: 1 }}
-      slotProps={{ contentSx: { height: 1, display: 'flex', alignItems: 'center' } }}
-    >
+    <Scrollbar sx={{ height: 1 }} slotProps={{ contentSx: { height: 1, display: 'flex', alignItems: 'center' } }}>
       <Nav
         className={mergeClasses([navSectionClasses.horizontal, className])}
         sx={[
@@ -66,14 +63,7 @@ export function NavSectionHorizontal({
 
 // ----------------------------------------------------------------------
 
-function Group({
-  items,
-  render,
-  cssVars,
-  slotProps,
-  checkPermissions,
-  enabledRootRedirect,
-}: NavGroupProps) {
+function Group({ items, render, cssVars, slotProps, checkPermissions, enabledRootRedirect }: NavGroupProps) {
   return (
     <NavLi>
       <NavUl sx={{ flexDirection: 'row', gap: 'var(--nav-item-gap)' }}>

03_source/frontend/src/components/nav-section/mini/nav-section-mini.tsx

@@ -26,11 +26,7 @@ export function NavSectionMini({
   const cssVars = { ...navSectionCssVars.mini(theme), ...overridesVars };
 
   return (
-    <Nav
-      className={mergeClasses([navSectionClasses.mini, className])}
-      sx={[{ ...cssVars }, ...(Array.isArray(sx) ? sx : [sx])]}
-      {...other}
-    >
+    <Nav className={mergeClasses([navSectionClasses.mini, className])} sx={[{ ...cssVars }, ...(Array.isArray(sx) ? sx : [sx])]} {...other}>
       <NavUl sx={{ flex: '1 1 auto', gap: 'var(--nav-item-gap)' }}>
         {data.map((group) => (
           <Group
@@ -50,14 +46,7 @@ export function NavSectionMini({
 
 // ----------------------------------------------------------------------
 
-function Group({
-  items,
-  render,
-  cssVars,
-  slotProps,
-  checkPermissions,
-  enabledRootRedirect,
-}: NavGroupProps) {
+function Group({ items, render, cssVars, slotProps, checkPermissions, enabledRootRedirect }: NavGroupProps) {
   return (
     <NavLi>
       <NavUl sx={{ gap: 'var(--nav-item-gap)' }}>

03_source/frontend/src/components/nav-section/vertical/nav-item.tsx

@@ -1,16 +1,12 @@
-import type { CSSObject } from '@mui/material/styles';
-
-import { mergeClasses } from 'minimal-shared/utils';
-
-import Tooltip from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
 import ButtonBase from '@mui/material/ButtonBase';
-
+import type { CSSObject } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { mergeClasses } from 'minimal-shared/utils';
 import { Iconify } from '../../iconify';
-import { createNavItem } from '../utils';
 import { navItemStyles, navSectionClasses } from '../styles';
-
 import type { NavItemProps } from '../types';
+import { createNavItem } from '../utils';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/components/nav-section/vertical/nav-list.tsx

@@ -1,14 +1,12 @@
 import { useBoolean } from 'minimal-shared/hooks';
-import { useRef, useEffect, useCallback } from 'react';
 import { isActiveLink, isExternalLink } from 'minimal-shared/utils';
-
+import { useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { usePathname } from 'src/routes/hooks';
-
-import { NavItem } from './nav-item';
+import { NavCollapse, NavLi, NavUl } from '../components';
 import { navSectionClasses } from '../styles';
-import { NavUl, NavLi, NavCollapse } from '../components';
-
 import type { NavListProps, NavSubListProps } from '../types';
+import { NavItem } from './nav-item';
 
 // ----------------------------------------------------------------------
 
@@ -40,6 +38,7 @@ export function NavList({
     }
   }, [data.children, onToggle]);
 
+  const { t } = useTranslation();
   const renderNavItem = () => (
     <NavItem
       ref={navItemRef}
@@ -47,7 +46,7 @@ export function NavList({
       path={data.path}
       icon={data.icon}
       info={data.info}
-      title={data.title}
+      title={t(data.title)}
       caption={data.caption}
       // state
       open={open}

03_source/frontend/src/components/nav-section/vertical/nav-section-vertical.tsx

@@ -1,14 +1,12 @@
-import { useBoolean } from 'minimal-shared/hooks';
-import { mergeClasses } from 'minimal-shared/utils';
-
 import Collapse from '@mui/material/Collapse';
 import { useTheme } from '@mui/material/styles';
-
-import { NavList } from './nav-list';
-import { Nav, NavUl, NavLi, NavSubheader } from '../components';
+import { useBoolean } from 'minimal-shared/hooks';
+import { mergeClasses } from 'minimal-shared/utils';
+import { Nav, NavLi, NavSubheader, NavUl } from '../components';
 import { navSectionClasses, navSectionCssVars } from '../styles';
-
 import type { NavGroupProps, NavSectionProps } from '../types';
+import { NavList } from './nav-list';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -28,11 +26,7 @@ export function NavSectionVertical({
   const cssVars = { ...navSectionCssVars.vertical(theme), ...overridesVars };
 
   return (
-    <Nav
-      className={mergeClasses([navSectionClasses.vertical, className])}
-      sx={[{ ...cssVars }, ...(Array.isArray(sx) ? sx : [sx])]}
-      {...other}
-    >
+    <Nav className={mergeClasses([navSectionClasses.vertical, className])} sx={[{ ...cssVars }, ...(Array.isArray(sx) ? sx : [sx])]} {...other}>
       <NavUl sx={{ flex: '1 1 auto', gap: 'var(--nav-item-gap)' }}>
         {data.map((group) => (
           <Group
@@ -52,15 +46,9 @@ export function NavSectionVertical({
 
 // ----------------------------------------------------------------------
 
-function Group({
-  items,
-  render,
-  subheader,
-  slotProps,
-  checkPermissions,
-  enabledRootRedirect,
-}: NavGroupProps) {
+function Group({ items, render, subheader, slotProps, checkPermissions, enabledRootRedirect }: NavGroupProps) {
   const groupOpen = useBoolean(true);
+  const { t } = useTranslation();
 
   const renderContent = () => (
     <NavUl sx={{ gap: 'var(--nav-item-gap)' }}>
@@ -82,15 +70,9 @@ function Group({
     <NavLi>
       {subheader ? (
         <>
-          <NavSubheader
-            data-title={subheader}
-            open={groupOpen.value}
-            onClick={groupOpen.onToggle}
-            sx={slotProps?.subheader}
-          >
-            {subheader}
+          <NavSubheader data-title={subheader} open={groupOpen.value} onClick={groupOpen.onToggle} sx={slotProps?.subheader}>
+            {t(subheader)}
           </NavSubheader>
-
           <Collapse in={groupOpen.value}>{renderContent()}</Collapse>
         </>
       ) : (

03_source/frontend/src/components/upload/upload-avatar.tsx

@@ -11,18 +11,12 @@ import { uploadClasses } from './classes';
 import { RejectionFiles } from './components/rejection-files';
 
 import type { UploadProps } from './types';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
-export function UploadAvatar({
-  sx,
-  error,
-  value,
-  disabled,
-  helperText,
-  className,
-  ...other
-}: UploadProps) {
+export function UploadAvatar({ sx, error, value, disabled, helperText, className, ...other }: UploadProps) {
+  const { t } = useTranslation();
   const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
     multiple: false,
     disabled,
@@ -44,10 +38,7 @@ export function UploadAvatar({
     }
   }, [value]);
 
-  const renderPreview = () =>
-    hasFile && (
-      <Image alt="Avatar" src={preview} sx={{ width: 1, height: 1, borderRadius: '50%' }} />
-    );
+  const renderPreview = () => hasFile && <Image alt="Avatar" src={preview} sx={{ width: 1, height: 1, borderRadius: '50%' }} />;
 
   const renderPlaceholder = () => (
     <Box
@@ -85,7 +76,7 @@ export function UploadAvatar({
     >
       <Iconify icon="solar:camera-add-bold" width={32} />
 
-      <Typography variant="caption">{hasFile ? 'Update photo' : 'Upload photo'}</Typography>
+      <Typography variant="caption">{hasFile ? t('Update photo') : t('Update photo')}</Typography>
     </Box>
   );
 

03_source/frontend/src/components/upload/upload.tsx

@@ -59,6 +59,7 @@ export function Upload({
 
             {onUpload && (
               <Button
+                type="button"
                 size="small"
                 variant="contained"
                 onClick={onUpload}

03_source/frontend/src/constants.ts

@@ -0,0 +1 @@
+export const isDev = process.env.NODE_ENV === 'development';

03_source/frontend/src/global.css

@@ -1,20 +1,27 @@
 /** **************************************
 * Fonts: app
 *************************************** */
-@import '@fontsource-variable/public-sans';
+@import '@fontsource-variable/noto-sans';
+@import '@fontsource-variable/noto-sans-tc';
+@import '@fontsource-variable/noto-sans-sc';
+@import '@fontsource-variable/noto-sans-jp';
 
+/* @import '@fontsource-variable/public-sans'; */
+
+/*
 @import '@fontsource/barlow/400.css';
 @import '@fontsource/barlow/500.css';
 @import '@fontsource/barlow/600.css';
 @import '@fontsource/barlow/700.css';
 @import '@fontsource/barlow/800.css';
+*/
 
 /** **************************************
 * Fonts: options
 *************************************** */
-@import '@fontsource-variable/dm-sans';
-@import '@fontsource-variable/inter';
-@import '@fontsource-variable/nunito-sans';
+/* @import '@fontsource-variable/dm-sans'; */
+/* @import '@fontsource-variable/inter'; */
+/* @import '@fontsource-variable/nunito-sans'; */
 
 /** **************************************
 * Plugins

03_source/frontend/src/layouts/components/searchbar/utils.ts

@@ -35,9 +35,7 @@ const flattenNavItems = (navItems: NavItem[], parentGroup?: string): OutputItem[
 };
 
 export function flattenNavSections(navSections: NavSectionProps['data']): OutputItem[] {
-  return navSections.flatMap((navSection) =>
-    flattenNavItems(navSection.items, navSection.subheader)
-  );
+  return navSections.flatMap((navSection) => flattenNavItems(navSection.items, navSection.subheader));
 }
 
 // ----------------------------------------------------------------------
@@ -50,7 +48,5 @@ type ApplyFilterProps = {
 export function applyFilter({ inputData, query }: ApplyFilterProps): OutputItem[] {
   if (!query) return inputData;
 
-  return inputData.filter(({ title, path, group }) =>
-    [title, path, group].some((field) => field?.toLowerCase().includes(query.toLowerCase()))
-  );
+  return inputData.filter(({ title, path, group }) => [title, path, group].some((field) => field?.toLowerCase().includes(query.toLowerCase())));
 }

03_source/frontend/src/layouts/dashboard/layout.tsx

@@ -1,46 +1,39 @@
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { iconButtonClasses } from '@mui/material/IconButton';
 import type { Breakpoint } from '@mui/material/styles';
-import type { NavItemProps, NavSectionProps } from 'src/components/nav-section';
-
+import { useTheme } from '@mui/material/styles';
 import { merge } from 'es-toolkit';
 import { useBoolean } from 'minimal-shared/hooks';
-
-import Box from '@mui/material/Box';
-import Alert from '@mui/material/Alert';
-import { useTheme } from '@mui/material/styles';
-import { iconButtonClasses } from '@mui/material/IconButton';
-
-import { allLangs } from 'src/locales';
 import { _contacts, _notifications } from 'src/_mock';
-
-import { Logo } from 'src/components/logo';
-import { useSettingsContext } from 'src/components/settings';
-
 import { useMockedUser } from 'src/auth/hooks';
-
-import { NavMobile } from './nav-mobile';
-import { VerticalDivider } from './content';
-import { NavVertical } from './nav-vertical';
-import { layoutClasses } from '../core/classes';
-import { NavHorizontal } from './nav-horizontal';
-import { _account } from '../nav-config-account';
-import { MainSection } from '../core/main-section';
-import { Searchbar } from '../components/searchbar';
-import { _workspaces } from '../nav-config-workspace';
-import { MenuButton } from '../components/menu-button';
-import { HeaderSection } from '../core/header-section';
-import { LayoutSection } from '../core/layout-section';
+import { Logo } from 'src/components/logo';
+import type { NavItemProps, NavSectionProps } from 'src/components/nav-section';
+import { useSettingsContext } from 'src/components/settings';
+import { allLangs } from 'src/locales';
 import { AccountDrawer } from '../components/account-drawer';
-import { SettingsButton } from '../components/settings-button';
-import { LanguagePopover } from '../components/language-popover';
 import { ContactsPopover } from '../components/contacts-popover';
-import { WorkspacesPopover } from '../components/workspaces-popover';
-import { navData as dashboardNavData } from '../nav-config-dashboard';
-import { dashboardLayoutVars, dashboardNavColorVars } from './css-vars';
+import { LanguagePopover } from '../components/language-popover';
+import { MenuButton } from '../components/menu-button';
 import { NotificationsDrawer } from '../components/notifications-drawer';
-
-import type { MainSectionProps } from '../core/main-section';
+import { Searchbar } from '../components/searchbar';
+import { SettingsButton } from '../components/settings-button';
+import { WorkspacesPopover } from '../components/workspaces-popover';
+import { layoutClasses } from '../core/classes';
+import { HeaderSection } from '../core/header-section';
 import type { HeaderSectionProps } from '../core/header-section';
+import { LayoutSection } from '../core/layout-section';
 import type { LayoutSectionProps } from '../core/layout-section';
+import { MainSection } from '../core/main-section';
+import type { MainSectionProps } from '../core/main-section';
+import { _account } from '../nav-config-account';
+import { navData as dashboardNavData } from '../nav-config-dashboard';
+import { _workspaces } from '../nav-config-workspace';
+import { VerticalDivider } from './content';
+import { dashboardLayoutVars, dashboardNavColorVars } from './css-vars';
+import { NavHorizontal } from './nav-horizontal';
+import { NavMobile } from './nav-mobile';
+import { NavVertical } from './nav-vertical';
 
 // ----------------------------------------------------------------------
 
@@ -57,13 +50,7 @@ export type DashboardLayoutProps = LayoutBaseProps & {
   };
 };
 
-export function DashboardLayout({
-  sx,
-  cssVars,
-  children,
-  slotProps,
-  layoutQuery = 'lg',
-}: DashboardLayoutProps) {
+export function DashboardLayout({ sx, cssVars, children, slotProps, layoutQuery = 'lg' }: DashboardLayoutProps) {
   const theme = useTheme();
 
   const { user } = useMockedUser();
@@ -80,8 +67,7 @@ export function DashboardLayout({
   const isNavHorizontal = settings.state.navLayout === 'horizontal';
   const isNavVertical = isNavMini || settings.state.navLayout === 'vertical';
 
-  const canDisplayItemByRole = (allowedRoles: NavItemProps['allowedRoles']): boolean =>
-    !allowedRoles?.includes(user?.role);
+  const canDisplayItemByRole = (allowedRoles: NavItemProps['allowedRoles']): boolean => !allowedRoles?.includes(user?.role);
 
   const renderHeader = () => {
     const headerSlotProps: HeaderSectionProps['slotProps'] = {
@@ -105,27 +91,13 @@ export function DashboardLayout({
         </Alert>
       ),
       bottomArea: isNavHorizontal ? (
-        <NavHorizontal
-          data={navData}
-          layoutQuery={layoutQuery}
-          cssVars={navVars.section}
-          checkPermissions={canDisplayItemByRole}
-        />
+        <NavHorizontal data={navData} layoutQuery={layoutQuery} cssVars={navVars.section} checkPermissions={canDisplayItemByRole} />
       ) : null,
       leftArea: (
         <>
           {/** @slot Nav mobile */}
-          <MenuButton
-            onClick={onOpen}
-            sx={{ mr: 1, ml: -1, [theme.breakpoints.up(layoutQuery)]: { display: 'none' } }}
-          />
-          <NavMobile
-            data={navData}
-            open={open}
-            onClose={onClose}
-            cssVars={navVars.section}
-            checkPermissions={canDisplayItemByRole}
-          />
+          <MenuButton onClick={onOpen} sx={{ mr: 1, ml: -1, [theme.breakpoints.up(layoutQuery)]: { display: 'none' } }} />
+          <NavMobile data={navData} open={open} onClose={onClose} cssVars={navVars.section} checkPermissions={canDisplayItemByRole} />
 
           {/** @slot Logo */}
           {isNavHorizontal && (
@@ -138,15 +110,10 @@ export function DashboardLayout({
           )}
 
           {/** @slot Divider */}
-          {isNavHorizontal && (
-            <VerticalDivider sx={{ [theme.breakpoints.up(layoutQuery)]: { display: 'flex' } }} />
-          )}
+          {isNavHorizontal && <VerticalDivider sx={{ [theme.breakpoints.up(layoutQuery)]: { display: 'flex' } }} />}
 
           {/** @slot Workspace popover */}
-          <WorkspacesPopover
-            data={_workspaces}
-            sx={{ ...(isNavHorizontal && { color: 'var(--layout-nav-text-primary-color)' }) }}
-          />
+          <WorkspacesPopover data={_workspaces} sx={{ ...(isNavHorizontal && { color: 'var(--layout-nav-text-primary-color)' }) }} />
         </>
       ),
       rightArea: (
@@ -191,12 +158,7 @@ export function DashboardLayout({
       layoutQuery={layoutQuery}
       cssVars={navVars.section}
       checkPermissions={canDisplayItemByRole}
-      onToggleNav={() =>
-        settings.setField(
-          'navLayout',
-          settings.state.navLayout === 'vertical' ? 'mini' : 'vertical'
-        )
-      }
+      onToggleNav={() => settings.setField('navLayout', settings.state.navLayout === 'vertical' ? 'mini' : 'vertical')}
     />
   );
 

03_source/frontend/src/layouts/dashboard/nav-vertical.tsx

@@ -1,18 +1,14 @@
-import type { Breakpoint } from '@mui/material/styles';
-import type { NavSectionProps } from 'src/components/nav-section';
-
-import { varAlpha, mergeClasses } from 'minimal-shared/utils';
-
 import Box from '@mui/material/Box';
+import type { Breakpoint } from '@mui/material/styles';
 import { styled } from '@mui/material/styles';
-
+import { mergeClasses, varAlpha } from 'minimal-shared/utils';
 import { Logo } from 'src/components/logo';
-import { Scrollbar } from 'src/components/scrollbar';
+import type { NavSectionProps } from 'src/components/nav-section';
 import { NavSectionMini, NavSectionVertical } from 'src/components/nav-section';
-
-import { layoutClasses } from '../core/classes';
-import { NavUpgrade } from '../components/nav-upgrade';
+import { Scrollbar } from 'src/components/scrollbar';
 import { NavToggleButton } from '../components/nav-toggle-button';
+import { NavUpgrade } from '../components/nav-upgrade';
+import { layoutClasses } from '../core/classes';
 
 // ----------------------------------------------------------------------
 
@@ -27,18 +23,7 @@ export type NavVerticalProps = React.ComponentProps<'div'> &
     };
   };
 
-export function NavVertical({
-  sx,
-  data,
-  slots,
-  cssVars,
-  className,
-  isNavMini,
-  onToggleNav,
-  checkPermissions,
-  layoutQuery = 'md',
-  ...other
-}: NavVerticalProps) {
+export function NavVertical({ sx, data, slots, cssVars, className, isNavMini, onToggleNav, checkPermissions, layoutQuery = 'md', ...other }: NavVerticalProps) {
   const renderNavVertical = () => (
     <>
       {slots?.topArea ?? (
@@ -48,12 +33,7 @@ export function NavVertical({
       )}
 
       <Scrollbar fillContent>
-        <NavSectionVertical
-          data={data}
-          cssVars={cssVars}
-          checkPermissions={checkPermissions}
-          sx={{ px: 2, flex: '1 1 auto' }}
-        />
+        <NavSectionVertical data={data} cssVars={cssVars} checkPermissions={checkPermissions} sx={{ px: 2, flex: '1 1 auto' }} />
 
         {slots?.bottomArea ?? <NavUpgrade />}
       </Scrollbar>
@@ -114,22 +94,20 @@ export function NavVertical({
 
 const NavRoot = styled('div', {
   shouldForwardProp: (prop: string) => !['isNavMini', 'layoutQuery', 'sx'].includes(prop),
-})<Pick<NavVerticalProps, 'isNavMini' | 'layoutQuery'>>(
-  ({ isNavMini, layoutQuery = 'md', theme }) => ({
-    top: 0,
-    left: 0,
-    height: '100%',
-    display: 'none',
-    position: 'fixed',
-    flexDirection: 'column',
-    zIndex: 'var(--layout-nav-zIndex)',
-    backgroundColor: 'var(--layout-nav-bg)',
-    width: isNavMini ? 'var(--layout-nav-mini-width)' : 'var(--layout-nav-vertical-width)',
-    borderRight: `1px solid var(--layout-nav-border-color, ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)})`,
-    transition: theme.transitions.create(['width'], {
-      easing: 'var(--layout-transition-easing)',
-      duration: 'var(--layout-transition-duration)',
-    }),
-    [theme.breakpoints.up(layoutQuery)]: { display: 'flex' },
-  })
-);
+})<Pick<NavVerticalProps, 'isNavMini' | 'layoutQuery'>>(({ isNavMini, layoutQuery = 'md', theme }) => ({
+  top: 0,
+  left: 0,
+  height: '100%',
+  display: 'none',
+  position: 'fixed',
+  flexDirection: 'column',
+  zIndex: 'var(--layout-nav-zIndex)',
+  backgroundColor: 'var(--layout-nav-bg)',
+  width: isNavMini ? 'var(--layout-nav-mini-width)' : 'var(--layout-nav-vertical-width)',
+  borderRight: `1px solid var(--layout-nav-border-color, ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)})`,
+  transition: theme.transitions.create(['width'], {
+    easing: 'var(--layout-transition-easing)',
+    duration: 'var(--layout-transition-duration)',
+  }),
+  [theme.breakpoints.up(layoutQuery)]: { display: 'flex' },
+}));

03_source/frontend/src/layouts/main/nav/desktop/nav-desktop-item.tsx

@@ -1,13 +1,9 @@
-import type { CSSObject } from '@mui/material/styles';
-
-import { varAlpha, mergeClasses } from 'minimal-shared/utils';
-
-import { styled } from '@mui/material/styles';
 import ButtonBase from '@mui/material/ButtonBase';
-
+import type { CSSObject } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import { mergeClasses, varAlpha } from 'minimal-shared/utils';
 import { Iconify } from 'src/components/iconify';
 import { createNavItem, navItemStyles, navSectionClasses } from 'src/components/nav-section';
-
 import type { NavItemProps } from '../types';
 
 // ----------------------------------------------------------------------
@@ -59,11 +55,7 @@ const shouldForwardProp = (prop: string) => !['open', 'active', 'variant', 'sx']
 /**
  * @slot root
  */
-const ItemRoot = styled(ButtonBase, { shouldForwardProp })<StyledState>(({
-  active,
-  open,
-  theme,
-}) => {
+const ItemRoot = styled(ButtonBase, { shouldForwardProp })<StyledState>(({ active, open, theme }) => {
   const dotTransitions: Record<'in' | 'out', CSSObject> = {
     in: { opacity: 0, scale: 0 },
     out: { opacity: 1, scale: 1 },

03_source/frontend/src/layouts/main/nav/desktop/nav-desktop-list.tsx

@@ -1,14 +1,11 @@
 import { useBoolean } from 'minimal-shared/hooks';
-import { useRef, useEffect, useCallback } from 'react';
-import { isEqualPath, isActiveLink, isExternalLink } from 'minimal-shared/utils';
-
+import { isActiveLink, isEqualPath, isExternalLink } from 'minimal-shared/utils';
+import { useCallback, useEffect, useRef } from 'react';
 import { usePathname } from 'src/routes/hooks';
-
-import { NavItem } from './nav-desktop-item';
-import { Nav, NavLi, NavUl, NavDropdown } from '../components';
-import { NavItemDashboard } from './nav-desktop-item-dashboard';
-
+import { Nav, NavDropdown, NavLi, NavUl } from '../components';
 import type { NavListProps, NavSubListProps } from '../types';
+import { NavItem } from './nav-desktop-item';
+import { NavItemDashboard } from './nav-desktop-item-dashboard';
 
 // ----------------------------------------------------------------------
 
@@ -109,12 +106,7 @@ function NavSubList({ data, subheader, sx, ...other }: NavSubListProps) {
             </NavLi>
           ) : (
             <NavLi key={item.title} sx={{ mt: 0.75 }}>
-              <NavItem
-                subItem
-                title={item.title}
-                path={item.path}
-                active={isEqualPath(item.path, pathname)}
-              />
+              <NavItem subItem title={item.title} path={item.path} active={isEqualPath(item.path, pathname)} />
             </NavLi>
           )
         )}

03_source/frontend/src/layouts/main/nav/desktop/nav-desktop.tsx

@@ -1,7 +1,6 @@
 import { Nav, NavUl } from '../components';
-import { NavList } from './nav-desktop-list';
-
 import type { NavMainProps } from '../types';
+import { NavList } from './nav-desktop-list';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/layouts/main/nav/mobile/nav-mobile-item.tsx

@@ -1,13 +1,9 @@
-import type { CSSObject } from '@mui/material/styles';
-
-import { varAlpha, mergeClasses } from 'minimal-shared/utils';
-
-import { styled } from '@mui/material/styles';
 import ButtonBase from '@mui/material/ButtonBase';
-
+import type { CSSObject } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import { mergeClasses, varAlpha } from 'minimal-shared/utils';
 import { Iconify } from 'src/components/iconify';
 import { createNavItem, navItemStyles, navSectionClasses } from 'src/components/nav-section';
-
 import type { NavItemProps } from '../types';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/layouts/main/nav/mobile/nav-mobile-list.tsx

@@ -1,20 +1,14 @@
-import { useRef, useCallback } from 'react';
-import { useBoolean } from 'minimal-shared/hooks';
-import { varAlpha, isActiveLink, isExternalLink } from 'minimal-shared/utils';
-
 import Collapse from '@mui/material/Collapse';
-
-import { paths } from 'src/routes/paths';
-import { usePathname } from 'src/routes/hooks';
-
-import { CONFIG } from 'src/global-config';
-
+import { useBoolean } from 'minimal-shared/hooks';
+import { isActiveLink, isExternalLink, varAlpha } from 'minimal-shared/utils';
+import { useCallback, useRef } from 'react';
 import { navSectionClasses, NavSectionVertical } from 'src/components/nav-section';
-
+import { CONFIG } from 'src/global-config';
+import { usePathname } from 'src/routes/hooks';
+import { paths } from 'src/routes/paths';
 import { NavLi } from '../components';
-import { NavItem } from './nav-mobile-item';
-
 import type { NavListProps } from '../types';
+import { NavItem } from './nav-mobile-item';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/layouts/main/nav/mobile/nav-mobile.tsx

@@ -1,20 +1,15 @@
-import { useEffect } from 'react';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
-
-import { paths } from 'src/routes/paths';
-import { usePathname } from 'src/routes/hooks';
-
+import { useEffect } from 'react';
 import { Logo } from 'src/components/logo';
 import { Scrollbar } from 'src/components/scrollbar';
-
-import { Nav, NavUl } from '../components';
-import { NavList } from './nav-mobile-list';
+import { usePathname } from 'src/routes/hooks';
+import { paths } from 'src/routes/paths';
 import { SignInButton } from '../../../components/sign-in-button';
-
+import { Nav, NavUl } from '../components';
 import type { NavMainProps } from '../types';
+import { NavList } from './nav-mobile-list';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/layouts/main/nav/types.ts

@@ -1,5 +1,5 @@
-import type { Theme, SxProps } from '@mui/material/styles';
 import type { ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { SxProps, Theme } from '@mui/material/styles';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/layouts/nav-config-account.tsx

@@ -1,5 +1,4 @@
 import { Iconify } from 'src/components/iconify';
-
 import type { AccountDrawerProps } from './components/account-drawer';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/layouts/nav-config-dashboard.tsx

@@ -1,12 +1,9 @@
-import type { NavSectionProps } from 'src/components/nav-section';
-
-import { paths } from 'src/routes/paths';
-
-import { CONFIG } from 'src/global-config';
-
-import { Label } from 'src/components/label';
 import { Iconify } from 'src/components/iconify';
+import { Label } from 'src/components/label';
+import type { NavSectionProps } from 'src/components/nav-section';
 import { SvgColor } from 'src/components/svg-color';
+import { CONFIG } from 'src/global-config';
+import { paths } from 'src/routes/paths';
 
 // ----------------------------------------------------------------------
 
@@ -158,7 +155,7 @@ export const navData: NavSectionProps['data'] = [
           { title: 'Edit', path: paths.dashboard.tour.demo.edit },
         ],
       },
-      { title: 'File manager', path: paths.dashboard.fileManager, icon: ICONS.folder },
+      { title: 'File-manager', path: paths.dashboard.fileManager, icon: ICONS.folder },
       {
         title: 'Mail',
         path: paths.dashboard.mail,
@@ -263,7 +260,7 @@ export const navData: NavSectionProps['data'] = [
         icon: ICONS.parameter,
       },
       {
-        title: 'External link',
+        title: 'External-link',
         path: 'https://www.google.com/',
         icon: ICONS.external,
         info: <Iconify width={18} icon="eva:external-link-fill" />,

03_source/frontend/src/locales/all-langs.ts

@@ -1,25 +1,31 @@
 // core (MUI)
 import {
+  arSA as arSACore,
   frFR as frFRCore,
+  jaJP as jaJPCore,
   viVN as viVNCore,
   zhCN as zhCNCore,
-  arSA as arSACore,
+  zhHK as zhHKCore,
 } from '@mui/material/locale';
+// data grid (MUI)
+import {
+  arSD as arSDDataGrid,
+  enUS as enUSDataGrid,
+  frFR as frFRDataGrid,
+  jaJP as jaJPDataGrid,
+  viVN as viVNDataGrid,
+  zhCN as zhCNDataGrid,
+  zhHK as zhHKDataGrid,
+} from '@mui/x-data-grid/locales';
 // date pickers (MUI)
 import {
   enUS as enUSDate,
   frFR as frFRDate,
+  jaJP as jaJPDate,
   viVN as viVNDate,
   zhCN as zhCNDate,
+  zhHK as zhHKDate,
 } from '@mui/x-date-pickers/locales';
-// data grid (MUI)
-import {
-  enUS as enUSDataGrid,
-  frFR as frFRDataGrid,
-  viVN as viVNDataGrid,
-  zhCN as zhCNDataGrid,
-  arSD as arSDDataGrid,
-} from '@mui/x-data-grid/locales';
 
 // ----------------------------------------------------------------------
 
@@ -74,6 +80,33 @@ export const allLangs = [
       components: { ...arSACore.components, ...arSDDataGrid.components },
     },
   },
+  {
+    value: 'hk',
+    label: 'Hong Kong',
+    countryCode: 'HK',
+    adapterLocale: 'zh-hk',
+    numberFormat: {
+      code: 'zh-HK',
+      currency: 'HKD',
+    },
+    systemValue: {
+      components: {
+        ...zhHKCore.components,
+        ...zhHKDate,
+        ...zhHKDataGrid.components,
+      },
+    },
+  },
+  {
+    value: 'jp',
+    label: 'Japanese',
+    countryCode: 'JP',
+    adapterLocale: 'ja',
+    numberFormat: { code: 'ja-JP', currency: 'JPY' },
+    systemValue: {
+      components: { ...jaJPCore.components, ...jaJPDate.components, ...jaJPDataGrid.components },
+    },
+  },
 ];
 
 /**

03_source/frontend/src/locales/i18n-provider.tsx

@@ -1,10 +1,10 @@
 import i18next from 'i18next';
-import { getStorage } from 'minimal-shared/utils';
-import resourcesToBackend from 'i18next-resources-to-backend';
 import LanguageDetector from 'i18next-browser-languagedetector/cjs';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { getStorage } from 'minimal-shared/utils';
 import { initReactI18next, I18nextProvider as Provider } from 'react-i18next';
-
-import { i18nOptions, fallbackLng } from './locales-config';
+import { isDev } from 'src/constants';
+import { fallbackLng, i18nOptions } from './locales-config';
 
 // ----------------------------------------------------------------------
 
@@ -19,7 +19,11 @@ i18next
   .use(LanguageDetector)
   .use(initReactI18next)
   .use(resourcesToBackend((lang: string, ns: string) => import(`./langs/${lang}/${ns}.json`)))
-  .init({ ...i18nOptions(lng), detection: { caches: ['localStorage'] } });
+  .init({
+    ...i18nOptions(lng),
+    detection: { caches: ['localStorage'] },
+    debug: isDev,
+  });
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/locales/langs/cn/common.json

@@ -2,5 +2,6 @@
   "demo": {
     "lang": "Chinese",
     "description": "您的下一个项目的起点基于 MUI。简单的定制可帮助您更快、更好地构建应用程序。"
-  }
+  },
+  "new-product": "新產品"
 }

03_source/frontend/src/locales/langs/hk/common.json

@@ -0,0 +1,125 @@
+{
+  "demo": {
+    "lang": "中文",
+    "description": "您下一個項目的起點基於 MUI。簡單的定制可幫助您更快、更好地構建應用程序。"
+  },
+  "new-product": "新產品",
+  "back": "返回",
+  "App": "應用程式",
+  "Ecommerce": "電子商務",
+  "Analytics": "分析",
+  "Banking": "銀行",
+  "Booking": "預訂",
+  "File": "文件",
+  "Course": "課程",
+  "User": "用戶",
+  "Product": "產品",
+  "Order": "訂單",
+  "Invoice": "發票",
+  "Blog": "博客",
+  "Job": "工作",
+  "Tour": "旅遊",
+  "manager": "管理員",
+  "Mail": "郵件",
+  "Chat": "聊天",
+  "Calendar": "日曆",
+  "Kanban": "看板",
+  "Permission": "權限",
+  "Level": "級別",
+  "Disabled": "禁用",
+  "Label": "標籤",
+  "Caption": "標題",
+  "Params": "參數",
+  "link": "鏈接",
+  "Blank": "空白",
+  "File-manager": "文件管理器",
+  "External-link": "外部鏈接",
+  "Profile": "個人資料",
+  "Cards": "卡片",
+  "List": "列表",
+  "Create": "創建",
+  "Edit": "編輯",
+  "Account": "賬戶",
+  "Details": "詳情",
+  "Create-at": "創建於",
+  "Category": "分類",
+  "Stock": "庫存",
+  "Price": "價格",
+  "Publish": "發布",
+  "in stock": "有貨",
+  "low stock": "低庫存",
+  "out of stock": "缺貨",
+  "In stock": "有貨",
+  "Low stock": "低庫存",
+  "Out of stock": "缺貨",
+  "Published": "已發布",
+  "Draft": "草稿",
+  "published": "已發布",
+  "draft": "草稿",
+  "Dashboard": "儀表板",
+  "Apply": "應用",
+  "Name": "名稱",
+  "Phone number": "電話",
+  "Company": "公司",
+  "Role": "角色",
+  "Status": "狀態",
+  "New user": "新用戶",
+  "All": "全部",
+  "Active": "活躍",
+  "Pending": "等待",
+  "Banned": "已封鎖",
+  "Rejected": "已反對",
+  "Quick update": "快速更新",
+  "Address": "地址",
+  "Followers": "追隨者",
+  "Follower": "追隨者",
+  "Following": "正在追隨",
+  "Friends": "朋友圈",
+  "Gallery": "相集",
+  "About": "關於用戶",
+  "Social": "社交媒體",
+  "Post": "發帖",
+  "Image/Video": "相/視頻",
+  "Streaming": "直播",
+  "Delete": "清除",
+  "Cancel": "取消",
+  "Overview": "概覽",
+  "Management": "管理",
+  "Quick Edit": "簡易編輯",
+  "Choose a country": "選擇一個城市",
+  "Create user": "新用戶",
+  "State/region": "State/region",
+  "Misc": "雜項",
+  "Email verified": "電郵核實",
+  "Update photo": "上傳相片",
+  "Create a new user": "創建新用戶",
+  "Allowed": "Allowed",
+  "max size of": "max size of",
+  "Disabling this will automatically send the user a verification email": "Disabling this will automatically send the user a verification email",
+  "Full name": "Full name",
+  "Email address": "Email address",
+  "Country": "Country",
+  "City": "City",
+  "Zip/code": "Zip/code",
+  "Update success": "更新完成",
+  "Create success": "創建完成",
+  "Save changes": "儲存變更",
+  "Product List": "產品列表",
+  "View": "詳細資料",
+  "Completed": "已完成",
+  "Cancelled": "已取消",
+  "Refunded": "已退款",
+  "Date ": "日期",
+  "Order ": "訂單",
+  "Customer ": "客戶",
+  "Items ": "項目",
+  "Start date ": "開始日期",
+  "End date ": "結束日期",
+  "Search customer or order number... ": "搜尋客戶或訂單號碼...",
+  "Print ": "列印",
+  "Import ": "匯入",
+  "Export ": "匯出",
+  "Product not found!": "產品未找到！",
+  "Back to list": "返回列表",
+  "hello": "world"
+}

03_source/frontend/src/locales/langs/hk/navbar.json

@@ -0,0 +1,12 @@
+{
+  "app": "應用",
+  "job": "工作",
+  "user": "用戶",
+  "travel": "旅行",
+  "invoice": "發票",
+  "blog": {
+    "title": "部落格",
+    "caption": "自定義鍵盤快捷鍵。"
+  },
+  "subheader": "子標題"
+}

03_source/frontend/src/locales/langs/jp/common.json

@@ -0,0 +1,74 @@
+{
+  "demo": {
+    "lang": "日本語",
+    "description": "あなたの次のプロジェクトの起点はMUIに基づいています。簡単なカスタマイズで、より速く、より良いアプリケーションを構築することができます。"
+  },
+  "new-product": "新製品",
+  "back": "戻る",
+  "App": "アプリケーション",
+  "Ecommerce": "電子商取引",
+  "Analytics": "分析",
+  "Banking": "銀行",
+  "Booking": "予約",
+  "File": "ファイル",
+  "Course": "コース",
+  "User": "ユーザー",
+  "Product": "製品",
+  "Order": "注文",
+  "Invoice": "請求書",
+  "Blog": "ブログ",
+  "Job": "仕事",
+  "Tour": "ツアー",
+  "manager": "マネージャー",
+  "Mail": "メール",
+  "Chat": "チャット",
+  "Calendar": "カレンダー",
+  "Kanban": "かんばん",
+  "Permission": "権限",
+  "Level": "レベル",
+  "Disabled": "無効",
+  "Label": "ラベル",
+  "Caption": "キャプション",
+  "Params": "パラメーター",
+  "link": "リンク",
+  "Blank": "空白",
+  "File-manager": "ファイルマネージャー",
+  "External-link": "外部リンク",
+  "Profile": "プロフィール",
+  "Cards": "カード",
+  "List": "リスト",
+  "Create": "作成",
+  "Edit": "編集",
+  "Account": "アカウント",
+  "Details": "詳細",
+  "Create-at": "作成日",
+  "Category": "カテゴリー",
+  "Stock": "在庫",
+  "Price": "価格",
+  "Publish": "公開",
+  "in stock": "在庫あり",
+  "low stock": "在庫少",
+  "out of stock": "在庫なし",
+  "In stock": "在庫あり",
+  "Low stock": "在庫少",
+  "Out of stock": "在庫なし",
+  "Published": "公開済み",
+  "Draft": "下書き",
+  "published": "公開済み",
+  "draft": "下書き",
+  "Dashboard": "ダッシュボード",
+  "Apply": "適用",
+  "Name": "名前",
+  "Phone number": "電話番号",
+  "Company": "会社",
+  "Role": "役割",
+  "Status": "ステータス",
+  "New user": "新規ユーザー",
+  "All": "すべて",
+  "Active": "アクティブ",
+  "Pending": "保留中",
+  "Banned": "禁止",
+  "Rejected": "却下",
+  "Quick update": "クイックアップデート",
+  "hello": "world"
+}

03_source/frontend/src/locales/langs/jp/navbar.json

@@ -0,0 +1,12 @@
+{
+  "app": "アプリケーション",
+  "job": "仕事",
+  "user": "ユーザー",
+  "travel": "旅行",
+  "invoice": "請求書",
+  "blog": {
+    "title": "ブログ",
+    "caption": "カスタムキーボードショートカットを設定します。"
+  },
+  "subheader": "サブヘッダー"
+}

03_source/frontend/src/locales/locales-config.ts

@@ -1,7 +1,7 @@
 // ----------------------------------------------------------------------
 
 export const fallbackLng = 'en';
-export const languages = ['en', 'fr', 'vi', 'cn', 'ar'];
+export const languages = ['en', 'fr', 'vi', 'cn', 'ar', 'hk', 'jp'];
 export const defaultNS = 'common';
 
 export type LanguageValue = (typeof languages)[number];
@@ -51,4 +51,9 @@ export const changeLangMessages: Record<
     error: 'خطأ في تغيير اللغة!',
     loading: 'جارٍ التحميل...',
   },
+  hk: {
+    success: '語言已更改！',
+    error: '更改語言時出錯！',
+    loading: '加載中...',
+  },
 };

03_source/frontend/src/locales/localization-provider.tsx

@@ -3,12 +3,9 @@ import 'dayjs/locale/vi';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/ar-sa';
-
-import dayjs from 'dayjs';
-
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider as Provider } from '@mui/x-date-pickers/LocalizationProvider';
-
+import dayjs from 'dayjs';
 import { useTranslate } from './use-locales';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/locales/use-locales.ts

@@ -1,12 +1,9 @@
 import dayjs from 'dayjs';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { toast } from 'src/components/snackbar';
-
 import { allLangs } from './all-langs';
 import { fallbackLng, changeLangMessages as messages } from './locales-config';
-
 import type { LanguageValue } from './locales-config';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/main.tsx

@@ -1,10 +1,9 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Outlet, RouterProvider, createBrowserRouter } from 'react-router';
-
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router';
 import App from './app';
-import { routesSection } from './routes/sections';
 import { ErrorBoundary } from './routes/components';
+import { routesSection } from './routes/sections';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/pages/dashboard/product/list.tsx

@@ -1,5 +1,4 @@
 import { CONFIG } from 'src/global-config';
-
 import { ProductListView } from 'src/sections/product/view';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/pages/dashboard/user/edit.tsx

@@ -1,9 +1,8 @@
-import { useParams } from 'src/routes/hooks';
-
+// import { _userList } from 'src/_mock/_user';
 import { CONFIG } from 'src/global-config';
-import { _userList } from 'src/_mock/_user';
-
+import { useParams } from 'src/routes/hooks';
 import { UserEditView } from 'src/sections/user/view';
+import { useGetUser } from 'src/actions/user';
 
 // ----------------------------------------------------------------------
 
@@ -12,13 +11,15 @@ const metadata = { title: `User edit | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const currentUser = _userList.find((user) => user.id === id);
+  // TODO: remove me
+  // const currentUser = _userList.find((user) => user.id === id);
+  const { user } = useGetUser(id);
 
   return (
     <>
       <title>{metadata.title}</title>
 
-      <UserEditView user={currentUser} />
+      <UserEditView user={user} />
     </>
   );
 }

03_source/frontend/src/pages/dashboard/user/list.tsx

@@ -1,5 +1,4 @@
 import { CONFIG } from 'src/global-config';
-
 import { UserListView } from 'src/sections/user/view';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/pages/dashboard/user/profile.tsx

@@ -1,5 +1,4 @@
 import { CONFIG } from 'src/global-config';
-
 import { UserProfileView } from 'src/sections/user/view';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/sections/account/account-notifications.tsx

@@ -63,9 +63,7 @@ export function AccountNotifications({ sx, ...other }: CardProps) {
   });
 
   const getSelected = (selectedItems: string[], item: string) =>
-    selectedItems.includes(item)
-      ? selectedItems.filter((value) => value !== item)
-      : [...selectedItems, item];
+    selectedItems.includes(item) ? selectedItems.filter((value) => value !== item) : [...selectedItems, item];
 
   return (
     <Form methods={methods} onSubmit={onSubmit}>

03_source/frontend/src/sections/calendar/hooks/use-calendar.ts

@@ -1,7 +1,7 @@
 import type FullCalendar from '@fullcalendar/react';
 import type { EventResizeDoneArg } from '@fullcalendar/interaction/index.js';
-import type { EventDropArg, DateSelectArg, EventClickArg } from '@fullcalendar/core/index.js';
 import type { ICalendarView, ICalendarRange, ICalendarEvent } from 'src/types/calendar';
+import type { EventDropArg, DateSelectArg, EventClickArg } from '@fullcalendar/core/index.js';
 
 import { useRef, useState, useCallback } from 'react';
 

03_source/frontend/src/sections/calendar/view/calendar-view.tsx

@@ -2,13 +2,13 @@ import type { Theme, SxProps } from '@mui/material/styles';
 import type { ICalendarEvent, ICalendarFilters } from 'src/types/calendar';
 
 import Calendar from '@fullcalendar/react';
+import { useEffect, startTransition } from 'react';
 import listPlugin from '@fullcalendar/list/index.js';
 import dayGridPlugin from '@fullcalendar/daygrid/index.js';
-import { useEffect, startTransition } from 'react';
 import timeGridPlugin from '@fullcalendar/timegrid/index.js';
 import timelinePlugin from '@fullcalendar/timeline/index.js';
-import interactionPlugin from '@fullcalendar/interaction/index.js';
 import { useBoolean, useSetState } from 'minimal-shared/hooks';
+import interactionPlugin from '@fullcalendar/interaction/index.js';
 
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';

03_source/frontend/src/sections/invoice/view/invoice-list-view.tsx

@@ -49,23 +49,15 @@ import { InvoiceAnalytic } from '../invoice-analytic';
 import { InvoiceTableRow } from '../invoice-table-row';
 import { InvoiceTableToolbar } from '../invoice-table-toolbar';
 import { InvoiceTableFiltersResult } from '../invoice-table-filters-result';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
-const TABLE_HEAD: TableHeadCellProps[] = [
-  { id: 'invoiceNumber', label: 'Customer' },
-  { id: 'createDate', label: 'Create' },
-  { id: 'dueDate', label: 'Due' },
-  { id: 'price', label: 'Amount' },
-  { id: 'sent', label: 'Sent', align: 'center' },
-  { id: 'status', label: 'Status' },
-  { id: '' },
-];
-
 // ----------------------------------------------------------------------
 
 export function InvoiceListView() {
   const theme = useTheme();
+  const { t } = useTranslation();
 
   const table = useTable({ defaultOrderBy: 'createDate' });
 
@@ -73,6 +65,16 @@ export function InvoiceListView() {
 
   const [tableData, setTableData] = useState<IInvoice[]>(_invoices);
 
+  const TABLE_HEAD: TableHeadCellProps[] = [
+    { id: 'invoiceNumber', label: t('Customer') },
+    { id: 'createDate', label: t('Create') },
+    { id: 'dueDate', label: t('Due') },
+    { id: 'price', label: t('Amount') },
+    { id: 'sent', label: t('Sent'), align: 'center' },
+    { id: 'status', label: t('Status') },
+    { id: '' },
+  ];
+
   const filters = useSetState<IInvoiceTableFilters>({
     name: '',
     service: [],

03_source/frontend/src/sections/order/order-table-row.tsx

@@ -1,3 +1,4 @@
+// src/sections/order/view/order-list-view.tsx
 import type { IOrderItem } from 'src/types/order';
 
 import { useBoolean, usePopover } from 'minimal-shared/hooks';
@@ -26,6 +27,7 @@ import { Label } from 'src/components/label';
 import { Iconify } from 'src/components/iconify';
 import { ConfirmDialog } from 'src/components/custom-dialog';
 import { CustomPopover } from 'src/components/custom-popover';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -41,6 +43,7 @@ export function OrderTableRow({ row, selected, onSelectRow, onDeleteRow, details
   const confirmDialog = useBoolean();
   const menuActions = usePopover();
   const collapseRow = useBoolean();
+  const { t } = useTranslation();
 
   const renderPrimaryRow = () => (
     <TableRow hover selected={selected}>
@@ -195,13 +198,13 @@ export function OrderTableRow({ row, selected, onSelectRow, onDeleteRow, details
           sx={{ color: 'error.main' }}
         >
           <Iconify icon="solar:trash-bin-trash-bold" />
-          Delete
+          {t('Delete')}
         </MenuItem>
 
         <li>
           <MenuItem component={RouterLink} href={detailsHref} onClick={() => menuActions.onClose()}>
             <Iconify icon="solar:eye-bold" />
-            View
+            {t('View')}
           </MenuItem>
         </li>
       </MenuList>

03_source/frontend/src/sections/order/order-table-toolbar.tsx

@@ -16,6 +16,7 @@ import { formHelperTextClasses } from '@mui/material/FormHelperText';
 
 import { Iconify } from 'src/components/iconify';
 import { CustomPopover } from 'src/components/custom-popover';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export function OrderTableToolbar({ filters, onResetPage, dateError }: Props) {
+  const { t } = useTranslation();
   const menuActions = usePopover();
 
   const { state: currentFilters, setState: updateFilters } = filters;
@@ -64,17 +66,17 @@ export function OrderTableToolbar({ filters, onResetPage, dateError }: Props) {
       <MenuList>
         <MenuItem onClick={() => menuActions.onClose()}>
           <Iconify icon="solar:printer-minimalistic-bold" />
-          Print
+          {t('Print')}
         </MenuItem>
 
         <MenuItem onClick={() => menuActions.onClose()}>
           <Iconify icon="solar:import-bold" />
-          Import
+          {t('Import')}
         </MenuItem>
 
         <MenuItem onClick={() => menuActions.onClose()}>
           <Iconify icon="solar:export-bold" />
-          Export
+          {t('Export')}
         </MenuItem>
       </MenuList>
     </CustomPopover>
@@ -93,7 +95,7 @@ export function OrderTableToolbar({ filters, onResetPage, dateError }: Props) {
         }}
       >
         <DatePicker
-          label="Start date"
+          label={t('Start date')}
           value={currentFilters.startDate}
           onChange={handleFilterStartDate}
           slotProps={{ textField: { fullWidth: true } }}
@@ -101,7 +103,7 @@ export function OrderTableToolbar({ filters, onResetPage, dateError }: Props) {
         />
 
         <DatePicker
-          label="End date"
+          label={t('End date')}
           value={currentFilters.endDate}
           onChange={handleFilterEndDate}
           slotProps={{
@@ -133,7 +135,7 @@ export function OrderTableToolbar({ filters, onResetPage, dateError }: Props) {
             fullWidth
             value={currentFilters.name}
             onChange={handleFilterName}
-            placeholder="Search customer or order number..."
+            placeholder={t('Search customer or order number...')}
             slotProps={{
               input: {
                 startAdornment: (

03_source/frontend/src/sections/order/view/order-list-view.tsx

@@ -1,3 +1,5 @@
+// src/sections/order/view/order-list-view.tsx
+
 import type { TableHeadCellProps } from 'src/components/table';
 import type { IOrderItem, IOrderTableFilters } from 'src/types/order';
 
@@ -43,30 +45,33 @@ import {
 import { OrderTableRow } from '../order-table-row';
 import { OrderTableToolbar } from '../order-table-toolbar';
 import { OrderTableFiltersResult } from '../order-table-filters-result';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
 const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...ORDER_STATUS_OPTIONS];
 
-const TABLE_HEAD: TableHeadCellProps[] = [
-  { id: 'orderNumber', label: 'Order', width: 88 },
-  { id: 'name', label: 'Customer' },
-  { id: 'createdAt', label: 'Date', width: 140 },
-  { id: 'totalQuantity', label: 'Items', width: 120, align: 'center' },
-  { id: 'totalAmount', label: 'Price', width: 140 },
-  { id: 'status', label: 'Status', width: 110 },
-  { id: '', width: 88 },
-];
-
 // ----------------------------------------------------------------------
 
 export function OrderListView() {
+  const { t } = useTranslation();
+
   const table = useTable({ defaultOrderBy: 'orderNumber' });
 
   const confirmDialog = useBoolean();
 
   const [tableData, setTableData] = useState<IOrderItem[]>(_orders);
 
+  const TABLE_HEAD: TableHeadCellProps[] = [
+    { id: 'orderNumber', label: t('Order'), width: 88 },
+    { id: 'name', label: t('Customer') },
+    { id: 'createdAt', label: t('Date'), width: 140 },
+    { id: 'totalQuantity', label: t('Items'), width: 120, align: 'center' },
+    { id: 'totalAmount', label: t('Price'), width: 140 },
+    { id: 'status', label: t('Status'), width: 110 },
+    { id: '', width: 88 },
+  ];
+
   const filters = useSetState<IOrderTableFilters>({
     name: '',
     status: 'all',
@@ -143,7 +148,7 @@ export function OrderListView() {
             confirmDialog.onFalse();
           }}
         >
-          Delete
+          {t('Delete')}
         </Button>
       }
     />
@@ -155,9 +160,9 @@ export function OrderListView() {
         <CustomBreadcrumbs
           heading="List"
           links={[
-            { name: 'Dashboard', href: paths.dashboard.root },
-            { name: 'Order', href: paths.dashboard.order.root },
-            { name: 'List' },
+            { name: t('Dashboard'), href: paths.dashboard.root },
+            { name: t('Order'), href: paths.dashboard.order.root },
+            { name: t('List') },
           ]}
           sx={{ mb: { xs: 3, md: 5 } }}
         />
@@ -178,7 +183,7 @@ export function OrderListView() {
                 key={tab.value}
                 iconPosition="end"
                 value={tab.value}
-                label={tab.label}
+                label={t(tab.label)}
                 icon={
                   <Label
                     variant={
@@ -228,7 +233,7 @@ export function OrderListView() {
                 )
               }
               action={
-                <Tooltip title="Delete">
+                <Tooltip title={t('Delete')}>
                   <IconButton color="primary" onClick={confirmDialog.onTrue}>
                     <Iconify icon="solar:trash-bin-trash-bold" />
                   </IconButton>

03_source/frontend/src/sections/product/product-details-toolbar.tsx

@@ -1,18 +1,15 @@
 import type { BoxProps } from '@mui/material/Box';
-
-import { usePopover } from 'minimal-shared/hooks';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
 import IconButton from '@mui/material/IconButton';
-
-import { RouterLink } from 'src/routes/components';
-
-import { Iconify } from 'src/components/iconify';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Tooltip from '@mui/material/Tooltip';
+import { usePopover } from 'minimal-shared/hooks';
+import { useTranslation } from 'react-i18next';
 import { CustomPopover } from 'src/components/custom-popover';
+import { Iconify } from 'src/components/iconify';
+import { RouterLink } from 'src/routes/components';
 
 // ----------------------------------------------------------------------
 
@@ -36,6 +33,7 @@ export function ProductDetailsToolbar({
   ...other
 }: Props) {
   const menuActions = usePopover();
+  const { t } = useTranslation();
 
   const renderMenuActions = () => (
     <CustomPopover
@@ -77,7 +75,7 @@ export function ProductDetailsToolbar({
           href={backHref}
           startIcon={<Iconify icon="eva:arrow-ios-back-fill" width={16} />}
         >
-          Back
+          {t('back')}
         </Button>
 
         <Box sx={{ flexGrow: 1 }} />

03_source/frontend/src/sections/product/product-new-edit-form.tsx

@@ -1,64 +1,91 @@
-import type { IProductItem } from 'src/types/product';
-
-import { z as zod } from 'zod';
-import { useForm } from 'react-hook-form';
-import { useState, useCallback } from 'react';
-import { useBoolean } from 'minimal-shared/hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
-
 import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
+import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import Chip from '@mui/material/Chip';
+import Collapse from '@mui/material/Collapse';
+import Divider from '@mui/material/Divider';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
 import Stack from '@mui/material/Stack';
 import Switch from '@mui/material/Switch';
-import Button from '@mui/material/Button';
-import Divider from '@mui/material/Divider';
-import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
-import CardHeader from '@mui/material/CardHeader';
 import Typography from '@mui/material/Typography';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-
+import { useBoolean } from 'minimal-shared/hooks';
+import { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import {
-  _tags,
-  PRODUCT_SIZE_OPTIONS,
-  PRODUCT_GENDER_OPTIONS,
-  PRODUCT_COLOR_NAME_OPTIONS,
   PRODUCT_CATEGORY_GROUP_OPTIONS,
+  PRODUCT_COLOR_NAME_OPTIONS,
+  PRODUCT_SIZE_OPTIONS,
 } from 'src/_mock';
-
-import { toast } from 'src/components/snackbar';
+import { createProduct, saveProduct } from 'src/actions/product';
+import { Field, Form, schemaHelper } from 'src/components/hook-form';
 import { Iconify } from 'src/components/iconify';
-import { Form, Field, schemaHelper } from 'src/components/hook-form';
+import { toast } from 'src/components/snackbar';
+import { useRouter } from 'src/routes/hooks';
+import { paths } from 'src/routes/paths';
+import type { IProductItem } from 'src/types/product';
+import { fileToBase64 } from 'src/utils/file-to-base64';
+import { z as zod } from 'zod';
 
 // ----------------------------------------------------------------------
+const PRODUCT_PUBLISH_OPTIONS = [
+  { value: 'published', label: 'Published' },
+  { value: 'draft', label: 'Draft' },
+];
+
+const PRODUCT_COLOR_OPTIONS = [
+  '#FF4842',
+  '#1890FF',
+  '#FFC0CB',
+  '#00AB55',
+  '#FFC107',
+  '#7F00FF',
+  '#000000',
+  '#FFFFFF',
+];
+
+const _tags = [
+  `Technology`,
+  `Health and Wellness`,
+  `Travel`,
+  `Finance`,
+  `Education`,
+  `Food and Beverage`,
+  `Fashion`,
+  `Home and Garden`,
+  `Sports`,
+  `Entertainment`,
+  `Business`,
+  `Science`,
+  `Automotive`,
+  `Beauty`,
+  `Fitness`,
+  `Lifestyle`,
+  `Real Estate`,
+  `Parenting`,
+  `Pet Care`,
+  `Environmental`,
+  `DIY and Crafts`,
+  `Gaming`,
+  `Photography`,
+  `Music`,
+];
+
+const PRODUCT_GENDER_OPTIONS = [
+  { label: 'Men', value: 'Men' },
+  { label: 'Women', value: 'Women' },
+  { label: 'Kids', value: 'Kids' },
+];
 
 export type NewProductSchemaType = zod.infer<typeof NewProductSchema>;
 
 export const NewProductSchema = zod.object({
-  name: zod.string().min(1, { message: 'Name is required!' }),
-  description: schemaHelper
-    .editor({ message: 'Description is required!' })
-    .min(100, { message: 'Description must be at least 100 characters' })
-    .max(500, { message: 'Description must be less than 500 characters' }),
-  images: schemaHelper.files({ message: 'Images is required!' }),
-  code: zod.string().min(1, { message: 'Product code is required!' }),
   sku: zod.string().min(1, { message: 'Product sku is required!' }),
-  quantity: schemaHelper.nullableInput(
-    zod.number({ coerce: true }).min(1, { message: 'Quantity is required!' }),
-    {
-      // message for null value
-      message: 'Quantity is required!',
-    }
-  ),
-  colors: zod.string().array().min(1, { message: 'Choose at least one option!' }),
-  sizes: zod.string().array().min(1, { message: 'Choose at least one option!' }),
-  tags: zod.string().array().min(2, { message: 'Must have at least 2 items!' }),
-  gender: zod.array(zod.string()).min(1, { message: 'Choose at least one option!' }),
+  name: zod.string().min(1, { message: 'Name is required!' }),
+  code: zod.string().min(1, { message: 'Product code is required!' }),
   price: schemaHelper.nullableInput(
     zod.number({ coerce: true }).min(1, { message: 'Price is required!' }),
     {
@@ -66,13 +93,35 @@ export const NewProductSchema = zod.object({
       message: 'Price is required!',
     }
   ),
-  // Not required
-  category: zod.string(),
-  subDescription: zod.string(),
   taxes: zod.number({ coerce: true }).nullable(),
+  tags: zod.string().array().min(2, { message: 'Must have at least 2 items!' }),
+  sizes: zod.string().array().min(1, { message: 'Choose at least one option!' }),
+  publish: zod.string(),
+  gender: zod.array(zod.string()).min(1, { message: 'Choose at least one option!' }),
+  coverUrl: zod.string(),
+  images: schemaHelper.files({ message: 'Images is required!' }),
+  colors: zod.string().array().min(1, { message: 'Choose at least one option!' }),
+  quantity: schemaHelper.nullableInput(
+    zod.number({ coerce: true }).min(1, { message: 'Quantity is required!' }),
+    {
+      // message for null value
+      message: 'Quantity is required!',
+    }
+  ),
+  category: zod.string(),
+  available: zod.number(),
+  totalSold: zod.number(),
+  description: schemaHelper
+    .editor({ message: 'Description is required!' })
+    .min(10, { message: 'Description must be at least 10 characters' })
+    .max(50000, { message: 'Description must be less than 50000 characters' }),
+  totalRatings: zod.number(),
+  totalReviews: zod.number(),
+  inventoryType: zod.string(),
+  subDescription: zod.string(),
   priceSale: zod.number({ coerce: true }).nullable(),
-  saleLabel: zod.object({ enabled: zod.boolean(), content: zod.string() }),
   newLabel: zod.object({ enabled: zod.boolean(), content: zod.string() }),
+  saleLabel: zod.object({ enabled: zod.boolean(), content: zod.string() }),
 });
 
 // ----------------------------------------------------------------------
@@ -91,22 +140,32 @@ export function ProductNewEditForm({ currentProduct }: Props) {
   const [includeTaxes, setIncludeTaxes] = useState(false);
 
   const defaultValues: NewProductSchemaType = {
-    name: '',
-    description: '',
-    subDescription: '',
+    sku: '321',
+    name: 'hello product',
+    code: '123',
+    price: 1.1,
+    taxes: 1.1,
+    tags: [_tags[0], _tags[1]],
+    sizes: ['9'],
+    publish: PRODUCT_PUBLISH_OPTIONS[0].value,
+    gender: [
+      PRODUCT_GENDER_OPTIONS[0].value,
+      PRODUCT_GENDER_OPTIONS[1].value,
+      PRODUCT_GENDER_OPTIONS[2].value,
+    ],
+    coverUrl: '',
     images: [],
-    /********/
-    code: '',
-    sku: '',
-    price: null,
-    taxes: null,
-    priceSale: null,
-    quantity: null,
-    tags: [],
-    gender: [],
+    colors: [PRODUCT_COLOR_OPTIONS[0], PRODUCT_COLOR_OPTIONS[1]],
+    quantity: 3,
     category: PRODUCT_CATEGORY_GROUP_OPTIONS[0].classify[1],
-    colors: [],
-    sizes: [],
+    available: 0,
+    totalSold: 0,
+    description: 'hello description',
+    totalRatings: 0,
+    totalReviews: 0,
+    inventoryType: '',
+    subDescription: '',
+    priceSale: 0.9,
     newLabel: { enabled: false, content: '' },
     saleLabel: { enabled: false, content: '' },
   };
@@ -122,7 +181,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
     watch,
     setValue,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = methods;
 
   const values = watch();
@@ -136,9 +195,28 @@ export function ProductNewEditForm({ currentProduct }: Props) {
     try {
       await new Promise((resolve) => setTimeout(resolve, 500));
       reset();
+
+      // sanitize file field
+      for (let i = 0; i < values.images.length; i++) {
+        const temp: any = values.images[i];
+        if (temp instanceof File) {
+          values.images[i] = await fileToBase64(temp);
+        }
+      }
+
+      if (currentProduct) {
+        // perform save
+        await saveProduct(currentProduct.id, values);
+      } else {
+        // perform create
+        await createProduct(values);
+      }
+
       toast.success(currentProduct ? 'Update success!' : 'Create success!');
+
       router.push(paths.dashboard.product.root);
-      console.info('DATA', updatedData);
+
+      // console.info('DATA', updatedData);
     } catch (error) {
       console.error(error);
     }
@@ -166,6 +244,16 @@ export function ProductNewEditForm({ currentProduct }: Props) {
     </IconButton>
   );
 
+  function handleProductImageUpload() {
+    console.log(values);
+  }
+
+  const [disableUserInput, setDisableUserInput] = useState<boolean>(false);
+
+  useEffect(() => {
+    setDisableUserInput(isSubmitting);
+  }, [isSubmitting]);
+
   const renderDetails = () => (
     <Card>
       <CardHeader
@@ -179,9 +267,15 @@ export function ProductNewEditForm({ currentProduct }: Props) {
         <Divider />
 
         <Stack spacing={3} sx={{ p: 3 }}>
-          <Field.Text name="name" label="Product name" />
+          <Field.Text disabled={disableUserInput} name="name" label="產品名稱 / Product name" />
 
-          <Field.Text name="subDescription" label="Sub description" multiline rows={4} />
+          <Field.Text
+            disabled={disableUserInput}
+            name="subDescription"
+            label="Sub description"
+            multiline
+            rows={4}
+          />
 
           <Stack spacing={1.5}>
             <Typography variant="subtitle2">Content</Typography>
@@ -197,7 +291,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
               maxSize={3145728}
               onRemove={handleRemoveFile}
               onRemoveAll={handleRemoveAllFiles}
-              onUpload={() => console.info('ON UPLOAD')}
+              onUpload={handleProductImageUpload}
             />
           </Stack>
         </Stack>
@@ -226,11 +320,12 @@ export function ProductNewEditForm({ currentProduct }: Props) {
               gridTemplateColumns: { xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' },
             }}
           >
-            <Field.Text name="code" label="Product code" />
+            <Field.Text disabled={disableUserInput} name="code" label="Product code" />
 
-            <Field.Text name="sku" label="Product SKU" />
+            <Field.Text disabled={disableUserInput} name="sku" label="Product SKU" />
 
             <Field.Text
+              disabled={disableUserInput}
               name="quantity"
               label="Quantity"
               placeholder="0"
@@ -239,6 +334,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
             />
 
             <Field.Select
+              disabled={disableUserInput}
               name="category"
               label="Category"
               slotProps={{
@@ -268,6 +364,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
           </Box>
 
           <Field.Autocomplete
+            disabled={disableUserInput}
             name="tags"
             label="Tags"
             placeholder="+ Tags"
@@ -345,6 +442,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
 
         <Stack spacing={3} sx={{ p: 3 }}>
           <Field.Text
+            disabled={disableUserInput}
             name="price"
             label="Regular price"
             placeholder="0.00"
@@ -364,6 +462,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
           />
 
           <Field.Text
+            disabled={disableUserInput}
             name="priceSale"
             label="Sale price"
             placeholder="0.00"
@@ -385,6 +484,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
           <FormControlLabel
             control={
               <Switch
+                disabled={disableUserInput}
                 id="toggle-taxes"
                 checked={includeTaxes}
                 onChange={handleChangeIncludeTaxes}
@@ -395,6 +495,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
 
           {!includeTaxes && (
             <Field.Text
+              disabled={disableUserInput}
               name="taxes"
               label="Tax (%)"
               placeholder="0.00"
@@ -427,9 +528,16 @@ export function ProductNewEditForm({ currentProduct }: Props) {
         alignItems: 'center',
       }}
     >
+      <div>{JSON.stringify({ errors })}</div>
       <FormControlLabel
         label="Publish"
-        control={<Switch defaultChecked slotProps={{ input: { id: 'publish-switch' } }} />}
+        control={
+          <Switch
+            disabled={disableUserInput}
+            defaultChecked
+            slotProps={{ input: { id: 'publish-switch' } }}
+          />
+        }
         sx={{ pl: 3, flexGrow: 1 }}
       />