"feat: rename 'createdDate' to 'createDate' across frontend, backend, and mobile codebases"

03_source/cms_backend/package.json

@@ -27,7 +27,7 @@
     "unseed": "tsx ./prisma/unseed.ts",
     "db:generate": "prisma generate",
     "db:push": "prisma db push --force-reset",
-    "db:push:w": "npx nodemon --delay 5 --ext \"ts,tsx,prisma\" --exec \"yarn db:push && yarn seed && yarn db:studio\"",
+    "db:push:w": "npx nodemon --delay 1 --watch prisma --ext \"ts,tsx,prisma\" --exec \"yarn db:push && yarn seed\"",
     "db:studio": "prisma studio"
   },
   "engines": {

03_source/cms_backend/prisma/schema.prisma

@@ -266,85 +266,85 @@ model Mail {
   // attachments  MailAttachment[]
 }
 
-model OrderHistory {
-  id             Int        @id @default(autoincrement())
-  createdAt      DateTime   @default(now())
-  updatedAt      DateTime   @updatedAt
-  //
-  orderTime      DateTime
-  paymentTime    DateTime
-  deliveryTime   DateTime
-  completionTime DateTime
-  timeline       Json[]
-  OrderItem      OrderItem? @relation(fields: [orderItemId], references: [id])
-  orderItemId    Int?
-}
+// model OrderHistory {
+//   id             Int        @id @default(autoincrement())
+//   createdAt      DateTime   @default(now())
+//   updatedAt      DateTime   @updatedAt
+//   //
+//   orderTime      DateTime   @default(now())
+//   paymentTime    DateTime
+//   deliveryTime   DateTime
+//   completionTime DateTime
+//   timeline       Json[]
+//   OrderItem      OrderItem? @relation(fields: [orderItemId], references: [id])
+//   orderItemId    Int?
+// }
 
-model OrderShippingAddress {
-  id          Int        @id @default(autoincrement())
-  createdAt   DateTime   @default(now())
-  updatedAt   DateTime   @updatedAt
-  //
-  fullAddress String
-  phoneNumber String
-  OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
-  orderItemId Int?
-}
+// model OrderShippingAddress {
+//   id          Int        @id @default(autoincrement())
+//   createdAt   DateTime   @default(now())
+//   updatedAt   DateTime   @updatedAt
+//   //
+//   fullAddress String
+//   phoneNumber String
+//   OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
+//   orderItemId Int?
+// }
 
-model OrderPayment {
-  id          Int        @id @default(autoincrement())
-  createdAt   DateTime   @default(now())
-  updatedAt   DateTime   @updatedAt
-  //
-  cardType    String
-  cardNumber  String
-  OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
-  orderItemId Int?
-}
+// model OrderPayment {
+//   id          Int        @id @default(autoincrement())
+//   createdAt   DateTime   @default(now())
+//   updatedAt   DateTime   @updatedAt
+//   //
+//   cardType    String
+//   cardNumber  String
+//   OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
+//   orderItemId Int?
+// }
 
-model OrderDelivery {
-  id             Int        @id @default(autoincrement())
-  createdAt      DateTime   @default(now())
-  updatedAt      DateTime   @updatedAt
-  //
-  shipBy         String
-  speedy         String
-  trackingNumber String
-  OrderItem      OrderItem? @relation(fields: [orderItemId], references: [id])
-  orderItemId    Int?
-}
+// model OrderDelivery {
+//   id             Int        @id @default(autoincrement())
+//   createdAt      DateTime   @default(now())
+//   updatedAt      DateTime   @updatedAt
+//   //
+//   shipBy         String
+//   speedy         String
+//   trackingNumber String
+//   OrderItem      OrderItem? @relation(fields: [orderItemId], references: [id])
+//   orderItemId    Int?
+// }
 
-model OrderCustomer {
-  id          Int        @id @default(autoincrement())
-  createdAt   DateTime   @default(now())
-  updatedAt   DateTime   @updatedAt
-  //
-  name        String
-  email       String
-  avatarUrl   String
-  ipAddress   String
-  OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
-  orderItemId Int?
-}
+// model OrderCustomer {
+//   id          Int        @id @default(autoincrement())
+//   createdAt   DateTime   @default(now())
+//   updatedAt   DateTime   @updatedAt
+//   //
+//   name        String
+//   email       String
+//   avatarUrl   String
+//   ipAddress   String
+//   OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
+//   orderItemId Int?
+// }
 
-model OrderProductItem {
-  id          Int        @id @default(autoincrement())
-  createdAt   DateTime   @default(now())
-  updatedAt   DateTime   @updatedAt
-  //
-  sku         String
-  name        String
-  price       Float
-  coverUrl    String
-  quantity    Float
-  OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
-  orderItemId Int?
-}
+// model OrderProductItem {
+//   id          Int        @id @default(autoincrement())
+//   createdAt   DateTime   @default(now())
+//   updatedAt   DateTime   @updatedAt
+//   //
+//   sku         String
+//   name        String
+//   price       Float
+//   coverUrl    String
+//   quantity    Float
+//   OrderItem   OrderItem? @relation(fields: [orderItemId], references: [id])
+//   orderItemId Int?
+// }
 
 model OrderItem {
-  id              Int                    @id @default(autoincrement())
-  createdAt       DateTime               @default(now())
-  updatedAt       DateTime               @updatedAt
+  id              String   @id @default(uuid())
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
   //
   taxes           Float
   status          String
@@ -354,12 +354,18 @@ model OrderItem {
   orderNumber     String
   totalAmount     Float
   totalQuantity   Float
-  history         OrderHistory[]
-  payment         OrderPayment[]
-  customer        OrderCustomer[]
-  delivery        OrderDelivery[]
-  items           OrderProductItem[]
-  shippingAddress OrderShippingAddress[]
+  history         Json
+  payment         Json
+  customer        Json
+  delivery        Json
+  items           Json[]
+  shippingAddress Json
+  // OrderProductItem     OrderProductItem[]
+  // OrderHistory         OrderHistory[]
+  // OrderDelivery        OrderDelivery[]
+  // OrderCustomer        OrderCustomer[]
+  // OrderPayment         OrderPayment[]
+  // OrderShippingAddress OrderShippingAddress[]
 }
 
 // src/types/tour.ts
@@ -780,8 +786,8 @@ model AddressItem {
   addressType     String?
   CheckoutState   CheckoutState[]
   checkoutStateId Int?
-  InvoiceTo       Invoice[]       @relation("invoice_to")
-  InvoiceFrom     Invoice[]       @relation("invoice_from")
+  // InvoiceTo       Invoice[]       @relation("invoice_to")
+  // InvoiceFrom     Invoice[]       @relation("invoice_from")
 }
 
 model SocialLink {
@@ -881,40 +887,45 @@ model InvoiceTableFilters {
 }
 
 model InvoiceItem {
-  id          Int      @id @default(autoincrement())
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
+  id            String   @id @default(uuid())
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
   //
-  title       String
-  price       Float
-  total       Float
-  service     String
-  quantity    Int
-  description String
-  Invoice     Invoice? @relation(fields: [invoiceId], references: [id])
-  invoiceId   Int?
-}
-
-model Invoice {
-  id            Int           @id @default(autoincrement())
-  createdAt     DateTime      @default(now())
-  updatedAt     DateTime      @updatedAt
-  //
-  sent          Int
   taxes         Float
   status        String
-  subtotal      Float
   discount      Float
   shipping      Float
+  subtotal      Float
   totalAmount   Float
-  dueDate       DateTime
+  items         Json[]
   invoiceNumber String
-  items         InvoiceItem[]
-  createDate    DateTime
-  invoiceTo     AddressItem[] @relation("invoice_to")
-  invoiceFrom   AddressItem[] @relation("invoice_from")
+  invoiceFrom   Json
+  invoiceTo     Json
+  sent          Float
+  dueDate       DateTime @default(now())
+  createDate    DateTime @default(now())
 }
 
+// model Invoice {
+//   id            Int           @id @default(autoincrement())
+//   createdAt     DateTime      @default(now())
+//   updatedAt     DateTime      @updatedAt
+//   //
+//   sent          Int
+//   taxes         Float
+//   status        String
+//   subtotal      Float
+//   discount      Float
+//   shipping      Float
+//   totalAmount   Float
+//   dueDate       DateTime
+//   invoiceNumber String
+//   items         InvoiceItem[]
+//   createDate    DateTime
+//   invoiceTo     AddressItem[] @relation("invoice_to")
+//   invoiceFrom   AddressItem[] @relation("invoice_from")
+// }
+
 // job.ts
 model JobFilters {
   id        Int      @id @default(autoincrement())

03_source/cms_backend/prisma/seed.ts

@@ -23,6 +23,9 @@ import { ProductReview } from './seeds/productReview';
 import { ProductItem } from './seeds/productItem';
 import { FileStore } from './seeds/fileStore';
 import { userItemSeed } from './seeds/userItem';
+import { orderItemSeed } from './seeds/orderItem';
+import { invoiceItemSeed } from './seeds/invoiceItem';
+
 //
 // import { Blog } from './seeds/blog';
 // import { Mail } from './seeds/mail';
@@ -39,6 +42,8 @@ import { userItemSeed } from './seeds/userItem';
   await FileStore;
   await ProductItem;
   await userItemSeed;
+  await orderItemSeed;
+  await invoiceItemSeed;
   // await Blog;
   // await Mail;
   // await File;

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

@@ -10,8 +10,8 @@ async function order() {
         title: 'Single Party with Dating',
         order_time: new Date(),
         last_payment_date: new Date(),
-        status: 'Pending'
-      }
+        status: 'Pending',
+      },
     });
   }
 

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

@@ -0,0 +1,187 @@
+import { _mock } from './_mock';
+
+// ----------------------------------------------------------------------
+
+export const _carouselsMembers = Array.from({ length: 6 }, (_, index) => ({
+  id: _mock.id(index),
+  name: _mock.fullName(index),
+  role: _mock.role(index),
+  avatarUrl: _mock.image.portrait(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _faqs = Array.from({ length: 8 }, (_, index) => ({
+  id: _mock.id(index),
+  value: `panel${index + 1}`,
+  heading: `Questions ${index + 1}`,
+  detail: _mock.description(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _addressBooks = Array.from({ length: 24 }, (_, index) => ({
+  id: _mock.id(index),
+  primary: index === 0,
+  name: _mock.fullName(index),
+  email: _mock.email(index + 1),
+  fullAddress: _mock.fullAddress(index),
+  phoneNumber: _mock.phoneNumber(index),
+  company: _mock.companyNames(index + 1),
+  addressType: index === 0 ? 'Home' : 'Office',
+}));
+
+// ----------------------------------------------------------------------
+
+export const _contacts = Array.from({ length: 20 }, (_, index) => {
+  const status = (index % 2 && 'online') || (index % 3 && 'offline') || (index % 4 && 'always') || 'busy';
+
+  return {
+    id: _mock.id(index),
+    status,
+    role: _mock.role(index),
+    email: _mock.email(index),
+    name: _mock.fullName(index),
+    phoneNumber: _mock.phoneNumber(index),
+    lastActivity: _mock.time(index),
+    avatarUrl: _mock.image.avatar(index),
+    address: _mock.fullAddress(index),
+  };
+});
+
+// ----------------------------------------------------------------------
+
+export const _notifications = Array.from({ length: 9 }, (_, index) => ({
+  id: _mock.id(index),
+  avatarUrl: [_mock.image.avatar(1), _mock.image.avatar(2), _mock.image.avatar(3), _mock.image.avatar(4), _mock.image.avatar(5), null, null, null, null, null][
+    index
+  ],
+  type: ['friend', 'project', 'file', 'tags', 'payment', 'order', 'delivery', 'chat', 'mail'][index],
+  category: ['Communication', 'Project UI', 'File manager', 'File manager', 'File manager', 'Order', 'Order', 'Communication', 'Communication'][index],
+  isUnRead: _mock.boolean(index),
+  createdAt: _mock.time(index),
+  title:
+    (index === 0 && `<p><strong>Deja Brady</strong> sent you a friend request</p>`) ||
+    (index === 1 && `<p><strong>Jayvon Hull</strong> mentioned you in <strong><a href='#'>Minimal UI</a></strong></p>`) ||
+    (index === 2 && `<p><strong>Lainey Davidson</strong> added file to <strong><a href='#'>File manager</a></strong></p>`) ||
+    (index === 3 && `<p><strong>Angelique Morse</strong> added new tags to <strong><a href='#'>File manager<a/></strong></p>`) ||
+    (index === 4 && `<p><strong>Giana Brandt</strong> request a payment of <strong>$200</strong></p>`) ||
+    (index === 5 && `<p>Your order is placed waiting for shipping</p>`) ||
+    (index === 6 && `<p>Delivery processing your order is being shipped</p>`) ||
+    (index === 7 && `<p>You have new message 5 unread messages</p>`) ||
+    (index === 8 && `<p>You have new mail`) ||
+    '',
+}));
+
+// ----------------------------------------------------------------------
+
+export const _mapContact = [
+  { latlng: [33, 65], address: _mock.fullAddress(1), phoneNumber: _mock.phoneNumber(1) },
+  { latlng: [-12.5, 18.5], address: _mock.fullAddress(2), phoneNumber: _mock.phoneNumber(2) },
+];
+
+// ----------------------------------------------------------------------
+
+export const _socials = [
+  {
+    value: 'facebook',
+    label: 'Facebook',
+    path: 'https://www.facebook.com/caitlyn.kerluke',
+  },
+  {
+    value: 'instagram',
+    label: 'Instagram',
+    path: 'https://www.instagram.com/caitlyn.kerluke',
+  },
+  {
+    value: 'linkedin',
+    label: 'Linkedin',
+    path: 'https://www.linkedin.com/caitlyn.kerluke',
+  },
+  {
+    value: 'twitter',
+    label: 'Twitter',
+    path: 'https://www.twitter.com/caitlyn.kerluke',
+  },
+];
+
+// ----------------------------------------------------------------------
+
+export const _pricingPlans = [
+  {
+    subscription: 'basic',
+    price: 0,
+    caption: 'Forever',
+    lists: ['3 prototypes', '3 boards', 'Up to 5 team members'],
+    labelAction: 'Current plan',
+  },
+  {
+    subscription: 'starter',
+    price: 4.99,
+    caption: 'Saving $24 a year',
+    lists: ['3 prototypes', '3 boards', 'Up to 5 team members', 'Advanced security', 'Issue escalation'],
+    labelAction: 'Choose starter',
+  },
+  {
+    subscription: 'premium',
+    price: 9.99,
+    caption: 'Saving $124 a year',
+    lists: [
+      '3 prototypes',
+      '3 boards',
+      'Up to 5 team members',
+      'Advanced security',
+      'Issue escalation',
+      'Issue development license',
+      'Permissions & workflows',
+    ],
+    labelAction: 'Choose premium',
+  },
+];
+
+// ----------------------------------------------------------------------
+
+export const _testimonials = [
+  {
+    name: _mock.fullName(1),
+    postedDate: _mock.time(1),
+    ratingNumber: _mock.number.rating(1),
+    avatarUrl: _mock.image.avatar(1),
+    content: `Excellent Work! Thanks a lot!`,
+  },
+  {
+    name: _mock.fullName(2),
+    postedDate: _mock.time(2),
+    ratingNumber: _mock.number.rating(2),
+    avatarUrl: _mock.image.avatar(2),
+    content: `It's a very good dashboard and we are really liking the product . We've done some things, like migrate to TS and implementing a react useContext api, to fit our job methodology but the product is one of the best in terms of design and application architecture. The team did a really good job.`,
+  },
+  {
+    name: _mock.fullName(3),
+    postedDate: _mock.time(3),
+    ratingNumber: _mock.number.rating(3),
+    avatarUrl: _mock.image.avatar(3),
+    content: `Customer support is realy fast and helpful the desgin of this theme is looks amazing also the code is very clean and readble realy good job !`,
+  },
+  {
+    name: _mock.fullName(4),
+    postedDate: _mock.time(4),
+    ratingNumber: _mock.number.rating(4),
+    avatarUrl: _mock.image.avatar(4),
+    content: `Amazing, really good code quality and gives you a lot of examples for implementations.`,
+  },
+  {
+    name: _mock.fullName(5),
+    postedDate: _mock.time(5),
+    ratingNumber: _mock.number.rating(5),
+    avatarUrl: _mock.image.avatar(5),
+    content: `Got a few questions after purchasing the product. The owner responded very fast and very helpfull. Overall the code is excellent and works very good. 5/5 stars!`,
+  },
+  {
+    name: _mock.fullName(6),
+    postedDate: _mock.time(6),
+    ratingNumber: _mock.number.rating(6),
+    avatarUrl: _mock.image.avatar(6),
+    content: `CEO of Codealy.io here. We’ve built a developer assessment platform that makes sense - tasks are based on git repositories and run in virtual machines. We automate the pain points - storing candidates code, running it and sharing test results with the whole team, remotely. Bought this template as we need to provide an awesome dashboard for our early customers. I am super happy with purchase. The code is just as good as the design. Thanks!`,
+  },
+];

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

@@ -0,0 +1,76 @@
+import { PrismaClient } from '@prisma/client';
+
+import { _mock } from './_mock';
+import { _tags } from './assets';
+import { _addressBooks } from './_others';
+import { fSub, fAdd } from './utils/format-time';
+
+const prisma = new PrismaClient();
+
+export const INVOICE_SERVICE_OPTIONS = Array.from({ length: 8 }, (_, index) => ({
+  id: _mock.id(index),
+  name: _tags[index],
+  price: _mock.number.price(index),
+}));
+
+const ITEMS = Array.from({ length: 3 }, (__, index) => {
+  const total = INVOICE_SERVICE_OPTIONS[index].price * _mock.number.nativeS(index);
+
+  return {
+    id: _mock.id(index),
+    total,
+    title: _mock.productName(index),
+    description: _mock.sentence(index),
+    price: INVOICE_SERVICE_OPTIONS[index].price,
+    service: INVOICE_SERVICE_OPTIONS[index].name,
+    quantity: _mock.number.nativeS(index),
+  };
+});
+
+async function invoiceItem() {
+  await prisma.orderItem.deleteMany({});
+
+  for (let index = 1; index < 3 + 1; index++) {
+    const shipping = 10;
+    const discount = 10;
+    const taxes = 10;
+    const items = (index % 2 && ITEMS.slice(0, 1)) || (index % 3 && ITEMS.slice(1, 3)) || ITEMS;
+    const subtotal = items.reduce((accumulator, item) => accumulator + item.price * item.quantity, 0);
+    const totalAmount = subtotal - shipping - discount + taxes;
+
+    const temp = await prisma.invoiceItem.upsert({
+      where: { id: index.toString() },
+      update: {},
+      create: {
+        id: index.toString(),
+        taxes,
+        status: (index % 2 && 'paid') || (index % 3 && 'pending') || (index % 4 && 'overdue') || 'draft',
+        discount,
+        shipping,
+        subtotal: items.reduce((accumulator, item) => accumulator + item.price * item.quantity, 0),
+        totalAmount,
+        items,
+        invoiceNumber: `INV-199${index}`,
+        invoiceFrom: _addressBooks[index],
+        invoiceTo: _addressBooks[index + 1],
+        sent: _mock.number.nativeS(index),
+        dueDate: new Date(fAdd({ days: index + 15, hours: index })),
+        createDate: new Date(fAdd({ days: index + 15, hours: index })),
+      },
+    });
+  }
+
+  console.log('seed invoiceItem done');
+}
+
+const invoiceItemSeed = invoiceItem()
+  .then(async () => {
+    await prisma.$disconnect();
+  })
+  .catch(async (e) => {
+    console.error(e);
+    await prisma.$disconnect();
+    process.exit(1);
+  });
+
+export { invoiceItemSeed };

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

@@ -0,0 +1,94 @@
+import { PrismaClient } from '@prisma/client';
+import { _mock } from './_mock';
+
+const prisma = new PrismaClient();
+
+const ITEMS = Array.from({ length: 3 }, (_, index) => ({
+  id: _mock.id(index),
+  sku: `16H9UR${index}`,
+  quantity: index + 1,
+  name: _mock.productName(index),
+  coverUrl: _mock.image.product(index),
+  price: _mock.number.price(index),
+}));
+
+async function orderItem() {
+  await prisma.orderItem.deleteMany({});
+
+  for (let index = 1; index < 20 + 1; index++) {
+    const shipping = 10;
+    const discount = 10;
+    const taxes = 10;
+    const items = (index % 2 && ITEMS.slice(0, 1)) || (index % 3 && ITEMS.slice(1, 3)) || ITEMS;
+    const totalQuantity = items.reduce((accumulator, item) => accumulator + item.quantity, 0);
+    const subtotal = items.reduce((accumulator, item) => accumulator + item.price * item.quantity, 0);
+    const totalAmount = subtotal - shipping - discount + taxes;
+
+    const customer = {
+      id: _mock.id(index),
+      name: _mock.fullName(index),
+      email: _mock.email(index),
+      avatarUrl: _mock.image.avatar(index),
+      ipAddress: '192.158.1.38',
+    };
+
+    const delivery = { shipBy: 'DHL', speedy: 'Standard', trackingNumber: 'SPX037739199373' };
+
+    const history = {
+      orderTime: _mock.time(1),
+      paymentTime: _mock.time(2),
+      deliveryTime: _mock.time(3),
+      completionTime: _mock.time(4),
+      timeline: [
+        { title: 'Delivery successful', time: _mock.time(1) },
+        { title: 'Transporting to [2]', time: _mock.time(2) },
+        { title: 'Transporting to [1]', time: _mock.time(3) },
+        { title: 'The shipping unit has picked up the goods', time: _mock.time(4) },
+        { title: 'Order has been created', time: _mock.time(5) },
+      ],
+    };
+
+    const temp = await prisma.orderItem.upsert({
+      where: { id: index.toString() },
+      update: {},
+      create: {
+        id: index.toString(),
+        orderNumber: `#601${index}`,
+        taxes,
+        items,
+        history,
+        subtotal: items.reduce((accumulator, item) => accumulator + item.price * item.quantity, 0),
+        shipping,
+        discount,
+        customer,
+        delivery,
+        totalAmount,
+        totalQuantity,
+        shippingAddress: {
+          fullAddress: '19034 Verna Unions Apt. 164 - Honolulu, RI / 87535',
+          phoneNumber: '365-374-4961',
+        },
+        payment: {
+          //
+          cardType: 'mastercard',
+          cardNumber: '4111 1111 1111 1111',
+        },
+        status: (index % 2 && 'completed') || (index % 3 && 'pending') || (index % 4 && 'cancelled') || 'refunded',
+      },
+    });
+  }
+
+  console.log('seed orderItem done');
+}
+
+const orderItemSeed = orderItem()
+  .then(async () => {
+    await prisma.$disconnect();
+  })
+  .catch(async (e) => {
+    console.error(e);
+    await prisma.$disconnect();
+    process.exit(1);
+  });
+
+export { orderItemSeed };

03_source/cms_backend/prisma/seeds/utils/format-time.ts

@@ -0,0 +1,257 @@
+import type { Dayjs, OpUnitType } from 'dayjs';
+
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+// ----------------------------------------------------------------------
+
+/**
+ * @Docs
+ * https://day.js.org/docs/en/display/format
+ */
+
+/**
+ * Default timezones
+ * https://day.js.org/docs/en/timezone/set-default-timezone#docsNav
+ *
+ */
+
+/**
+ * UTC
+ * https://day.js.org/docs/en/plugin/utc
+ * @install
+ * import utc from 'dayjs/plugin/utc';
+ * dayjs.extend(utc);
+ * @usage
+ * dayjs().utc().format()
+ *
+ */
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+// ----------------------------------------------------------------------
+
+export type DatePickerFormat = Dayjs | Date | string | number | null | undefined;
+
+export const formatPatterns = {
+  dateTime: 'DD MMM YYYY h:mm a', // 17 Apr 2022 12:00 am
+  date: 'DD MMM YYYY', // 17 Apr 2022
+  time: 'h:mm a', // 12:00 am
+  split: {
+    dateTime: 'DD/MM/YYYY h:mm a', // 17/04/2022 12:00 am
+    date: 'DD/MM/YYYY', // 17/04/2022
+  },
+  paramCase: {
+    dateTime: 'DD-MM-YYYY h:mm a', // 17-04-2022 12:00 am
+    date: 'DD-MM-YYYY', // 17-04-2022
+  },
+};
+
+const isValidDate = (date: DatePickerFormat) => date !== null && date !== undefined && dayjs(date).isValid();
+
+// ----------------------------------------------------------------------
+
+export function today(template?: string): string {
+  return dayjs(new Date()).startOf('day').format(template);
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output 17 Apr 2022 12:00 am
+ */
+export function fDateTime(date: DatePickerFormat, template?: string): string {
+  if (!isValidDate(date)) {
+    return 'Invalid date';
+  }
+
+  return dayjs(date).format(template ?? formatPatterns.dateTime);
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output 17 Apr 2022
+ */
+export function fDate(date: DatePickerFormat, template?: string): string {
+  if (!isValidDate(date)) {
+    return 'Invalid date';
+  }
+
+  return dayjs(date).format(template ?? formatPatterns.date);
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output 12:00 am
+ */
+export function fTime(date: DatePickerFormat, template?: string): string {
+  if (!isValidDate(date)) {
+    return 'Invalid date';
+  }
+
+  return dayjs(date).format(template ?? formatPatterns.time);
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output 1713250100
+ */
+export function fTimestamp(date: DatePickerFormat): number | 'Invalid date' {
+  if (!isValidDate(date)) {
+    return 'Invalid date';
+  }
+
+  return dayjs(date).valueOf();
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output a few seconds, 2 years
+ */
+export function fToNow(date: DatePickerFormat): string {
+  if (!isValidDate(date)) {
+    return 'Invalid date';
+  }
+
+  return dayjs(date).toNow(true);
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output boolean
+ */
+export function fIsBetween(inputDate: DatePickerFormat, startDate: DatePickerFormat, endDate: DatePickerFormat): boolean {
+  if (!isValidDate(inputDate) || !isValidDate(startDate) || !isValidDate(endDate)) {
+    return false;
+  }
+
+  const formattedInputDate = fTimestamp(inputDate);
+  const formattedStartDate = fTimestamp(startDate);
+  const formattedEndDate = fTimestamp(endDate);
+
+  if (formattedInputDate === 'Invalid date' || formattedStartDate === 'Invalid date' || formattedEndDate === 'Invalid date') {
+    return false;
+  }
+
+  return formattedInputDate >= formattedStartDate && formattedInputDate <= formattedEndDate;
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output boolean
+ */
+export function fIsAfter(startDate: DatePickerFormat, endDate: DatePickerFormat): boolean {
+  if (!isValidDate(startDate) || !isValidDate(endDate)) {
+    return false;
+  }
+
+  return dayjs(startDate).isAfter(endDate);
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output boolean
+ */
+export function fIsSame(startDate: DatePickerFormat, endDate: DatePickerFormat, unitToCompare?: OpUnitType): boolean {
+  if (!isValidDate(startDate) || !isValidDate(endDate)) {
+    return false;
+  }
+
+  return dayjs(startDate).isSame(endDate, unitToCompare ?? 'year');
+}
+
+/**
+ * @output
+ * Same day: 26 Apr 2024
+ * Same month: 25 - 26 Apr 2024
+ * Same month: 25 - 26 Apr 2024
+ * Same year: 25 Apr - 26 May 2024
+ */
+export function fDateRangeShortLabel(startDate: DatePickerFormat, endDate: DatePickerFormat, initial?: boolean): string {
+  if (!isValidDate(startDate) || !isValidDate(endDate) || fIsAfter(startDate, endDate)) {
+    return 'Invalid date';
+  }
+
+  let label = `${fDate(startDate)} - ${fDate(endDate)}`;
+
+  if (initial) {
+    return label;
+  }
+
+  const isSameYear = fIsSame(startDate, endDate, 'year');
+  const isSameMonth = fIsSame(startDate, endDate, 'month');
+  const isSameDay = fIsSame(startDate, endDate, 'day');
+
+  if (isSameYear && !isSameMonth) {
+    label = `${fDate(startDate, 'DD MMM')} - ${fDate(endDate)}`;
+  } else if (isSameYear && isSameMonth && !isSameDay) {
+    label = `${fDate(startDate, 'DD')} - ${fDate(endDate)}`;
+  } else if (isSameYear && isSameMonth && isSameDay) {
+    label = `${fDate(endDate)}`;
+  }
+
+  return label;
+}
+
+// ----------------------------------------------------------------------
+
+/**
+ * @output 2024-05-28T05:55:31+00:00
+ */
+export type DurationProps = {
+  years?: number;
+  months?: number;
+  days?: number;
+  hours?: number;
+  minutes?: number;
+  seconds?: number;
+  milliseconds?: number;
+};
+
+export function fAdd({ years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 }: DurationProps) {
+  const result = dayjs()
+    .add(
+      dayjs.duration({
+        years,
+        months,
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds,
+      })
+    )
+    .format();
+
+  return result;
+}
+
+/**
+ * @output 2024-05-28T05:55:31+00:00
+ */
+export function fSub({ years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 }: DurationProps) {
+  const result = dayjs()
+    .subtract(
+      dayjs.duration({
+        years,
+        months,
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds,
+      })
+    )
+    .format();
+
+  return result;
+}

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

@@ -2,13 +2,9 @@ import type { NextRequest, NextResponse } from 'next/server';
 
 import { STATUS, response, handleError } from 'src/utils/response';
 
-import prisma from '../../lib/prisma';
-
 export async function GET(req: NextRequest, res: NextResponse) {
   try {
-    const users = await prisma.user.findMany();
-
-    return response({ users }, STATUS.OK);
+    return response({ hello: 'world' }, STATUS.OK);
   } catch (error) {
     return handleError('Post - Get latest', error);
   }

03_source/cms_backend/src/app/api/invoice/changeStatus/route.ts

@@ -0,0 +1,98 @@
+// 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';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * PUT - change order status
+ *************************************** */
+export async function PUT(req: NextRequest) {
+  // logger('[Invoice] list', products.length);
+  const { searchParams } = req.nextUrl;
+  const invoiceId = searchParams.get('invoiceId');
+
+  // RULES: invoiceId must exist
+  if (!invoiceId) {
+    return response({ message: 'Invoice ID is required!' }, STATUS.BAD_REQUEST);
+  }
+
+  const { data } = await req.json();
+
+  try {
+    const order = await prisma.invoiceItem.updateMany({
+      where: { id: invoiceId },
+      data: { status: data.status },
+    });
+
+    return response({ order }, STATUS.OK);
+  } catch (error) {
+    console.log({ data });
+    return handleError('Invoice - 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/invoice/changeStatus/test.http

@@ -0,0 +1,9 @@
+###
+
+PUT http://localhost:7272/api/invoice/changeStatus?orderId=1
+content-type: application/json
+
+{
+    "data":{"status": "helloworld"}
+}
+

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+###
+
+GET http://localhost:7272/api/invoice/details?invoiceId=1
+

03_source/cms_backend/src/app/api/invoice/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/invoice/list/route.ts

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

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

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

03_source/cms_backend/src/app/api/invoice/saveInvoice/route.ts

@@ -0,0 +1,98 @@
+// src/app/api/invoice/saveInvoice/route.ts
+//
+// PURPOSE:
+// save invoice 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';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * PUT - Update invoice
+ *************************************** */
+export async function PUT(req: NextRequest) {
+  // logger('[Invoice] list', invoices.length);
+  const { searchParams } = req.nextUrl;
+  const invoiceId = searchParams.get('invoiceId');
+
+  // RULES: invoiceId must exist
+  if (!invoiceId) {
+    return response({ message: 'Invoice ID is required!' }, STATUS.BAD_REQUEST);
+  }
+
+  const { data } = await req.json();
+
+  try {
+    const invoice = await prisma.invoiceItem.updateMany({
+      where: { id: invoiceId },
+      data,
+    });
+
+    return response({ invoice }, STATUS.OK);
+  } catch (error) {
+    console.log({ data });
+    return handleError('Invoice - Update invoice', error);
+  }
+}
+
+export type IInvoiceItem = {
+  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: IInvoiceReview[];
+  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 IInvoiceReview = {
+  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/invoice/saveInvoice/test.http

@@ -0,0 +1,58 @@
+###
+
+PUT http://localhost:7272/api/invoice/saveInvoice?invoiceId=1
+content-type: application/json
+
+{
+  "data": {
+    "id": "1",
+    "taxes": 10,
+    "status": "paid",
+    "discount": 10,
+    "shipping": 10,
+    "subtotal": 921.14,
+    "totalAmount": 993.254,
+    "items": [
+      {
+        "title": "Urban Explorer Sneakers 1111",
+        "service": "Technology",
+        "quantity": 11,
+        "price": 83.74,
+        "total": 921.14,
+        "description": "The sun slowly set over the horizon, painting the sky in vibrant hues of orange and pink."
+      },
+      {
+        "price": 83.74,
+        "title": "Urban Explorer Sneakers 22222",
+        "total": 921.14,
+        "service": "Technology",
+        "quantity": 11,
+        "description": "The sun slowly set over the horizon, painting the sky in vibrant hues of orange and pink."
+      }
+    ],
+    "invoiceNumber": "INV-1991",
+    "invoiceFrom": {
+      "id": "e99f09a7-dd88-49d5-b1c8-1daf80c2d7b02",
+      "name": "Lucian Obrien",
+      "email": "milo.farrell@hotmail.com",
+      "company": "Nikolaus - Leuschke",
+      "primary": false,
+      "addressType": "Office",
+      "fullAddress": "1147 Rohan Drive Suite 819 - Burlington, VT / 82021",
+      "phoneNumber": "+1 416-555-0198"
+    },
+    "invoiceTo": {
+      "id": "e99f09a7-dd88-49d5-b1c8-1daf80c2d7b03",
+      "name": "Deja Brady",
+      "email": "violet.ratke86@yahoo.com",
+      "company": "Hegmann, Kreiger and Bayer",
+      "primary": false,
+      "addressType": "Office",
+      "fullAddress": "18605 Thompson Circle Apt. 086 - Idaho Falls, WV / 50337",
+      "phoneNumber": "+44 20 7946 0958"
+    },
+    "sent": 10,
+    "createDate": "2025-06-15T17:07:24+08:00",
+    "dueDate": "2025-06-15T17:07:24+08:00"
+  }
+}

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

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

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

@@ -0,0 +1,98 @@
+// 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';
+
+// ----------------------------------------------------------------------
+
+/** **************************************
+ * PUT - change order status
+ *************************************** */
+export async function PUT(req: NextRequest) {
+  // logger('[Order] list', products.length);
+  const { searchParams } = req.nextUrl;
+  const orderId = searchParams.get('orderId');
+
+  // RULES: orderId must exist
+  if (!orderId) {
+    return response({ message: 'Order ID is required!' }, STATUS.BAD_REQUEST);
+  }
+
+  const { data } = await req.json();
+
+  try {
+    const order = await prisma.orderItem.updateMany({
+      where: { id: orderId },
+      data: { status: data.status },
+    });
+
+    return response({ order }, STATUS.OK);
+  } catch (error) {
+    console.log({ data });
+    return handleError('Order - 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/order/changeStatus/test.http

@@ -0,0 +1,9 @@
+###
+
+PUT http://localhost:7272/api/order/changeStatus?orderId=1
+content-type: application/json
+
+{
+    "data":{"status": "helloworld"}
+}
+

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+###
+
+GET http://localhost:7272/api/order/details?orderId=1
+

03_source/cms_backend/src/app/api/order/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/order/list/route.ts

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

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

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

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

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

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

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

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

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

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

@@ -66,9 +66,9 @@ export async function POST(req: NextRequest) {
       where: { id: data.id },
     });
 
-    return response({ hello: 'world', data }, STATUS.OK);
+    return response({ data }, STATUS.OK);
   } catch (error) {
-    console.log({ hello: 'world', data });
+    console.log({ data });
     return handleError('Product - Get list', error);
   }
 }

03_source/docker/00_dc_up.sh

@@ -3,7 +3,7 @@
 set -ex
 
 #  -f docker-compose.db.yml
-DOCKER_COMPOSE_FILES=" -f docker-compose.yml "
+DOCKER_COMPOSE_FILES=" -f docker-compose.yml  -f docker-compose.dev.yml"
 
 # docker compose $DOCKER_COMPOSE_FILES build
 docker compose $DOCKER_COMPOSE_FILES up -d

03_source/docker/03_mobile.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 mobile bash
+
+# cd ../api_server
+#   yarn docker:dev
+# cd ..
+
+
+# docker compose $DOCKER_COMPOSE_FILES logs -f

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

@@ -0,0 +1,9 @@
+services:
+  frontend:
+    command: "sleep infinity"
+
+  mobile:
+    command: "sleep infinity"
+
+  cms_backend:
+    command: "sleep infinity"

03_source/docker/docker-compose.yml

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

03_source/frontend/prettier.config.mjs

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

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

@@ -75,7 +75,11 @@ export const _orders = Array.from({ length: 20 }, (_, index) => {
       fullAddress: '19034 Verna Unions Apt. 164 - Honolulu, RI / 87535',
       phoneNumber: '365-374-4961',
     },
-    payment: { cardType: 'mastercard', cardNumber: '**** **** **** 5678' },
+    payment: {
+      //
+      cardType: 'mastercard',
+      cardNumber: '**** **** **** 5678',
+    },
     status:
       (index % 2 && 'completed') ||
       (index % 3 && 'pending') ||

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

@@ -0,0 +1,221 @@
+// src/actions/invoice.ts
+import { useMemo } from 'react';
+import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
+import type { IInvoiceItem } from 'src/types/invoice';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
+
+// ----------------------------------------------------------------------
+
+const swrOptions: SWRConfiguration = {
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+};
+
+// ----------------------------------------------------------------------
+
+type InvoicesData = {
+  invoices: IInvoiceItem[];
+};
+
+export function useGetInvoices() {
+  const url = endpoints.invoice.list;
+
+  const { data, isLoading, error, isValidating, mutate } = useSWR<InvoicesData>(
+    url,
+    fetcher,
+    swrOptions
+  );
+
+  const memoizedValue = useMemo(
+    () => ({
+      invoices: data?.invoices || [],
+      invoicesLoading: isLoading,
+      invoicesError: error,
+      invoicesValidating: isValidating,
+      invoicesEmpty: !isLoading && !isValidating && !data?.invoices.length,
+      mutate,
+    }),
+    [data?.invoices, error, isLoading, isValidating, mutate]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type InvoiceData = {
+  invoice: IInvoiceItem;
+};
+
+export function useGetInvoice(invoiceId: string) {
+  const url = invoiceId ? [endpoints.invoice.details, { params: { invoiceId } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<InvoiceData>(url, fetcher, swrOptions);
+
+  const memoizedValue = useMemo(
+    () => ({
+      currentInvoice: data?.invoice,
+      invoiceLoading: isLoading,
+      invoiceError: error,
+      invoiceValidating: isValidating,
+    }),
+    [data?.invoice, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SearchResultsData = {
+  results: IInvoiceItem[];
+};
+
+export function useSearchInvoices(query: string) {
+  const url = query ? [endpoints.invoice.search, { params: { query } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<SearchResultsData>(url, fetcher, {
+    ...swrOptions,
+    keepPreviousData: true,
+  });
+
+  const memoizedValue = useMemo(
+    () => ({
+      searchResults: data?.results || [],
+      searchLoading: isLoading,
+      searchError: error,
+      searchValidating: isValidating,
+      searchEmpty: !isLoading && !isValidating && !data?.results.length,
+    }),
+    [data?.results, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SaveInvoiceData = IInvoiceItem;
+
+export async function saveInvoice(invoiceId: string, saveInvoiceData: SaveInvoiceData) {
+  const url = endpoints.invoice.saveInvoice(invoiceId);
+  const res = await axiosInstance.put(url, { data: saveInvoiceData });
+  return res;
+}
+
+export async function uploadInvoiceImage(saveInvoiceData: SaveInvoiceData) {
+  console.log('save invoice ?');
+  // const url = invoiceId ? [endpoints.invoice.details, { params: { invoiceId } }] : '';
+
+  const res = await axiosInstance.get('http://localhost:7272/api/invoice/helloworld');
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type CreateInvoiceData = {
+  // 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 createInvoice(createInvoiceData: CreateInvoiceData) {
+  console.log('create invoice ?');
+  // const url = invoiceId ? [endpoints.invoice.details, { params: { invoiceId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/invoice/createInvoice', {
+    data: createInvoiceData,
+  });
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type DeleteInvoiceResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function deleteInvoice(invoiceId: string): Promise<DeleteInvoiceResponse> {
+  const url = `http://localhost:7272/api/invoice/deleteInvoice?invoiceId=${invoiceId}`;
+
+  try {
+    const res = await axiosInstance.delete(url);
+    console.log({ res });
+
+    return {
+      success: true,
+      message: 'Invoice deleted successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete invoice',
+    };
+  }
+}
+
+// ----------------------------------------------------------------------
+
+type ChangeStatusResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function changeStatus(
+  invoiceId: string,
+  newStatus: string
+): Promise<ChangeStatusResponse> {
+  const url = endpoints.invoice.changeStatus(invoiceId);
+
+  try {
+    const res = await axiosInstance.put(url, { data: { status: newStatus } });
+
+    return {
+      success: true,
+      message: 'status updated successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}

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

@@ -0,0 +1,226 @@
+// 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 { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
+
+// ----------------------------------------------------------------------
+
+const swrOptions: SWRConfiguration = {
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+};
+
+// ----------------------------------------------------------------------
+
+type OrdersData = {
+  orders: IOrderItem[];
+};
+
+export function useGetOrders() {
+  const url = endpoints.order.list;
+
+  const { data, isLoading, error, isValidating, mutate } = useSWR<OrdersData>(
+    url,
+    fetcher,
+    swrOptions
+  );
+
+  const memoizedValue = useMemo(
+    () => ({
+      orders: data?.orders || [],
+      ordersLoading: isLoading,
+      ordersError: error,
+      ordersValidating: isValidating,
+      ordersEmpty: !isLoading && !isValidating && !data?.orders.length,
+      mutate,
+    }),
+    [data?.orders, error, isLoading, isValidating, mutate]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type OrderData = {
+  order: IOrderItem;
+};
+
+export function useGetOrder(orderId: string) {
+  const url = orderId ? [endpoints.order.details, { params: { orderId } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<OrderData>(url, fetcher, swrOptions);
+
+  const memoizedValue = useMemo(
+    () => ({
+      order: data?.order,
+      orderLoading: isLoading,
+      orderError: error,
+      orderValidating: isValidating,
+    }),
+    [data?.order, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SearchResultsData = {
+  results: IProductItem[];
+};
+
+export function useSearchProducts(query: string) {
+  const url = query ? [endpoints.product.search, { params: { query } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<SearchResultsData>(url, fetcher, {
+    ...swrOptions,
+    keepPreviousData: true,
+  });
+
+  const memoizedValue = useMemo(
+    () => ({
+      searchResults: data?.results || [],
+      searchLoading: isLoading,
+      searchError: error,
+      searchValidating: isValidating,
+      searchEmpty: !isLoading && !isValidating && !data?.results.length,
+    }),
+    [data?.results, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SaveOrderData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  ordername: string;
+  password: string;
+};
+
+export async function saveOrder(orderId: string, saveOrderData: SaveOrderData) {
+  // const url = orderId ? [endpoints.order.details, { params: { orderId } }] : '';
+
+  const res = await axiosInstance.post(
+    //
+    `http://localhost:7272/api/order/saveOrder?orderId=${orderId}`,
+    {
+      data: saveOrderData,
+    }
+  );
+
+  return res;
+}
+
+export async function uploadOrderImage(saveOrderData: SaveOrderData) {
+  console.log('uploadOrderImage ?');
+  // const url = orderId ? [endpoints.order.details, { params: { orderId } }] : '';
+
+  const res = await axiosInstance.get('http://localhost:7272/api/product/helloworld');
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type CreateOrderData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  ordername: string;
+  password: string;
+};
+
+export async function createOrder(createOrderData: CreateOrderData) {
+  console.log('create product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/order/createOrder', {
+    data: createOrderData,
+  });
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type DeleteOrderResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function deleteOrder(orderId: string): Promise<DeleteOrderResponse> {
+  const url = `http://localhost:7272/api/order/deleteOrder?orderId=${orderId}`;
+
+  try {
+    const res = await axiosInstance.delete(url);
+
+    return {
+      success: true,
+      message: 'Order deleted successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}
+
+// ----------------------------------------------------------------------
+
+type ChangeStatusResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function changeStatus(
+  orderId: string,
+  newOrderStatus: string
+): Promise<ChangeStatusResponse> {
+  const url = endpoints.order.changeStatus(orderId);
+
+  try {
+    const res = await axiosInstance.put(url, { data: { status: newOrderStatus } });
+
+    return {
+      success: true,
+      message: 'status updated successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}

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

@@ -1,3 +1,4 @@
+// src/actions/product.ts
 import { useMemo } from 'react';
 import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
 import type { IProductItem } from 'src/types/product';
@@ -55,7 +56,7 @@ export function useGetProduct(productId: string) {
 
   const memoizedValue = useMemo(
     () => ({
-      product: data?.product,
+      currentProduct: data?.product,
       productLoading: isLoading,
       productError: error,
       productValidating: isValidating,

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

@@ -109,16 +109,22 @@
   "Completed": "已完成",
   "Cancelled": "已取消",
   "Refunded": "已退款",
-  "Date ": "日期",
-  "Order ": "訂單",
-  "Customer ": "客戶",
-  "Items ": "項目",
-  "Start date ": "開始日期",
-  "End date ": "結束日期",
-  "Search customer or order number... ": "搜尋客戶或訂單號碼...",
-  "Print ": "列印",
-  "Import ": "匯入",
-  "Export ": "匯出",
+  "Date": "日期",
+  "Customer": "客戶",
+  "Items": "項目",
+  "Start date": "開始日期",
+  "End date": "結束日期",
+  "Search customer or order number...": "搜尋客戶或訂單號碼...",
+  "Search customer or invoice number...": "搜尋客戶或訂單號碼...",
+  "Service": "項目",
+  "Print": "列印",
+  "Import": "匯入",
+  "Due": "過期日",
+  "Amount": "數目",
+  "Sent": "發出次數",
+  "Overdue": "己過期",
+  "Paid": "已符款",
+  "Export": "匯出",
   "Product not found!": "產品未找到！",
   "Back to list": "返回列表",
   "hello": "world"

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

@@ -1,9 +1,11 @@
+// src/pages/dashboard/invoice/details.tsx
 import { useParams } from 'src/routes/hooks';
 
 import { CONFIG } from 'src/global-config';
 import { _invoices } from 'src/_mock/_invoice';
 
 import { InvoiceDetailsView } from 'src/sections/invoice/view';
+import { useGetInvoice } from 'src/actions/invoice';
 
 // ----------------------------------------------------------------------
 
@@ -12,13 +14,14 @@ const metadata = { title: `Invoice details | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const currentInvoice = _invoices.find((invoice) => invoice.id === id);
+  // const currentInvoice = _invoices.find((invoice) => invoice.id === id);
+  const { currentInvoice, invoiceLoading, invoiceError } = useGetInvoice(id);
 
   return (
     <>
       <title>{metadata.title}</title>
 
-      <InvoiceDetailsView invoice={currentInvoice} />
+      <InvoiceDetailsView invoice={currentInvoice} loading={invoiceLoading} error={invoiceError} />
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 import { useParams } from 'src/routes/hooks';
 
 import { CONFIG } from 'src/global-config';
-import { _invoices } from 'src/_mock/_invoice';
+import { useGetInvoice } from 'src/actions/invoice';
 
 import { InvoiceEditView } from 'src/sections/invoice/view';
 
@@ -12,7 +12,7 @@ const metadata = { title: `Invoice edit | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const currentInvoice = _invoices.find((invoice) => invoice.id === id);
+  const { currentInvoice } = useGetInvoice(id);
 
   return (
     <>

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

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

03_source/frontend/src/pages/dashboard/kanban/index.tsx

@@ -1,3 +1,5 @@
+// src/pages/dashboard/kanban/index.tsx
+
 import { CONFIG } from 'src/global-config';
 
 import { KanbanView } from 'src/sections/kanban/view';

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

@@ -1,7 +1,9 @@
+// src/pages/dashboard/order/details.tsx
 import { useParams } from 'src/routes/hooks';
 
 import { _orders } from 'src/_mock/_order';
 import { CONFIG } from 'src/global-config';
+import { useGetOrder } from 'src/actions/order';
 
 import { OrderDetailsView } from 'src/sections/order/view';
 
@@ -12,13 +14,18 @@ const metadata = { title: `Order details | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const currentOrder = _orders.find((order) => order.id === id);
+  // const currentOrder = _orders.find((order) => order.id === id);
+  // TODO: error handling
+  const { order, orderLoading, orderError } = useGetOrder(id);
+
+  if (!order) return <>loading</>;
+  if (orderLoading) return <>loading</>;
 
   return (
     <>
       <title>{metadata.title}</title>
 
-      <OrderDetailsView order={currentOrder} />
+      <OrderDetailsView order={order} />
     </>
   );
 }

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

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

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

@@ -12,13 +12,13 @@ const metadata = { title: `Product edit | Dashboard - ${CONFIG.appName}` };
 export default function Page() {
   const { id = '' } = useParams();
 
-  const { product } = useGetProduct(id);
+  const { currentProduct } = useGetProduct(id);
 
   return (
     <>
       <title>{metadata.title}</title>
 
-      <ProductEditView product={product} />
+      <ProductEditView product={currentProduct} />
     </>
   );
 }

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

@@ -1,3 +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 { product, productLoading, productError } = useGetProduct(id);
+  const { currentProduct: product, productLoading, productError } = useGetProduct(id);
 
   return (
     <>

03_source/frontend/src/sections/invoice/invoice-details.tsx

@@ -1,4 +1,4 @@
-import type { IInvoice } from 'src/types/invoice';
+import type { IInvoiceItem } from 'src/types/invoice';
 
 import { useState, useCallback } from 'react';
 
@@ -23,18 +23,32 @@ import { Scrollbar } from 'src/components/scrollbar';
 
 import { InvoiceToolbar } from './invoice-toolbar';
 import { InvoiceTotalSummary } from './invoice-total-summary';
+import { useTranslation } from 'react-i18next';
+import { changeStatus } from 'src/actions/invoice';
+import { toast } from 'src/components/snackbar';
 
 // ----------------------------------------------------------------------
 
 type Props = {
-  invoice?: IInvoice;
+  invoice: IInvoiceItem;
 };
 
 export function InvoiceDetails({ invoice }: Props) {
+  const { t } = useTranslation();
   const [currentStatus, setCurrentStatus] = useState(invoice?.status);
 
   const handleChangeStatus = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setCurrentStatus(event.target.value);
+    // setCurrentStatus(event.target.value);
+
+    try {
+      changeStatus(invoice.id, event.target.value);
+      setCurrentStatus(event.target.value);
+
+      toast.success('status changed!');
+    } catch (error) {
+      console.error(error);
+      toast.warning('error during changing status');
+    }
   }, []);
 
   const renderFooter = () => (

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

@@ -1,16 +1,4 @@
-import type { IInvoice } from 'src/types/invoice';
-
-import { z as zod } from 'zod';
-import { useForm } from 'react-hook-form';
-import { useBoolean } from 'minimal-shared/hooks';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Button from '@mui/material/Button';
-
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
+// src/sections/invoice/invoice-new-edit-form.tsx
 
 import { today, fIsAfter } from 'src/utils/format-time';
 
@@ -21,18 +9,37 @@ import { Form, schemaHelper } from 'src/components/hook-form';
 import { InvoiceNewEditAddress } from './invoice-new-edit-address';
 import { InvoiceNewEditStatusDate } from './invoice-new-edit-status-date';
 import { defaultItem, InvoiceNewEditDetails } from './invoice-new-edit-details';
+import { useTranslation } from 'react-i18next';
+
+import { useForm } from 'react-hook-form';
+import { useBoolean } from 'minimal-shared/hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+
+import { toast } from 'src/components/snackbar';
+import { useRouter } from 'src/routes/hooks';
+import { paths } from 'src/routes/paths';
+import type { IInvoiceItem } from 'src/types/invoice';
+import { fileToBase64 } from 'src/utils/file-to-base64';
+import { z as zod } from 'zod';
+import { saveInvoice } from 'src/actions/invoice';
 
 // ----------------------------------------------------------------------
 
 export type NewInvoiceSchemaType = zod.infer<typeof NewInvoiceSchema>;
-
 export const NewInvoiceSchema = zod
   .object({
-    invoiceTo: schemaHelper.nullableInput(zod.custom<IInvoice['invoiceTo']>(), {
-      message: 'Invoice to is required!',
-    }),
-    createDate: schemaHelper.date({ message: { required: 'Create date is required!' } }),
-    dueDate: schemaHelper.date({ message: { required: 'Due date is required!' } }),
+    id: zod.string(),
+    taxes: zod.number(),
+    status: zod.string(),
+    discount: zod.number(),
+    shipping: zod.number(),
+    subtotal: zod.number(),
+    totalAmount: zod.number(),
+
     items: zod.array(
       zod.object({
         title: zod.string().min(1, { message: 'Title is required!' }),
@@ -44,15 +51,16 @@ export const NewInvoiceSchema = zod
         description: zod.string(),
       })
     ),
-    // Not required
-    taxes: zod.number(),
-    status: zod.string(),
-    discount: zod.number(),
-    shipping: zod.number(),
-    subtotal: zod.number(),
-    totalAmount: zod.number(),
     invoiceNumber: zod.string(),
-    invoiceFrom: zod.custom<IInvoice['invoiceFrom']>().nullable(),
+    invoiceFrom: zod.custom<IInvoiceItem['invoiceFrom']>().nullable(),
+
+    invoiceTo: schemaHelper.nullableInput(zod.custom<IInvoiceItem['invoiceTo']>(), {
+      message: 'Invoice to is required!',
+    }),
+    sent: zod.number().default(0),
+    createDate: schemaHelper.date({ message: { required: 'Create date is required!' } }),
+    dueDate: schemaHelper.date({ message: { required: 'Due date is required!' } }),
+    // Not required
   })
   .refine((data) => !fIsAfter(data.createDate, data.dueDate), {
     message: 'Due date cannot be earlier than create date!',
@@ -62,11 +70,12 @@ export const NewInvoiceSchema = zod
 // ----------------------------------------------------------------------
 
 type Props = {
-  currentInvoice?: IInvoice;
+  currentInvoice?: IInvoiceItem;
 };
 
 export function InvoiceNewEditForm({ currentInvoice }: Props) {
   const router = useRouter();
+  const { t } = useTranslation();
 
   const loadingSave = useBoolean();
   const loadingSend = useBoolean();
@@ -105,6 +114,7 @@ export function InvoiceNewEditForm({ currentInvoice }: Props) {
     try {
       await new Promise((resolve) => setTimeout(resolve, 500));
       reset();
+
       loadingSave.onFalse();
       router.push(paths.dashboard.invoice.root);
       console.info('DATA', JSON.stringify(data, null, 2));
@@ -118,10 +128,15 @@ export function InvoiceNewEditForm({ currentInvoice }: Props) {
     loadingSend.onTrue();
 
     try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      reset();
+      if (currentInvoice) {
+        await saveInvoice(currentInvoice.id, data);
+      }
+
       loadingSend.onFalse();
+      toast.success(currentInvoice ? 'Update success!' : 'Create success!');
+
       router.push(paths.dashboard.invoice.root);
+
       console.info('DATA', JSON.stringify(data, null, 2));
     } catch (error) {
       console.error(error);
@@ -151,6 +166,7 @@ export function InvoiceNewEditForm({ currentInvoice }: Props) {
           color="inherit"
           size="large"
           variant="outlined"
+          disabled={loadingSave.value && isSubmitting}
           loading={loadingSave.value && isSubmitting}
           onClick={handleSaveAsDraft}
         >
@@ -160,6 +176,7 @@ export function InvoiceNewEditForm({ currentInvoice }: Props) {
         <Button
           size="large"
           variant="contained"
+          disabled={loadingSend.value && isSubmitting}
           loading={loadingSend.value && isSubmitting}
           onClick={handleCreateAndSend}
         >

03_source/frontend/src/sections/invoice/invoice-new-edit-status-date.tsx

@@ -4,11 +4,13 @@ import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
 
 import { Field } from 'src/components/hook-form';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
 export function InvoiceNewEditStatusDate() {
   const { watch } = useFormContext();
+  const { t } = useTranslation();
 
   const values = watch();
 
@@ -37,7 +39,7 @@ export function InvoiceNewEditStatusDate() {
       >
         {['paid', 'pending', 'overdue', 'draft'].map((option) => (
           <MenuItem key={option} value={option} sx={{ textTransform: 'capitalize' }}>
-            {option}
+            {t(option)}
           </MenuItem>
         ))}
       </Field.Select>

03_source/frontend/src/sections/invoice/invoice-pdf.tsx

@@ -1,4 +1,4 @@
-import type { IInvoice } from 'src/types/invoice';
+import type { IInvoiceItem } from 'src/types/invoice';
 
 import { useMemo } from 'react';
 import {
@@ -25,7 +25,7 @@ import { Iconify } from 'src/components/iconify';
 // ----------------------------------------------------------------------
 
 type InvoicePDFProps = {
-  invoice?: IInvoice;
+  invoice?: IInvoiceItem;
   currentStatus: string;
 };
 
@@ -126,7 +126,7 @@ const useStyles = () =>
   );
 
 type InvoicePdfDocumentProps = {
-  invoice?: IInvoice;
+  invoice?: IInvoiceItem;
   currentStatus: string;
 };
 

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

@@ -1,4 +1,5 @@
-import type { IInvoice } from 'src/types/invoice';
+// src/sections/invoice/invoice-table-row.tsx
+import type { IInvoiceItem } from 'src/types/invoice';
 
 import { useBoolean, usePopover } from 'minimal-shared/hooks';
 
@@ -24,11 +25,12 @@ import { Label } from 'src/components/label';
 import { Iconify } from 'src/components/iconify';
 import { ConfirmDialog } from 'src/components/custom-dialog';
 import { CustomPopover } from 'src/components/custom-popover';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
 type Props = {
-  row: IInvoice;
+  row: IInvoiceItem;
   selected: boolean;
   editHref: string;
   detailsHref: string;
@@ -44,6 +46,7 @@ export function InvoiceTableRow({
   onDeleteRow,
   detailsHref,
 }: Props) {
+  const { t } = useTranslation();
   const menuActions = usePopover();
   const confirmDialog = useBoolean();
 
@@ -58,14 +61,14 @@ export function InvoiceTableRow({
         <li>
           <MenuItem component={RouterLink} href={detailsHref} onClick={menuActions.onClose}>
             <Iconify icon="solar:eye-bold" />
-            View
+            {t('View')}
           </MenuItem>
         </li>
 
         <li>
           <MenuItem component={RouterLink} href={editHref} onClick={menuActions.onClose}>
             <Iconify icon="solar:pen-bold" />
-            Edit
+            {t('Edit')}
           </MenuItem>
         </li>
 
@@ -79,7 +82,7 @@ export function InvoiceTableRow({
           sx={{ color: 'error.main' }}
         >
           <Iconify icon="solar:trash-bin-trash-bold" />
-          Delete
+          {t('Delete')}
         </MenuItem>
       </MenuList>
     </CustomPopover>
@@ -93,7 +96,7 @@ export function InvoiceTableRow({
       content="Are you sure want to delete?"
       action={
         <Button variant="contained" color="error" onClick={onDeleteRow}>
-          Delete
+          {t('Delete')}
         </Button>
       }
     />

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

@@ -1,3 +1,5 @@
+// src/sections/invoice/invoice-table-toolbar.tsx
+
 import type { IDatePickerControl } from 'src/types/common';
 import type { IInvoiceTableFilters } from 'src/types/invoice';
 import type { SelectChangeEvent } from '@mui/material/Select';
@@ -22,6 +24,7 @@ import { formHelperTextClasses } from '@mui/material/FormHelperText';
 
 import { Iconify } from 'src/components/iconify';
 import { CustomPopover } from 'src/components/custom-popover';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -34,7 +37,14 @@ type Props = {
   };
 };
 
-export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }: Props) {
+export function InvoiceTableToolbar({
+  //
+  filters,
+  options,
+  dateError,
+  onResetPage,
+}: Props) {
+  const { t } = useTranslation();
   const menuActions = usePopover();
 
   const { state: currentFilters, setState: updateFilters } = filters;
@@ -84,17 +94,17 @@ export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }
       <MenuList>
         <MenuItem onClick={() => menuActions.onClose()}>
           <Iconify icon="solar:printer-minimalistic-bold" />
-          Print
+          {t('Print')}
         </MenuItem>
 
         <MenuItem onClick={() => menuActions.onClose()}>
           <Iconify icon="solar:import-bold" />
-          Import
+          {t('Import')}
         </MenuItem>
 
         <MenuItem onClick={() => menuActions.onClose()}>
           <Iconify icon="solar:export-bold" />
-          Export
+          {t('Export')}
         </MenuItem>
       </MenuList>
     </CustomPopover>
@@ -113,7 +123,7 @@ export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }
         }}
       >
         <FormControl sx={{ flexShrink: 0, width: { xs: 1, md: 180 } }}>
-          <InputLabel htmlFor="filter-service-select">Service</InputLabel>
+          <InputLabel htmlFor="filter-service-select">{t('Service')}</InputLabel>
           <Select
             multiple
             value={currentFilters.service}
@@ -143,7 +153,7 @@ export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }
         </FormControl>
 
         <DatePicker
-          label="Start date"
+          label={t('Start date')}
           value={currentFilters.endDate}
           onChange={handleFilterStartDate}
           slotProps={{ textField: { fullWidth: true } }}
@@ -151,14 +161,14 @@ export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }
         />
 
         <DatePicker
-          label="End date"
+          label={t('End date')}
           value={currentFilters.endDate}
           onChange={handleFilterEndDate}
           slotProps={{
             textField: {
               fullWidth: true,
               error: dateError,
-              helperText: dateError ? 'End date must be later than start date' : null,
+              helperText: dateError ? t('End date must be later than start date') : null,
             },
           }}
           sx={{
@@ -183,7 +193,7 @@ export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }
             fullWidth
             value={currentFilters.name}
             onChange={handleFilterName}
-            placeholder="Search customer or invoice number..."
+            placeholder={t('Search customer or invoice number...')}
             slotProps={{
               input: {
                 startAdornment: (
@@ -194,7 +204,6 @@ export function InvoiceTableToolbar({ filters, options, dateError, onResetPage }
               },
             }}
           />
-
           <IconButton onClick={menuActions.onOpen}>
             <Iconify icon="eva:more-vertical-fill" />
           </IconButton>

03_source/frontend/src/sections/invoice/invoice-toolbar.tsx

@@ -1,4 +1,4 @@
-import type { IInvoice } from 'src/types/invoice';
+import type { IInvoiceItem } from 'src/types/invoice';
 
 import { useBoolean } from 'minimal-shared/hooks';
 
@@ -17,19 +17,25 @@ import { RouterLink } from 'src/routes/components';
 import { Iconify } from 'src/components/iconify';
 
 import { InvoicePDFViewer, InvoicePDFDownload } from './invoice-pdf';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { set } from 'nprogress';
 
 // ----------------------------------------------------------------------
 
 type Props = {
-  invoice?: IInvoice;
+  invoice?: IInvoiceItem;
   currentStatus: string;
   statusOptions: { value: string; label: string }[];
   onChangeStatus: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
 export function InvoiceToolbar({ invoice, currentStatus, statusOptions, onChangeStatus }: Props) {
+  const { t } = useTranslation();
   const { value: open, onFalse: onClose, onTrue: onOpen } = useBoolean();
 
+  const [disable, setDisable] = useState<boolean>(false);
+
   const renderDownloadButton = () =>
     invoice ? <InvoicePDFDownload invoice={invoice} currentStatus={currentStatus} /> : null;
 
@@ -38,7 +44,7 @@ export function InvoiceToolbar({ invoice, currentStatus, statusOptions, onChange
       <Box sx={{ height: 1, display: 'flex', flexDirection: 'column' }}>
         <DialogActions sx={{ p: 1.5 }}>
           <Button color="inherit" variant="contained" onClick={onClose}>
-            Close
+            {t('Close')}
           </Button>
         </DialogActions>
         <Box sx={{ flexGrow: 1, height: 1, overflow: 'hidden' }}>
@@ -104,11 +110,16 @@ export function InvoiceToolbar({ invoice, currentStatus, statusOptions, onChange
         </Box>
 
         <TextField
+          disabled={disable}
           fullWidth
           select
-          label="Status"
+          label={t('Status')}
           value={currentStatus}
-          onChange={onChangeStatus}
+          onChange={(e) => {
+            setDisable(true);
+            onChangeStatus(e);
+            setDisable(false);
+          }}
           sx={{ maxWidth: 160 }}
           slotProps={{
             htmlInput: { id: 'status-select' },
@@ -117,7 +128,7 @@ export function InvoiceToolbar({ invoice, currentStatus, statusOptions, onChange
         >
           {statusOptions.map((option) => (
             <MenuItem key={option.value} value={option.value}>
-              {option.label}
+              {t(option.label)}
             </MenuItem>
           ))}
         </TextField>

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

@@ -1,4 +1,6 @@
-import type { IInvoice } from 'src/types/invoice';
+// src/sections/invoice/view/invoice-details-view.tsx
+
+import type { IInvoiceItem } from 'src/types/invoice';
 
 import { paths } from 'src/routes/paths';
 
@@ -7,22 +9,30 @@ import { DashboardContent } from 'src/layouts/dashboard';
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
 
 import { InvoiceDetails } from '../invoice-details';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
 type Props = {
-  invoice?: IInvoice;
+  invoice?: IInvoiceItem;
+  loading?: boolean;
+  error?: any;
 };
 
-export function InvoiceDetailsView({ invoice }: Props) {
+export function InvoiceDetailsView({ invoice, error, loading }: Props) {
+  const { t } = useTranslation();
+
+  if (!invoice) return <>loading</>;
+  if (loading) return <>loading</>;
+
   return (
     <DashboardContent>
       <CustomBreadcrumbs
         heading={invoice?.invoiceNumber}
         backHref={paths.dashboard.invoice.root}
         links={[
-          { name: 'Dashboard', href: paths.dashboard.root },
-          { name: 'Invoice', href: paths.dashboard.invoice.root },
+          { name: t('Dashboard'), href: paths.dashboard.root },
+          { name: t('Invoice'), href: paths.dashboard.invoice.root },
           { name: invoice?.invoiceNumber },
         ]}
         sx={{ mb: 3 }}

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

@@ -1,4 +1,4 @@
-import type { IInvoice } from 'src/types/invoice';
+import type { IInvoiceItem } from 'src/types/invoice';
 
 import { paths } from 'src/routes/paths';
 
@@ -11,10 +11,12 @@ import { InvoiceNewEditForm } from '../invoice-new-edit-form';
 // ----------------------------------------------------------------------
 
 type Props = {
-  invoice?: IInvoice;
+  invoice?: IInvoiceItem;
 };
 
 export function InvoiceEditView({ invoice }: Props) {
+  if (!invoice) return <>loading</>;
+
   return (
     <DashboardContent>
       <CustomBreadcrumbs

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

@@ -1,8 +1,10 @@
+// src/sections/invoice/view/invoice-list-view.tsx
+
 import type { TableHeadCellProps } from 'src/components/table';
-import type { IInvoice, IInvoiceTableFilters } from 'src/types/invoice';
+import type { IInvoiceItem, IInvoiceTableFilters } from 'src/types/invoice';
 
 import { sumBy } from 'es-toolkit';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { varAlpha } from 'minimal-shared/utils';
 import { useBoolean, useSetState } from 'minimal-shared/hooks';
 
@@ -33,6 +35,8 @@ import { Iconify } from 'src/components/iconify';
 import { Scrollbar } from 'src/components/scrollbar';
 import { ConfirmDialog } from 'src/components/custom-dialog';
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
+import { deleteInvoice, useGetInvoices } from 'src/actions/invoice';
+
 import {
   useTable,
   emptyRows,
@@ -59,12 +63,6 @@ export function InvoiceListView() {
   const theme = useTheme();
   const { t } = useTranslation();
 
-  const table = useTable({ defaultOrderBy: 'createDate' });
-
-  const confirmDialog = useBoolean();
-
-  const [tableData, setTableData] = useState<IInvoice[]>(_invoices);
-
   const TABLE_HEAD: TableHeadCellProps[] = [
     { id: 'invoiceNumber', label: t('Customer') },
     { id: 'createDate', label: t('Create') },
@@ -75,6 +73,13 @@ export function InvoiceListView() {
     { id: '' },
   ];
 
+  const table = useTable({ defaultOrderBy: 'createDate' });
+
+  const confirmDeleteMultiItemsDialog = useBoolean();
+  const { invoices, invoicesLoading, mutate } = useGetInvoices();
+
+  const [tableData, setTableData] = useState<IInvoiceItem[]>(invoices);
+
   const filters = useSetState<IInvoiceTableFilters>({
     name: '',
     service: [],
@@ -86,6 +91,12 @@ export function InvoiceListView() {
 
   const dateError = fIsAfter(currentFilters.startDate, currentFilters.endDate);
 
+  useEffect(() => {
+    if (invoices.length) {
+      setTableData(invoices);
+    }
+  }, [invoices]);
+
   const dataFiltered = applyFilter({
     inputData: tableData,
     comparator: getComparator(table.order, table.orderBy),
@@ -179,11 +190,11 @@ export function InvoiceListView() {
     [updateFilters, table]
   );
 
-  const renderConfirmDialog = () => (
+  const renderDeleteMultipleItemsConfirmDialog = () => (
     <ConfirmDialog
-      open={confirmDialog.value}
-      onClose={confirmDialog.onFalse}
-      title="Delete"
+      open={confirmDeleteMultiItemsDialog.value}
+      onClose={confirmDeleteMultiItemsDialog.onFalse}
+      title={t('Delete multiple invoices')}
       content={
         <>
           Are you sure want to delete <strong> {table.selected.length} </strong> items?
@@ -195,24 +206,30 @@ export function InvoiceListView() {
           color="error"
           onClick={() => {
             handleDeleteRows();
-            confirmDialog.onFalse();
+            confirmDeleteMultiItemsDialog.onFalse();
           }}
         >
-          Delete
+          {t('Delete')}
         </Button>
       }
     />
   );
 
+  useEffect(() => {
+    mutate();
+  }, []);
+
+  if (invoicesLoading) return <>loading</>;
+
   return (
     <>
       <DashboardContent>
         <CustomBreadcrumbs
-          heading="List"
+          heading={t('Invoice List')}
           links={[
-            { name: 'Dashboard', href: paths.dashboard.root },
-            { name: 'Invoice', href: paths.dashboard.invoice.root },
-            { name: 'List' },
+            { name: t('Dashboard'), href: paths.dashboard.root },
+            { name: t('Invoice'), href: paths.dashboard.invoice.root },
+            { name: t('List') },
           ]}
           action={
             <Button
@@ -221,7 +238,7 @@ export function InvoiceListView() {
               variant="contained"
               startIcon={<Iconify icon="mingcute:add-line" />}
             >
-              New invoice
+              {t('New invoice')}
             </Button>
           }
           sx={{ mb: { xs: 3, md: 5 } }}
@@ -234,7 +251,7 @@ export function InvoiceListView() {
               sx={{ py: 2, flexDirection: 'row' }}
             >
               <InvoiceAnalytic
-                title="Total"
+                title={t('Total')}
                 total={tableData.length}
                 percent={100}
                 price={sumBy(tableData, (invoice) => invoice.totalAmount)}
@@ -243,7 +260,7 @@ export function InvoiceListView() {
               />
 
               <InvoiceAnalytic
-                title="Paid"
+                title={t('Paid')}
                 total={getInvoiceLength('paid')}
                 percent={getPercentByStatus('paid')}
                 price={getTotalAmount('paid')}
@@ -252,7 +269,7 @@ export function InvoiceListView() {
               />
 
               <InvoiceAnalytic
-                title="Pending"
+                title={t('Pending')}
                 total={getInvoiceLength('pending')}
                 percent={getPercentByStatus('pending')}
                 price={getTotalAmount('pending')}
@@ -261,7 +278,7 @@ export function InvoiceListView() {
               />
 
               <InvoiceAnalytic
-                title="Overdue"
+                title={t('Overdue')}
                 total={getInvoiceLength('overdue')}
                 percent={getPercentByStatus('overdue')}
                 price={getTotalAmount('overdue')}
@@ -270,7 +287,7 @@ export function InvoiceListView() {
               />
 
               <InvoiceAnalytic
-                title="Draft"
+                title={t('Draft')}
                 total={getInvoiceLength('draft')}
                 percent={getPercentByStatus('draft')}
                 price={getTotalAmount('draft')}
@@ -294,7 +311,7 @@ export function InvoiceListView() {
               <Tab
                 key={tab.value}
                 value={tab.value}
-                label={tab.label}
+                label={t(tab.label)}
                 iconPosition="end"
                 icon={
                   <Label
@@ -340,26 +357,26 @@ export function InvoiceListView() {
               }}
               action={
                 <Box sx={{ display: 'flex' }}>
-                  <Tooltip title="Sent">
+                  <Tooltip title={t('Sent')}>
                     <IconButton color="primary">
                       <Iconify icon="custom:send-fill" />
                     </IconButton>
                   </Tooltip>
 
-                  <Tooltip title="Download">
+                  <Tooltip title={t('Download')}>
                     <IconButton color="primary">
                       <Iconify icon="solar:download-bold" />
                     </IconButton>
                   </Tooltip>
 
-                  <Tooltip title="Print">
+                  <Tooltip title={t('Print')}>
                     <IconButton color="primary">
                       <Iconify icon="solar:printer-minimalistic-bold" />
                     </IconButton>
                   </Tooltip>
 
-                  <Tooltip title="Delete">
-                    <IconButton color="primary" onClick={confirmDialog.onTrue}>
+                  <Tooltip title={t('Delete')}>
+                    <IconButton color="primary" onClick={confirmDeleteMultiItemsDialog.onTrue}>
                       <Iconify icon="solar:trash-bin-trash-bold" />
                     </IconButton>
                   </Tooltip>
@@ -425,7 +442,7 @@ export function InvoiceListView() {
         </Card>
       </DashboardContent>
 
-      {renderConfirmDialog()}
+      {renderDeleteMultipleItemsConfirmDialog()}
     </>
   );
 }
@@ -434,7 +451,7 @@ export function InvoiceListView() {
 
 type ApplyFilterProps = {
   dateError: boolean;
-  inputData: IInvoice[];
+  inputData: IInvoiceItem[];
   filters: IInvoiceTableFilters;
   comparator: (a: any, b: any) => number;
 };

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

@@ -1,3 +1,5 @@
+// src/sections/kanban/view/kanban-view.tsx
+
 import type {
   DragEndEvent,
   DragOverEvent,

03_source/frontend/src/sections/order/order-details-delivery.tsx

@@ -7,6 +7,7 @@ import IconButton from '@mui/material/IconButton';
 import CardHeader from '@mui/material/CardHeader';
 
 import { Iconify } from 'src/components/iconify';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -15,10 +16,11 @@ type Props = {
 };
 
 export function OrderDetailsDelivery({ delivery }: Props) {
+  const { t } = useTranslation();
   return (
     <>
       <CardHeader
-        title="Delivery"
+        title={t('Delivery')}
         action={
           <IconButton>
             <Iconify icon="solar:pen-bold" />
@@ -28,7 +30,7 @@ export function OrderDetailsDelivery({ delivery }: Props) {
       <Stack spacing={1.5} sx={{ p: 3, typography: 'body2' }}>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
-            Ship by
+            {t('Ship by')}
           </Box>
 
           {delivery?.shipBy}
@@ -36,7 +38,7 @@ export function OrderDetailsDelivery({ delivery }: Props) {
 
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
-            Speedy
+            {t('Speedy')}
           </Box>
 
           {delivery?.speedy}
@@ -44,7 +46,7 @@ export function OrderDetailsDelivery({ delivery }: Props) {
 
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
-            Tracking No.
+            {t('Tracking No.')}
           </Box>
 
           <Link underline="always" color="inherit">

03_source/frontend/src/sections/order/order-details-history.tsx

@@ -1,3 +1,4 @@
+// src/sections/order/order-details-history.tsx
 import type { IOrderHistory } from 'src/types/order';
 
 import Box from '@mui/material/Box';
@@ -13,6 +14,7 @@ import TimelineConnector from '@mui/lab/TimelineConnector';
 import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
 
 import { fDateTime } from 'src/utils/format-time';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -21,6 +23,8 @@ type Props = {
 };
 
 export function OrderDetailsHistory({ history }: Props) {
+  const { t } = useTranslation();
+
   const renderSummary = () => (
     <Paper
       variant="outlined"
@@ -37,22 +41,22 @@ export function OrderDetailsHistory({ history }: Props) {
       }}
     >
       <div>
-        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>Order time</Box>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Order time')}</Box>
         {fDateTime(history?.orderTime)}
       </div>
 
       <div>
-        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>Payment time</Box>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Payment time')}</Box>
         {fDateTime(history?.orderTime)}
       </div>
 
       <div>
-        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>Delivery time for the carrier</Box>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Delivery time for the carrier')}</Box>
         {fDateTime(history?.orderTime)}
       </div>
 
       <div>
-        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>Completion time</Box>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Completion time')}</Box>
         {fDateTime(history?.orderTime)}
       </div>
     </Paper>

03_source/frontend/src/sections/order/order-details-items.tsx

@@ -12,6 +12,7 @@ import { fCurrency } from 'src/utils/format-number';
 
 import { Iconify } from 'src/components/iconify';
 import { Scrollbar } from 'src/components/scrollbar';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -34,6 +35,7 @@ export function OrderDetailsItems({
   totalAmount,
   ...other
 }: Props) {
+  const { t } = useTranslation();
   const renderTotal = () => (
     <Box
       sx={{
@@ -47,32 +49,32 @@ export function OrderDetailsItems({
       }}
     >
       <Box sx={{ display: 'flex' }}>
-        <Box sx={{ color: 'text.secondary' }}>Subtotal</Box>
+        <Box sx={{ color: 'text.secondary' }}>{t('Subtotal')}</Box>
         <Box sx={{ width: 160, typography: 'subtitle2' }}>{fCurrency(subtotal) || '-'}</Box>
       </Box>
 
       <Box sx={{ display: 'flex' }}>
-        <Box sx={{ color: 'text.secondary' }}>Shipping</Box>
+        <Box sx={{ color: 'text.secondary' }}>{t('Shipping')}</Box>
         <Box sx={{ width: 160, ...(shipping && { color: 'error.main' }) }}>
           {shipping ? `- ${fCurrency(shipping)}` : '-'}
         </Box>
       </Box>
 
       <Box sx={{ display: 'flex' }}>
-        <Box sx={{ color: 'text.secondary' }}>Discount</Box>
+        <Box sx={{ color: 'text.secondary' }}>{t('Discount')}</Box>
         <Box sx={{ width: 160, ...(discount && { color: 'error.main' }) }}>
           {discount ? `- ${fCurrency(discount)}` : '-'}
         </Box>
       </Box>
 
       <Box sx={{ display: 'flex' }}>
-        <Box sx={{ color: 'text.secondary' }}>Taxes</Box>
+        <Box sx={{ color: 'text.secondary' }}>{t('Taxes')}</Box>
 
         <Box sx={{ width: 160 }}>{taxes ? fCurrency(taxes) : '-'}</Box>
       </Box>
 
       <Box sx={{ display: 'flex', typography: 'subtitle1' }}>
-        <div>Total</div>
+        <div>{t('Total')}</div>
         <Box sx={{ width: 160 }}>{fCurrency(totalAmount) || '-'}</Box>
       </Box>
     </Box>
@@ -81,7 +83,7 @@ export function OrderDetailsItems({
   return (
     <Card sx={sx} {...other}>
       <CardHeader
-        title="Details"
+        title={t('Details')}
         action={
           <IconButton>
             <Iconify icon="solar:pen-bold" />

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

@@ -1,3 +1,5 @@
+// src/sections/order/order-details-toolbar.tsx
+
 import type { IDateValue } from 'src/types/common';
 
 import { usePopover } from 'minimal-shared/hooks';
@@ -17,6 +19,7 @@ import { fDateTime } from 'src/utils/format-time';
 import { Label } from 'src/components/label';
 import { Iconify } from 'src/components/iconify';
 import { CustomPopover } from 'src/components/custom-popover';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -37,6 +40,7 @@ export function OrderDetailsToolbar({
   statusOptions,
   onChangeStatus,
 }: Props) {
+  const { t } = useTranslation();
   const menuActions = usePopover();
 
   const renderMenuActions = () => (
@@ -56,7 +60,7 @@ export function OrderDetailsToolbar({
               onChangeStatus(option.value);
             }}
           >
-            {option.label}
+            {t(option.label)}
           </MenuItem>
         ))}
       </MenuList>
@@ -124,11 +128,11 @@ export function OrderDetailsToolbar({
             variant="outlined"
             startIcon={<Iconify icon="solar:printer-minimalistic-bold" />}
           >
-            Print
+            {t('Print (not implemented)')}
           </Button>
 
           <Button color="inherit" variant="contained" startIcon={<Iconify icon="solar:pen-bold" />}>
-            Edit
+            {t('Edit')}
           </Button>
         </Box>
       </Box>

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

@@ -1,6 +1,8 @@
+// src/sections/order/view/order-details-view.tsx
+
 import type { IOrderItem } from 'src/types/order';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -19,19 +21,39 @@ import { OrderDetailsPayment } from '../order-details-payment';
 import { OrderDetailsCustomer } from '../order-details-customer';
 import { OrderDetailsDelivery } from '../order-details-delivery';
 import { OrderDetailsShipping } from '../order-details-shipping';
+import { useTranslate } from 'src/locales';
+import { useTranslation } from 'react-i18next';
+import { changeStatus } from 'src/actions/order';
+import { toast } from 'sonner';
 
 // ----------------------------------------------------------------------
 
 type Props = {
-  order?: IOrderItem;
+  order: IOrderItem;
 };
 
 export function OrderDetailsView({ order }: Props) {
-  const [status, setStatus] = useState(order?.status);
+  const { t } = useTranslation();
 
-  const handleChangeStatus = useCallback((newValue: string) => {
-    setStatus(newValue);
-  }, []);
+  const [status, setStatus] = useState(order.status);
+
+  const handleChangeStatus = useCallback(
+    async (newValue: string) => {
+      setStatus(newValue);
+      // change order status
+      try {
+        if (order?.id) {
+          await changeStatus(order.id, newValue);
+
+          toast.success('order status updated');
+        }
+      } catch (error) {
+        console.error(error);
+        toast.warning('error during update order status');
+      }
+    },
+    [order.id]
+  );
 
   return (
     <DashboardContent>
@@ -47,7 +69,12 @@ export function OrderDetailsView({ order }: Props) {
       <Grid container spacing={3}>
         <Grid size={{ xs: 12, md: 8 }}>
           <Box
-            sx={{ gap: 3, display: 'flex', flexDirection: { xs: 'column-reverse', md: 'column' } }}
+            sx={{
+              //
+              gap: 3,
+              display: 'flex',
+              flexDirection: { xs: 'column-reverse', md: 'column' },
+            }}
           >
             <OrderDetailsItems
               items={order?.items}

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

@@ -3,7 +3,7 @@
 import type { TableHeadCellProps } from 'src/components/table';
 import type { IOrderItem, IOrderTableFilters } from 'src/types/order';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { varAlpha } from 'minimal-shared/utils';
 import { useBoolean, useSetState } from 'minimal-shared/hooks';
 
@@ -46,6 +46,8 @@ import { OrderTableRow } from '../order-table-row';
 import { OrderTableToolbar } from '../order-table-toolbar';
 import { OrderTableFiltersResult } from '../order-table-filters-result';
 import { useTranslation } from 'react-i18next';
+import { useRouter } from 'src/routes/hooks';
+import { deleteOrder, useGetOrders } from 'src/actions/order';
 
 // ----------------------------------------------------------------------
 
@@ -55,12 +57,7 @@ const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...ORDER_STATUS_OPTIONS]
 
 export function OrderListView() {
   const { t } = useTranslation();
-
-  const table = useTable({ defaultOrderBy: 'orderNumber' });
-
-  const confirmDialog = useBoolean();
-
-  const [tableData, setTableData] = useState<IOrderItem[]>(_orders);
+  const router = useRouter();
 
   const TABLE_HEAD: TableHeadCellProps[] = [
     { id: 'orderNumber', label: t('Order'), width: 88 },
@@ -72,6 +69,18 @@ export function OrderListView() {
     { id: '', width: 88 },
   ];
 
+  const { orders, mutate, ordersLoading } = useGetOrders();
+
+  const table = useTable({ defaultOrderBy: 'orderNumber' });
+
+  const confirmDialog = useBoolean();
+
+  const [tableData, setTableData] = useState<IOrderItem[]>([]);
+
+  useEffect(() => {
+    setTableData(orders);
+  }, [orders]);
+
   const filters = useSetState<IOrderTableFilters>({
     name: '',
     status: 'all',
@@ -99,16 +108,23 @@ export function OrderListView() {
   const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
 
   const handleDeleteRow = useCallback(
-    (id: string) => {
-      const deleteRow = tableData.filter((row) => row.id !== id);
+    async (id: string) => {
+      // const deleteRow = tableData.filter((row) => row.id !== id);
 
-      toast.success('Delete success!');
+      try {
+        await deleteOrder(id);
+        toast.success('Delete success!');
+        mutate();
+      } catch (error) {
+        console.error(error);
+        toast.error('Delete failed!');
+      }
 
-      setTableData(deleteRow);
-
-      table.onUpdatePageDeleteRow(dataInPage.length);
+      // toast.success('Delete success!');
+      // setTableData(deleteRow);
+      // table.onUpdatePageDeleteRow(dataInPage.length);
     },
-    [dataInPage.length, table, tableData]
+    [table, tableData, mutate]
   );
 
   const handleDeleteRows = useCallback(() => {
@@ -133,7 +149,7 @@ export function OrderListView() {
     <ConfirmDialog
       open={confirmDialog.value}
       onClose={confirmDialog.onFalse}
-      title="Delete"
+      title={t('Delete')}
       content={
         <>
           Are you sure want to delete <strong> {table.selected.length} </strong> items?
@@ -145,7 +161,7 @@ export function OrderListView() {
           color="error"
           onClick={() => {
             handleDeleteRows();
-            confirmDialog.onFalse();
+            // confirmDialog.onFalse();
           }}
         >
           {t('Delete')}
@@ -154,12 +170,20 @@ export function OrderListView() {
     />
   );
 
+  useEffect(() => {
+    mutate();
+  }, []);
+
+  if (!orders) return <>loading</>;
+  if (ordersLoading) return <>loading</>;
+
   return (
     <>
       <DashboardContent>
         <CustomBreadcrumbs
           heading="List"
           links={[
+            //
             { name: t('Dashboard'), href: paths.dashboard.root },
             { name: t('Order'), href: paths.dashboard.order.root },
             { name: t('List') },

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

@@ -1,3 +1,4 @@
+// src/sections/product/product-new-edit-form.tsx
 import { zodResolver } from '@hookform/resolvers/zod';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -193,8 +194,8 @@ export function ProductNewEditForm({ currentProduct }: Props) {
     };
 
     try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      reset();
+      // await new Promise((resolve) => setTimeout(resolve, 500));
+      // reset();
 
       // sanitize file field
       for (let i = 0; i < values.images.length; i++) {

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

@@ -44,8 +44,6 @@ 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/view/product-details-view.tsx

@@ -1,3 +1,5 @@
+// src/sections/product/view/product-details-view.tsx
+
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';

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

@@ -58,6 +58,18 @@ const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
 
 export function ProductListView() {
   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') },
+  ];
+
   const confirmDeleteMultiItemsDialog = useBoolean();
 
   const confirmDeleteSingleItemDialog = useBoolean();
@@ -75,17 +87,6 @@ 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') },
-  ];
-
-  const PUBLISH_OPTIONS = [
-    { value: 'published', label: t('Published') },
-    { value: 'draft', label: t('Draft') },
-  ];
-
   useEffect(() => {
     if (products.length) {
       setTableData(products);

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

@@ -252,7 +252,7 @@ export function UserListView() {
                 )
               }
               action={
-                <Tooltip title="Delete">
+                <Tooltip title={t('Delete')}>
                   <IconButton color="primary" onClick={confirmDialog.onTrue}>
                     <Iconify icon="solar:trash-bin-trash-bold" />
                   </IconButton>

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

@@ -10,7 +10,7 @@ export type IInvoiceTableFilters = {
   startDate: IDatePickerControl;
 };
 
-export type IInvoiceItem = {
+export type IInvoiceItemItem = {
   id: string;
   title: string;
   price: number;
@@ -20,7 +20,7 @@ export type IInvoiceItem = {
   description: string;
 };
 
-export type IInvoice = {
+export type IInvoiceItem = {
   id: string;
   sent: number;
   taxes: number;
@@ -31,7 +31,7 @@ export type IInvoice = {
   totalAmount: number;
   dueDate: IDateValue;
   invoiceNumber: string;
-  items: IInvoiceItem[];
+  items: IInvoiceItemItem[];
   createDate: IDateValue;
   invoiceTo: IAddressItem;
   invoiceFrom: IAddressItem;

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

@@ -52,6 +52,8 @@ export type IOrderProductItem = {
 
 export type IOrderItem = {
   id: string;
+  createdAt: IDateValue;
+  //
   taxes: number;
   status: string;
   shipping: number;
@@ -60,8 +62,7 @@ export type IOrderItem = {
   orderNumber: string;
   totalAmount: number;
   totalQuantity: number;
-  createdAt: IDateValue;
-  history: IOrderHistory;
+  history: IOrderHistory | undefined;
   payment: IOrderPayment;
   customer: IOrderCustomer;
   delivery: IOrderDelivery;

03_source/mobile/dev.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+while true; do
+  npm i -D
+
+  npm run dev
+
+  echo "restarting..."
+  sleep 1
+done

03_source/mobile/src/App.tsx

@@ -62,6 +62,7 @@ import ChangeLanguage from './pages/ChangeLanguage';
 import ServiceAgreement from './pages/ServiceAgreement';
 import paths from './paths';
 import PrivacyAgreement from './pages/PrivacyAgreement';
+import AppRoute from './AppRoute';
 
 setupIonicReact();
 
@@ -107,8 +108,7 @@ const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn,
               which makes transitions between tabs and non tab pages smooth
             */}
 
-            {/*  */}
-            <Route path="/not_implemented" component={NotImplemented} />
+            <AppRoute />
 
             {/*  */}
             <Route path="/tabs" render={() => <MainTabs />} />
@@ -118,8 +118,6 @@ const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn,
             <Route path="/support" component={Support} />
             <Route path="/tutorial" component={Tutorial} />
             {/*  */}
-            <Route path="/event_detail/:id" component={EventDetail} />
-            <Route path="/profile/:id" component={MemberProfile} />
 
             {/*  */}
             <Route path={paths.SETTINGS} component={Settings} />

03_source/mobile/src/AppRoute.tsx

@@ -0,0 +1,18 @@
+import { Route } from 'react-router';
+import NotImplemented from './pages/NotImplemented';
+import EventDetail from './pages/EventDetail';
+import MemberProfile from './pages/MemberProfile';
+
+const AppRoute: React.FC = () => {
+  return (
+    <>
+      <Route path="/not_implemented" component={NotImplemented} />
+
+      {/*  */}
+      <Route path="/event_detail/:id" component={EventDetail} />
+      <Route path="/profile/:id" component={MemberProfile} />
+    </>
+  );
+};
+
+export default AppRoute;

03_source/mobile/src/TabAppRoute.tsx

@@ -0,0 +1,39 @@
+import { Route } from 'react-router';
+import NotImplemented from './pages/NotImplemented';
+import EventDetail from './pages/EventDetail';
+import MemberProfile from './pages/MemberProfile';
+import paths from './paths';
+import MembersNearByList from './pages/MembersNearByList';
+import OrderList from './pages/OrderList';
+import MessageList from './pages/MessageList';
+import Favourites from './pages/Favourites';
+import MyProfile from './pages/MyProfile';
+import EventList from './pages/EventList';
+
+const TabAppRoute: React.FC = () => {
+  return (
+    <>
+      <Route path="/tabs/not_implemented" component={NotImplemented} />
+
+      {/*  */}
+      <Route path={paths.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
+
+      {/*  */}
+      <Route path={paths.ORDERS_LIST} render={() => <OrderList />} exact={true} />
+
+      {/*  */}
+      <Route path={paths.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
+
+      {/*  */}
+      <Route path={paths.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
+
+      {/*  */}
+      <Route path="/tabs/events" render={() => <EventList />} exact={true} />
+
+      {/*  */}
+      <Route path="/tabs/my_profile" render={() => <MyProfile />} exact={true} />
+    </>
+  );
+};
+
+export default TabAppRoute;

03_source/mobile/src/data/dataApi.ts

@@ -16,8 +16,9 @@ export const getConfData = async () => {
   const response = await Promise.all([
     fetch(dataUrl),
     fetch(locationsUrl),
-    axios.get(`${constants.API_ENDPOINT}/v1/events`),
-    axios.get(`${constants.API_ENDPOINT}/v1/members`),
+    axios.get(`${constants.API_ENDPOINT}/api/order/list`),
+    // axios.get(`${constants.API_ENDPOINT}/v1/events`),
+    // axios.get(`${constants.API_ENDPOINT}/v1/members`),
     //
   ]);
   const responseData = await response[0].json();
@@ -30,8 +31,12 @@ export const getConfData = async () => {
     .filter((trackName, index, array) => array.indexOf(trackName) === index)
     .sort();
 
-  const events = response[2].data;
-  const nearByMembers = response[3].data;
+  // const events = response[2].data;
+  // const nearByMembers = response[3].data;
+  const orders = response[2].data.orders;
+
+  const events = [];
+  const nearByMembers = [];
 
   const data = {
     schedule,
@@ -43,16 +48,14 @@ export const getConfData = async () => {
     //
     events,
     nearByMembers,
+    orders,
+    //
   };
   return data;
 };
 
 export const getUserData = async () => {
-  const response = await Promise.all([
-    Storage.get({ key: HAS_LOGGED_IN }),
-    Storage.get({ key: HAS_SEEN_TUTORIAL }),
-    Storage.get({ key: USERNAME }),
-  ]);
+  const response = await Promise.all([Storage.get({ key: HAS_LOGGED_IN }), Storage.get({ key: HAS_SEEN_TUTORIAL }), Storage.get({ key: USERNAME })]);
   const isLoggedin = (await response[0].value) === 'true';
   const hasSeenTutorial = (await response[1].value) === 'true';
   const username = (await response[2].value) || undefined;

03_source/mobile/src/data/selectors.ts

@@ -19,144 +19,116 @@ const getSearchText = (state: AppState) => state.data.searchText;
 
 export const getEvents = (state: AppState) => state.data.events;
 export const getNearbyMembers = (state: AppState) => state.data.nearByMembers;
+export const getOrders = (state: AppState) => state.data.orders;
 
-export const getFilteredSchedule = createSelector(
-  getSchedule,
-  getFilteredTracks,
-  (schedule, filteredTracks) => {
-    const groups: ScheduleGroup[] = [];
+export const getFilteredSchedule = createSelector(getSchedule, getFilteredTracks, (schedule, filteredTracks) => {
+  const groups: ScheduleGroup[] = [];
 
-    // Helper function to convert 12-hour time to 24-hour time for proper sorting
-    const convertTo24Hour = (timeStr: string) => {
-      const [time, period] = timeStr.toLowerCase().split(' ');
-      let [hours, minutes] = time.split(':').map(Number);
+  // Helper function to convert 12-hour time to 24-hour time for proper sorting
+  const convertTo24Hour = (timeStr: string) => {
+    const [time, period] = timeStr.toLowerCase().split(' ');
+    let [hours, minutes] = time.split(':').map(Number);
 
-      if (period === 'pm' && hours !== 12) {
-        hours += 12;
-      } else if (period === 'am' && hours === 12) {
-        hours = 0;
-      }
+    if (period === 'pm' && hours !== 12) {
+      hours += 12;
+    } else if (period === 'am' && hours === 12) {
+      hours = 0;
+    }
 
-      return `${hours.toString().padStart(2, '0')}:${minutes || '00'}`;
-    };
+    return `${hours.toString().padStart(2, '0')}:${minutes || '00'}`;
+  };
 
-    // Sort the groups by time
-    const sortedGroups = [...schedule.groups].sort((a, b) => {
-      const timeA = convertTo24Hour(a.time);
-      const timeB = convertTo24Hour(b.time);
-      return timeA.localeCompare(timeB);
+  // Sort the groups by time
+  const sortedGroups = [...schedule.groups].sort((a, b) => {
+    const timeA = convertTo24Hour(a.time);
+    const timeB = convertTo24Hour(b.time);
+    return timeA.localeCompare(timeB);
+  });
+
+  sortedGroups.forEach((group: ScheduleGroup) => {
+    const sessions: Session[] = [];
+    group.sessions.forEach((session) => {
+      session.tracks.forEach((track) => {
+        if (filteredTracks.indexOf(track) > -1) {
+          sessions.push(session);
+        }
+      });
     });
 
-    sortedGroups.forEach((group: ScheduleGroup) => {
-      const sessions: Session[] = [];
-      group.sessions.forEach((session) => {
-        session.tracks.forEach((track) => {
-          if (filteredTracks.indexOf(track) > -1) {
-            sessions.push(session);
-          }
-        });
+    if (sessions.length) {
+      // Sort sessions within each group by start time
+      const sortedSessions = sessions.sort((a, b) => {
+        const timeA = convertTo24Hour(a.timeStart);
+        const timeB = convertTo24Hour(b.timeStart);
+        return timeA.localeCompare(timeB);
       });
 
-      if (sessions.length) {
-        // Sort sessions within each group by start time
-        const sortedSessions = sessions.sort((a, b) => {
-          const timeA = convertTo24Hour(a.timeStart);
-          const timeB = convertTo24Hour(b.timeStart);
-          return timeA.localeCompare(timeB);
-        });
-
-        const groupToAdd: ScheduleGroup = {
-          time: group.time,
-          sessions: sortedSessions,
-        };
-        groups.push(groupToAdd);
-      }
-    });
-
-    return {
-      date: schedule.date,
-      groups,
-    } as Schedule;
-  }
-);
-
-export const getSearchedSchedule = createSelector(
-  getFilteredSchedule,
-  getSearchText,
-  (schedule, searchText) => {
-    if (!searchText) {
-      return schedule;
+      const groupToAdd: ScheduleGroup = {
+        time: group.time,
+        sessions: sortedSessions,
+      };
+      groups.push(groupToAdd);
     }
-    const groups: ScheduleGroup[] = [];
-    schedule.groups.forEach((group) => {
-      const sessions = group.sessions.filter(
-        (s) => s.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
-      );
-      if (sessions.length) {
-        const groupToAdd: ScheduleGroup = {
-          time: group.time,
-          sessions,
-        };
-        groups.push(groupToAdd);
-      }
-    });
-    return {
-      date: schedule.date,
-      groups,
-    } as Schedule;
-  }
-);
+  });
 
-export const getScheduleList = createSelector(
-  getSearchedSchedule,
-  (schedule) => schedule
-);
+  return {
+    date: schedule.date,
+    groups,
+  } as Schedule;
+});
 
-export const getGroupedFavorites = createSelector(
-  getScheduleList,
-  getFavoriteIds,
-  (schedule, favoriteIds) => {
-    const groups: ScheduleGroup[] = [];
-    schedule.groups.forEach((group) => {
-      const sessions = group.sessions.filter(
-        (s) => favoriteIds.indexOf(s.id) > -1
-      );
-      if (sessions.length) {
-        const groupToAdd: ScheduleGroup = {
-          time: group.time,
-          sessions,
-        };
-        groups.push(groupToAdd);
-      }
-    });
-    return {
-      date: schedule.date,
-      groups,
-    } as Schedule;
+export const getSearchedSchedule = createSelector(getFilteredSchedule, getSearchText, (schedule, searchText) => {
+  if (!searchText) {
+    return schedule;
   }
-);
+  const groups: ScheduleGroup[] = [];
+  schedule.groups.forEach((group) => {
+    const sessions = group.sessions.filter((s) => s.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1);
+    if (sessions.length) {
+      const groupToAdd: ScheduleGroup = {
+        time: group.time,
+        sessions,
+      };
+      groups.push(groupToAdd);
+    }
+  });
+  return {
+    date: schedule.date,
+    groups,
+  } as Schedule;
+});
+
+export const getScheduleList = createSelector(getSearchedSchedule, (schedule) => schedule);
+
+export const getGroupedFavorites = createSelector(getScheduleList, getFavoriteIds, (schedule, favoriteIds) => {
+  const groups: ScheduleGroup[] = [];
+  schedule.groups.forEach((group) => {
+    const sessions = group.sessions.filter((s) => favoriteIds.indexOf(s.id) > -1);
+    if (sessions.length) {
+      const groupToAdd: ScheduleGroup = {
+        time: group.time,
+        sessions,
+      };
+      groups.push(groupToAdd);
+    }
+  });
+  return {
+    date: schedule.date,
+    groups,
+  } as Schedule;
+});
 
 const getIdParam = (_state: AppState, props: any) => {
   return props.match.params['id'];
 };
 
-export const getSession = createSelector(
-  getSessions,
-  getIdParam,
-  (sessions, id) => {
-    return sessions.find((s: Session) => s.id === id);
-  }
-);
+export const getSession = createSelector(getSessions, getIdParam, (sessions, id) => {
+  return sessions.find((s: Session) => s.id === id);
+});
 
-export const getSpeaker = createSelector(
-  getSpeakers,
-  getIdParam,
-  (speakers, id) => speakers.find((x: Speaker) => x.id === id)
-);
+export const getSpeaker = createSelector(getSpeakers, getIdParam, (speakers, id) => speakers.find((x: Speaker) => x.id === id));
 
-export const getEvent = createSelector(getEvents, getIdParam, (events, id) =>
-  events.find((x: Event) => x.id === id)
-);
+export const getEvent = createSelector(getEvents, getIdParam, (events, id) => events.find((x: Event) => x.id === id));
 
 export const getSpeakerSessions = createSelector(getSessions, (sessions) => {
   const speakerSessions: { [key: string]: Session[] } = {};
@@ -175,9 +147,7 @@ export const getSpeakerSessions = createSelector(getSessions, (sessions) => {
 });
 
 export const mapCenter = (state: AppState) => {
-  const item = state.data.locations.find(
-    (l: Location) => l.id === state.data.mapCenterId
-  );
+  const item = state.data.locations.find((l: Location) => l.id === state.data.mapCenterId);
   if (item == null) {
     return {
       id: 1,

03_source/mobile/src/data/sessions/orders.actions.ts

@@ -0,0 +1,61 @@
+import { getConfData } from '../dataApi';
+import { ActionType } from '../../util/types';
+import { ConfState } from './conf.state';
+
+export const loadConfData = () => async (dispatch: React.Dispatch<any>) => {
+  dispatch(setLoading(true));
+  const data = await getConfData();
+  dispatch(setData(data));
+  dispatch(setLoading(false));
+};
+
+export const setLoading = (isLoading: boolean) =>
+  ({
+    type: 'set-conf-loading',
+    isLoading,
+  } as const);
+
+export const setData = (data: Partial<ConfState>) =>
+  ({
+    type: 'set-conf-data',
+    data,
+  } as const);
+
+export const addFavorite = (sessionId: number) =>
+  ({
+    type: 'add-favorite',
+    sessionId,
+  } as const);
+
+export const removeFavorite = (sessionId: number) =>
+  ({
+    type: 'remove-favorite',
+    sessionId,
+  } as const);
+
+export const updateFilteredTracks = (filteredTracks: string[]) =>
+  ({
+    type: 'update-filtered-tracks',
+    filteredTracks,
+  } as const);
+
+export const setSearchText = (searchText?: string) =>
+  ({
+    type: 'set-search-text',
+    searchText,
+  } as const);
+
+export const setMenuEnabled = (menuEnabled: boolean) =>
+  ({
+    type: 'set-menu-enabled',
+    menuEnabled,
+  } as const);
+
+export type OrdersActions =
+  | ActionType<typeof setLoading>
+  | ActionType<typeof setData>
+  | ActionType<typeof addFavorite>
+  | ActionType<typeof removeFavorite>
+  | ActionType<typeof updateFilteredTracks>
+  | ActionType<typeof setSearchText>
+  | ActionType<typeof setMenuEnabled>;

03_source/mobile/src/data/sessions/orders.reducer.ts

@@ -0,0 +1,31 @@
+import { OrdersActions } from './orders.actions';
+import { ConfState } from './conf.state';
+
+export const orderReducer = (state: ConfState, action: OrdersActions): ConfState => {
+  switch (action.type) {
+    case 'set-conf-loading': {
+      return { ...state, loading: action.isLoading };
+    }
+    case 'set-conf-data': {
+      return { ...state, ...action.data };
+    }
+    case 'add-favorite': {
+      return { ...state, favorites: [...state.favorites, action.sessionId] };
+    }
+    case 'remove-favorite': {
+      return {
+        ...state,
+        favorites: [...state.favorites.filter((x) => x !== action.sessionId)],
+      };
+    }
+    case 'update-filtered-tracks': {
+      return { ...state, filteredTracks: action.filteredTracks };
+    }
+    case 'set-search-text': {
+      return { ...state, searchText: action.searchText };
+    }
+    case 'set-menu-enabled': {
+      return { ...state, menuEnabled: action.menuEnabled };
+    }
+  }
+};

03_source/mobile/src/data/state.ts

@@ -3,6 +3,8 @@ import { combineReducers } from './combineReducers';
 import { sessionsReducer } from './sessions/sessions.reducer';
 import { userReducer } from './user/user.reducer';
 import { locationsReducer } from './locations/locations.reducer';
+//
+import { orderReducer } from './sessions/orders.reducer';
 
 export const initialState: AppState = {
   data: {
@@ -19,6 +21,7 @@ export const initialState: AppState = {
     //
     events: [],
     nearbyMembers: [],
+    orders: [],
   },
   user: {
     hasSeenTutorial: false,
@@ -35,6 +38,8 @@ export const reducers = combineReducers({
   data: sessionsReducer,
   user: userReducer,
   locations: locationsReducer,
+  //
+  order: orderReducer,
 });
 
 export type AppState = ReturnType<typeof reducers>;

03_source/mobile/src/models/Order.ts

@@ -0,0 +1,15 @@
+export type IDateValue = string | number | null;
+
+export interface Order {
+  id: string;
+  createdAt: IDateValue;
+  //
+  taxes: number;
+  status: string;
+  shipping: number;
+  discount: number;
+  subtotal: number;
+  orderNumber: string;
+  totalAmount: number;
+  totalQuantity: number;
+}

03_source/mobile/src/pages/MainTabs.tsx

@@ -17,6 +17,7 @@ import MyProfile from './MyProfile';
 import MessageList from './MessageList';
 import paths from '../paths';
 import Favourites from './Favourites';
+import TabAppRoute from '../TabAppRoute';
 
 interface MainTabsProps {}
 
@@ -40,22 +41,7 @@ const MainTabs: React.FC<MainTabsProps> = () => {
         <Route path="/tabs/about" render={() => <About />} exact={true} />
 
         {/*  */}
-        <Route path="/tabs/events" render={() => <EventList />} exact={true} />
-
-        {/*  */}
-        <Route path={paths.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
-
-        {/*  */}
-        <Route path={paths.ORDERS_LIST} render={() => <OrderList />} exact={true} />
-
-        {/*  */}
-        <Route path={paths.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
-
-        {/*  */}
-        <Route path={paths.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
-
-        {/*  */}
-        <Route path="/tabs/my_profile" render={() => <MyProfile />} exact={true} />
+        <TabAppRoute />
       </IonRouterOutlet>
       {/*  */}
       <IonTabBar slot="bottom">

03_source/mobile/src/pages/MyProfile/NotLoggedIn/index.tsx

@@ -0,0 +1,155 @@
+// REQ0053/profile-page
+//
+// PURPOSE:
+// - Provides functionality view user profile
+//
+// RULES:
+// - T.B.A.
+//
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonMenuButton,
+  IonGrid,
+  IonRow,
+  IonCol,
+  useIonRouter,
+  IonButton,
+  IonIcon,
+  IonPopover,
+  IonAvatar,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  useIonModal,
+  IonInput,
+  RefresherEventDetail,
+  IonRefresher,
+  IonRefresherContent,
+} from '@ionic/react';
+import SpeakerItem from '../../../components/SpeakerItem';
+import { Speaker } from '../../../models/Speaker';
+import { Session } from '../../../models/Schedule';
+import { connect } from '../../../data/connect';
+import * as selectors from '../../../data/selectors';
+import '../../SpeakerList.scss';
+import { getEvents } from '../../../api/getEvents';
+import { format } from 'date-fns';
+import { Event } from '../types';
+import { alertOutline, chevronDownCircleOutline, createOutline, heart, menuOutline, settingsOutline } from 'ionicons/icons';
+import AboutPopover from '../../../components/AboutPopover';
+import paths from '../../../paths';
+import { getProfileById } from '../../../api/getProfileById';
+import { defaultMember, Member } from '../../MemberProfile/type';
+
+interface OwnProps {}
+
+interface StateProps {
+  speakers: Speaker[];
+  speakerSessions: { [key: string]: Session[] };
+}
+
+interface DispatchProps {}
+
+interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
+
+const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
+  const [profile, setProfile] = useState<Member>(defaultMember);
+
+  const [showPopover, setShowPopover] = useState(false);
+  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const router = useIonRouter();
+
+  function handleShowSettingButtonClick() {
+    router.push(paths.SETTINGS);
+  }
+
+  function handleNotImplementedClick() {
+    router.push(paths.NOT_IMPLEMENTED);
+  }
+
+  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.detail.complete();
+    }, 2000);
+  }
+
+  const [disableForwardLoginButton, setDisableForwardLoginButton] = useState(false);
+  function handleForwardLoginPage() {
+    try {
+      setDisableForwardLoginButton(true);
+      router.push(paths.login);
+      setDisableForwardLoginButton(false);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  useEffect(() => {
+    getProfileById('2').then(({ data }) => {
+      console.log({ data });
+      setProfile(data);
+    });
+  }, []);
+
+  if (!profile) return <>loading</>;
+
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="end">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round" onClick={() => handleShowSettingButtonClick()}>
+              <IonIcon slot="icon-only" icon={settingsOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>My profile</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen={true}>
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent pullingIcon={chevronDownCircleOutline} pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."></IonRefresherContent>
+        </IonRefresher>
+
+        <IonHeader collapse="condense" className="ion-no-border">
+          <IonToolbar>
+            <IonTitle size="large">My profile</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <div style={{ height: '50vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+          <div>
+            not login yet, <br />
+            please login or sign up
+          </div>
+          <div style={{ height: '50vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+            <IonButton disabled={disableForwardLoginButton} onClick={handleForwardLoginPage}>
+              Login
+            </IonButton>
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default connect<OwnProps, StateProps, DispatchProps>({
+  mapStateToProps: (state) => ({
+    speakers: selectors.getSpeakers(state),
+    speakerSessions: selectors.getSpeakerSessions(state),
+  }),
+  component: React.memo(MyProfile),
+});

03_source/mobile/src/pages/MyProfile/index.tsx

@@ -49,6 +49,7 @@ import AboutPopover from '../../components/AboutPopover';
 import paths from '../../paths';
 import { getProfileById } from '../../api/getProfileById';
 import { defaultMember, Member } from '../MemberProfile/type';
+import NotLoggedIn from './NotLoggedIn';
 
 interface OwnProps {}
 
@@ -63,6 +64,7 @@ interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
 
 const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
   const [profile, setProfile] = useState<Member>(defaultMember);
+
   const [showPopover, setShowPopover] = useState(false);
   const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
   const modal = useRef<HTMLIonModalElement>(null);
@@ -92,6 +94,7 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
   }, []);
 
   if (!profile) return <>loading</>;
+  if (profile.id == -1) return <NotLoggedIn />;
 
   return (
     <IonPage id="speaker-list">

03_source/mobile/src/pages/NotImplemented/index.tsx

@@ -7,34 +7,9 @@
 // - T.B.A.
 //
 import React, { useEffect, useState } from 'react';
-import {
-  IonHeader,
-  IonToolbar,
-  IonContent,
-  IonPage,
-  IonButtons,
-  IonMenuButton,
-  IonButton,
-  IonIcon,
-  IonDatetime,
-  IonSelectOption,
-  IonList,
-  IonItem,
-  IonLabel,
-  IonSelect,
-  IonPopover,
-  IonText,
-  IonFooter,
-  useIonRouter,
-} from '@ionic/react';
+import { IonHeader, IonToolbar, IonContent, IonPage, IonButtons, IonMenuButton, IonButton, IonIcon, IonDatetime, IonSelectOption, IonList, IonItem, IonLabel, IonSelect, IonPopover, IonText, IonFooter, useIonRouter } from '@ionic/react';
 import './style.scss';
-import {
-  chevronBackOutline,
-  ellipsisHorizontal,
-  ellipsisVertical,
-  heart,
-  logoIonic,
-} from 'ionicons/icons';
+import { chevronBackOutline, ellipsisHorizontal, ellipsisVertical, heart, logoIonic } from 'ionicons/icons';
 import AboutPopover from '../../components/AboutPopover';
 import { format, parseISO } from 'date-fns';
 import { TestContent } from './TestContent';
@@ -60,12 +35,8 @@ interface Event {
 const EventDetail: React.FC<AboutProps> = () => {
   const [showPopover, setShowPopover] = useState(false);
   const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
-  const [location, setLocation] = useState<
-    'madison' | 'austin' | 'chicago' | 'seattle'
-  >('madison');
-  const [conferenceDate, setConferenceDate] = useState(
-    '2047-05-17T00:00:00-05:00'
-  );
+  const [location, setLocation] = useState<'madison' | 'austin' | 'chicago' | 'seattle'>('madison');
+  const [conferenceDate, setConferenceDate] = useState('2047-05-17T00:00:00-05:00');
 
   const selectOptions = {
     header: 'Select a Location',
@@ -95,8 +66,6 @@ const EventDetail: React.FC<AboutProps> = () => {
     router.goBack();
   }
 
-  if (!eventDetail) return <>loading</>;
-
   return (
     <IonPage id="about-page">
       <IonContent>
@@ -110,11 +79,7 @@ const EventDetail: React.FC<AboutProps> = () => {
             </IonButtons>
             <IonButtons slot="end">
               <IonButton onClick={presentPopover}>
-                <IonIcon
-                  slot="icon-only"
-                  ios={ellipsisHorizontal}
-                  md={ellipsisVertical}
-                ></IonIcon>
+                <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
               </IonButton>
             </IonButtons>
           </IonToolbar>
@@ -143,7 +108,8 @@ const EventDetail: React.FC<AboutProps> = () => {
               backgroundPosition: 'center',
             }}
           ></div>
-          Sorry but Not implemented
+          Sorry this feature
+          <br /> Not implemented
           <IonButton onClick={handleBackOnClick} fill="clear" size="large">
             <IonIcon icon={chevronBackOutline} slot="start"></IonIcon>
             Back

03_source/mobile/src/pages/OrderList/index copy.tsx

@@ -38,17 +38,11 @@ import '../SpeakerList.scss';
 import { getEvents } from '../../api/getEvents';
 import { format } from 'date-fns';
 import { Order } from './types';
-import {
-  chevronBackOutline,
-  chevronDownCircleOutline,
-  chevronForwardOutline,
-  heart,
-  logoIonic,
-  menuOutline,
-} from 'ionicons/icons';
+import { bookmarksOutline, chevronBackOutline, chevronDownCircleOutline, chevronForwardOutline, heart, logoIonic, menuOutline } from 'ionicons/icons';
 import AboutPopover from '../../components/AboutPopover';
 import { getOrders } from '../../api/getOrders';
 import Loading from '../../components/Loading';
+import paths from '../../paths';
 
 interface OwnProps {}
 
@@ -61,17 +55,14 @@ interface DispatchProps {}
 
 interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
 
-const EventList: React.FC<SpeakerListProps> = ({
-  speakers,
-  speakerSessions,
-}) => {
-  const [orders, setEvents] = useState<Order[] | []>([]);
+const EventList: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
+  const router = useIonRouter();
+  const [orders, setEvents] = useState<Order[]>([]);
+
   const [showPopover, setShowPopover] = useState(false);
   const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
   const modal = useRef<HTMLIonModalElement>(null);
 
-  const router = useIonRouter();
-
   useEffect(() => {
     getOrders().then(({ data }) => {
       console.log({ data });
@@ -86,8 +77,16 @@ const EventList: React.FC<SpeakerListProps> = ({
     }, 2000);
   }
 
-  function handleShowOrderDetail(event_id: string) {
-    router.push(`/order_detail/${event_id}`);
+  function handleShowOrderDetail(order_id: string) {
+    router.push(paths.getOrderDetail(order_id));
+  }
+
+  function handleNotImplemented() {
+    router.push(paths.NOT_IMPLEMENTED);
+  }
+
+  function handleBookmarksClick() {
+    router.push(paths.FAVOURITES_LIST);
   }
 
   if (!orders) return <Loading />;
@@ -96,18 +95,19 @@ const EventList: React.FC<SpeakerListProps> = ({
     <IonPage id="speaker-list">
       <IonHeader translucent={true} className="ion-no-border">
         <IonToolbar>
+          <IonButtons slot="end">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round" expand="block" onClick={handleBookmarksClick}>
+              <IonIcon slot="icon-only" icon={bookmarksOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
           <IonTitle>My Orders</IonTitle>
         </IonToolbar>
       </IonHeader>
 
       <IonContent fullscreen={true}>
         <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
-          <IonRefresherContent
-            pullingIcon={chevronDownCircleOutline}
-            pullingText="Pull to refresh"
-            refreshingSpinner="circles"
-            refreshingText="Refreshing..."
-          ></IonRefresherContent>
+          <IonRefresherContent pullingIcon={chevronDownCircleOutline} pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."></IonRefresherContent>
         </IonRefresher>
 
         <IonHeader collapse="condense">
@@ -116,94 +116,73 @@ const EventList: React.FC<SpeakerListProps> = ({
           </IonToolbar>
         </IonHeader>
 
-        <IonGrid fixed>
-          <IonRow>
-            {orders.map((order, idx) => (
-              <IonCol size="12" size-md="6" key={idx}>
-                <div>
+        <IonList>
+          {orders.map((order, idx) => (
+            <IonItem button onClick={handleNotImplemented}>
+              <div
+                style={{
+                  paddingBottom: '1rem',
+                  paddingTop: '1rem',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    gap: '1rem',
+                  }}
+                >
+                  <div style={{ width: '70px' }}>
+                    <IonAvatar>
+                      <img alt="Silhouette of a person's head" src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc" />
+                    </IonAvatar>
+                  </div>
+
                   <div
                     style={{
                       display: 'flex',
+                      flexDirection: 'column',
                       gap: '1rem',
+                      flexGrow: 1,
                     }}
                   >
-                    <div style={{ width: '70px' }}>
-                      <IonAvatar>
-                        <img
-                          alt="Silhouette of a person's head"
-                          src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc"
-                        />
-                      </IonAvatar>
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <div style={{ fontSize: '1.2rem' }}>{order.title}</div>
+                      <IonButton shape="round" onClick={() => handleShowOrderDetail('1')} size="small" fill="clear">
+                        <IonIcon slot="icon-only" icon={chevronForwardOutline} size="small"></IonIcon>
+                      </IonButton>
                     </div>
-
                     <div
                       style={{
                         display: 'flex',
                         flexDirection: 'column',
-                        gap: '1rem',
-                        flexGrow: 1,
+                        gap: '0.33rem',
+                        fontSize: '0.9rem',
                       }}
                     >
-                      <div
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                        }}
-                      >
-                        <div style={{ fontSize: '1.2rem' }}>{order.title}</div>
-                        <IonButton
-                          shape="round"
-                          onClick={() => handleShowOrderDetail('1')}
-                          size="small"
-                          fill="clear"
-                        >
-                          <IonIcon
-                            slot="icon-only"
-                            icon={chevronForwardOutline}
-                            size="small"
-                          ></IonIcon>
-                        </IonButton>
-                      </div>
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                          gap: '0.33rem',
-                          fontSize: '0.9rem',
-                        }}
-                      >
-                        <div>Order time: {order.createdAt} </div>
-                        <div>Last payment date: {order.last_payment_date}</div>
-                        <div>Number of applicants: 38 </div>
-                        <div>Remaining dates: 50 </div>
-                        <div>
-                          <IonButton fill="outline">{order.status}</IonButton>
-                        </div>
+                      <div>Order time: {order.createdAt} </div>
+                      <div>Last payment date: {order.last_payment_date}</div>
+                      <div>Number of applicants: 38 </div>
+                      <div>Remaining dates: 50 </div>
+                      <div>
+                        <IonButton fill="outline">{order.status}</IonButton>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div
-                  style={{
-                    borderBottom: '1px solid lightgray',
-                    marginTop: '0.5rem',
-                    marginBottom: '0.5rem',
-                  }}
-                ></div>
-              </IonCol>
-            ))}
-          </IonRow>
-        </IonGrid>
+              </div>
+            </IonItem>
+          ))}
+        </IonList>
       </IonContent>
 
       {/* REQ0079/event-filter */}
-      <IonModal
-        ref={modal}
-        trigger="open-modal"
-        initialBreakpoint={0.5}
-        breakpoints={[0, 0.25, 0.5, 0.75]}
-      >
+      <IonModal ref={modal} trigger="open-modal" initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
         <IonContent className="ion-padding">
           <div
             style={{
@@ -255,10 +234,7 @@ const EventList: React.FC<SpeakerListProps> = ({
               <IonButton shape="round">All</IonButton>
             </div>
 
-            <IonButton
-              shape="round"
-              style={{ marginTop: '1rem', marginBottom: '1rem' }}
-            >
+            <IonButton shape="round" style={{ marginTop: '1rem', marginBottom: '1rem' }}>
               Apply
             </IonButton>
           </div>

03_source/mobile/src/pages/OrderList/index.tsx

@@ -31,13 +31,14 @@ import {
 } from '@ionic/react';
 import SpeakerItem from '../../components/SpeakerItem';
 import { Speaker } from '../../models/Speaker';
+import { Order } from '../../models/Order';
 import { Session } from '../../models/Schedule';
 import { connect } from '../../data/connect';
 import * as selectors from '../../data/selectors';
 import '../SpeakerList.scss';
 import { getEvents } from '../../api/getEvents';
 import { format } from 'date-fns';
-import { Order } from './types';
+// import { Order } from './types';
 import { bookmarksOutline, chevronBackOutline, chevronDownCircleOutline, chevronForwardOutline, heart, logoIonic, menuOutline } from 'ionicons/icons';
 import AboutPopover from '../../components/AboutPopover';
 import { getOrders } from '../../api/getOrders';
@@ -47,7 +48,8 @@ import paths from '../../paths';
 interface OwnProps {}
 
 interface StateProps {
-  speakers: Speaker[];
+  orders: Order[];
+  //
   speakerSessions: { [key: string]: Session[] };
 }
 
@@ -55,19 +57,93 @@ interface DispatchProps {}
 
 interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
 
-const EventList: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
+const RemainingDays: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <div>#Rem:</div>
+      <div>{amount}</div>
+    </div>
+  );
+};
+
+const NumApplicants: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <div>#app. :</div>
+      <div>{amount}</div>
+    </div>
+  );
+};
+
+const TotalAmount: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '1.1rem' }}>
+      <div style={{ display: 'flex', gap: '1rem', fontWeight: 'bold', fontSize: '1.2rem', opacity: 0.8 }}>
+        <div>Total:</div>
+        <div style={{ minWidth: '75px', display: 'inline-flex', justifyContent: 'flex-end' }}>{amount} </div>
+      </div>
+    </div>
+  );
+};
+
+// Subtotal HK$83.74
+const Subtotal: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+      <div>Subtotal:</div>
+      <div style={{ minWidth: '50px', display: 'inline-flex', justifyContent: 'flex-end' }}>{amount} </div>
+    </div>
+  );
+};
+
+// Shipping - HK$10
+const Shipping: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <div style={{ display: 'flex', gap: '1rem', fontWeight: 'bold' }}>
+        <div>Shipping:</div>
+        <div style={{ minWidth: '50px', display: 'inline-flex', justifyContent: 'flex-end' }}>{amount} </div>
+      </div>
+    </div>
+  );
+};
+
+// Discount - HK$10
+const Discount: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <div style={{ display: 'flex', gap: '1rem', fontWeight: 'bold' }}>
+        <div>Discount:</div>
+        <div style={{ minWidth: '50px', display: 'inline-flex', justifyContent: 'flex-end' }}>{amount} </div>
+      </div>
+    </div>
+  );
+};
+
+// Taxes HK$10
+const Tax: React.FC<{ amount: number }> = ({ amount }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <div style={{ display: 'flex', gap: '1rem', fontWeight: 'bold' }}>
+        <div>Tax:</div>
+        <div style={{ minWidth: '50px', display: 'inline-flex', justifyContent: 'flex-end' }}>{amount} </div>
+      </div>
+    </div>
+  );
+};
+
+const EventList: React.FC<SpeakerListProps> = ({ orders, speakerSessions }) => {
   const router = useIonRouter();
-  const [orders, setEvents] = useState<Order[] | []>([]);
 
   const [showPopover, setShowPopover] = useState(false);
   const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
   const modal = useRef<HTMLIonModalElement>(null);
 
   useEffect(() => {
-    getOrders().then(({ data }) => {
-      console.log({ data });
-      setEvents(data);
-    });
+    // getOrders().then(({ data }) => {
+    //   console.log({ data });
+    //   setEvents(data);
+    // });
   }, []);
 
   function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
@@ -119,58 +195,68 @@ const EventList: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
         <IonList>
           {orders.map((order, idx) => (
             <IonItem button onClick={handleNotImplemented}>
-              <div
-                style={{
-                  paddingBottom: '1rem',
-                  paddingTop: '1rem',
-                }}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    gap: '1rem',
-                  }}
-                >
-                  <div style={{ width: '70px' }}>
-                    <IonAvatar>
-                      <img alt="Silhouette of a person's head" src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc" />
-                    </IonAvatar>
-                  </div>
-
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '1rem',
-                      flexGrow: 1,
-                    }}
-                  >
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <div style={{ fontSize: '1.2rem' }}>{order.title}</div>
-                      <IonButton shape="round" onClick={() => handleShowOrderDetail('1')} size="small" fill="clear">
-                        <IonIcon slot="icon-only" icon={chevronForwardOutline} size="small"></IonIcon>
-                      </IonButton>
+              <div style={{ paddingBottom: '1rem', paddingTop: '1rem' }}>
+                <div style={{ display: 'flex', gap: '0.5rem', width: 'calc( 100vw - 35px )' }}>
+                  <div style={{}}>
+                    <div>
+                      <div style={{ width: '70px' }}>
+                        <IonAvatar>
+                          <img alt="Silhouette of a person's head" src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc" />
+                        </IonAvatar>
+                        <div style={{ marginTop: '1rem', display: 'inline-flex', flexDirection: 'column', gap: '0.5rem' }}>
+                          <NumApplicants amount={38} />
+                          <RemainingDays amount={50} />
+                        </div>
+                      </div>
                     </div>
+                  </div>
+                  <div style={{ flexGrow: 1 }}>
                     <div
                       style={{
+                        flexGrow: 1,
+                        //
                         display: 'flex',
                         flexDirection: 'column',
-                        gap: '0.33rem',
-                        fontSize: '0.9rem',
+                        gap: '1rem',
                       }}
                     >
-                      <div>Order time: {order.createdAt} </div>
-                      <div>Last payment date: {order.last_payment_date}</div>
-                      <div>Number of applicants: 38 </div>
-                      <div>Remaining dates: 50 </div>
+                      <div
+                        style={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <div style={{ fontSize: '1.2rem' }}>{order.orderNumber}</div>
+                        <IonButton shape="round" onClick={() => handleShowOrderDetail('1')} size="small" fill="clear">
+                          <IonIcon slot="icon-only" icon={chevronForwardOutline} size="small"></IonIcon>
+                        </IonButton>
+                      </div>
+
+                      <div
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          gap: '0.33rem',
+                          fontSize: '0.9rem',
+                        }}
+                      >
+                        <div style={{ display: 'inline-flex', gap: '0.5rem' }}>
+                          <div style={{ fontWeight: 'bold' }}>Order time:</div>
+                          <div>{order.createdAt.split('T')[0]}</div>
+                        </div>
+                        <div>
+                          <div style={{ fontWeight: 'bold' }}>Last payment date:</div>
+                          <div>{order.last_payment_date}</div>
+                        </div>
+                      </div>
+
                       <div>
-                        <IonButton fill="outline">{order.status}</IonButton>
+                        <Subtotal amount={order.subtotal} />
+                        <Shipping amount={order.shipping} />
+                        <Discount amount={order.discount} />
+                        <Tax amount={order.taxes} />
+                        <TotalAmount amount={order.totalAmount} />
                       </div>
                     </div>
                   </div>
@@ -180,73 +266,14 @@ const EventList: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
           ))}
         </IonList>
       </IonContent>
-
-      {/* REQ0079/event-filter */}
-      <IonModal ref={modal} trigger="open-modal" initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
-        <IonContent className="ion-padding">
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gap: '1rem',
-            }}
-          >
-            <div
-              style={{
-                textAlign: 'center',
-                fontWeight: '1rem',
-                fontSize: '1.5rem',
-                marginTop: '0.5rem',
-                marginBottom: '0.5rem',
-              }}
-            >
-              Filter
-            </div>
-            <div
-              style={{
-                textAlign: 'center',
-                fontWeight: '1rem',
-                marginTop: '0.5rem',
-                marginBottom: '0.5rem',
-              }}
-            >
-              Maximum number of participant
-            </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <IonButton shape="round">2-10</IonButton>
-              <IonButton shape="round">12-40</IonButton>
-              <IonButton shape="round">All</IonButton>
-            </div>
-            <div
-              style={{
-                textAlign: 'center',
-                fontWeight: '1rem',
-                marginTop: '0.5rem',
-                marginBottom: '0.5rem',
-              }}
-            >
-              Held date
-            </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <IonButton shape="round">Weekly</IonButton>
-              <IonButton shape="round">Monthly</IonButton>
-              <IonButton shape="round">All</IonButton>
-            </div>
-
-            <IonButton shape="round" style={{ marginTop: '1rem', marginBottom: '1rem' }}>
-              Apply
-            </IonButton>
-          </div>
-        </IonContent>
-      </IonModal>
     </IonPage>
   );
 };
 
 export default connect<OwnProps, StateProps, DispatchProps>({
   mapStateToProps: (state) => ({
-    speakers: selectors.getSpeakers(state),
+    orders: selectors.getOrders(state),
+    // TODO: review below
     speakerSessions: selectors.getSpeakerSessions(state),
   }),
   component: React.memo(EventList),

03_source/mobile/src/paths.ts

@@ -11,5 +11,7 @@ const paths = {
   CHANGE_LANGUAGE: '/change_language',
   SERVICE_AGREEMENT: '/service_agreement',
   PRIVACY_AGREEMENT: '/privacy_agreement',
+  //
+  login: '/login',
 };
 export default paths;