add fitur search, edit dan filter claim request

frontend/dashboard/src/pages/ClaimRequests/List.tsx

@@ -19,6 +19,7 @@ import {
   Chip,
   TableHead,
   Grid,
+  Autocomplete,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -43,25 +44,59 @@ import { enqueueSnackbar } from 'notistack';
 import { Divider } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
-import { fDateTimesecond } from '@/utils/formatTime';
+import { fDateOnly, fDateTimesecond } from '@/utils/formatTime';
 import { capitalizeFirstLetter } from '@/utils/formatString';
 import Label from '@/components/Label';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 // import LoadingButton from '@/theme/overrides/LoadingButton';
 
 export default function List() {
+  type ServiceCode = {
+    value: string,
+    label: string
+  }
   const { themeColorPresets } = useSettings();
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState<Import>(null);
+  const [selectedOptions, setSelectedOptions] = useState<ServiceCode|undefined>([]); // State untuk nilai terpilih
 
   const navigate = useNavigate()
+  const defaultValue = [
+    {
+      value: '-',
+      label: '-'
+    }
+  ];
+  const [serviceCode, setServiceCode] = useState(defaultValue);
+
+  const handleOptionService = () => {
+    
+  }
+
+  const handleFilter = (event: React.SyntheticEvent<Element, Event>, newValue: { value: string, label: string }[], name:string) => { // 
+    const serviceCodeArray :string[] = [];
+    const codeArray :string[] = [];
+    const typeArray :string[] = [];
+    const planArray :string[] = [];
+    if (name == 'service_code'){
+        newValue.map(row => {
+          serviceCodeArray.push(row.value);
+        })
+        setSelectedOptions(newValue)
+    }
+    var entries = [...searchParams.entries(), ['service_code', serviceCodeArray ?? '']];
+    const filter = Object.fromEntries(entries);
+    loadDataTableData(filter);
+  } 
 
   function SearchInput(props: any) {
     // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
     const [searchText, setSearchText] = useState('');
-
+  
     const handleSearchChange = (event: any) => {
       const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
@@ -79,16 +114,83 @@ export default function List() {
 
     return (
       <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-        <TextField
-          id="search-input"
-          ref={searchInput}
-          label="Search"
-          variant="outlined"
-          fullWidth
-          onChange={handleSearchChange}
-          value={searchText}
-          placeholder='Search Code or Name...'
-        />
+        <Grid container spacing={2} >
+          <Grid item md={5}>
+            <TextField 
+              id="search-input"
+              ref={searchInput}
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              value={searchText}
+              placeholder='Search Code or Name...'
+            />
+          </Grid>
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                label="Start Date"
+                value={searchParams.get('start_date')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date:string = value ? fDateOnly(value) : '';
+                      var entries = [...searchParams.entries(), ['start_date', date ?? '']];
+                      const filter = Object.fromEntries(entries);
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} variant="outlined" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                label="End Date"
+                inputFormat="MM/dd/yyyy"
+                value={searchParams.get('end_date')}
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = fDateOnly(value);
+                      var entries = [...searchParams.entries(), ['end_date', date ?? '']];
+                      const filter = Object.fromEntries(entries);
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} variant="outlined" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item md={3}>
+            <Autocomplete
+                id="combo-box-demo"
+                options={serviceCode}
+                multiple
+                limitTags={1}
+                value={selectedOptions} 
+                onChange={
+                  (event, newValue) => handleFilter(event, newValue, 'service_code')
+                }
+                fullWidth
+                disableCloseOnSelect
+                getOptionLabel={(option) => option.label}
+                renderInput={(params) => (
+                    <TextField {...params} label="Service" variant="outlined" />
+                )}
+            />
+          
+
+          </Grid>
+        </Grid>
+        
       </form>
     );
   }
@@ -279,11 +381,21 @@ export default function List() {
   );
 
   const loadDataTableData = async (appliedFilter: any | null = null) => {
+
+    axios.get('service').then((response) => {
+        const formattedData = response.data.data.map(service => ({
+            value: service.code,
+            label: service.name
+        }));
+        setServiceCode(formattedData);
+    });
+
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
     const response = await axios.get('/claim-requests', { params: filter });
-    // console.log(response.data);
+    console.log(response.data);
     setDataTableLoading(false);
+    
 
     setDataTableData(response.data);
   };