[WIP] Claim Encounters

frontend/dashboard/src/pages/Claims/Show.tsx

@@ -19,30 +19,25 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { Controller, useForm } from 'react-hook-form';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
-import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
 import Page from '../../components/Page';
 import useSettings from '../../hooks/useSettings';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/system';
 import axios from '../../utils/axios';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
-import { fCurrency } from '../../utils/formatNumber';
+import { fDate } from '@/utils/formatTime';
 import Iconify from '../../components/Iconify';
-import Form from './Form';
 import Documents from './components/Documents';
 import DiagnosisHistory from './components/DiagnosisHistory';
 import ClaimItems from './components/ClaimItems';
 import DialogMemberBenefit from './components/DialogMemberBenefit';
-import AutocompleteDiagnosis from '@/components/autocomplete/AutocompleteDiagnosis';
-import AutocompleteDiagnosisControlled from '@/components/autocomplete/AutocompleteDiagnosisControlled';
-import { Icd, IcdType } from '@/@types/diagnosis';
-import { OrganizationType, PractitionerType } from '@/@types/doctor';
 import ClaimDetail from './components/ClaimDetail';
+import DialogHistoryPerawatan from './components/DialogHistoryPerawatan';
+import { IconButton } from '@mui/material';
+import { Tooltip } from '@mui/material';
 
 export default function ClaimsCreateUpdate() {
   const { themeStretch } = useSettings();
@@ -198,8 +193,9 @@ export default function ClaimsCreateUpdate() {
       });
   };
 
-
   // ----------------------------------------------------------------
+  // History Perawatan
+  const [openDialogHistoryPerawatan, setOpenDialogHistoryPerawatan] = useState(false);
 
   useEffect(() => {
     axios.get('/claims/' + id).then(({ data }) => {
@@ -212,6 +208,33 @@ export default function ClaimsCreateUpdate() {
     });
   }, [id]);
 
+  const handleSetFinalEncounter = (encounter) => {
+    const tempLastFinalEncounterId = currentClaim.final_encounter_id
+    axios.post(`/claims/${id}/set-final-encounter`, {
+      encounter_id: encounter.id
+    })
+    .then((res) => {
+      setCurrentClaim({...currentClaim, ...{final_encounter_id: encounter.id}})
+      enqueueSnackbar(res.data.message, {variant: 'success'})
+    })
+    .catch((err) => {
+      setCurrentClaim({...currentClaim, ...{final_encounter_id: tempLastFinalEncounterId}})
+      enqueueSnackbar(err.message, {variant: 'error'})
+    })
+    setCurrentClaim({...currentClaim, ...{final_encounter_id: encounter.id}})
+  }
+
+  // ------------------------------------------------------------------
+  // Edit History Perawatan
+  
+  const [openDialogEditHistoryPerawatan, setOpenDialogEditHistoryPerawatan] = useState(false)
+  const [editedEncounter, setEditedEncounter] = useState(null)
+
+  const showEditEncounter = (encounter) => {
+    setEditedEncounter(encounter)
+    setOpenDialogEditHistoryPerawatan(true)
+  }
+
   return (
     <Page title={`Claim : ${currentClaim?.code}`}>
       <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -359,9 +382,86 @@ export default function ClaimsCreateUpdate() {
             </Grid>
 
             <Grid item xs={7}>
-              {/* Diagnosis */}
+              {/* Claim Detail */}
               <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2 }}>
-                <ClaimDetail claim={currentClaim} />
+                <Stack
+                  direction="row"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  sx={{ marginBottom: 2 }}
+                >
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <Iconify icon="eva:bell-fill" />
+                    <Typography variant="body2" fontWeight={600}>
+                      History Perawatan
+                    </Typography>
+                  </Stack>
+                  <Typography
+                    onClick={() => {
+                      setOpenDialogHistoryPerawatan(true);
+                    }}
+                  >
+                    + Tambah History Perawatan
+                  </Typography>
+                </Stack>
+
+                {/* For Creation History Perawatan / Encounter */}
+                <DialogHistoryPerawatan
+                  openDialog={openDialogHistoryPerawatan}
+                  setOpenDialog={setOpenDialogHistoryPerawatan}
+                  onChange={() => {}}
+                  claim={currentClaim}
+                ></DialogHistoryPerawatan>
+
+                <Paper sx={{ background: 'white', marginY: 2, p: 2 }}>
+                  <Stack sx={{ maxHeight: '250px', overflowY: 'scroll' }}>
+                    {currentClaim?.encounters && currentClaim?.encounters.map((encounter, index) => (
+                      <React.Fragment key={index}>
+                      <Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        sx={{ marginY: 1 }}
+                      >
+                        <Stack>
+                          <Typography fontWeight={'bold'} onClick={() => {showEditEncounter(encounter)}}><a href="#">{ encounter.class_name }</a></Typography>
+                          <Typography sx={{ color: '#777', fontSize: '10px' }}>
+                            ({ fDate(encounter.start) } - { fDate(encounter.end) })
+                          </Typography>
+                          <Typography variant="body2">Diagnosis: { encounter.primary_diagnosis ? (`(${encounter.primary_diagnosis.diagnosis?.code}) ${encounter.primary_diagnosis.diagnosis?.name}`) : '-'}</Typography>
+                          <Typography variant="body2">Dokter: { encounter.primary_doctor ? (`${encounter.primary_doctor.name}`) : '-'}</Typography>
+                        </Stack>
+                        <Tooltip title="Diagnosa Final">
+                          <IconButton onClick={() => {handleSetFinalEncounter(encounter)}}>
+                            <Iconify
+                              icon="eva:checkmark-circle-2-fill"
+                              color={currentClaim.final_encounter_id == encounter.id ? "green" : "gray"}
+                              sx={{ margin: 2 }}
+                            ></Iconify>
+                          </IconButton>
+                        </Tooltip>
+                        
+                      </Stack>
+                      <Divider />
+                      </React.Fragment>
+                    ))}
+
+                    {(!currentClaim?.encounters || currentClaim?.encounters.length == 0) && (
+                      <Typography>Belum ada History Perawatan</Typography>
+                    )}
+                  </Stack>
+                </Paper>
+
+                {/* For Editing History Perawatan / Encounter */}
+                <DialogHistoryPerawatan
+                  openDialog={openDialogEditHistoryPerawatan}
+                  setOpenDialog={setOpenDialogEditHistoryPerawatan}
+                  onChange={() => {}}
+                  claim={currentClaim}
+                  encounter={editedEncounter}
+                ></DialogHistoryPerawatan>
+
+                {/* <ClaimDetail claim={currentClaim} /> */}
               </Paper>
 
               <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2, marginTop: 2 }}>