Merge branch 'staging' of https://dev.sismedika.online/febio/aso into staging

frontend/dashboard/src/pages/Claims/Index.tsx

@@ -7,7 +7,7 @@ import List from "./List";
 
 export default function Claims() {
 
-  const pageTitle = 'Claim';
+  const pageTitle = 'Claim Management';
   return (
     <Page title={ pageTitle } sx={{ mx: 2}}>
 
@@ -16,7 +16,7 @@ export default function Claims() {
         links={[
           { name: 'Dashboard', href: '/dashboard' },
           {
-            name: 'Claim',
+            name: 'Claim Management',
             href: '/claims',
           },
         ]}

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

@@ -1,6 +1,7 @@
 // @mui
 import {
   Box,
+  Grid,
   Button,
   Card,
   Collapse,
@@ -17,12 +18,24 @@ import {
   ButtonGroup,
   Tooltip,
   TableHead,
+  Checkbox,
+  InputAdornment,
+  TableSortLabel,
+  FormControl
 } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { fDateOnly } from '@/utils/formatTime';
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+
+import { LoadingButton } from '@mui/lab';
 // components
 import axios from '../../utils/axios';
 import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
@@ -32,23 +45,146 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { Chip } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import { enqueueSnackbar } from 'notistack';
-import { fDate } from '../../utils/formatTime';
+import { fDate, fDateTime } from '../../utils/formatTime';
 import { Claims } from '@/@types/claims';
 import Label from '@/components/Label';
 import { capitalizeFirstLetter } from '@/utils/formatString';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import Edit from '@mui/icons-material/Edit';
 import { Download } from '@mui/icons-material';
+import { Add, Search } from '@mui/icons-material';
+import Autocomplete from '@mui/material/Autocomplete';
+
+import DownloadIcon from '@mui/icons-material/Download';
+
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
 
 export default function List() {
+  const [selectAll, setSelectAll] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+   const [providers, setProviders] = useState(null);
+  // const [searchText, setSearchText] = useState('');
+  const [order, setOrder] = useState<Order>('desc');
+  const [orderBy, setOrderBy] = useState('created_at');
+  const [perPage, setPerPage] = useState<number>(0);
+
+    const handleChange = (event, newValue) => {
+        // Jika newValue tidak undefined, atur nilai dataProvider
+        if (newValue !== undefined) {
+            setDataProvider(newValue.service_code);
+        } else {
+            // Jika tidak ada yang dipilih, set dataProvider menjadi string kosong
+            setDataProvider(null);
+        }
+    };
+  // Dummy data
+const dummyServices = [
+  { service_code: '1', name: 'Service 1' },
+  { service_code: '2', name: 'Service 2' },
+  { service_code: '3', name: 'Service 3' },
+  // tambahkan data lain sesuai kebutuhan
+];
+
+
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      const requestedIds = dataTableData.data
+        .filter(row => row.status === 'requested') // Memfilter baris dengan status 'requested'
+        .map(row => row.id); // Mengambil hanya ID dari baris-baris yang memenuhi kondisi
+        setSelectedRows(requestedIds);
+    } else {
+      setSelectedRows([]);
+    }
+  };
+
+  const handleRowSelect = (id) => {
+    if (selectedRows.includes(id)) {
+      setSelectedRows(selectedRows.filter(rowId => rowId !== id));
+    } else {
+      setSelectedRows([...selectedRows, id]);
+    }
+  };
+
   const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
+  const [startDate, setStartDate] = useState(null);
+  const [searchText, setSearchText] = useState('');
+  const [endDate, setEndDate] = useState(null);
   const navigate = useNavigate();
+  const [dataProvider, setDataProvider] = useState(null);
+
+  useEffect(() => {
+    if (startDate !== null || endDate !== null || dataProvider !== null
+       || order !== null || orderBy !== null || perPage !== 0) {
+      loadDataTableData();
+      getProvider();
+    }
+  }, [startDate, endDate, dataProvider, order, orderBy, perPage]);
+  
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingImport, setIsLoadingImport] = useState(false);
+  const handleExportReport = async () => {
+
+
+    const year = startDate?.getFullYear();
+    const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
+    
+    const year1 = endDate?.getFullYear();
+    const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
+
+    
+      
+    var filter = Object.fromEntries([...searchParams.entries()]);
+    setIsLoading(true)
+    await axios
+      .get('/claims/export-claim-management',{
+        params: {
+          search: searchText,
+          start_date: formattedDate ? formattedDate : null,
+          end_date:formattedDate1,
+          provider: dataProvider,
+          order: order,
+          orderBy: orderBy,
+          page: perPage,
+        }
+      })
+      .then((res) => {
+          enqueueSnackbar('Data berhasil di Export', {
+          variant: 'success',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        });
+        setIsLoading(false)
+  
+        document.location.href = res.data.data.file_url;
+      })
+      .catch((err) =>
+          enqueueSnackbar('Data Gagal di Export', {
+          variant: 'error',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        })
+        
+      );
+  };
+
 
   function SearchInput(props: any) {
     // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState('');
+    
+    
 
     const handleSearchChange = (event: any) => {
       const newSearchText = event.target.value ?? '';
@@ -73,7 +209,7 @@ export default function List() {
 
     useEffect(() => {
       // Trigger First Search
-      setSearchText(searchParams.get('search') ?? '');
+      // setSearchText(searchParams.get('search') ?? '');
     }, []);
 
     return (
@@ -126,41 +262,232 @@ export default function List() {
     );
   }
 
+  const searchInput = useRef<HTMLInputElement>(null);
+    
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      loadDataTableData();
+    };
+
+    
+
+    useEffect(() => {
+      // Trigger First Search
+      //setSearchText(searchText);
+    }, []);
+
+    const item = [
+      {
+        id: '',
+        value: '',
+        name: 'Semua',
+      },
+    ];
+
+    const handleClick = () => {
+
+    }
+
+  
+
   // Dummy Default Data
   const [dataTableIsLoading, setDataTableLoading] = useState(true);
   const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
     LaravelPaginatedDataDefault
   );
 
+  
+
   const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
+    const year = startDate?.getFullYear();
+    const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
+    
+    const year1 = endDate?.getFullYear();
+    const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
+
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/claims', { params: filter });
-    // console.log(response.data);
+    const response = await axios.get('/claims', {
+      params: {
+        search: searchText,
+        start_date: formattedDate ? formattedDate : null,
+        end_date:formattedDate1,
+        provider: dataProvider,
+        order: order,
+        orderBy: orderBy,
+        page: perPage,
+      }
+    });
+    
     setDataTableLoading(false);
 
     setDataTableData(response.data);
   };
 
+  const getProvider =  async () => {
+    const response = await axios.get('/claims/get-provider');
+    setProviders(response.data)
+  }
+
   const applyFilter = async (searchFilter: { search: string }) => {
     await loadDataTableData(searchFilter);
     setSearchParams(searchFilter);
   };
-
+  
   const handlePageChange = (event: ChangeEvent, value: number): void => {
-    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
-    loadDataTableData(filter);
-    setSearchParams(filter);
+    setPerPage(value);
   };
 
-  useEffect(() => {
-    loadDataTableData();
-  }, []);
+  const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
+  const handleCloseDialogSubmit = () => {
+      setOpenDialogSubmit(false);
+  }
+
+  function toTitleCase(str: string | null) {
+      return str.replace(/\w\S*/g, function(txt) {
+          return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+      });
+  }
+
+  const [approve, setApprove] = useState('');
+
+  const [reasonDecline, setReasonDecline] = useState('');
+
+  const handleReasonDeclineChange = (event) => {
+      setReasonDecline(event.target.value);
+      // Tambahkan logika yang diperlukan di sini
+  };
+
+  const handleSubmitData = () => {
+    //approve or decline
+    if (!reasonDecline && approve == 'decline') {
+      enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
+      return false;
+    }
+    Promise.all(selectedRows.map(send_bulk))
+      .then(() => {
+        enqueueSnackbar('All requests processed successfully', { variant: 'success' });
+        setOpenDialogSubmit(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 5000); // Reload the page after 5 seconds
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.response?.data?.message ?? 'Something went wrong!', { variant: 'error' });
+      });
+  };
+  
+  function send_bulk(id) {
+    return axios.post(`claims/${id}/${approve}`, { reasonDecline: reasonDecline });
+  }
+  
+
+  // useEffect(() => {
+  //   loadDataTableData();
+  //   getProvider();
+  // }, []);
 
   const headStyle = {
     fontWeight: 'bold',
   };
+  const headCells = [
+    {
+      id: 'code',
+      align: 'left',
+      label: 'Code',
+      isSort: true,
+    },
+    {
+      id: 'name',
+      align: 'left',
+      label: 'Name',
+      isSort: false,
+    },
 
+    {
+      id: 'member_id',
+      align: 'left',
+      label: 'Member ID',
+      isSort: false,
+    },
+    {
+      id: 'created_at',
+      align: 'left',
+      label: 'Date Submission',
+      isSort: true,
+    },
+    {
+      id: 'plan_code',
+      align: 'left',
+      label: 'Plan ID',
+      isSort: true,
+    },
+    {
+      id: 'service_code',
+      align: 'left',
+      label: 'Service',
+      isSort: false,
+    },
+    {
+      id: 'corporate_policies',
+      align: 'left',
+      label: 'Policy Number',
+      isSort: true,
+    },
+    {
+      id: 'provider',
+      align: 'left',
+      label: 'Provider',
+      isSort: false,
+    },
+    {
+      id: 'tot_bill',
+      align: 'left',
+      label: 'Total Billing',
+      isSort: false,
+    },
+    {
+      id: 'status',
+      align: 'left',
+      label: 'Status',
+      isSort: false,
+    },
+    {
+      id: 'action',
+      align: 'left',
+      label: '',
+      isSort: false,
+    },
+  ];
+  
+  const orders = {
+    order: order,
+    setOrder: setOrder,
+    orderBy: orderBy,
+    setOrderBy: setOrderBy,
+  };
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    handleRequestSort(event, property);
+  };
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orders?.orderBy === property && orders?.order === 'asc';
+
+    orders?.setOrder(isAsc ? 'desc' : 'asc');
+    orders?.setOrderBy(property);
+  };
   // Called on every row to map the data to the columns
   function createData(data: Claims): Claims  {
     return {
@@ -171,10 +498,18 @@ export default function List() {
   {
     /* ------------------ TABLE ROW ------------------ */
   }
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
+  function Row(props: { row: ReturnType<typeof createData>, isSelected: boolean, onSelect: (id: string) => void }) {
+    const { row, isSelected, onSelect } = props;
+     // Memperbaiki destrukturisasi props
+  
+    const handleRowCheckboxChange = () => {
+      onSelect(row.id); // Panggil fungsi onSelect dari komponen induk dengan id baris saat checkbox di baris diklik
+    };
+  
     const [open, setOpen] = React.useState(false);
 
+    const test = 1000;
+
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
@@ -183,16 +518,22 @@ export default function List() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell> */}
-          <TableCell align="left">{row.claim_request?.code}</TableCell>
+          <TableCell align="left">
+            {row?.status == 'requested' ? (
+              <Checkbox checked={isSelected} onChange={handleRowCheckboxChange} />
+            ):''}
+          </TableCell>
+          <TableCell align="left">{row?.code}</TableCell>
           {/* <TableCell align="left">{row.code}</TableCell> */}
-          <TableCell align="left">{row.member?.current_plan?.code}</TableCell>
-          <TableCell align="left">{row.member?.current_corporate?.payor_id}</TableCell>
-          <TableCell align="left">{row.member?.current_corporate?.code}</TableCell>
-          <TableCell align="left">{row.member?.current_corporate?.current_policy?.code}</TableCell>
-          <TableCell align="left">{row.member?.member_id}</TableCell>
-          <TableCell align="left">{row.benefit_desc}</TableCell>
-         
-          <TableCell align="center">
+          <TableCell align="left">{row?.name}</TableCell>
+          <TableCell align="left">{row?.member_id}</TableCell>
+          <TableCell align="left">{row?.created_at ? fDateTime(row?.created_at) : ''}</TableCell>
+          <TableCell align="left">{row?.plan_code}</TableCell>
+          <TableCell align="left">{row?.service_code}</TableCell>
+          <TableCell align="left">{row?.corporate_policies}</TableCell>
+          <TableCell align="left">{row?.provider}</TableCell>
+          <TableCell align="left">Rp. {row?.tot_bill?.toLocaleString('id-ID')}</TableCell>
+          <TableCell align="left">
             {row.status == 'draft' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
             {row.status == 'requested' && (<Label color='primary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
             {row.status == 'received' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
@@ -202,18 +543,17 @@ export default function List() {
             {row.status == 'declined' && (<Label color='error' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
           </TableCell>
 
-          <TableMoreMenu actions={
-              <>
-              <MenuItem onClick={() =>navigate(`/claims/edit/${row.id}`) }>
-                <Edit />
-                Edit
-              </MenuItem>
-              <MenuItem onClick={() => navigate('/claims/detail/'+row.id+'') }>
-                  <FindInPageOutlinedIcon />
-                  Detail
-              </MenuItem>
-              </>
-            } />
+          <TableCell align="left">
+            <TableMoreMenu actions={
+                <>
+                <MenuItem onClick={() => navigate('/claims/detail/'+row.id_log+'/'+row.id+'') }>
+                    <FindInPageOutlinedIcon />
+                    Detail
+                </MenuItem>
+                </>
+              } />
+          </TableCell>
+          
 
           
         </TableRow>
@@ -236,40 +576,77 @@ export default function List() {
     /* ------------------ END TABLE ROW ------------------ */
   }
 
+  
+
   function TableContent() {
     return (
       <Table aria-label="collapsible table">
         {/* ------------------ TABLE HEADER ------------------ */}
         <TableHead>
           <TableRow>
-            {/* <TableCell style={headStyle} align="left" /> */}
-            <TableCell style={headStyle} align="left">
-              Code
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Plan ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Payor ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Corporate ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Policy Number
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Member ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Benefit Desc
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Status
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              
-            </TableCell>
+            {selectedRows.length > 0 ? ( 
+              <>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }}  align="left" colSpan={2}>
+                  <Stack direction="row">
+                    <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                    {selectedRows.length > 0 ? selectedRows.length : '0'}  &nbsp;<Typography variant='subtitle2'>Selected</Typography>
+                  </Stack>
+                </TableCell>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={6}>
+                  
+                </TableCell>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }} align="right" colSpan={2}>
+                  <Button variant="text" color="error" startIcon={<CancelIcon />} onClick={() => {setOpenDialogSubmit(true);
+                                        setApprove('decline');}}>
+                    <Typography variant='subtitle2'>Decline</Typography>
+                  </Button>
+                </TableCell>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={2}>
+                  <Button variant="text" color="primary" startIcon={<CheckCircleIcon />} onClick={() => {setOpenDialogSubmit(true);
+                                        setApprove('approve');}}>
+                    <Typography variant='subtitle2'>Approve</Typography>
+                  </Button>
+                </TableCell>
+                
+              </>
+            ) : (
+              <>
+              <TableCell style={headStyle} align="left">
+                  <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                </TableCell>
+              {headCells &&
+                headCells.map((headCell, index) => (
+                  <TableCell
+                    key={index}
+                    sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
+                    // @ts-ignore
+                    align={headCell.align}
+                    sx={{ padding: 2 }}
+                    width={headCell.width ? headCell.width : 'auto'}
+                  >
+                    {headCell.isSort ? (
+                      <TableSortLabel
+                        active={orders?.orderBy === headCell.id}
+                        direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
+                        onClick={createSortHandler(headCell.id)}
+                      >
+                        {headCell.label}
+                        {orders?.orderBy === headCell.id ? (
+                          <Box component="span" sx={visuallyHidden}>
+                            {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                          </Box>
+                        ) : null}
+                      </TableSortLabel>
+                    ) : (
+                      headCell.label
+                    )}
+                  </TableCell>
+                ))}
+              </>
+
+            )}
+            
+          
           </TableRow>
         </TableHead>
         {/* ------------------ END TABLE HEADER ------------------ */}
@@ -278,7 +655,7 @@ export default function List() {
         {dataTableIsLoading ? (
           <TableBody>
             <TableRow>
-              <TableCell colSpan={8} align="center">
+              <TableCell colSpan={11} align="center">
                 Loading
               </TableCell>
             </TableRow>
@@ -286,7 +663,7 @@ export default function List() {
         ) : dataTableData.data.length === 0 ? (
           <TableBody>
             <TableRow>
-              <TableCell colSpan={8} align="center">
+              <TableCell colSpan={11} align="center">
                 No Data
               </TableCell>
             </TableRow>
@@ -294,7 +671,7 @@ export default function List() {
         ) : (
           <TableBody>
             {dataTableData.data.map((row) => (
-              <Row key={row.id} row={row} />
+              <Row key={row.id} row={row} isSelected={selectedRows.includes(row.id)} onSelect={handleRowSelect} />
             ))}
           </TableBody>
         )}
@@ -305,7 +682,131 @@ export default function List() {
 
   return (
     <Card>
-      <ImportForm />
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+        <form style={{ width: '100%' }}>
+        <Grid container spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item xs={12} md={3}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              value={searchText}
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleSearchSubmit(event);
+                }
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search />
+                  </InputAdornment>
+                ),
+                placeholder: 'Search Code or Name',
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} md={4} display="flex" sx={{ gap: '16px' }}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={startDate}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  
+                  // loadDataTableData();
+                  setStartDate(value);
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={endDate}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  setEndDate(value);
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item xs={12} md={2}>
+          {
+          providers && (
+            <Autocomplete
+                id="provider"
+                options={providers}
+                getOptionLabel={(option) => option.name || ''}
+                value={providers.find((item) => item.id === dataProvider) || null}
+                onChange={(event, value) => {
+                  if (value) {
+                    setDataProvider(value.id);
+                  } else {
+                    setDataProvider(null);
+                  }
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="Provider"
+                    fullWidth
+                  />
+                )}
+              />
+            )
+          }
+          </Grid>
+          <Grid item xs={12} md={3} display="flex" sx={{ gap: '16px' }}>
+              <FormControl >
+                <LoadingButton
+                  id="upload-button"
+                  variant="outlined"
+                  startIcon={<UploadIcon />}
+                  sx={{ p: 1.8 }}
+                  // onClick={handleExportReport}
+                  loading={isLoadingImport}
+                >
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Import
+                  </Typography>
+                </LoadingButton>
+              </FormControl>
+              <FormControl >
+                <LoadingButton
+                  id="upload-button"
+                  variant="contained"
+                  startIcon={<Download />}
+                  sx={{ p: 1.8 }}
+                  onClick={handleExportReport}
+                  loading={isLoading}
+                >
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Export
+                  </Typography>
+                </LoadingButton>
+              </FormControl>
+            </Grid>
+        </Grid>
+      </form>
+        </Grid>
+      </Grid>
 
       <DataTable
         isLoading={dataTableIsLoading}
@@ -314,6 +815,43 @@ export default function List() {
         handlePageChange={handlePageChange}
         TableContent={<TableContent />}
       />
+      <Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} fullWidth={true}>
+                    <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+                    <Stack direction="row" alignItems="center" justifyContent="space-between">
+                        <Stack direction="row" alignItems='center' spacing={1}>
+                            <Typography variant="h6">Confirmation</Typography>
+                        </Stack>
+                        <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
+                            <CloseIcon />
+                        </IconButton>
+                    </Stack>
+                    </DialogTitle>
+                    <DialogContent>
+                        
+                        <Stack spacing={2} padding={2}>
+                            <Typography variant='body1'>Are you sure to {toTitleCase(approve)} this claim ?</Typography>
+                            {approve == "decline" ? (
+                                <Stack direction='row' spacing={2} marginTop={2}>
+                                <TextField
+                                    id="outlined-multiline-static"
+                                    label="Reason decline"
+                                    multiline
+                                    rows={4} // Tentukan jumlah baris yang diinginkan
+                                    defaultValue=""
+                                    onChange={handleReasonDeclineChange}
+                                    variant="outlined"
+                                    sx={{width:'100%'}}
+                                    // fullWidth // Gunakan ini jika Anda ingin input memenuhi lebar Stack
+                                />
+                                </Stack>
+                                  ): ''}
+                        </Stack>
+                    </DialogContent>
+                    <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
+                    <Button sx={{backgroundColor: (approve === 'decline' ? '' : '#19BBBB'), color: (approve === 'decline' ? '#FF4842' : ''), borderColor: '#FF4842'}} onClick={handleSubmitData} variant={(approve === 'decline' ? 'outlined' : 'contained')}>{(approve === "decline" ? 'Decline' : 'Approve')}</Button>
+                    </DialogActions>
+                </Dialog>
     </Card>
   );
 }

frontend/dashboard/src/routes/index.tsx

@@ -456,7 +456,7 @@ export default function Router() {
           element: <ClaimsCreate />,
         },
         {
-          path: 'claims/detail/:id',
+          path: 'claims/detail/:id/:id_claim',
           element: <ClaimsDetail />,
         },
         {