Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging

frontend/client-portal/src/pages/ClaimReport/DialogDetailClaim.tsx

@@ -1,50 +1,67 @@
 // @mui
-import {
-  Button,
-  Box,
-  Stepper,
-  Step,
-  StepLabel,
-  Card,
-  Typography,
-  Divider,
-  Stack,
-} from '@mui/material';
-import { Add } from '@mui/icons-material';
-// components
-import MuiDialog from '../../components/MuiDialog';
-// theme
-import palette from '../../theme/palette';
+import { Box, Stepper, Step, StepLabel, Card, Typography, Divider, Stack } from '@mui/material';
 // React
-import { ReactElement } from 'react';
-
-type DataContent = {
-  info: string;
-  date: string;
-  time: string;
-};
-
-type MuiDialogProps = {
-  title?: {
-    name?: string;
-    icon?: string;
-  };
-  openDialog: boolean;
-  setOpenDialog: Function;
-  content?: ReactElement;
-  data?: DataContent[];
-};
+import { useContext, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+// axios
+import axios from '../../utils/axios';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import { fDate, fPostFormat } from '../../utils/formatTime';
+import Iconify from '../../components/Iconify';
 
 const steps = ['Review', 'Approval', 'Disbursement'];
 
-const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
-  function clickHandler(arg0: string) {
-    throw new Error('Function not implemented.');
-  }
+interface DataHistoriesClaimRequest {
+  title: string;
+  description: string;
+  created_at: string;
+}
 
-  // const getContent = () => (
+interface DataFilesClaimRequest {
+  id: number;
+  fileName: string;
+  fileUrl: string;
+}
 
-  // );
+interface DataClaimRequest {
+  claimId: number;
+  claimRequestId: number;
+  fullName: string;
+  histories: DataHistoriesClaimRequest[];
+  status: string;
+  submissionDate: string | Date;
+  files: {
+    claimConditions: DataFilesClaimRequest[];
+    claimResults: DataFilesClaimRequest[];
+    claimDiagnosis: DataFilesClaimRequest[];
+  };
+}
+
+const DialogDetailClaim = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const [corporateValueBefore, setCorporateValueBefore] = useState(corporateValue);
+  const [data, setData] = useState<DataClaimRequest | null>(null);
+
+  // inisialisasi pertama
+  useEffect(() => {
+    axios
+      .get(`${corporateValue}/claim-report/${id}`)
+      .then((response) => {
+        setData(response.data.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+  }, []);
+
+  // Navigasi ke claim-report ketika corporateValue berubah
+  useEffect(() => {
+    if (corporateValueBefore !== corporateValue) {
+      navigate(`/claim-report`);
+    }
+  }, [corporateValue]);
 
   return (
     <>
@@ -55,15 +72,20 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
         sx={{ marginTop: 1 }}
       >
         <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
-          Claim Request
+          Claim Request for {data?.fullName}
         </Typography>
         <Stack>
           <Typography variant="caption">Submission date</Typography>
-          <Typography variant="caption">15 / 05 / 2022</Typography>
+          <Typography variant="caption">
+            {fPostFormat(data ? data.submissionDate : new Date(), 'dd / MM / yyyy')}
+          </Typography>
         </Stack>
       </Stack>
       <Box sx={{ width: '100%', marginTop: 2 }}>
-        <Stepper alternativeLabel>
+        <Stepper
+          activeStep={data?.status === 'approved' ? 1 : data?.status === 'requested' ? 0 : 2}
+          alternativeLabel
+        >
           {steps.map((label) => (
             <Step key={label}>
               <StepLabel>{label}</StepLabel>
@@ -73,108 +95,116 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
       </Box>
       <Stack marginTop={2}>
         <Typography variant="subtitle1" paddingY={2}>
-          17 Mei 2022
+          {fDate(data ? data?.histories[0].created_at : new Date())}
         </Typography>
       </Stack>
       <Stack direction="row" spacing={2}>
         <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
         <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
-          {/* Item 1 */}
+          {data?.histories.map((history, index) => (
+            <Card sx={{ paddingY: 2, paddingX: 3 }} key={`${history.title}-${index}`}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Typography variant="body1">
+                  {fPostFormat(history.created_at, 'HH:mm')} WIB
+                </Typography>
+              </Stack>
+              <Divider sx={{ marginY: 2 }} />
+              <Stack>
+                <Typography variant="subtitle2" color="#404040">
+                  Details : {history.description}
+                </Typography>
+                <Typography
+                  variant="caption"
+                  color="#757575"
+                  sx={{ marginTop: 2, marginBottom: 1 }}
+                >
+                  {history.title}
+                </Typography>
+              </Stack>
+            </Card>
+          ))}
           <Card sx={{ paddingY: 2, paddingX: 3 }}>
             <Stack direction="row" justifyContent="space-between" alignItems="center">
-              <Typography variant="body1">09:10 WIB</Typography>
-              <Typography
-                sx={{
-                  backgroundColor: palette.light.warning.lighter,
-                  color: palette.light.warning.dark,
-                  borderColor: palette.light.warning.dark,
-                  border: '1px solid',
-                  borderRadius: '6px',
-                  padding: 1,
-                }}
-                variant="caption"
-              >
-                Approval
+              <Typography variant="body1" fontWeight={600}>
+                <Iconify icon="eva:file-text-fill" /> Dokumen Kelengkapan
               </Typography>
             </Stack>
             <Divider sx={{ marginY: 2 }} />
+
+            <Typography fontWeight="600">Kondisi</Typography>
             <Stack>
-              <Typography variant="subtitle2" color="#404040">
-                Details : mohon melengkapi kekurangan dokumen
-              </Typography>
-              <Typography variant="caption" color="#757575" sx={{ marginTop: 2, marginBottom: 1 }}>
-                Lab pemeriksaan darah
-              </Typography>
-              <Button
-                variant="outlined"
-                startIcon={<Add />}
-                fullWidth
-                sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
-                // onClick={() => clickHandler('topUpLimit')}
+              <Stack
+                divider={<Divider orientation="horizontal" flexItem />}
+                spacing={1}
+                sx={{ marginY: 2 }}
               >
-                Hasil Pemeriksaan Laboratorium
-              </Button>
-            </Stack>
-          </Card>
-          {/* Item 2 */}
-          <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
-            <Stack direction="row" justifyContent="space-between" alignItems="center">
-              <Typography variant="body1">09:00 WIB</Typography>
-              <Typography
-                sx={{
-                  backgroundColor: palette.light.warning.lighter,
-                  color: palette.light.warning.dark,
-                  borderColor: palette.light.warning.dark,
-                  border: '1px solid',
-                  borderRadius: '6px',
-                  padding: 1,
-                }}
-                variant="caption"
+                {data &&
+                  data.files.claimConditions.map((file, index) => (
+                    <Stack direction="row" justifyContent={'space-between'} key={index}>
+                      <a
+                        href={file.fileUrl}
+                        target="_blank"
+                        style={{ textDecoration: 'none' }}
+                        rel="noreferrer"
+                      >
+                        <Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
+                          - {file.fileName}
+                        </Typography>
+                      </a>
+                    </Stack>
+                  ))}
+              </Stack>
+
+              <Typography fontWeight="600">Diagnosa</Typography>
+              <Stack
+                divider={<Divider orientation="horizontal" flexItem />}
+                spacing={1}
+                sx={{ marginY: 2 }}
               >
-                Approval
-              </Typography>
-            </Stack>
-            <Divider sx={{ marginY: 2 }} />
-            <Stack>
-              <Typography variant="subtitle2" color="#404040">
-                Details : Penilaian Dokter
-              </Typography>
-            </Stack>
-          </Card>
-          {/* Item 3 */}
-          <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
-            <Stack direction="row" justifyContent="space-between" alignItems="center">
-              <Typography variant="body1">08:00 WIB</Typography>
-              <Typography
-                sx={{
-                  backgroundColor: '#F5F5F5',
-                  color: '#757575',
-                  borderColor: '#757575',
-                  border: '1px solid',
-                  borderRadius: '6px',
-                  padding: 1,
-                }}
-                variant="caption"
+                {data &&
+                  data.files.claimDiagnosis.map((file, index) => (
+                    <Stack direction="row" justifyContent={'space-between'} key={index}>
+                      <a
+                        href={file.fileUrl}
+                        target="_blank"
+                        style={{ textDecoration: 'none' }}
+                        rel="noreferrer"
+                      >
+                        <Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
+                          - {file.fileName}
+                        </Typography>
+                      </a>
+                    </Stack>
+                  ))}
+              </Stack>
+
+              <Typography fontWeight="600">Hasil</Typography>
+              <Stack
+                divider={<Divider orientation="horizontal" flexItem />}
+                spacing={1}
+                sx={{ marginY: 2 }}
               >
-                Review
-              </Typography>
-            </Stack>
-            <Divider sx={{ marginY: 2 }} />
-            <Stack>
-              <Typography variant="subtitle2" color="#404040">
-                Details : Klaim Diajukan
-              </Typography>
+                {data &&
+                  data.files.claimResults.map((file, index) => (
+                    <Stack direction="row" justifyContent={'space-between'} key={index}>
+                      <a
+                        href={file.fileUrl}
+                        target="_blank"
+                        style={{ textDecoration: 'none' }}
+                        rel="noreferrer"
+                      >
+                        <Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
+                          - {file.fileName}
+                        </Typography>
+                      </a>
+                    </Stack>
+                  ))}
+              </Stack>
             </Stack>
           </Card>
         </Stack>
       </Stack>
     </>
-    // <MuiDialog
-    //   title={title}
-    //   openDialog={openDialog}
-    //   setOpenDialog={setOpenDialog}
-    //   content={getContent()}
-    // />
   );
 };
 

frontend/client-portal/src/pages/ClaimReport/Index.tsx

@@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react';
 import { Container, Grid } from '@mui/material';
 /* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-import TableList from '../../components/Table';
 /* ---------------------------------- hooks --------------------------------- */
 import useSettings from '../../hooks/useSettings';
 /* -------------------------------- sections -------------------------------- */
@@ -13,13 +12,7 @@ import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
 import axios from '../../utils/axios';
 /* --------------------------------- context -------------------------------- */
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
-/* --------------------------------- orders --------------------------------- */
-import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
-import { useSearchParams } from 'react-router-dom';
 import List from './List';
-import ClaimItems from '../Claims/components/ClaimItems';
-import DiagnosisHistory from '../Claims/components/DiagnosisHistory';
-import Documents from '../Claims/components/Documents';
 // theme
 import palette from '../../theme/palette';
 
@@ -32,115 +25,10 @@ interface ClaimStatusType {
 export default function Drugs() {
   const { themeStretch } = useSettings();
   const { corporateValue } = useContext(UserCurrentCorporateContext);
-
   const [listClaimStatusItems, setListClaimStatusItems] = useState<ClaimStatusType[]>([]);
-  const [listAllMemberByClaimStatus, setListAllMemberByClaimStatus] = useState([]);
-
-  /* -------------------------------------------------------------------------- */
-  /*                                  setTable                                  */
-  /* -------------------------------------------------------------------------- */
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const loadings = {
-    isLoading: isLoading,
-    setIsLoading: setIsLoading,
-  };
-
-  /* ------------------------------ handle params ----------------------------- */
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [appliedParams, setAppliedParams] = useState({});
-
-  const params = {
-    searchParams: searchParams,
-    setSearchParams: setSearchParams,
-    appliedParams: appliedParams,
-    setAppliedParams: setAppliedParams,
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ------------------------------ handle order ------------------------------ */
-  const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState('fullName');
-
-  const orders = {
-    order: order,
-    setOrder: setOrder,
-    orderBy: orderBy,
-    setOrderBy: setOrderBy,
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ---------------------------- handle pagination --------------------------- */
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-
-  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
-    current_page: 0,
-    from: 0,
-    last_page: 0,
-    links: [],
-    path: '',
-    per_page: 0,
-    to: 0,
-    total: 0,
-  });
-
-  const paginations = {
-    page: page,
-    setPage: setPage,
-    rowsPerPage: rowsPerPage,
-    setRowsPerPage: setRowsPerPage,
-    paginationTable: paginationTable,
-    setPaginationTable: setPaginationTable,
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* -------------------------------- headCell -------------------------------- */
-  const headCells: HeadCell<never>[] = [
-    {
-      id: 'memberId',
-      align: 'left',
-      label: 'Member ID',
-      isSort: true,
-    },
-    {
-      id: 'codeRequest',
-      align: 'left',
-      label: 'Code Request',
-      isSort: true,
-    },
-    {
-      id: 'fullName',
-      align: 'center',
-      label: 'Name',
-      isSort: true,
-    },
-    {
-      id: 'division',
-      align: 'center',
-      label: 'Divisi',
-      isSort: true,
-    },
-    {
-      id: 'submissionDate',
-      align: 'center',
-      label: 'Submission Date',
-      isSort: true,
-    },
-    {
-      id: 'status',
-      align: 'center',
-      label: 'Status',
-      isSort: true,
-    },
-  ];
-  /* -------------------------------------------------------------------------- */
 
   useEffect(() => {
     (async () => {
-      setIsLoading(true);
-
       const claimStatus = await axios.get(`${corporateValue}/claim-report/claim-status`);
 
       setListClaimStatusItems([
@@ -160,28 +48,8 @@ export default function Drugs() {
           color: palette.dark.error.dark,
         },
       ]);
-
-      const parameters =
-        Object.keys(appliedParams).length !== 0
-          ? appliedParams
-          : Object.fromEntries([
-              ...searchParams.entries(),
-              ['order', orders.order],
-              ['orderBy', orders.orderBy],
-            ]);
-
-      const claim = await axios.get(`${corporateValue}/members`, {
-        params: { ...parameters, type: 'claim-report' },
-      });
-
-      setSearchParams(parameters);
-
-      setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
-      setPaginationTable(claim.data.data.allMembersByClaimStatus);
-
-      setIsLoading(false);
     })();
-  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
+  }, [corporateValue]);
 
   return (
     <Page title="Claim Reports">
@@ -192,15 +60,6 @@ export default function Drugs() {
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
             <List />
-
-            {/* <TableList
-              headCells={headCells}
-              rows={listAllMemberByClaimStatus}
-              orders={orders}
-              paginations={paginations}
-              loadings={loadings}
-              params={params}
-            /> */}
           </Grid>
         </Grid>
       </Container>

frontend/client-portal/src/pages/ClaimReport/List.tsx

@@ -174,7 +174,7 @@ export default function List() {
           status:
             obj.status === 'requested' ? (
               <Button
-                onClick={() => navigate('dialog-detail')}
+                onClick={() => navigate(`dialog-detail/${obj.claimRequestId}`)}
                 sx={{
                   backgroundColor: 'rgba(84, 214, 44, 0.16)',
                   color: palette.dark.success.dark,
@@ -190,6 +190,7 @@ export default function List() {
               </Button>
             ) : obj.status === 'approved' ? (
               <Button
+                onClick={() => navigate(`dialog-detail/${obj.claimRequestId}`)}
                 sx={{
                   backgroundColor: (theme) => theme.palette.secondary.main,
                   color: '#FFFF',

frontend/client-portal/src/routes/index.tsx

@@ -128,8 +128,8 @@ export default function Router() {
           index: true,
         },
         {
-          path: 'dialog-detail',
-          element: <DialogDetailClaim/>
+          path: 'dialog-detail/:id',
+          element: <DialogDetailClaim />,
         },
       ],
     },
@@ -216,4 +216,4 @@ const ClaimSubmit = Loadable(lazy(() => import('../pages/ClaimSubmit/Index')));
 // Corporate
 const Corporate = Loadable(lazy(() => import('../pages/Corporate/Index')));
 const CorporateEdit = Loadable(lazy(() => import('../pages/Corporate/Form')));
-const CorporateShow = Loadable(lazy(() => import('../pages/Corporate/Show')));
+const CorporateShow = Loadable(lazy(() => import('../pages/Corporate/Show')));