Update Add Input Hospital Portal

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

@@ -23,6 +23,8 @@ import Page from '../../../components/Page';
 import Iconify from '@/components/Iconify';
 import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
 import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 // utils
 import useSettings from '../../../hooks/useSettings';
 import { useFieldArray, useForm } from 'react-hook-form';
@@ -35,7 +37,7 @@ import { enqueueSnackbar } from 'notistack';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import { DetailFinalLogType } from './Model/Types';
 import { fDate, fDateTimesecond } from '@/utils/formatTime';
-import { Button } from '@mui/material';
+import { Button, Autocomplete, FormHelperText} from '@mui/material';
 import DialogConfirmation from '../FinalLog/Components/DialogConfirmation';
 import Label from '@/components/Label';
 import { Box } from '@mui/system';
@@ -45,6 +47,11 @@ import {BenefitData } from '../FinalLog/Model/Types'
 import AddIcon from '@mui/icons-material/Add';
 import { LoadingButton } from '@mui/lab';
 import { makeFormData } from '@/utils/jsonToFormData';
+import TextField from '@mui/material/TextField';
+import { fPostFormat } from '@/utils/formatTime';
+
+
+
 
 // Import Card Detail Final LOG
 import CardDetail from '../Components/CardDetail';
@@ -71,11 +78,86 @@ import DialogDeleteFileLog from './Components/DialogDeleteFileLog';
 import DialogUploadFileFinalLog from './Components/DialogUploadFileFinalLog';
 import DialogSendWa from './Components/DialogSendWa';
 import { set } from 'nprogress';
+import { format } from 'date-fns';
+
 
 
 // ----------------------------------------------------------------------
 
 export default function Detail() {
+    //dari hospital portal
+  const [dischargeDate, setDischargeDate] = useState<string>(format(new Date(), "yyyy MMM d HH:mm:ss"));
+  const [serviceOptions, setServiceOptions] = useState([
+    { value: '-', label: '-' }
+]);
+const [specialisOptions, setSpecialisOptions] = useState([
+    { value: '-', label: '-' }
+]);
+useEffect(() => {
+    axios.get('service-member/'+1)
+      .then((response) => {
+        setServiceOptions(response.data);
+    }).catch((error) => {
+      console.error('Error fetching ICD options:', error);
+    });
+
+    axios.get('specialis')
+      .then((response) => {
+        setSpecialisOptions(response.data);
+    }).catch((error) => {
+      console.error('Error fetching ICD options:', error);
+    });
+
+  }, []);
+const [serviceCode, setServiceCode] = useState<string>("");
+const [idSpecialities, setIdSpecialities] = useState("");
+const [inputDppj, setInputDppj] = useState("");
+function submitRequestFinalLog() {
+    if(dischargeDate == '')
+    {
+        enqueueSnackbar('Tanggal Keluar', { variant: 'warning' });
+        return false;
+    }
+    //cek spesialis
+    if(!idSpecialities)
+    {
+        enqueueSnackbar('Spesialis', { variant: 'warning' });
+        return false;
+    }
+    //cek dpjp
+    if(!inputDppj)
+    {
+        enqueueSnackbar('DPPJ', { variant: 'warning' });
+        return false;
+    }
+    setSubmitLoading(true);
+    const formData = makeFormData({
+    //   request_logs_id: member.id,
+    //   result_files: fileHasilPenunjangs,
+    //   diagnosa_files: fileDiagnosas,
+    //   kondisi_files: fileKondisis,
+      discharge_date: fPostFormat(dischargeDate, 'yyyy-MM-dd HH:mm:ss'),
+      service_code: serviceCode,
+      spescialis_id: idSpecialities,
+      dppj: inputDppj,
+    });
+    axios
+      .post('/request-final-log', formData)
+      .then((response) => {
+        enqueueSnackbar(response.data.meta.message ?? 'Berhasil membuat data', { variant: 'success' });
+        // handleSubmitSuccess();
+        // onClose({ someData: 'example data' }, getData);
+      })
+      .catch(({ response }) => {
+        enqueueSnackbar(response.data.meta.message ?? 'Something Went Wrong', { variant: 'error' });
+      })
+      .then(() => {
+        setSubmitLoading(false);
+      });
+  }
+//end dari hospital portal
+
+
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
 
@@ -106,7 +188,7 @@ export default function Detail() {
             .post(`/customer-service/request/${id}/approval_files`, formData)
             .then((response) => {
             enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
-         
+
             window.location.reload()
             })
             .catch(({ response }) => {
@@ -231,10 +313,10 @@ export default function Detail() {
     // Handle Delete File LOG
     const [pathFile, setPathFile] = useState('')
     const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
-    
+
     // Handle Upload File LOG
     const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
-    
+
 
     const fileDiagnosaInput = useRef<HTMLInputElement>(null);
     const [fileApprovals, setFileApproval] = useState<any>([]);
@@ -425,6 +507,91 @@ export default function Detail() {
                     >
                     </DialogHospitalCare>
                 </Grid> */}
+                <Grid item xs={12}>
+                    <Card sx={{p:3}}>
+                        <Stack direction="row" spacing={2} sx={{ width: '100%' }}>
+                            {/* Kolom Tanggal Discharge */}
+                            <Stack spacing={2} sx={{ flex: 1 }}>
+                            <Typography variant="subtitle1">Tanggal Keluar </Typography>
+                            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                                <DatePicker
+                                label="Tanggal Keluar"
+                                value={dischargeDate}
+                                onChange={(newValue: any) => {
+                                    setDischargeDate(newValue);
+                                }}
+                                inputFormat="dd-MM-yyyy HH:mm"
+                                renderInput={(params) => <TextField {...params} fullWidth required />}
+                                />
+                            </LocalizationProvider>
+                            </Stack>
+
+                            {/* Kolom Service Type */}
+                            <Stack spacing={2} sx={{ flex: 1 }}>
+                            <Typography variant="subtitle1">Tipe Service </Typography>
+                            <Autocomplete
+                                id="service_type"
+                                options={serviceOptions}
+                                getOptionLabel={(option) => option.label || ""}
+                                value={serviceOptions.find((opt) => opt.value == serviceCode) || null}
+                                onChange={(event, newValue) => {
+                                setServiceCode(newValue?.value || "");
+                                }}
+                                renderInput={(params) => (
+                                <TextField {...params} label='Tipe Service' fullWidth />
+                                )}
+                            />
+                            <FormHelperText style={{ color: "red" }}></FormHelperText>
+                            </Stack>
+                        </Stack>
+
+                        {/* Specialist */}
+                        <Stack direction="row" spacing={2}>
+                            <Stack spacing={2} sx={{ width: '100%' }}>
+                            <Typography variant='subtitle1'>Spesialis </Typography>
+                                <Autocomplete
+                                id='specialities'
+                                options={specialisOptions}
+                                getOptionLabel={(option) => option.label || ''}
+                                value={specialisOptions.find((opt) => opt.value === idSpecialities) || null}
+                                onChange={(event, newValue) => {
+                                    setIdSpecialities(newValue?.value || 0);
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params} label="Spesialis" fullWidth />
+                                )}
+                                />
+                                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+                            </Stack>
+                        </Stack>
+
+                        <Stack direction="row" spacing={2}>
+                            <Stack spacing={2} sx={{ width: '100%' }}>
+                                <Typography variant='subtitle1'>DPPJ </Typography>
+                                <TextField
+                                id='dppj'
+                                variant='outlined'
+                                value={inputDppj}
+                                placeholder="DPPJ"
+                                onChange={(event) => {
+                                    setInputDppj(event.target.value);
+                                }}
+                                fullWidth
+                                />
+                            </Stack>
+                        </Stack>
+                        <LoadingButton
+                            variant="contained"
+                            sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
+                            onClick={() => {
+                            submitRequestFinalLog();
+                            }}
+                            loading={submitLoading}
+                        >
+                            Simpan
+                        </LoadingButton>
+                    </Card>
+                </Grid>
 
                 {/* Surat persetujuan Tindakan */}
                 <Grid item xs={12}>
@@ -592,7 +759,7 @@ export default function Detail() {
 
                         {/* FILE YANG SUDAH TERUPLOAD */}
                         {requestLog?.files
-                        ?.filter((document) => document.type === 'approval') 
+                        ?.filter((document) => document.type === 'approval')
                         ?.map((documentType, index) => (
                         <Stack
                             key={index}
@@ -640,7 +807,7 @@ export default function Detail() {
                         openDialog={dialogUploadFileLog}
                         />
                     </Card>
-                    </Grid>
+                </Grid>
 
 
                 {/* Benefit */}
@@ -993,7 +1160,7 @@ export default function Detail() {
 
                         </Stack>
                         {requestLog?.files
-                        ?.filter((document) => document.type !== 'approval') 
+                        ?.filter((document) => document.type !== 'approval')
                         ?.map((documentType, index) => (
                             <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
                                 <Stack direction="column" spacing={2} >
@@ -1043,7 +1210,7 @@ export default function Detail() {
                             variant="outlined"
                             sx={{ color: '#FF4842', borderColor: '#FF4842' }}
                             onClick={() => {
-                                
+
                             }}
                             >
                             Decline

frontend/dashboard/src/pages/CustomerService/Request/Components/CardSearchMember.tsx

@@ -0,0 +1,149 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Button,
+  Card,
+  Typography,
+  Link,
+  Divider,
+  Stack,
+  TextField,
+  Grid,
+  InputAdornment,
+} from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// React
+import React, { useContext, useState } from 'react';
+import { LoadingButton } from '@mui/lab';
+import Iconify from '@/components/Iconify';
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { fDateOnly } from '@/utils/formatTime';
+import MuiDialog from '@/components/MuiDialog';
+import axios from '@/utils/axios';
+import { useSnackbar } from 'notistack';
+import DialogMember from './DialogMember';
+// import { LanguageContext } from '@/contexts/LanguageContext';
+
+// ----------------------------------------------------------------------
+
+const RootNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  // maxHeight: '240px',
+}));
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardSearchMember(handleSubmitSuccess:()=> void) {
+//   const { localeData }: any = useContext(LanguageContext);
+  const {enqueueSnackbar} = useSnackbar();
+
+  const [noPolis, setNoPolis] = useState('');
+  const [birthDate, setBirthDate] = useState(null);
+  const [loadingBenefit, setLoadingBenefit] = useState(false);
+  const [loadingClaim, setLoadingClaim] = useState(false);
+  const [openDialogBenefit, setOpenDialogBenefit] = useState(false);
+  const [openDialogClaim, setOpenDialogClaim] = useState(false);
+  const [currentMember, setCurrentMember] = useState(null);
+  const [nameMember, setNameMember] = useState('');
+
+  function handleSearchMember() {
+    setLoadingBenefit(true)
+
+    axios.post('/search-member', {
+      no_polis: noPolis,
+      birth_date: birthDate ? fDateOnly(birthDate, 'yyyy-MM-dd') : null
+    })
+    .then((response) => {
+      setOpenDialogBenefit(true)
+      setCurrentMember(response.data.data)
+      setNameMember(response.data.data.members.name);
+    })
+    .catch(({response}) => {
+      enqueueSnackbar(response.data.errors ? response.data.errors[0] : (response.data ? response.data.meta.message : 'Opps, Something went Wrong!'), {variant : "error"})
+    })
+    .then(() => {
+      setLoadingBenefit(false)
+    });
+  }
+
+  return (
+    <div>
+      <RootNotificationStyle sx={{ p: 2, height: 'auto' }}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ paddingBottom: 2, paddingTop: 1 }}
+        >
+           <Typography
+              variant="body2"
+              component="span"
+              sx={{ display: 'flex', alignItems: 'center' }}
+            >
+              Pengajuan Jaminan
+            </Typography>
+        </Stack>
+        <Stack spacing={2} direction="row" justifyContent="space-between">
+          <TextField
+            variant="outlined"
+            label="Member ID"
+            value={noPolis}
+            onChange={(event) => {
+            setNoPolis(event.target.value)
+            }}
+            sx={{width:'40%'}}
+            required
+          />
+
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DatePicker
+              label="Tanggal Lahir"
+              value={birthDate}
+              onChange={(newValue:any) => {
+                setBirthDate(  (newValue));
+              }}
+              inputFormat="dd-MM-yyyy"
+              renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
+            />
+          </LocalizationProvider>
+
+          <LoadingButton
+            sx={{
+              backgroundColor: '#19BBBB',
+              p: 1,
+              width: '20%',
+              color: '#FFFF'
+            }}
+            loading={loadingBenefit}
+            onClick={() => {
+              handleSearchMember()
+            }}
+          >
+            <Iconify icon="eva:search-fill" marginRight={0.75} sx={{width: '24px', height: '24px'}} />
+            Cari Anggota
+          </LoadingButton>
+        </Stack>
+      </RootNotificationStyle>
+{/*
+      <DialogBenefit open={openDialogBenefit} setOpen={setOpenDialogBenefit}></DialogBenefit> */}
+      <MuiDialog
+          title={{name: nameMember}}
+          openDialog={openDialogBenefit}
+          setOpenDialog={setOpenDialogBenefit}
+          content={DialogMember(currentMember, () => {setOpenDialogBenefit(false); handleSubmitSuccess()})}
+          maxWidth="sm"
+        />
+    </div>
+  );
+}

frontend/dashboard/src/pages/CustomerService/Request/Components/DialogMember.tsx

@@ -0,0 +1,204 @@
+// mui
+import { styled } from '@mui/material/styles';
+import { LoadingButton, TabPanel } from "@mui/lab";
+import {
+  Button,
+  Card,
+  Divider,
+  Grid,
+  LinearProgress,
+  linearProgressClasses,
+  Typography,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Collapse, } from "@mui/material";
+import { Tab, Tabs } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import React, { useEffect, useState, useContext } from "react";
+import { fCurrency } from '@/utils/formatNumber';
+import { fPostFormat } from '@/utils/formatTime';
+import { Avatar } from '@mui/material';
+import Iconify from '@/components/Iconify';
+import FormRequestLog from './FormRequestLog';
+// import { LanguageContext } from '@/contexts/LanguageContext';
+import { format } from 'date-fns';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+export default function DialogMember(member:any, handleSubmitSuccess:() => void) {
+    // const { localeData }: any =  useContext(LanguageContext);
+    const [currentTab, setCurrentTab] = useState('request');
+
+    // ----------------------------------------------------------------------
+
+    useEffect(() => {
+        setCurrentTab('detail')
+    }, [member])
+
+    function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
+        setCurrentTab(newValue)
+    }
+
+    // ----------------------------------------------------------------------
+
+    const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+        height: 10,
+        borderRadius: 6,
+        [`&.${linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+        },
+        [`& .${linearProgressClasses.bar}`]: {
+        borderRadius: 6,
+        background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+        },
+    }));
+
+    function TabPanel(props:any) {
+        const { children, value, index, ...other } = props;
+        return (
+          <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+          >
+            {value === index && (
+              <Box sx={{ p: 3 }}>
+                <div>{children}</div>
+              </Box>
+            )}
+          </div>
+        );
+    }
+
+    const [openRows, setOpenRows] = useState<any>({});
+
+    const handleRowToggle = (index:number) => {
+        setOpenRows((prevOpenRows:any) => ({
+        ...prevOpenRows,
+        [index]: !prevOpenRows[index],
+        }));
+    };
+
+    return (
+        <div>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs
+                    value={currentTab}
+                    onChange={handleChangeTab}
+                    aria-label="wrapped label tabs example"
+                >
+                    <Tab value="detail" label="Detail" />
+                    <Tab value="service" label="Layanan" />
+                    {member?.type !== 'view' ? (
+                      <Tab value="request" label="Request LOG" />
+                    ) : ''}
+                </Tabs>
+
+                <TabPanel value={currentTab} index={'detail'}>
+                    <Stack direction="column" spacing={2}>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Member ID</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.members.member_id ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Policy Number</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.members.policy_id  ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Deposit Corporate</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.total_premi ? fCurrency(member?.total_premi) : '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Limit Peserta</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.limit_rules ? fCurrency(member?.limit_rules) : '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">NRIC</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.nik ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">NIK</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.nik ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Email</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.email ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Tanggal Lahir</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.birth_date ? format(new Date(member.members.birth_date), "d MMM yyyy") : '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Jenis Kelamin</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.gender ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Status Perkawinan</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.marital_status ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Bahasa</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.language ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Race</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.race ?? '-'}</Typography>
+                      </Stack>
+                      <Stack direction="row" justifyContent="space-between">
+                        <Typography sx={{width:'50%'}} variant="body2">Hubungan</Typography>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.members.relation_with_principal != '' ? member?.members.relation_with_principal : '-'}</Typography>
+                      </Stack>
+                    </Stack>
+                </TabPanel>
+                <TabPanel value={currentTab} index={'service'}>
+                        <TableContainer component={Paper}>
+                            <Table aria-label="collapsible table">
+                            {member && member.groupServices && Object.keys(member.groupServices).map((serviceCode, index) => (
+                                    <TableBody key={index}>
+                                        <TableRow sx={{backgroundColor: '#FFFFFF', borderBottom: openRows[index] ? '' : '1px solid #e0e0e0'}}>
+                                            <TableCell align="left" sx={{fontWeight: 'bold', width: '95%'}}><Typography variant="subtitle1">{serviceCode}</Typography></TableCell>
+                                            <TableCell align="left" sx={{width: '5%'}}>
+                                            {openRows[index] ? (
+                                                <KeyboardArrowDownIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
+                                            ) : (
+                                                <KeyboardArrowRightIcon sx={{ cursor: 'pointer' }} onClick={() => handleRowToggle(index)} />
+                                            )}
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow sx={{display: openRows[index] ? '' : 'none', borderBottom: openRows[index] ? '1px solid #e0e0e0' : ''}}>
+                                            <TableCell colSpan={2}>
+                                                {/* COLLAPSIBLE ROW */}
+                                                <Collapse in={openRows[index]} timeout="auto" unmountOnExit>
+                                                <Grid container spacing={2}>
+                                                {/* Loop through the array for the current serviceCode */}
+                                                {member.groupServices[serviceCode].map((item:any, innerIndex:number) => (
+                                                    <Grid item sm={6} key={innerIndex}>
+                                                    <Card sx={{ p: 2 }}>
+                                                        <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{item.description}</Typography>
+                                                        <Typography variant="body2" sx={{ color: '#919EAB' }}>{item.code}</Typography>
+                                                    </Card>
+                                                    </Grid>
+                                                ))}
+                                                </Grid>
+                                                </Collapse>
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableBody>
+                            ))}
+                            </Table>
+                        </TableContainer>
+                </TabPanel>
+                <TabPanel value={currentTab} index={'request'}>
+                    <FormRequestLog member={member} handleSubmitSuccess={handleSubmitSuccess} />
+                </TabPanel>
+            </Box>
+        </div>
+    )
+}

frontend/dashboard/src/pages/CustomerService/Request/Components/FormRequestLog.tsx

@@ -0,0 +1,322 @@
+import { LoadingButton } from '@mui/lab';
+import
+{
+    Avatar,
+    FormControl,
+    InputLabel,
+    Select,
+    FormHelperText,
+    MenuItem
+} from '@mui/material';
+import { Card } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import React, { useRef, useState, useContext, useEffect } from 'react';
+import { makeFormData } from '@/utils/jsonToFormData';
+import { format } from 'date-fns';
+// import { LanguageContext } from '@/contexts/LanguageContext';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { fPostFormat } from '@/utils/formatTime';
+
+interface MemberType {
+    members: any;
+    services: any;
+    providers:any;
+    companies:any;
+    specialities:any;
+}
+interface FormRequestClaimProps {
+    member: MemberType;
+    handleSubmitSuccess: () => void;
+}
+export default function FormRequestClaim({ member, handleSubmitSuccess }: FormRequestClaimProps) {
+    // const { localeData }: any =  useContext(LanguageContext);
+    const [serviceCode, setServiceCode] = useState<string>('');
+    const [idProvider, setIdProvider] = useState<number>(0);
+    const [idSpecialities, setIdSpecialities] = useState<number>(0);
+    const [inputDppj, setInputDppj] = useState<string>('');
+    //Submission date
+    const [submissionDate, setSubmissionDate] = useState<string>(format(new Date(), "yyyy MMM d HH:mm:ss"));
+
+    const [submitLoading, setSubmitLoading] = useState<boolean>(false);
+
+    const [corporate_id_partner, setCorporateIdPartner] = useState<any>([]);
+    useEffect(() => {
+        setCorporateIdPartner(member?.companies?.map((item: { id: any; name: any; }) => ({ value: item.id, label: item.name })));
+      }, []);
+    const [selectedCorporatID, setSelectedCorporateID] = useState<any>([]);
+
+    const handleSelectChangePatner = (event:any, selectedOptions:any) => {
+        const selectedValues = selectedOptions.map((option: { value: any; }) => option.value);
+        setSelectedCorporateID(selectedValues);
+    };
+
+    function submitRequest() {
+        if(!idProvider&& (name == '' || alamat == ''))
+        {
+            enqueueSnackbar("Mohon masukan provider", { variant: 'warning' });
+            return false;
+        }
+        if(serviceCode == '')
+        {
+            enqueueSnackbar("Mohon pilih layanan", { variant: 'warning' });
+            return false;
+        }
+        if(submissionDate == '')
+        {
+            enqueueSnackbar("Mohon pilih tanggal masuk", { variant: 'warning' });
+            return false;
+        }
+        //cek spesialis
+        if(!idSpecialities)
+        {
+            enqueueSnackbar("Mohon pilih Spesialis", { variant: 'warning' });
+            return false;
+        }
+        //cek dpjp
+        if(!inputDppj)
+        {
+            enqueueSnackbar("Mohon isi DPJP", { variant: 'warning' });
+            return false;
+        }
+        setSubmitLoading(true);
+        const formData = {
+            member_id: member.members.id,
+            service_code: serviceCode,
+            organization_id: idProvider,
+            organization_name : name,
+            address_provider: alamat,
+            submission_date: fPostFormat(submissionDate, 'yyyy-MM-dd HH:mm:ss'),
+            corporate_id_partner: selectedCorporatID,
+            specialities_id: idSpecialities,
+            dppj: inputDppj
+        };
+        axios
+        .post('/request-log', formData)
+        .then((response) => {
+            if (response && response.data && response.data.meta) {
+                setTimeout(() => {
+                    window.location.reload();
+                  }, 1500);
+                enqueueSnackbar(response.data.meta.message, { variant: 'success' });
+                handleSubmitSuccess();
+
+            }
+        })
+        .catch(({ response }) => {
+            if (response && response.data && response.data.meta) {
+                enqueueSnackbar(response.data.meta.message, { variant: 'error' });
+            }
+        })
+        .then(() => {
+            setSubmitLoading(false);
+        });
+    }
+
+    interface MemberService {
+        service_code: string;
+        name: string;
+    }
+
+    interface Providers {
+        id: number;
+        name: string;
+    }
+
+    interface Specialities {
+        id: number;
+        name: string;
+    }
+
+    const [showAddNewForm, setShowAddNewForm] = useState(false);
+    const [name, setName] = useState('');
+    const [alamat, setAlamat] = useState('');
+
+    const handleAddNewData = () => {
+        // Logika untuk menambahkan data baru ke database
+        // Pastikan untuk menyesuaikan logika ini sesuai dengan kebutuhan aplikasi Anda
+        console.log('Adding new data:', { name, alamat });
+
+        // Setelah menambahkan data baru, Anda mungkin ingin melakukan sesuatu seperti menutup formulir tambahan atau melakukan pengaturan lainnya
+        setShowAddNewForm(false);
+    };
+
+    return (
+        <Stack direction="column" spacing={2}>
+        <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
+            <Typography variant='body2' sx={{color: '#757575'}}>
+            Tanggal Buat
+            </Typography>
+            <Typography variant='body2' sx={{fontWeight:'bold'}}>{format(new Date(), "d MMM yyyy")}</Typography>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+            <Stack spacing={2} sx={{ width: '100%' }}>
+                <Typography variant='subtitle1'>Provider <span style={{ color: 'red' }}>*</span></Typography>
+                <Autocomplete
+                id="provider"
+                options={[{ name: "Tambah Baru", id: 0 }, ...member?.providers || []]}
+                getOptionLabel={(option: Providers) => option.name || ''}
+                value={member?.providers.find((item: Providers) => item.id === idProvider) || null}
+                onChange={(event: React.ChangeEvent<{}>, newValue: Providers | null) => {
+                    if (newValue?.id === 0) {
+                    // Pengguna memilih opsi "Tambahkan Data Baru"
+                    setIdProvider(0); // Reset nilai
+                    setShowAddNewForm(true); // Menampilkan formulir tambahan
+                    } else {
+                    // Pengguna memilih opsi dari hasil pencarian
+                    setIdProvider(newValue?.id || 0);
+                    setShowAddNewForm(false); // Menyembunyikan formulir tambahan
+                    }
+                }}
+                renderInput={(params) => (
+                    <TextField
+                    {...params}
+                    label="Provider"
+                    fullWidth
+                    />
+                )}
+                />
+                {showAddNewForm && (
+                    <Stack direction="column" spacing={1} padding={1}>
+                        <Typography variant='body2'>Tambah Baru <span style={{ color: 'red' }}>*</span></Typography>
+                        <TextField
+                        required={true}
+                        label="Nama"
+                        fullWidth
+                        onChange={(e) => setName(e.target.value)}
+                        />
+                        <TextField
+                        required={true}
+                        label="Alamat"
+                        fullWidth
+                        onChange={(e) => setAlamat(e.target.value)}
+                        />
+                        <Autocomplete
+                            id="corporate_id_partner"
+                            options={corporate_id_partner}
+                            getOptionLabel={(option:any) => option.label}
+                            value={corporate_id_partner.filter((option: { value: any; }) => selectedCorporatID.includes(option.value))}
+                            onChange={handleSelectChangePatner}
+                            multiple
+                            renderInput={(params) => (
+                            <TextField {...params} label="Rekanan" fullWidth />
+                            )}
+                        />
+                    </Stack>
+                )}
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </Stack>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+            <Stack spacing={2} sx={{ width: '100%' }}>
+                <Typography variant='subtitle1'>Layanan <span style={{ color: 'red' }}>*</span></Typography>
+                <Autocomplete
+                    id="service_type"
+                    options={member?.services || []}
+                    getOptionLabel={(option: MemberService) => option.name || ''}
+                    value={member?.services.find((item: MemberService) => item.service_code === serviceCode) || null}
+                    onChange={(event: React.ChangeEvent<{}>, newValue: MemberService | null) => {
+                        setServiceCode(newValue?.service_code || '');
+                    }}
+                    renderInput={(params) => (
+                        <TextField
+                        {...params}
+                        label="Layanan"
+                        fullWidth
+                        />
+                    )}
+                />
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </Stack>
+        </Stack>
+
+        {/* Specialist */}
+        <Stack direction="row" spacing={2}>
+            <Stack spacing={2} sx={{ width: '100%' }}>
+                <Typography variant='subtitle1'>Spesialis <span style={{ color: 'red' }}>*</span></Typography>
+                <Autocomplete
+                id='specialities'
+                options={member?.specialities || []}
+                getOptionLabel={(option: Specialities) => option.name || ''}
+                value={member?.specialities.find((item: Specialities) => item.id === idSpecialities) || null}
+                onChange={(event: React.ChangeEvent<{}>, newValue : Specialities | null) => {
+                    setIdSpecialities(newValue?.id || 0);
+                }}
+                renderInput={(params) => (
+                    <TextField
+                    {...params}
+                    label="Spesialis"
+                    fullWidth
+                    />
+                )}
+                />
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </Stack>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+            <Stack spacing={2} sx={{ width: '100%' }}>
+                <Typography variant='subtitle1'>DPJP <span style={{ color: 'red' }}>*</span></Typography>
+                <TextField
+                id='dppj'
+                variant='outlined'
+                placeholder="DPJP"
+                onChange={(event) => {
+                    setInputDppj(event.target.value);
+                }}
+                fullWidth
+                />
+            </Stack>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+            <Stack spacing={2} sx={{ width: '100%' }}>
+                <Typography variant='subtitle1'>Tanggal Masuk <span style={{ color: 'red' }}>*</span></Typography>
+                <LocalizationProvider dateAdapter={AdapterDateFns}>
+                    <DatePicker
+                        label="Tanggal Masuk"
+                        value={submissionDate}
+                        onChange={(newValue:any) => {
+                        setSubmissionDate(  (newValue));
+                        }}
+                        inputFormat="dd-MM-yyyy HH:mm"
+                        renderInput={(params) => <TextField sx={{width:'45%'}} {...params} required/>}
+                    />
+                </LocalizationProvider>
+            </Stack>
+        </Stack>
+
+        <Card sx={{ p: 1, background: '#f4f6f8'}}>
+            <Stack direction="row">
+            <Avatar
+                src=""
+                alt={member?.members.name ?? ''}
+                sx={{ marginTop: 1, width: 48, height: 48 }}
+            />
+            <Stack sx={{ p: 1 }}>
+                <Typography variant="body2">{member?.members.name ?? ''}</Typography>
+                <Typography variant="body2" sx={{color:'#637381'}}>{member?.members.member_id ?? ''}</Typography>
+            </Stack>
+            </Stack>
+        </Card>
+
+        <LoadingButton
+            variant="contained"
+            sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
+            onClick={() => {
+            submitRequest();
+            }}
+            loading={submitLoading}
+        >
+            Request LOG
+        </LoadingButton>
+        </Stack>
+    );
+}

frontend/dashboard/src/pages/CustomerService/Request/Index.tsx

@@ -1,7 +1,8 @@
-import { Card, Stack } from "@mui/material";
+import { Card, Stack,Grid,Typography,Divider } from "@mui/material";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import Page from "../../../components/Page";
 import List from "./List";
+import CardSearchMember from "./Components/CardSearchMember";
 
 
 
@@ -9,22 +10,32 @@ export default function RequestLog() {
 
   const pageTitle = 'Request LOG';
   return (
-    <Page title={ pageTitle } sx={{ mx: 2}}>
+    <Page title={pageTitle} sx={{ mx: 2 }}>
+  <HeaderBreadcrumbs
+    heading={pageTitle}
+    links={[
+      { name: 'Dashboard', href: '/dashboard' },
+      { name: 'Request LOG', href: '/customer-service/requests' },
+    ]}
+  />
 
-      <HeaderBreadcrumbs
-        heading={ pageTitle }
-        links={[
-          { name: 'Dashboard', href: '/dashboard' },
-          {
-            name: 'Request LOG',
-            href: '/customer-service/requests',
-          },
-        ]}
-      />
-      
-      {/* <Stack> */}
+  <Stack spacing={3}>
+    <Card sx={{ p: 2 }}>
+      <Typography variant="subtitle1" gutterBottom>
+        Pengajuan Jaminan
+      </Typography>
+      <CardSearchMember />
+    </Card>
+
+    <Card sx={{ p: 2 }}>
+      <Typography variant="subtitle1" gutterBottom>
+        Daftar Request LOG
+      </Typography>
       <List />
-      {/* </Stack> */}
-    </Page>
+    </Card>
+  </Stack>
+</Page>
+
+
   );
 }