(null);
+ const [currentImportFileName, setCurrentImportFileName] = useState(null);
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+
+
+
+ {/* }
+ sx={{ p: 1.8 }}
+ onClick={() => {
+ navigate('/claims/create');
+ }}
+ >
+ Create
+ */}
+
+
+ );
+ }
+
+ // Dummy Default Data
+ const [dataTableIsLoading, setDataTableLoading] = useState(true);
+ const [dataTableData, setDataTableData] = useState(
+ LaravelPaginatedDataDefault
+ );
+
+ const loadDataTableData = async (appliedFilter: any | null = null) => {
+ setDataTableLoading(true);
+ const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+ const response = await axios.get('/claim-requests', { params: filter });
+ // console.log(response.data);
+ setDataTableLoading(false);
+
+ setDataTableData(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);
+ };
+
+ const handleApprove = (claimRequest) => {
+ axios.post(`claim-requests/${claimRequest.id}/approve`)
+ .then((response) => {
+ enqueueSnackbar('Success Approve', {variant: 'success'})
+ loadDataTableData()
+ })
+ .catch(({response}) => {
+ enqueueSnackbar(response.data.message ?? 'Something went wrong!', {variant : "error"})
+ })
+ }
+
+ useEffect(() => {
+ loadDataTableData();
+ }, []);
+
+ const headStyle = {
+ fontWeight: 'bold',
+ };
+
+ // Called on every row to map the data to the columns
+ function createData(data: any): any {
+ return {
+ ...data,
+ };
+ }
+
+ {
+ /* ------------------ TABLE ROW ------------------ */
+ }
+ function Row(props: { row: ReturnType }) {
+ const { row } = props;
+ const [open, setOpen] = React.useState(false);
+ const [loadingApprove, setLoadingApprove] = React.useState(false);
+
+ return (
+
+ *': { borderBottom: 'unset' } }}>
+
+ setOpen(!open)}>
+ {open ? : }
+
+
+ {row.code}
+ {row.member?.full_name}
+ {row.submission_date}
+
+ { row.status == 'requested' && ( {handleApprove(row)}}>Approve )}
+
+ {/* COLLAPSIBLE ROW */}
+
+
+
+
+
+ Description : {row.description}
+
+
+
+
+
+
+ );
+ }
+ {
+ /* ------------------ END TABLE ROW ------------------ */
+ }
+
+ function TableContent() {
+ return (
+
+ {/* ------------------ TABLE HEADER ------------------ */}
+
+
+
+
+ Code
+
+
+ Member Name
+
+
+ Submission Date
+
+
+ Status
+
+
+ Action
+
+
+
+ {/* ------------------ END TABLE HEADER ------------------ */}
+
+ {/* ------------------ TABLE ROW ------------------ */}
+ {dataTableIsLoading ? (
+
+
+
+ Loading
+
+
+
+ ) : dataTableData.data.length === 0 ? (
+
+
+
+ No Data
+
+
+
+ ) : (
+
+ {dataTableData.data.map((row) => (
+ |
+ ))}
+
+ )}
+ {/* ------------------ END TABLE ROW ------------------ */}
+
+ );
+ }
+
+ return (
+
+
+
+ }
+ />
+
+ );
+}
diff --git a/frontend/dashboard/src/routes/index.tsx b/frontend/dashboard/src/routes/index.tsx
index bd77a22d..6c949788 100755
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -221,6 +221,10 @@ export default function Router() {
path: 'claims',
element: ,
},
+ {
+ path: 'claim-requests',
+ element: ,
+ },
{
path: 'claims/create',
element: ,
@@ -339,3 +343,5 @@ const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
+
+const ClaimRequests = Loadable(lazy(() => import('../pages/ClaimRequests/Index')));
\ No newline at end of file