several detail changes

frontend/dashboard/pnpm-lock.yaml

@@ -229,6 +229,7 @@ devDependencies:
 
 packages:
 
+<<<<<<< Updated upstream
 <<<<<<< HEAD
   /@aashutoshrathi/word-wrap@1.2.6:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
@@ -237,16 +238,21 @@ packages:
 
 =======
 >>>>>>> a54708abb5d46d7d7319730306a528d33d910895
+=======
+>>>>>>> Stashed changes
   /@ajoelp/json-to-formdata@1.5.0:
     resolution: {integrity: sha512-nrlfeTSL0X0dtx5r2KpzPiqLSIQquiiJjUKsQAKzWaCmO2QoYZCyb5ENZwF3YoffKronOCJr25mxaD8JRJmK8w==}
     dependencies:
       lodash: 4.17.21
     dev: false
 
+<<<<<<< Updated upstream
 <<<<<<< HEAD
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
 =======
+=======
+>>>>>>> Stashed changes
   /@ampproject/remapping@2.2.0:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
 >>>>>>> a54708abb5d46d7d7319730306a528d33d910895
@@ -1769,6 +1775,7 @@ packages:
 
   /@emotion/memoize@0.7.4:
     resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+    requiresBuild: true
     dev: false
     optional: true
 

frontend/dashboard/src/components/hook-form/RHFDatepicker.tsx

@@ -60,8 +60,8 @@ export default function RHFDatepicker({ name, ...other }: IProps & TextFieldProp
 
           <DesktopDatePicker
             value={field.value}
-            // inputFormat="dd/MM/yyyy"
+            inputFormat="dd/MMM/yyyy"
-            inputFormat="yyyy-MM-dd"
+            // inputFormat="dd - MMM - yyyy"
             onChange={(value) => {
               field.onChange(value);
             }}

frontend/dashboard/src/pages/Corporates/Form.tsx

@@ -62,7 +62,6 @@ type Props = {
 };
 
 export default function CorporateForm({ isEdit, currentCorporate }: Props) {
-  
   const navigate = useNavigate();
   const [corporate_groups, setCorporateGroups] = useState([]);
 
@@ -70,7 +69,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
 
   const { enqueueSnackbar } = useSnackbar();
   let NewCorporateSchema = null;
-  if (isEdit){
+  if (isEdit) {
     NewCorporateSchema = Yup.object().shape({
       isEdited: Yup.boolean(),
       name: Yup.string().required('Name is required'),
@@ -81,36 +80,35 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       help_text: Yup.string().required('Help Text is required'),
       // policy_code: Yup.string().required('Policy Code is required'),
       policy_start: Yup.date().required('Start Date is required'),
-      policy_end: Yup.date().required('End Date is required').min(Yup.ref('policy_start'), "end date can't be before start date"),
+      policy_end: Yup.date()
+        .required('End Date is required')
+        .min(Yup.ref('policy_start'), "end date can't be before start date"),
       policy_total_premi: Yup.number().required('Deposit Initial Fund is required').min(0),
       // linking_rules: Yup.string().required('Link Rules is required'),
-      policy_minimal_deposit_percentage: 
+      policy_minimal_deposit_percentage: Yup.number()
-          Yup.number()
+        .typeError('Please enter a valid number')
-          .typeError("Please enter a valid number")
+        .required('Percentage Deposit is required')
-          .required('Percentage Deposit is required')
+        .min(0, 'Minimum atleast 0')
-          .min(0, "Minimum atleast 0")
+        .max(100, 'Allowed maximum is 100'),
-          .max(100, "Allowed maximum is 100"),
+      policy_minimal_alert_percentage: Yup.number()
-      policy_minimal_alert_percentage: 
+        .typeError('Please enter a valid number')
-          Yup.number()
+        .required('Percentage Alert is required')
-          .typeError("Please enter a valid number")
+        .min(0, 'Minimum atleast 0')
-          .required('Percentage Alert is required')
+        .max(100, 'Allowed maximum is 100'),
-          .min(0, "Minimum atleast 0")
+      policy_stop_service_percentage: Yup.number()
-          .max(100, "Allowed maximum is 100"),
+        .typeError('Please enter a valid number')
-      policy_stop_service_percentage: 
+        .min(0, 'Minimum atleast 0')
-          Yup.number()
+        .required('Percentage Stop is required')
-          .typeError("Please enter a valid number")
+        .test('max', 'Total should not exceed 100 %', function (value) {
-          .min(0, "Minimum atleast 0")
+          const { policy_minimal_alert_percentage } = this.parent;
-          .required('Percentage Stop is required')
+          const { policy_minimal_deposit_percentage } = this.parent;
-          .test("max", "Total should not exceed 100 %", function(value) {
+          return value == 100 - policy_minimal_alert_percentage - policy_minimal_deposit_percentage;
-            const { policy_minimal_alert_percentage } = this.parent;
+        }),
-            const { policy_minimal_deposit_percentage } = this.parent;
-            return value == 100 - policy_minimal_alert_percentage- policy_minimal_deposit_percentage;
-          }),
       parent_id: Yup.string().when('type', {
         is: 'subcorporate',
         then: Yup.string().required('Corporate is required because type is Sub Corporate'),
       }),
-      
+
       reason: Yup.string().required('Reason for update is required when editing data'),
     });
   } else {
@@ -118,108 +116,104 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
     NewCorporateSchema = Yup.object().shape({
       isEdited: Yup.boolean(),
       name: Yup.string().required('Name is required'),
-      code: Yup.string().required('Corporate Code is required').test(
+      code: Yup.string()
-        'unique-code',
+        .required('Corporate Code is required')
-        'Code must be unique',
+        .test('unique-code', 'Code must be unique', async function (value) {
-        async function (value) {
           const existingCodes = await getExistingCodes();
           return !existingCodes.includes(value);
-        }
+        }),
-      ),
       active: Yup.boolean().required('Corporate Status is required'),
       type: Yup.string().required('Type is required'),
       welcome_message: Yup.string().required('Welcome Message is required'),
       help_text: Yup.string().required('Help Text is required'),
       // policy_code: Yup.string().required('Policy Code is required'),
       policy_start: Yup.date().required('Start Date is required'),
-      policy_end: Yup.date().required('End Date is required').min(Yup.ref('policy_start'), "end date can't be before start date"),
+      policy_end: Yup.date()
+        .required('End Date is required')
+        .min(Yup.ref('policy_start'), "end date can't be before start date"),
       policy_total_premi: Yup.number().required('Deposit Initial Fund is required').min(0),
       // linking_rules: Yup.string().required('Link Rules is required'),
-      policy_minimal_deposit_percentage: 
+      policy_minimal_deposit_percentage: Yup.number()
-          Yup.number()
+        .typeError('Please enter a valid number')
-          .typeError("Please enter a valid number")
+        .required('Percentage Deposit is required')
-          .required('Percentage Deposit is required')
+        .min(0, 'Minimum atleast 0')
-          .min(0, "Minimum atleast 0")
+        .max(100, 'Allowed maximum is 100'),
-          .max(100, "Allowed maximum is 100"),
+      policy_minimal_alert_percentage: Yup.number()
-      policy_minimal_alert_percentage: 
+        .typeError('Please enter a valid number')
-          Yup.number()
+        .required('Percentage Alert is required')
-          .typeError("Please enter a valid number")
+        .min(0, 'Minimum atleast 0')
-          .required('Percentage Alert is required')
+        .max(100, 'Allowed maximum is 100'),
-          .min(0, "Minimum atleast 0")
+      policy_stop_service_percentage: Yup.number()
-          .max(100, "Allowed maximum is 100"),
+        .typeError('Please enter a valid number')
-      policy_stop_service_percentage: 
+        .min(0, 'Minimum atleast 0')
-          Yup.number()
+        .required('Percentage Stop is required'),
-          .typeError("Please enter a valid number")
+      // .test('max', 'Total should not exceed 100 %', function (value) {
-          .min(0, "Minimum atleast 0")
+      //   const { policy_minimal_alert_percentage } = this.parent;
-          .required('Percentage Stop is required')
+      //   const { policy_minimal_deposit_percentage } = this.parent;
-          .test("max", "Total should not exceed 100 %", function(value) {
+      //   return value == 100 - policy_minimal_alert_percentage - policy_minimal_deposit_percentage;
-            const { policy_minimal_alert_percentage } = this.parent;
+      // }),
-            const { policy_minimal_deposit_percentage } = this.parent;
-            return value == 100 - policy_minimal_alert_percentage- policy_minimal_deposit_percentage;
-          }),
       parent_id: Yup.string().when('type', {
         is: 'subcorporate',
         then: Yup.string().required('Corporate is required because type is Sub Corporate'),
       }),
     });
   }
- 
 
   async function getExistingCodes() {
     // axios
-      // .get('/corporates/create')
+    // .get('/corporates/create')
-      // .then((res) => {
+    // .then((res) => {
-      //   setCorporateGroups(res.data.corporate_groups);
+    //   setCorporateGroups(res.data.corporate_groups);
-      // })
+    // })
-      // .catch((err) => {
+    // .catch((err) => {
-      //   enqueueSnackbar('Opps, failed to get Corporate Group List', { variant: 'error' });
+    //   enqueueSnackbar('Opps, failed to get Corporate Group List', { variant: 'error' });
-      // });
+    // });
 
-      try {
+    try {
-        let response = await axios.get('/corporates/1/code'); // get data all corporate
+      let response = await axios.get('/corporates/1/code'); // get data all corporate
-        let codeCurrent = ""
+      let codeCurrent = '';
-        if (isEdit){
+      if (isEdit) {
-          let responseCodeCurrent = await axios.get(`/corporates/${currentCorporate?.id}/edit`); // get data current corporate
+        let responseCodeCurrent = await axios.get(`/corporates/${currentCorporate?.id}/edit`); // get data current corporate
-          codeCurrent = responseCodeCurrent.data.code; // get data code corporate current
+        codeCurrent = responseCodeCurrent.data.code; // get data code corporate current
-        }
-        // console.log(response.data);
-        let existingCodes = response.data.map(item => item); // get data code corporate all
-       
-        let filteredArray = existingCodes.filter(e => e != codeCurrent)
-        return filteredArray;
-      } catch (error) {
-        console.error(error);
-        enqueueSnackbar('Failed to fetch existing codes', { variant: 'error' });
       }
+      // console.log(response.data);
+      let existingCodes = response.data.map((item) => item); // get data code corporate all
+
+      let filteredArray = existingCodes.filter((e) => e != codeCurrent);
+      return filteredArray;
+    } catch (error) {
+      console.error(error);
+      enqueueSnackbar('Failed to fetch existing codes', { variant: 'error' });
+    }
   }
 
   async function getExistingPayorId() {
     // axios
-      // .get('/corporates/create')
+    // .get('/corporates/create')
-      // .then((res) => {
+    // .then((res) => {
-      //   setCorporateGroups(res.data.corporate_groups);
+    //   setCorporateGroups(res.data.corporate_groups);
-      // })
+    // })
-      // .catch((err) => {
+    // .catch((err) => {
-      //   enqueueSnackbar('Opps, failed to get Corporate Group List', { variant: 'error' });
+    //   enqueueSnackbar('Opps, failed to get Corporate Group List', { variant: 'error' });
-      // });
+    // });
 
-      try {
+    try {
-        let response = await axios.get('/corporates/1/code'); // get data all corporate
+      let response = await axios.get('/corporates/1/code'); // get data all corporate
-        let codeCurrent = ""
+      let codeCurrent = '';
-        if (isEdit){
+      if (isEdit) {
-          let responseCodeCurrent = await axios.get(`/corporates/${currentCorporate?.id}/edit`); // get data current corporate
+        let responseCodeCurrent = await axios.get(`/corporates/${currentCorporate?.id}/edit`); // get data current corporate
-          codeCurrent = responseCodeCurrent.data.payor_id; // get data code corporate current
+        codeCurrent = responseCodeCurrent.data.payor_id; // get data code corporate current
-        }
-        // console.log(response.data);
-        let existingCodes = response.data.map(item => item); // get data code corporate all
-       
-        let filteredArray = existingCodes.filter(e => e != codeCurrent)
-        console.log(filteredArray);
-        return filteredArray;
-      } catch (error) {
-        console.error(error);
-        enqueueSnackbar('Failed to fetch existing codes', { variant: 'error' });
       }
+      // console.log(response.data);
+      let existingCodes = response.data.map((item) => item); // get data code corporate all
+
+      let filteredArray = existingCodes.filter((e) => e != codeCurrent);
+      console.log(filteredArray);
+      return filteredArray;
+    } catch (error) {
+      console.error(error);
+      enqueueSnackbar('Failed to fetch existing codes', { variant: 'error' });
+    }
   }
 
   const defaultValues = useMemo(
@@ -323,7 +317,6 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       formData.append('policy_end', fPostFormat(data.policy_end));
       formData.append('linking_rules', data.linking_rules);
 
-
       // console.log('MOTHERFUCKER', data.linking_rules)
 
       if (!isEdit) {
@@ -479,7 +472,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       id: 'Lilili',
     },
   ];
-  const [isDisabled, setIsDisabled] = useState(isEdit); 
+  const [isDisabled, setIsDisabled] = useState(isEdit);
   const handleTypeChange = (event: SelectChangeEvent) => {
     setValue('type', event.target.value);
   };
@@ -520,19 +513,16 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                       </option>
                     ))}
                 </RHFSelect>
-              )}      
+              )}
               <RHFTextField name="code" label="Corporate Code" disabled={isDisabled} />
 
               <RHFTextField name="name" label="Corporate Name" disabled={isDisabled} />
 
               <RHFTextField name="payor_id" label="Payor ID" disabled={isDisabled} />
-              
+
               {isEdit && (
                 // <RHFTextField name="reason" label="Reason for update" />
-                <RHFSelect
+                <RHFSelect name="reason" label="Reason for update">
-                  name="reason"
-                  label="Reason for update"
-                >
                   <option value=""></option>
                   <option value="Agreement changed">Agreement changed</option>
                   <option value="Endorsement">Endorsement</option>
@@ -575,13 +565,10 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
         <Grid item xs={12} md={4}>
           <Stack spacing={3}>
             <Card sx={{ p: 3 }}>
-              {JSON.stringify(values.active)}
+              <Stack spacing={3} mt={2}>
-              <RHFSwitch name="active" label="Is Company Active" />
+                <Stack spacing={3} alignItems="center">
-              {JSON.stringify(values.automatic_linking)}
+                  <Typography align="center">Company Logo</Typography>
-              <RHFSwitch name="automatic_linking" label="Is Company Automatic Linking" />
+                  {/* <RHFUploadAvatar
-              <Stack spacing={3} mt={2} alignItems="center">
-                <Typography align="center">Company Logo</Typography>
-                {/* <RHFUploadAvatar
                   name="logo"
                   showPreview
                   accept="image/*"
@@ -589,7 +576,22 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                   onDrop={handleDrop}
                   onRemove={handleRemove}
                 /> */}
-                <UploadImage setFile={setFile} currentImage={currentImage} />
+                  <UploadImage setFile={setFile} currentImage={currentImage} />
+                </Stack>
+                <Box>
+                  <Box
+                    sx={{ display: 'flex', placeContent: 'space-between', placeItems: 'center' }}
+                  >
+                    <Typography>Company Active</Typography>
+                    <RHFSwitch name="active" label="" labelPlacement="start" />
+                  </Box>
+                  <Box
+                    sx={{ display: 'flex', placeContent: 'space-between', placeItems: 'center' }}
+                  >
+                    <Typography>Company Automatic Linking</Typography>
+                    <RHFSwitch name="automatic_linking" label="" labelPlacement="start" />
+                  </Box>
+                </Box>
               </Stack>
             </Card>
             <Card sx={{ p: 3 }}>
@@ -598,7 +600,6 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                   Linking Rules
                 </Typography>
                 <Stack>
-                  {JSON.stringify(getValues('linking_rules'))}
                   <RHFCustomMultiCheckbox name="linking_rules" options={linking_tools} />
                 </Stack>
               </Stack>
@@ -611,14 +612,12 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
             {/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Policy Detail</Typography></Card> */}
             <Card sx={{ p: 3 }}>
               <Stack spacing={3} mt={2}>
-                <Grid item xs={12}>
+                <Typography variant="h5">Policy Detail</Typography>
-                  <Typography variant="h5">Policy Detail</Typography>
-                </Grid>
 
                 <input type="hidden" name="policy_id" />
 
                 <Stack spacing={1}>
-                  <RHFTextField name="policy_code" label="Policy Number"/>
+                  <RHFTextField name="policy_code" label="Policy Number" />
                   {!currentCorporate?.id && (
                     <Typography variant="caption">Will be generated if empty</Typography>
                   )}
@@ -627,10 +626,10 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                 {/* <Typography>Minimal Deposit Policy Level</Typography> */}
                 <Stack direction="row" spacing={2}>
                   <Grid item xs={12} md={6}>
-                    <RHFDatepicker name="policy_start" label="Start Date (YYYY-MM-DD)" />
+                    <RHFDatepicker name="policy_start" label="Start Date" />
                   </Grid>
                   <Grid item xs={12} md={6}>
-                    <RHFDatepicker name="policy_end" label="End Date (YYYY-MM-DD)" />
+                    <RHFDatepicker name="policy_end" label="End Date" />
                   </Grid>
                 </Stack>
 
@@ -639,11 +638,13 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                   label={'Deposit Intial Fund (' + fCurrency(values.policy_total_premi) + ')'}
                 />
 
-                <Stack spacing={1}>
+                <Grid item xs={12}>
-                  <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
+                  <Grid container spacing={2}>
-                    Minimal Deposit Policy Level
+                    <Grid item xs={12}>
-                  </Typography>
+                      <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
-                  <Grid container>
+                        Minimal Deposit Policy Level
+                      </Typography>
+                    </Grid>
                     <Grid item xs={12} md={3}>
                       <RHFTextField
                         name="policy_minimal_deposit_percentage"
@@ -659,13 +660,15 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                       />
                     </Grid>
                   </Grid>
-                </Stack>
+                </Grid>
 
-                <Stack spacing={1}>
+                <Grid item xs={12}>
-                  <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
+                  <Grid container spacing={2}>
-                    Minimal Alert Level
+                    <Grid item xs={12}>
-                  </Typography>
+                      <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
-                  <Grid container>
+                        Minimal Alert Level
+                      </Typography>
+                    </Grid>
                     <Grid item xs={12} md={3}>
                       <RHFTextField
                         name="policy_minimal_alert_percentage"
@@ -681,13 +684,15 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                       />
                     </Grid>
                   </Grid>
-                </Stack>
+                </Grid>
 
-                <Stack spacing={1}>
+                <Grid item xs={12}>
-                  <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
+                  <Grid container spacing={2}>
-                    Stop Service Level
+                    <Grid item xs={12}>
-                  </Typography>
+                      <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
-                  <Grid container>
+                        Stop Service Level
+                      </Typography>
+                    </Grid>
                     <Grid item xs={12} md={3}>
                       <RHFTextField
                         name="policy_stop_service_percentage"
@@ -703,7 +708,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                       />
                     </Grid>
                   </Grid>
-                </Stack>
+                </Grid>
               </Stack>
             </Card>
           </Grid>

frontend/dashboard/src/pages/Report/Livechat/Index.tsx

@@ -27,7 +27,6 @@ export default function Doctor() {
             },
           ]}
         />
-
         <List />
       </Container>
     </Page>

frontend/dashboard/src/pages/Report/Livechat/List.tsx

@@ -53,10 +53,14 @@ import { Controller } from 'react-hook-form';
 
 import SvgIconStyle from '../../../components/SvgIconStyle';
 import { GridSearchIcon } from '@mui/x-data-grid';
-import { Search } from '@mui/icons-material';
+import { Add, Search } from '@mui/icons-material';
 import { Icon } from '@iconify/react';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { RHFDatepicker } from '@/components/hook-form';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { fPostFormat } from '@/utils/formatTime';
 
 // ----------------------------------------------------------------------
 
@@ -103,7 +107,7 @@ export default function List() {
     return (
       <form style={{ width: '100%' }}>
         <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-          <Grid item xs={12} sm={12} md={12} lg={12}>
+          <Grid item xs={12} md={6}>
             <TextField
               id="search-input"
               ref={searchInput}
@@ -126,6 +130,68 @@ export default function List() {
               }}
             />
           </Grid>
+          <Grid item xs={12} md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('startDate')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = value ? fPostFormat(value) : '';
+                      var entries = [...searchParams.entries(), ['startDate', date ?? '']];
+                      if (!searchParams.get('endDate')) {
+                        entries = [...entries, ['endDate', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item xs={12} md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('endDate')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = fPostFormat(value);
+                      var entries = [...searchParams.entries(), ['endDate', date ?? '']];
+                      if (!searchParams.get('startDate')) {
+                        entries = [...entries, ['startDate', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item xs={12} md={2}>
+            <Button variant="outlined" fullWidth startIcon={<Add />} sx={{ p: 1.8 }}>
+              Export
+            </Button>
+          </Grid>
         </Grid>
       </form>
     );