LMSN-217

Improve Slicing tampilan pada hospital portal (List Claim, Detail, Search Member)

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

@@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles';
 import Iconify from '@/components/Iconify';
 import { fCurrency } from '@/utils/formatNumber';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Button, Divider, LinearProgress, linearProgressClasses } from '@mui/material';
+import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box } from '@mui/material';
 import { Card } from '@mui/material';
 import { Stack, Typography } from '@mui/material';
 import { fPostFormat } from '@/utils/formatTime';
@@ -10,6 +10,7 @@ import axios from '@/utils/axios';
 import { enqueueSnackbar } from 'notistack';
 import { useRef, useState } from 'react';
 import { makeFormData } from '@/utils/jsonToFormData';
+import { format } from 'date-fns';
 
 // TODO Fix any
 export default function FormRequestClaim({ member, handleSubmitSuccess }) {
@@ -119,18 +120,19 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
 
   return (
     <Stack>
-      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }}>
-        <Typography textAlign={'right'} variant='body2'>
-          Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
+      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
+        <Typography variant='body2' sx={{color: '#757575'}}>
+          Submission Date
         </Typography>
+        <Typography variant='body2' sx={{fontWeight:'bold'}}>{format(new Date(), "d MMM yyyy")}</Typography>
       </Stack>
       
       
       <Card sx={{ p: 1, background: '#f4f6f8', marginBottom: 2 }}>
 
       <Stack direction="row" spacing={2}>
-          <Button sx={{padding: 2, width: '100%'}} variant={serviceCode == 'IP' ? 'contained' : ''} onClick={() => {setServiceCode('IP')}}>Rawat Inap</Button>
-          <Button sx={{padding: 2, width: '100%'}} variant={serviceCode == 'OP' ? 'contained' : ''} onClick={() => {setServiceCode('OP')}}>Rawat Jalan</Button>
+          <Button sx={{padding: 2, width: '100%'}} color="primary" variant={serviceCode == 'IP' ? 'outlined' : ''}  onClick={() => {setServiceCode('IP')}}>Inpatient</Button>
+          <Button sx={{padding: 2, width: '100%'}} color="primary" variant={serviceCode == 'OP' ? 'outlined' : ''} onClick={() => {setServiceCode('OP')}}>Outpatient</Button>
       </Stack>
       </Card>
 
@@ -143,13 +145,13 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
             sx={{ marginTop: 1, width: 48, height: 48 }}
           />
           <Stack sx={{ p: 1 }}>
-            <Typography>{member?.full_name ?? ''}</Typography>
-            <Typography>{member?.member_id ?? ''}</Typography>
+            <Typography variant="body2">{member?.full_name ?? ''}</Typography>
+            <Typography variant="body2" sx={{color:'#637381'}}>{member?.member_id ?? ''}</Typography>
           </Stack>
         </Stack>
       </Card>
 
-      <Card sx={{ paddingY: 1, paddingX: 2 }}>
+      {/*<Card sx={{ paddingY: 1, paddingX: 2 }}>
         <Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
           Total Limit
         </Typography>
@@ -166,7 +168,7 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
           {fCurrency(member?.current_plan?.usage ?? 0)} /{' '}
           {member?.current_plan?.limit_rules < 9999999999 ? fCurrency(member?.current_plan?.limit_rules ?? 0) : 'As Charge' }
         </Typography>
-      </Card>
+      </Card>*/}
 
       <Stack
         divider={<Divider orientation="horizontal" flexItem />}
@@ -175,8 +177,8 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
       >
         {/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
-          <Typography variant="body1" fontWeight={600}>
-            <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Kondisi
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
+             Condition Document
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack
@@ -197,36 +199,42 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
                   ></Iconify>
                 </Stack>
               ))}
-            {/* <Stack direction="row" justifyContent={'space-between'}>
-                                      <Typography>Nama File .pdf</Typography>
-                                      <Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
-                                  </Stack> */}
           </Stack>
-          {/* { JSON.stringify(filesResult) } */}
-          <input
-            type="file"
-            id="file"
-            ref={fileKondisiInput}
-            style={{ display: 'none' }}
-            multiple
-            onChange={handleKondisiInputChange}
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
-          />
-          <LoadingButton
-            variant="outlined"
-            onClick={() => {
-              fileKondisiInput.current.click();
-            }}
-          >
-            <Iconify icon="eva:plus-fill" />
-            Add Result
-          </LoadingButton>
+           <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileKondisiInput.current?.click()}>
+            <Box
+              sx={{
+                display: 'flex',
+                placeItems: 'center',
+                gap: 1,
+                placeContent: 'center',
+                
+
+              }}
+            >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+              <Typography variant="body1" fontWeight="bold">
+                Add Result
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileKondisiInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleKondisiInputChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+            />
+          </ButtonBase>
         </Stack>
 
         {/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
-          <Typography variant="body1" fontWeight={600}>
-            <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Diagnosa
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
+            Diagnosis Dokumen
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack
@@ -253,30 +261,41 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
                                   </Stack> */}
           </Stack>
           {/* { JSON.stringify(filesResult) } */}
-          <input
-            type="file"
-            id="file"
-            ref={fileDiagnosaInput}
-            style={{ display: 'none' }}
-            multiple
-            onChange={handleDiagnosaInputChange}
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
-          />
-          <LoadingButton
-            variant="outlined"
-            onClick={() => {
-              fileDiagnosaInput.current.click();
-            }}
-          >
-            <Iconify icon="eva:plus-fill" />
-            Add Result
-          </LoadingButton>
+          <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.current?.click()}>
+            <Box
+              sx={{
+                display: 'flex',
+                placeItems: 'center',
+                gap: 1,
+                placeContent: 'center',
+                
+
+              }}
+            >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+              <Typography variant="body1" fontWeight="bold">
+                Add Result
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileDiagnosaInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleDiagnosaInputChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+            />
+          </ButtonBase>
         </Stack>
 
         {/* -------------------------------Upload Dokumen Hasil Penunjang------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
-          <Typography variant="body1" fontWeight={600}>
-            <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Hasil Penunjang
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
+            Supporting Result Document
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack
@@ -303,30 +322,41 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
                                   </Stack> */}
           </Stack>
           {/* { JSON.stringify(filesResult) } */}
-          <input
-            type="file"
-            id="file"
-            ref={fileHasilPenunjangInput}
-            style={{ display: 'none' }}
-            multiple
-            onChange={handleResultInputChange}
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
-          />
-          <LoadingButton
-            variant="outlined"
-            onClick={() => {
-              fileHasilPenunjangInput.current.click();
-            }}
-          >
-            <Iconify icon="eva:plus-fill" />
-            Add File
-          </LoadingButton>
+          <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.current?.click()}>
+            <Box
+              sx={{
+                display: 'flex',
+                placeItems: 'center',
+                gap: 1,
+                placeContent: 'center',
+                
+
+              }}
+            >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+              <Typography variant="body1" fontWeight="bold">
+                Add Result
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileHasilPenunjangInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleResultInputChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+            />
+          </ButtonBase>
         </Stack>
       </Stack>
 
       <LoadingButton
         variant="contained"
-        sx={{ marginTop: 2, p: 2 }}
+        sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
         onClick={() => {
           submitRequest();
         }}