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",
@@ -45,6 +46,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 +58,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

@@ -860,6 +860,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,7 @@ 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 { Blog } from './seeds/blog';
 // import { Mail } from './seeds/mail';
@@ -34,6 +35,7 @@ import { ProductItem } from './seeds/productItem';
   await superuserSeed;
   await userSeed;
   await ProductReview;
+  await FileStore;
   await ProductItem;
   // await Blog;
   // await Mail;

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/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();
+    // NOTE: productId confirmed exist, run below
-
+    const product = await prisma.productItem.findFirst({
-    const product = products.find((productItem) => productItem.id === productId);
+      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/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

@@ -780,6 +780,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 +2433,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/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/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/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",

03_source/frontend/prettier.config.mjs

@@ -10,6 +10,7 @@ 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 axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
-import { fetcher, endpoints } 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/app.tsx

@@ -1,26 +1,20 @@
 import 'src/global.css';
-
 import { useEffect } from 'react';
-
+import { AuthProvider as AmplifyAuthProvider } from 'src/auth/context/amplify';
-import { usePathname } from 'src/routes/hooks';
+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 { usePathname } from 'src/routes/hooks';
-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 { CheckoutProvider } from 'src/sections/checkout/context';
-
+import { themeConfig, ThemeProvider } from 'src/theme';
-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';
 
 // ----------------------------------------------------------------------
 

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 = () => (
+  const TestImg = () => (
-    <ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
+    <>
-      {format === 'image' && imageView ? (
+      {!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 { Upload } from '../upload';
-import Box from '@mui/material/Box';
-
-import { HelperText } from './help-text';
-import { Upload, UploadBox, UploadAvatar } 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/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 { NavCollapse, NavLi, NavUl } from '../components';
-import { NavItem } from './nav-item';
 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,11 @@
-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 { useBoolean } from 'minimal-shared/hooks';
-import { NavList } from './nav-list';
+import { mergeClasses } from 'minimal-shared/utils';
-import { Nav, NavUl, NavLi, NavSubheader } from '../components';
+import { Nav, NavLi, NavSubheader, NavUl } from '../components';
 import { navSectionClasses, navSectionCssVars } from '../styles';
-
 import type { NavGroupProps, NavSectionProps } from '../types';
+import { NavList } from './nav-list';
 
 // ----------------------------------------------------------------------
 
@@ -90,7 +87,6 @@ function Group({
           >
             {subheader}
           </NavSubheader>
-
           <Collapse in={groupOpen.value}>{renderContent()}</Collapse>
         </>
       ) : (

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/dm-sans'; */
-@import '@fontsource-variable/inter';
+/* @import '@fontsource-variable/inter'; */
-@import '@fontsource-variable/nunito-sans';
+/* @import '@fontsource-variable/nunito-sans'; */
 
 /** **************************************
 * Plugins

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 { Logo } from 'src/components/logo';
-import { NavMobile } from './nav-mobile';
+import type { NavItemProps, NavSectionProps } from 'src/components/nav-section';
-import { VerticalDivider } from './content';
+import { useSettingsContext } from 'src/components/settings';
-import { NavVertical } from './nav-vertical';
+import { allLangs } from 'src/locales';
-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 { 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 { LanguagePopover } from '../components/language-popover';
-import { navData as dashboardNavData } from '../nav-config-dashboard';
+import { MenuButton } from '../components/menu-button';
-import { dashboardLayoutVars, dashboardNavColorVars } from './css-vars';
 import { NotificationsDrawer } from '../components/notifications-drawer';
-
+import { Searchbar } from '../components/searchbar';
-import type { MainSectionProps } from '../core/main-section';
+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';
 
 // ----------------------------------------------------------------------
 

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 { Scrollbar } from 'src/components/scrollbar';
-import { layoutClasses } from '../core/classes';
-import { NavUpgrade } from '../components/nav-upgrade';
 import { NavToggleButton } from '../components/nav-toggle-button';
+import { NavUpgrade } from '../components/nav-upgrade';
+import { layoutClasses } from '../core/classes';
 
 // ----------------------------------------------------------------------
 

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,28 @@
 // core (MUI)
 import {
+  arSA as arSACore,
   frFR as frFRCore,
   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,
+  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,
   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 +77,23 @@ 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,
+      },
+    },
+  },
 ];
 
 /**

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 { isDev } from 'src/constants';
-import { i18nOptions, fallbackLng } from './locales-config';
+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,62 @@
+{
+  "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": "應用",
+  "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/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'];
 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/edit.tsx

@@ -13,6 +13,7 @@ export default function Page() {
   const { id = '' } = useParams();
 
   const { product } = useGetProduct(id);
+  console.log({ id });
 
   return (
     <>

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/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/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 MenuItem from '@mui/material/MenuItem';
-import { RouterLink } from 'src/routes/components';
+import MenuList from '@mui/material/MenuList';
-
+import Tooltip from '@mui/material/Tooltip';
-import { Iconify } from 'src/components/iconify';
+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 { useBoolean } from 'minimal-shared/hooks';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import { useCallback, useEffect, useState } from 'react';
-
+import { useForm } from 'react-hook-form';
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-
 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 { createProduct, saveProduct } from 'src/actions/product';
-import { toast } from 'src/components/snackbar';
+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(
+  name: zod.string().min(1, { message: 'Name is required!' }),
-    zod.number({ coerce: true }).min(1, { message: 'Quantity is required!' }),
+  code: zod.string().min(1, { message: 'Product code 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!' }),
   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: '',
+    sku: '321',
-    description: '',
+    name: 'hello product',
-    subDescription: '',
+    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: [],
-    /********/
+    colors: [PRODUCT_COLOR_OPTIONS[0], PRODUCT_COLOR_OPTIONS[1]],
-    code: '',
+    quantity: 3,
-    sku: '',
-    price: null,
-    taxes: null,
-    priceSale: null,
-    quantity: null,
-    tags: [],
-    gender: [],
     category: PRODUCT_CATEGORY_GROUP_OPTIONS[0].classify[1],
-    colors: [],
+    available: 0,
-    sizes: [],
+    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);
+      // router.push(paths.dashboard.product.root);
+      // 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 }}
       />
 

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

@@ -43,6 +43,8 @@ export function RenderCellCreatedAt({ params }: ParamsProps) {
 }
 
 export function RenderCellStock({ params }: ParamsProps) {
+  return <>helloworld</>
+
   return (
     <Box sx={{ width: 1, typography: 'caption', color: 'text.secondary' }}>
       <LinearProgress

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

@@ -1,21 +1,19 @@
-import type { IProductTableFilters } from 'src/types/product';
-import type { SelectChangeEvent } from '@mui/material/Select';
-import type { UseSetStateReturn } from 'minimal-shared/hooks';
-
-import { useState, useCallback } from 'react';
-import { varAlpha } from 'minimal-shared/utils';
-import { usePopover } from 'minimal-shared/hooks';
-
-import Select from '@mui/material/Select';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
 import Checkbox from '@mui/material/Checkbox';
-import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
 import OutlinedInput from '@mui/material/OutlinedInput';
-
+import type { SelectChangeEvent } from '@mui/material/Select';
-import { Iconify } from 'src/components/iconify';
+import Select from '@mui/material/Select';
+import type { UseSetStateReturn } from 'minimal-shared/hooks';
+import { usePopover } from 'minimal-shared/hooks';
+import { varAlpha } from 'minimal-shared/utils';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CustomPopover } from 'src/components/custom-popover';
+import { Iconify } from 'src/components/iconify';
+import type { IProductTableFilters } from 'src/types/product';
 
 // ----------------------------------------------------------------------
 
@@ -59,6 +57,8 @@ export function ProductTableToolbar({ filters, options }: Props) {
     updateFilters({ publish });
   }, [publish, updateFilters]);
 
+  const { t } = useTranslation();
+
   const renderMenuActions = () => (
     <CustomPopover
       open={menuActions.open}
@@ -88,14 +88,21 @@ export function ProductTableToolbar({ filters, options }: Props) {
   return (
     <>
       <FormControl sx={{ flexShrink: 0, width: { xs: 1, md: 200 } }}>
-        <InputLabel htmlFor="filter-stock-select">Stock</InputLabel>
+        <InputLabel htmlFor="filter-stock-select">{t('Stock')}</InputLabel>
         <Select
           multiple
           value={stock}
           onChange={handleChangeStock}
           onClose={handleFilterStock}
           input={<OutlinedInput label="Stock" />}
-          renderValue={(selected) => selected.map((value) => value).join(', ')}
+          renderValue={(selected) => {
+            return selected
+              .map((value) => {
+                console.log(t(value));
+                return t(value);
+              })
+              .join(', ');
+          }}
           inputProps={{ id: 'filter-stock-select' }}
           sx={{ textTransform: 'capitalize' }}
         >
@@ -126,20 +133,20 @@ export function ProductTableToolbar({ filters, options }: Props) {
               }),
             ]}
           >
-            Apply
+            {t('Apply')}
           </MenuItem>
         </Select>
       </FormControl>
 
       <FormControl sx={{ flexShrink: 0, width: { xs: 1, md: 200 } }}>
-        <InputLabel htmlFor="filter-publish-select">Publish</InputLabel>
+        <InputLabel htmlFor="filter-publish-select">{t('Publish')}</InputLabel>
         <Select
           multiple
           value={publish}
           onChange={handleChangePublish}
           onClose={handleFilterPublish}
-          input={<OutlinedInput label="Publish" />}
+          input={<OutlinedInput label={t('Publish')} />}
-          renderValue={(selected) => selected.map((value) => value).join(', ')}
+          renderValue={(selected) => selected.map((value) => t(value)).join(', ')}
           inputProps={{ id: 'filter-publish-select' }}
           sx={{ textTransform: 'capitalize' }}
         >
@@ -173,7 +180,7 @@ export function ProductTableToolbar({ filters, options }: Props) {
               }),
             ]}
           >
-            Apply
+            {t('Apply')}
           </MenuItem>
         </Select>
       </FormControl>

03_source/frontend/src/sections/product/view/confirm-delete-product-dialog.tsx

@@ -0,0 +1,39 @@
+import { useBoolean } from 'minimal-shared/hooks';
+
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+
+// ----------------------------------------------------------------------
+
+export function ConfirmDeleteProductDialog() {
+  const openDialog = useBoolean();
+
+  return (
+    <>
+      <Button color="info" variant="outlined" onClick={openDialog.onTrue}>
+        Open alert dialog
+      </Button>
+
+      <Dialog open onClose={openDialog.onFalse}>
+        <DialogTitle>Are you sure delete product ?</DialogTitle>
+
+        <DialogContent sx={{ color: 'text.secondary' }}>
+          Are you sure delete product ?
+        </DialogContent>
+
+        <DialogActions>
+          <Button variant="outlined" onClick={openDialog.onFalse}>
+            Cancel
+          </Button>
+
+          <Button loading variant="contained" onClick={openDialog.onFalse} autoFocus>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

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

@@ -1,32 +1,27 @@
-import type { IProductItem } from 'src/types/product';
-
-import { useTabs } from 'minimal-shared/hooks';
-import { varAlpha } from 'minimal-shared/utils';
-import { useState, useEffect, useCallback } from 'react';
-
-import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
+import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import Typography from '@mui/material/Typography';
-
+import { useTabs } from 'minimal-shared/hooks';
-import { paths } from 'src/routes/paths';
+import { varAlpha } from 'minimal-shared/utils';
-import { RouterLink } from 'src/routes/components';
+import { useCallback, useEffect, useState } from 'react';
-
+import { useTranslation } from 'react-i18next';
-import { PRODUCT_PUBLISH_OPTIONS } from 'src/_mock';
+// import { PRODUCT_PUBLISH_OPTIONS } from 'src/_mock';
-import { DashboardContent } from 'src/layouts/dashboard';
-
-import { Iconify } from 'src/components/iconify';
 import { EmptyContent } from 'src/components/empty-content';
-
+import { Iconify } from 'src/components/iconify';
-import { ProductDetailsSkeleton } from '../product-skeleton';
+import { DashboardContent } from 'src/layouts/dashboard';
+import { RouterLink } from 'src/routes/components';
+import { paths } from 'src/routes/paths';
+import type { IProductItem } from 'src/types/product';
+import { ProductDetailsCarousel } from '../product-details-carousel';
+import { ProductDetailsDescription } from '../product-details-description';
 import { ProductDetailsReview } from '../product-details-review';
 import { ProductDetailsSummary } from '../product-details-summary';
 import { ProductDetailsToolbar } from '../product-details-toolbar';
-import { ProductDetailsCarousel } from '../product-details-carousel';
+import { ProductDetailsSkeleton } from '../product-skeleton';
-import { ProductDetailsDescription } from '../product-details-description';
 
 // ----------------------------------------------------------------------
 
@@ -57,6 +52,8 @@ type Props = {
 };
 
 export function ProductDetailsView({ product, error, loading }: Props) {
+  const { t } = useTranslation();
+
   const tabs = useTabs('description');
 
   const [publish, setPublish] = useState('');
@@ -71,6 +68,11 @@ export function ProductDetailsView({ product, error, loading }: Props) {
     setPublish(newValue);
   }, []);
 
+  const PRODUCT_PUBLISH_OPTIONS = [
+    { value: 'published', label: t('Published') },
+    { value: 'draft', label: t('Draft') },
+  ];
+
   if (loading) {
     return (
       <DashboardContent sx={{ pt: 5 }}>

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

@@ -1,64 +1,54 @@
-import type { Theme, SxProps } from '@mui/material/styles';
-import type { UseSetStateReturn } from 'minimal-shared/hooks';
-import type { IProductItem, IProductTableFilters } from 'src/types/product';
-import type {
-  GridColDef,
-  GridSlotProps,
-  GridRowSelectionModel,
-  GridActionsCellItemProps,
-  GridColumnVisibilityModel,
-} from '@mui/x-data-grid';
-
-import { useState, useEffect, useCallback } from 'react';
-import { useBoolean, useSetState } from 'minimal-shared/hooks';
-
 import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
+import Card from '@mui/material/Card';
+import Link from '@mui/material/Link';
 import ListItemIcon from '@mui/material/ListItemIcon';
+import MenuItem from '@mui/material/MenuItem';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type {
+  GridActionsCellItemProps,
+  GridColDef,
+  GridColumnVisibilityModel,
+  GridRowSelectionModel,
+  GridSlotProps,
+} from '@mui/x-data-grid';
 import {
   DataGrid,
-  gridClasses,
-  GridToolbarExport,
   GridActionsCellItem,
-  GridToolbarContainer,
+  gridClasses,
-  GridToolbarQuickFilter,
-  GridToolbarFilterButton,
   GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarExport,
+  GridToolbarFilterButton,
+  GridToolbarQuickFilter,
 } from '@mui/x-data-grid';
-
+import type { UseSetStateReturn } from 'minimal-shared/hooks';
-import { paths } from 'src/routes/paths';
+import { useBoolean, useSetState } from 'minimal-shared/hooks';
-import { RouterLink } from 'src/routes/components';
+import { useCallback, useEffect, useState } from 'react';
-
+import { useTranslation } from 'react-i18next';
-import { PRODUCT_STOCK_OPTIONS } from 'src/_mock';
+// import { PRODUCT_STOCK_OPTIONS } from 'src/_mock';
-import { useGetProducts } from 'src/actions/product';
+import { deleteProduct, useGetProducts } from 'src/actions/product';
-import { DashboardContent } from 'src/layouts/dashboard';
-
-import { toast } from 'src/components/snackbar';
-import { Iconify } from 'src/components/iconify';
-import { EmptyContent } from 'src/components/empty-content';
-import { ConfirmDialog } from 'src/components/custom-dialog';
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
+import { ConfirmDialog } from 'src/components/custom-dialog';
-import { ProductTableToolbar } from '../product-table-toolbar';
+import { EmptyContent } from 'src/components/empty-content';
+import { Iconify } from 'src/components/iconify';
+import { toast } from 'src/components/snackbar';
+import { DashboardContent } from 'src/layouts/dashboard';
+import { RouterLink } from 'src/routes/components';
+import { paths } from 'src/routes/paths';
+import type { IProductItem, IProductTableFilters } from 'src/types/product';
 import { ProductTableFiltersResult } from '../product-table-filters-result';
 import {
-  RenderCellStock,
-  RenderCellPrice,
-  RenderCellPublish,
-  RenderCellProduct,
   RenderCellCreatedAt,
+  RenderCellPrice,
+  RenderCellProduct,
+  RenderCellPublish,
+  RenderCellStock,
 } from '../product-table-row';
+import { ProductTableToolbar } from '../product-table-toolbar';
 
 // ----------------------------------------------------------------------
 
-const PUBLISH_OPTIONS = [
-  { value: 'published', label: 'Published' },
-  { value: 'draft', label: 'Draft' },
-];
-
 const HIDE_COLUMNS = { category: false };
 
 const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
@@ -66,9 +56,13 @@ const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
 // ----------------------------------------------------------------------
 
 export function ProductListView() {
-  const confirmDialog = useBoolean();
+  const { t } = useTranslation();
+  const confirmDeleteMultiItemsDialog = useBoolean();
 
-  const { products, productsLoading } = useGetProducts();
+  const confirmDeleteSingleItemDialog = useBoolean();
+  const [idToDelete, setIdToDelete] = useState<string | null>(null);
+
+  const { products, productsLoading, mutate } = useGetProducts();
 
   const [tableData, setTableData] = useState<IProductItem[]>(products);
   const [selectedRowIds, setSelectedRowIds] = useState<GridRowSelectionModel>([]);
@@ -80,6 +74,12 @@ export function ProductListView() {
   const [columnVisibilityModel, setColumnVisibilityModel] =
     useState<GridColumnVisibilityModel>(HIDE_COLUMNS);
 
+  const PRODUCT_STOCK_OPTIONS = [
+    { value: 'in stock', label: t('In stock') },
+    { value: 'low stock', label: t('Low stock') },
+    { value: 'out of stock', label: t('Out of stock') },
+  ];
+
   useEffect(() => {
     if (products.length) {
       setTableData(products);
@@ -93,16 +93,30 @@ export function ProductListView() {
     filters: currentFilters,
   });
 
-  const handleDeleteRow = useCallback(
+  const PUBLISH_OPTIONS = [
-    (id: string) => {
+    { value: 'published', label: t('Published') },
-      const deleteRow = tableData.filter((row) => row.id !== id);
+    { value: 'draft', label: t('Draft') },
+  ];
 
+  const handleDeleteSingleRow = useCallback(async () => {
+    // const deleteRow = tableData.filter((row) => row.id !== id);
+
+    try {
+      if (idToDelete) {
+        await deleteProduct(idToDelete);
         toast.success('Delete success!');
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error('Delete failed!');
+    }
 
-      setTableData(deleteRow);
+    // TODO: reload table here
-    },
+    mutate();
-    [tableData]
+
-  );
+    // setTableData(deleteRow);
+    setDeleteInProgress(false);
+  }, [idToDelete, mutate]);
 
   const handleDeleteRows = useCallback(() => {
     const deleteRows = tableData.filter((row) => !selectedRowIds.includes(row.id));
@@ -120,7 +134,7 @@ export function ProductListView() {
         selectedRowIds={selectedRowIds}
         setFilterButtonEl={setFilterButtonEl}
         filteredResults={dataFiltered.length}
-        onOpenConfirmDeleteRows={confirmDialog.onTrue}
+        onOpenConfirmDeleteRows={confirmDeleteMultiItemsDialog.onTrue}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -128,10 +142,10 @@ export function ProductListView() {
   );
 
   const columns: GridColDef[] = [
-    { field: 'category', headerName: 'Category', filterable: false },
+    { field: 'category', headerName: t('Category'), filterable: false },
     {
       field: 'name',
-      headerName: 'Product',
+      headerName: t('Product'),
       flex: 1,
       minWidth: 360,
       hideable: false,
@@ -141,13 +155,13 @@ export function ProductListView() {
     },
     {
       field: 'createdAt',
-      headerName: 'Create at',
+      headerName: t('Create-at'),
       width: 160,
       renderCell: (params) => <RenderCellCreatedAt params={params} />,
     },
     {
       field: 'inventoryType',
-      headerName: 'Stock',
+      headerName: t('Stock'),
       width: 160,
       type: 'singleSelect',
       valueOptions: PRODUCT_STOCK_OPTIONS,
@@ -155,14 +169,14 @@ export function ProductListView() {
     },
     {
       field: 'price',
-      headerName: 'Price',
+      headerName: t('Price'),
       width: 140,
       editable: true,
       renderCell: (params) => <RenderCellPrice params={params} />,
     },
     {
       field: 'publish',
-      headerName: 'Publish',
+      headerName: t('Publish'),
       width: 110,
       type: 'singleSelect',
       editable: true,
@@ -196,7 +210,10 @@ export function ProductListView() {
           showInMenu
           icon={<Iconify icon="solar:trash-bin-trash-bold" />}
           label="Delete"
-          onClick={() => handleDeleteRow(params.row.id)}
+          onClick={() => {
+            setIdToDelete(params.row.id);
+            confirmDeleteSingleItemDialog.onTrue();
+          }}
           sx={{ color: 'error.main' }}
         />,
       ],
@@ -208,11 +225,11 @@ export function ProductListView() {
       .filter((column) => !HIDE_COLUMNS_TOGGLABLE.includes(column.field))
       .map((column) => column.field);
 
-  const renderConfirmDialog = () => (
+  const renderDeleteMultipleItemsConfirmDialog = () => (
     <ConfirmDialog
-      open={confirmDialog.value}
+      open={confirmDeleteMultiItemsDialog.value}
-      onClose={confirmDialog.onFalse}
+      onClose={confirmDeleteMultiItemsDialog.onFalse}
-      title="Delete"
+      title="Delete multiple products"
       content={
         <>
           Are you sure want to delete <strong> {selectedRowIds.length} </strong> items?
@@ -224,7 +241,31 @@ export function ProductListView() {
           color="error"
           onClick={() => {
             handleDeleteRows();
-            confirmDialog.onFalse();
+            confirmDeleteMultiItemsDialog.onFalse();
+          }}
+        >
+          Delete
+        </Button>
+      }
+    />
+  );
+
+  const [deleteInProgress, setDeleteInProgress] = useState<boolean>(false);
+  const renderDeleteSingleItemConfirmDialog = () => (
+    <ConfirmDialog
+      open={confirmDeleteSingleItemDialog.value}
+      onClose={confirmDeleteSingleItemDialog.onFalse}
+      title="Delete product"
+      content={<>Are you sure want to delete item?</>}
+      action={
+        <Button
+          loading={deleteInProgress}
+          variant="contained"
+          color="error"
+          onClick={() => {
+            setDeleteInProgress(true);
+            handleDeleteSingleRow();
+            confirmDeleteSingleItemDialog.onFalse();
           }}
         >
           Delete
@@ -239,9 +280,9 @@ export function ProductListView() {
         <CustomBreadcrumbs
           heading="List"
           links={[
-            { name: 'Dashboard', href: paths.dashboard.root },
+            { name: t('Dashboard'), href: paths.dashboard.root },
-            { name: 'Product', href: paths.dashboard.product.root },
+            { name: t('Product'), href: paths.dashboard.product.root },
-            { name: 'List' },
+            { name: t('List') },
           ]}
           action={
             <Button
@@ -250,7 +291,7 @@ export function ProductListView() {
               variant="contained"
               startIcon={<Iconify icon="mingcute:add-line" />}
             >
-              New product
+              {t('new-product')}
             </Button>
           }
           sx={{ mb: { xs: 3, md: 5 } }}
@@ -292,7 +333,8 @@ export function ProductListView() {
         </Card>
       </DashboardContent>
 
-      {renderConfirmDialog()}
+      {renderDeleteMultipleItemsConfirmDialog()}
+      {renderDeleteSingleItemConfirmDialog()}
     </>
   );
 }
@@ -322,6 +364,19 @@ function CustomToolbar({
   setFilterButtonEl,
   onOpenConfirmDeleteRows,
 }: CustomToolbarProps) {
+  const { t } = useTranslation();
+
+  const PRODUCT_STOCK_OPTIONS = [
+    { value: 'in stock', label: t('In stock') },
+    { value: 'low stock', label: t('Low stock') },
+    { value: 'out of stock', label: t('Out of stock') },
+  ];
+
+  const PUBLISH_OPTIONS = [
+    { value: 'published', label: t('Published') },
+    { value: 'draft', label: t('Draft') },
+  ];
+
   return (
     <>
       <GridToolbarContainer>

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

@@ -1,7 +1,6 @@
 import type { CommonColors } from '@mui/material/styles';
-
 import type { PaletteColorNoChannels } from './core/palette';
-import type { ThemeDirection, ThemeColorScheme, ThemeCssVariables } from './types';
+import type { ThemeColorScheme, ThemeCssVariables, ThemeDirection } from './types';
 
 // ----------------------------------------------------------------------
 
@@ -25,6 +24,16 @@ type ThemeConfig = {
   };
 };
 
+const navigator_language = navigator.language;
+let primaryFont = 'Noto Sans Variable';
+if (navigator_language.startsWith('zh')) primaryFont = 'Noto Sans TC Variable';
+
+// TODO: not tested, T.B.C.
+if (navigator_language.startsWith('sc')) primaryFont = 'Noto Sans SC Variable';
+
+// TODO: not tested, T.B.C.
+if (navigator_language.startsWith('jp')) primaryFont = 'Noto Sans JP Variable';
+
 export const themeConfig: ThemeConfig = {
   /** **************************************
    * Base
@@ -38,7 +47,12 @@ export const themeConfig: ThemeConfig = {
    * Typography
    *************************************** */
   fontFamily: {
-    primary: 'Public Sans Variable',
+    // primary: 'Public Sans Variable',
+
+    // added fontsource-variable fonts src/global.css
+    primary: primaryFont,
+
+    //
     secondary: 'Barlow',
   },
   /** **************************************

03_source/frontend/src/utils/file-to-base64.ts

@@ -0,0 +1,12 @@
+export function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = () => {
+      reject(new Error('Error converting file to base64'));
+    };
+  });
+}

03_source/frontend/tsconfig.json

@@ -1,29 +1,47 @@
 {
   "compilerOptions": {
+    "allowJs": true,
     /* Bundler */
     "baseUrl": ".",
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "allowJs": true,
-    "resolveJsonModule": true,
-
-    /* Build */
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "moduleResolution": "bundler",
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "incremental": true,
-    "skipLibCheck": true,
     "esModuleInterop": true,
+    "incremental": true,
     "isolatedModules": true,
-
+    "jsx": "react-jsx",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
     /* Linting */
     "strict": true,
-    "noEmit": true,
+    "strictNullChecks": true,
-    "strictNullChecks": true
+    /* Build */
+    "target": "ES2020",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
   },
-  "include": ["src"],
+  "exclude": [
-  "exclude": ["node_modules"],
+    "node_modules",
+    ".next",
+    //
+    "**/* copy *.tsx",
+    "**/* copy.tsx",
+    "**/*.bak",
+    "**/*.bak",
+    "**/*.bug",
+    "**/*.del",
+    "**/*.draft",
+    "**/*.log",
+    "**/*.tmp",
+    "**/*del"
+  ],
+  "include": [
+    "src"
+  ],
   "references": [
     {
       "path": "./tsconfig.node.json"

03_source/frontend/tsconfig.node.json

@@ -5,5 +5,19 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "exclude": [
+    "**/* copy *.tsx",
+    "**/* copy.tsx",
+    "**/*.bak",
+    "**/*.bak",
+    "**/*.bug",
+    "**/*.del",
+    "**/*.draft",
+    "**/*.log",
+    "**/*.tmp",
+    "**/*del"
+  ],
+  "include": [
+    "vite.config.ts"
+  ]
 }

03_source/frontend/yarn.lock

@@ -702,6 +702,17 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
+"@babel/generator@^7.26.2":
+  version "7.27.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.27.3.tgz#ef1c0f7cfe3b5fc8cbb9f6cc69f93441a68edefc"
+  integrity sha512-xnlJYj5zepml8NXtjkG0WquFUv8RskFqyFcVgTBp5k+NaA/8uw/K+OSVf8AMGw5e9HKP2ETd5xpK5MLZQD6b4Q==
+  dependencies:
+    "@babel/parser" "^7.27.3"
+    "@babel/types" "^7.27.3"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
 "@babel/generator@^7.27.0":
   version "7.27.0"
   resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz"
@@ -726,11 +737,28 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz"
   integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
 
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
 "@babel/helper-validator-identifier@^7.25.9":
   version "7.25.9"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz"
   integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
 
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/parser@^7.26.2", "@babel/parser@^7.27.3":
+  version "7.27.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.27.3.tgz#1b7533f0d908ad2ac545c4d05cbe2fb6dc8cfaaf"
+  integrity sha512-xyYxRj6+tLNDTWi0KCBcZ9V7yg3/lwL9DWh9Uwh/RIVlIfFidggcgxKX3GCXwCiswwcGRawBKbEg2LG/Y8eJhw==
+  dependencies:
+    "@babel/types" "^7.27.3"
+
 "@babel/parser@^7.27.0":
   version "7.27.0"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz"
@@ -775,6 +803,14 @@
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
+"@babel/types@^7.26.0", "@babel/types@^7.27.3":
+  version "7.27.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.27.3.tgz#c0257bedf33aad6aad1f406d35c44758321eb3ec"
+  integrity sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+
 "@dnd-kit/accessibility@^3.1.1":
   version "3.1.1"
   resolved "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz"
@@ -1538,16 +1574,31 @@
   resolved "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.5.tgz"
   integrity sha512-TrWffUAFOnT8zroE9YmGybagoOgM/HjRqMQ8k9R0vVgXlnUh/vnpbGPAS/Caz1KIlOPnPGh6fvJbb7DHbFCncA==
 
+"@fontsource-variable/noto-sans-jp@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/noto-sans-jp/-/noto-sans-jp-5.2.5.tgz#c92679155316424c37a094b2ff167bc6343531ca"
+  integrity sha512-+ieDlugS+FCva2eLahVgybiaPMs1xLcBYByflzw1WghvFPFNJzsQHw85N+dadXzaqccVTiVDGYW4E0bMv4CHAQ==
+
+"@fontsource-variable/noto-sans-sc@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/noto-sans-sc/-/noto-sans-sc-5.2.5.tgz#c00091a482360df38a51a8fe7c05164924360a75"
+  integrity sha512-TRxlLdbTMNq7XbTQN6XYsx8fdlg9MGZE5tVGzqCRi3audF4yugjino1NuwaKd5La+063qTSFXoRJf+sBv1ATXg==
+
+"@fontsource-variable/noto-sans-tc@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/noto-sans-tc/-/noto-sans-tc-5.2.5.tgz#59f28c752dcad61f60c18663541678d91550bb4e"
+  integrity sha512-oaAn5hkLxraNBOWuiqyJ6+t1SmQ9Sszmcs+wJpmAmUO/1dsaHjDU5HXEjutvPpucqVeqdvVNr/kHRx+ghdiPeA==
+
+"@fontsource-variable/noto-sans@^5.2.7":
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/noto-sans/-/noto-sans-5.2.7.tgz#6b1ac5b98a5453b45a70ba2957b8f3e83dc5ec72"
+  integrity sha512-VaA+clV7xTOx+pSOdyjr9nR7khjrJGr7ZHs2KXlx+AqLyG/SUVBadNwauCH0rvF/eZkZr67neNxdKMOLtVxweg==
+
 "@fontsource-variable/nunito-sans@^5.2.5":
   version "5.2.5"
   resolved "https://registry.npmjs.org/@fontsource-variable/nunito-sans/-/nunito-sans-5.2.5.tgz"
   integrity sha512-J8Bi9OBUQvXwDvt9QofXD4joorYy3O9+4AU7cPx/ioa+xlH4HjAJNhA/N+nCu7IOMjFsbEbM2ZZCWQrsmQMsQw==
 
-"@fontsource-variable/public-sans@^5.2.5":
-  version "5.2.5"
-  resolved "https://registry.npmjs.org/@fontsource-variable/public-sans/-/public-sans-5.2.5.tgz"
-  integrity sha512-/guMye9ATKBlF7FuQeTJqW3RBilKmgeno6O2HXNEaRHP1JpfpG4oG8HwX8Mf0w6UHHE2b4monggJr1IfR4NhuA==
-
 "@fontsource/barlow@^5.2.5":
   version "5.2.5"
   resolved "https://registry.npmjs.org/@fontsource/barlow/-/barlow-5.2.5.tgz"
@@ -1660,6 +1711,17 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz"
   integrity sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==
 
+"@ianvs/prettier-plugin-sort-imports@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@ianvs/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.4.1.tgz#d8a182fc1a74d687df335b2b17b347e232b6f495"
+  integrity sha512-F0/Hrcfpy8WuxlQyAWJTEren/uxKhYonOGY4OyWmwRdeTvkh9mMSCxowZLjNkhwi/2ipqCgtXwwOk7tW0mWXkA==
+  dependencies:
+    "@babel/generator" "^7.26.2"
+    "@babel/parser" "^7.26.2"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.26.0"
+    semver "^7.5.2"
+
 "@iconify/react@^5.2.0":
   version "5.2.0"
   resolved "https://registry.npmjs.org/@iconify/react/-/react-5.2.0.tgz"
@@ -6612,7 +6674,7 @@ prelude-ls@^1.2.1:
 
 prettier@^3.5.3:
   version "3.5.3"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.3.tgz#4fc2ce0d657e7a02e602549f053b239cb7dfe1b5"
   integrity sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==
 
 prop-types@^15.6.2, prop-types@^15.8.1:
@@ -7221,6 +7283,11 @@ semver@^6.3.1:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.5.2:
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
+  integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
+
 semver@^7.6.0, semver@^7.7.1:
   version "7.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz"

03_source/mobile/tsconfig.json

@@ -1,21 +1,46 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "esModuleInterop": false,
     "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "module": "ESNext",
     "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true
   },
-  "include": ["src"],
+  "include": [
-  "references": [{ "path": "./tsconfig.node.json" }]
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    ".next",
+    //
+    "**/* copy *.tsx",
+    "**/* copy.tsx",
+    "**/*.bak",
+    "**/*.bak",
+    "**/*.bug",
+    "**/*.del",
+    "**/*.draft",
+    "**/*.log",
+    "**/*.tmp",
+    "**/*del"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

03_source/mobile/tsconfig.node.json

@@ -5,5 +5,19 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "exclude": [
+    "**/* copy *.tsx",
+    "**/* copy.tsx",
+    "**/*.bak",
+    "**/*.bak",
+    "**/*.bug",
+    "**/*.del",
+    "**/*.draft",
+    "**/*.log",
+    "**/*.tmp",
+    "**/*del"
+  ],
+  "include": [
+    "vite.config.ts"
+  ]
 }