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