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

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>