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

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