integrate data api to detail table

frontend/dashboard/src/@types/corporates.ts

@@ -208,4 +208,4 @@ export type MasterExclusion = {
 
 export type CorporateId = {
   corporate_id?: number
-}
+}

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',
     },
     {

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',
           },
         ]}
       />

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 { LoadingButton } from "@mui/lab";
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { CachedOutlined, FindInPageOutlined } from '@mui/icons-material';
-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';
@@ -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}}>
+    <React.Fragment>
-      <TableContainer component={Paper}>
+        <TableBody>
-        <Table aria-label="collapsible table">
-          <TableBody>
           <TableRow>
-              <TableCell align='left'>Code</TableCell>
+            <TableCell align='left' width={50}/>
-              <TableCell align='left'>ATC Code</TableCell>
+            <TableCell align='left'>{props.code}</TableCell>
-              <TableCell align='left'>Name</TableCell>
+            <TableCell align='left'>{props.name}</TableCell>
-              <TableCell align='left'>Category</TableCell>
+            <TableCell align='left' width={100}>
-              <TableCell align='left'>UOM</TableCell>
+              <Label color='success'>
-            </TableRow>            
+                Active
-          </TableBody>
+              </Label>
-        </Table>
+            </TableCell>
-      </TableContainer>
+            <TableCell align='center' width={100}>
-    </Box>
+              <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>
   )
 }

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 { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
-import React from "react";
+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 {
+const CategoryRow: React.FC<CorporateFormulariumList> = (props) => {
-  id: number
-  category: string
-  description: string
-}
-
-interface temporaryData {
-  id: number
-  category: string
-  description: string
-}
-
-const CategoryRow: React.FC<RowProps> = (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>
+      <TableRow >
-        <Collapse in={open} timeout='auto' unmountOnExit>
+        <TableCell colSpan={5} align="center" style={{paddingBottom: 0, paddingTop: 0}}>
-          <CategoryDetail />
+          <Collapse in={open} timeout='auto' unmountOnExit>
-        </Collapse>
+            <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>
   )

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',
           },
          ]} 
         />

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',

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>
+    );
+  }

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>
+  )
+}

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
-              Create
-            </Link>
           </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>
+                </TableHead>
-                <TableBody>
+                {dataTableIsLoading ? (
-                  {/* <CategoryRow /> */}
+                  <TableBody>
-                  {temporaryData.map(row => (
+                    <TableRow>
-                    <CategoryRow id={row.id} category={row.category} description={row.description} />
+                      <TableCell colSpan={4} align="center">
-                  ))}
+                        Loading
-                </TableBody>              
+                      </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} />

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
+}

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>

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')));