rebase

frontend/dashboard/src/@types/corporates.ts

@@ -25,6 +25,13 @@ export type Division = {
   name?: string;
 }
 
+export type Hospital = {
+  id: number;
+  corporate_id: number;
+  code: string;
+  name?: string;
+}
+
 export type Employee = {
   id: number;
   name: string;

frontend/dashboard/src/@types/diagnosis.ts

@@ -5,9 +5,12 @@ export type Icd = {
   version?: string;
   code: string;
   name: string;
+  service_code: string;
+  active: number;
   description?: any;
   childs?: Icd[];
   status: string;
+  rules:any
 };
 
 

frontend/dashboard/src/components/hook-form/RHFCheckbox.tsx

@@ -1,7 +1,8 @@
 // form
 import { useFormContext, Controller } from 'react-hook-form';
 // @mui
-import { Checkbox, FormControlLabel, FormGroup, FormControlLabelProps } from '@mui/material';
+import { Checkbox, FormControlLabel, FormGroup, FormControlLabelProps, SxProps } from '@mui/material';
+import { Theme } from '@mui/system';
 
 // ----------------------------------------------------------------------
 
@@ -77,9 +78,10 @@ interface optionsCustomInterface {
 interface RHFCustomMultiCheckboxProps {
   name: string;
   options: optionsCustomInterface[];
+  sx?: SxProps<Theme>
 }
 
-export function RHFCustomMultiCheckbox({ name, options, ...other }: RHFCustomMultiCheckboxProps) {
+export function RHFCustomMultiCheckbox({ name, options, sx, ...other }: RHFCustomMultiCheckboxProps) {
   const { control } = useFormContext();
 
   return (
@@ -93,7 +95,7 @@ export function RHFCustomMultiCheckbox({ name, options, ...other }: RHFCustomMul
             : [...field.value, option.value];
 
         return (
-          <FormGroup>
+          <FormGroup sx={{ ...sx }}>
             {options.map((option, index) => (
               <FormControlLabel
                 key={index}

frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx

@@ -26,9 +26,6 @@ function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderPr
   const [corporate, setCorporate] = useState(null);
 
   useEffect(() => {
-    // Load Corporate
-    console.log('calling corporate' + corporate_id);
-    
     axios.get(`corporates/${corporate_id}`)
     .then((res) => {
       setCorporate(res.data)

frontend/dashboard/src/pages/Corporates/Benefit/List.tsx

@@ -1,4 +1,5 @@
 // @mui
+import * as Yup from 'yup';
 import {
   Box,
   Button,
@@ -38,6 +39,8 @@ import HistoryIcon from '@mui/icons-material/History';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
 
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
@@ -73,6 +76,8 @@ import { Edit } from '@mui/icons-material';
 import { fData, fNumber } from '@/utils/formatNumber';
 import DialogUpdateStatus from '@/components/DialogUpdateStatus';
 
+import { ro } from 'date-fns/locale';
+
 export default function PlanList() {
   const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
@@ -313,12 +318,18 @@ export default function PlanList() {
   }
 
   type DataContent = {
-    code: string;
-    name: string;
+    service: string;
     id: number;
-    status: string|number;
+    status: number;
+    plan: string,
+    benefit_code: string, 
+    customer_benefit_code: string,            
   };
 
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
 
   // Generate the every row of the table
   const [isDialogOpen, setDialogOpen] = useState(false)
@@ -335,6 +346,14 @@ export default function PlanList() {
     const [open, setOpen] = React.useState(false);
     const [openEdit, setOpenEdit] = React.useState(false);
 
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
+      console.log(dataValue)
+      setDialogOpen(isOpen)
+      setDataValue(dataValue)
+      setDescriptionValue('Are you sure to inactive this service ?')
+      setUrl(url)
+    };
+
     // const handleActivate = (model: any, status: string) => {
     //   axios
     //     .put(`/benefits/${row.id}/activation`, {
@@ -362,36 +381,36 @@ export default function PlanList() {
     //     });
     // };
 
-    
-    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
-      setDialogOpen(isOpen)
-      setDataValue(dataValue)
-      setDescriptionValue('Are you sure to inactive this service ?')
-      setUrl(url)
-    };
-
     let frequency_period_name: string
+    let limit_frequency: string
     switch (row.max_frequency_period) {
       case '1' :
         frequency_period_name = 'Daily Visit';
+        limit_frequency = row.daily_frequency ? row.daily_frequency : '1';
         break;
       case '2':
         frequency_period_name = 'Weekly';
+        limit_frequency = row.weekly_frequency ? row.weekly_frequency : '7';
         break;
       case '3':
         frequency_period_name = 'Monthly';
+        limit_frequency = row.monthly_frequency ? row.monthly_frequency : '30';
         break;
       case '4':
         frequency_period_name = 'Yearly';
+        limit_frequency = row.yearly_frequency ? row.yearly_frequency : '365';
         break;
       case '5':
         frequency_period_name = 'Disability';
+        limit_frequency = row.max_days_for_disability ? row.max_days_for_disability : '-';
         break;
       case '6':
         frequency_period_name = 'Visit';
+        limit_frequency = row.daily_frequency ? row.daily_frequency : '-';
         break;
       default:
         frequency_period_name = 'Policy Period';
+        limit_frequency = row.daily_frequency ? row.daily_frequency : '-';
     }
   
     return (
@@ -408,7 +427,8 @@ export default function PlanList() {
           <TableCell align="left">{row.corporate_benefit_code}</TableCell>
           <TableCell align="left">{row.benefit?.description}</TableCell>
           <TableCell align="left">{ fNumber(row.limit_amount)}</TableCell>
-          <TableCell align="left">{ row.max_frequency_period}</TableCell>
+          <TableCell align="left">{ frequency_period_name}</TableCell>
+          <TableCell align="left">{ limit_frequency}</TableCell>
 
           <TableCell align="center">
             {row.active == 1 && (
@@ -476,7 +496,18 @@ export default function PlanList() {
                   <HistoryIcon />
                   History
                 </MenuItem>
-                <MenuItem onClick={() => handleActivate(true, {code: row.code, name: row.service_code, id:row.id, status: row.active}) }>
+                <MenuItem 
+                    onClick={() =>
+                      handleActivate(true, { 
+                        service: row.benefit?.service_code,
+                        plan: row.plan?.code,
+                        benefit_code: row.benefit?.code, 
+                        customer_benefit_code: row.corporate_benefit_code,
+                        id:row.id, 
+                        status: row.active
+                      }) 
+                    }
+                >
                   <CachedOutlinedIcon />
                   Update Status
                 </MenuItem>
@@ -866,7 +897,7 @@ export default function PlanList() {
   const loadDataTableData = async (appliedFilter = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/' + corporate_id + '/benefits', {
+    const response = await axios.get('/corporates/' + corporate_id + '/corporate-benefits', {
       params: filter,
     });
     // console.log(response.data);
@@ -879,6 +910,19 @@ export default function PlanList() {
     fontWeight: 'bold',
   };
 
+  const onSubmit = async (row : any) => {
+    try {
+      handleUpdate(dataValue.status, dataValue.id, row.reason) 
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
   const applyFilter = async (searchFilter: string) => {
     await loadDataTableData({ search: searchFilter });
     setSearchParams({ search: searchFilter });
@@ -894,25 +938,64 @@ export default function PlanList() {
     loadDataTableData();
   }, []);
 
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason Edit is required'),
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+
+  
+  const {
+      reset,
+      handleSubmit,
+      formState: { isSubmitting },
+  } = methods;
+
+  const handleUpdate = (active: number, id: number, reason:string) => {
+    console.log(active)
+    axios
+      .put(`/benefits/${id}/activation`, {
+        active: active, 
+        reason: reason
+      })
+      .then((res) => {
+        window.location.reload();
+      });
+  }
+
   
   const getContent = () => (
     <>
        <Stack paddingX={2} paddingY={2}>
-                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 1 ? 'inactive' : 'active'} this service ?</Typography>
+                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 1 ? 'inactive' : 'active'} this benefit ?</Typography>
             </Stack>
             <Card>
                 <Grid container paddingX={2} paddingY={2}>
-                    <Grid item xs={4} md={4}>
+                    <Grid item xs={5} md={5}>
+                        <Typography variant='inherit'>Service</Typography>
+                    </Grid>
+                    <Grid item xs={7}>
+                        <Typography variant='subtitle1'>{dataValue?.service}</Typography>
+                    </Grid>
+                    <Grid item xs={5} md={5} marginTop={2}>
+                        <Typography variant='inherit'>Plan</Typography>
+                    </Grid>
+                    <Grid item xs={7} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.plan}</Typography>
+                    </Grid>
+                    <Grid item xs={5} md={5} marginTop={2}>
                         <Typography variant='inherit'>Code</Typography>
                     </Grid>
-                    <Grid item xs={8}>
-                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
+                    <Grid item xs={7} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.benefit_code}</Typography>
                     </Grid>
-                    <Grid item xs={4} md={4} marginTop={2}>
-                        <Typography variant='inherit'>Service Name</Typography>
+                    <Grid item xs={5} md={5} marginTop={2}>
+                        <Typography variant='inherit'>Customer Benefit Code</Typography>
                     </Grid>
-                    <Grid item xs={8} marginTop={2}>
-                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
+                    <Grid item xs={7} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.customer_benefit_code}</Typography>
                     </Grid>
                 </Grid>
             </Card>
@@ -1012,6 +1095,9 @@ export default function PlanList() {
                 <TableCell style={headStyle} align="left">
                   Limit Benefit
                 </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Freq. Period
+                </TableCell>
                 <TableCell style={headStyle} align="left">
                   Limit Frequency
                 </TableCell>
@@ -1058,7 +1144,7 @@ export default function PlanList() {
           title={{ name: 'Reason For Update' }}
         />
       )}
-      {/* <DialogUpdateStatus 
+      <DialogUpdateStatus 
         openDialog={isDialogOpen}
         setOpenDialog={setDialogOpen} 
         title={titles}
@@ -1066,7 +1152,7 @@ export default function PlanList() {
         description={dataDescription}
         content={getContent()}
         // maxWidth='50px'
-      /> */}
+      />
     </Stack>
   );
 }

frontend/dashboard/src/pages/Corporates/Benefit/sections/History.tsx

@@ -155,6 +155,7 @@ export default function CustomizedAccordions() {
           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);

frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx

@@ -64,10 +64,10 @@ export default function CorporateTabNavigations({ position }: Props) {
       path: 'formulariums',
       label: 'Formularium',
     },
-    {
-      path: 'claim-history',
-      label: 'Claim History',
-    },
+    // {
+    //   path: 'claim-history',
+    //   label: 'Claim History',
+    // },
   ];
   useEffect(() => {
     let currentIndex = mainTabItems.findIndex((item) => item.path === position);

frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Edit.tsx

@@ -0,0 +1,273 @@
+/**
+ * Core
+ * ============================================
+ */
+import axios from '@/utils/axios';
+import { useForm } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Box, IconButton, Typography, Grid, Card, TextField, Autocomplete, Button } from '@mui/material';
+
+/**
+ * Components
+ * ============================================
+*/
+import Page from '../../../components/Page';
+import { LoadingButton } from "@mui/lab";
+import { FormProvider, RHFCustomMultiCheckbox, RHFTextField } from '@/components/hook-form';
+import { enqueueSnackbar } from 'notistack';
+
+/**
+ * Icon
+ * ============================================
+ */
+import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
+
+export default function Divisions() {
+    const pageTitle = 'Edit Exclusion';
+    const navigate  = useNavigate()
+    const { corporate_id, exclusion_id } = useParams();                 // id di url
+    const [ plans, setPlans ]            = useState<string[]>([]);      // option untuk field plans
+
+    // checkbox option
+    // ====================================
+    const msc_checkbox_option = [
+        {
+            value: 'm',
+            label: 'Member',
+        },
+        {
+            value: 's',
+            label: 'Spouse',
+        },
+        {
+            value: 'c',
+            label: 'Child',
+        },
+    ]
+
+    const gender_checkbox_option = [
+        {
+            value: 'male',
+            label: 'Male',
+        },
+        {
+            value: 'female',
+            label: 'Female',
+        },
+    ]
+
+    // setup form
+    // ====================================
+    const defaultValues: any = {
+        msc: [],
+        gender: [],
+        min_age: '',
+        max_age: '',
+        plans: [],
+    };
+
+    const methods = useForm<any>({
+        defaultValues
+    });
+
+    const { setValue, handleSubmit, reset, watch, formState: { isDirty, isSubmitting } } = methods;
+    const formValues = watch();
+
+    // set form value
+    // =====================================
+    useEffect(() => {
+        axios.get(`corporates/${corporate_id}/diagnosis-exclusions/${exclusion_id}`)
+            .then((res) => {
+                // plan option
+                setPlans(res.data.data.plans);
+
+                // set value
+                let res_plan = res.data.data.exclusion.rules.plan;
+
+                if (res_plan.length == 1 && res_plan[0] == '') {
+                    res_plan = [];
+                }
+
+                reset({
+                    msc     : res.data.data.exclusion.rules.msc[0].split(','),
+                    gender  : res.data.data.exclusion.rules.gender[0].split(','),
+                    min_age : res.data.data.exclusion.value_rules.min_age,
+                    max_age : res.data.data.exclusion.value_rules.max_age,
+                    plans   : res_plan,
+                })
+            })
+    }, [exclusion_id]);
+
+    // Submit Form
+    // =====================================
+    const submitHandler = async (data: any) => {
+        let one_row = {
+            msc: {
+                m: data.msc.includes('m'),
+                s: data.msc.includes('s'),
+                c: data.msc.includes('c'),
+            },
+            gender : {
+                male  : data.gender.includes('male') == true ? 1 : 0,
+                female: data.gender.includes('female') == true ? 1 : 0,
+            },
+            min_age: data.min_age,
+            max_age: data.max_age,
+            plan   : data.plans.join(','),
+            icd_id : exclusion_id,
+        }
+
+        return axios
+            .post(`/corporates/${corporate_id}/diagnosis-exclusions/store`, {
+                type: 'one_row',
+                icd_id: exclusion_id,
+                one_row
+            })
+            .then((res) => {
+                enqueueSnackbar('Exclusion Updated', {
+                    variant: 'success',
+                });
+
+                reset({
+                    msc     : data.msc,
+                    gender  : data.gender,
+                    min_age : data.min_age,
+                    max_age : data.max_age,
+                    plans   : data.plans,
+                })
+
+                return true;
+            })
+            .catch((res) => {
+                enqueueSnackbar('Terjadi kesalahan pada server', {
+                    variant: 'error',
+                });
+
+                return true;
+            })
+    }
+
+    return (
+        <Page title={pageTitle}>
+            <Box sx={{ display: 'flex', alignItems: 'center', pl: '12px', mb: '40px' }}>
+                <IconButton size='large' color='inherit' onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions`)} >
+                    <ArrowBackIosNew/>
+                </IconButton>
+
+                <Typography variant="h5" sx={{ marginLeft: '24px' }}>
+                    {pageTitle}
+                </Typography>
+            </Box>
+
+            <Box sx={{ px: '28px' }}>
+                <FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
+                    <Card sx={{ padding: '24px' }}>
+                        <Grid container spacing={6}>
+                            {/* MSC row */}
+                            <Grid item xs={12}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="body1" component="div" color={'GrayText'}>
+                                            MSC* :
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <RHFCustomMultiCheckbox name="msc" options={msc_checkbox_option} sx={{ flexDirection: 'row' }} />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            {/* Gender row */}
+                            <Grid item xs={12}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="body1" component="div" color={'GrayText'}>
+                                            Gender* :
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <RHFCustomMultiCheckbox name="gender" options={gender_checkbox_option} sx={{ flexDirection: 'row' }} />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            {/* Age row */}
+                            <Grid item xs={12}>
+                                <Grid container spacing={3}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="body1" component="div" color={'GrayText'}>
+                                            Age* :
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <Grid container spacing={2}>
+                                            <Grid item xs={3} md={3}>
+                                                <RHFTextField
+                                                    id="min_age"
+                                                    name='min_age'
+                                                />
+                                            </Grid>
+                                            <Grid item xs={3} md={3}>
+                                                <RHFTextField
+                                                    id="max_age"
+                                                    name='max_age'
+                                                />
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            {/* Plan Section */}
+                            <Grid item xs={12}>
+                                <Grid container spacing={3}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="body1" component="div" color={'GrayText'}>
+                                            Plan* :
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <Autocomplete
+                                            options={plans}
+                                            fullWidth
+                                            multiple
+                                            limitTags={5}
+                                            getOptionLabel={(option) => {
+                                                return option ?? false
+                                            }}
+                                            value={formValues.plans}
+                                            isOptionEqualToValue={(option, value) =>{
+                                                return option === value
+                                            }}
+                                            renderInput={(params) => (
+                                                <TextField {...params} label="Plan" variant="outlined" />
+                                            )}
+                                            onChange={(event,value) => {
+                                                setValue('plans', value, {shouldDirty: true});
+                                            }}
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            {/* Button Cancle & Save */}
+                            <Grid item xs={12} md={12}>
+                                <Box display="flex" justifyContent={'flex-end'}>
+                                    <Box display="flex" gap={1}>
+                                        <Button variant="outlined" color="inherit" onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions`)}>
+                                            Cancel
+                                        </Button>
+                                        <LoadingButton disabled={!isDirty} type="submit" variant="contained" loading={isSubmitting}>
+                                            Save Changes
+                                        </LoadingButton>
+                                    </Box>
+                                </Box>
+                            </Grid>
+                        </Grid>
+                    </Card>
+                </FormProvider>
+            </Box>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx

@@ -1,4 +1,5 @@
 // @mui
+import * as Yup from 'yup';
 import {
   Autocomplete,
   Box,
@@ -46,6 +47,9 @@ import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'reac
 import useSettings from '../../../hooks/useSettings';
 import { Link, useParams, useSearchParams, useNavigate } from 'react-router-dom';
 // components
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import { Icd } from '../../../@types/diagnosis';
@@ -59,6 +63,8 @@ import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { EditOutlined, FindInPageOutlined } from '@mui/icons-material';
 import Label from '@/components/Label';
 import { display } from '@mui/system';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus'
+import { FormProvider, RHFSelect } from '@/components/hook-form';
 
 export default function List(props: any) {
   const { themeStretch } = useSettings();
@@ -272,6 +278,14 @@ export default function List(props: any) {
       ...icd,
     };
   }
+  type DataContent = {
+    service: string;
+    id: number;
+    status: number;
+    code: string,
+    name: string, 
+    rules: string,            
+  };
   const plans = props?.data.map((plan: any) => {
     return {
       value: plan.code,
@@ -305,6 +319,16 @@ export default function List(props: any) {
     const { row, index, data } = props;
   }
 
+  const [isDialogOpen, setDialogOpen] = useState(false)
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  const [dataValue, setDataValue] = useState('');
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+
+
   function Row(props: {
     row: ReturnType<typeof createData>;
     data: any;
@@ -337,9 +361,6 @@ export default function List(props: any) {
 
     const [openEdit, setOpenEdit] = React.useState(false);
 
-    console.log('open', open);
-    console.log('openEdit', openEdit);
-
     // const [plans, setPlans] = useState([]);
 
     const plans = data;
@@ -469,30 +490,53 @@ export default function List(props: any) {
 
     console.log('exclusions', exclusions);
 
-    const handleActivate = (row: any) => {
-      axios
-        .put(`/corporates/diagnosis-exclusions/update_activation`, {
-            id: row.id,
-            active: row.active == 1 ? 0 : 1,
-        })
-        .then((res) => {
-        //   setDataTableData({
-        //     ...dataTableData,
-        //     data: dataTableData.data.map((model) => {
-        //       let updatedModel = model;
-        //       if (row.id == model.id) {
-        //         updatedModel.active = res.data.corporate.active;
-        //       }
-        //       return updatedModel;
-        //     }),
-        //   });
-        })
-        .catch((error) => {
-          enqueueSnackbar(
-            error.response.data.message ?? error.message ?? 'Failed Processing Request',
-            { variant: 'error' }
-          );
-        });
+    // const handleActivate = (row: any) => {
+
+      // axios
+      //   .put(`/corporates/diagnosis-exclusions/update_activation`, {
+      //       id: row.id,
+      //       active: row.active == 1 ? 0 : 1,
+      //   })
+      //   .then((res) => {
+      //     setDataTableData({
+      //       ...dataTableData,
+      //       data: dataTableData.data.map((model) => {
+      //           let updatedModel = model;
+
+      //           if (model.id == row.id) {
+      //               updatedModel.active = row.active == 1 ? 0 : 1;
+      //           }
+
+      //           return updatedModel;
+      //       }),
+      //     });
+      //   })
+      //   .catch((error) => {
+      //       if (error.response.status == 400) {
+      //           let data = error.response.data.messages;
+
+      //           for (const key in data) {
+      //               enqueueSnackbar(
+      //                   data[key][0],
+      //                   { variant: 'error' }
+      //               );
+      //           }
+      //       }
+      //       else {
+      //           enqueueSnackbar(
+      //               error.response.data.message ?? error.message ?? 'Failed Processing Request',
+      //               { variant: 'error' }
+      //           );
+      //       }
+      //   });
+    // };
+
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
+        console.log(dataValue)
+        setDialogOpen(isOpen)
+        setDataValue(dataValue)
+        setDescriptionValue('Are you sure to inactive this service ?')
+        setUrl(url)
     };
 
     return (
@@ -514,7 +558,7 @@ export default function List(props: any) {
             <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
                 {row.active == 1 && (
                 <Label
-                    variant="outlined"
+                    variant="ghost"
                     color="success"
                     size="small"
                 >
@@ -523,7 +567,7 @@ export default function List(props: any) {
                 )}
                 {row.active != 1 && (
                 <Label
-                    variant="outlined"
+                    variant="ghost"
                     color="error"
                     size="small"
                 >
@@ -539,11 +583,19 @@ export default function List(props: any) {
                         <FindInPageOutlined />
                         Detail
                     </MenuItem>
-                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/history`)} >
+                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
                         <EditOutlined />
                         Edit
                     </MenuItem>
-                    <MenuItem onClick={() => handleActivate(row)}>
+                    <MenuItem onClick={() => handleActivate(true, { 
+                        code: row.code,
+                        name: row.name, 
+                        rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
+                        id:row.id, 
+                        status: row.active,
+                        service: row.service_code
+                        }) 
+                      } >
                         <CachedIcon />
                         Update Status
                     </MenuItem>
@@ -571,16 +623,30 @@ export default function List(props: any) {
                                                 MSC :
                                             </Typography>
                                         </Grid>
-                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
-                                            {row?.rules?.msc && row?.rules?.msc[0] ? (
-                                                row?.rules?.msc[0].split(',').map((text,i) => {
-                                                    return (
-                                                        <Typography key={i} component="div">
-                                                            <Label>{text}</Label>
-                                                        </Typography>
-                                                    )
-                                                })
-                                            ) : '-'}
+                                        <Grid item xs={9} sx={{ display: 'flex', gap: 1 }}>
+                                          {row?.rules?.msc && row?.rules?.msc[0] ? (
+                                            row?.rules?.msc[0].split(',').map((text, i) => {
+                                              let labelMSC: string = text;
+                                              switch (labelMSC) {
+                                                case 'm':
+                                                  labelMSC = 'Member';
+                                                  break;
+                                                case 'c':
+                                                  labelMSC = 'Child';
+                                                  break;
+                                                case 's':
+                                                  labelMSC = 'Spouse';
+                                                  break;
+                                                default:
+                                                  labelMSC = 'Member';
+                                              }
+                                              return (
+                                                <Typography key={i} component="div">
+                                                  <Label>{labelMSC}</Label>
+                                                </Typography>
+                                              );
+                                            })
+                                          ) : '-'}
                                         </Grid>
                                         <Grid item xs={3}>
                                             <Typography variant="body1" component="div" color={'GrayText'}>
@@ -589,9 +655,14 @@ export default function List(props: any) {
                                         </Grid>
                                         <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
                                             {row?.rules?.gender && row?.rules?.gender[0] ? (
-                                                <Typography component="div">
-                                                    <Label>{row?.rules?.gender[0]}</Label>
-                                                </Typography>
+                                                row?.rules?.gender[0].split(',').map((text,i) => {
+                                                  const capitalizedText = text.charAt(0).toUpperCase() + text.slice(1);
+                                                  return (
+                                                      <Typography key={i} component="div">
+                                                          <Label>{capitalizedText}</Label>
+                                                      </Typography>
+                                                  )
+                                              })
                                             ) : '-'}
                                         </Grid>
                                         <Grid item xs={3}>
@@ -630,222 +701,6 @@ export default function List(props: any) {
                         </Card>
                     </Box>
                 ) : null }
-              {/* {open == true ? (
-                openEdit == false ? (
-                  <Box sx={{ borderBottom: 1 }}>
-                    <div>
-                        <Typography variant="body" sx={{ fontWeight: 'bold' }}>
-                          Excluded Only for :
-                        </Typography>
-
-                        {row.rules.msc && (
-                          <Typography variant="body" component="div">
-                            MSC : {row.rules.msc.join(', ') ?? '-'}
-                          </Typography>
-                        )}
-                        {row.rules.gender && (
-                          <Typography variant="body" component="div">
-                            Gender : {row.rules.gender.join(', ') ?? '-'}
-                          </Typography>
-                        )}
-                        {(row.rules.min_age || row.rules.max_age) && (
-                          <Typography variant="body" component="div">
-                            Age : {row.rules.min_age ?? '-'} - {row.rules.max_age ?? '-'}
-                          </Typography>
-                        )}
-                        {row.rules.plan && (
-                          <Typography variant="body" component="div">
-                            Plan : {row.rules.plan.join(', ') ?? '-'}
-                          </Typography>
-                        )}
-                    </div>
-                  </Box>
-                ) : (
-                  // <CollapseEdit row={row} index={index} plans={plans} />
-                  <Box sx={{ borderBottom: 1, pb: 2 }}>
-                    <Typography variant="body2" sx={{ fontWeight: 'bold', mb: 2 }}>
-                      Edit Exclusion :
-                    </Typography>
-
-                    <Stack direction={'column'} spacing={2}>
-                      <FormControl fullWidth>
-                        <Grid container spacing={2}>
-                          <Grid item xs={2} md={2}>
-                            <Typography id="demo-simple-select-label">MSC</Typography>
-                          </Grid>
-
-                          <Grid item xs={10} md={10}>
-                            <Stack direction={'row'} spacing={2}>
-                              <Grid item xs={3} md={3}>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={row.value_rules.msc?.m == '1'}
-                                      onChange={(event) => {
-                                        // handleConfigExclusion(event, row, 'm', 'msc');
-                                        handleChange(index, event, 'msc', row.id, 'm');
-                                      }}
-                                    />
-                                  }
-                                  label="Member"
-                                />
-                              </Grid>
-                              <Grid item xs={3} md={3}>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={row.value_rules.msc?.s == '1'}
-                                      onChange={(event) => {
-                                        // handleConfigExclusion(event, row, 's', 'msc');
-                                        handleChange(index, event, 'msc', row.id, 's');
-                                      }}
-                                    />
-                                  }
-                                  label="Spouse"
-                                />
-                              </Grid>
-                              <Grid item xs={3} md={3}>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={row.value_rules.msc?.c == '1'}
-                                      onChange={(event) => {
-                                        // handleConfigExclusion(event, row, 'c', 'msc');
-                                        handleChange(index, event, 'msc', row.id, 'c');
-                                      }}
-                                    />
-                                  }
-                                  label="Child"
-                                />
-                              </Grid>
-                            </Stack>
-                          </Grid>
-                        </Grid>
-                      </FormControl>
-
-                      <FormControl fullWidth>
-                        <Grid container spacing={2}>
-                          <Grid item xs={2} md={2}>
-                            <Typography id="demo-simple-select-label">Gender</Typography>
-                          </Grid>
-                          <Grid item xs={10} md={10}>
-                            <Stack direction={'row'} spacing={2}>
-                              <Grid item xs={3} md={3}>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={row.value_rules.gender?.male == '1'}
-                                      onChange={(event) => {
-                                        // handleConfigExclusion(event, row, 'male', 'gender');
-                                        handleChange(index, event, 'gender', row.id, 'male');
-                                      }}
-                                    />
-                                  }
-                                  label="Male"
-                                />
-                              </Grid>
-                              <Grid item xs={3} md={3}>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={row.value_rules.gender?.female == '1'}
-                                      onChange={(event) => {
-                                        // handleConfigExclusion(event, row, 'female', 'gender');
-                                        handleChange(index, event, 'gender', row.id, 'female');
-                                      }}
-                                    />
-                                  }
-                                  label="Female"
-                                />
-                              </Grid>
-                            </Stack>
-                          </Grid>
-                        </Grid>
-                      </FormControl>
-                      <FormControl fullWidth>
-                        <Grid container spacing={2}>
-                          <Grid item xs={2} md={2}>
-                            <Typography id="demo-simple-select-label">Age</Typography>
-                          </Grid>
-                          <Grid item xs={10} md={10}>
-                            <Stack direction={'row'} spacing={2}>
-                              <Grid item xs={3} md={3}>
-                                <TextField
-                                  id="outlined-number"
-                                  type="number"
-                                  defaultValue={row.value_rules.min_age ?? ''}
-                                  onChange={(event) => {
-                                    handleMinAge(event);
-                                    handleChange(index, event, 'min_age', row.id);
-                                  }}
-                                  onKeyDown={(event) => {
-                                    if (event.key === 'Enter') {
-                                      handleConfigExclusion(event, row, minAge, 'min_age');
-                                    }
-                                  }}
-                                />
-                              </Grid>
-                              <Grid item xs={3} md={3}>
-                                <TextField
-                                  id="outlined-number"
-                                  type="number"
-                                  defaultValue={row.value_rules.max_age ?? ''}
-                                  onChange={(event) => {
-                                    handleMaxAge(event);
-                                    handleChange(index, event, 'max_age', row.id);
-                                  }}
-                                  onKeyDown={(event) => {
-                                    if (event.key === 'Enter') {
-                                      handleConfigExclusion(event, row, maxAge, 'max_age');
-                                    }
-                                  }}
-                                />
-                              </Grid>
-                            </Stack>
-                          </Grid>
-                        </Grid>
-                      </FormControl>
-                      <FormControl fullWidth>
-                        <Grid container spacing={2}>
-                          <Grid item xs={2} md={2}>
-                            <Typography id="demo-simple-select-label">Plan</Typography>
-                          </Grid>
-                          <Grid item xs={10} md={10}>
-                            <Stack direction={'row'} spacing={2}>
-                              <Grid item xs={12} md={12}>
-                                <Autocomplete
-                                  id="combo-box-demo"
-                                  options={plans}
-                                  multiple
-                                  limitTags={5}
-                                  fullWidth
-                                  getOptionLabel={(option) => option.label}
-                                  defaultValue={converToArray(row.value_rules.plan) || []}
-                                  isOptionEqualToValue={(option, value) =>
-                                    option.value === value.value
-                                  }
-                                  onChange={(event, value) => {
-                                    handlePlanChange(event, value);
-                                    handleChange(index, event, 'plan', row.id, value);
-                                  }}
-                                  onKeyDown={(event) => {
-                                    if (event.key === 'Enter') {
-                                      handleConfigExclusion(event, row, valuePlan, 'plan');
-                                    }
-                                  }}
-                                  renderInput={(params) => (
-                                    <TextField {...params} label="Plan" variant="outlined" />
-                                  )}
-                                />
-                              </Grid>
-                            </Stack>
-                          </Grid>
-                        </Grid>
-                      </FormControl>
-                    </Stack>
-                  </Box>
-                )
-              ) : null} */}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -944,6 +799,18 @@ export default function List(props: any) {
     fontWeight: 'bold',
   };
 
+  const onSubmit = async (row : any) => {
+    try {
+      handleUpdate(dataValue.status, dataValue.id, row.reason) 
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
   const applyFilter = async (searchFilter: any) => {
     await loadDataTableData({ search: searchFilter });
     setSearchParams({ search: searchFilter });
@@ -961,6 +828,136 @@ export default function List(props: any) {
 
   const navigate = useNavigate()
 
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason Edit is required'),
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+
+  
+  const {
+      reset,
+      handleSubmit,
+      formState: { isSubmitting },
+  } = methods;
+
+  const handleUpdate = (active: number, id: number, reason:string) => {
+    console.log(active)
+    axios
+      .put(`/corporates/diagnosis-exclusions/update_activation`, {
+        id: id,
+        active: active,
+        reason: reason
+      })
+      .then((res) => {
+        window.location.reload();
+      });
+  }
+
+  const getContent = () => (
+    <>
+       <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 1 ? 'inactive' : 'active'} this benefit ?</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={5} md={5}>
+                        <Typography variant='inherit'>Service</Typography>
+                    </Grid>
+                    <Grid item xs={7}>
+                        <Typography variant='subtitle1'>{dataValue?.service}</Typography>
+                    </Grid>
+                    <Grid item xs={5} md={5} marginTop={2}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={7} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={5} md={5} marginTop={2}>
+                        <Typography variant='inherit'>Name</Typography>
+                    </Grid>
+                    <Grid item xs={7} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
+                    </Grid>
+                    <Grid item xs={5} md={5} marginTop={2}>
+                        <Typography variant='inherit'>Rules</Typography>
+                    </Grid>
+                    <Grid item xs={7} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.rules}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <RHFSelect
+                    name="reason"
+                    label="Reason for update"
+                    >
+                    <option value=""></option>
+                    <option value="Agreement changed">Agreement changed</option>
+                    <option value="Endorsement">Endorsement</option>
+                    <option value="Renewal">Renewal</option>
+                    <option value="Worng Setting">Worng Setting</option>
+                </RHFSelect>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setDialogOpen(false)}
+            >
+                Cancel
+            </Button>
+
+            {dataValue?.status == 1?  
+              <LoadingButton
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+                type="submit"
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                loading={isSubmitting}
+                color='error'
+              >
+              Inactive
+            </LoadingButton>
+            : 
+            <LoadingButton
+              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+              type="submit"
+              variant="contained"
+              size="medium"
+              fullWidth={true}
+              loading={isSubmitting}
+              color='success'
+            >
+            Active
+          </LoadingButton>
+          
+            
+            }
+            </Stack>
+        </Stack>
+        
+        </FormProvider>
+    </>
+  );
+
   return (
     <Stack>
       <ImportForm />
@@ -1033,6 +1030,16 @@ export default function List(props: any) {
 
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
       </Card>
+
+      <DialogUpdateStatus 
+        openDialog={isDialogOpen}
+        setOpenDialog={setDialogOpen} 
+        title={titles}
+        data={dataValue}
+        description={dataDescription}
+        content={getContent()}
+        // maxWidth='50px'
+      />
     </Stack>
   );
 }

frontend/dashboard/src/pages/Corporates/Hospital/CreateUpdate.tsx

@@ -1,64 +1,63 @@
-
 import { useNavigate, useParams } from "react-router-dom";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import Page from "../../../components/Page";
 import useSettings from "../../../hooks/useSettings";
-import { useEffect, useMemo, useState } from 'react';
-import axios from '../../../utils/axios';
-import { useSnackbar } from 'notistack';
-import CorporatePlanForm from './Form';
-import { CorporatePlan } from '../../../@types/corporates';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import CorporateHospitalForm from './Form';
+import { Hospital } from '../../../@types/corporates';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { Stack, Typography } from '@mui/material';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 
 
 
-export default function PlanCreate() {
-  const { themeStretch } = useSettings();
+export default function HospitalCreate() {
   const { corporate_id, id } = useParams();
-  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
   const navigate = useNavigate();
 
+  const [corporate, setCorporate] = useState<Corporate|null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
   const isEdit = !!id;
 
   useEffect(() => {
-    if (isEdit) {
-      axios.get('/corporates/'+corporate_id+'/divisions/'+id+'/edit')
-        .then((res) => {
-          setCurrentCorporatePlan(res.data);
-        })
-        .catch((err) => {
-          if (err.response.status === 404) {
-            navigate('/404');
-          }
-        })
-    }
-  }, [corporate_id, id]);
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [corporate_id, id, configuredCorporateContext]);
 
 
   return (
-    <Page title="Create Corporate Division">
-      <HeaderBreadcrumbs
-        heading={'Create Corporate Division'}
-        links={[
-          {
-            name: 'Corporates',
-            href: '/corporates',
-          },
-          {
-            name: 'Corporate Name',
-            href: '/corporates/'+corporate_id,
-          },
-          {
-            name: 'Division',
-            href: '/corporates/'+corporate_id+'/divisions',
-          },
-          {
-            name: !isEdit ? 'Create' : 'Edit',
-            href: '/corporates/'+corporate_id+'/divisions/'+id,
-          },
-        ]}
-      />
-
-      <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
+    <Page title="Create Hospital">
+      {isEdit ? (
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
+          <ArrowBackIosIcon sx={{cursor:'pointer'}} onClick={() => navigate(-1)}/>
+          <Typography variant="h5" sx={{marginLeft:2}}>Edit Hospital</Typography>
+        </Stack>
+      ) : (
+        <HeaderBreadcrumbs
+          heading={'Create Hospital'}
+          links={[
+            {
+              name: 'Corporates',
+              href: '/corporates',
+            },
+            {
+              name: corporate?.name ?? '-',
+              href: '/corporates/'+corporate_id,
+            },
+            {
+              name: 'Hospital',
+              href: '/corporates/'+corporate_id+'/hospitals',
+            },
+            {
+              name: !isEdit ? 'Create' : 'Edit',
+              href: '/corporates/'+corporate_id+'/hospitals/create',
+            },
+          ]}
+        />
+      )}
+      <CorporateHospitalForm isEdit={isEdit} />
     </Page>
   );
 }

frontend/dashboard/src/pages/Corporates/Hospital/Form.tsx

@@ -1,129 +1,171 @@
-import * as Yup from 'yup';
-import { LoadingButton } from "@mui/lab";
-import { Card, Grid, Stack, Typography } from "@mui/material";
-import { CorporatePlan } from "../../../@types/corporates";
-import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form";
-import { useEffect, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, Card, Grid, Stack, Typography, FormControl, InputLabel, Select, FormHelperText, MenuItem } from "@mui/material";
+import { useEffect, useMemo, useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from '../../../utils/axios';
 
 type Props = {
   isEdit: boolean;
-  currentCorporatePlan?: CorporatePlan;
 };
 
-export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
+export default function CorporateHospitalForm({ isEdit }: Props) {
 
   const { enqueueSnackbar } = useSnackbar();
   const navigate = useNavigate();
-  const { corporate_id } = useParams();
-
-  const NewCorporatePlanSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
-    code: Yup.string().required('Corporate Code is required'),
-  });
-
-  const defaultValues = useMemo(
-    () => ({
-      name: currentCorporatePlan?.name || '',
-      code: currentCorporatePlan?.code || '',
-      active: currentCorporatePlan?.active === 1 ? true : false,
-    }),
-    [currentCorporatePlan]
-  );
+  const { corporate_id, id, organization_id } = useParams();
+  const [dataHospital, setDataHospital] = useState(null);
+  let idHospital = organization_id && isEdit ? organization_id : 0;
+  const [indexData, setIndexData] = useState(idHospital);
+  const [updateData, setUpdateData] = useState(null);
+  const [dataDefault, setDataDefault] = useState(null);
 
   useEffect(() => {
-    if (isEdit && currentCorporatePlan) {
-      reset(defaultValues);
+    axios.get('/corporates/' + corporate_id + '/hospitals/data')
+    .then((res) => {
+      setDataHospital(res.data);
+      const data = {
+        corporate_id : corporate_id ? corporate_id : null,
+        organization_id : res.data[0] ? res.data[0].id : null,
+        code : res.data[0] ? res.data[0].code : null,
+        name : res.data[0] ? res.data[0].name : null,
+      }
+      setDataDefault(data);
+    })
+    
+  }, [isEdit]);
+
+  const [addData, setAddData] = useState(dataDefault);
+
+  const handlePageChange = (index:any) => {
+    setIndexData(index);
+    const data = {
+      corporate_id : corporate_id ? corporate_id : null,
+      organization_id : dataHospital ? dataHospital[index].id : null,
+      code : dataHospital ? dataHospital[index].code : null,
+      name : dataHospital ? dataHospital[index].name : null,
     }
-    if (!isEdit) {
-      reset(defaultValues);
+    setAddData(data);
+    
+  }
+  const handleSaveData = () => {
+    //Save data
+    axios
+    .post('/corporates/'+corporate_id+'/hospitals/save', (addData ? addData : dataDefault))
+    .then((response) => {
+      if(response.data)
+      {
+        enqueueSnackbar('Data saved successfully', { variant: 'success' });
+      }
+    })
+    .catch((error) => {
+      enqueueSnackbar('Failed to add data', { variant: 'error' });
+    });
+  }  
+  
+  const handlePageChangeUpdate = (id: any) => {
+    setIndexData(id);
+    const foundData = dataHospital?.find(item => item.id === id);
+    const dataUpdate = {
+      corporate_id : corporate_id ? corporate_id : null,
+      organization_id : dataHospital ? foundData.id : null,
+      code : dataHospital ? foundData.code : null,
+      name : dataHospital ? foundData.name : null,
     }
-  }, [isEdit, currentCorporatePlan]);
+    setUpdateData(dataUpdate);
+  }
 
-  const methods = useForm({
-    resolver: yupResolver(NewCorporatePlanSchema),
-    defaultValues,
-  });
-
-  const {
-    reset,
-    watch,
-    control,
-    setValue,
-    getValues,
-    setError,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-
-  const onSubmit = async (data: any) => {
-    if (!isEdit) {
-      await axios
-      .post('/corporate/' + corporate_id + '/divisions', data)
-      .then((res) => {
-        enqueueSnackbar('Division created successfully', { variant: 'success' });
-      })
-      .then((res) => {
-        navigate('/corporate/' + corporate_id + '/divisions',  { replace: true });
-      })
-      .catch(({ response }) => {
-        if (response.status === 422) {
-          for (const [key, value] of Object.entries(response.data.errors)) { 
-            setError(key, { message: value[0] });
-            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
-          }
-        }
-        else {
-          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+  const handleUpdateData = () => {
+    //Update data
+    if(updateData)
+    {
+      axios
+      .put('/corporates/'+corporate_id+'/hospitals/'+id+'/edit', updateData)
+      .then((response) => {
+        if(response.data)
+        {
+          enqueueSnackbar('Data updated successfully', { variant: 'success' });
+          navigate(-1);
+          window.history.replaceState(null, '', '/corporates/'+corporate_id+'/hospitals');
         }
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to update data', { variant: 'error' });
       });
-    } else {
-      await axios
-        .put('/corporate/' + corporate_id + '/divisions/' + currentCorporatePlan?.id , data)
-        .then((res) => {
-          enqueueSnackbar('Division updated successfully', { variant: 'success' });
-        })
-        .then((res) => {
-          navigate('/corporate/' + corporate_id + '/divisions/' ,  { replace: true });
-        })
-        .catch(({ response }) => {
-          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
-        });
     }
-  };
+    else
+    {
+      enqueueSnackbar('Data has not changed.', { variant: 'error' });
+    }
+    
+  } 
 
   return (
-    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-        <Grid container spacing={2}>
-          <Grid item xs={8}>
-            <Card sx={{ p: 2 }}>
-                <Stack spacing={3}>
+    <Stack>
+      <Card sx={{ p: 2 }}>
+        <Stack spacing={2} direction='column'>
+          <Typography variant='subtitle1'>Hospital *</Typography>
+          {dataHospital && dataHospital.length > 0 ? (
+            isEdit ? (
+              <FormControl>
+                <InputLabel htmlFor="id_hospital" required>
+                  Hospital
+                </InputLabel>
+                <Select
+                  id="id_hospital"
+                  value={dataHospital && dataHospital.length > 0 ? indexData : ''}
+                  fullWidth
+                  label="Hospital"
+                  onChange={(e) => {
+                    handlePageChangeUpdate(e.target.value);
+                  }}
+                  
+                >
+                  {dataHospital?.map((data, index) => (
+                    <MenuItem key={index} value={data.id}>{data.name}</MenuItem>
+                  ))}
+                </Select>
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+              </FormControl>
+            ) : (
+              <FormControl>
+                <InputLabel htmlFor="id_hospital" required>
+                  Hospital
+                </InputLabel>
+                <Select
+                  id="id_hospital"
+                  value={dataHospital && dataHospital.length > 0 ? indexData : ''}
+                  fullWidth
+                  label="Hospital"
+                  onChange={(e) => {
+                    handlePageChange(e.target.value);
+                  }}
+                  
+                >
+                  {dataHospital?.map((data, index) => (
+                    <MenuItem key={index} value={index}>{data.name}</MenuItem>
+                  ))}
+                </Select>
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+              </FormControl>
+            )
+          ) : (
+            <Typography variant='body2' style={{ position: 'relative', margin: 'auto', width: 'fit-content' }}>
+              Loading
+            </Typography>
 
-                  <Typography variant="h6">Division Detail</Typography>
-
-                  <RHFTextField name="name" label="Name" />
-
-                  <RHFTextField name="code" label="Code" />
-
-                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
-                    { isEdit? 'Update' : 'Create' } 
-                  </LoadingButton>
-
-                </Stack>
-            </Card>
-          </Grid>
-          <Grid item xs={4}>
-            <Card sx={{ p:2 }}>
-
-            <RHFSwitch name="active" label="Active" />
-              </Card>
-          </Grid>
-        </Grid>
-      </FormProvider>
+          )}
+          
+          <Stack direction='row' spacing={2} justifyContent='flex-end'>
+            <Button variant="outlined" sx={{color: '#212B36'}} onClick={() => navigate(-1)}>Cancel</Button>
+            {isEdit ? (
+              <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" onClick={() => handleUpdateData()}>Save</Button>
+            ):(
+              <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" onClick={() => handleSaveData()}>Save</Button>
+            )}
+            
+          </Stack>
+        </Stack>
+    </Card>
+    </Stack>
   );
 }

frontend/dashboard/src/pages/Corporates/Hospital/History.tsx

@@ -0,0 +1,158 @@
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import { useContext, useEffect, useState } from 'react';
+import { Hospital } from '../../../@types/corporates';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { 
+    Stack,
+    Typography,
+    Card,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Collapse,
+    Box,
+    Tab, 
+} from '@mui/material';
+import axios from '@/utils/axios';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+
+
+export default function HospitalHistory() {
+    const { corporate_id, id } = useParams();
+    const navigate = useNavigate();
+
+    const [corporate, setCorporate] = useState<Corporate|null>();
+    
+    const [ currentHospital, setCurrentHospital ] = useState<Hospital>();
+
+    const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+    useEffect(() => {
+        setCorporate(configuredCorporateContext.currentCorporate);
+        const model = 'App\\Models\\CorporateHospital';    
+        const url = `/audittrail/${id}?model=${model}`;
+        axios.get(url)
+        .then((res) => {
+            setCurrentHospital(res.data);
+        })
+        .catch((error) => {
+            console.error('Terjadi kesalahan:', error);
+        });
+    }, [corporate_id, id, configuredCorporateContext]);
+
+    const [openRows, setOpenRows] = useState({});
+
+    const handleRowToggle = (index) => {
+        setOpenRows((prevOpenRows) => ({
+        ...prevOpenRows,
+        [index]: !prevOpenRows[index],
+        }));
+    };
+
+    return (
+        <Page title="History Hospital">
+        <HeaderBreadcrumbs
+            heading={'History Hospital'}
+            links={[
+                {
+                name: 'Corporates',
+                href: '/corporates',
+                },
+                {
+                name: corporate?.name ?? '-',
+                href: '/corporates/'+corporate_id,
+                },
+                {
+                name: 'Hospital',
+                href: '/corporates/'+corporate_id+'/hospitals',
+                },
+                {
+                name: 'History',
+                href: '/corporates/'+corporate_id+'/hospitals/history',
+                },
+            ]}
+        />
+        <Card>
+            <TableContainer component={Paper}>
+                <Table aria-label="collapsible table">
+                    {/* Condition Table Body */}
+                    {currentHospital?.data.map((item, index) => (
+                        <TableBody key={index}>
+                            <TableRow sx={{backgroundColor: '#919EAB29'}}>
+                                <TableCell align="left" sx={{fontWeight: 'bold', width: '95%'}}><Typography variant="subtitle1">Data has {item.action} by {item.user_id} on {fDateTime(item.updated_at)}</Typography></TableCell>
+                                <TableCell align="left" sx={{width: '5%'}}>
+                                {openRows[index] ? (
+                                    <KeyboardArrowDownIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
+                                ) : (
+                                    <KeyboardArrowRightIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
+                                )}
+                                </TableCell>
+                            </TableRow>
+                            <TableRow sx={{display: openRows[index] ? '' : 'none',}}>
+                                <TableCell colSpan={2}>
+                                    {/* COLLAPSIBLE ROW */}
+                                    <Collapse in={openRows[index]} timeout="auto" unmountOnExit>
+                                        <TableContainer component={Paper}>
+                                            <Table aria-label="collapsible table">
+                                                <TableHead>
+                                                    <TableRow>
+                                                        <TableCell align="left">
+                                                            <Typography sx={{width: '25%'}} variant="subtitle2">Field</Typography>
+                                                        </TableCell>
+                                                        <TableCell align="left">
+                                                            <Typography sx={{width: '25%'}} variant="subtitle2">Old Value</Typography>
+                                                        </TableCell>
+                                                        <TableCell align="left">
+                                                            <Typography sx={{width: '50%'}} variant="subtitle2">New Value</Typography>
+                                                        </TableCell>
+                                                    </TableRow>
+                                                </TableHead>
+                                                <TableBody>
+                                                {Object.entries(item.old_values).map(([key, value]) => {
+                                                    let renderedValue;
+                                                    if (key === 'code' || key === 'name') {
+                                                        renderedValue = item.new_values[key];    
+                                                        const field = key.charAt(0).toUpperCase() + key.slice(1);
+                                                        return (
+                                                            <TableRow key={key}>
+                                                                <TableCell align="left">
+                                                                    <Typography variant="body2">{field ? field : '-'}</Typography>
+                                                                </TableCell>
+                                                                <TableCell align="left">
+                                                                    <Typography variant="body2">{value ? value : '-'}</Typography>
+                                                                </TableCell>
+                                                                <TableCell align="left">
+                                                                    <Typography variant="body2">{renderedValue ? renderedValue : ''}</Typography>
+                                                                </TableCell>
+                                                            </TableRow>
+                                                        );
+                                                    }
+                                                    else
+                                                    {
+                                                        return null;
+                                                    }
+                                                    })}
+                                                </TableBody>
+                                            </Table>
+                                        </TableContainer>
+                                    </Collapse>
+                                </TableCell>
+                            </TableRow>
+                        </TableBody>
+                    ))}
+                </Table>    
+            </TableContainer>
+        </Card>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/Corporates/Hospital/Index.tsx

@@ -1,32 +1,33 @@
-import { Card, Grid, Typography } from '@mui/material';
-import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from '../../../components/Page';
-import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from './List';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { Card } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import List from "./List";
 
-import { useContext, useEffect, useState } from 'react';
-import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
-import { Corporate } from '@/@types/corporates';
 
-export default function Divisions() {
-  const { themeStretch } = useSettings();
+
+export default function hospitals() {
 
   const { corporate_id } = useParams();
-
-  const [corporate, setCorporate] = useState<Corporate | null>();
+  
+  const [corporate, setCorporate] = useState<Corporate|null>();
 
   const configuredCorporateContext = useContext(ConfiguredCorporateContext);
 
   useEffect(() => {
     setCorporate(configuredCorporateContext.currentCorporate);
-  }, [configuredCorporateContext]);
+  }, [configuredCorporateContext])
 
   return (
-    <Page title="Hospitals">
+    <Page title="Hospital">
+
       <HeaderBreadcrumbs
-        heading={'Hospitals'}
+        heading={'Hospital'}
         links={[
           {
             name: 'Corporates',
@@ -37,7 +38,7 @@ export default function Divisions() {
             href: '/corporates/' + corporate_id,
           },
           {
-            name: 'Hospitals',
+            name: 'Hospital',
             href: '/corporates/' + corporate_id + '/hospitals',
           },
         ]}
@@ -45,7 +46,7 @@ export default function Divisions() {
 
       <Card>
         <CorporateTabNavigations position={'hospitals'} />
-        <Typography sx={{ m: 4 }}>Feature Not Implemented Yet</Typography>
+        <List />
       </Card>
     </Page>
   );

frontend/dashboard/src/pages/Corporates/Hospital/List.tsx

@@ -1,124 +1,158 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import {
+  Button,
+  Card,
+  IconButton,
+  MenuItem,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  Collapse,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+  FormHelperText,
+} from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
-import useSettings from '../../../hooks/useSettings';
-import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { CorporatePlan } from '../../../@types/corporates';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import BasePagination from '../../../components/BasePagination';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import HistoryIcon from '@mui/icons-material/History';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { enqueueSnackbar } from 'notistack';
+import Label from '../../../components/Label';
 
 export default function PlanList() {
-  const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  
+
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  {
-      // console.log('Search Input: useEffect')
+    useEffect(() => {
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
       </form>
     );
   }
 
   // Called on every row to map the data to the columns
-  function createData( plan: CorporatePlan ): CorporatePlan {
+  function createData(plan: CorporatePlan): CorporatePlan {
     return {
       ...plan,
-    }
+    };
   }
 
   // Generate the every row of the table
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
+    const style1 = {
+      color: '#637381'
+    }
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
+        <TableRow sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
+          <TableCell align="left">{row.code ? row.code : '-'}</TableCell>
+          <TableCell align="left">{row.name ? row.name : '-'}</TableCell>
+          <TableCell align="left">
+            {row.active === 1 ? (
+              <Label color='success' >
+                Active
+              </Label>
+            ) : ( 
+              <Label color='error'>
+                Inactive
+              </Label>
+            )}
+            </TableCell>
+          <TableCell align="left">
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => setOpen(!open)}>
+                  <FindInPageOutlinedIcon />
+                  Details
+                </MenuItem>
+                <MenuItem onClick={() => handleEditData(row)}>
+                  <EditOutlinedIcon />
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={() => handleEditDataStatus(row)}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </MenuItem>
+                <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/hospitals/'+row.id+'/history')}>
+                  <HistoryIcon />
+                  History
+                </MenuItem>
+              </>
+              }
+            />
           </TableCell>
-          <TableCell align="left">{row.id}</TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.description}</TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
+        <TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
+          <TableCell colSpan={4}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Typography variant="body2" gutterBottom component="div">
-                  No Extra Data
-                </Typography>
-              </Box>
-            {false && <Box sx={{ margin: 1 }}>
-                <Typography variant="h6" gutterBottom component="div">
-                  Rules
-                </Typography>
-                <Table size="small" aria-label="purchases">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Date</TableCell>
-                      <TableCell>Customer</TableCell>
-                      <TableCell align="right">Amount</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {/* {row.history ? row.history.map((historyRow) => ( */}
-                      <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
-                        <TableCell>{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                      </TableRow>
-                    {/* ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    } */}
-                  </TableBody>
-                </Table>
-              </Box>}
+              <Card sx={{padding:2}}>
+                <Box sx={{ pb: 2 }}>
+                  <Typography variant='subtitle1'>Detail</Typography>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '50%'}}>Code:</Typography>
+                      <Typography variant='body2' sx={{width: '50%'}}>{row.code ? row.code : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '50%'}}>Hospital Name:</Typography>
+                      <Typography variant='body2' sx={{width: '50%'}}>{row.name ? row.name : '-'}</Typography>
+                    </Stack>
+                  </Stack>
+                </Box>
+              </Card>
             </Collapse>
           </TableCell>
         </TableRow>
@@ -131,104 +165,230 @@ export default function PlanList() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
-    first_page_url: "",
+    path: '',
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+corporate_id+'/divisions', { params: filter });
-    // console.log(response.data);
+    // Get Data Hospitals
+    const response = await axios.get('/corporates/' + corporate_id + '/hospitals', {
+      params: filter,
+    });
     setDataTableLoading(false);
-
     setDataTableData(response.data);
-  }
-
-  const headStyle = {
-    fontWeight: 'bold',
   };
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
-    setSearchParams({ "search" : searchFilter });
-  }
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
-
+  };
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
+
+  //validation dialog
+  const [nameField, setNameField] = useState('');
+  const [codeField, setCodeField] = useState('');
+  // ID for edit data
+  const [idField, setIdField] = useState('');
+
+  const handleAddData = () => {
+    navigate('/corporates/'+corporate_id+'/hospitals/create');
+  }
+  //Edit data
+  const handleEditData = (data : any) => {
+    navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);  
+  }
+  // End dialog for hospitals
+
+  // Dialog for update status hospitals
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
+  const [activeField, setActiveField] = useState(0);
+  const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
+
+  const handleCloseDialogUpdate = () => {
+    setOpenDialogStatus(false);
+    setNameField('');
+    setCodeField('');
+    setIdField('');
+    setActiveField(activeField);
+  }
+
+  const handleSaveUpdateData = () => {
+    let activeValue = 0;
+    if(activeField === 1)
+    {
+      activeValue = 0;
+    }
+    else
+    {
+      activeValue = 1;
+    }
+    const updateData = {
+      reason: reasonUpdate,
+      active : activeValue,
+      id: idField,
+    };
+    axios
+      .put('/hospitals/'+idField+'/activation', updateData)
+      .then((response) => {
+        enqueueSnackbar('Data updated successfully', { variant: 'success' });
+        loadDataTableData();
+        handleCloseDialogUpdate();
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+  }
+
+  const handleEditDataStatus = (data: any) => {
+    setIdField(data.id);
+    setNameField(data.name);
+    setCodeField(data.code);
+    setActiveField(data.active);
+    setOpenDialogStatus(true);    
+  }
+  // End dialog for update status devisions
+
   
+
   return (
     <Stack>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-          <SearchInput onSearch={applyFilter}/>
-          <Link to={`/corporates/${corporate_id}/divisions/create`}>
-            <Button
-              component="button"
-              id="upload-button"
-              variant='outlined'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
-            >
-              Create
-            </Button>
-          </Link>
-        </Stack>
-
-        <Card>
+      <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+        <SearchInput onSearch={applyFilter} />
+        <Button
+          component="button"
+          id="upload-button"
+          startIcon={<AddIcon />}
+          sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
+          onClick={handleAddData}
+        >
+          Create
+        </Button>
+      </Stack>
+      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            {/* Table Head */}
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
-                <TableCell style={headStyle} align="left">ID</TableCell>
-                <TableCell style={headStyle} align="left">Code</TableCell>
-                <TableCell style={headStyle} align="left">Name</TableCell>
-                <TableCell style={headStyle} align="left">Description</TableCell>
+                <TableCell sx={{width: '20%'}} align="left">
+                  <Typography variant='subtitle2'>Code</Typography>
+                </TableCell>
+                <TableCell sx={{width: '50%'}} align="left">
+                  <Typography variant='subtitle2'>Hospital</Typography>
+                </TableCell>
+                <TableCell sx={{width: '20%'}} align="left">
+                  <Typography variant='subtitle2'>Status</Typography>
+                </TableCell>
+                <TableCell sx={{width: '10%'}} align="left">
+                </TableCell>
               </TableRow>
-            </TableBody>
-            {dataTableIsLoading ?
-              (
-                <TableBody>
-                  <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
-                  </TableRow>
-                </TableBody>
-              ) : (
-                dataTableData.data.length == 0 ? 
-                (
-                  <TableBody>
-                    <TableRow>
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
-                    </TableRow>
-                  </TableBody>
-                ) : (
-                  <TableBody>
-                    {dataTableData.data.map(row => (
-                      <Row key={row.code} row={row} />
-                    ))}
-                  </TableBody>
-                )
+            </TableHead>
+            {/* Condition Table Body */}
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={4} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length == 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={4} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
             )}
           </Table>
         </TableContainer>
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
+        {/* Paginations */}
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+      {/* Dialog Update Status */}
+      <Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} 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">Update Status</Typography>
+              </Stack>
+              <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                <CloseIcon />
+              </IconButton>
+          </Stack>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this hospital ?</Typography>
+            <Card sx={{padding:2}}  >
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
+              </Stack>
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Hospital Name</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
+              </Stack>
+            </Card>
+          </Stack>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='subtitle1'>Reason for update*</Typography>
+            <FormControl>
+              <InputLabel htmlFor="reason" required>
+                Reason for update
+              </InputLabel>
+              <Select
+                id="reason"
+                value={reasonUpdate}
+                fullWidth
+                label="Reason for update"
+                onChange={(e) => {
+                  setReasonUpdate(e.target.value);
+                }}
+                
+              >
+                <MenuItem value="Agreement changed">Agreement changed</MenuItem>
+                <MenuItem value="Endorsement">Endorsement</MenuItem>
+                <MenuItem value="Renewal">Renewal</MenuItem>
+                <MenuItem value="Worng Setting">Worng Setting</MenuItem>
+              </Select>
+              <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </FormControl>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+          <Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
+        </DialogActions>
+      </Dialog>
+
     </Stack>
   );
-}
+}

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

@@ -297,7 +297,7 @@ export default function Corporates() {
               Import
             </Button> */}
           <Link to={'/corporates/create'}>
-            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2', backgroundColor: '#19BBBB'  }}>
+            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2' }}> 
               New Corporate
             </Button>
           </Link>

frontend/dashboard/src/pages/Corporates/Member/History.tsx

@@ -0,0 +1,166 @@
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import { useContext, useEffect, useState } from 'react';
+import { Member } from '../../../@types/corporates';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { 
+    Stack,
+    Typography,
+    Card,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Collapse,
+    Box,
+    Tab, 
+} from '@mui/material';
+import axios from '@/utils/axios';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+
+
+export default function MemberHistory() {
+    const { corporate_id, member_id } = useParams();
+    const navigate = useNavigate();
+
+    const [corporate, setCorporate] = useState<Corporate|null>();
+    
+    const [ currentMember, setCurrentMember ] = useState<Member>();
+
+    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) => {
+            setCurrentMember(res.data);
+        })
+        .catch((error) => {
+            console.error('Terjadi kesalahan:', error);
+        });
+    }, [corporate_id, member_id, configuredCorporateContext]);
+
+    const [openRows, setOpenRows] = useState({});
+
+    const handleRowToggle = (index) => {
+        setOpenRows((prevOpenRows) => ({
+        ...prevOpenRows,
+        [index]: !prevOpenRows[index],
+        }));
+    };
+
+    return (
+        <Page title="History Member">
+        <HeaderBreadcrumbs
+            heading={'History Member'}
+            links={[
+                {
+                name: 'Corporates',
+                href: '/corporates',
+                },
+                {
+                name: corporate?.name ?? '-',
+                href: '/corporates/'+corporate_id,
+                },
+                {
+                name: 'Member',
+                href: '/corporates/'+corporate_id+'/members',
+                },
+                {
+                name: 'History',
+                href: '/corporates/'+corporate_id+'/members/history',
+                },
+            ]}
+        />
+        <Card>
+            <TableContainer component={Paper}>
+                <Table aria-label="collapsible table">
+                    {/* Condition Table Body */}
+                    {currentMember?.data.map((item, index) => (
+                        <TableBody key={index}>
+                            <TableRow sx={{backgroundColor: '#919EAB29'}}>
+                                <TableCell align="left" sx={{fontWeight: 'bold', width: '95%'}}><Typography variant="subtitle1">Data has {item.action} by {item.user_id} on {fDateTime(item.updated_at)}</Typography></TableCell>
+                                <TableCell align="left" sx={{width: '5%'}}>
+                                {openRows[index] ? (
+                                    <KeyboardArrowDownIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
+                                ) : (
+                                    <KeyboardArrowRightIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
+                                )}
+                                </TableCell>
+                            </TableRow>
+                            <TableRow sx={{display: openRows[index] ? '' : 'none',}}>
+                                <TableCell colSpan={2}>
+                                    {/* COLLAPSIBLE ROW */}
+                                    <Collapse in={openRows[index]} timeout="auto" unmountOnExit>
+                                        <TableContainer component={Paper}>
+                                            <Table aria-label="collapsible table">
+                                                <TableHead>
+                                                    <TableRow>
+                                                        <TableCell align="left">
+                                                            <Typography sx={{width: '25%'}} variant="subtitle2">Field</Typography>
+                                                        </TableCell>
+                                                        <TableCell align="left">
+                                                            <Typography sx={{width: '25%'}} variant="subtitle2">Old Value</Typography>
+                                                        </TableCell>
+                                                        <TableCell align="left">
+                                                            <Typography sx={{width: '50%'}} variant="subtitle2">New Value</Typography>
+                                                        </TableCell>
+                                                    </TableRow>
+                                                </TableHead>
+                                                <TableBody>
+                                                {Object.entries(item.old_values).map(([key, value]) => {
+                                                    let renderedValue;
+                                                    if (key === 'reason' || key === 'updated_at') {
+                                                        switch (key) {
+                                                            case 'updated_at':
+                                                                renderedValue = fDateTime(item.new_values[key]);
+                                                                value = fDateTime(value);
+                                                                break;
+                                                            default:
+                                                                renderedValue = item.new_values[key];
+                                                                break;
+                                                        }
+                                                        const field = key.charAt(0).toUpperCase() + key.slice(1);
+    
+                                                        return (
+                                                            <TableRow key={key}>
+                                                                <TableCell align="left">
+                                                                    <Typography variant="body2">{field ? field : '-'}</Typography>
+                                                                </TableCell>
+                                                                <TableCell align="left">
+                                                                    <Typography variant="body2">{value ? value : '-'}</Typography>
+                                                                </TableCell>
+                                                                <TableCell align="left">
+                                                                    <Typography variant="body2">{renderedValue ? renderedValue : ''}</Typography>
+                                                                </TableCell>
+                                                            </TableRow>
+                                                        );
+                                                    }
+                                                    else{
+                                                        return null;
+                                                    }
+                                                    })}
+                                                </TableBody>
+                                            </Table>
+                                        </TableContainer>
+                                    </Collapse>
+                                </TableCell>
+                            </TableRow>
+                        </TableBody>
+                    ))}
+                </Table>    
+            </TableContainer>
+        </Card>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/Corporates/Member/List.tsx

@@ -29,6 +29,9 @@ import {
   Grid,
   Tooltip,
   Divider,
+  ButtonBase,
+  FormControl,
+  FormHelperText,
 } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -40,7 +43,7 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import {Link, useParams, useSearchParams } from 'react-router-dom';
+import {Link, useParams, useNavigate, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { Plan } from '../../../@types/corporates';
@@ -52,8 +55,15 @@ import { LoadingButton } from '@mui/lab';
 import DialogLog from './sections/DialogLog';
 import HistoryIcon from '@mui/icons-material/History';
 import { makeFormData } from '@/utils/jsonToFormData';
+import DownloadIcon from '@mui/icons-material/Download';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 
 export default function CorporatePlanList({handleSubmitSuccess}) {
+  const navigate = useNavigate();
   // Files MCU
   const fileMcuInput = useRef<HTMLInputElement>(null);
   const [fileMcus, setFileMcus] = useState([]);
@@ -196,17 +206,17 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
             setTimeout(() => {
               loadDataTableData();
             }, 2000);
-            enqueueSnackbar(responseData.message ?? 'Berhasil tambah file MemberID '+member_id+', silahkan lihat dilaporan', { variant: 'success' });
+            enqueueSnackbar(responseData.message ?? 'Berhasil tambah file Member ID '+member_id+', silahkan lihat dilaporan', { variant: 'success' });
             handleSubmitSuccess();
           }
           
         })
         .catch(({ response }) => {
           const responseData = response?.data;
-         if(responseData)
-         {
-           enqueueSnackbar(responseData.message ?? 'Something Went Wrong', { variant: 'error' });
-         }
+          if(responseData)
+          {
+            enqueueSnackbar(responseData.message ?? 'Something Went Wrong', { variant: 'error' });
+          }
         })
         .then(() => {
           setSubmitLoading(false);
@@ -319,12 +329,10 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
         {!currentImportFileName && (
           <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
             <SearchInput onSearch={applyFilter} />
-            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
             <Button
               id="import-button"
-              variant="outlined"
-              startIcon={<AddIcon />}
-              sx={{ p: 1.8 }}
+              startIcon={<DownloadIcon />}
+              sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
               aria-controls={createMenu ? 'basic-menu' : undefined}
               aria-haspopup="true"
               aria-expanded={createMenu ? 'true' : undefined}
@@ -341,15 +349,19 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
                 'aria-labelledby': 'basic-button',
               }}
             >
-              <MenuItem onClick={handleImportButton}>Import</MenuItem>
+              <MenuItem onClick={handleImportButton}>
+                <Typography variant='body2'>Import</Typography>
+              </MenuItem>
               <MenuItem
                 onClick={() => {
                   handleGetTemplate('member');
                 }}
               >
-                Download Template
+                <Typography variant='body2'> Download Template</Typography>
+              </MenuItem>
+              <MenuItem onClick={handleMemberList}>
+                <Typography variant='body2'>Download Member</Typography>
               </MenuItem>
-              <MenuItem onClick={handleMemberList}>Download Member</MenuItem>
             </Menu>
           </Stack>
         )}
@@ -412,17 +424,12 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
   }
 
   const [columns, setColumns] = React.useState([
-    { id: 'member_id', label: 'MemberID', minWidth: 100, align: 'left' },
-    // { id: 'principal_id', label: 'Mapping ID', minWidth: 100, align: 'left' },
-    // { id: 'nik', label: 'NIK', minWidth: 100, align: 'left' },
-    // { id: 'current_policy.policy_number', label: 'Policy Number', minWidth: 100, align: 'left' },
-    { id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left' },
-    { id: 'name', label: 'Name', minWidth: 100, align: 'left' },
-    // { id: 'nric', label: 'NRIC', minWidth: 100, align: 'left' },
-    // { id: 'email', label: 'E-mail', minWidth: 100, align: 'left' },
-    { id: 'plan_id', label: 'PlanID', minWidth: 100, align: 'left' },
-    { id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left' },
-    { id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left' },
+    { id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '10%' },
+    { id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'name', label: 'Name', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'plan_id', label: 'Plan ID', minWidth: 100, align: 'left', width: '10%' },
+    { id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '20%' },
   ]);
 
   // Generate the every row of the table
@@ -432,17 +439,9 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
     const [loadingLog, setLoadingLog] = React.useState(false);
     const [dialogLogOpen, setDialogLogOpen] = React.useState(false);
 
-    // useEffect(function () {
-    //   if (row.full_name == 'Pajri') {
-    //     setDialogLogOpen(true);
-    //     console.log('fuck');
-    //   }
-    // }, []);
-
     const handleActivate = (model: any, status: string) => {
       axios
         .put(`/members/${row.id}/activation`, {
-          // service_code: service.service_code,
           active: status == 'active',
         })
         .then((res) => {
@@ -458,284 +457,203 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
           });
         })
         .catch((error) => {
-          // console.log('asdasd', error.response.data.message)
           enqueueSnackbar(
             error.response.data.message ?? error.message ?? 'Failed Processing Request',
             { variant: 'error' }
           );
         });
     };
+
+    const style1 = {
+      color: '#637381'
+    }
     
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
+        <TableRow key={row.id || index} sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.member_id ? row.member_id : '-'}</Typography>
           </TableCell>
-
-          <TableCell align="left">{row.member_id}</TableCell>
-          <TableCell align="left">{row.members_effective_date}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.current_plan?.code}</TableCell>
-          <TableCell align="left">{row.activation_date}</TableCell>
-          <TableCell align="left">{row.terminated_date}</TableCell>
-          <TableCell align="center">
-            {row.active == 1 && (
-              <Button
-                variant="outlined"
-                color="success"
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'inactive');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
-                }}
-              >
-                Active
-              </Button>
-            )}
-            {row.active != 1 && (
-              <Button
-                variant="outlined"
-                color="error"
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'active');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
-                }}
-              >
-                Inactive
-              </Button>
-            )}
+          <TableCell align="left">
+            <Typography variant='body2'>{row.members_effective_date ? row.members_effective_date : '-'}</Typography>
           </TableCell>
-          <TableCell align="right">
-            <Tooltip title="History">
-              <Link to={`/corporate/${corporate_id}/members/${row.id}/history`}>
-                <HistoryIcon />
-              </Link>
-            </Tooltip>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.name ? row.name : '-'}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.current_plan?.code}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.activation_date ? row.activation_date : '-'}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.terminated_date ? row.terminated_date : '-'}</Typography>
+          </TableCell>
+          <TableCell align='left'>
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => setOpen(!open)}>
+                  <FindInPageOutlinedIcon />
+                  Details
+                </MenuItem>
+                <MenuItem onClick={() => handleEditDataStatus(row)}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </MenuItem>
+                <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/members/'+row.id+'/history')}>
+                  <HistoryIcon />
+                  History
+                </MenuItem>
+              </>
+              }
+            />
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell />
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
+        <TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
+          <TableCell colSpan={8}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ pb: 2 }}>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>Detail</Typography>
-                <Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Mapping ID
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.principal_id ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Policy Number
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.current_policy?.code ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        NRIC
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.nric ?? '-'}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        NIK
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.employeds[0]?.nik ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Email
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.email ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Phone
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.person?.phone ?? '-'}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Birth Date
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.birth_date ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Gender
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.gender ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Marital Status
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.marital_status ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Language
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.language ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Race
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.race ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Relationship
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.relation_with_principal ?? '-'}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>Claim History</Typography>
-                <Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Requested
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.requested}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Pending
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.received}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Approved
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.approved}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Declined
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.declined}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Paid
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.paid}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>File History</Typography>
-                <Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
-                  <Grid item xs={12}>
-                    <Grid container>
-                      <Grid item xs={12}>
-                        {row.file_mcu_names
-                          ? row.file_mcu_names.split(',').map((fileName, index) => (
-                              <div key={index}>{fileName}</div>
-                            ))
-                          : '-'}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-
-                <Grid spacing={1}>
-                    <Stack sx={{ marginTop: 1}}>
-                      <LoadingButton
-                        id="upload-button"
-                        variant="outlined"
-                        startIcon={<InsertDriveFileIcon />}
-                        // sx={{ p: 1.8 }}
-                        // onClick={() => {handleDownloadLog(row)}}
-                        onClick={() => {
-                          setDialogLogOpen(true);
-                        }}
-                        loading={loadingLog}
-                      >
-                        Download LOG
-                      </LoadingButton>
+              <Card sx={{padding:2}}>
+                <Box sx={{ pb: 2 }}>
+                  <Typography variant='subtitle1'>Detail</Typography>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Mapping ID:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.principal_id ? row.principal_id : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Birth Date:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.birth_date ? row.birth_date : '-'}</Typography>
                     </Stack>
-                    {/* -------------------------------Upload Dokumen MCU------------------------------- */}
-                    <Stack sx={{ marginTop: 1}}>
-                      {/*<Stack
-                        divider={<Divider orientation="horizontal" flexItem />}
-                        spacing={1}
-                        sx={{ marginY: 2}}
-                      >
-                        {fileMcus &&
-                          fileMcus
-                          .filter((datas) => datas.id === row.id)
-                          .map((datas, index) => (
-                            <Stack direction="row" justifyContent={'space-between'} key={index}>
-                              <Typography sx={{ color: "text.secondary" }}>{datas.file.name}</Typography>
-                              <Iconify
-                                icon="eva:trash-2-outline"
-                                color={'darkred'}
-                                onClick={() => {
-                                  removeMcuFiles(datas.id, index);
-                                }}
-                                sx={{ cursor: 'pointer' }}
-                              ></Iconify>
-                            </Stack>
-                          ))}
-                      </Stack>*/}
-                      <input
-                        type="file"
-                        id={`file-${row.id}`}
-                        ref={fileMcuInput}
-                        style={{ display: 'none' }}
-                        onChange={(event) => {
-                          handleMcuInputChange(row.id, row.member_id)(event);
-                        }}
-                        accept="application/pdf"
-                      />
-                      <LoadingButton
-                        variant="outlined"
-                        onClick={() => {
-                          fileMcuInput.current.click();
-                        }}
-                      >
-                        <Iconify icon="eva:plus-fill" />
-                        Add Result
-                      </LoadingButton>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Policy Number:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.current_policy?.code ? row.current_policy?.code : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Gender:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.gender ? row.gender : '-'}</Typography>
                     </Stack>
-                </Grid>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>NRIC:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.nric ? row.nric : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Marital Status:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.marital_status ? row.marital_status : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>NIK:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.employeds[0]?.nik ? row.employeds[0]?.nik : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Language:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.language ? row.language : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Email:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.email ? row.email : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Race:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.race ? row.race : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Phone Number:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.person?.phone ? row.person?.phone : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Relationship:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.relation_with_principal ? row.relation_with_principal : '-'}</Typography>
+                    </Stack>
+                  </Stack>
+                  <Typography variant='subtitle1' marginTop={2}>Claim History</Typography>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Requested:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.requested ? row.total_claims?.requested : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Pending:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.received ? row.total_claims?.received : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Approved:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.approved ? row.total_claims?.approved : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Declined:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.declined ? row.total_claims?.declined : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Paid:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.paid ? row.total_claims?.paid : '-'}</Typography>
+                    </Stack>
+                  </Stack>
+                  <Typography variant='subtitle1' marginTop={2}>Files History</Typography>
+                  <Stack marginTop={2}>
+                    
+                    {row.file_mcu_names
+                    ? row.file_mcu_names.split(',').map((fileName, index) => (
+                        <>
+                          <Stack direction='row' spacing={1} alignItems='center'>
+                            <InsertDriveFileIcon />
+                            <Typography key={index} variant='body2' sx={{width: '100%'}}>{fileName}</Typography>
+                          </Stack>
+                        </>
+                      ))
+                    : '-'}
+                  </Stack>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1} alignItems='center'>
+                      <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                          bgcolor: '#919EAB52',
+                          borderRadius: '8px',
+                          width: '100%', height: '60px'}} onClick={() => fileMcuInput.current?.click()}>
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              placeItems: 'center',
+                              gap: 1,
+                              placeContent: 'center',
+                              
+
+                            }}
+                          >
+                            <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+                            <Typography variant="body1" fontWeight="bold">
+                              Upload Result
+                            </Typography>
+                          </Box>
+                          <input
+                            type="file"
+                            id={`file-${row.id}`}
+                            ref={fileMcuInput}
+                            style={{ display: 'none' }}
+                            onChange={(event) => {
+                              handleMcuInputChange(row.id, row.member_id)(event);
+                            }}
+                            accept="application/pdf"
+                          />
+                      </ButtonBase>
+                    </Stack>
+                  </Stack>
+                </Box>
+              </Card>
+              <Stack marginTop={2}>
+                <Stack direction='row' alignItems='center' spacing={1} justifyContent="flex-end">
+                  <LoadingButton
+                    id="upload-button"
+                    sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '158px', height: '48px' }}
+                    startIcon={<DownloadIcon />}
+                    // sx={{ p: 1.8 }}
+                    // onClick={() => {handleDownloadLog(row)}}
+                    onClick={() => {
+                      setDialogLogOpen(true);
+                    }}
+                    loading={loadingLog}
+                  >
+                    Download LOG
+                  </LoadingButton>
+                </Stack>
+              </Stack>
+
+              <DialogLog
+                title={{
+                  name: `Generate LOG - ${row.full_name}`,
+                }}
+                openDialog={dialogLogOpen}
+                setOpenDialog={setDialogLogOpen}
+                data={{ member: row }}
+              ></DialogLog>
 
-                <DialogLog
-                  title={{
-                    name: `Generate LOG - ${row.full_name}`,
-                  }}
-                  openDialog={dialogLogOpen}
-                  setOpenDialog={setDialogLogOpen}
-                  data={{ member: row }}
-                ></DialogLog>
-              </Box>
             </Collapse>
           </TableCell>
         </TableRow>
@@ -746,33 +664,73 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
   const headStyle = {
     fontWeight: 'bold',
   };
+  const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
+  const [nameUpdate, setNameUpdate] = useState('');
+  const [memberIdUpdate, setMemberIdUpdate] = useState('');
+  const [activeUpdate, setActiveUpdate] = useState(0);
+  const [idUpdate, setIdUpdate] = useState('');
+
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
+
+  const handleCloseDialogUpdate = () => {
+    setNameUpdate('');
+    setMemberIdUpdate('');
+    setActiveUpdate(activeUpdate);
+    setIdUpdate('');
+    setOpenDialogStatus(false);
+  }
+
+  const handleSaveUpdateData = () => {
+    let activeValue = 0;
+    if(activeUpdate === 1)
+    {
+      activeValue = 0;
+    }
+    else
+    {
+      activeValue = 1;
+    }
+    const updateData = {
+      reason: reasonUpdate,
+      active : activeValue,
+      id: idUpdate,
+    };
+    axios
+      .put('/members/'+idUpdate+'/activation', updateData)
+      .then((response) => {
+        enqueueSnackbar('Data updated successfully', { variant: 'success' });
+        loadDataTableData();
+        handleCloseDialogUpdate();
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+  }
+
+  const handleEditDataStatus = (data:any) => {
+    setNameUpdate(data.name);
+    setMemberIdUpdate(data.member_id);
+    setActiveUpdate(data.active);
+    setIdUpdate(data.id);
+    setOpenDialogStatus(true);    
+  }
   return (
     <Stack>
       <ImportForm />
-
       <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
                 {columns.map((column, index) => (
-                  <TableCell style={headStyle} key={index} align={column.align}>
-                    {column.label}
+                  <TableCell style={{ minWidth: column.minWidth, width: column.width }} key={index} align={column.align}>
+                    <Typography variant='subtitle2'>{column.label}</Typography>
                   </TableCell>
                 ))}
-                <TableCell style={headStyle} align="center">
-                  Status
-                </TableCell>
-                <TableCell style={headStyle} align="center">
-                  Action
-                </TableCell>
-                {/* <TableCell style={headStyle} align="center">
-                  Action
-                </TableCell> */}
+                <TableCell align="center"></TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>
@@ -801,6 +759,62 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
 
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
       </Card>
+      {/* Dialog Update Status */}
+      <Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} 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">Update Status</Typography>
+              </Stack>
+              <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                <CloseIcon />
+              </IconButton>
+          </Stack>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='body1'>Are you sure to {activeUpdate == 1 ? 'Inactive' : 'Active'} this member ?</Typography>
+            <Card sx={{padding:2}}  >
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Member ID</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{memberIdUpdate}</Typography>
+              </Stack>
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{nameUpdate}</Typography>
+              </Stack>
+            </Card>
+          </Stack>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='subtitle1'>Reason for update*</Typography>
+            <FormControl>
+              <InputLabel htmlFor="reason" required>
+                Reason for update
+              </InputLabel>
+              <Select
+                id="reason"
+                value={reasonUpdate}
+                fullWidth
+                label="Reason for update"
+                onChange={(e) => {
+                  setReasonUpdate(e.target.value);
+                }}
+                
+              >
+                <MenuItem value="Agreement changed">Agreement changed</MenuItem>
+                <MenuItem value="Endorsement">Endorsement</MenuItem>
+                <MenuItem value="Renewal">Renewal</MenuItem>
+                <MenuItem value="Worng Setting">Worng Setting</MenuItem>
+              </Select>
+              <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </FormControl>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+          <Button sx={{backgroundColor: activeUpdate == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeUpdate == 1 ? 'Inactive' : 'Active'}</Button>
+        </DialogActions>
+      </Dialog>
       {isDialog === 'edit' && (
         <DialogLog
           data={edit}

frontend/dashboard/src/pages/Corporates/Member/sections/DialogLog.tsx

@@ -76,6 +76,8 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
   
   const { id, service_code, status } = data;
 
+  const [memberId, setMemberId] = useState(data.member.id);
+
   const isEdit = id ? true : false;
 
   const NewCorporateSchema = Yup.object().shape({
@@ -103,10 +105,11 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
   // const { plan_id } = useParams();
   const handleActivate = (model: any, status: string) => {
     axios
-      .put(`/members/${id}/activation`, {
+      .put(`/members/${memberId}/activation`, {
         // service_code: service.service_code,
         active: status == 'active',
-        reason: model.reason
+        reason: model.reason,
+        id: memberId,
       })
       .then((res) => {
         // Memuat ulang halaman saat ini
@@ -133,7 +136,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
       const data = {
         service_code : service_code,
         reason : row.reason,
-        id : id,
+        id : memberId,
       }
       handleActivate(data, status)  
     } catch (error: any) {
@@ -157,18 +160,18 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
       <Stack spacing={3}>
         <Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
           <Grid item xs={12}>
+          <Typography variant='subtitle1' sx={{marginBottom: 2}}>Reason for update*</Typography>
           <RHFSelect
-                  name="reason"
-                  label="Reason for update"
-                >
-              <option value=""></option>
-              <option value="Agreement changed">Agreement changed</option>
-              <option value="Endorsement">Endorsement</option>
-              <option value="Renewal">Renewal</option>
-              <option value="Worng Setting">Worng Setting</option>
-            </RHFSelect>
+                name="reason"
+                label="Reason for update"
+              >
+            <option value=""></option>
+            <option value="Agreement changed">Agreement changed</option>
+            <option value="Endorsement">Endorsement</option>
+            <option value="Renewal">Renewal</option>
+            <option value="Worng Setting">Worng Setting</option>
+          </RHFSelect>
           </Grid>
-
           <Box sx={{ pt: 5 }}>
             <Stack
               alignItems="center"
@@ -181,6 +184,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
                 <Button
                   sx={{
                     boxShadow: 'none',
+                    color: '#212B36'
                   }}
                   variant="outlined"
                   size="medium"
@@ -190,7 +194,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
                   Cancel
                 </Button>
                 <LoadingButton
-                  sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
+                  sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', backgroundColor: '#19BBBB' }}
                   type="submit"
                   variant="contained"
                   size="medium"

frontend/dashboard/src/pages/Corporates/Plan/List.tsx

@@ -81,6 +81,19 @@ export default function CorporatePlanList() {
     }
   };
 
+  // filter
+  const defaultValue = [
+    {
+      value: '-',
+      label: '-'
+    }
+  ];
+
+  const [serviceCode, setServiceCode] = useState(defaultValue);
+  const [type, setType] = useState(defaultValue);
+  const [code, setCode] = useState(defaultValue);
+  const [codePlan, setCodePlan] = useState(defaultValue);
+
   function SearchInput(props: any) {
     // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
@@ -227,16 +240,7 @@ export default function CorporatePlanList() {
               <Grid item xs={2}>
                 <Autocomplete
                   id="combo-box-demo"
-                  options={[
-                    {
-                      value: 'IP',
-                      label: 'Inpatient'
-                    },
-                    {
-                      value: 'OP',
-                      label: 'Outpatient'
-                    },
-                  ]}
+                  options={serviceCode}
                   multiple
                   limitTags={1}
                   fullWidth
@@ -252,16 +256,7 @@ export default function CorporatePlanList() {
               <Grid item xs={1.5}>
                 <Autocomplete
                     id="combo-box-demo"
-                    options={[
-                      {
-                        value: 'IP',
-                        label: 'IP-001'
-                      },
-                      {
-                        value: 'OP',
-                        label: 'OP-001'
-                      },
-                    ]}
+                    options={codePlan}
                     multiple
                     limitTags={1}
                     fullWidth
@@ -277,16 +272,7 @@ export default function CorporatePlanList() {
               <Grid item xs={1.5}>
                 <Autocomplete
                   id="combo-box-demo"
-                  options={[
-                    {
-                      value: 'IP',
-                      label: 'IP-001'
-                    },
-                    {
-                      value: 'OP',
-                      label: 'OP-001'
-                    },
-                  ]}
+                  options={code}
                   multiple
                   limitTags={1}
                   fullWidth
@@ -302,16 +288,7 @@ export default function CorporatePlanList() {
               <Grid item xs={1.5}>
                 <Autocomplete
                     id="combo-box-demo"
-                    options={[
-                      {
-                        value: 'IP',
-                        label: 'IP-001'
-                      },
-                      {
-                        value: 'OP',
-                        label: 'OP-001'
-                      },
-                    ]}
+                    options={type}
                     multiple
                     limitTags={1}
                     fullWidth
@@ -790,10 +767,68 @@ export default function CorporatePlanList() {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
     const response = await axios.get('/corporates/' + corporate_id + '/plans', { params: filter });
-    // console.log(response.data);
+    
     setDataTableLoading(false);
 
     setDataTableData(response.data);
+
+    const data = response.data.data;
+    const serviceCodeArray :string[] = [];
+    const codeArray :string[] = [];
+    const typeArray :string[] = [];
+    const planArray :string[] = [];
+
+    data.forEach((row: any) => {
+      if (!serviceCodeArray.includes(row.service_code)) {
+        serviceCodeArray.push(row.service_code);
+      }
+      
+      if (!codeArray.includes(row.code)) {
+        codeArray.push(row.code);
+      }
+      
+      if (!typeArray.includes(row.type)) {
+        typeArray.push(row.type);
+      }
+      
+      if (!planArray.includes(row.corporate_plan_id)) {
+        planArray.push(row.corporate_plan_id);
+      }
+      
+    });
+
+    const optionServiceCode = serviceCodeArray.map((value) => {
+      return {
+        value: value,
+        label: value
+      };
+    });
+    const optionCode = codeArray.map((value) => {
+      return {
+        value: value,
+        label: value
+      };
+    });
+    const optionType = typeArray.map((value) => {
+      return {
+        value: value,
+        label: value
+      };
+    });
+    const optionPlan = planArray.map((value) => {
+      return {
+        value: value,
+        label: value
+      };
+    });
+
+
+    console.log(optionCode)
+    setServiceCode(optionServiceCode)
+    setType(optionType)
+    setCode(optionCode)
+    setCodePlan(optionPlan)
+    
   };
 
   const headStyle = {
@@ -854,7 +889,7 @@ export default function CorporatePlanList() {
       .then((res) => {
         window.location.reload();
       });
-}
+  }
 
   const getContent = () => (
     <>

frontend/dashboard/src/routes/index.tsx

@@ -177,6 +177,10 @@ export default function Router() {
               path: ':corporate_id/diagnosis-exclusions',
               element: <DiagnosisExclusions />,
             },
+            {
+                path: ':corporate_id/diagnosis-exclusions/:exclusion_id/edit',
+                element: <EditDiagnosisExclusions />,
+            },
             {
               path: ':corporate_id/diagnosis-exclusions/history',
               element: <DiagnosisExclusionsHistory />,
@@ -186,7 +190,18 @@ export default function Router() {
               path: ':corporate_id/hospitals',
               element: <CorporateHospitals />,
             },
-
+            {
+              path: ':corporate_id/hospitals/create',
+              element: <HospitalCreateUpdate />,
+            },
+            {
+              path: ':corporate_id/hospitals/edit/:id/:organization_id',
+              element: <HospitalCreateUpdate />,
+            },
+            {
+              path: ':corporate_id/hospitals/:id/history',
+              element: <HospitalHistory />,
+            },
             {
               path: ':corporate_id/claim-history',
               element: <CorporateClaimHistories />,
@@ -438,7 +453,7 @@ const CorporateDivisionsCreate = Loadable(
 );
 
 const CorporateMembers = Loadable(lazy(() => import('../pages/Corporates/Member/Index')));
-const CorporateHistoryMembers = Loadable(lazy(() => import('../pages/Corporates/Member/sections/History')));
+const CorporateHistoryMembers = Loadable(lazy(() => import('../pages/Corporates/Member/History')));
 
 const BenefitCreate = Loadable(lazy(() => import('../pages/Corporates/Benefit/Create')));
 const Benefits = Loadable(lazy(() => import('../pages/Corporates/Benefit/Index')));
@@ -468,6 +483,9 @@ const CorporatePlansHistory = Loadable(lazy(() => import('../pages/Corporates/Pl
 const DiagnosisExclusions = Loadable(
   lazy(() => import('../pages/Corporates/DiagnosisExclusion/Index'))
 );
+const EditDiagnosisExclusions = Loadable(
+    lazy(() => import('../pages/Corporates/DiagnosisExclusion/Edit'))
+);
 const DiagnosisExclusionsHistory = Loadable(
   lazy(() => import('../pages/Corporates/DiagnosisExclusion/History'))
 );
@@ -515,9 +533,11 @@ const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/
 const CorporateServicesHistory = Loadable(lazy(() => import('../pages/Corporates/Services/sections/History')));
 
 const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospital/Index')));
+const HospitalCreateUpdate = Loadable(lazy(() => import('../pages/Corporates/Hospital/CreateUpdate')));
 const CorporateClaimHistories = Loadable(
   lazy(() => import('../pages/Corporates/ClaimHistory/Index'))
 );
+const HospitalHistory = Loadable(lazy(() => import('../pages/Corporates/Hospital/History')));
 
 const CorporateHistories = Loadable(
   lazy(() => import('../pages/Corporates/History'))