Update Claim, Final LOG, Request LOG

frontend/hospital-portal/src/sections/dashboard/FormRequestLog.tsx

@@ -0,0 +1,128 @@
+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 { useRef, useState, useContext } from 'react';
+import { makeFormData } from '@/utils/jsonToFormData';
+import { format } from 'date-fns';
+import { LanguageContext } from '@/contexts/LanguageContext';
+
+interface MemberType {
+    members: any;
+    services: 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 [submitLoading, setSubmitLoading] = useState<boolean>(false);
+    function submitRequest() {
+        if(serviceCode == '')
+        {
+            enqueueSnackbar(localeData.txtDialogMember4, { variant: 'warning' });
+            return false;
+        }
+        setSubmitLoading(true);
+        const formData = {
+            member_id: member.members.id,
+            service_code: serviceCode
+        };
+        axios
+        .post('/request-log', formData)
+        .then((response) => {
+            console.log(response);
+            if (response && response.data && response.data.meta) {
+                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;
+    }
+
+    return (
+        <Stack direction="column" spacing={4}>
+        <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
+            <Typography variant='body2' sx={{color: '#757575'}}>
+            {localeData.txtDialogMember5}
+            </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'>{localeData.txtDialogMember1}*</Typography>
+                <FormControl>
+                <InputLabel htmlFor="service_type">
+                {localeData.txtDialogMember1}
+                </InputLabel>
+                <Select
+                    id="service_type"
+                    value={serviceCode}
+                    fullWidth
+                    label={localeData.txtDialogMember1}
+                    onChange={(e) => {
+                    setServiceCode(e.target.value);
+                    }}
+                >
+                {member && member?.services?.map((item: MemberService, index:number) => (
+                    <MenuItem key={index} value={item.service_code}>{item.name}</MenuItem>
+                ))}
+                </Select>
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+                </FormControl>
+            </Stack>
+        </Stack>
+
+        <Card sx={{ p: 1, background: '#f4f6f8'}}>
+            <Stack direction="row">
+            <Avatar
+                src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
+                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}
+        >
+            {localeData.txtDialogMember2}
+        </LoadingButton>
+        </Stack>
+    );
+}