Update reason benefit

2023-06-06 09:28:22 +07:00
parent 4cc2ae24b8
commit 7a83409028
18 changed files with 608 additions and 186 deletions
--- a/frontend/dashboard/src/pages/Corporates/Benefit/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Benefit/List.tsx
@@ -33,11 +33,12 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
+import HistoryIcon from '@mui/icons-material/History';

 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { useParams, useSearchParams } from 'react-router-dom';
+import {Link, useParams, useSearchParams } from 'react-router-dom';
 // components

 import {
@@ -61,12 +62,27 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
+import DialogLog from './sections/DialogLog';

 export default function PlanList() {
  const { themeStretch } = useSettings();
  const { corporate_id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);
+  
+  const [openDialog, setOpenDialog] = useState(false);
+  const [isDialog, setIsDialog] = useState('');
+  const [edit, setEdit] = useState({});
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'edit':
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+      default:
+        break;
+    }
+  };

  function SearchInput(props: any) {
    // SEARCH
@@ -339,7 +355,9 @@ export default function PlanList() {
                color="success"
                size="small"
                onClick={() => {
-                  handleActivate(row, 'inactive');
+                  // handleActivate(row, 'inactive');
+                  clickHandler('edit');
+                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
                }}
              >
                Active
@@ -351,7 +369,9 @@ export default function PlanList() {
                color="error"
                size="small"
                onClick={() => {
-                  handleActivate(row, 'active');
+                  // handleActivate(row, 'active');
+                  clickHandler('edit');
+                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
                }}
              >
                Inactive
@@ -372,6 +392,11 @@ export default function PlanList() {
            >
              {openEdit ? 'Save' : 'Edit'}
            </Button>
+              <Link to={`/corporate/${corporate_id}/benefits/${row.id}/history`}>
+              <Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
+                History
+              </Button>
+            </Link>
          </TableCell>
        </TableRow>
        {/* COLLAPSIBLE ROW */}
@@ -832,6 +857,14 @@ export default function PlanList() {

        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
      </Card>
+      {isDialog === 'edit' && (
+        <DialogLog
+          data={edit}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: 'Reason For Update' }}
+        />
+      )}
    </Stack>
  );
 }
--- a/frontend/dashboard/src/pages/Corporates/Benefit/sections/DialogLog.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Benefit/sections/DialogLog.tsx
@@ -103,7 +103,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
  // const { plan_id } = useParams();
  const handleActivate = (model: any, status: string) => {
    axios
-      .put(`/plans/${id}/activation`, {
+      .put(`/benefits/${id}/activation`, {
        // service_code: service.service_code,
        active: status == 'active',
        reason: model.reason
@@ -135,7 +135,6 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
        reason : row.reason,
        id : id,
      }
-      console.log(data)
      handleActivate(data, status)  
    } catch (error: any) {
      console.log('data gagal', data);
--- a/frontend/dashboard/src/pages/Corporates/Benefit/sections/History.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Benefit/sections/History.tsx
@@ -89,7 +89,7 @@ export default function CustomizedAccordions() {
  
  const { themeStretch } = useSettings();

-  const { corporate_id, plan_id } = useParams();
+  const { corporate_id, benefit_id } = useParams();

  const [corporate, setCorporate] = useState<Corporate | null>();
  const [currentCorporate, setCurrentCorporate ] = useState<Corporate>();
@@ -98,8 +98,8 @@ export default function CustomizedAccordions() {

  useEffect(() => {
    setCorporate(configuredCorporateContext.currentCorporate);
-    const model = 'App\\Models\\CorporatePlan';
-    const url = `/audittrail/${plan_id}?model=${model}`;
+    const model = 'App\\Models\\CorporateBenefit';
+    const url = `/audittrail/${benefit_id}?model=${model}`;
    axios.get(url)
      .then((res) => {
        setCurrentCorporate(res.data);
--- a/frontend/dashboard/src/pages/Corporates/Form.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Form.tsx
@@ -74,14 +74,7 @@ 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(
-        'unique-code',
-        'Code must be unique',
-        async function (value) {
-          const existingCodes = await getExistingCodes();
-          return !existingCodes.includes(value);
-        }
-      ),
+      code: Yup.string().required('Corporate Code is required'),
      active: Yup.boolean().required('Corporate Status is required'),
      type: Yup.string().required('Type is required'),
      welcome_message: Yup.string().required('Welcome Message is required'),
@@ -200,11 +193,41 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
      }
  }

+  async function getExistingPayorId() {
+    // axios
+      // .get('/corporates/create')
+      // .then((res) => {
+      //   setCorporateGroups(res.data.corporate_groups);
+      // })
+      // .catch((err) => {
+      //   enqueueSnackbar('Opps, failed to get Corporate Group List', { variant: 'error' });
+      // });
+
+      try {
+        let response = await axios.get('/corporates/1/code'); // get data all corporate
+        let codeCurrent = ""
+        if (isEdit){
+          let responseCodeCurrent = await axios.get(`/corporates/${currentCorporate?.id}/edit`); // get data current corporate
+          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' });
+      }
+  }
+
  const defaultValues = useMemo(
    () => ({
      code: currentCorporate?.code || '',
      name: currentCorporate?.name || '',
      reason: currentCorporate?.reason || '',
+      payor_id: currentCorporate?.payor_id || '',
      welcome_message: currentCorporate?.welcome_message || '',
      help_text: currentCorporate?.help_text || '',
      active: currentCorporate?.id ? currentCorporate?.active === 1 : true,
@@ -285,6 +308,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
      formData.append('reason', data.reason);
      formData.append('help_text', data.help_text);
      formData.append('policy_id', data.policy_id);
+      formData.append('payor_id', data.payor_id);
      formData.append('policy_code', data.policy_code);
      formData.append('policy_total_premi', data.policy_total_premi);
      formData.append('policy_minimal_deposit_percentage', data.policy_minimal_deposit_percentage);
@@ -494,6 +518,8 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
              <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" />
--- a/frontend/dashboard/src/pages/Corporates/Member/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Member/List.tsx
@@ -37,7 +37,7 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { useParams, useSearchParams } from 'react-router-dom';
+import {Link, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { Plan } from '../../../@types/corporates';
@@ -47,6 +47,7 @@ import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
 import DialogLog from './sections/DialogLog';
+import HistoryIcon from '@mui/icons-material/History';

 export default function CorporatePlanList() {
  const { themeStretch } = useSettings();
@@ -54,6 +55,20 @@ export default function CorporatePlanList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);

+  const [openDialog, setOpenDialog] = useState(false);
+  const [isDialog, setIsDialog] = useState('');
+  const [edit, setEdit] = useState({});
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'edit':
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+      default:
+        break;
+    }
+  };
+
  // Dummy Default Data
  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
@@ -405,7 +420,9 @@ export default function CorporatePlanList() {
                color="success"
                size="small"
                onClick={() => {
-                  handleActivate(row, 'inactive');
+                  // handleActivate(row, 'inactive');
+                  clickHandler('edit');
+                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
                }}
              >
                Active
@@ -417,14 +434,22 @@ export default function CorporatePlanList() {
                color="error"
                size="small"
                onClick={() => {
-                  handleActivate(row, 'active');
+                  // handleActivate(row, 'active');
+                  clickHandler('edit');
+                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
                }}
              >
                Inactive
              </Button>
            )}
          </TableCell>
-          {/* <TableCell align="right"><Button variant="outlined" color="success" size="small">Edit</Button></TableCell> */}
+          <TableCell align="right">
+            <Link to={`/corporate/${corporate_id}/members/${row.id}/history`}>
+              <Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
+                History
+              </Button>
+            </Link>
+          </TableCell>
        </TableRow>
        {/* COLLAPSIBLE ROW */}
        <TableRow>
@@ -606,6 +631,9 @@ export default function CorporatePlanList() {
                <TableCell style={headStyle} align="center">
                  Status
                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Action
+                </TableCell>
                {/* <TableCell style={headStyle} align="center">
                  Action
                </TableCell> */}
@@ -639,6 +667,14 @@ export default function CorporatePlanList() {

        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
      </Card>
+      {isDialog === 'edit' && (
+        <DialogLog
+          data={edit}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: 'Reason For Update' }}
+        />
+      )}
    </Stack>
  );
 }
--- a/frontend/dashboard/src/pages/Corporates/Member/sections/DialogLog.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Member/sections/DialogLog.tsx
@@ -1,33 +1,36 @@
-// react
-import { ReactElement, useEffect, useState } from 'react';
-// mui
-import {
-  Card,
-  Checkbox,
-  Divider,
-  Grid,
-  Input,
-  Link,
-  Stack,
-  Table,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Typography,
-} from '@mui/material';
+import * as Yup from 'yup';
+import { enqueueSnackbar, useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+// @mui
 import { styled } from '@mui/material/styles';
-// Component
-import MuiDialog from '@/components/MuiDialog';
-import { Box } from '@mui/material';
-import { TextField } from '@mui/material';
-import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { fPostFormat } from '@/utils/formatTime';
 import { LoadingButton } from '@mui/lab';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import axios from '@/utils/axios';
-import { enqueueSnackbar } from 'notistack';
+import { Box, Button, Grid, Stack, Typography, Chip, Autocomplete } from '@mui/material';
+import { CorporateService } from '../../../../@types/corporates';
+// components
+import { FormProvider, RHFTextField, RHFSwitch } from '../../../../components/hook-form';
+import axios from '../../../../utils/axios';
+import { LaravelPaginatedData } from '../../../../@types/paginated-data';

+// import { Contact } from '../../../../@types/contact';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
+
+// @mui
+// components
+import MuiDialog from '../../../../components/MuiDialog';
+// React
+import { ReactElement } from 'react';
+
+// ----------------------------------------------------------------------
+
+const HeaderStyle = styled('header')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  justifyContent: 'space-between',
+}));
 type DataContent = {
  info: string;
  date: string;
@@ -45,159 +48,165 @@ type MuiDialogProps = {
  data?: DataContent[];
 };

-const ItemNotificationStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(1),
-  borderRadius: 0.5,
-  color: 'black',
-}));
+type FormValuesProps = {
+  value: string;
+  active: boolean;
+};

-const DialogLog = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
-  const [openDialogClaim, setOpenDialogClaim] = useState(false);
-  const [dialogTitleClaim, setDialogTitleClaim] = useState('');
-  const [dateOfAdmission, setDateOfAdmission] = useState(new Date());
-  const [checkedBenefitIds, setCheckedBenefitIds] = useState([]);
-  const [benefitIds, setBenefitIds] = useState([]);
-  const [loadingLog, setLoadingLog] = useState(false);
+// ----------------------------------------------------------------------

+// ----------------------------------------------------------------------
+
+const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const navigate = useNavigate();
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  
+  const { id, service_code, status } = data;
+
+  const isEdit = id ? true : false;
+
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Corporate Status is required'),
+  });
+
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+  const {
+    reset,
+    watch,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
  useEffect(() => {
-    setBenefitIds(data.member.current_plan?.benefits.filter((benefit) => benefit.pivot.active == 1).map((benefit) => benefit.id))
-    setCheckedBenefitIds(benefitIds)
-    console.log('Check All', benefitIds, 'X', data.member.current_plan?.benefits.map((benefit) => benefit.id))
-  }, [])
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);

-  const clickHandler = () => {
-    setDialogTitleClaim('Claim Details');
-    setOpenDialogClaim(true);
+  // const { plan_id } = useParams();
+  const handleActivate = (model: any, status: string) => {
+    axios
+      .put(`/members/${id}/activation`, {
+        // service_code: service.service_code,
+        active: status == 'active',
+        reason: model.reason
+      })
+      .then((res) => {
+        // Memuat ulang halaman saat ini
+        setOpenDialog(false)
+        window.location.reload();
+        // setDataTableData({
+        //   ...dataTableData,
+        //   data: dataTableData.data.map((service) => {
+        //     let updatedService = service;
+        //     if (id == service.id) {
+        //       updatedService.status = res.data.status;
+        //     }
+        //     return updatedService;
+        //   }),
+        // });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
  };

-  const handleCheckAll = (event) => {
-    if (event.target.checked) {
-      setCheckedBenefitIds(benefitIds)
-    } else {
-      setCheckedBenefitIds([])
+  const onSubmit = async (row : ReturnType<typeof createData>) => {
+    try {
+      const data = {
+        service_code : service_code,
+        reason : row.reason,
+        id : id,
+      }
+      handleActivate(data, status)  
+    } catch (error: any) {
+      console.log('data gagal', data);
    }
-  }

-  const handleCheckChange = (event, benefit) => {
-    if ( event.target.checked ) {
-      setCheckedBenefitIds([...checkedBenefitIds, benefit.id])
-    } else {
-      // setCheckedBenefitIds([])
-      setCheckedBenefitIds(checkedBenefitIds.filter((benefitId) => benefitId !== benefit.id))
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
    }
-  }
+  };

-  const handleDownloadLog = (row) => {
-    setLoadingLog(true);
-      axios
-        .post(`generate-log/${row.id}`, {
-          date_of_admission : dateOfAdmission,
-          benefit_ids : checkedBenefitIds
-        }, {
-          responseType: 'blob',
-        })
-        .then((response) => {
-          window.open(URL.createObjectURL(response.data));
-          setLoadingLog(false);
-          setOpenDialog(false);
-        })
-        .catch((response) => {
-          enqueueSnackbar(response.message, { variant: 'error' });
-          setLoadingLog(false);
-        });
+  function createData(corporateService: CorporateService): CorporateService {
+    return {
+      ...corporateService,
+    };
  }
-
-  const getContent = () => (
-    <Stack sx={{ marginTop: 2 }}>
-      <ItemNotificationStyle>
-        <Stack>
-          <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
-                <DesktopDatePicker
-                  inputFormat="dd/MM/Y"
-                  value={dateOfAdmission}
-                  onChange={(value) => {
-                    setDateOfAdmission(new Date(fPostFormat(value)));
-                    // console.log('value')
-                  }}
-                  renderInput={(params) => (
-                    <TextField
-                      {...params}
-                      fullWidth
-                      label="Date of Admission"
-                      placeholder="dd/mm/yyyy"
-                    />
-                  )}
-                />
-              </LocalizationProvider>
-            </Grid>
-            <Grid item xs={12} sx={{marginTop: 2}}>
-              <Stack direction="row" alignItems="center" justifyContent={'space-between'}>
-                <Typography variant="body1" fontWeight={800}>List Of Benefit</Typography>
-                
-                <Stack direction="row" alignItems="center">
-                  <Typography>All</Typography>
-                <Checkbox onChange={handleCheckAll} checked={benefitIds.length == checkedBenefitIds.length}/>
-                </Stack>
-              </Stack>
-            </Grid>
-            <Grid item xs={12}>      
-              <Stack divider={<Divider flexItem />}>
-                { data.member.current_plan?.benefits && (
-                  data.member.current_plan?.benefits.filter((benefit) => benefit.pivot.active == 1).map((benefit, index) => (
-                    <Stack direction="row" alignItems="center" key={index}>
-                      <Box sx={{ width: '100%' }}>
-                        <Typography>{benefit.code} {benefit.description ? ` - ${benefit.description} ` : ''}</Typography>
-                      </Box>
-                      <Checkbox checked={checkedBenefitIds.includes(benefit.id)} onClick={(event) => {handleCheckChange(event, benefit)} } />
-                    </Stack>
-                  ))
-                )}
-              </Stack>
-              {/* <TableContainer>
-              <Table>
-              <TableRow>
-                <TableCell>
-                  ASD
-                </TableCell>
-                <TableCell>
-                  ASD
-                </TableCell>
-              </TableRow>
-              </Table>
-            </TableContainer> */}
-            </Grid>
-            <Grid item xs={12}>
-              
-            <LoadingButton
-                    id="upload-button"
-                    variant="outlined"
-                    fullWidth
-                    startIcon={<InsertDriveFileIcon />}
-                    onClick={() => {handleDownloadLog(data.member)}}
-                    loading={loadingLog}
-                  >
-                    Download LOG
-                  </LoadingButton>
-            </Grid>
+  
+  const getContent = (props: { row: ReturnType<typeof createData> }) => (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={3}>
+        <Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
+          <Grid item xs={12}>
+            <RHFTextField name="reason" label="Reason for update" />
          </Grid>
-        </Stack>
-      </ItemNotificationStyle>
-    </Stack>
+
+          <Box sx={{ pt: 5 }}>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              // sx={{ textAlign: { xs: 'center', md: 'left' } }}
+              spacing={2}
+            >
+              <Stack direction="row" spacing={1}>
+                <Button
+                  sx={{
+                    boxShadow: 'none',
+                  }}
+                  variant="outlined"
+                  size="medium"
+                  fullWidth={true}
+                  onClick={() => setOpenDialog(false)}
+                >
+                  Cancel
+                </Button>
+                <LoadingButton
+                  sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
+                  type="submit"
+                  variant="contained"
+                  size="medium"
+                  fullWidth={true}
+                  loading={isSubmitting}
+                >
+                  Save
+                </LoadingButton>
+              </Stack>
+            </Stack>
+          </Box>
+        </Box>
+      </Stack>
+    </FormProvider>
  );

  return (
-    <>
-      <MuiDialog
-        title={title}
-        openDialog={openDialog}
-        setOpenDialog={setOpenDialog}
-        content={getContent()}
-      />
-    </>
+    <MuiDialog
+      title={title}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+      maxWidth="sm"
+    />
  );
 };

-export default DialogLog;
+export default DialogTopUpLimit;
--- a/frontend/dashboard/src/pages/Corporates/Member/sections/History.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Member/sections/History.tsx
@@ -0,0 +1,177 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import { useContext, useEffect, useState } from 'react';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import useSettings from '../../../../hooks/useSettings';
+import axios from '../../../../utils/axios';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import HeaderBreadcrumbs from '../../../../components/HeaderBreadcrumbs';
+import { Corporate } from '@/@types/corporates';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+  const pageTitle = 'Audittrail Corporate';
+  
+  const { themeStretch } = useSettings();
+
+  const { corporate_id, member_id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+  const [currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+    const model = 'App\\Models\\Member';
+    const url = `/audittrail/${member_id}?model=${model}`;
+    axios.get(url)
+      .then((res) => {
+        setCurrentCorporate(res.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+
+  }, [configuredCorporateContext]);
+
+  return (
+    <div>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: corporate?.name ?? '-',
+            href: '/corporate/' + corporate_id + '/members',
+          },
+          {
+            name: 'Audittrail Corporate',
+            href: '/corporate/' + corporate_id + '/members',
+          },
+        ]}
+      />
+    {currentCorporate?.data.map((item, index) => (
+      <Accordion
+        key={index}
+        expanded={expanded === `panel${index}`}
+        onChange={handleChange(`panel${index}`)}
+      >
+        <AccordionSummary
+          aria-controls={`panel${index}d-content`}
+          id={`panel${index}d-header`}
+        >
+        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Field</TableCell>
+            <TableCell align="center">Old Value</TableCell>
+            <TableCell align="center">New Values</TableCell>
+          </TableRow>
+       </TableHead>
+       <TableBody>
+       {Object.entries(item.old_values).map(([key, value]) => {
+          let renderedValue;
+          if (key !== 'reason') {
+            return null; // Melewati iterasi saat key adalah 'deleted_by'
+          }
+          renderedValue = item.new_values[key];
+
+          const field = key.charAt(0).toUpperCase() + key.slice(1);
+
+          return (
+          <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+            <TableCell>{`${field}`}</TableCell>
+            <TableCell align="center">{`${value}`}</TableCell>
+            <TableCell align="center">{renderedValue}</TableCell>
+          </TableRow>
+          );
+          })}
+
+      </TableBody>
+        </AccordionDetails>
+      </Accordion>
+    ))}
+    </div>
+  );
+}
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -129,11 +129,18 @@ export default function Router() {
              path: ':corporate_id/benefits',
              element: <Benefits />,
            },
-
+            {
+              path: ':corporate_id/benefits/:benefit_id/history',
+              element: <CorporateBenefitsHistory />,
+            },
            {
              path: ':corporate_id/members',
              element: <CorporateMembers />,
            },
+            {
+              path: ':corporate_id/members/:member_id/history',
+              element: <CorporateHistoryMembers />,
+            },

            {
              path: ':corporate_id/divisions',
@@ -363,6 +370,7 @@ const CorporateDivisionsCreate = Loadable(
 );

 const CorporateMembers = Loadable(lazy(() => import('../pages/Corporates/Member/Index')));
+const CorporateHistoryMembers = Loadable(lazy(() => import('../pages/Corporates/Member/sections/History')));

 const BenefitCreate = Loadable(lazy(() => import('../pages/Corporates/Benefit/Create')));
 const Benefits = Loadable(lazy(() => import('../pages/Corporates/Benefit/Index')));
@@ -373,6 +381,9 @@ const CorporateBenefitsCreate = Loadable(
 const CorporateBenefits = Loadable(
  lazy(() => import('../pages/Corporates/CorporateBenefit/Index'))
 );
+const CorporateBenefitsHistory = Loadable(
+  lazy(() => import('../pages/Corporates/Benefit/sections/History'))
+);

 const CorporatePlanCreate = Loadable(
  lazy(() => import('../pages/Corporates/CorporatePlan/CreateUpdate'))