update

frontend/client-portal/src/@types/auth.ts

@@ -26,7 +26,7 @@ export type JWTContextType = {
   isInitialized: boolean;
   user: AuthUser;
   method: 'jwt';
-  login: (phoneOrEmail: string) => Promise<void>;
+  login: (phoneOrEmail: string, password: string, rememberMe: boolean) => Promise<void>;
   validateOtp: (phoneOrEmail: string, otp: string) => Promise<void>
   logout: () => void;
 };

frontend/client-portal/src/components/nav-section/vertical/NavItem.tsx

@@ -21,7 +21,7 @@ export function NavItemRoot({
 
   const renderContent = (
     <>
-      <DotIcon active={active} />
+      {/* <DotIcon active={active} /> */}
       <ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
       {!isCollapse && (
         <>

frontend/client-portal/src/contexts/LaravelAuthContext.tsx

@@ -1,11 +1,12 @@
 import { createContext, ReactNode, useEffect, useReducer } from 'react';
 // utils
 import axios from '../utils/axios';
-import { setSession, getSession } from '../utils/token';
+import { setSession, getSession, setUser, getUser, getCookie } from '../utils/token';
 // @types
 import { ActionMap, AuthState, AuthUser, JWTContextType } from '../@types/auth';
 
 // ----------------------------------------------------------------------
+import { Navigate, useLocation } from 'react-router-dom';
 
 enum Types {
   Initial = 'INITIALIZE',
@@ -19,7 +20,9 @@ type JWTAuthPayload = {
     isAuthenticated: boolean;
     user: AuthUser;
   };
-  [Types.Login]: undefined;
+  [Types.Login]: {
+    user: AuthUser;
+  };
   [Types.ValidateOtp]: {
     user: AuthUser;
   };
@@ -45,8 +48,8 @@ const JWTReducer = (state: AuthState, action: JWTActions) => {
     case 'LOGIN':
       return {
         ...state,
-        isAuthenticated: false,
-        user: null,
+        isAuthenticated: true,
+        user: action.payload.user,
       };
     case 'VALIDATE-OTP':
       return {
@@ -75,7 +78,46 @@ type AuthProviderProps = {
 
 function AuthProvider({ children }: AuthProviderProps) {
   const [state, dispatch] = useReducer(JWTReducer, initialState);
+  let location = useLocation();
   const accessToken = getSession();
+  // useEffect(() => {
+  //   (async () => {
+  //     try {
+  //       // const accessToken = getSession();
+
+  //       if (accessToken) {
+  //         setSession(accessToken);
+
+  //         const response = await axios.get('/user');
+  //         const user = response.data;
+
+  //         dispatch({
+  //           type: Types.Initial,
+  //           payload: {
+  //             isAuthenticated: true,
+  //             user,
+  //           },
+  //         });
+  //       } else {
+  //         dispatch({
+  //           type: Types.Initial,
+  //           payload: {
+  //             isAuthenticated: false,
+  //             user: null,
+  //           },
+  //         });
+  //       }
+  //     } catch (err) {
+  //       dispatch({
+  //         type: Types.Initial,
+  //         payload: {
+  //           isAuthenticated: false,
+  //           user: null,
+  //         },
+  //       });
+  //     }
+  //   })();
+  // }, [accessToken]);
 
   useEffect(() => {
     (async () => {
@@ -116,12 +158,28 @@ function AuthProvider({ children }: AuthProviderProps) {
     })();
   }, [accessToken]);
 
-  const login = async (phoneOrEmail: string) =>
+
+  const headers = {
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type' : 'application/json',
+        'Accept-Language': localStorage.getItem('currentLocale') ?? 'id-ID',
+      },
+  };
+
+  const login = async (phoneOrEmail: string, password: string, remember:boolean) =>
     axios
-      .post('/login', { phoneOrEmail })
-      .then(() => {
+      .post('/login', { phoneOrEmail, password }, headers)
+      .then((response) => {
+        const { user, token } = response.data.data;
+        setSession(token);
+        setUser(user);
+        
         dispatch({
           type: Types.Login,
+          payload: {
+            user,
+          }
         });
       })
       .catch((error) => {

frontend/client-portal/src/pages/Dashboard/Index.tsx

@@ -1,5 +1,5 @@
 // @mui
-import { Box,CardContent,Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
+import { Box, Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
 // hooks
 import useSettings from '../../hooks/useSettings';
 // components
@@ -9,6 +9,7 @@ import useAuth from '../../hooks/useAuth';
 import SomethingUsage from '../../sections/dashboard/SomethingUsage';
 import { fCurrency } from '../../utils/formatNumber';
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+import SendIcon from '@mui/icons-material/Send';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import { useContext, useEffect, useState } from 'react';
@@ -20,32 +21,29 @@ import { useNavigate, useParams } from 'react-router-dom';
 // ----------------------------------------------------------------------
 
 export default function Dashboard() {
-
-    const navigate = useNavigate();
+  const navigate = useNavigate();
   const { themeStretch } = useSettings();
 
   const { user } = useAuth();
 
-
-
   const checkIfNameExists = (name) => {
-        return user.user.permissions.some(item => item.name === name);
-    };
+    return user.user.permissions.some((item) => item.name === name);
+  };
 
-    const nameToCheck = 'dashboard-list-client-portal';
+  const nameToCheck = 'dashboard-list-client-portal';
+  const doesNameExist = checkIfNameExists(nameToCheck);
+  useEffect(() => {
     const doesNameExist = checkIfNameExists(nameToCheck);
-    useEffect(() => {
-        const doesNameExist = checkIfNameExists(nameToCheck);
-        if (!doesNameExist) {
-            navigate('/corporate');
-        }
-      }, [nameToCheck, user, navigate]);
-//   const loadSomething = () => {
-//     axios.get('/user')
-//   };
+    if (!doesNameExist) {
+      navigate('/corporate');
+    }
+  }, [nameToCheck, user, navigate]);
+  //   const loadSomething = () => {
+  //     axios.get('/user')
+  //   };
 
   const Wallet = styled(AccountBalanceWalletIcon)(({ theme }) => ({
-    color: 'orange',
+    color: 'rgba(249, 131, 124, 1)',
     marginRight: theme.spacing(1),
   }));
 
@@ -54,8 +52,8 @@ export default function Dashboard() {
     marginRight: theme.spacing(1),
   }));
 
-  const Monet = styled(MonetizationOnIcon)(({ theme }) => ({
-    color: 'orange',
+  const Send = styled(SendIcon)(({ theme }) => ({
+    color: 'rgba(243, 204, 92, 1)',
     marginRight: theme.spacing(1),
   }));
 
@@ -74,32 +72,50 @@ export default function Dashboard() {
   }));
 
   const DefaultCard = styled(Card)(({ theme }) => ({
+    boxShadow: theme.shadows[3], // Menggunakan bayangan standar dari tema
+    padding: theme.spacing(3),
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.neutral, // Latar belakang putih
+  }));
+
+  const CardContent = styled(Card)(({ theme }) => ({
     boxShadow: theme.shadows[3], // Menggunakan bayangan standar dari tema
     padding: theme.spacing(3),
     color: theme.palette.text.primary,
     backgroundColor: theme.palette.background.paper, // Latar belakang putih
-}));
-const { corporateValue } = useContext(UserCurrentCorporateContext);
+  }));
 
-const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 });
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
 
-    useEffect(() => {
-        const fetchDepositData = async () => {
-            try {
-                const response = await axios.get(`${corporateValue}/get-deposits`);
-                setDepositData(response.data);
-            } catch (error) {
-                console.error('Failed to fetch deposit data:', error);
-            }
-        };
+  const [depositData, setDepositData] = useState({
+    deposit: 0,
+    limit: 0,
+    usage: 0,
+    minimal_deposit_percentage: 0,
+    minimal_deposit_net: 0,
+    minimal_alert_percentage: 0,
+    minimal_alert_net: 0,
+    minimal_stop_service_net: 0,
+    minimal_stop_service_percentage: 0,
+  });
 
-        fetchDepositData();
-    }, [corporateValue]);
+  useEffect(() => {
+    const fetchDepositData = async () => {
+      try {
+        const response = await axios.get(`${corporateValue}/get-deposits`);
+        setDepositData(response.data);
+      } catch (error) {
+        console.error('Failed to fetch deposit data:', error);
+      }
+    };
 
-    const handleGoBack = () => {
-        // Logic untuk kembali ke halaman sebelumnya atau halaman utama
-        navigate('/corporate')
-      };
+    fetchDepositData();
+  }, [corporateValue]);
+
+  const handleGoBack = () => {
+    // Logic untuk kembali ke halaman sebelumnya atau halaman utama
+    navigate('/corporate');
+  };
 
   return (
     <Page title="Dashboard">
@@ -108,67 +124,143 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0
           Dashboard
         </Typography>
         {doesNameExist ? (
-            <Grid container spacing={2}>
-                <Grid item xs={4}>
-                {/* <SomethingUsage /> */}
-                <DefaultCard>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <DefaultCard>
+                <Grid container spacing={2}>
+                  <Grid item xs={12} sm={6}>
                     <CardContent>
-                        <Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
-                                <Typography variant='h4'>{fCurrency(depositData.deposit)}</Typography>
-                                <Wallet />
-                            </Stack>
-                            <Typography variant='h6'>Deposit</Typography>
+                      <Stack
+                        direction="column"
+                        alignItems="flex-start"
+                        justifyContent="space-between"
+                        sx={{ mb: 0.6, width: '100%' }}
+                      >
+                        <Stack
+                          direction="row"
+                          alignItems="center"
+                          justifyContent="space-between"
+                          sx={{ width: '100%', marginBottom: '10px' }}
+                        >
+                          <Typography variant="h4">{fCurrency(depositData.deposit)}</Typography>
+                          <Wallet />
                         </Stack>
+                        <Typography variant="h6" style={{ color: 'rgba(137, 137, 137, 1)' }}>
+                          Deposit
+                        </Typography>
+                        <Stack spacing={1} mt={2} sx={{ width: '100%' }}>
+                          <Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            sx={{
+                              backgroundColor: 'rgba(233, 252, 212, 1)',
+                              padding: '8px 16px',
+                              borderRadius: '6px',
+                              width: '80%',
+                            }}
+                          >
+                            <Typography
+                              variant="body2"
+                              style={{ paddingRight: '10px', color: 'rgba(8, 102, 13, 1)' }}
+                            >
+                              • Minimal Deposit {depositData.minimal_deposit_percentage}%
+                            </Typography>
+                            <Typography variant="body2" style={{ color: 'rgba(8, 102, 13, 1)' }}>
+                              {fCurrency(depositData.minimal_deposit_net)}
+                            </Typography>
+                          </Stack>
+                          <Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            sx={{
+                              backgroundColor: 'rgba(214, 228, 255, 1)',
+                              padding: '8px 16px',
+                              borderRadius: '6px',
+                              width: '80%',
+                            }}
+                          >
+                            <Typography
+                              variant="body2"
+                              style={{ paddingRight: '10px', color: 'rgba(9, 26, 122, 1)' }}
+                            >
+                              • Stop Service {depositData.minimal_stop_service_percentage}%
+                            </Typography>
+                            <Typography variant="body2" style={{ color: 'rgba(9, 26, 122, 1)' }}>
+                              {fCurrency(depositData.minimal_stop_service_net)}
+                            </Typography>
+                          </Stack>
+                          <Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            sx={{
+                              backgroundColor: 'rgba(255, 249, 242, 1)',
+                              padding: '8px 16px',
+                              borderRadius: '6px',
+                              width: '80%',
+                            }}
+                          >
+                            <Typography
+                              variant="body2"
+                              style={{ paddingRight: '10px', color: 'rgba(115, 64, 17, 1)' }}
+                            >
+                              • Reminder Alert Level {depositData.minimal_alert_percentage}%
+                            </Typography>
+                            <Typography variant="body2" style={{ color: 'rgba(115, 64, 17, 1)' }}>
+                              {fCurrency(depositData.minimal_alert_net)}
+                            </Typography>
+                          </Stack>
+                        </Stack>
+                      </Stack>
                     </CardContent>
-                </DefaultCard>
-                </Grid>
-                <Grid item xs={4}>
-                <DefaultCard>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
                     <CardContent>
-                        <Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
-                                <Typography variant='h4'>{fCurrency(depositData.limit)}</Typography>
-                                <TrendUp />
-                            </Stack>
-                            <Typography variant='h6'>Limit</Typography>
+                      <Stack
+                        direction="column"
+                        alignItems="flex-start"
+                        justifyContent="space-between"
+                        sx={{ mb: 0.6 }}
+                      >
+                        <Stack
+                          direction="row"
+                          alignItems="center"
+                          justifyContent="space-between"
+                          sx={{ width: '100%', marginBottom: '10px' }}
+                        >
+                          <Typography variant="h4">{fCurrency(depositData.usage)}</Typography>
+                          <Send />
                         </Stack>
+                        <Typography variant="h6" style={{ color: 'rgba(137, 137, 137, 1)' }}>
+                          This Year Usage
+                        </Typography>
+                      </Stack>
                     </CardContent>
-                </DefaultCard>
-                </Grid>
-                <Grid item xs={4}>
-                <DefaultCard>
-                    <CardContent>
-                        <Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
-                                <Typography variant='h4'>{fCurrency(depositData.usage)}</Typography>
-                                <Monet />
-                            </Stack>
-                            <Typography variant='h6'>This Year Usage</Typography>
-                        </Stack>
-                    </CardContent>
-                </DefaultCard>
+                  </Grid>
                 </Grid>
+              </DefaultCard>
             </Grid>
-        ):(
-            <Box
-                display="flex"
-                flexDirection="column"
-                alignItems="center"
-                justifyContent="center"
-                minHeight="55vh"
-                textAlign="center"
-                padding={2}
-                >
-                <Typography variant="body1" color="textSecondary" paragraph>
-                    Maaf, halaman ini tidak bisa diakses atau tidak ada.
-                </Typography>
-                <Button variant="contained" color="primary" onClick={handleGoBack}>
-                    Kembali
-                </Button>
-            </Box>
+          </Grid>
+        ) : (
+          <Box
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+            minHeight="55vh"
+            textAlign="center"
+            padding={2}
+          >
+            <Typography variant="body1" color="textSecondary" paragraph>
+              Maaf, halaman ini tidak bisa diakses atau tidak ada.
+            </Typography>
+            <Button variant="contained" color="primary" onClick={handleGoBack}>
+              Kembali
+            </Button>
+          </Box>
         )}
-
       </Container>
     </Page>
   );

frontend/client-portal/src/pages/EmployeeData/Index.tsx

@@ -16,7 +16,7 @@ export default function Drugs() {
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <HeaderBreadcrumbs
           heading={'Employee Data'}
-          links={[{ name: 'Case Management' }, { name: 'Employee Data', href: '/employee-data' }]}
+          links={[{ name: 'Corporate' }, { name: 'Employee Data', href: '/employee-data' }]}
         />
         <Grid container>
           <Grid item xs={12} lg={12} md={12}>

frontend/client-portal/src/pages/EmployeeData/List.tsx

@@ -17,6 +17,8 @@ import Typography from '@mui/material/Typography';
 import TableMoreMenu from '../../components/table/TableMoreMenu';
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import Label from '../../components/Label';
+
+import DownloadIcon from '@mui/icons-material/Download';
 import { enqueueSnackbar } from 'notistack';
 
 export default function List() {
@@ -167,6 +169,37 @@ export default function List() {
     },
   ];
   /* -------------------------------------------------------------------------- */
+  // Download E-Card
+  async function handleDownloadEcard(member_id: any, fullName:any) {
+    axios
+    .get(corporateValue+`/view_card/${member_id}`, {
+        responseType: 'blob',
+    })
+    .then((response) => {
+        window.open(URL.createObjectURL(response.data));
+    })
+    .catch((response) => {
+        enqueueSnackbar(response.message, { variant: 'error' });
+    });
+
+    // return axios
+    //   .get(corporateValue+`/download-ecard/${member_id}`, {
+    //     responseType: 'blob',
+    //   })
+    //   .then((response) => {
+    //     const namaFile = 'Ecard - '+fullName+".pdf";
+    //     const url = URL.createObjectURL(response.data);
+    //     const link = document.createElement('a');
+    //     link.href = url;
+    //     link.setAttribute('download', namaFile);
+    //     document.body.appendChild(link);
+    //     link.click();
+    //     document.body.removeChild(link);
+    //   })
+    //   .catch((error) => {
+    //     enqueueSnackbar(error.message, { variant: 'error' });
+    //   });
+  }
 
   useEffect(() => {
     (async () => {
@@ -182,7 +215,6 @@ export default function List() {
       const response = await axios.get(`${corporateValue}/members?type=employee-data`, {
         params: { ...parameters },
       });
-
       setSearchParams(parameters);
       setData(
         response.data.data.map((obj: any) => ({
@@ -205,6 +237,10 @@ export default function List() {
                     <VisibilityOutlinedIcon />
                     View
                   </MenuItem>
+                  <MenuItem onClick={() => handleDownloadEcard(obj.id, obj.fullName)}>
+                    <DownloadIcon />
+                    Download E-card
+                  </MenuItem>
                 </>
               }
             />

frontend/client-portal/src/pages/Master/FormulariumV2/Index.tsx

@@ -14,7 +14,7 @@ export default function MasterFormularium() {
         heading={pageTitle}
         links={[
           {
-            name: "Master",
+            name: "Case Management",
             href: "/master/formularium-template-v2"
           },
           {

frontend/client-portal/src/pages/UserManagement/UserAccess/CreateUpdate.tsx

@@ -0,0 +1,63 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import {useContext, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import UserAccessForm from './Form';
+import { Role, UserAccess } from '../../../@types/user';
+
+
+
+export default function UserAccessCreate() {
+  const { id } = useParams();
+  const [ currentUserAccess, setCurrentUserAccess ] = useState<UserAccess>();
+  const [ roles, setRole ] = useState<any>();
+
+
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/user/access/'+id)
+        .then((res) => {
+          setCurrentUserAccess(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+    axios.get('/role-list')
+      .then((res)=> {
+        setRole(res.data)
+      })
+      .catch((err) => {
+        if (err.response.status === 404) {
+          navigate('/404');
+        }
+      })
+
+  }, [id]);
+
+
+  return (
+    <Page title= "User Access">
+      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
+        heading={'User Access'}
+        links={[
+          {
+            name: 'User Access',
+            href: '/user-access',
+          },
+        ]}
+      />
+
+      <UserAccessForm isEdit={isEdit} currentUserAccess={currentUserAccess} roles={roles}/>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserAccess/Form.tsx

@@ -0,0 +1,147 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import { Box, Card, Grid, Stack, Typography } from "@mui/material";
+import { Role, UserAccess } from "../../../@types/user";
+import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+import palette from '@/theme/palette';
+
+type Props = {
+  isEdit: boolean;
+  currentUserAccess?: UserAccess;
+  roles: Role 
+};
+
+export default function AccsessForm({ isEdit, currentUserAccess, roles }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const NewCorporatePlanSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+  });
+
+  console.log(currentUserAccess, 'test')
+  const defaultValues = useMemo(
+    () => ({
+      name: currentUserAccess?.person?.name || '',
+      username:  currentUserAccess?.username || '',
+      email: currentUserAccess?.email || '',
+      roles: currentUserAccess?.role?.id || [],
+      password: '',
+    }),
+    [currentUserAccess]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentUserAccess) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentUserAccess]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporatePlanSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+
+    console.log(data);
+    if (!isEdit) {
+      await axios
+      .post('/user/access', data)
+      .then((res) => {
+        enqueueSnackbar('User created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/user-access',  { 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' });
+        }
+      });
+    } else {
+      await axios
+        .put('/user/access/' + currentUserAccess?.id, data)
+        .then((res) => {
+          enqueueSnackbar('User updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/user-access' ,  { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+        });
+    }
+  };
+
+  const optionsRoles = roles?.data?.map(item => ({
+    value: item.id,
+    label: item.name
+  })) ?? [];
+  
+  if (optionsRoles.length > 0) {
+    optionsRoles.unshift({ value: '', label: '' });
+  }
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ px: 2 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={12}>
+                    <Card sx={{ px: 3, py: 4 }}>
+                        <Stack spacing={2}>
+                          <Typography variant="h6" color={palette.light.primary.main}>User Access</Typography>
+                          <RHFTextField name="name" label="Name" />
+                          <RHFTextField name="username" label="Username"  />
+                          <RHFTextField type="email" name="email" label="Email" />
+                          <RHFTextField type="password" name="password" label="Password" />
+                          <RHFSelect name="roles" label="Roles">
+                            {optionsRoles.map((option, index) => (
+                              <option key={index} value={option.value}>
+                                {option.label}
+                              </option>
+                            ))}
+                          </RHFSelect>
+
+
+                          <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                              { isEdit? 'Update' : 'Create' }
+                          </LoadingButton>
+
+                        </Stack>
+                    </Card>
+                </Grid>
+            </Grid>
+        </Box>
+      </FormProvider>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserAccess/History.tsx

@@ -0,0 +1,218 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import { useContext, useEffect, useState } from 'react';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import useSettings from '../../../hooks/useSettings';
+import axios from '../../../utils/axios';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import { Corporate } from '@/@types/corporates';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+  const pageTitle = 'Diagnosis Template History';
+  
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+    const model = 'App\\Models\\IcdTemplate';
+    const url = `/audittrail/${id}?model=${model}`;
+    axios.get(url)
+      .then((res) => {
+        setCurrentCorporate(res.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+
+  }, [configuredCorporateContext]);
+
+  return (
+    <div>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Master',
+            href: '/master/diagnosis-template',
+          },
+          {
+            name: 'Diagnosis Template',
+            href: '/master/diagnosis-template',
+          },
+          // {
+          //   name: 'Audittrail ICD',
+          //   href: '/corporate/' + id + '/plans',
+          // },
+        ]}
+      />
+    {currentCorporate?.data.map((item, index) => (
+      <Accordion
+        key={index}
+        expanded={expanded === `panel${index}`}
+        onChange={handleChange(`panel${index}`)}
+      >
+        <AccordionSummary
+          aria-controls={`panel${index}d-content`}
+          id={`panel${index}d-header`}
+        >
+        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Field</TableCell>
+            <TableCell align="center">Old Value</TableCell>
+            <TableCell align="center">New Values</TableCell>
+          </TableRow>
+       </TableHead>
+       <TableBody>
+       {Object.entries(item.old_values).map(([key, value]) => {
+          let renderedValue;
+          if (key === 'deleted_by' || 
+              key === 'deleted_at' || 
+              key === 'created_by' || 
+              key === 'created_at' || 
+              key === 'updated_by' ||
+              key === 'description' 
+            ) {
+            return null; // Melewati iterasi saat key adalah 'deleted_by'
+          }
+          switch (key) {
+          case 'welcome_message':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'help_text':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'active':
+            renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
+            value = value == 1 ? 'Active' : 'Inactive';
+            break;
+          case 'created_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'delete_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);
+          if (value == renderedValue) {
+            return null
+          } else {
+            return (
+            <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell>{`${field}`}</TableCell>
+              <TableCell align="center">{`${value}`}</TableCell>
+              <TableCell align="center">{renderedValue}</TableCell>
+            </TableRow>
+            );
+          }
+          })}
+
+      </TableBody>
+        </AccordionDetails>
+      </Accordion>
+    ))}
+    </div>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserAccess/Index.tsx

@@ -0,0 +1,37 @@
+import { Container,Card, Grid } 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 List from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const pageTitle = 'User Access';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            { name: 'User Management', href: '/user-access' },
+            {
+              name: 'User Access',
+              href: '/user-access',
+            },
+          ]}
+        />
+        <Grid container>
+          <Grid item xs={12} lg={12} md={12}>
+            <List />
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserAccess/List.tsx

@@ -0,0 +1,443 @@
+// @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, Pagination, Grid, Autocomplete, DialogActions } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+import HistoryIcon from '@mui/icons-material/History';
+// hooks
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { UserAccess } from '../../../@types/user';
+import BasePagination from '../../../components/BasePagination';
+import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { Delete, EditOutlined, FindInPageOutlined } from '@mui/icons-material';
+import MuiDialog from '@/components/MuiDialog';
+
+export default function List() {
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const { corporate_id } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [importResult, setImportResult] = useState(null);
+
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null)
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleICDList = async (appliedFilter = null) => {
+      axios.get('master/diagnosis/list').then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+      });
+  }
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = "";
+      importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name)
+      } else {
+        setCurrentImportFileName(null);
+      }
+    }
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importForm.current?.files[0])
+        axios.post(`master/diagnosis/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data)
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
+          })
+      } else {
+        enqueueSnackbar('No File Selected', { variant: 'warning' })
+      }
+    }
+
+    const handleGetTemplate = (type :string) => {
+      axios.get('corporates/import-document-example/' + type)
+        .then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+        })
+    }
+
+
+
+    return (
+      <div>
+        <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <Button
+                id="import-button"
+                variant='contained'
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={() => navigate(`/user-access/create`)}
+            >
+                Create
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem>
+
+              </MenuItem>
+            </Menu>
+        </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( userAccess: UserAccess ): UserAccess {
+    return {
+      ...userAccess,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    const handleActivate = (model: any, status: string) => {
+      axios
+        .put(`/master/diagnosis-template/${row.id}/activation`, {
+          // service_code: service.service_code,
+          active: status == 'active',
+        })
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((model) => {
+              let updatedModel = model;
+              if (row.id == model.id) {
+                updatedModel.active = res.data.icd.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.person?.name ?? '-'}</TableCell>
+            <TableCell align="left">{row.email ?? '-'}</TableCell>
+            <TableCell align="left">{row.role?.name ?? '-'}</TableCell>
+            <TableCell align="center">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            {/* <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}`)}>
+                                <FindInPageOutlined />
+                                Detail
+                            </MenuItem> */}
+                            <MenuItem onClick={() => navigate(`/user/access/${row.id}/edit`)} >
+                                <EditOutlined />
+                                Edit
+                            </MenuItem>
+                            {/* <MenuItem onClick={() => setOpenDialogDelete(true)}>
+                                <Delete color='error'/>
+                                Delete
+                            </MenuItem> */}
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+  // Delete
+  const reasons = [
+    { value: 'agreement', label: 'Agreement changed' },
+    { value: 'endorsement', label: 'Endorsement' },
+    { value: 'renewal', label: 'Renewal' },
+    { value: 'wrong_setting', label: 'Wrong Setting' },
+    // Add more options as needed
+  ];
+
+  const [isReasonSelected, setIsReasonSelected] = useState(false);
+  const [formData, setFormData] = useState({
+    reason: null
+  });
+
+  const marginBottom2 = {
+    marginBottom: 2,
+  }
+
+  const style1 = {
+    color: '#919EAB',
+    width: '30%'
+  }
+
+  const handleCloseDialog = () => {
+      setOpenDialogDelete(false);
+      resetForm();
+  }
+
+  const resetForm = () => {
+      setFormData({
+          reason: null
+      });
+  };
+  const handleChange = (field, value) => {
+      setFormData((prevData) => ({
+          ...prevData,
+          [field]: value,
+      }));
+      if (field === 'reason') {
+          setIsReasonSelected(!!value);
+      }
+  }
+
+  const handleSubmit = () => {
+    if (isReasonSelected && formData.reason !== '') {
+      alert('zsd.');
+    } else {
+        setIsReasonSelected(false);
+    }
+
+  }
+
+   // Dialog
+   const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+        <Typography variant="subtitle2">Are you sure to delete this User?</Typography>
+        <Grid item xs={12} md={12} marginTop={4}>
+            <Card sx={{padding:2, marginTop:2}}  >
+                <Stack direction='row' spacing={2} sx={marginBottom2}>
+                    <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                    <Autocomplete
+                        options={reasons}
+                        getOptionLabel={(option) => option.label}
+                        fullWidth
+                        value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                        onChange={(e, newValue) => handleChange('reason', newValue?.value)}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                label="Reason"
+                                variant="outlined"
+                                required
+                                error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+
+                            />
+                        )}
+                    />
+                </Stack>
+            </Card>
+        </Grid>
+
+        <DialogActions>
+            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+            <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+        </DialogActions>
+    </Stack>
+  );
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/user/access?guard_name=client-portal&', { params: filter });
+    console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+  const [openDialogDelete, setOpenDialogDelete] = React.useState(false);
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  return (
+    <Stack>
+        <ImportForm />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
+          <Table aria-label="collapsible table">
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
+              <TableRow>
+                <TableCell align="left" />
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Email</TableCell>
+                <TableCell style={headStyle} align="left">Role Access</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
+              </TableRow>
+            </TableHead>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={5} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ?
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={5} 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}/>
+        <MuiDialog
+            title={{name: "Delete User Access"}}
+            openDialog={openDialogDelete}
+            setOpenDialog={setOpenDialogDelete}
+            content={getContent()}
+            maxWidth="xs"
+        />
+    </Stack>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserRole/CreateUpdate.tsx

@@ -0,0 +1,82 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import {useContext, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { useSnackbar } from 'notistack';
+import UserRoleForm from './Form';
+import { Role } from '../../../@types/user';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+
+
+
+export default function PlanCreate() {
+  const { themeStretch } = useSettings();
+  const { corporate_id, id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate|null>();
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext])
+
+  const [ currentUserRole, setCurrentUserRole ] = useState<Role>();
+
+
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  const [permissions, setPermissions] = useState([]);
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/user/role/'+id)
+        .then((res) => {
+          setCurrentUserRole(res.data);
+          axios.get('/permission_list?guard_name='+res.data.guard_name)
+            .then((res) => {
+                setPermissions(res.data);
+            })
+            .catch((err) => {
+                if (err.response && err.response.status === 404) {
+                navigate('/404');
+                } else {
+                console.error('Error fetching permissions:', err);
+                }
+            });
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+
+
+  }, [corporate_id, id]);
+
+  return (
+    <Page title= "User Role">
+      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
+        heading={'User Role'}
+        links={[
+          {
+            name: 'User Role',
+            href: '/user-role',
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: '/corporate/'+corporate_id+'/divisions/'+id,
+          },
+        ]}
+      />
+
+      <UserRoleForm isEdit={isEdit} currentUserRole={currentUserRole} permissions={permissions}/>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserRole/Form.tsx

@@ -0,0 +1,193 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import {Box, Card, FormControlLabel, Grid, Stack, Typography } from "@mui/material";
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { Role } from '../../../@types/user';
+import { Permisions } from '../../../@types/user';
+import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+import palette from '@/theme/palette';
+import { Checkbox } from '@mui/material';
+import Label from '@/components/Label';
+
+type Props = {
+  isEdit: boolean;
+  currentUserRole?: Role;
+  permissions?: Permisions;
+};
+
+export default function UserRoleForm({ isEdit, currentUserRole, permissions }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+  const [guardName, setGuardName] = useState(currentUserRole?.guard_name || '');
+  const [filteredPermissions, setFilteredPermissions] = useState(permissions);
+
+  const NewUserRoleSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentUserRole?.name || '',
+      guard_name: currentUserRole?.guard_name || '',
+      permission_check: currentUserRole?.permissions?.map(permission => permission.id) || []
+
+    }),
+    [currentUserRole, permissions]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentUserRole) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentUserRole]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewUserRoleSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+    console.log(data, 'test1')
+    if (!isEdit) {
+      await axios
+      .post('/user/role', data)
+      .then((res) => {
+        enqueueSnackbar('User Role created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/user-role',  { 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' });
+        }
+      });
+    } else {
+      await axios
+        .put('/user/role/' + currentUserRole?.id, data)
+        .then((res) => {
+          enqueueSnackbar('User Role updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/user-role' ,  { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+        });
+    }
+  };
+
+  const guard_name_options = [
+    { value: '', label: '' },
+    // { value: 'web', label: 'Primecenter' },
+    { value: 'client-portal', label: 'Client Portal' },
+    // { value: 'hospital-portal', label: 'Hospital Portal' }
+  ];
+
+  // Buat fungsi handleCheckboxClick di luar komponen utama (UserRoleForm)
+  const handleCheckboxClick = (permissionId, checked) => {
+    const currentPermissions = getValues('permission_check') || [];
+    if (checked) {
+      setValue('permission_check', [...currentPermissions, permissionId]);
+    } else {
+      setValue('permission_check', currentPermissions.filter(id => id !== permissionId));
+    }
+  };
+
+  useEffect(() => {
+    // Fetch permissions based on guard_name
+    if (guardName) {
+      axios.get(`/permission_list?guard_name=${guardName}`)
+        .then((res) => {
+          setFilteredPermissions(res.data);
+        })
+        .catch((err) => {
+          console.error('Error fetching permissions:', err);
+        });
+    } else {
+      setFilteredPermissions(permissions);
+    }
+  }, [guardName,permissions]);
+
+  const handleGuardNameChange = (event) => {
+    console.log("ivan")
+    setGuardName(event.target.value);
+    setValue('guard_name', event.target.value);
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Box sx={{ px: 2 }}>
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={12}>
+            <Card sx={{ px: 3, py: 4 }}>
+              <Stack spacing={2}>
+                <Typography variant="h6" color={palette.light.primary.main}>User Role</Typography>
+                <RHFTextField name="name" label="Name" />
+                <RHFSelect name="guard_name" label="Guard Name" onChange={handleGuardNameChange}>
+                  {guard_name_options.map((option, index) => (
+                    <option key={index} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </RHFSelect>
+                <Typography variant="h6" color={palette.light.primary.main}>Permission</Typography>
+                <Grid container spacing={2}>
+                  {filteredPermissions?.map((permission, index) => (
+                    <Grid item xs={4} key={permission.id}>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            name={`permission_check`}
+                            value={permission.id}
+                            checked={watch('permission_check')?.includes(permission.id) || false}
+                            onChange={(e) => handleCheckboxClick(permission.id, e.target.checked)}
+                          />
+                        }
+                        label={permission.name}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+                <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                  { isEdit? 'Update' : 'Create' }
+                </LoadingButton>
+              </Stack>
+            </Card>
+          </Grid>
+        </Grid>
+      </Box>
+    </FormProvider>
+
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserRole/History.tsx

@@ -0,0 +1,218 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import { useContext, useEffect, useState } from 'react';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import useSettings from '../../../hooks/useSettings';
+import axios from '../../../utils/axios';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import { Corporate } from '@/@types/corporates';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+  const pageTitle = 'Diagnosis Template History';
+  
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+    const model = 'App\\Models\\IcdTemplate';
+    const url = `/audittrail/${id}?model=${model}`;
+    axios.get(url)
+      .then((res) => {
+        setCurrentCorporate(res.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+
+  }, [configuredCorporateContext]);
+
+  return (
+    <div>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Master',
+            href: '/master/diagnosis-template',
+          },
+          {
+            name: 'Diagnosis Template',
+            href: '/master/diagnosis-template',
+          },
+          // {
+          //   name: 'Audittrail ICD',
+          //   href: '/corporate/' + id + '/plans',
+          // },
+        ]}
+      />
+    {currentCorporate?.data.map((item, index) => (
+      <Accordion
+        key={index}
+        expanded={expanded === `panel${index}`}
+        onChange={handleChange(`panel${index}`)}
+      >
+        <AccordionSummary
+          aria-controls={`panel${index}d-content`}
+          id={`panel${index}d-header`}
+        >
+        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Field</TableCell>
+            <TableCell align="center">Old Value</TableCell>
+            <TableCell align="center">New Values</TableCell>
+          </TableRow>
+       </TableHead>
+       <TableBody>
+       {Object.entries(item.old_values).map(([key, value]) => {
+          let renderedValue;
+          if (key === 'deleted_by' || 
+              key === 'deleted_at' || 
+              key === 'created_by' || 
+              key === 'created_at' || 
+              key === 'updated_by' ||
+              key === 'description' 
+            ) {
+            return null; // Melewati iterasi saat key adalah 'deleted_by'
+          }
+          switch (key) {
+          case 'welcome_message':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'help_text':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'active':
+            renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
+            value = value == 1 ? 'Active' : 'Inactive';
+            break;
+          case 'created_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'delete_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);
+          if (value == renderedValue) {
+            return null
+          } else {
+            return (
+            <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell>{`${field}`}</TableCell>
+              <TableCell align="center">{`${value}`}</TableCell>
+              <TableCell align="center">{renderedValue}</TableCell>
+            </TableRow>
+            );
+          }
+          })}
+
+      </TableBody>
+        </AccordionDetails>
+      </Accordion>
+    ))}
+    </div>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserRole/Index.tsx

@@ -0,0 +1,37 @@
+import { Container,Card, Grid } 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 List from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const pageTitle = 'User Role';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            { name: 'User Management', href: '/user-role' },
+            {
+              name: 'User Role',
+              href: '/user-role',
+            },
+          ]}
+        />
+        <Grid container>
+          <Grid item xs={12} lg={12} md={12}>
+            <List />
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/UserManagement/UserRole/List.tsx

@@ -0,0 +1,442 @@
+// @mui
+import { Box, Button, Card, MenuItem, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Stack, Menu, Grid, DialogActions } from '@mui/material';
+import { Autocomplete } from "@mui/material";
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Role } from '../../../@types/user';
+import BasePagination from '../../../components/BasePagination';
+import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { Delete, EditOutlined, FindInPageOutlined } from '@mui/icons-material';
+import MuiDialog from '@/components/MuiDialog';
+
+export default function List() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null)
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleICDList = async (appliedFilter = null) => {
+      axios.get('master/diagnosis/list').then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+      });
+  }
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = "";
+      importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name)
+      } else {
+        setCurrentImportFileName(null);
+      }
+    }
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importForm.current?.files[0])
+        axios.post(`master/diagnosis/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data)
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
+          })
+      } else {
+        enqueueSnackbar('No File Selected', { variant: 'warning' })
+      }
+    }
+
+    const handleGetTemplate = (type :string) => {
+      axios.get('corporates/import-document-example/' + type)
+        .then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+        })
+    }
+
+
+
+    return (
+      <div>
+        <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <Button
+                id="import-button"
+                variant='contained'
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={() => navigate(`/user-role/create`)}
+            >
+                Create
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem>
+
+              </MenuItem>
+            </Menu>
+        </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( userManamgent: Role ): Role {
+    return {
+      ...userManamgent,
+    }
+  }
+
+  const [id, setId] = useState(null)
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const handleActivate = (model: any, status: string) => {
+      axios
+        .put(`/master/diagnosis-template/${row.id}/activation`, {
+          // service_code: service.service_code,
+          active: status == 'active',
+        })
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((model) => {
+              let updatedModel = model;
+              if (row.id == model.id) {
+                updatedModel.active = res.data.icd.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.id}</TableCell>
+            <TableCell align="left">{row.name ?? '-'}</TableCell>
+            <TableCell align="left">{row.guard_name ?? '-'}</TableCell>
+            <TableCell align="center">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            {/* <MenuItem onClick={() => navigate(`/user/role/${row.id}`)}>
+                                <FindInPageOutlined />
+                                Detail
+                            </MenuItem> */}
+                            <MenuItem onClick={() => navigate(`/user/role/${row.id}/edit`)} >
+                                <EditOutlined />
+                                Edit
+                            </MenuItem>
+                            {/* <MenuItem onClick={() => { setOpenDialogDelete(true); setId(row.id); }}>
+                              <Delete color='error'/>
+                              Delete
+                            </MenuItem> */}
+                            {/* <MenuItem onClick={() => navigate(`/user/role/${row.id}/history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem> */}
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Delete
+  const reasons = [
+    { value: 'agreement', label: 'Agreement changed' },
+    { value: 'endorsement', label: 'Endorsement' },
+    { value: 'renewal', label: 'Renewal' },
+    { value: 'wrong_setting', label: 'Wrong Setting' },
+    // Add more options as needed
+  ];
+
+  const [isReasonSelected, setIsReasonSelected] = useState(false);
+  const [formData, setFormData] = useState({
+      reason: null
+  });
+
+  const marginBottom2 = {
+      marginBottom: 2,
+  }
+
+  const style1 = {
+    color: '#919EAB',
+    width: '30%'
+  }
+
+  const handleCloseDialog = () => {
+      setOpenDialogDelete(false);
+      resetForm();
+  }
+
+  const resetForm = () => {
+      setFormData({
+          reason: null
+      });
+  };
+
+  const handleChange = (field, value) => {
+      setFormData((prevData) => ({
+          ...prevData,
+          [field]: value,
+      }));
+      if (field === 'reason') {
+          setIsReasonSelected(!!value);
+      }
+  }
+
+  const handleSubmit = () => {
+    if (isReasonSelected && formData.reason !== '') {
+      console.log(formData, 'test')
+    } else {
+        setIsReasonSelected(false);
+    }
+  }
+
+  // Dialog
+  const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+        <Typography variant="subtitle2">Are you sure to delete this User Role?</Typography>
+        <Grid item xs={12} md={12} marginTop={4}>
+            <Card sx={{padding:2, marginTop:2}}  >
+                <Stack direction='row' spacing={2} sx={marginBottom2}>
+                    <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                    <Autocomplete
+                        options={reasons}
+                        getOptionLabel={(option) => option.label}
+                        fullWidth
+                        value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                        onChange={(e, newValue) => handleChange('reason', newValue?.value)}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                label="Reason"
+                                variant="outlined"
+                                required
+                                error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+                            />
+                        )}
+                    />
+                </Stack>
+            </Card>
+        </Grid>
+
+        <DialogActions>
+            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+            <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+        </DialogActions>
+    </Stack>
+  );
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/user/role?guard_name=client-portal&', { params: filter });
+    console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+  const [openDialogDelete, setOpenDialogDelete] = React.useState(false);
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  return (
+    <Stack>
+        <ImportForm />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
+          <Table aria-label="collapsible table">
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
+              <TableRow>
+                <TableCell align="left" />
+                <TableCell style={headStyle} align="left">ID</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Guard Name</TableCell>
+                <TableCell style={headStyle} align="left"></TableCell>
+              </TableRow>
+            </TableHead>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={5} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ?
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={5} 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}/>
+
+        <MuiDialog
+            title={{name: "Delete User Role"}}
+            openDialog={openDialogDelete}
+            setOpenDialog={setOpenDialogDelete}
+            content={getContent()}
+            maxWidth="xs"
+        />
+    </Stack>
+  );
+}

frontend/client-portal/src/pages/auth/Login.tsx

@@ -97,7 +97,7 @@ export default function Login() {
               </video>
             </Grid>
             <Grid item xs={6} sx={{ padding: 3 }}>
-              {loginOrVerifyCode && emailOrPhone ? (
+              {/* {loginOrVerifyCode && emailOrPhone ? (
                 <>
                   <Stack direction="column" sx={{ mb: 5 }}>
                     <Stack direction="row" alignItems="center">
@@ -138,7 +138,7 @@ export default function Login() {
                     >Kirim Ulang Kode OTP</Link>
                   </Stack>
                 </>
-              ) : (
+              ) : ( */}
                 <>
                   <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
                     <Logo sx={{ width: 90, height: 90 }} />
@@ -152,19 +152,16 @@ export default function Login() {
                     </Box>
                   </Stack>
 
-                  {emailOrPhoneForm ? (
+                  {/* {emailOrPhoneForm ? (
                     <LoginPhoneForm
                       setEmailOrPhone={setEmailOrPhone}
                       setLoginOrVerifyCode={setLoginOrVerifyCode}
                     />
-                  ) : (
-                    <LoginEmailForm
-                      setEmailOrPhone={setEmailOrPhone}
-                      setLoginOrVerifyCode={setLoginOrVerifyCode}
-                    />
-                  )}
+                  ) : ( */}
+                    <LoginEmailForm/>
+                  {/* )} */}
                 </>
-              )}
+              {/* )} */}
 
               {/* <Divider sx={{ marginTop: 5 }}>Atau</Divider>
 

frontend/client-portal/src/routes/index.tsx

@@ -314,6 +314,102 @@ export default function Router() {
           },
         ],
       },
+      {
+        path: 'user-role',
+        element: (
+            <AuthProvider>
+              <AuthGuard>
+                <DashboardLayout />
+              </AuthGuard>
+            </AuthProvider>
+          ),
+          children: [
+            {
+              element: <UserRole />,
+              index: true,
+            },
+          ],
+      },
+      {
+        path: 'user-role/create',
+        element: (
+            <AuthProvider>
+              <AuthGuard>
+                <DashboardLayout />
+              </AuthGuard>
+            </AuthProvider>
+          ),
+          children: [
+            {
+              element: <UserRoleCreate />,
+              index: true,
+            },
+          ],
+      },
+      {
+        path: 'user/role/:id/edit',
+        element: (
+            <AuthProvider>
+              <AuthGuard>
+                <DashboardLayout />
+              </AuthGuard>
+            </AuthProvider>
+          ),
+          children: [
+            {
+              element: <UserRoleCreate />,
+              index: true,
+            },
+          ],
+      },
+      {
+        path: 'user-access',
+        element: (
+            <AuthProvider>
+              <AuthGuard>
+                <DashboardLayout />
+              </AuthGuard>
+            </AuthProvider>
+          ),
+          children: [
+            {
+              element: <UserAccess />,
+              index: true,
+            },
+          ],
+      },
+      {
+        path: 'user-access/create',
+        element: (
+            <AuthProvider>
+              <AuthGuard>
+                <DashboardLayout />
+              </AuthGuard>
+            </AuthProvider>
+          ),
+          children: [
+            {
+              element: <UserAccessCreate />,
+              index: true,
+            },
+          ],
+      },
+      {
+        path: 'user/access/:id/edit',
+        element: (
+            <AuthProvider>
+              <AuthGuard>
+                <DashboardLayout />
+              </AuthGuard>
+            </AuthProvider>
+          ),
+          children: [
+            {
+              element: <UserAccessCreate />,
+              index: true,
+            },
+          ],
+      },
     { path: '*', element: <Navigate to="/404" replace /> },
   ]);
 }
@@ -361,3 +457,9 @@ const MasterFormulariumTemplateV2 = Loadable(lazy(() => import('../pages/Master/
 const MasterFormulariumTemplateCreateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/CreateUpdate')));
 const MasterFormulariumTemplateHistoriesV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/History')));
 const MasterFormulariumTemplateDetailV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Detail/Index')));
+
+// User Management
+const UserRole = Loadable(lazy(() => import('../pages/UserManagement/UserRole/Index')));
+const UserRoleCreate = Loadable(lazy(() => import('../pages/UserManagement/UserRole/CreateUpdate')));
+const UserAccess = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/Index')));
+const UserAccessCreate = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/CreateUpdate')));

frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx

@@ -1,42 +1,52 @@
 /* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
+import React, { useContext, useRef, useState, useEffect } from 'react';
 /* ---------------------------------- form ---------------------------------- */
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 /* ---------------------------------- @mui ---------------------------------- */
-import { Stack, Alert } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
+import { Link, Stack, Alert, IconButton, InputAdornment } from '@mui/material';
 /* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
 import useIsMountedRef from '../../../hooks/useIsMountedRef';
 /* ------------------------------- components ------------------------------- */
-import { FormProvider, RHFTextField } from '../../../components/hook-form';
+import Iconify from '../../../components/Iconify';
+import { FormProvider, RHFTextField, RHFCheckbox } from '../../../components/hook-form';
 import { enqueueSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
 
 /* ---------------------------------- types --------------------------------- */
 
-type LoginFormProps = {
-  setEmailOrPhone: Function;
-  setLoginOrVerifyCode: Function;
-};
+// type LoginFormProps = {
+//   setEmailOrPhone: Function;
+//   setLoginOrVerifyCode: Function;
+// };
 
 type FormValuesProps = {
   email: string;
+  password: string;
+  remember: boolean;
   afterSubmit?: string;
 };
 
 /* -------------------------------------------------------------------------- */
 
-export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
+export default function LoginForm() {
   const { login } = useAuth();
+  const navigate = useNavigate();
   const isMountedRef = useIsMountedRef();
+  const [showPassword, setShowPassword] = useState(false);
 
   const LoginSchema = Yup.object().shape({
-    email: Yup.string().email('Email must be a valid email address').required('Email is required'),
+    email: Yup.string().email('Format email tidak valid').required('Email harus diisi'),
+    password: Yup.string().required('Password harus diisi'),
   });
 
-  const defaultValues = {
+   const defaultValues = {
     email: '',
+    password: '',
+    remember: true,
   };
 
   const methods = useForm<FormValuesProps>({
@@ -51,17 +61,34 @@ export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: Log
     formState: { errors, isSubmitting },
   } = methods;
 
+  // const onSubmit = async (data: FormValuesProps) => {
+  //   try {
+  //     const loginResult  = await login(data.email, data.password, data.remember);
+  //     // setEmailOrPhone(data.email);
+  //     // setLoginOrVerifyCode(true);
+  //     // reset();
+  //     console.log('test');
+  //     navigate('/dashboard');
+  //     // enqueueSnackbar('Kode OTP telah dikirim, silahkan cek email dan spam folder', {
+  //     //   variant: 'success',
+  //     //   autoHideDuration: 5000,
+  //     // });
+  //   } catch (error: any) {
+  //     reset();
+  //     console.log(error, 'test');
+
+  //     if (isMountedRef.current) {
+  //       setError('afterSubmit', { ...error, message: error.data.message });
+  //     }
+  //   }
+  // };
+
   const onSubmit = async (data: FormValuesProps) => {
     try {
-      await login(data.email);
-      setEmailOrPhone(data.email);
-      setLoginOrVerifyCode(true);
-      reset();
-      enqueueSnackbar('Kode OTP telah dikirim, silahkan cek email dan spam folder', {
-        variant: 'success',
-        autoHideDuration: 5000,
-      });
-    } catch (error: any) {
+      const loginResult = await login(data.email, data.password, data.remember);
+       navigate('/dashboard');
+    } catch (error) {
+
       reset();
 
       if (isMountedRef.current) {
@@ -73,10 +100,25 @@ export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: Log
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
       <Stack spacing={3}>
-        <Alert severity="info">Masukkan akun yang telah terdaftar</Alert>
+        <Alert severity="info">Masukan Email atau Username dan Password</Alert>
         {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
 
         <RHFTextField name="email" label="Email address" />
+        <RHFTextField
+          name="password"
+          label="Password"
+          type={showPassword ? 'text' : 'password'}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
+                  <Iconify icon={showPassword ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          required
+        />
       </Stack>
 
       <LoadingButton

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

@@ -16,6 +16,12 @@ export type Corporate = {
   corporate_plans_count: number;
   corporate_benefits_count: number;
   employees_count: number;
+  phone: string;
+  phone_alarm_canter: string;
+  description_information: string;
+  linking_rules: string;
+  reason: string;
+  automatic_linking: number;
 
 };
 

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -104,7 +104,7 @@ const navConfig = [
           { title: 'Live Chat', path: '/report/live-chat' },
           { title: 'Linksehat Payment', path: '/report/linksehat-payments' },
           // { title: 'Prescription', path: '/report/prescription' },
-          { title: 'Doctor Rating', path: '/report/doctorrating' },
+          { title: 'Doctor Rating', path: '/report/doctor-rating' },
 
         ],
       },

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

@@ -254,6 +254,9 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       linking_rules: currentCorporate?.linking_rules || ['nric', 'nik', 'member_id'],
       type: currentCorporate?.type || 'corporate',
       logo: currentCorporate?.logo || '',
+      phone: currentCorporate?.phone || '',
+      phone_alarm_canter: currentCorporate?.phone_alarm_canter || '',
+      description_information: currentCorporate?.description_information || '',
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentCorporate]
@@ -327,6 +330,9 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       formData.append('policy_start', fPostFormat(data.policy_start));
       formData.append('policy_end', fPostFormat(data.policy_end));
       formData.append('linking_rules', data.linking_rules);
+      formData.append('description_information', data.description_information);
+      formData.append('phone', data.phone);
+      formData.append('phone_alarm_canter', data.phone_alarm_canter);
 
       // console.log('MOTHERFUCKER', data.linking_rules)
 
@@ -532,6 +538,12 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
               <Typography variant='subtitle1' color="#637381">Corporate Name*</Typography>
               <RHFTextField name="name" label="Corporate Name" disabled={isDisabled} />
 
+              <Typography variant='subtitle1' color="#637381">Corporate Phone</Typography>
+              <RHFTextField name="phone" label="Corporate Phone"  />
+              
+              <Typography variant='subtitle1' color="#637381">Alarm Center Phone</Typography>
+              <RHFTextField name="phone_alarm_canter" label="Alarm Center Phone" />
+
               <Typography variant='subtitle1' color="#637381">Payor ID*</Typography>
               <RHFTextField name="payor_id" label="Payor ID" disabled={isDisabled} />
 
@@ -560,6 +572,13 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                 <RHFEditor name="help_text" />
               </Stack>
 
+              <Stack spacing={1}>
+                <Typography variant="subtitle1" color="#637381">
+                  Description Letter of Guarantee
+                </Typography>
+                <RHFEditor name="description_information" />
+              </Stack>
+
               {/* <div>
                 <LabelStyle>Images</LabelStyle>
                 <RHFUploadMultiFile

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

@@ -60,6 +60,7 @@ import Label from '@/components/Label';
 import DialogUpdateStatus from '@/components/DialogUpdateStatus';
 import {Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import { fNumber } from '@/utils/formatNumber';
 
 
 export default function CorporatePlanList() {
@@ -478,7 +479,7 @@ export default function CorporatePlanList() {
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.type}</TableCell>
 
-          <TableCell align="left">{row.limit_rules}</TableCell>
+          <TableCell align="left">{row.limit_rules ? fNumber(row.limit_rules) : row.limit_rules}</TableCell>
 
           <TableCell align="center">
             {row.active == 1 ? 

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogBenefit.tsx

@@ -40,6 +40,11 @@ type BenefitSelected = {
     id: number,
     description: string,
     benefit_id: number,
+    family_plan: string,
+    family_plan_plans: string,
+    limit_amount: number,
+    limit_amount_plan: number,
+    max_frequency_period: number,
 }
 
 
@@ -54,6 +59,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
     const [valBenefitNameError, setValBenefitNameError] = useState('');
     const benefitNameData  = requestLog?.benefit;
     const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
+    const [isDisabled, setisDisable] = useState(false);
 
     const handleConditionChangeService = (event) => {
         const selectedItem = event.target.value;
@@ -186,15 +192,125 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
         }
     }
 
+    const totalUsage = () => {
+        let realTimeUsageMember = 0
+        for (let key in requestLog?.member_usage_benefit) {
+            if (requestLog?.member_usage_benefit.hasOwnProperty(key)) {
+                let value = requestLog?.member_usage_benefit[key];
+                // Menggunakan parseFloat() untuk mengonversi nilai menjadi angka
+                let numericValue = parseFloat(value);
+                // Memeriksa apakah numericValue adalah angka yang valid
+                if (!isNaN(numericValue)) {
+                    realTimeUsageMember += numericValue;
+                }
+            }
+        }
+
+        let totalAmountMember = 0
+        for (let key in benefitData) {
+            // Menambahkan nilai amount_approved ke totalAmount
+            totalAmountMember += Number(benefitData[key].amount_approved);
+        }
+
+        return realTimeUsageMember+totalAmountMember
+    }
+
     const handleOnChangeNominal = (key) => {
-        if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
-            // setValue(`benefit_data.${key}.amount_approved`, 0);
-            setError(`benefit_data.${key}.amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
+        if (benefitSelected[key].family_plan == 'S' || benefitSelected[key].family_plan == 'F'){
+            if (requestLog?.member_usage_benefit && benefitSelected[key] && benefitData[key]) {
+                let limitAmount = Number(benefitSelected[key].limit_amount) || 0;
+                let limitAmountPlan = Number(benefitSelected[key].limit_amount_plan) || 0;
+                // Periksa apakah limitAmount Benefit lebih besar dari realTimeUsage
+                if (limitAmountPlan != 999999999){
+                    let realTimeUsage = 0;
+                    let value = 0;
+                    for (let key in requestLog?.member_usage_benefit) {
+                        if (requestLog?.member_usage_benefit.hasOwnProperty(key)) {
+                            let value = requestLog?.member_usage_benefit[key];
+                            // Menggunakan parseFloat() untuk mengonversi nilai menjadi angka
+                            let numericValue = parseFloat(value);
+                            // Memeriksa apakah numericValue adalah angka yang valid
+                            if (!isNaN(numericValue)) {
+                                realTimeUsage += numericValue;
+                            }
+                        }
+                    }
+                    // console.log(benefitData, 'test')
+                    let totalAmount = 0;
+
+                    for (let key in benefitData) {
+                        // Menambahkan nilai amount_approved ke totalAmount
+                        totalAmount += Number(benefitData[key].amount_approved);
+                    }
+                    
+                    // Hitung penggunaan waktu nyata
+                    realTimeUsage += totalAmount;
+                    let excess = realTimeUsage - limitAmountPlan
+                    let incurred = Number(benefitData[key].amount_incurred);
+
+                    if (realTimeUsage ===  limitAmountPlan){
+                        setisDisable(true)
+                        setValue(`benefit_data.${key}.amount_not_approved`, incurred);
+                    } else {
+                        setisDisable(false)
+                    }
+                    if (limitAmountPlan < realTimeUsage) {
+                        setValue(`benefit_data.${key}.amount_not_approved`, excess);
+                        setValue(`benefit_data.${key}.amount_approved`, incurred - excess);
+                        setError(`benefit_data.${key}.amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmountPlan) } , silakan isikan di Amount Excess` });
+                    } else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
+                        setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
+                    } else {
+                        clearErrors(`benefit_data.${key}.amount_approved`);
+                    }
+                } else if (limitAmount != 999999999) { // Periksa apakah limitAmount Benefit lebih besar dari realTimeUsage
+                     // Konversi nilai ke angka dengan aman
+                    let memberUsage = Number(requestLog.member_usage_benefit[benefitSelected[key].id]) || 0;
+                    let amountApproved = Number(benefitData[key].amount_approved) || 0;
+                    // Hitung penggunaan waktu nyata
+                    let realTimeUsage = memberUsage + amountApproved;
+                    let value = realTimeUsage - limitAmount
+                  
+                    if (limitAmount < realTimeUsage) {
+                        setValue(`benefit_data.${key}.amount_not_approved`, value);
+                        setError(`benefit_data.${key}.amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmount) } , silakan isikan di Amount Excess` });
+                    } else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
+                        setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
+                    } else {
+                        clearErrors(`benefit_data.${key}.amount_approved`);
+                    }
+                } else {
+                    if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
+                        setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
+                    } else {
+                        clearErrors(`benefit_data.${key}.amount_approved`);
+                    }
+                }
+
+                if (totalAll().totalAmountApproved + totalAll().totalAmountNotApproved === totalAll().totalAmountIncurred) {
+                    clearErrors(`benefit_data.${key}.excess_paid`);
+                } else {
+                    setError(`benefit_data.${key}.excess_paid`, { message: 'Total Amount Excess tidak sama dengan Total Amount Incurred' });
+                }
+            }
         } else {
-            clearErrors(`benefit_data.${key}.amount_approved`);
+            if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
+                setError(`benefit_data.${key}.amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
+            } else {
+                clearErrors(`benefit_data.${key}.amount_approved`);
+            }
         }
     }
 
+    const handleOnChangeNotApprove = (key, value) => {
+        setValue(`benefit_data.${key}.excess_paid`, value);
+        if (totalAll().totalAmountApproved + totalAll().totalAmountNotApproved === totalAll().totalAmountIncurred) {
+            clearErrors(`benefit_data.${key}.excess_paid`);
+        } else {
+            setError(`benefit_data.${key}.excess_paid`, { message: 'Total Amount Excess tidak sama dengan Total Amount Incurred' });
+        }
+    };
+
     // Submit Form
     // =====================================
     const submitHandler = async (data: BenefitConfigurationListType) => {
@@ -318,6 +434,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
                                                     setValue(`benefit_data.${index}.amount_approved`, event.target.value)
                                                     handleOnChangeNominal(index)}
                                                 }
+                                                disabled={isDisabled} 
                                             />
                                         </Grid>
                                     </Grid>
@@ -338,6 +455,10 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
                                                 name={`benefit_data.${index}.amount_not_approved`}
                                                 placeholder='Amount Not Approved'
                                                 required
+                                                onChange={(event) => {
+                                                    setValue(`benefit_data.${index}.amount_not_approved`, event.target.value)
+                                                    handleOnChangeNotApprove(index, event.target.value)}
+                                                }
                                             />
                                         </Grid>
                                     </Grid>
@@ -432,7 +553,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
                         <Grid container spacing={2}>
                             <Grid item xs={6}>
                                 <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
-                                    Total Benefit
+                                    Total Benefit 
                                 </Typography>
                             </Grid>
                             
@@ -507,7 +628,21 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
                             </Grid>
                         </Box>
                     </Grid>
-
+                    <Grid item xs={12}>
+                        <Grid container spacing={2}>
+                            <Grid item xs={3}>
+                                <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
+                                    Total Usage / Limit 
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={6}>
+                                <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
+                                    {fNumber(totalUsage())} / {fNumber(benefitSelected[0].limit_amount_plan)  }
+                                </Typography>
+                            </Grid>
+                            
+                        </Grid>
+                    </Grid>
                 
                 </Grid>
 

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation copy.tsx

@@ -0,0 +1,206 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    approve: string;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
+
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState({
+        discharge_date: requestLog?.discharge_date,
+        id: requestLog?.id,
+        status: approve || '',
+        catatan: '',
+        icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
+    });
+    
+    const [icdOptions, setIcdOptions] = useState([
+        { value: '-', label: '-' }
+    ]);
+
+    useEffect(() => {
+        // Ambil data dari API dan atur opsi ICD
+        axios.get('diagnosis')
+            .then((response) => {
+                setIcdOptions(response.data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching ICD options:', error);
+            });
+    }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+    
+   
+    useEffect(() => {
+        // Update formData setiap kali approve berubah
+        setFormData(prevData => ({
+          ...prevData,
+          status: approve || '',
+        }));
+    }, [approve]);
+
+    const handleChange = (field, value) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [field]: value,
+        }));
+
+    };
+
+    const handleApprove = () => {
+        setFormData((prevData) => ({
+            ...prevData,
+            status: approve,
+        }));
+        handleSubmit();
+    };
+    
+
+    const handleSubmit = () => {
+        axios
+            .post(`customer-service/request/final-log`, formData)
+            .then((response) => {
+                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
+                setOpenDialog(false);
+                if (requestLog?.service_type == 'Inpatient'){
+                    navigate('/case_management/inpatient_monitoring');
+                } else {
+                    navigate('/custormer-service/final-log');
+                }
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+    }
+
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+   
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+                        </Stack>
+                    </Card>
+
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
+                            <TextField
+                                label="Discharge Date"
+                                variant="outlined"
+                                fullWidth
+                                type="date"
+                                value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
+                                onChange={(e) => handleChange('discharge_date', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
+                            <TextField
+                                label="Catatan"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.catatan}
+                                onChange={(e) => handleChange('catatan', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
+                            <Autocomplete
+                                multiple
+                                options={icdOptions}
+                                getOptionLabel={(option) => option.label}
+                                fullWidth
+                                value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
+                                onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}                    
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Diagnosis ICD - X"
+                                        variant="outlined"
+                                    />
+                                )}
+                            />
+                        </Stack>
+                    </Card>
+                </Grid>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+
+                    {approve == 'approved' ? (
+                        <Button color="primary"  variant="contained" onClick={() => handleApprove()}>Approve</Button>
+                    ) : (
+                        <Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
+                    ) }
+                    
+                </DialogActions>
+        </Stack>
+      );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Confirmation"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation.tsx

@@ -1,6 +1,5 @@
 import MuiDialog from "@/components/MuiDialog";
-import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
-import { Paper } from "@mui/material";
+import { Autocomplete, Button, Card, DialogActions, Grid, TextField, Typography } from "@mui/material";
 import { Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { DetailFinalLogType } from "../Model/Types";
@@ -26,25 +25,15 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
         id: requestLog?.id,
         status: approve || '',
         catatan: '',
-        icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
+        icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.value, label: diagnosis.label })) : []
     });
     
     const [icdOptions, setIcdOptions] = useState([
         { value: '-', label: '-' }
     ]);
 
-    useEffect(() => {
-        // Ambil data dari API dan atur opsi ICD
-        axios.get('diagnosis')
-            .then((response) => {
-                setIcdOptions(response.data.data);
-            })
-            .catch((error) => {
-                console.error('Error fetching ICD options:', error);
-            });
-    }, []); // useEffect dijalankan hanya sekali saat komponen dimount
-    
-   
+    const [searchIcd, setSearchIcd] = useState('');
+
     useEffect(() => {
         // Update formData setiap kali approve berubah
         setFormData(prevData => ({
@@ -58,7 +47,6 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
             ...prevData,
             [field]: value,
         }));
-
     };
 
     const handleApprove = () => {
@@ -68,7 +56,17 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
         }));
         handleSubmit();
     };
-    
+
+    const handleSearch = (search) => {
+        setSearchIcd(search);
+        axios.get('diagnosis?search=' + search)
+            .then((response) => {
+                setIcdOptions(response.data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching ICD options:', error);
+            });
+    }
 
     const handleSubmit = () => {
         axios
@@ -76,7 +74,7 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
             .then((response) => {
                 enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
                 setOpenDialog(false);
-                if (requestLog?.service_type == 'Inpatient'){
+                if (requestLog?.service_type === 'Inpatient') {
                     navigate('/case_management/inpatient_monitoring');
                 } else {
                     navigate('/custormer-service/final-log');
@@ -87,120 +85,117 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
             });
     }
 
-
     const style1 = {
         color: '#919EAB',
         width: '30%'
-    }
+    };
     const style2 = {
         width: '70%'
-    }
+    };
     const marginBottom1 = {
         marginBottom: 1,
-    }
+    };
     const marginBottom2 = {
         marginBottom: 2,
-    }
+    };
     const handleCloseDialog = () => {
         setOpenDialog(false);
-    }
-
-   
+    };
 
     const getContent = () => (
         <Stack spacing={1} marginTop={2}>
-            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
+            <Typography variant="subtitle2">Are you sure to {approve === 'approved' ? 'approve' : 'decline'} this final log?</Typography>
             <Grid item xs={12} md={12} marginTop={4}>
-                    <Card sx={{padding:2, marginTop:2}}  >
-                        <Stack direction='row' spacing={2} sx={marginBottom1}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
-                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom1}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
-                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom1}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
-                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom1}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
-                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom1}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
-                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom1}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
-                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
-                        </Stack>
-                    </Card>
+                <Card sx={{ padding: 2, marginTop: 2 }}>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+                    </Stack>
+                </Card>
 
-                    <Card sx={{padding:2, marginTop:2}}  >
-                        <Stack direction='row' spacing={2} sx={marginBottom2}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
-                            <TextField
-                                label="Discharge Date"
-                                variant="outlined"
-                                fullWidth
-                                type="date"
-                                value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
-                                onChange={(e) => handleChange('discharge_date', e.target.value)}
-                            />
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom2}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
-                            <TextField
-                                label="Catatan"
-                                variant="outlined"
-                                fullWidth
-                                value={formData.catatan}
-                                onChange={(e) => handleChange('catatan', e.target.value)}
-                            />
-                        </Stack>
-                        <Stack direction='row' spacing={2} sx={marginBottom2}>
-                            <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
-                            <Autocomplete
-                                multiple
-                                options={icdOptions}
-                                getOptionLabel={(option) => option.label}
-                                fullWidth
-                                value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
-                                onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}                    
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        label="Diagnosis ICD - X"
-                                        variant="outlined"
-                                    />
-                                )}
-                            />
-                        </Stack>
-                    </Card>
-                </Grid>
-                <DialogActions>
-                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                <Card sx={{ padding: 2, marginTop: 2 }}>
+                    <Stack direction='row' spacing={2} sx={marginBottom2}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
+                        <TextField
+                            label="Discharge Date"
+                            variant="outlined"
+                            fullWidth
+                            type="date"
+                            value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
+                            onChange={(e) => handleChange('discharge_date', e.target.value)}
+                        />
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom2}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
+                        <TextField
+                            label="Catatan"
+                            variant="outlined"
+                            fullWidth
+                            value={formData.catatan}
+                            onChange={(e) => handleChange('catatan', e.target.value)}
+                        />
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom2}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
+                        <Autocomplete
+                            multiple
+                            options={icdOptions}
+                            getOptionLabel={(option) => option.label}
+                            fullWidth
+                            value={formData.icdCodes}
+                            onChange={(e, newValues) => handleChange('icdCodes', newValues)}
+                            inputValue={searchIcd}
+                            onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
+                            renderInput={(params) => (
+                                <TextField
+                                    {...params}
+                                    label="Diagnosis ICD - X"
+                                    variant="outlined"
+                                />
+                            )}
+                        />
+                    </Stack>
+                </Card>
+            </Grid>
+            <DialogActions>
+                <Button variant="outlined" sx={{ color: '#212B36', borderColor: '#919EAB52' }} onClick={handleCloseDialog}>Cancel</Button>
 
-                    {approve == 'approved' ? (
-                        <Button color="primary"  variant="contained" onClick={() => handleApprove()}>Approve</Button>
-                    ) : (
-                        <Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
-                    ) }
-                    
-                </DialogActions>
+                {approve === 'approved' ? (
+                    <Button color="primary" variant="contained" onClick={handleApprove}>Approve</Button>
+                ) : (
+                    <Button color="error" variant="contained" onClick={handleApprove}>Decline</Button>
+                )}
+            </DialogActions>
         </Stack>
-      );
-
+    );
 
     return (
         <MuiDialog
-          title={{name: "Confirmation"}}
-          openDialog={openDialog}
-          setOpenDialog={setOpenDialog}
-          content={getContent()}
-          maxWidth="xl"
+            title={{ name: "Confirmation" }}
+            openDialog={openDialog}
+            setOpenDialog={setOpenDialog}
+            content={getContent()}
+            maxWidth="xl"
         />
-      );
-}
+    );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx

@@ -31,10 +31,19 @@ type DialogDeleteType = {
     total: any
 }
 
+type BenefitSelected = {
+    id: number,
+    description: string,
+    benefit_id: number,
+    family_plan: string,
+    limit_amount: number,
+}
+
 export default function DialogEditBenefit({id, data, setOpenDialog, openDialog, onSubmit, total} : DialogDeleteType ) { 
     const handleCloseDialog = () => {
         setOpenDialog(false);
     }
+    const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
 
      // setup form
     // ====================================
@@ -85,15 +94,70 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,
         }
     }
 
+    const findItemById = (id) => {
+        return total.benefit.find(item => item.id === id);
+    }
+
     const handleOnChangeNominal = (key) => {
-        if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
-            // setValue(`benefit_data.${key}.amount_approved`, 0);
-            setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
+        let benefitData = findItemById(data?.benefit_id)
+        if (benefitData.family_plan == 'S' || benefitData.family_plan == 'F'){
+            // Konversi nilai ke angka dengan aman
+            let limitAmount = Number(benefitData.limit_amount) || 0;
+            let limitAmountPlan = Number(benefitData.limit_amount_plan) || 0;
+          
+            if (limitAmountPlan != 999999999){             
+                let realTimeUsage = totalAll().totalAmountApproved;
+                console.log(limitAmountPlan, 'test')
+                if (limitAmountPlan < realTimeUsage) {
+                    setError(`amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmountPlan) } , silakan isikan di Amount Excess` });
+                } else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
+                    setError(`amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
+                } else {
+                    clearErrors(`amount_approved`);
+                }
+            } else if (limitAmount != 999999999) {
+                let memberUsage = Number(total.totalLimit[benefitData.id]) || 0;
+                let amountApproved = Number(parseFloat(watch('amount_approved'))) || 0;
+                // Hitung penggunaan waktu nyata
+                let realTimeUsage = memberUsage + amountApproved;
+                // Periksa apakah limitAmount lebih besar dari realTimeUsage
+                if (limitAmount < realTimeUsage) {
+                    setError(`amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmount) } , silakan isikan di Amount Excess` });
+                } else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
+                    // setValue(`benefit_data.${key}.amount_approved`, 0);
+                    setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
+                } else {
+                    clearErrors(`amount_approved`);
+                }
+            } else {
+                if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
+                    setError(`amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
+                } else {
+                    clearErrors(`amount_approved`);
+                }
+            }
         } else {
-            clearErrors(`amount_approved`);
+            if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
+                setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
+            } else {
+                clearErrors(`amount_approved`);
+            }
         }
     }
 
+    const handleOnChangeNotApprove = (key, value) => {
+        let amountApproved = Number(parseFloat(watch('amount_approved'))) || 0;
+        let amountNotApproved = Number(parseFloat(watch('amount_not_approved'))) || 0;
+        let amountIncurred = Number(parseFloat(watch('amount_incurred'))) || 0;
+        setValue(`excess_paid`, value);
+        console.log(amountApproved + amountNotApproved, amountIncurred, 'test')
+        if ((amountApproved + amountNotApproved) !== amountIncurred) {
+            setError(`amount_not_approved`, {message: 'Amount Not Approve tidak sama dengan total Amount Incurred'});
+        } else {
+            clearErrors(`amount_not_approved`);
+        }
+    };
+
     // if (totalAmountIncurred !== (totalAmountApproved+totalAmountNotApproved)){
     //     // alert('Total Incurred tidak sama dengan Total Approve + Total Not Approve')
     //     // setValue('amount_approved', data?.amount_approved)
@@ -203,6 +267,10 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,
                                             name={`amount_not_approved`}
                                             placeholder='Amount Not Approved'
                                             required
+                                            onChange={(event) => {
+                                                setValue(`amount_not_approved`, event.target.value)
+                                                handleOnChangeNotApprove(id, event.target.value)}
+                                            }
                                         />
                                     </Grid>
                                 </Grid>

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG copy.tsx

@@ -0,0 +1,284 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialog,  onSubmit} : DialogConfirmationType ) {
+
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState({
+        billing_no: requestLog?.billing_no,
+        invoice_no: requestLog?.invoice_no,
+        discharge_date: requestLog?.discharge_date,
+        id: requestLog?.id,
+        catatan: requestLog?.catatan,
+        icdCodes:  requestLog?.diagnosis
+        ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
+        : [],
+        reason: requestLog?.reason
+    });
+    
+    const [icdOptions, setIcdOptions] = useState([
+        { value: '-', label: '-' }
+    ]);
+
+    useEffect(() => {
+        // Ambil data dari API dan atur opsi ICD
+        axios.get('diagnosis')
+            .then((response) => {
+                setIcdOptions(response.data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching ICD options:', error);
+            });
+    }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+    
+    useEffect(() => {
+    if (requestLog) {
+      setFormData({
+        discharge_date: requestLog.discharge_date,
+        billing_no: requestLog.billing_no,
+        invoice_no: requestLog.invoice_no,
+        id: requestLog.id,
+        catatan: requestLog.catatan,
+        icdCodes: requestLog.diagnosis
+          ? requestLog.diagnosis.map(diagnosis => diagnosis.code)
+          : [],
+        reason: requestLog.reason
+      });
+    }
+  }, [requestLog]);
+
+    const handleChange = (field, value) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [field]: value,
+        }));
+        if (field === 'reason') {
+            setIsReasonSelected(!!value);
+        }
+
+    };
+
+    const handleApprove = () => {
+        setFormData((prevData) => ({
+            ...prevData,
+        }));
+        handleSubmit();
+    };
+    
+
+    const handleSubmit = () => {
+        if (isReasonSelected && formData.reason !== '') {
+            axios
+                .post(`customer-service/request/final-log`, formData)
+                .then((response) => {
+                    enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
+                    setOpenDialog(false);
+                    navigate('/custormer-service/final-log/detail/' + requestLog?.id)
+                    window.location.reload()
+                })
+                .catch(({ response }) => {
+                    enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+                });
+        } else {
+            setIsReasonSelected(false);
+            alert('Silakan pilih alasan sebelum mengirimkan data.');
+        }
+    }
+
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
+
+    const resetForm = () => {
+        setFormData({
+            discharge_date: requestLog?.discharge_date,
+            id: requestLog?.id,
+            billing_no: requestLog?.billing_no,
+            invoice_no: requestLog?.invoice_no,
+            catatan: requestLog?.catatan,
+            icdCodes: requestLog?.diagnosis
+            ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
+            : [],
+            reason: requestLog?.reason 
+        });
+    };
+
+    const [isReasonSelected, setIsReasonSelected] = useState(true);
+    
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+        resetForm();
+    }
+
+    const reasons = [
+        { value: 'agreement', label: 'Agreement changed' },
+        { value: 'endorsement', label: 'Endorsement' },
+        { value: 'renewal', label: 'Renewal' },
+        { value: 'wrong_setting', label: 'Wrong Setting' },
+        // Add more options as needed
+    ];
+
+   
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to edit this final log ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+                        </Stack>
+                    </Card>
+
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
+                            <TextField
+                                label="Invoice Number"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.invoice_no}
+                                onChange={(e) => handleChange('invoice_no', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
+                            <TextField
+                                label="Billing Number"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.billing_no}
+                                onChange={(e) => handleChange('billing_no', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
+                            <TextField
+                                label="Discharge Date"
+                                variant="outlined"
+                                fullWidth
+                                type="date"
+                                value={formData.discharge_date ? fDateOnly(formData.discharge_date) : '-'}
+                                onChange={(e) => handleChange('discharge_date', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
+                            <TextField
+                                label="Catatan"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.catatan}
+                                onChange={(e) => handleChange('catatan', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
+                            <Autocomplete
+                                multiple
+                                options={icdOptions}
+                                getOptionLabel={(option) => option.label}
+                                fullWidth
+                                value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
+                                onChange={(e, newValues) => {
+                                    const selectedCodes = newValues.map((value) => value.value);
+                                    setFormData({ ...formData, icdCodes: selectedCodes });
+                                }}                 
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Diagnosis ICD - X"
+                                        variant="outlined"
+                                    />
+                                )}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                            <Autocomplete
+                                options={reasons}
+                                getOptionLabel={(option) => option.label}
+                                fullWidth
+                                value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                                onChange={(e, newValue) => handleChange('reason', newValue?.value)}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Reason"
+                                        variant="outlined"
+                                        required
+                                        error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                        helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+
+                                    />
+                                )}
+                            />
+                        </Stack>
+                    </Card>
+                </Grid>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                    <Button color="primary"  variant="contained" onClick={() => handleApprove()}>Update</Button>
+                </DialogActions>
+        </Stack>
+      );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Update"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG.tsx

@@ -26,9 +26,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
         discharge_date: requestLog?.discharge_date,
         id: requestLog?.id,
         catatan: requestLog?.catatan,
-        icdCodes:  requestLog?.diagnosis
-        ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
-        : [],
+        icdCodes:  requestLog?.diagnosis,
         reason: requestLog?.reason
     });
     
@@ -36,8 +34,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
         { value: '-', label: '-' }
     ]);
 
+    const [searchIcd, setSearchIcd] = useState('');
+
     useEffect(() => {
-        // Ambil data dari API dan atur opsi ICD
+       // Ambil data dari API dan atur opsi ICD
         axios.get('diagnosis')
             .then((response) => {
                 setIcdOptions(response.data.data);
@@ -45,23 +45,23 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
             .catch((error) => {
                 console.error('Error fetching ICD options:', error);
             });
+        
     }, []); // useEffect dijalankan hanya sekali saat komponen dimount
     
     useEffect(() => {
-    if (requestLog) {
-      setFormData({
-        discharge_date: requestLog.discharge_date,
-        billing_no: requestLog.billing_no,
-        invoice_no: requestLog.invoice_no,
-        id: requestLog.id,
-        catatan: requestLog.catatan,
-        icdCodes: requestLog.diagnosis
-          ? requestLog.diagnosis.map(diagnosis => diagnosis.code)
-          : [],
-        reason: requestLog.reason
-      });
-    }
-  }, [requestLog]);
+        if (requestLog) {
+        setFormData({
+            discharge_date: requestLog.discharge_date,
+            billing_no: requestLog.billing_no,
+            invoice_no: requestLog.invoice_no,
+            id: requestLog.id,
+            catatan: requestLog.catatan,
+            icdCodes: requestLog.diagnosis,
+            reason: requestLog.reason
+        });
+        }
+    }, [requestLog]);
+
 
     const handleChange = (field, value) => {
         setFormData((prevData) => ({
@@ -80,6 +80,17 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
         }));
         handleSubmit();
     };
+
+    const handleSearch = (search) => {
+        setSearchIcd(search);
+        axios.get('diagnosis?search=' + search)
+            .then((response) => {
+                setIcdOptions(response.data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching ICD options:', error);
+            });
+    }
     
 
     const handleSubmit = () => {
@@ -100,8 +111,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
             alert('Silakan pilih alasan sebelum mengirimkan data.');
         }
     }
-
-
+    
     const style1 = {
         color: '#919EAB',
         width: '30%'
@@ -123,13 +133,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
             billing_no: requestLog?.billing_no,
             invoice_no: requestLog?.invoice_no,
             catatan: requestLog?.catatan,
-            icdCodes: requestLog?.diagnosis
-            ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
-            : [],
+            icdCodes: requestLog?.diagnosis,
             reason: requestLog?.reason 
         });
     };
-
     const [isReasonSelected, setIsReasonSelected] = useState(true);
     
     const handleCloseDialog = () => {
@@ -227,11 +234,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
                                 options={icdOptions}
                                 getOptionLabel={(option) => option.label}
                                 fullWidth
-                                value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
-                                onChange={(e, newValues) => {
-                                    const selectedCodes = newValues.map((value) => value.value);
-                                    setFormData({ ...formData, icdCodes: selectedCodes });
-                                }}                 
+                                value={formData.icdCodes}
+                                onChange={(e, newValues) => handleChange('icdCodes', newValues)}
+                                inputValue={searchIcd}
+                                onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}
@@ -247,7 +253,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
                                 options={reasons}
                                 getOptionLabel={(option) => option.label}
                                 fullWidth
-                                value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                                value={reasons.find((r) => r.value == formData.reason) || null} // Use find to match the default value
                                 onChange={(e, newValue) => handleChange('reason', newValue?.value)}
                                 renderInput={(params) => (
                                     <TextField

frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx

@@ -140,6 +140,8 @@ export default function Detail() {
         totalAmountApproved :  totalAmountApprove,
         totalAmountNotApproved :  totalAmountNotApprove,
         totalExcessPaid :  totalExcessPaid,
+        totalLimit : requestLog?.member_usage_benefit,
+        benefit : requestLog?.benefit,
     }
     // Handle Delete File LOG
     const [pathFile, setPathFile] = useState('')
@@ -254,7 +256,7 @@ export default function Detail() {
                                 {requestLog?.diagnosis?.length > 0 ? (
                                     <ul>
                                         {requestLog.diagnosis.map((diagnosisItem, index) => (
-                                            <li key={index}>{diagnosisItem.code} - {diagnosisItem.name}</li>
+                                            <li key={index}>{diagnosisItem.value} - {diagnosisItem.label}</li>
                                             // Replace 'name' with the property you want to display
                                         ))}
                                     </ul>

frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx

@@ -61,12 +61,13 @@ export type DetailFinalLogType = {
     exclusion           : Exclusion[],
     medicine            : Medicine[],
     files               : file[],
+    member_usage_benefit : number
 }
 
 export type Diagnosis = {
     id : number,
-    name : string,
-    code : string
+    value : string,
+    label : string
 }
 
 export type BenefitData = {
@@ -85,6 +86,7 @@ export type BenefitData = {
 export type BenefitConfigurationListType = {
     request_log_id: number|undefined,
     benefit_name: string,
+    benefit_id: number,
     benefit: {
         description: string
     },

frontend/dashboard/src/pages/Report/DoctorRating_v2/Index.tsx

@@ -0,0 +1,35 @@
+import { Card, Grid, Container } 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 List from './List';
+
+export default function Index() {
+    const { themeStretch } = useSettings();
+
+    const { id } = useParams();
+
+    const pageTitle = 'Doctor Ratings';
+    return (
+        <Page title={pageTitle}>
+        <Container maxWidth={themeStretch ? false : 'xl'}>
+            <HeaderBreadcrumbs
+            heading={pageTitle}
+            links={[
+                {
+                name: 'Report',
+                href: '#',
+                },
+                {
+                name: 'Doctor Ratings',
+                href: '/report/doctor-rating',
+                },
+            ]}
+            />
+
+            <List />
+        </Container>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/Report/KatalogDokter/Index.tsx

@@ -0,0 +1,35 @@
+import { Card, Grid, Container } 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 List from './List';
+
+export default function Index() {
+    const { themeStretch } = useSettings();
+
+    const { id } = useParams();
+
+    const pageTitle = 'Katalog Dokter & Profile';
+    return (
+        <Page title={pageTitle}>
+        <Container maxWidth={themeStretch ? false : 'xl'}>
+            <HeaderBreadcrumbs
+            heading={pageTitle}
+            links={[
+                {
+                name: 'Report',
+                href: '#',
+                },
+                {
+                name: 'Katalog Dokter & Profile',
+                href: '/report/katalog-dokter',
+                },
+            ]}
+            />
+
+            <List />
+        </Container>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/Report/Prescription/Index.tsx

@@ -1,37 +1,35 @@
 import { Card, Grid, Container } 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 List from '../Prescription/List';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import Page from '../../../components/Page';
+import useSettings from '../../../hooks/useSettings';
+import List from './List';
 
-export default function Prescription(){
-    const { themeStretch } = useSettings();
+export default function LinksehatPayments() {
+  const { themeStretch } = useSettings();
 
-    const { id } = useParams();
+  const { id } = useParams();
 
-    const pageTitle = 'Prescription';
+  const pageTitle = 'Resep Online';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            {
+              name: 'Report',
+              href: '/report',
+            },
+            {
+              name: 'Resep Online',
+              href: '/report/prescription',
+            },
+          ]}
+        />
 
-    return(
-        <Page title = {pageTitle}>
-            <Container maxWidth = {themeStretch ? false : 'xl'}>
-                <HeaderBreadcrumbs heading= {pageTitle}
-                links={[
-                    {
-                        name: 'Report',
-                        href: '/report',
-
-                    },
-                    {
-                        name: 'Prescription',
-                        href: '/prescription',
-                    },
-                ]}
-                />
-
-                <List/>
-
-            </Container>
-        </Page>
-    );
-}
+        <List />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/Prescription/List.tsx

@@ -26,6 +26,8 @@ import {
   Autocomplete,
   InputAdornment,
   IconButton,
+  InputLabel,
+  Menu,
 } from '@mui/material';
 
 import {
@@ -39,6 +41,7 @@ import {
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
 // components
+import AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import { Icd } from '../../../@types/diagnosis';
@@ -49,9 +52,8 @@ import { Props } from '../../../components/editor/index';
 import { red } from '@mui/material/colors';
 import { margin, padding } from '@mui/system';
 import { enqueueSnackbar } from 'notistack';
+import { fNumber } from '@/utils/formatNumber';
 import { Controller } from 'react-hook-form';
-import { User } from '../../../Models/User';
-
 
 import SvgIconStyle from '../../../components/SvgIconStyle';
 import { GridSearchIcon } from '@mui/x-data-grid';
@@ -59,370 +61,520 @@ import { Search } from '@mui/icons-material';
 import { Icon } from '@iconify/react';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { MenuItem } from '@mui/material';
+import { fDateOnly, fDateTime } from '@/utils/formatTime';
+import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
+import { LoadingButton } from '@mui/lab';
+import UploadIcon from '@mui/icons-material/Upload';
 
-export default function List(){
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
 
   const navigate = useNavigate();
   const { organization_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [organizationOptions, setOrganizationOptions] = useState([]);
+  const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
   const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
   const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
   const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
 
+  useEffect(() => {
+    // axios.get(`/search-organizations`).then((response) => {
+    //   setOrganizationOptions(response.data);
+    // });
+  }, []);
+
   function Filter(props: any) {
-      // SEARCH
-      const searchInput = useRef<HTMLInputElement>(null);
-      const [searchText, setSearchText] = useState('');
-  
-      //handle search
-      const handleSearchChange = (event: any) => {
-        const newSearchText = event.target.value ?? '';
-        setSearchText(newSearchText);
-      };
-  
-      const handleSearchSubmit = (event: any) => {
-        event.preventDefault();
-  
-        props.onSearch(searchText);
-      };
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+    const [importLoading, setImportLoading] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
 
-      useEffect(() => {
-          // Trigger First Search
-          setSearchText(searchParams.get('search') ?? '');
-        }, []);
-    
-        const item = [
-          {
-            id: '',
-            value: '',
-            name: 'Semua',
-          },
-        ];
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
 
-        return (
-          <form style={{ width: '100%' }}>
-              <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-              <Grid item xs={12} sm={12} md={12} lg={12}>
-                  <TextField
-                  id="search-input"
-                  ref={searchInput}
-                  variant="outlined"
-                  fullWidth
-                  onChange={handleSearchChange}
-                  onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                      handleSearchSubmit(event);
+    /* ------------------------------ handle params ----------------------------- */
+    const [appliedParams, setAppliedParams] = useState({});
+    const params = {
+      searchParams: searchParams,
+      setSearchParams: setSearchParams,
+      appliedParams: appliedParams,
+      setAppliedParams: setAppliedParams,
+    };
+
+    const handleGetData = (type :string) => {
+      const parameters =
+      Object.keys(appliedParams).length !== 0
+        ? appliedParams
+        : Object.fromEntries([...searchParams.entries()]);
+      setImportLoading(true);
+      axios.get('/linksehat/prescription/generate-excel', {
+        params: { ...parameters },
+      }).then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+        setImportLoading(false);
+      });
+      // axios.get(`report/logs/export`)
+      //   .then((response) => {
+      //     const link = document.createElement('a');
+      //     link.href = response.data.data.file_url;
+      //     link.setAttribute('download', response.data.data.file_name);
+      //     document.body.appendChild(link);
+      //     link.click();
+      //     handleClose();
+      //   })
+    }
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+
+      props.onSearch(searchText);
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+   
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item md={7}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  // handleSearchSubmit(event);
+
+                  const filter = Object.fromEntries([
+                    ...searchParams.entries(),
+                    ['search', searchText],
+                  ]);
+                  setSearchParams(filter);
+                  loadDataTableData(filter);
+                }
+              }}
+              label="Search"
+              value={searchText}
+              InputProps={{
+                // startAdornment: (
+                //   <InputAdornment position="start">
+                //     <Search />
+                //   </InputAdornment>
+                // ),
+                placeholder: 'Nama Pasien',
+              }}
+            />
+          </Grid>
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('prescription_start')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = value ? fDateOnly(value) : '';
+                      var entries = [...searchParams.entries(), ['prescription_start', date ?? '']];
+                      if (!searchParams.get('prescription_end')) {
+                        entries = [...entries, ['prescription_end', date ?? '']];
                       }
-                  }}
-                  value={searchText}
-                  InputProps={{
-                      startAdornment: (
-                      <InputAdornment position="start">
-                          <Search />
-                      </InputAdornment>
-                      ),
-                      placeholder: 'Search',
-                  }}
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('prescription_end')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = fDateOnly(value);
+                      var entries = [...searchParams.entries(), ['prescription_end', date ?? '']];
+                      if (!searchParams.get('prescription_start')) {
+                        entries = [...entries, ['prescription_start', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
                   />
-              </Grid>
-              </Grid>
-          </form> 
-        );
-}
-function FilterForm(props: any) {
-  return(
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={1}>
+          <LoadingButton
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              onClick={handleClick}
+              loading={importLoading}
+            >
+              Export
+            </LoadingButton>
+            <Menu
+                id="import-button"
+                anchorEl={anchorEl}
+                open={createMenu}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'basic-button',
+                }}
+              >
+                <MenuItem onClick={() => {handleGetData('')}}>Download Excel</MenuItem>
+            </Menu>
+            </Grid>
+        </Grid>
+      </form>
+    );
+  }
+
+  function FilterForm(props: any) {
+    // IMPORT
+    return (
       <Grid
-      container
-      spacing={2}
-      sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
-    >
-      <Grid item xs={12} md={12} lg={12}>
-        <Filter onSearch={applyItems} />
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+          <Filter onSearch={applyItems} />
+        </Grid>
       </Grid>
-    </Grid>
-  );
-}
+    );
+  }
 
-function createData(doctor: Practitioner): Practitioner {
-  return {
-    ...doctor,
-    /* user: doctor.user ? new User(doctor.user) : null; */
-  };
-}
+  //TODO Create PaymentType
+  function createData(payments: any): any {
+    return {
+      ...payments,
+    };
+  }
 
-function Row(props: { row: ReturnType<typeof createData> }) {
-  const { row } = props;
-  const [open, setOpen] = React.useState(false);
-  const [openDialog, setOpenDialog] = React.useState(false);
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(true);
+    const [openDialog, setOpenDialog] = React.useState(false);
 
+    const handleDelete = (model: any) => {
+      axios
+        .delete(`/doctors/${row.id}`)
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.filter((model) => model.id != row.id),
+          });
+          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
 
+    return (
+      <React.Fragment>
+        <TableRow>
+          <TableCell>
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.prescription_code ?? '-'}</TableCell>
+          <TableCell align="left">{row.date_consultation ? fDateTime(row.date_consultation) : '-'}</TableCell>
+          <TableCell align="left">{row.patient_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.doctor_name ?? '-'}</TableCell>
+          {/* <TableCell align="center">
+            <ButtonGroup variant="text" aria-label="text button group">
+              <Link to={'/report/appointments/' + row.id + '/show'}>
+                <Button>
+                  <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </TableCell> */}
+        </TableRow>
 
-  return (
-    <React.Fragment>
-      <TableRow>
-        <TableCell>
-          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-            {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-          </IconButton>
-        </TableCell>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell
+            style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
+            colSpan={12}
+          >
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
+                <Grid container>
+                  <Grid item xs={12} sx={{ padding: 2 }}>
+                    <Grid container>
+                      <Grid item style={headStyle} xs={4}>
+                        Jenis Obat (Drugs)
+                      </Grid>
+                      <Grid item style={headStyle} xs={4}>
+                        Jumlah Obat (QTY)
+                      </Grid>
+                      <Grid item style={headStyle} xs={4}>
+                        Cara Minum Obat
+                      </Grid>
 
-        <TableCell align="left">{row.user ? row.user.sFirstName : '-'}</TableCell>
-        <TableCell align="left">{row.nIDDokter ? row.nIDDokter : '-'}</TableCell>
-        <TableCell align="left">{row.nRating ? row.nRating : '-'}</TableCell>
-        <TableCell align="left">{row.sNotes ? row.sNotes : '-'}</TableCell>
-        <TableCell align="left">{row.dCreateOn ? row.dCreateOn : '-'}</TableCell>
+                      {row.items?.map((item) => (
+                        <React.Fragment key={item.nID}>
+                          <Grid item xs={4}>
+                            <Typography>{item.sItemName}</Typography>
+                          </Grid>
+                          <Grid item xs={4}>
+                            <Typography>{item.nQty}</Typography>
+                          </Grid>
+                          <Grid item xs={4}>
+                            <Typography>{item.sSigna}</Typography>
+                          </Grid>
+                        </React.Fragment>
+                      ))}
 
-        {/* <TableCell align="center">
-          <ButtonGroup variant="text" aria-label="text button group">
-            <Link to={'/report/prescription/' + row.id + '/show'}>
-              <Button>
-                <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
-              </Button>
-            </Link>
-          </ButtonGroup>
-        </TableCell> */}
-      </TableRow>
-      {/* COLLAPSIBLE ROW */}
-      <TableRow>
-        <TableCell
-          style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
-          colSpan={6}
-        >
-{/*             <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
-              <Grid container>
-                <Grid item xs={12} sx={{ padding: 2 }}>
-                  <Grid container>
-                    <Grid item xs={6}>
-                      Metode Pembayaran
-                    </Grid>
-                    <Grid item xs={6}>
-                      : {row.payment_method ? row.payment_method : '-'}
-                    </Grid>
-
-                    <Grid item xs={6}>
-                      Jenis Benefit
-                    </Grid>
-                    <Grid item xs={6}>
-                      : -
-                    </Grid>
-                    <Grid item xs={6}>
-                      Durasi
-                    </Grid>
-                    <Grid item xs={6}>
-                      : {row.duration ? row.duration : '-'}
                     </Grid>
                   </Grid>
                 </Grid>
-              </Grid>
-            </Box>
-          </Collapse> */}
-        </TableCell>
-      </TableRow>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+  
+        {/* END COLLAPSIBLE ROW */}
 
-      {/* END COLLAPSIBLE ROW */}
-      <Dialog
-        open={openDialog}
-        onClose={() => {
-          setOpenDialog(false);
-        }}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogContent sx={{ p: 5 }}>
-          <Icon
-            icon="eva:trash-2-outline"
-            style={{
-              width: '100px',
-              height: '100px',
-              color: '#FF0000',
-              margin: 'auto',
-              display: 'block',
-              marginBottom: '20px',
-              alignContent: 'center',
-            }}
-          />
-          <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
-            Apakah anda yakin ingin menghapus
-          </DialogContentText>
-          <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
-            {row.name}?
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              setOpenDialog(false);
-            }}
-            color="primary"
-          >
-            Batal
-          </Button>
-          {/* <Button
-            onClick={() => {
-              handleDelete(row.id);
-            }}
-            color="primary"
-            autoFocus
-          >
-            Hapus
-          </Button> */}
-        </DialogActions>
-      </Dialog>
-    </React.Fragment>
+        <Dialog
+          open={openDialog}
+          onClose={() => {
+            setOpenDialog(false);
+          }}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogContent sx={{ p: 5 }}>
+            <Icon
+              icon="eva:trash-2-outline"
+              style={{
+                width: '100px',
+                height: '100px',
+                color: '#FF0000',
+                margin: 'auto',
+                display: 'block',
+                marginBottom: '20px',
+                alignContent: 'center',
+              }}
+            />
+            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
+              Apakah anda yakin ingin menghapus
+            </DialogContentText>
+            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
+              {row.name}?
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpenDialog(false);
+              }}
+              color="primary"
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={() => {
+                handleDelete(row.id);
+              }}
+              color="primary"
+              autoFocus
+            >
+              Hapus
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/linksehat/prescription', {
+      params: filter,
+    });
+    setDataTableLoading(false);
+    setDataTableData(response.data.data);
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterPaymentStatus: string,
+    searchFilterAppointmentStart: string,
+    searchFilterAppointmentEnd: string
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      prescription_start: searchFilterAppointmentStart,
+      prescription_end: searchFilterAppointmentEnd,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      prescription_start: searchFilterAppointmentStart,
+      prescription_end: searchFilterAppointmentEnd,
+    });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      {/* <Ambulace /> */}
+
+      <Card sx={{ marginTop: '30px' }}>
+        <FilterForm sx={{ marginTop: '100px' }} />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell>
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Prescription Code
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Date
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Patient
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Doctor
+                </TableCell>
+                {/* <TableCell style={headStyle} align="center">
+                  Aksi
+                </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.nID} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
   );
 }
-  
-const headStyle = {
-  fontWeight: 'bold',
-};
-// Dummy Default Data
-const [dataTableIsLoading, setDataTableLoading] = useState(true);
-const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
-const [dataTableResponseState, setDataTableResponseState] = useState('idle');
-const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
-  current_page: 1,
-  data: [],
-  path: '',
-  first_page_url: '',
-  last_page: 1,
-  last_page_url: '',
-  next_page_url: '',
-  prev_page_url: '',
-  per_page: 10,
-  from: 0,
-  to: 0,
-  total: 0,
-});
-const [dataTablePage, setDataTablePage] = useState(5);
-
-const loadDataTableData = async (appliedFilter: any | null = null) => {
-  setDataTableLoading(true);
-  const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-  const response = await axios.get('/doctorrating ', {
-    params: filter,
-  });
-  setDataTableLoading(false);
-  setDataTableData(response.data);
-};
-
-// const applyFilter = async (searchFilter: string) => {
-//   await loadDataTableData({ search: searchFilter });
-//   setSearchParams({ search: searchFilter });
-// };
-
-const applyItems = async (
-  searchFilter: string,
-  searchFilterOrganization: string,
-  searchFilterSpecialities: string
-) => {
-  await loadDataTableData({
-    search: searchFilter,
-    organization_id: searchFilterOrganization,
-    speciality_id: searchFilterSpecialities,
-  });
-  setSearchParamsFilter({
-    search: searchFilter,
-    organization_id: searchFilterOrganization,
-    speciality_id: searchFilterSpecialities,
-  });
-};
-
-const handlePageChange = (event: ChangeEvent, value: number) => {
-  const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
-  loadDataTableData(filter);
-  setSearchParams(filter);
-};
-
-useEffect(() => {
-  loadDataTableData();
-}, []);
-
-return (
-  <Stack>
-    {/* <Ambulace /> */}
-
-    <Card sx={{ marginTop: '30px' }}>
-      <FilterForm sx={{ marginTop: '100px' }} />
-
-      {/* The Main Table */}
-      <TableContainer component={Paper}>
-        <Table>
-          <TableBody>
-            <TableRow>
-              {/* <TableCell colSpan={8} rowSpan={1} align="center" /> */}
-              <TableCell style={headStyle} align="left" />
-              <TableCell style={headStyle} rowSpan={2} align="left">
-                Nama User
-              </TableCell>
-              <TableCell style={headStyle} rowSpan={2} align="left">
-                ID Dokter
-              </TableCell>
-              <TableCell style={headStyle} rowSpan={2} align="left">
-                Rating
-              </TableCell>
-              <TableCell style={headStyle} rowSpan={2} align="left">
-                Notes
-              </TableCell>
-              <TableCell style={headStyle} rowSpan={2} align="left">
-                Created On
-              </TableCell>
-
-            </TableRow>
-{/*               <TableRow>
-              <TableCell style={headStyle} align="left" />
-              <TableCell style={headStyle} align="left">
-                Tanggal Booking
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Tanggal Appointment
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Faskes
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Nama Dokter
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Spesialisasi
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Pasien
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Dokter
-              </TableCell>
-            </TableRow> */}
-          </TableBody>
-          {dataTableIsLoading ? (
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={8} align="center">
-                  Loading
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          ) : (dataTableData.data && dataTableData.data.length === 0) ? (
-
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={8} align="center">
-                  No Data
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          ) : (
-            <TableBody>
-              {dataTableData && dataTableData.map((row) => (
-                <Row key={row.id} row={row} />
-              ))}
-            </TableBody>
-          )}
-        </Table>
-      </TableContainer>
-
-      <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-    </Card>
-  </Stack>
-);
-}

frontend/dashboard/src/pages/Report/RiwayatMedisPeserta/Index.tsx

@@ -0,0 +1,35 @@
+import { Card, Grid, Container } 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 List from './List';
+
+export default function LinksehatPayments() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const pageTitle = 'Riwayat Medis Peserta';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            {
+              name: 'Report',
+              href: '/report',
+            },
+            {
+              name: 'Riwayat Medis Peserta',
+              href: '/report/phr',
+            },
+          ]}
+        />
+
+        <List />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/RiwayatMedisPeserta/List.tsx

@@ -0,0 +1,550 @@
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  ButtonGroup,
+  Grid,
+  Chip,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  FormControl,
+  Autocomplete,
+  InputAdornment,
+  IconButton,
+  InputLabel,
+  Menu,
+} from '@mui/material';
+
+import {
+  Link,
+  NavLink as RouterLink,
+  useSearchParams,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+// components
+import AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+import { Practitioner } from '../../../@types/doctor';
+import CreateIcon from '@mui/icons-material/Create';
+import { Props } from '../../../components/editor/index';
+import { red } from '@mui/material/colors';
+import { margin, padding } from '@mui/system';
+import { enqueueSnackbar } from 'notistack';
+import { fNumber } from '@/utils/formatNumber';
+import { Controller } from 'react-hook-form';
+
+import SvgIconStyle from '../../../components/SvgIconStyle';
+import { GridSearchIcon } from '@mui/x-data-grid';
+import { Search } from '@mui/icons-material';
+import { Icon } from '@iconify/react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { MenuItem } from '@mui/material';
+import { fDateOnly, fDateTime } from '@/utils/formatTime';
+import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
+import { LoadingButton } from '@mui/lab';
+import UploadIcon from '@mui/icons-material/Upload';
+
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
+
+  const navigate = useNavigate();
+  const { organization_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [organizationOptions, setOrganizationOptions] = useState([]);
+  const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
+  const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
+  const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
+  const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
+
+  useEffect(() => {
+    // axios.get(`/search-organizations`).then((response) => {
+    //   setOrganizationOptions(response.data);
+    // });
+  }, []);
+
+  function Filter(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+    const [importLoading, setImportLoading] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    /* ------------------------------ handle params ----------------------------- */
+    const [appliedParams, setAppliedParams] = useState({});
+    const params = {
+      searchParams: searchParams,
+      setSearchParams: setSearchParams,
+      appliedParams: appliedParams,
+      setAppliedParams: setAppliedParams,
+    };
+
+    const handleGetData = (type :string) => {
+      const parameters =
+      Object.keys(appliedParams).length !== 0
+        ? appliedParams
+        : Object.fromEntries([...searchParams.entries()]);
+      setImportLoading(true);
+      axios.get('/linksehat/phr/generate-excel', {
+        params: { ...parameters },
+      }).then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+        setImportLoading(false);
+      });
+      // axios.get(`report/logs/export`)
+      //   .then((response) => {
+      //     const link = document.createElement('a');
+      //     link.href = response.data.data.file_url;
+      //     link.setAttribute('download', response.data.data.file_name);
+      //     document.body.appendChild(link);
+      //     link.click();
+      //     handleClose();
+      //   })
+    }
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+
+      props.onSearch(searchText);
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+   
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item md={7}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  // handleSearchSubmit(event);
+
+                  const filter = Object.fromEntries([
+                    ...searchParams.entries(),
+                    ['search', searchText],
+                  ]);
+                  setSearchParams(filter);
+                  loadDataTableData(filter);
+                }
+              }}
+              label="Search"
+              value={searchText}
+              InputProps={{
+                // startAdornment: (
+                //   <InputAdornment position="start">
+                //     <Search />
+                //   </InputAdornment>
+                // ),
+                placeholder: 'Nama Pasien',
+              }}
+            />
+          </Grid>
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('livechat_start')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = value ? fDateOnly(value) : '';
+                      var entries = [...searchParams.entries(), ['livechat_start', date ?? '']];
+                      if (!searchParams.get('livechat_end')) {
+                        entries = [...entries, ['livechat_end', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('livechat_end')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = fDateOnly(value);
+                      var entries = [...searchParams.entries(), ['livechat_end', date ?? '']];
+                      if (!searchParams.get('livechat_start')) {
+                        entries = [...entries, ['livechat_start', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={1}>
+          <LoadingButton
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              onClick={handleClick}
+              loading={importLoading}
+            >
+              Export
+            </LoadingButton>
+            <Menu
+                id="import-button"
+                anchorEl={anchorEl}
+                open={createMenu}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'basic-button',
+                }}
+              >
+                <MenuItem onClick={() => {handleGetData('')}}>Download Excel</MenuItem>
+            </Menu>
+            </Grid>
+        </Grid>
+      </form>
+    );
+  }
+
+  function FilterForm(props: any) {
+    // IMPORT
+    return (
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+          <Filter onSearch={applyItems} />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  //TODO Create PaymentType
+  function createData(payments: any): any {
+    return {
+      ...payments,
+    };
+  }
+
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+    const [openDialog, setOpenDialog] = React.useState(false);
+
+    const handleDelete = (model: any) => {
+      axios
+        .delete(`/doctors/${row.id}`)
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.filter((model) => model.id != row.id),
+          });
+          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow>
+          <TableCell align="left">{row.healthcare ?? '-'}</TableCell>
+          <TableCell align="left">{row.patient_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.doctor_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.specialis ?? '-' }</TableCell>
+          <TableCell align="left">{row.date_consultation ? fDateTime(row.date_consultation) : '-'}</TableCell>
+          <TableCell align="left">{row.subject ?? '-'}</TableCell>
+          <TableCell align="left">{row.object ?? '-'}</TableCell>
+          <TableCell align="left">{row.assessment ?? '-'}</TableCell>
+          <TableCell align="left">{row.plan ?? '-'}</TableCell>
+          {/* <TableCell align="center">
+            <ButtonGroup variant="text" aria-label="text button group">
+              <Link to={'/report/appointments/' + row.id + '/show'}>
+                <Button>
+                  <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </TableCell> */}
+        </TableRow>
+
+        <Dialog
+          open={openDialog}
+          onClose={() => {
+            setOpenDialog(false);
+          }}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogContent sx={{ p: 5 }}>
+            <Icon
+              icon="eva:trash-2-outline"
+              style={{
+                width: '100px',
+                height: '100px',
+                color: '#FF0000',
+                margin: 'auto',
+                display: 'block',
+                marginBottom: '20px',
+                alignContent: 'center',
+              }}
+            />
+            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
+              Apakah anda yakin ingin menghapus
+            </DialogContentText>
+            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
+              {row.name}?
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpenDialog(false);
+              }}
+              color="primary"
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={() => {
+                handleDelete(row.id);
+              }}
+              color="primary"
+              autoFocus
+            >
+              Hapus
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/linksehat/phr', {
+      params: filter,
+    });
+    setDataTableLoading(false);
+    setDataTableData(response.data.data);
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterPaymentStatus: string,
+    searchFilterAppointmentStart: string,
+    searchFilterAppointmentEnd: string
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      livechat_start: searchFilterAppointmentStart,
+      livechat_end: searchFilterAppointmentEnd,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      livechat_start: searchFilterAppointmentStart,
+      livechat_end: searchFilterAppointmentEnd,
+    });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      {/* <Ambulace /> */}
+
+      <Card sx={{ marginTop: '30px' }}>
+        <FilterForm sx={{ marginTop: '100px' }} />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">
+                  Healthcare
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Patient
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Doctor
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Speciality
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Date
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Subjective
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Objective
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Assessment
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Plan
+                </TableCell>
+                
+
+                {/* <TableCell style={headStyle} align="center">
+                  Aksi
+                </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.nID} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/dashboard/src/pages/Report/Rujukan/Index.tsx

@@ -0,0 +1,35 @@
+import { Card, Grid, Container } 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 List from './List';
+
+export default function LinksehatPayments() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const pageTitle = 'Rujukan';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            {
+              name: 'Report',
+              href: '/report',
+            },
+            {
+              name: 'Rujukan',
+              href: '/report/rujukan',
+            },
+          ]}
+        />
+
+        <List />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/Rujukan/List.tsx

@@ -0,0 +1,550 @@
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  ButtonGroup,
+  Grid,
+  Chip,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  FormControl,
+  Autocomplete,
+  InputAdornment,
+  IconButton,
+  InputLabel,
+  Menu,
+} from '@mui/material';
+
+import {
+  Link,
+  NavLink as RouterLink,
+  useSearchParams,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+// components
+import AutocompleteHealthcare from '@/components/autocomplete/AutocompleteHealthcare';
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+import { Practitioner } from '../../../@types/doctor';
+import CreateIcon from '@mui/icons-material/Create';
+import { Props } from '../../../components/editor/index';
+import { red } from '@mui/material/colors';
+import { margin, padding } from '@mui/system';
+import { enqueueSnackbar } from 'notistack';
+import { fNumber } from '@/utils/formatNumber';
+import { Controller } from 'react-hook-form';
+
+import SvgIconStyle from '../../../components/SvgIconStyle';
+import { GridSearchIcon } from '@mui/x-data-grid';
+import { Search } from '@mui/icons-material';
+import { Icon } from '@iconify/react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { MenuItem } from '@mui/material';
+import { fDateOnly, fDateTime } from '@/utils/formatTime';
+import AutocompleteLinksehatHealthcare from '@/components/autocomplete/AutocompleteLinksehatHealthcare';
+import { LoadingButton } from '@mui/lab';
+import UploadIcon from '@mui/icons-material/Upload';
+
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
+
+  const navigate = useNavigate();
+  const { organization_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [organizationOptions, setOrganizationOptions] = useState([]);
+  const [searchParamsPaymentStatus, setSearchParamsPaymentStatus] = useSearchParams();
+  const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
+  const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
+  const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
+
+  useEffect(() => {
+    // axios.get(`/search-organizations`).then((response) => {
+    //   setOrganizationOptions(response.data);
+    // });
+  }, []);
+
+  function Filter(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+    const [importLoading, setImportLoading] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    /* ------------------------------ handle params ----------------------------- */
+    const [appliedParams, setAppliedParams] = useState({});
+    const params = {
+      searchParams: searchParams,
+      setSearchParams: setSearchParams,
+      appliedParams: appliedParams,
+      setAppliedParams: setAppliedParams,
+    };
+
+    const handleGetData = (type :string) => {
+      const parameters =
+      Object.keys(appliedParams).length !== 0
+        ? appliedParams
+        : Object.fromEntries([...searchParams.entries()]);
+      setImportLoading(true);
+      axios.get('/linksehat/phr/generate-excel', {
+        params: { ...parameters },
+      }).then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+        setImportLoading(false);
+      });
+      // axios.get(`report/logs/export`)
+      //   .then((response) => {
+      //     const link = document.createElement('a');
+      //     link.href = response.data.data.file_url;
+      //     link.setAttribute('download', response.data.data.file_name);
+      //     document.body.appendChild(link);
+      //     link.click();
+      //     handleClose();
+      //   })
+    }
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+
+      props.onSearch(searchText);
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+   
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item md={7}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  // handleSearchSubmit(event);
+
+                  const filter = Object.fromEntries([
+                    ...searchParams.entries(),
+                    ['search', searchText],
+                  ]);
+                  setSearchParams(filter);
+                  loadDataTableData(filter);
+                }
+              }}
+              label="Search"
+              value={searchText}
+              InputProps={{
+                // startAdornment: (
+                //   <InputAdornment position="start">
+                //     <Search />
+                //   </InputAdornment>
+                // ),
+                placeholder: 'Nama Pasien',
+              }}
+            />
+          </Grid>
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('livechat_start')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = value ? fDateOnly(value) : '';
+                      var entries = [...searchParams.entries(), ['livechat_start', date ?? '']];
+                      if (!searchParams.get('livechat_end')) {
+                        entries = [...entries, ['livechat_end', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('livechat_end')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = fDateOnly(value);
+                      var entries = [...searchParams.entries(), ['livechat_end', date ?? '']];
+                      if (!searchParams.get('livechat_start')) {
+                        entries = [...entries, ['livechat_start', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+
+          <Grid item md={1}>
+          <LoadingButton
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              onClick={handleClick}
+              loading={importLoading}
+            >
+              Export
+            </LoadingButton>
+            <Menu
+                id="import-button"
+                anchorEl={anchorEl}
+                open={createMenu}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'basic-button',
+                }}
+              >
+                <MenuItem onClick={() => {handleGetData('')}}>Download Excel</MenuItem>
+            </Menu>
+            </Grid>
+        </Grid>
+      </form>
+    );
+  }
+
+  function FilterForm(props: any) {
+    // IMPORT
+    return (
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+          <Filter onSearch={applyItems} />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  //TODO Create PaymentType
+  function createData(payments: any): any {
+    return {
+      ...payments,
+    };
+  }
+
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+    const [openDialog, setOpenDialog] = React.useState(false);
+
+    const handleDelete = (model: any) => {
+      axios
+        .delete(`/doctors/${row.id}`)
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.filter((model) => model.id != row.id),
+          });
+          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow>
+          <TableCell align="left">{row.healthcare ?? '-'}</TableCell>
+          <TableCell align="left">{row.patient_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.doctor_name ?? '-'}</TableCell>
+          <TableCell align="left">{row.specialis ?? '-' }</TableCell>
+          <TableCell align="left">{row.date_consultation ? fDateTime(row.date_consultation) : '-'}</TableCell>
+          <TableCell align="left">{row.subject ?? '-'}</TableCell>
+          <TableCell align="left">{row.object ?? '-'}</TableCell>
+          <TableCell align="left">{row.assessment ?? '-'}</TableCell>
+          <TableCell align="left">{row.plan ?? '-'}</TableCell>
+          {/* <TableCell align="center">
+            <ButtonGroup variant="text" aria-label="text button group">
+              <Link to={'/report/appointments/' + row.id + '/show'}>
+                <Button>
+                  <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </TableCell> */}
+        </TableRow>
+
+        <Dialog
+          open={openDialog}
+          onClose={() => {
+            setOpenDialog(false);
+          }}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogContent sx={{ p: 5 }}>
+            <Icon
+              icon="eva:trash-2-outline"
+              style={{
+                width: '100px',
+                height: '100px',
+                color: '#FF0000',
+                margin: 'auto',
+                display: 'block',
+                marginBottom: '20px',
+                alignContent: 'center',
+              }}
+            />
+            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
+              Apakah anda yakin ingin menghapus
+            </DialogContentText>
+            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
+              {row.name}?
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpenDialog(false);
+              }}
+              color="primary"
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={() => {
+                handleDelete(row.id);
+              }}
+              color="primary"
+              autoFocus
+            >
+              Hapus
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/linksehat/phr', {
+      params: filter,
+    });
+    setDataTableLoading(false);
+    setDataTableData(response.data.data);
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterPaymentStatus: string,
+    searchFilterAppointmentStart: string,
+    searchFilterAppointmentEnd: string
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      livechat_start: searchFilterAppointmentStart,
+      livechat_end: searchFilterAppointmentEnd,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      payment_status: searchFilterPaymentStatus,
+      livechat_start: searchFilterAppointmentStart,
+      livechat_end: searchFilterAppointmentEnd,
+    });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      {/* <Ambulace /> */}
+
+      <Card sx={{ marginTop: '30px' }}>
+        <FilterForm sx={{ marginTop: '100px' }} />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">
+                  Healthcare
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Patient
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Doctor
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Speciality
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Date
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Subjective
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Objective
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Assessment
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Plan
+                </TableCell>
+                
+
+                {/* <TableCell style={headStyle} align="center">
+                  Aksi
+                </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.nID} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/dashboard/src/routes/index.tsx

@@ -12,8 +12,8 @@ import VerifyCode from '../pages/auth/VerifyCode';
 import { AuthProvider } from '../contexts/LaravelAuthContext';
 import AuthGuard from '../guards/AuthGuard';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
-import Prescription from '@/pages/Report/Prescription/Index';
-import DoctorRating from '@/pages/Report/DoctorRating/Index';
+import DoctorRating from '@/pages/Report/DoctorRating_v2/Index';
+import KatalogDokter from '@/pages/Report/KatalogDokter/Index';
 
 // ----------------------------------------------------------------------
 
@@ -443,14 +443,30 @@ export default function Router() {
           element: <Prescription/>,
         },
         {
-          path: 'report/doctorrating',
+          path: 'report/doctor-rating',
           element: <DoctorRating/>,
         },
+        {
+            path: 'report/katalog-dokter',
+            element: <KatalogDokter/>,
+        },
         {
           path: 'report/linksehat-payments',
           element: <LinksehatPayment />,
         },
 
+        {
+          path: 'report/phr',
+          element: <RiwayatMedisPeserta />,
+        },
+        {
+          path: 'report/prescription',
+          element: <Prescription/>,
+        },
+        {
+          path: 'report/rujukan',
+          element: <RujukanPasien/>,
+        },
         {
           path: 'claims',
           element: <Claims />,
@@ -716,6 +732,10 @@ const EPrescriptionShow = Loadable(lazy(() => import('../pages/EPrescription/Liv
 
 const LinksehatPayment = Loadable(lazy(() => import('../pages/Report/LinksehatPayments/Index')));
 
+const RiwayatMedisPeserta = Loadable(lazy(() => import('../pages/Report/RiwayatMedisPeserta/Index')));
+const RujukanPasien = Loadable(lazy(() => import('../pages/Report/Rujukan/Index')));
+const Prescription = Loadable(lazy(() => import('../pages/Report/Prescription/Index')));
+
 const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
 
 const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formularium/Index')));