integrate data api to detail table

2023-10-23 17:10:55 +07:00
parent aa6df1bdae
commit 14427c2d7f
13 changed files with 564 additions and 131 deletions
--- a/frontend/dashboard/src/@types/corporates.ts
+++ b/frontend/dashboard/src/@types/corporates.ts
@@ -208,4 +208,4 @@ export type MasterExclusion = {

 export type CorporateId = {
  corporate_id?: number
-}
+}
--- a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
+++ b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
@@ -61,7 +61,7 @@ export default function CorporateTabNavigations({ position }: Props) {
      label: 'Hospital',
    },
    {
-      path: 'formularium',
+      path: 'formulariums',
      label: 'Formularium',
    },
    {
--- a/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
@@ -1,4 +1,4 @@
-import { Card, Grid } from '@mui/material';
+import { Card, Grid, Container } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
 import Page from '../../../components/Page';
@@ -24,9 +24,9 @@ export default function CorporateFormularium() {
  }, [configuredCorporateContext]);

  return (
-    <Page title="Formularium">
+    <Page title="Corportae Formularium">
      <HeaderBreadcrumbs
-        heading={'Formularium'}
+        heading={'Corporate Formularium'}
        links={[
          {
            name: 'Corporates',
@@ -38,7 +38,7 @@ export default function CorporateFormularium() {
          },
          {
            name: 'Formularium',
-            href: '/corporates/' + corporate_id + '/formularium',
+            href: '/corporates/' + corporate_id + '/formulariums',
          },
        ]}
      />
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx
@@ -1,10 +1,7 @@
 // @mui
 import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
+import { LoadingButton } from "@mui/lab";
+import { CachedOutlined, FindInPageOutlined } from '@mui/icons-material';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../../hooks/useSettings';
@@ -14,26 +11,59 @@ import axios from '../../../../utils/axios';
 import { LaravelPaginatedData } from '../../../../@types/paginated-data';
 import { Icd } from '../../../../@types/diagnosis';
 import BasePagination from '../../../../components/BasePagination';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import InfoDetail from "./InfoDetail";
+import { DetailCorpFormularium } from "./Types";
+import DialogUpdateStatus from '../../DialogUpdateStatus';


-export default function CategoryDetail() {
-
+export default function CategoryDetail(props: DetailCorpFormularium) {
+  const [open, setOpen] = React.useState(false);
+  const [isDialogOpen, setDialogOpen] = useState(false)

  return (
-    <Box sx={{pb: 2}}>
-      <TableContainer component={Paper}>
-        <Table aria-label="collapsible table">
-          <TableBody>
+    <React.Fragment>
+        <TableBody>
          <TableRow>
-              <TableCell align='left'>Code</TableCell>
-              <TableCell align='left'>ATC Code</TableCell>
-              <TableCell align='left'>Name</TableCell>
-              <TableCell align='left'>Category</TableCell>
-              <TableCell align='left'>UOM</TableCell>
-            </TableRow>            
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </Box>
+            <TableCell align='left' width={50}/>
+            <TableCell align='left'>{props.code}</TableCell>
+            <TableCell align='left'>{props.name}</TableCell>
+            <TableCell align='left' width={100}>
+              <Label color='success'>
+                Active
+              </Label>
+            </TableCell>
+            <TableCell align='center' width={100}>
+              <TableMoreMenu actions={
+                <>
+                  <MenuItem onClick={() => setOpen(!open)}>
+                    <FindInPageOutlined />
+                    Detail
+                  </MenuItem>
+                  <MenuItem onClick={() => setDialogOpen(!isDialogOpen)}>
+                    <CachedOutlined />
+                    Update Status
+                  </MenuItem>
+                </>
+              } />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+        <TableRow>
+          <TableCell colSpan={5} style={{paddingBottom:0, paddingTop:0}}>
+            <Collapse in={open} timeout='auto' unmountOnExit>
+              <InfoDetail {...props}/>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+
+        {/* TODO: dialog update status */}
+        {/* <DialogUpdateStatus 
+          openDialog={isDialogOpen} 
+          setOpenDialog={setDialogOpen}
+          id={0}
+        /> */}
+    </React.Fragment>
  )
 }
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx
@@ -1,38 +1,45 @@
 import TableMoreMenu from "@/components/table/TableMoreMenu"
 import { FindInPageOutlined } from "@mui/icons-material"
 import HistoryIcon from '@mui/icons-material/History';
-import { Collapse, MenuItem, TableCell, TableRow } from "@mui/material"
-import React from "react";
+import { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+import React, { useEffect } from "react";
 import CategoryDetail from "./CategoryDetail";
+import { CorporateFormulariumList, DetailCorpFormularium, RespDetailFormularium } from "./Types";
+import axios from "@/utils/axios";
+import { useNavigate, useParams } from "react-router-dom";

-interface RowProps {
-  id: number
-  category: string
-  description: string
-}
-
-interface temporaryData {
-  id: number
-  category: string
-  description: string
-}
-
-const CategoryRow: React.FC<RowProps> = (props) => {
+const CategoryRow: React.FC<CorporateFormulariumList> = (props) => {
  const [open, setOpen] = React.useState(false);
+  const { corporate_id } = useParams();
+  const navigate = useNavigate();
+  
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<RespDetailFormularium | null>(null)
+  const [dataRow, setDataRow] = React.useState<DetailCorpFormularium[] | null>(null)
+
+  const loadDataTableData = async (id: number) => {
+    setDataTableLoading(true);
+    const resp = await axios.get(`/corporates/${corporate_id}/formulariums/${id}`);
+    console.log(resp.data);
+    setDataTableLoading(false);
+    setDataTableData(resp.data);
+    setDataRow(resp.data.data);
+  }

  return (
    <React.Fragment>
      <TableRow>
+        <TableCell align="left" width={50}/>
        <TableCell align="left">{props.category}</TableCell>
        <TableCell align="left">{props.description}</TableCell>
-        <TableCell align="right">
+        <TableCell align="center" width={100}>
          <TableMoreMenu actions = {
            <>
-            <MenuItem onClick={() => setOpen(!open)}>
+            <MenuItem onClick={async () => { loadDataTableData(props.id); setOpen(!open)}}>
              <FindInPageOutlined />
              Detail
            </MenuItem>
-            <MenuItem onClick={() => ""}>
+            <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/formulariums/${props.id}/history`)}>
              <HistoryIcon />
              History
            </MenuItem>
@@ -40,10 +47,33 @@ const CategoryRow: React.FC<RowProps> = (props) => {
          } />
        </TableCell>        
      </TableRow>
-      <TableRow>
-        <Collapse in={open} timeout='auto' unmountOnExit>
-          <CategoryDetail />
-        </Collapse>
+      <TableRow >
+        <TableCell colSpan={5} align="center" style={{paddingBottom: 0, paddingTop: 0}}>
+          <Collapse in={open} timeout='auto' unmountOnExit>
+            <TableContainer component={Paper}>
+              <Table aria-label="collapsible table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell align="left" width={50} />
+                    <TableCell align="left">Code</TableCell>
+                    <TableCell align="left">Name</TableCell>
+                    <TableCell align="left" width={100}>Status</TableCell>
+                    <TableCell align="center" width={100}></TableCell>
+                  </TableRow>
+                </TableHead>
+                {dataTableIsLoading ? (
+                  <TableCell colSpan={5} align="center">Loading</TableCell>
+                ) : dataTableData?.data.length == 0 ? (
+                  <TableCell colSpan={5} align="center">No Data</TableCell>
+                ) : (
+                  dataRow?.map(item => (
+                    <CategoryDetail {...item}/>
+                  ))
+                )}
+              </Table>
+            </TableContainer>
+          </Collapse>
+        </TableCell>
      </TableRow>
    </React.Fragment>
  )
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx
@@ -39,11 +39,11 @@ export default function CorporateFormulariumCreate() {
          },
          {
            name: 'Formularium',
-            href: '/corporates/' + corporate_id + '/formularium',
+            href: '/corporates/' + corporate_id + '/formulariums',
          },
          {
            name: 'Create Formularium',
-            href: '/corporates/' + corporate_id + '/formularium/create',
+            href: '/corporates/' + corporate_id + '/formulariums/create',
          },
         ]} 
        />
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx
@@ -2,17 +2,22 @@ import { useForm } from "react-hook-form";
 import { FormProvider, RHFSelect } from "../../../../components/hook-form";
 import { Button, Card, Grid, Typography } from "@mui/material";
 import { Stack, fontWeight } from "@mui/system";
+import { useNavigate, useParams } from "react-router";
+import React, { useEffect } from "react";
+import { DetailCorpFormularium } from "./Types";
+import axios from "@/utils/axios";


 export default function CorporateFormulariumCreateForm() {
-
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
  const methods = useForm([
    // methods Logic??
  ]);

  const onSubmit = async (data: any) => {
    // logic onSubmit
-  }
+  };

  const {
    handleSubmit,
@@ -21,17 +26,38 @@ export default function CorporateFormulariumCreateForm() {
  // Data Dummy
  const options = ["Dummy 1", "Dummy 2", "Dummy 3"];

+  const [dataDropdownIsLoading, setDataDropdownLoading] = React.useState(true);
+  const [dataDropdownData, setDataDropdownData] = React.useState<DetailCorpFormularium[] | null>(null)
+  const loadDataDropdown = async () => {
+    setDataDropdownLoading(true);
+    const resp = await axios.get(`corporates/${corporate_id}/formulariums/create`);
+    console.log(resp.data);
+    setDataDropdownLoading(false);
+
+    setDataDropdownData(resp.data.data)
+  };
+
+  useEffect(() => {
+    loadDataDropdown();
+  }, [])
+
  return (
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
      <Grid item xs={12}>
        <Card sx={{p:2}}>
          <Stack spacing={3}>
-            <Typography variant="h6">Category*</Typography>
+            <Typography variant="h6">Formularium Name*</Typography>
            <RHFSelect name="category" label="Category" placeholder="Category" fullWidth={true}>
-              {options.map((option, index) => (
+              {/* {options.map((option, index) => (
                <option key={index} value={option}>
                  {option}
                </option>
+              ))} */}
+              <option value=""/>
+              {dataDropdownData?.map((item, index) => (
+                <option key={index} value={item.name}>
+                  {item.name}
+                </option>
              ))}
            </RHFSelect>
          </Stack>
@@ -40,6 +66,7 @@ export default function CorporateFormulariumCreateForm() {
          <Grid container item xs={12} md={12} justifyContent="flex-end" sx={{p:2}}>
            <Button
              variant="outlined"
+              onClick={() => navigate(`/corporates/${corporate_id}/formulariums/`)}
              sx={{
                p: 1,
                fontWeight: 'bold',
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx
@@ -0,0 +1,218 @@
+// @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,
+    },
+    '7: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, .85)'
+        : '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 = 'Corporate Formularium History'
+    const { id } = useParams();
+    const { corporate_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\\CorporateFormularium';
+      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: '/corporates/' + corporate_id,
+            },
+            {
+              name: 'Formularium',
+              href: '/corporates/' + corporate_id + '/formulariums',
+            },
+            {
+              name: 'History',
+              href: '/corporates/' + corporate_id + '/formulariums'
+            },
+          ]}
+        />
+        {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>
+              <TableContainer component={Paper}>
+                <Table aria-label='collapsible table'>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell align='center'>Field</TableCell>
+                      <TableCell align='center'>Old Value</TableCell>
+                      <TableCell align='center'>New Value</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {Object.entries(item.old_values).map(([key, value]) => {
+                      let renderedValue;
+                      if (key === 'deleted_by' || 
+                          key === 'deleted_at' || 
+                          key === 'created_by' || 
+                          key === 'created_at' || 
+                          key === 'updated_by' ||
+                          key === 'description' 
+                        ) {
+                        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 null
+                      } else {
+                        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>
+                </Table>
+              </TableContainer>
+            </AccordionDetails>
+          </Accordion>
+        ))}
+      </div>
+    );
+  }
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/InfoDetail.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/InfoDetail.tsx
@@ -0,0 +1,48 @@
+import { Collapse, TableCell, TableRow, Card, Box, Grid, Typography } from "@mui/material";
+import { DetailCorpFormularium } from "./Types";
+
+
+
+export default function InfoDetail(props: DetailCorpFormularium) {
+
+
+  return(
+    <Card sx={{paddingX:2, paddingY:2, marginBottom:3}}>
+      <Box sx={{margin: 1, pb: 2}}>
+        <Grid container>
+          <Grid item>
+            <Typography sx={{ fontWeight: '600', mb: 1}}>Detail</Typography>
+            <Grid container>
+              <Grid item xs={2}>Description</Grid>
+              <Grid item xs={10}> : {props.description}</Grid>
+
+              <Grid item xs={2}>General Indication</Grid>
+              <Grid item xs={10}> : {props.general_indication}</Grid>
+
+              <Grid item xs={2}>Composition</Grid>
+              <Grid item xs={10}> : {props.composition}</Grid>
+
+              <Grid item xs={2}>Kategori Obat</Grid>
+              <Grid item xs={10}> : {props.kategori_obat}</Grid>
+
+              <Grid item xs={2}>BPOM Registration</Grid>
+              <Grid item xs={10}> : {props.bpom_registration}</Grid>
+
+              <Grid item xs={2}>Classification</Grid>
+              <Grid item xs={10}> : {props.classifications}</Grid>
+
+              <Grid item xs={2}>Cat For</Grid>
+              <Grid item xs={10}> : {props.cat_for}</Grid>
+
+              <Grid item xs={2}>Class</Grid>
+              <Grid item xs={10}> : {props.class}</Grid>
+
+              <Grid item xs={2}>Manufacturer</Grid>
+              <Grid item xs={10}> : {props.manufacturer}</Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Box>
+    </Card>
+  )
+}
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/List.tsx
@@ -1,26 +1,70 @@
 // @mui
 import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../../hooks/useSettings';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
+import axiosInstance from '../../../../utils/axios';
 import axios from '../../../../utils/axios';
 import { LaravelPaginatedData } from '../../../../@types/paginated-data';
-import { Icd } from '../../../../@types/diagnosis';
 import BasePagination from '../../../../components/BasePagination';
 import CategoryRow from './CategoryRow'
+import {CorporateFormulariumList} from "./Types";


 export default function List() {
+  const navigate = useNavigate();
  const { corporate_id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
+  const [dataRow, setDataRow] = useState<CorporateFormulariumList[] | null>(null);
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+
+  // Load Data
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const resp = await axios.get(`/corporates/${corporate_id}/formulariums`, {params: filter});
+    setDataTableLoading(false);
+    setDataTableData(resp.data);
+    setDataRow(resp.data.data);
+    console.log(dataTableData);
+    console.log(dataRow);
+  }
+
+  const applyFilter = async (searchFilter: any) => {
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+    console.log("here")
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
  
  function SearchInput(props: any) {
     // SEARCH
@@ -43,7 +87,15 @@ export default function List() {

    return (
      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField 
+          id="search-input" 
+          ref={searchInput} 
+          label="Search" 
+          variant="outlined" 
+          fullWidth 
+          onChange={handleSearchChange} 
+          value={searchText}
+        />
      </form>
    );
  }
@@ -57,74 +109,26 @@ export default function List() {
            id='create-button'
            variant='contained'
            startIcon={<AddIcon />}
+            onClick={() => navigate(`/corporates/${corporate_id}/formulariums/create`)}
            sx={{
              p: 1.8,
              backgroundColor: '#19BBBB', color: '#FFF',
              "&:hover":{
                backgroundColor: '#19BBBB', color: '#FFF',
-              }
+              },
+              width: '200px'
            }}
          >
-            <Link to={`/corporates/${corporate_id}/formularium/create`} style={{color: 'white', textDecoration: 'none'}}>
-              Create
-            </Link>
+            Create
          </Button>
        </Stack>
      </div>
    )
  }

-  const applyFilter = async (searchFilter: string) => {
-    // applyFilter logic
-  }
-
-  const handlePageChange = (event: ChangeEvent, value: number) => {
-    // pageChange logic
-  }
-
  const headStyle = {
    fontWeight: 'bold',
  };
-
-  // Dummy Default Data
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
-    current_page: 1,
-    data: [],
-    path: "",
-    first_page_url: "",
-    last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
-    per_page: 10,
-    from: 0,
-    to: 0,
-    total: 0
-  });
-
-  // Temporary Data
-  const temporaryData = [
-    {
-      id: 1,
-      category: 'Category 1',
-      description: 'This is the description for Category 1',
-    },
-    {
-      id: 2,
-      category: 'Category 2',
-      description: 'This is the description for Category 2',
-    },
-    {
-      id: 3,
-      category: 'Category 3',
-      description: 'This is the description for Category 3',
-    },
-    {
-      id: 4,
-      category: 'Category 4',
-      description: 'This is the description for Category 4',
-    },
-  ];
  
  return(
    <React.Fragment>
@@ -134,19 +138,37 @@ export default function List() {
            {/* The Main Table */}
            <TableContainer component={Paper}>
              <Table aria-label="collapsible table">
-                <TableBody>
+                <TableHead>
                  <TableRow>
-                    <TableCell style={headStyle} align="left">Category</TableCell>
+                    <TableCell align='left' width={50}/> 
+                    <TableCell style={headStyle} align="left">Formularium Name</TableCell>
                    <TableCell style={headStyle} align="left">Description</TableCell>
-                    <TableCell style={headStyle} align="right"></TableCell>
+                    <TableCell style={headStyle} align="center" width={100}></TableCell>
                  </TableRow>
-                </TableBody>
-                <TableBody>
-                  {/* <CategoryRow /> */}
-                  {temporaryData.map(row => (
-                    <CategoryRow id={row.id} category={row.category} description={row.description} />
-                  ))}
-                </TableBody>              
+                </TableHead>
+                {dataTableIsLoading ? (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} align="center">
+                        Loading
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : dataTableData.data.length == 0 ? (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} align="center">
+                        No Data
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataRow?.map(item => (
+                      <CategoryRow {...item}/>
+                    ))}
+                  </TableBody> 
+                )}             
              </Table>
            </TableContainer>
            <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
--- a/frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts
@@ -0,0 +1,57 @@
+export type CorporateFormularium = {
+  current_page: number
+  data: CorporateFormulariumList[]
+  first_page_url: string
+  from: number
+  last_page: number
+  last_page_url: string
+  links: CorporateFormulariumPaginationLinks[]
+  next_page_url: any
+  per_page: number
+  total: number
+}
+  
+export type CorporateFormulariumList = {
+  id: number
+  formulaurium_category_id: number
+  category: string
+  description: string
+  active: string
+};
+  
+export type CorporateFormulariumPaginationLinks = {
+  url?: string
+  label: string
+  active: boolean
+}
+
+export type RespDetailFormularium = {
+  status: number
+  message: string
+  data: DetailCorpFormularium[]
+}
+
+export type DetailCorpFormularium = {
+  id: number
+  code: string
+  name: string
+  description: string
+  manufacturer: string
+  category_name: string
+  kategori_obat: string
+  uom: string
+  general_indication: string
+  composition: string
+  atc_code: string
+  class: string
+  bpom_registration: string
+  classifications: string
+  cat_for: string
+  created_at: string
+  updated_at: string
+  deleted_at: any
+  created_by: number
+  updated_by: number
+  deleted_by: any
+  formularium_template_id: number
+}
--- a/frontend/dashboard/src/pages/Corporates/Index.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Index.tsx
@@ -128,7 +128,7 @@ export default function Corporates() {
    setDataTableLoading(true);
    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
    const response = await axios.get('/corporates', { params: filter });
-    // console.log(response.data);
+    console.log(response.data);
    setDataTableLoading(false);

    setDataTableData(response.data);
@@ -297,11 +297,7 @@ export default function Corporates() {
              Import
            </Button> */}
          <Link to={'/corporates/create'}>
-<<<<<<< HEAD
-            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2' }}> 
-=======
            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2', backgroundColor: '#19BBBB'  }}>
->>>>>>> 8a3b0f3d1185955685128bc197a50193b837ddc1
              New Corporate
            </Button>
          </Link>
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -161,13 +161,17 @@ export default function Router() {
              element: <CorporateDivisionsCreate />,
            },
            {
-              path: ':corporate_id/formularium',
+              path: ':corporate_id/formulariums',
              element: <CorporateFormularium />,
            },
            {
-              path: ':corporate_id/formularium/create',
+              path: ':corporate_id/formulariums/create',
              element: <CorporateFormulariumCreate />
            },
+            {
+              path: ':corporate_id/formulariums/:id/history',
+              element: <CorporateFormulariumHistory />
+            },

            {
              path: ':corporate_id/diagnosis-exclusions',
@@ -471,6 +475,7 @@ const DiagnosisExclusionsHistory = Loadable(

 const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index')));
 const CorporateFormulariumCreate = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/CreateForm')));
+const CorporateFormulariumHistory = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/History')))

 const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
 const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));