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

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>