"feat: enhance order management with new APIs and schema changes"

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/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';

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';

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>

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/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/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/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;