"add .env.example with API endpoint configurations"

01_Requirements/REQ0181/index.md

@@ -0,0 +1,9 @@
+---
+tags: frontend, side-menu
+---
+
+# REQ0181 frontend side menu configuration
+
+## sources
+
+`src/layouts/nav-config-dashboard.tsx`

01_Requirements/REQ0182/index.md

@@ -0,0 +1,11 @@
+---
+tags: frontend, product, details
+---
+
+# REQ0182 frontend product details
+
+frontend page to display product details
+
+## sources
+
+T.B.A.

01_Requirements/REQ0183/index.md

@@ -0,0 +1,15 @@
+---
+tags: frontend, product, new
+---
+
+# REQ0183 frontend product new
+
+frontend page to create new product
+
+## sources
+
+T.B.A.
+
+## branch
+
+develop/requirements/REQ0183

01_Requirements/REQ0184/index.md

@@ -0,0 +1,17 @@
+---
+tags: frontend, product, delete
+---
+
+# REQ0184 frontend product delete
+
+frontend page to delete product
+
+list page
+
+## sources
+
+T.B.A.
+
+## branch
+
+develop/requirements/REQ0184

01_Requirements/REQ0185/index.md

@@ -0,0 +1,17 @@
+---
+tags: frontend, product, update
+---
+
+# REQ0185 frontend product update
+
+frontend page to update product
+
+edit page T.B.A.
+
+## sources
+
+T.B.A.
+
+## branch
+
+develop/requirements/REQ0185

01_Requirements/index.md

@@ -158,3 +158,8 @@
 - [REQ0169: DemoStorageExample](./REQ0169/index.md)
 - [REQ0170: DemoWeatherAppUi](./REQ0170/index.md)
 - [REQ0180: REQ0180 service port schedule](./REQ0180/index.md)
+- [REQ0181: REQ0181 frontend side menu configuration](./REQ0181/index.md)
+- [REQ0182: REQ0182 frontend product details](./REQ0182/index.md)
+- [REQ0183: REQ0183 frontend product new](./REQ0183/index.md)
+- [REQ0184: REQ0184 frontend product delete](./REQ0184/index.md)
+- [REQ0185: REQ0185 frontend product update](./REQ0185/index.md)

03_source/cms_backend/package.json

@@ -43,6 +43,7 @@
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/adapter-pg": "^6.8.2",
     "@prisma/client": "^5.6.0",
+    "@types/bcrypt": "^5.0.2",
     "bcrypt": "^5.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",

03_source/cms_backend/prisma/schema.prisma

@@ -195,32 +195,32 @@ model ProductItem {
   createdAt      DateTime        @default(now())
   updatedAt      DateTime        @updatedAt
   //
-  sku            String
-  name           String
-  code           String
-  price          Float
-  taxes          Float
-  tags           String[]
-  sizes          String[]
-  publish        String
-  gender         String[]
-  coverUrl       String
-  images         String[]
-  colors         String[]
-  quantity       Int
-  category       String
   available      Int
-  totalSold      Int
+  category       String
+  code           String
+  colors         String[]
+  coverUrl       String
   description    String
-  totalRatings   Float
-  totalReviews   Int
+  gender         String[]
+  images         String[]
   inventoryType  String
-  subDescription String
-  priceSale      Float?
+  name           String
   newLabel       Json
-  saleLabel      Json
+  price          Float
+  priceSale      Float?
+  publish        String
+  quantity       Int
   ratings        Json[]
   reviews        ProductReview[]
+  saleLabel      Json
+  sizes          String[]
+  sku            String
+  subDescription String
+  tags           String[]
+  taxes          Float
+  totalRatings   Float
+  totalReviews   Int
+  totalSold      Int
 }
 
 model MailSender {
@@ -1144,6 +1144,7 @@ model EventReview {
   eventItemId String?
 }
 
+// NOTE: need to consider with Event
 // mapped to IEventItem
 model EventItem {
   id             String        @id @default(uuid())

03_source/cms_backend/scripts/00_dev.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+yarn --dev
+
+clear
+
+while true; do
+  yarn db:push
+
+  yarn seed
+
+  yarn db:studio &
+
+  yarn dev
+
+  echo "restarting..."
+  sleep 1
+done

03_source/cms_backend/scripts/10_build.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+set -x
+
+yarn db:push
+
+npx nodemon --ext ts,tsx --exec "yarn tsc"
+
+
+
+# yarn build
+

03_source/cms_backend/scripts/20_prod.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -x
+
+npm run start

03_source/cms_backend/src/app/api/AccessLog/detail/route.ts

@@ -10,7 +10,8 @@ import type { NextRequest } from 'next/server';
 
 import { STATUS, response, handleError } from 'src/utils/response';
 
-import { AccessLogService } from '../../../../modules/AccessLog/AccessLog.service';
+// import { AccessLogService } from '../../../../modules/AccessLog/AccessLog.service';
+import { getAccessLogById } from 'src/app/services/AccessLog.service';
 
 // ----------------------------------------------------------------------
 
@@ -27,7 +28,7 @@ export async function GET(req: NextRequest) {
     const accessLogId = searchParams.get('accessLogId');
     if (!accessLogId) return response({ message: 'accessLogId is required!' }, STATUS.BAD_REQUEST);
 
-    const accessLog = await AccessLogService.findById(accessLogId);
+    const accessLog = await getAccessLogById(accessLogId);
 
     if (!accessLog) return response({ message: 'AccessLog not found!' }, STATUS.NOT_FOUND);
 

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

@@ -2,7 +2,7 @@ import type { NextRequest, NextResponse } from 'next/server';
 
 import { STATUS, response, handleError } from 'src/utils/response';
 
-import { listAppLogs, deleteAppLog, updateAppLog, createNewAppLog } from 'src/app/services/AppLog.service';
+import { listAppLogs, deleteAppLog, createNewAppLog } from 'src/app/services/AppLog.service';
 
 // import prisma from '../../lib/prisma';
 
@@ -34,28 +34,29 @@ export async function POST(req: NextRequest) {
   }
 }
 
-/**
- ***************************************
- * PUT - update AppLog
- ***************************************
- */
-export async function PUT(req: NextRequest) {
-  const { searchParams } = req.nextUrl;
-  const appLogId = searchParams.get('appLogId');
+// TODO: delete `update AppLog`
+// /**
+//  ***************************************
+//  * PUT - update AppLog
+//  ***************************************
+//  */
+// export async function PUT(req: NextRequest) {
+//   const { searchParams } = req.nextUrl;
+//   const appLogId = searchParams.get('appLogId');
 
-  const { data } = await req.json();
+//   const { data } = await req.json();
 
-  try {
-    if (!appLogId) throw new Error('appLogId cannot null');
-    const id: number = parseInt(appLogId);
+//   try {
+//     if (!appLogId) throw new Error('appLogId cannot null');
+//     const id: number = parseInt(appLogId);
 
-    const updateResult = await updateAppLog(id, data);
+//     const updateResult = await updateAppLog(id, data);
 
-    return response(updateResult, STATUS.OK);
-  } catch (error) {
-    return handleError('AppLog - Update', error);
-  }
-}
+//     return response(updateResult, STATUS.OK);
+//   } catch (error) {
+//     return handleError('AppLog - Update', error);
+//   }
+// }
 
 /**
  ***************************************
@@ -72,7 +73,7 @@ export async function DELETE(req: NextRequest) {
     if (!appLogId) throw new Error('appLogId cannot null');
     const id: number = parseInt(appLogId);
 
-    const deleteResult = await deleteAppLog(id);
+    const deleteResult = await deleteAppLog(id.toString());
 
     return response(deleteResult, STATUS.OK);
   } catch (error) {

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

@@ -7,29 +7,28 @@ import { _events } from 'src/_mock/_event';
 
 // ----------------------------------------------------------------------
 
-export const runtime = 'edge';
+// export const runtime = 'edge';
 
 /** **************************************
  * GET - Search events
  *************************************** */
 export async function GET(req: NextRequest) {
-  try {
-    const { searchParams } = req.nextUrl;
-    const query = searchParams.get('query')?.trim().toLowerCase();
+  // try {
+  //
+  // TODO: implement search events
+  //
+  // const { searchParams } = req.nextUrl;
+  // const query = searchParams.get('query')?.trim().toLowerCase();
+  // if (!query) {
+  //   return response({ results: [] }, STATUS.OK);
+  // }
+  // const events = _events();
+  // // Accept search by name or sku
+  // const results = events.filter(({ name, sku }) => name.toLowerCase().includes(query) || sku?.toLowerCase().includes(query));
+  // logger('[Event] search-results', results.length);
+  // return response({ results }, STATUS.OK);
 
-    if (!query) {
-      return response({ results: [] }, STATUS.OK);
-    }
-
-    const events = _events();
-
-    // Accept search by name or sku
-    const results = events.filter(({ name, sku }) => name.toLowerCase().includes(query) || sku?.toLowerCase().includes(query));
-
-    logger('[Event] search-results', results.length);
-
-    return response({ results }, STATUS.OK);
-  } catch (error) {
-    return handleError('Event - Get search', error);
-  }
+  // } catch (error) {
+  return handleError('Event - Get search not implemented', {});
+  // }
 }

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

@@ -28,7 +28,7 @@ export async function POST(req: NextRequest) {
 
   try {
     const order = await createOrder(data);
-    return response(order, STATUS.CREATED);
+    return response(order, STATUS.OK);
   } catch (error) {
     return handleError('Order - Create', error);
   }
@@ -48,7 +48,7 @@ export async function PUT(req: NextRequest) {
     if (!orderId) throw new Error('orderId cannot be null');
     const id: number = parseInt(orderId);
 
-    const updatedOrder = await updateOrder(id, data);
+    const updatedOrder = await updateOrder(id.toString(), data);
     return response(updatedOrder, STATUS.OK);
   } catch (error) {
     return handleError('Order - Update', error);
@@ -68,7 +68,7 @@ export async function DELETE(req: NextRequest) {
     if (!orderId) throw new Error('orderId cannot be null');
     const id: number = parseInt(orderId);
 
-    await deleteOrder(id);
+    await deleteOrder(id.toString());
     return response({ success: true }, STATUS.OK);
   } catch (error) {
     return handleError('Order - Delete', error);

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

@@ -0,0 +1,43 @@
+// src/app/api/product/createProduct/route.ts
+// REQ0183 frontend product new
+//
+// PURPOSE:
+// create product to db
+//
+// RULES:
+// T.B.A.
+//
+
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import { isDev } from 'src/constants';
+
+import prisma from '../../../lib/prisma';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * POST - Products
+ *************************************** */
+export async function POST(req: NextRequest) {
+  const { productData } = await req.json();
+
+  try {
+    if (isDev) {
+      console.log({ productData });
+    }
+
+    await prisma.productItem.create({ data: productData });
+
+    if (isDev) {
+      console.log('create done');
+    }
+
+    return response({ hello: 'world' }, STATUS.OK);
+  } catch (error) {
+    console.log({ hello: 'world', productData });
+    return handleError('Product - Create', error);
+  }
+}

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

@@ -0,0 +1,51 @@
+###
+
+POST http://localhost:7272/api/product/createProduct
+Content-Type: application/json
+
+{
+    "data": {
+        "available": 99,
+        "category": "T-shirts",
+        "code": "PD-12345",
+        "colors": [
+            "Red"
+        ],
+        "coverUrl": "",
+        "description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
+        "gender": [
+            "Men"
+        ],
+        "images": [
+            "data:image/png;base64,C",
+            "data:image/png;base64,C"
+        ],
+        "inventoryType": "test",
+        "name": "hello product",
+        "newLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "price": 99.99,
+        "priceSale": null,
+        "publish": "yes",
+        "quantity": 99,
+        "saleLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "sizes": [
+            "7"
+        ],
+        "sku": "SK-122345",
+        "subDescription": "this is test sub-description",
+        "tags": [
+            "Travel",
+            "Finance"
+        ],
+        "taxes": 0,
+        "totalRatings": 1,
+        "totalReviews": 1,
+        "totalSold": 1
+    }
+}

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

@@ -1,4 +1,5 @@
 // src/app/api/product/createProduct/route.ts
+// REQ0183 frontend product new
 //
 // PURPOSE:
 // create product to db
@@ -11,6 +12,8 @@ import type { NextRequest } from 'next/server';
 
 import { STATUS, response, handleError } from 'src/utils/response';
 
+import { isDev } from 'src/constants';
+
 import prisma from '../../../lib/prisma';
 
 // ----------------------------------------------------------------------
@@ -19,57 +22,22 @@ 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 });
+    if (isDev) {
+      console.log({ data });
+    }
+
+    await prisma.productItem.create({ data });
+
+    if (isDev) {
+      console.log('create done');
+    }
+
     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/createProduct/test.http

@@ -0,0 +1,51 @@
+###
+
+POST http://localhost:7272/api/product/createProduct
+Content-Type: application/json
+
+{
+    "data": {
+        "available": 99,
+        "category": "T-shirts",
+        "code": "PD-12345",
+        "colors": [
+            "Red"
+        ],
+        "coverUrl": "",
+        "description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
+        "gender": [
+            "Men"
+        ],
+        "images": [
+            "data:image/png;base64,C",
+            "data:image/png;base64,C"
+        ],
+        "inventoryType": "test",
+        "name": "hello product",
+        "newLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "price": 99.99,
+        "priceSale": null,
+        "publish": "yes",
+        "quantity": 99,
+        "saleLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "sizes": [
+            "7"
+        ],
+        "sku": "SK-122345",
+        "subDescription": "this is test sub-description",
+        "tags": [
+            "Travel",
+            "Finance"
+        ],
+        "taxes": 0,
+        "totalRatings": 1,
+        "totalReviews": 1,
+        "totalSold": 1
+    }
+}

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

@@ -0,0 +1,22 @@
+import type { NextRequest } from 'next/server';
+
+import { STATUS, response, handleError } from 'src/utils/response';
+
+import { deleteProduct } from 'src/app/services/product.service';
+
+/** **************************************
+ * PATCH - Delete product
+ *************************************** */
+export async function PATCH(req: NextRequest) {
+  try {
+    const { productId } = await req.json();
+
+    if (!productId) throw new Error('productId cannot be null');
+
+    await deleteProduct(productId);
+
+    return response({ productId }, STATUS.OK);
+  } catch (error) {
+    return handleError('Product - Delete', error);
+  }
+}

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

@@ -1,5 +1,7 @@
 // src/app/api/product/details/route.ts
 //
+// REQ0182 frontend product details
+//
 // PURPOSE:
 // get product from db by id
 //

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

@@ -1,3 +1,5 @@
 ###
-
+GET http://localhost:7272/api/product/details?productId=e99f09a7-dd88-49d5-b1c8-1daf80c2d7b01
+
+###
 GET http://localhost:7272/api/product/details?productId=e99f09a7-dd88-49d5-b1c8-1daf80c2d7b01

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

@@ -1,23 +0,0 @@
-import { logger } from 'src/utils/logger';
-import { STATUS, response, handleError } from 'src/utils/response';
-
-import { _products } from 'src/_mock/_product';
-
-// ----------------------------------------------------------------------
-
-export const runtime = 'edge';
-
-/** **************************************
- * GET - Products
- *************************************** */
-export async function GET() {
-  try {
-    const products = _products();
-
-    logger('[Product] list', products.length);
-
-    return response({ products }, STATUS.OK);
-  } catch (error) {
-    return handleError('Product - Get list', error);
-  }
-}

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

@@ -24,13 +24,14 @@ export async function GET(req: NextRequest, res: NextResponse) {
  ***************************************
  */
 export async function POST(req: NextRequest) {
+  const OPERATION = 'Product - Create';
   const { data } = await req.json();
 
   try {
     const product = await createProduct(data);
-    return response(product, STATUS.CREATED);
+    return response(OPERATION, STATUS.OK);
   } catch (error) {
-    return handleError('Product - Create', error);
+    return handleError(OPERATION, error);
   }
 }
 

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

@@ -17,7 +17,7 @@ import prisma from '../../../lib/prisma';
 /** **************************************
  * GET - Products
  *************************************** */
-export async function POST(req: NextRequest) {
+export async function PUT(req: NextRequest) {
   // logger('[Product] list', products.length);
   const { data } = await req.json();
 

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

@@ -0,0 +1,51 @@
+###
+
+PUT  http://localhost:7272/api/product/createProduct
+Content-Type: application/json
+
+{
+    "data": {
+        "available": 99,
+        "category": "T-shirts",
+        "code": "PD-12345",
+        "colors": [
+            "Red"
+        ],
+        "coverUrl": "",
+        "description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
+        "gender": [
+            "Men"
+        ],
+        "images": [
+            "data:image/png;base64,C",
+            "data:image/png;base64,C"
+        ],
+        "inventoryType": "test",
+        "name": "hello product",
+        "newLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "price": 99.99,
+        "priceSale": null,
+        "publish": "yes",
+        "quantity": 99,
+        "saleLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "sizes": [
+            "7"
+        ],
+        "sku": "SK-122345",
+        "subDescription": "this is test sub-description",
+        "tags": [
+            "Travel",
+            "Finance"
+        ],
+        "taxes": 0,
+        "totalRatings": 1,
+        "totalReviews": 1,
+        "totalSold": 1
+    }
+}

03_source/cms_backend/src/app/api/product/update/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 PUT(req: NextRequest) {
+  // logger('[Product] list', products.length);
+  const { productData } = await req.json();
+
+  try {
+    const products = await prisma.productItem.updateMany({
+      data: {
+        name: productData.name,
+        sku: productData.sku,
+        code: productData.code,
+        price: productData.price,
+        taxes: productData.taxes,
+        tags: productData.tags,
+        sizes: productData.sizes,
+        publish: productData.publish,
+        gender: productData.gender,
+        coverUrl: productData.coverUrl,
+        images: productData.images,
+        colors: productData.colors,
+        quantity: productData.quantity,
+        category: productData.category,
+        available: productData.available,
+        totalSold: productData.totalSold,
+        description: productData.description,
+        totalRatings: productData.totalRatings,
+        totalReviews: productData.totalReviews,
+        inventoryType: productData.inventoryType,
+        subDescription: productData.subDescription,
+        priceSale: productData.priceSale,
+        //
+        newLabel: {
+          content: productData.newLabel?.content || '',
+          enabled: productData.newLabel?.enabled ?? false,
+        },
+        saleLabel: {
+          content: productData.saleLabel?.content || '',
+          enabled: productData.saleLabel?.enabled ?? false,
+        },
+        ratings: {
+          set: productData.ratings.map((rating: { name: string; starCount: number; reviewCount: number }) => ({
+            name: rating.name,
+            starCount: rating.starCount,
+            reviewCount: rating.reviewCount,
+          })),
+        },
+      },
+      where: { id: productData.id },
+    });
+
+    return response({ data: productData }, STATUS.OK);
+  } catch (error) {
+    console.log({ data: productData });
+    return handleError('Product - Get list', error);
+  }
+}
+
+export type IProductItem = {
+  id: string;
+  sku: string;
+  name: string;
+  code: string;
+  price: number;
+  taxes: number;
+  tags: string[];
+  sizes: string[];
+  publish: string;
+  gender: string[];
+  coverUrl: string;
+  images: string[];
+  colors: string[];
+  quantity: number;
+  category: string;
+  available: number;
+  totalSold: number;
+  description: string;
+  totalRatings: number;
+  totalReviews: number;
+  // createdAt: IDateValue;
+  inventoryType: string;
+  subDescription: string;
+  priceSale: number | null;
+  // reviews: IProductReview[];
+  newLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  saleLabel: {
+    content: string;
+    enabled: boolean;
+  };
+  ratings: {
+    name: string;
+    starCount: number;
+    reviewCount: number;
+  }[];
+};
+
+export type IDateValue = string | number | null;
+
+export type IProductReview = {
+  id: string;
+  name: string;
+  rating: number;
+  comment: string;
+  helpful: number;
+  avatarUrl: string;
+  postedAt: IDateValue;
+  isPurchased: boolean;
+  attachments?: string[];
+};

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

@@ -0,0 +1,51 @@
+###
+
+PUT  http://localhost:7272/api/product/createProduct
+Content-Type: application/json
+
+{
+    "data": {
+        "available": 99,
+        "category": "T-shirts",
+        "code": "PD-12345",
+        "colors": [
+            "Red"
+        ],
+        "coverUrl": "",
+        "description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
+        "gender": [
+            "Men"
+        ],
+        "images": [
+            "data:image/png;base64,C",
+            "data:image/png;base64,C"
+        ],
+        "inventoryType": "test",
+        "name": "hello product",
+        "newLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "price": 99.99,
+        "priceSale": null,
+        "publish": "yes",
+        "quantity": 99,
+        "saleLabel": {
+            "enabled": false,
+            "content": ""
+        },
+        "sizes": [
+            "7"
+        ],
+        "sku": "SK-122345",
+        "subDescription": "this is test sub-description",
+        "tags": [
+            "Travel",
+            "Finance"
+        ],
+        "taxes": 0,
+        "totalRatings": 1,
+        "totalReviews": 1,
+        "totalSold": 1
+    }
+}

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

@@ -1,6 +1,7 @@
-import prisma from '@/lib/prisma';
 import { NextResponse } from 'next/server';
 
+import prisma from 'src/app/lib/prisma';
+
 // GET: 获取所有学生
 export async function GET() {
   try {

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

@@ -14,8 +14,8 @@ export async function GET(req: NextRequest, res: NextResponse) {
     if (!userId) throw new Error('userId cannot be null');
     const result = await isAdmin(userId);
 
-    return response(result, STATUS.OK);
+    return response(result ? 'true' : 'false', STATUS.OK);
   } catch (error) {
-    return handleError('Post - Get latest', error);
+    return handleError('GET - checkAdmin', error);
   }
 }

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

@@ -14,8 +14,8 @@ export async function GET(req: NextRequest, res: NextResponse) {
     if (!userId) throw new Error('userId cannot be null');
     const result = await isAdmin(userId);
 
-    return response(result, STATUS.OK);
+    return response('GET - helloworld', STATUS.OK);
   } catch (error) {
-    return handleError('Post - Get latest', error);
+    return handleError('GET - helloworld', error);
   }
 }

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

@@ -22,14 +22,17 @@ export async function GET(req: NextRequest, res: NextResponse) {
  ***************************************
  */
 export async function POST(req: NextRequest) {
+  const OPERATION = 'User - Create';
   const { data } = await req.json();
 
   try {
-    const createResult = await createNewUser(data);
+    // TODO: temporary ignore output from function due to `createNewUser` is still a dummy
+    // const createResult = await createNewUser(data);
+    await createNewUser(data);
 
-    return response(createResult, STATUS.OK);
+    return response(OPERATION, STATUS.OK);
   } catch (error) {
-    return handleError('User - Create', error);
+    return handleError(OPERATION, error);
   }
 }
 
@@ -48,7 +51,7 @@ export async function PUT(req: NextRequest) {
     if (!userId) throw new Error('userId cannot null');
     const id: number = parseInt(userId);
 
-    const updateResult = await updateUser(id, data);
+    const updateResult = await updateUser(id.toString(), data);
 
     return response(updateResult, STATUS.OK);
   } catch (error) {
@@ -71,10 +74,10 @@ export async function DELETE(req: NextRequest) {
     if (!userId) throw new Error('userId cannot null');
     const id: number = parseInt(userId);
 
-    const deleteResult = await deleteUser(id);
+    await deleteUser(id);
 
-    return response(deleteResult, STATUS.OK);
+    return response('User - Delete', STATUS.OK);
   } catch (error) {
-    return handleError('User - Update', error);
+    return handleError('User - Delete', error);
   }
 }

03_source/cms_backend/src/app/services/AccessLog.service.ts

@@ -30,10 +30,15 @@ async function listAccessLogs(): Promise<AccessLog[]> {
   });
 }
 
+// TODO: obsoleted getAccessLog, use getAccessLogById instead
 async function getAccessLog(id: string): Promise<AccessLog | null> {
   return prisma.accessLog.findUnique({ where: { id } });
 }
 
+async function getAccessLogById(id: string): Promise<AccessLog | null> {
+  return prisma.accessLog.findUnique({ where: { id } });
+}
+
 async function createAccessLog(userId?: string, message?: string, metadata?: Record<string, any>): Promise<AccessLog> {
   return prisma.accessLog.create({
     data: {
@@ -44,6 +49,10 @@ async function createAccessLog(userId?: string, message?: string, metadata?: Rec
   });
 }
 
+function helloworld(): string {
+  return 'helloworld';
+}
+
 // async function update(id: string, data: UpdateAccessLog): Promise<AccessLog> {
 //   return prisma.accessLog.update({
 //     where: { id },
@@ -63,4 +72,7 @@ export {
   getAccessLog,
   listAccessLogs,
   createAccessLog,
+  getAccessLogById,
+  //
+  helloworld,
 };

03_source/cms_backend/src/app/services/event.service.ts

@@ -6,11 +6,14 @@
 // RULES:
 // - Follows same pattern as helloworld.service.ts
 //
+import type { Event } from '@prisma/client';
+
+import prisma from '../lib/prisma';
 
 type CreateEvent = {
-  eventDate: DateTime;
+  eventDate: Date;
   title: string;
-  joinMembers?: Json[];
+  joinMembers?: JSON[];
   price: number;
   currency: string;
   duration_m: number;
@@ -22,9 +25,9 @@ type CreateEvent = {
 };
 
 type UpdateEvent = {
-  eventDate?: DateTime;
+  eventDate?: Date;
   title?: string;
-  joinMembers?: Json[];
+  joinMembers?: JSON[];
   price?: number;
   currency?: string;
   duration_m?: number;
@@ -35,9 +38,9 @@ type UpdateEvent = {
   memberId?: number;
 };
 
-// async function listEvents(): Promise<Event[]> {
-//   return prisma.event.findMany();
-// }
+async function listEvents(): Promise<Event[]> {
+  return prisma.event.findMany();
+}
 
 // async function getEvent(eventId: number) {
 //   return prisma.event.findFirst({ where: { id: eventId } });

03_source/cms_backend/src/app/services/eventItem.service.ts

@@ -12,9 +12,9 @@ import type { EventItem } from '@prisma/client';
 import prisma from '../lib/prisma';
 
 type CreateEvent = {
-  eventDate: DateTime;
+  eventDate: Date;
   title: string;
-  joinMembers?: Json[];
+  joinMembers?: JSON[];
   price: number;
   currency: string;
   duration_m: number;
@@ -26,9 +26,9 @@ type CreateEvent = {
 };
 
 type UpdateEvent = {
-  eventDate?: DateTime;
+  eventDate?: Date;
   title?: string;
-  joinMembers?: Json[];
+  joinMembers?: JSON[];
   price?: number;
   currency?: string;
   duration_m?: number;

03_source/cms_backend/src/app/services/order.service.ts

@@ -11,9 +11,24 @@ import type { OrderItem } from '@prisma/client';
 import prisma from '../lib/prisma';
 
 type CreateOrderItem = {
-  orderNumber?: string;
+  // orderNumber?: string;
   // status?: string;
   // eventIds?: number[];
+
+  taxes: number;
+  status: string;
+  shipping: number;
+  discount: number;
+  subtotal: number;
+  orderNumber: string;
+  totalAmount: number;
+  totalQuantity: number;
+  history: Record<string, any>;
+  payment: Record<string, any>;
+  customer: Record<string, any>;
+  delivery: Record<string, any>;
+  items: Record<string, any>[];
+  shippingAddress: Record<string, any>;
 };
 
 type UpdateOrderItem = {

03_source/cms_backend/src/app/services/product.service.ts

@@ -1,5 +1,7 @@
 // src/app/services/product.service.ts
 //
+// REQ0182 frontend product details
+//
 // PURPOSE:
 // - Service for handling ProductItem Record
 //
@@ -65,11 +67,19 @@ type UpdateProduct = {
 };
 
 async function listProducts(): Promise<ProductItem[]> {
-  return prisma.productItem.findMany();
+  return prisma.productItem.findMany({
+    include: {
+      reviews: true,
+    },
+  });
 }
 
 async function getProduct(productId: string): Promise<ProductItem | null> {
-  return prisma.productItem.findUnique({ where: { id: productId } });
+  return prisma.productItem.findUnique({
+    where: { id: productId },
+    include: { reviews: true },
+    //
+  });
 }
 
 async function createProduct(createForm: CreateProduct) {

03_source/cms_backend/src/app/services/userItem.service.ts

@@ -38,7 +38,7 @@ async function getUserItem(userId: string): Promise<UserItem | null> {
   return prisma.userItem.findFirst({ where: { id: userId } });
 }
 
-async function updateUser(userId: string, updateForm: UpdateUser): Promise<User> {
+async function updateUser(userId: string, updateForm: UpdateUser): Promise<UserItem> {
   return prisma.userItem.update({
     where: { id: userId },
     data: updateForm,
@@ -82,7 +82,7 @@ async function changeToUser(userIdToPromote: string, userIdOfApplicant: string)
   return promoteResult;
 }
 
-async function getUserById1(id: string): Promise<UserItem | null> {
+async function getUserById(id: string): Promise<UserItem | null> {
   return prisma.userItem.findFirst({ where: { id } });
 }
 

03_source/cms_backend/src/constants.ts

@@ -1,7 +1,9 @@
+const isDev = process.env.NODE_ENV === 'development';
+
 const L_ERROR = 0;
 const L_WARN = 1;
 const L_INFO = 2;
 const L_DEBUG = 3;
 const L_TRACE = 4;
 
-export { L_WARN, L_INFO, L_ERROR, L_DEBUG, L_TRACE };
+export { L_WARN, L_INFO, L_ERROR, L_DEBUG, L_TRACE, isDev };

03_source/cms_backend/tsconfig.json

@@ -43,7 +43,8 @@
     "**/*.draft",
     "**/*.log",
     "**/*.tmp",
-    "**/*del"
+    "**/*del",
+    "prisma/*"
   ],
   "include": [
     "next-env.d.ts",

03_source/cms_backend/yarn.lock

@@ -770,6 +770,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/bcrypt@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@types/bcrypt/-/bcrypt-5.0.2.tgz#22fddc11945ea4fbc3655b3e8b8847cc9f811477"
+  integrity sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/estree@^1.0.6":
   version "1.0.7"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz"
@@ -790,6 +797,13 @@
   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@*":
+  version "24.0.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-24.0.1.tgz#e9bfcb1c35547437c294403b7bec497772a88b0a"
+  integrity sha512-MX4Zioh39chHlDJbKmEgydJDS3tspMP/lnQC67G3SWsTnb9NeYVWOjkxpOSy4oMfPs4StcWHwBrvUb4ybfnuaw==
+  dependencies:
+    undici-types "~7.8.0"
+
 "@types/node@^22.13.13":
   version "22.13.13"
   resolved "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz"
@@ -3486,6 +3500,11 @@ undici-types@~6.20.0:
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz"
   integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
 
+undici-types@~7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.8.0.tgz#de00b85b710c54122e44fbfd911f8d70174cd294"
+  integrity sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==
+
 unique-names-generator@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/unique-names-generator/-/unique-names-generator-4.7.1.tgz#966407b12ba97f618928f77322cfac8c80df5597"

03_source/docker/docker-compose.dev.yml

@@ -1,14 +1,23 @@
+#
+# REQ0180 service port schedule
+#
 services:
   frontend:
-    command: 'sleep infinity'
+    command: "sleep infinity"
+    ports:
+      - 8080:8080
 
   mobile:
-    command: 'sleep infinity'
+    command: "sleep infinity"
+    ports:
+      - 8081:3000
 
   cms_backend:
-    command: 'sleep infinity'
+    command: "sleep infinity"
+    ports:
+      - 7272:7272
+      - 5555:5555
 
   postgres:
-    # container_name: postgres
     ports:
-      - '5432:5432'
+      - 5432:5432

03_source/docker/docker-compose.yml

@@ -1,3 +1,6 @@
+#
+# REQ0180 service port schedule
+#
 volumes:
   db:
     driver: local
@@ -11,8 +14,8 @@ services:
       - 10001:8080
     volumes:
       - ../frontend:/app
-    working_dir: '/app'
-    command: './dev.sh'
+    working_dir: "/app"
+    command: "./scripts/20_prod.sh"
 
   mobile:
     image: 192.168.10.61:5000/hksingleparty_mobile
@@ -22,8 +25,8 @@ services:
       - 10004:3000
     volumes:
       - ../mobile:/app
-    working_dir: '/app'
-    command: './dev.sh'
+    working_dir: "/app"
+    command: "./scripts/20_prod.sh"
 
   cms_backend:
     image: 192.168.10.61:5000/demo_minimal_kit_backend
@@ -36,8 +39,8 @@ services:
       - 10003:5555
     volumes:
       - ../cms_backend:/app
-    working_dir: '/app'
-    command: './dev.sh'
+    working_dir: "/app"
+    command: "./scripts/20_prod.sh"
 
   postgres:
     image: postgres:14.1-alpine
@@ -45,6 +48,6 @@ services:
     env_file:
       - .env
     expose:
-      - '5432'
+      - "5432"
     volumes:
       - db:/var/lib/postgresql/data

03_source/frontend/.gitignore

@@ -1,3 +1,8 @@
+**/*del
+**/*bak
+**/*copy*
+
+
 # Logs
 logs
 *.log

03_source/frontend/eslint.config.mjs

@@ -92,6 +92,8 @@ 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,
       {
@@ -100,8 +102,6 @@ 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,
       {

03_source/frontend/package.json

@@ -21,7 +21,7 @@
     "re:build": "yarn clean && yarn install && yarn build",
     "re:build-npm": "npm run clean && npm install && npm run build",
     "tsc:dev": "yarn dev & yarn tsc:watch",
-    "tsc:watch": "tsc --noEmit --watch",
+    "tsc:w": "tsc --noEmit --watch",
     "tsc:print": "npx tsc --showConfig"
   },
   "engines": {
@@ -43,6 +43,7 @@
     "@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",
@@ -52,7 +53,7 @@
     "@fullcalendar/timegrid": "^6.1.15",
     "@fullcalendar/timeline": "^6.1.15",
     "@hookform/resolvers": "^4.1.3",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
     "@iconify/react": "^5.2.0",
     "@mui/lab": "^7.0.0-beta.10",
     "@mui/material": "^7.0.1",

03_source/frontend/prettier.config.mjs

@@ -12,7 +12,7 @@ const config = {
   trailingComma: 'es5',
   plugins: [
     //
-    // '@ianvs/prettier-plugin-sort-imports',
+    '@ianvs/prettier-plugin-sort-imports',
   ],
 };
 

03_source/frontend/scripts/00_dev.sh

@@ -2,8 +2,9 @@
 
 yarn --dev
 
-while true; do
+clear
 
+while true; do
   # yarn tsc:print
   yarn lint:print
 

03_source/frontend/scripts/10_build.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+yarn build

03_source/frontend/scripts/20_prod.sh

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

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

@@ -1,10 +1,8 @@
-import type { SWRConfiguration } from 'swr';
-import type { IPostItem } from 'src/types/blog';
-
-import useSWR from 'swr';
 import { useMemo } from 'react';
-
-import { fetcher, endpoints } from 'src/lib/axios';
+import { endpoints, fetcher } from 'src/lib/axios';
+import type { IPostItem } from 'src/types/blog';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 
 // ----------------------------------------------------------------------
 

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

@@ -1,11 +1,9 @@
-import type { SWRConfiguration } from 'swr';
-import type { ICalendarEvent } from 'src/types/calendar';
-
 import { useMemo } from 'react';
+import axios, { endpoints, fetcher } from 'src/lib/axios';
+import type { ICalendarEvent } from 'src/types/calendar';
+import type { SWRConfiguration } from 'swr';
 import useSWR, { mutate } from 'swr';
 
-import axios, { fetcher, endpoints } from 'src/lib/axios';
-
 // ----------------------------------------------------------------------
 
 const enableServer = false;

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

@@ -1,12 +1,10 @@
-import type { SWRConfiguration } from 'swr';
-import type { IChatMessage, IChatParticipant, IChatConversation } from 'src/types/chat';
-
-import { useMemo } from 'react';
 import { keyBy } from 'es-toolkit';
+import { useMemo } from 'react';
+import axios, { endpoints, fetcher } from 'src/lib/axios';
+import type { IChatConversation, IChatMessage, IChatParticipant } from 'src/types/chat';
+import type { SWRConfiguration } from 'swr';
 import useSWR, { mutate } from 'swr';
 
-import axios, { fetcher, endpoints } from 'src/lib/axios';
-
 // ----------------------------------------------------------------------
 
 const enableServer = false;

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

@@ -1,11 +1,9 @@
-import type { SWRConfiguration } from 'swr';
 import type { UniqueIdentifier } from '@dnd-kit/core';
-import type { IKanban, IKanbanTask, IKanbanColumn } from 'src/types/kanban';
-
+import { startTransition, useMemo } from 'react';
+import axios, { endpoints, fetcher } from 'src/lib/axios';
+import type { IKanban, IKanbanColumn, IKanbanTask } from 'src/types/kanban';
+import type { SWRConfiguration } from 'swr';
 import useSWR, { mutate } from 'swr';
-import { useMemo, startTransition } from 'react';
-
-import axios, { fetcher, endpoints } from 'src/lib/axios';
 
 // ----------------------------------------------------------------------
 

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

@@ -1,11 +1,9 @@
-import type { SWRConfiguration } from 'swr';
-import type { IMail, IMailLabel } from 'src/types/mail';
-
-import useSWR from 'swr';
-import { useMemo } from 'react';
 import { keyBy } from 'es-toolkit';
-
-import { fetcher, endpoints } from 'src/lib/axios';
+import { useMemo } from 'react';
+import { endpoints, fetcher } from 'src/lib/axios';
+import type { IMail, IMailLabel } from 'src/types/mail';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 
 // ----------------------------------------------------------------------
 

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

@@ -1,8 +1,8 @@
 // src/actions/order.ts
 import { useMemo } from 'react';
 import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
-import type { IProductItem } from 'src/types/product';
 import type { IOrderItem } from 'src/types/order';
+import type { IProductItem } from 'src/types/product';
 import type { SWRConfiguration } from 'swr';
 import useSWR from 'swr';
 

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

@@ -1,9 +1,11 @@
+//
 // src/actions/product.ts
+//
 import { useMemo } from 'react';
 import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
 import type { IProductItem } from 'src/types/product';
 import type { SWRConfiguration } from 'swr';
-import useSWR from 'swr';
+import useSWR, { mutate } from 'swr';
 
 // ----------------------------------------------------------------------
 
@@ -22,11 +24,7 @@ type ProductsData = {
 export function useGetProducts() {
   const url = endpoints.product.list;
 
-  const { data, isLoading, error, isValidating, mutate } = useSWR<ProductsData>(
-    url,
-    fetcher,
-    swrOptions
-  );
+  const { data, isLoading, error, isValidating } = useSWR<ProductsData>(url, fetcher, swrOptions);
 
   const memoizedValue = useMemo(
     () => ({
@@ -35,9 +33,8 @@ export function useGetProducts() {
       productsError: error,
       productsValidating: isValidating,
       productsEmpty: !isLoading && !isValidating && !data?.products.length,
-      mutate,
     }),
-    [data?.products, error, isLoading, isValidating, mutate]
+    [data?.products, error, isLoading, isValidating]
   );
 
   return memoizedValue;
@@ -56,10 +53,11 @@ export function useGetProduct(productId: string) {
 
   const memoizedValue = useMemo(
     () => ({
-      currentProduct: data?.product,
+      product: data?.product,
       productLoading: isLoading,
       productError: error,
       productValidating: isValidating,
+      mutate,
     }),
     [data?.product, error, isLoading, isValidating]
   );
@@ -97,140 +95,80 @@ export function useSearchProducts(query: string) {
 
 // ----------------------------------------------------------------------
 
-type SaveProductData = {
-  // id: string;
+export async function createProduct(productData: IProductItem) {
+  /**
+   * Work on server
+   */
+  const data = { productData };
+  await axiosInstance.post(endpoints.product.create, data);
 
-  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;
-  // }[];
-};
+  /**
+   * Work in local
+   */
+  mutate(
+    endpoints.product.list,
+    (currentData: any) => {
+      const currentProducts: IProductItem[] = currentData?.products;
 
-export async function saveProduct(productId: string, saveProductData: SaveProductData) {
-  console.log('save product ?');
-  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+      const products = [...currentProducts, productData];
 
-  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;
+      return { ...currentData, products };
+    },
+    false
+  );
 }
 
 // ----------------------------------------------------------------------
 
-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 updateProduct(productData: Partial<IProductItem>) {
+  /**
+   * Work on server
+   */
+  const data = { productData };
+  await axiosInstance.put(endpoints.product.update, data);
 
-export async function createProduct(createProductData: CreateProductData) {
-  console.log('create product ?');
-  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+  /**
+   * Work in local
+   */
 
-  const res = await axiosInstance.post('http://localhost:7272/api/product/createProduct', {
-    data: createProductData,
-  });
+  mutate(
+    endpoints.product.list,
+    (currentData: any) => {
+      const currentProducts: IProductItem[] = currentData?.products;
 
-  return res;
+      const products = currentProducts.map((product) =>
+        product.id === productData.id ? { ...product, ...productData } : product
+      );
+
+      return { ...currentData, products };
+    },
+    false
+  );
 }
 
 // ----------------------------------------------------------------------
 
-type DeleteProductResponse = {
-  success: boolean;
-  message?: string;
-};
+export async function deleteProduct(productId: string) {
+  /**
+   * Work on server
+   */
+  const data = { productId };
+  await axiosInstance.patch(endpoints.product.delete, data);
 
-export async function deleteProduct(productId: string): Promise<DeleteProductResponse> {
-  const url = `http://localhost:7272/api/product/deleteProduct?productId=${productId}`;
+  /**
+   * Work in local
+   */
 
-  try {
-    const res = await axiosInstance.delete(url);
-    console.log({ res });
+  mutate(
+    endpoints.product.list,
+    (currentData: any) => {
+      console.log({ currentData });
+      const currentProducts: IProductItem[] = currentData?.products;
 
-    return {
-      success: true,
-      message: 'Product deleted successfully',
-    };
-  } catch (error) {
-    return {
-      success: false,
-      message: error instanceof Error ? error.message : 'Failed to delete product',
-    };
-  }
+      const products = currentProducts.filter((product) => product.id !== productId);
+
+      return { ...currentData, products };
+    },
+    false
+  );
 }

03_source/frontend/src/assets/icons/email-inbox-icon.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/icons/new-password-icon.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/icons/password-icon.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/icons/plan-free-icon.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/icons/plan-premium-icon.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/icons/sent-icon.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/illustrations/avatar-shape.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/illustrations/booking-illustration.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/illustrations/check-in-illustration.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/illustrations/check-out-illustration.tsx

@@ -1,8 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
 // ----------------------------------------------------------------------
 

03_source/frontend/src/assets/illustrations/coming-soon-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/forbidden-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/maintenance-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/motivation-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/order-complete-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/page-not-found-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/seo-illustration.tsx

@@ -1,11 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { CONFIG } from 'src/global-config';
-
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/assets/illustrations/upload-illustration.tsx

@@ -1,9 +1,6 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-
-import { memo } from 'react';
-
 import SvgIcon from '@mui/material/SvgIcon';
-
+import { memo } from 'react';
 import { BackgroundShape } from './background-shape';
 
 // ----------------------------------------------------------------------

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

@@ -1,15 +1,21 @@
 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';
-
-import type { ConfirmDialogProps } from './types';
+import DialogTitle from '@mui/material/DialogTitle';
 import { useTranslation } from 'react-i18next';
+import type { ConfirmDialogProps } from './types';
 
 // ----------------------------------------------------------------------
 
-export function ConfirmDialog({ open, title, action, content, onClose, ...other }: ConfirmDialogProps) {
+export function ConfirmDialog({
+  open,
+  title,
+  action,
+  content,
+  onClose,
+  ...other
+}: ConfirmDialogProps) {
   const { t } = useTranslation();
 
   return (

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

@@ -1,22 +1,22 @@
 // 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 { RHFCode } from './rhf-code';
+import { RHFCountrySelect } from './rhf-country-select';
 import { RHFDatePicker, RHFMobileDateTimePicker } from './rhf-date-picker';
+import { RHFEditor } from './rhf-editor';
+import { RHFNumberInput } from './rhf-number-input';
+import { RHFPhoneInput } from './rhf-phone-input';
+import { RHFRadioGroup } from './rhf-radio-group';
+import { RHFRating } from './rhf-rating';
+import { RHFMultiSelect, RHFSelect } from './rhf-select';
+import { RHFSlider } from './rhf-slider';
+import { RHFMultiSwitch, RHFSwitch } from './rhf-switch';
+import { RHFTextField } from './rhf-text-field';
+import { RHFUpload } from './rhf-upload';
+import { RHFUploadAvatar } from './rhf-upload-avatar';
+import { RHFUploadBox } from './rhf-upload-box';
 
 // ----------------------------------------------------------------------
 

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

@@ -1,7 +1,9 @@
 import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
 import { Controller, useFormContext } from 'react-hook-form';
-import { Upload } from '../upload';
+import { Upload, UploadAvatar, UploadBox } from '../upload';
 import type { UploadProps } from '../upload';
+import { HelperText } from './help-text';
 
 // ----------------------------------------------------------------------
 
@@ -12,6 +14,48 @@ 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) {
@@ -35,8 +79,6 @@ 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-sub-list.tsx

@@ -1,17 +1,13 @@
-import { isEqualPath } from 'minimal-shared/utils';
-
 import Link from '@mui/material/Link';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-
-import { usePathname } from 'src/routes/hooks';
-import { RouterLink } from 'src/routes/components';
-
-import { megaMenuClasses } from '../styles';
-import { NavUl, NavLi } from './nav-elements';
-
-import type { NavSubItemProps, NavSubListProps } from '../types';
+import { isEqualPath } from 'minimal-shared/utils';
 import { useTranslation } from 'react-i18next';
+import { RouterLink } from 'src/routes/components';
+import { usePathname } from 'src/routes/hooks';
+import { megaMenuClasses } from '../styles';
+import type { NavSubItemProps, NavSubListProps } from '../types';
+import { NavLi, NavUl } from './nav-elements';
 
 // ----------------------------------------------------------------------
 
@@ -24,7 +20,13 @@ export function NavSubList({ data, slotProps, ...other }: NavSubListProps) {
       {data?.map((list) => (
         <NavLi key={list?.subheader ?? list.items[0].title} {...other}>
           {list?.subheader && (
-            <Typography noWrap component="div" variant="subtitle2" className={megaMenuClasses.subheader} sx={{ mb: 1, ...slotProps?.subheader }}>
+            <Typography
+              noWrap
+              component="div"
+              variant="subtitle2"
+              className={megaMenuClasses.subheader}
+              sx={{ mb: 1, ...slotProps?.subheader }}
+            >
               {list.subheader}
             </Typography>
           )}

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

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

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

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

03_source/frontend/src/lib/axios.ts

@@ -0,0 +1,87 @@
+import type { AxiosRequestConfig } from 'axios';
+import axios from 'axios';
+import { CONFIG } from 'src/global-config';
+
+// ----------------------------------------------------------------------
+
+const axiosInstance = axios.create({ baseURL: CONFIG.serverUrl });
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
+);
+
+export default axiosInstance;
+
+// ----------------------------------------------------------------------
+
+export const fetcher = async (args: string | [string, AxiosRequestConfig]) => {
+  try {
+    const [url, config] = Array.isArray(args) ? args : [args];
+
+    const res = await axiosInstance.get(url, { ...config });
+
+    return res.data;
+  } catch (error) {
+    console.error('Failed to fetch:', error);
+    throw error;
+  }
+};
+
+// ----------------------------------------------------------------------
+
+export const endpoints = {
+  chat: '/api/chat',
+  kanban: '/api/kanban',
+  calendar: '/api/calendar',
+  auth: {
+    me: '/api/auth/me',
+    signIn: '/api/auth/sign-in',
+    signUp: '/api/auth/sign-up',
+  },
+  mail: {
+    list: '/api/mail/list',
+    details: '/api/mail/details',
+    labels: '/api/mail/labels',
+  },
+  post: {
+    list: '/api/post/list',
+    details: '/api/post/details',
+    latest: '/api/post/latest',
+    search: '/api/post/search',
+  },
+  product: {
+    list: '/api/product/list',
+    details: '/api/product/details',
+    search: '/api/product/search',
+    save: '/api/product/saveProduct',
+    create: '/api/product/create',
+    update: '/api/product/update',
+    delete: '/api/product/delete',
+  },
+  user: {
+    list: '/api/user/list',
+    profile: '/api/user/profile',
+    update: '/api/user/update',
+    settings: '/api/user/settings',
+    details: '/api/user/details',
+  },
+  order: {
+    list: '/api/order/list',
+    profile: '/api/order/profile',
+    update: '/api/order/update',
+    settings: '/api/order/settings',
+    details: '/api/order/details',
+    changeStatus: (orderId: string) => `/api/order/changeStatus?orderId=${orderId}`,
+  },
+  invoice: {
+    list: '/api/invoice/list',
+    profile: '/api/invoice/profile',
+    update: '/api/invoice/update',
+    saveInvoice: (invoiceId: string) => `/api/invoice/saveInvoice?invoiceId=${invoiceId}`,
+    settings: '/api/invoice/settings',
+    details: '/api/invoice/details',
+    changeStatus: (invoiceId: string) => `/api/invoice/changeStatus?invoiceId=${invoiceId}`,
+    search: '/api/invoice/search',
+  },
+};

03_source/frontend/src/lib/firebase.ts

@@ -0,0 +1,19 @@
+import type { FirebaseApp } from 'firebase/app';
+import type { Auth as AuthType } from 'firebase/auth';
+import type { Firestore as FirestoreType } from 'firebase/firestore';
+
+import { getAuth } from 'firebase/auth';
+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+
+import { CONFIG } from 'src/global-config';
+
+// ----------------------------------------------------------------------
+
+const isFirebase = CONFIG.auth.method === 'firebase';
+
+export const firebaseApp = isFirebase ? initializeApp(CONFIG.firebase) : ({} as FirebaseApp);
+
+export const AUTH = isFirebase ? getAuth(firebaseApp) : ({} as AuthType);
+
+export const FIRESTORE = isFirebase ? getFirestore(firebaseApp) : ({} as FirestoreType);

03_source/frontend/src/lib/supabase.ts

@@ -0,0 +1,16 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+import { createClient } from '@supabase/supabase-js';
+
+import { CONFIG } from 'src/global-config';
+
+// ----------------------------------------------------------------------
+
+const isSupabase = CONFIG.auth.method === 'supabase';
+
+const supabaseUrl = CONFIG.supabase.url;
+const supabaseKey = CONFIG.supabase.key;
+
+export const supabase = isSupabase
+  ? createClient(supabaseUrl, supabaseKey)
+  : ({} as SupabaseClient<any, 'public', any>);

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

@@ -1,10 +1,8 @@
 // src/pages/dashboard/product/details.tsx
 
-import { useParams } from 'src/routes/hooks';
-
-import { CONFIG } from 'src/global-config';
 import { useGetProduct } from 'src/actions/product';
-
+import { CONFIG } from 'src/global-config';
+import { useParams } from 'src/routes/hooks';
 import { ProductDetailsView } from 'src/sections/product/view';
 
 // ----------------------------------------------------------------------
@@ -14,7 +12,7 @@ const metadata = { title: `Product details | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const { currentProduct: product, productLoading, productError } = useGetProduct(id);
+  const { product, productLoading, productError } = useGetProduct(id);
 
   return (
     <>

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

@@ -1,8 +1,6 @@
-import { useParams } from 'src/routes/hooks';
-
-import { CONFIG } from 'src/global-config';
 import { useGetProduct } from 'src/actions/product';
-
+import { CONFIG } from 'src/global-config';
+import { useParams } from 'src/routes/hooks';
 import { ProductEditView } from 'src/sections/product/view';
 
 // ----------------------------------------------------------------------
@@ -12,13 +10,13 @@ const metadata = { title: `Product edit | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const { currentProduct } = useGetProduct(id);
+  const { product } = useGetProduct(id);
 
   return (
     <>
       <title>{metadata.title}</title>
 
-      <ProductEditView product={currentProduct} />
+      <ProductEditView product={product} />
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 // src/pages/dashboard/product/list.tsx
-
+//
 import { CONFIG } from 'src/global-config';
 import { ProductListView } from 'src/sections/product/view';
 

03_source/frontend/src/pages/product/details.tsx

@@ -12,7 +12,7 @@ const metadata = { title: `Product details - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const { currentProduct: product, productLoading, productError } = useGetProduct(id);
+  const { product, productLoading, productError } = useGetProduct(id);
 
   return (
     <>

03_source/frontend/src/pages/product/helloworld.tsx

@@ -0,0 +1,5 @@
+function Helloworld() {
+  return <>helloworld</>;
+}
+
+export default Helloworld;

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

@@ -1,6 +1,5 @@
-import { CONFIG } from 'src/global-config';
 import { useGetProducts } from 'src/actions/product';
-
+import { CONFIG } from 'src/global-config';
 import { ProductShopView } from 'src/sections/product/view';
 
 // ----------------------------------------------------------------------

03_source/frontend/src/sections/product/product-item.tsx

@@ -1,21 +1,16 @@
-import type { IProductItem } from 'src/types/product';
-
 import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
 import Card from '@mui/material/Card';
+import Fab, { fabClasses } from '@mui/material/Fab';
+import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
-import Fab, { fabClasses } from '@mui/material/Fab';
-
-import { RouterLink } from 'src/routes/components';
-
-import { fCurrency } from 'src/utils/format-number';
-
-import { Label } from 'src/components/label';
-import { Image } from 'src/components/image';
-import { Iconify } from 'src/components/iconify';
 import { ColorPreview } from 'src/components/color-utils';
-
+import { Iconify } from 'src/components/iconify';
+import { Image } from 'src/components/image';
+import { Label } from 'src/components/label';
+import { RouterLink } from 'src/routes/components';
+import type { IProductItem } from 'src/types/product';
+import { fCurrency } from 'src/utils/format-number';
 import { useCheckoutContext } from '../checkout/context';
 
 // ----------------------------------------------------------------------

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

@@ -1,11 +1,8 @@
 import type { BoxProps } from '@mui/material/Box';
-import type { IProductItem } from 'src/types/product';
-
 import Box from '@mui/material/Box';
 import Pagination, { paginationClasses } from '@mui/material/Pagination';
-
 import { paths } from 'src/routes/paths';
-
+import type { IProductItem } from 'src/types/product';
 import { ProductItem } from './product-item';
 import { ProductItemSkeleton } from './product-skeleton';
 

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

@@ -21,7 +21,7 @@ import {
   PRODUCT_COLOR_NAME_OPTIONS,
   PRODUCT_SIZE_OPTIONS,
 } from 'src/_mock';
-import { createProduct, saveProduct } from 'src/actions/product';
+import { createProduct, updateProduct } from 'src/actions/product';
 import { Field, Form, schemaHelper } from 'src/components/hook-form';
 import { Iconify } from 'src/components/iconify';
 import { toast } from 'src/components/snackbar';
@@ -194,9 +194,6 @@ 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];
@@ -205,12 +202,14 @@ export function ProductNewEditForm({ currentProduct }: Props) {
         }
       }
 
+      const sanitizedValues: IProductItem = values as unknown as IProductItem;
+
       if (currentProduct) {
         // perform save
-        await saveProduct(currentProduct.id, values);
+        updateProduct(sanitizedValues);
       } else {
         // perform create
-        await createProduct(values);
+        createProduct(sanitizedValues);
       }
 
       toast.success(currentProduct ? 'Update success!' : 'Create success!');

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

@@ -1,18 +1,14 @@
 // src/sections/product/product-table-row.tsx
-import type { GridCellParams } from '@mui/x-data-grid';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
 import Avatar from '@mui/material/Avatar';
-import ListItemText from '@mui/material/ListItemText';
+import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
-
-import { RouterLink } from 'src/routes/components';
-
-import { fCurrency } from 'src/utils/format-number';
-import { fTime, fDate } from 'src/utils/format-time';
-
+import Link from '@mui/material/Link';
+import ListItemText from '@mui/material/ListItemText';
+import type { GridCellParams } from '@mui/x-data-grid';
 import { Label } from 'src/components/label';
+import { RouterLink } from 'src/routes/components';
+import { fCurrency } from 'src/utils/format-number';
+import { fDate, fTime } from 'src/utils/format-time';
 
 // ----------------------------------------------------------------------
 

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

@@ -1,9 +1,6 @@
-import { paths } from 'src/routes/paths';
-
-import { DashboardContent } from 'src/layouts/dashboard';
-
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
+import { DashboardContent } from 'src/layouts/dashboard';
+import { paths } from 'src/routes/paths';
 import { ProductNewEditForm } from '../product-new-edit-form';
 
 // ----------------------------------------------------------------------

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

@@ -1,11 +1,7 @@
-import type { IProductItem } from 'src/types/product';
-
-import { paths } from 'src/routes/paths';
-
-import { DashboardContent } from 'src/layouts/dashboard';
-
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
+import { DashboardContent } from 'src/layouts/dashboard';
+import { paths } from 'src/routes/paths';
+import type { IProductItem } from 'src/types/product';
 import { ProductNewEditForm } from '../product-new-edit-form';
 
 // ----------------------------------------------------------------------

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

@@ -35,9 +35,11 @@ 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 { endpoints } from 'src/lib/axios';
 import { RouterLink } from 'src/routes/components';
 import { paths } from 'src/routes/paths';
 import type { IProductItem, IProductTableFilters } from 'src/types/product';
+import { mutate } from 'swr';
 import { ProductTableFiltersResult } from '../product-table-filters-result';
 import {
   RenderCellCreatedAt,
@@ -59,6 +61,8 @@ const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
 export function ProductListView() {
   const { t } = useTranslation();
 
+  const confirmDialog = useBoolean();
+
   const PRODUCT_STOCK_OPTIONS = [
     { value: 'in stock', label: t('In stock') },
     { value: 'low stock', label: t('Low stock') },
@@ -75,7 +79,7 @@ export function ProductListView() {
   const confirmDeleteSingleItemDialog = useBoolean();
   const [idToDelete, setIdToDelete] = useState<string | null>(null);
 
-  const { products, productsLoading, mutate } = useGetProducts();
+  const { products, productsLoading } = useGetProducts();
 
   const [tableData, setTableData] = useState<IProductItem[]>(products);
   const [selectedRowIds, setSelectedRowIds] = useState<GridRowSelectionModel>([]);
@@ -113,13 +117,29 @@ export function ProductListView() {
       toast.error('Delete failed!');
     }
 
-    // TODO: reload table here
-    mutate();
-
     // setTableData(deleteRow);
     setDeleteInProgress(false);
   }, [idToDelete, mutate]);
 
+  // NOTE: this is working using example from calendar
+  const handleDeleteRow = useCallback(
+    async (id: string) => {
+      try {
+        await deleteProduct(id);
+
+        // invalidate cache to reload list
+        await mutate(endpoints.product.list);
+
+        toast.success('Delete success!');
+      } catch (error) {
+        console.error(error);
+
+        toast.error('Delete error!');
+      }
+    },
+    [tableData]
+  );
+
   const handleDeleteRows = useCallback(() => {
     const deleteRows = tableData.filter((row) => !selectedRowIds.includes(row.id));
 

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

@@ -1,33 +1,28 @@
-import type { IProductItem } from 'src/types/product';
-import type { Theme, SxProps } from '@mui/material/styles';
-
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import type { SxProps, Theme } from '@mui/material/styles';
+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 { varAlpha } from 'minimal-shared/utils';
-
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-import Tabs from '@mui/material/Tabs';
-import Card from '@mui/material/Card';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-
-import { paths } from 'src/routes/paths';
-import { RouterLink } from 'src/routes/components';
-
-import { Iconify } from 'src/components/iconify';
-import { EmptyContent } from 'src/components/empty-content';
+import { useTranslation } from 'react-i18next';
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
-
-import { CartIcon } from '../cart-icon';
+import { EmptyContent } from 'src/components/empty-content';
+import { Iconify } from 'src/components/iconify';
+import { RouterLink } from 'src/routes/components';
+import { paths } from 'src/routes/paths';
+import type { IProductItem } from 'src/types/product';
 import { useCheckoutContext } from '../../checkout/context';
-import { ProductDetailsSkeleton } from '../product-skeleton';
-import { ProductDetailsReview } from '../product-details-review';
-import { ProductDetailsSummary } from '../product-details-summary';
+import { CartIcon } from '../cart-icon';
 import { ProductDetailsCarousel } from '../product-details-carousel';
 import { ProductDetailsDescription } from '../product-details-description';
-import { useTranslation } from 'react-i18next';
+import { ProductDetailsReview } from '../product-details-review';
+import { ProductDetailsSummary } from '../product-details-summary';
+import { ProductDetailsSkeleton } from '../product-skeleton';
 
 // ----------------------------------------------------------------------
 

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

@@ -11,6 +11,7 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import Tooltip from '@mui/material/Tooltip';
 import { useBoolean, usePopover } from 'minimal-shared/hooks';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ConfirmDialog } from 'src/components/custom-dialog';
 import { CustomPopover } from 'src/components/custom-popover';
@@ -19,7 +20,6 @@ import { Label } from 'src/components/label';
 import { RouterLink } from 'src/routes/components';
 import type { IUserItem } from 'src/types/user';
 import { UserQuickEditForm } from './user-quick-edit-form';
-import { useState } from 'react';
 
 // ----------------------------------------------------------------------
 

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

@@ -29,41 +29,32 @@ export type IProductReview = {
 
 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;
+  createdAt: IDateValue;
+  //
   available: number;
-  totalSold: number;
+  category: string;
+  code: string;
+  colors: string[];
+  coverUrl: string;
   description: string;
+  gender: string[];
+  images: string[];
+  inventoryType: string;
+  name: string;
+  newLabel: { content: string; enabled: boolean };
+  price: number;
+  priceSale: number | null;
+  publish: string;
+  quantity: number;
+  ratings: { name: string; starCount: number; reviewCount: number }[];
+  reviews: IProductReview[];
+  saleLabel: { content: string; enabled: boolean };
+  sizes: string[];
+  sku: string;
+  subDescription: string;
+  tags: string[];
+  taxes: number;
   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;
-  }[];
+  totalSold: number;
 };