Update exclusion corporate setting

2023-09-21 18:06:34 +07:00
parent ae1b213ff0
commit e8c2396442
11 changed files with 321 additions and 6 deletions
--- a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/History.tsx
+++ b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/History.tsx
@@ -0,0 +1,211 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import { useContext, useEffect, useState } from 'react';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import useSettings from '../../../hooks/useSettings';
+import axios from '../../../utils/axios';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import { Corporate } from '@/@types/corporates';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+  const pageTitle = 'Audittrail Corporate';
+  
+  const { themeStretch } = useSettings();
+
+  const { corporate_id, id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+    const model = 'App\\Models\\ExclusionRules';
+    const url = `/audittrail/${id}?model=${model}`;
+    axios.get(url)
+      .then((res) => {
+        setCurrentCorporate(res.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+
+  }, [configuredCorporateContext]);
+
+  return (
+    <div>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: corporate?.name ?? '-',
+            href: '/corporate/' + corporate_id + '/diagnosis-exclusions',
+            
+          },
+          {
+            name: 'Audittrail Corporate',
+            href: '/corporate/' + corporate_id + '/plans',
+          },
+        ]}
+      />
+    {currentCorporate?.data.map((item, index) => (
+      <Accordion
+        key={index}
+        expanded={expanded === `panel${index}`}
+        onChange={handleChange(`panel${index}`)}
+      >
+        <AccordionSummary
+          aria-controls={`panel${index}d-content`}
+          id={`panel${index}d-header`}
+        >
+        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Field</TableCell>
+            <TableCell align="center">Old Value</TableCell>
+            <TableCell align="center">New Values</TableCell>
+          </TableRow>
+       </TableHead>
+       <TableBody>
+       {Object.entries(item.old_values).map(([key, value]) => {
+          let renderedValue;
+          if (key === 'deleted_by' || key === 'created_by' || key === 'updated_by') {
+            return null; // Melewati iterasi saat key adalah 'deleted_by'
+          }
+          switch (key) {
+          case 'welcome_message':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'help_text':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'active':
+            renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
+            value = value == 1 ? 'Active' : 'Inactive';
+            break;
+          case 'created_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'delete_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          default:
+            renderedValue = item.new_values[key];
+            break;
+          }
+
+          const field = key.charAt(0).toUpperCase() + key.slice(1);
+          if (value != renderedValue){
+            return (
+            <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell>{`${field}`}</TableCell>
+              <TableCell align="center">{`${value}`}</TableCell>
+              <TableCell align="center">{renderedValue}</TableCell>
+            </TableRow>
+            );
+          }
+          })}
+
+      </TableBody>
+        </AccordionDetails>
+      </Accordion>
+    ))}
+    </div>
+  );
+}
--- a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
@@ -44,7 +44,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
@@ -53,6 +53,7 @@ import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { Icon } from '@iconify/react';
 import { LoadingButton } from '@mui/lab';
+import HistoryIcon from '@mui/icons-material/History';

 export default function List(props: any) {
  const { themeStretch } = useSettings();
@@ -473,9 +474,11 @@ export default function List(props: any) {
          <TableCell align="left">{row.code}</TableCell>
          <TableCell align="left">{row.name}</TableCell>
          <TableCell align="left">{Object.keys(row.rules).length ? 'With Rules' : 'All'}</TableCell>
+          <TableCell align="left">{row.active ? 'Active' : 'Inactive'}</TableCell>

          <TableCell align="center">
-            {openEdit ? (
+          <Stack direction={'row'} spacing={1} sx={{ mb: 1 }}>
+          {openEdit ? (
              <Button
                variant="contained"
                color="success"
@@ -506,7 +509,7 @@ export default function List(props: any) {
                Edit
              </Button>
            )}
-            <Button
+            {/* <Button
              variant="outlined"
              color="error"
              size="small"
@@ -516,7 +519,12 @@ export default function List(props: any) {
              }}
            >
              Delete
-            </Button>
+            </Button> */}
+             <Link to={`/corporate/${corporate_id}/diagnosis-exclusions/${row.id}/history`}>
+                <HistoryIcon />
+              </Link>
+          </Stack>
+            
          </TableCell>
        </TableRow>
        {/* COLLAPSIBLE ROW */}
@@ -881,7 +889,10 @@ export default function List(props: any) {
                <TableCell style={headStyle} align="left">
                  Rules
                </TableCell>
-                <TableCell style={headStyle} align="center">
+                <TableCell style={headStyle} align="left">
+                  Status
+                </TableCell>
+                <TableCell style={headStyle} align="left">
                  Action
                </TableCell>
              </TableRow>
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -165,6 +165,10 @@ export default function Router() {
              path: ':corporate_id/diagnosis-exclusions',
              element: <DiagnosisExclusions />,
            },
+            {
+              path: ':corporate_id/diagnosis-exclusions/:id/history',
+              element: <DiagnosisExclusionsHistory />,
+            },

            {
              path: ':corporate_id/hospitals',
@@ -432,6 +436,9 @@ const CorporatePlansHistory = Loadable(lazy(() => import('../pages/Corporates/Pl
 const DiagnosisExclusions = Loadable(
  lazy(() => import('../pages/Corporates/DiagnosisExclusion/Index'))
 );
+const DiagnosisExclusionsHistory = Loadable(
+  lazy(() => import('../pages/Corporates/DiagnosisExclusion/History'))
+);


 const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index')));