several detail changes

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>
     );