"feat: enhance invoice management with schema updates, seed data, and new APIs"

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/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/product.ts

@@ -56,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/product/details.tsx

@@ -14,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 = () => (
@@ -172,7 +186,7 @@ export function InvoiceDetails({ invoice }: Props) {
             <Typography variant="subtitle2" sx={{ mb: 1 }}>
               Date create
             </Typography>
-            {fDate(invoice?.createDate)}
+            {fDate(invoice?.createdDate)}
           </Stack>
 
           <Stack sx={{ typography: 'body2' }}>

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,17 +51,18 @@ 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),
+    createdDate: 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), {
+  .refine((data) => !fIsAfter(data.createdDate, data.dueDate), {
     message: 'Due date cannot be earlier than create date!',
     path: ['dueDate'],
   });
@@ -62,18 +70,19 @@ 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();
 
   const defaultValues: NewInvoiceSchemaType = {
     invoiceNumber: 'INV-1990',
-    createDate: today(),
+    createdDate: today(),
     dueDate: null,
     taxes: 0,
     shipping: 0,
@@ -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;
 };
 
@@ -139,7 +139,7 @@ function InvoicePdfDocument({ invoice, currentStatus }: InvoicePdfDocumentProps)
     shipping,
     subtotal,
     invoiceTo,
-    createDate,
+    createdDate,
     totalAmount,
     invoiceFrom,
     invoiceNumber,
@@ -197,7 +197,7 @@ function InvoicePdfDocument({ invoice, currentStatus }: InvoicePdfDocumentProps)
     <View style={[styles.container, styles.mb40]}>
       <View style={{ width: '50%' }}>
         <Text style={[styles.text1Bold, styles.mb4]}>Date create</Text>
-        <Text style={[styles.text2]}>{fDate(createDate)}</Text>
+        <Text style={[styles.text2]}>{fDate(createdDate)}</Text>
       </View>
       <View style={{ width: '50%' }}>
         <Text style={[styles.text1Bold, styles.mb4]}>Due date</Text>

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>
       }
     />
@@ -138,8 +141,8 @@ export function InvoiceTableRow({
 
         <TableCell>
           <ListItemText
-            primary={fDate(row.createDate)}
-            secondary={fTime(row.createDate)}
+            primary={fDate(row.createdDate)}
+            secondary={fTime(row.createdDate)}
             slotProps={{
               primary: { noWrap: true, sx: { typography: 'body2' } },
               secondary: { sx: { mt: 0.5, typography: 'caption' } },

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/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-items.tsx

@@ -83,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/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-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/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,8 +31,8 @@ export type IInvoice = {
   totalAmount: number;
   dueDate: IDateValue;
   invoiceNumber: string;
-  items: IInvoiceItem[];
-  createDate: IDateValue;
+  items: IInvoiceItemItem[];
+  createdDate: IDateValue;
   invoiceTo: IAddressItem;
   invoiceFrom: IAddressItem;
 };