add create corporate formularium

frontend/dashboard/.env.development

@@ -4,4 +4,4 @@ PORT=8083
 
 REACT_APP_HOST_API_URL="http://lms.test"
 
-VITE_API_URL="http://127.0.0.1:8000/api/internal"
+VITE_API_URL="https://aso-api.linksehat.dev/api/internal"

frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx

@@ -4,7 +4,7 @@ import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
 import Page from '../../../components/Page';
 import useSettings from '../../../hooks/useSettings';
 import CorporateTabNavigations from '../CorporateTabNavigations';
-import List from './List';
+import List from './New/List';
 
 import { useContext, useEffect, useState } from 'react';
 import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';

frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx

@@ -0,0 +1,39 @@
+// @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 { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../../utils/axios';
+import { LaravelPaginatedData } from '../../../../@types/paginated-data';
+import { Icd } from '../../../../@types/diagnosis';
+import BasePagination from '../../../../components/BasePagination';
+
+
+export default function CategoryDetail() {
+
+
+  return (
+    <Box sx={{pb: 2}}>
+      <TableContainer component={Paper}>
+        <Table aria-label="collapsible table">
+          <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>
+  )
+}

frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx

@@ -0,0 +1,52 @@
+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 CategoryDetail from "./CategoryDetail";
+
+interface RowProps {
+  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);
+
+  return (
+    <React.Fragment>
+      <TableRow>
+        <TableCell align="left">{props.category}</TableCell>
+        <TableCell align="left">{props.description}</TableCell>
+        <TableCell align="right">
+          <TableMoreMenu actions = {
+            <>
+            <MenuItem onClick={() => setOpen(!open)}>
+              <FindInPageOutlined />
+              Detail
+            </MenuItem>
+            <MenuItem onClick={() => ""}>
+              <HistoryIcon />
+              History
+            </MenuItem>
+            </>
+          } />
+        </TableCell>        
+      </TableRow>
+      <TableRow>
+        <Collapse in={open} timeout='auto' unmountOnExit>
+          <CategoryDetail />
+        </Collapse>
+      </TableRow>
+    </React.Fragment>
+  )
+}
+
+export default CategoryRow

frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx

@@ -0,0 +1,54 @@
+import { Card, Grid } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import HeaderBreadcrumbs from '../../../../components/HeaderBreadcrumbs';
+import Page from '../../../../components/Page';
+import useSettings from '../../../../hooks/useSettings';
+import CorporateTabNavigations from '../../CorporateTabNavigations';
+
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
+import CorporateFormulariumCreateForm from "./Form"
+
+
+export default function CorporateFormulariumCreate() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
+  return(
+    <Page title='Create Formularium'>
+      <HeaderBreadcrumbs
+         heading={'Create Formularium'}
+         links={[
+          {
+            name: 'Corporates',
+            href: '/corporates'
+          },
+          {
+            name: corporate?.name ?? "-",
+            href: '/corporates/' + corporate_id,
+          },
+          {
+            name: 'Formularium',
+            href: '/corporates/' + corporate_id + '/formularium',
+          },
+          {
+            name: 'Create Formularium',
+            href: '/corporates/' + corporate_id + '/formularium/create',
+          },
+         ]} 
+        />
+        
+        <CorporateFormulariumCreateForm />
+    </Page>
+  )
+}

frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx

@@ -0,0 +1,76 @@
+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";
+
+
+export default function CorporateFormulariumCreateForm() {
+
+  const methods = useForm([
+    // methods Logic??
+  ]);
+
+  const onSubmit = async (data: any) => {
+    // logic onSubmit
+  }
+
+  const {
+    handleSubmit,
+  } = methods;
+
+  // Data Dummy
+  const options = ["Dummy 1", "Dummy 2", "Dummy 3"];
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Grid item xs={12}>
+        <Card sx={{p:2}}>
+          <Stack spacing={3}>
+            <Typography variant="h6">Category*</Typography>
+            <RHFSelect name="category" label="Category" placeholder="Category" fullWidth={true}>
+              {options.map((option, index) => (
+                <option key={index} value={option}>
+                  {option}
+                </option>
+              ))}
+            </RHFSelect>
+          </Stack>
+        </Card>
+        <Stack direction="row" spacing={4} sx={{marginTop: '40px'}}>
+          <Grid container item xs={12} md={12} justifyContent="flex-end" sx={{p:2}}>
+            <Button
+              variant="outlined"
+              sx={{
+                p: 1,
+                fontWeight: 'bold',
+                color: 'black',
+                outlineColor: 'black',
+                marginRight: '20px',
+                width: 100
+              }}
+            >
+              Cancel
+            </Button>
+            
+            <Button
+              variant="contained"
+              sx={{
+                p: 1,
+                fontWeight: 'bold',
+                backgroundColor: '#19BBBB', 
+                color: '#FFF',
+                "&:hover":{
+                  backgroundColor: '#19BBBB', color: '#FFF',
+                },
+                width: 100
+              }}
+            >
+              Create
+            </Button>
+          </Grid>
+        </Stack>
+      </Grid>
+
+    </FormProvider>
+  )
+}

frontend/dashboard/src/pages/Corporates/Formularium/New/List.tsx

@@ -0,0 +1,157 @@
+// @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 axios from '../../../../utils/axios';
+import { LaravelPaginatedData } from '../../../../@types/paginated-data';
+import { Icd } from '../../../../@types/diagnosis';
+import BasePagination from '../../../../components/BasePagination';
+import CategoryRow from './CategoryRow'
+
+
+export default function List() {
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+  
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function SearchCreate(props: any) {
+    return (
+      <div>
+        <Stack direction={'row'} spacing={2} sx={{p:2}}>
+          <SearchInput onSearch={applyFilter}/>
+          <Button
+            id='create-button'
+            variant='contained'
+            startIcon={<AddIcon />}
+            sx={{
+              p: 1.8,
+              backgroundColor: '#19BBBB', color: '#FFF',
+              "&:hover":{
+                backgroundColor: '#19BBBB', color: '#FFF',
+              }
+            }}
+          >
+            <Link to={`/corporates/${corporate_id}/formularium/create`} style={{color: 'white', textDecoration: 'none'}}>
+              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>
+      <Stack>
+        <SearchCreate />
+          <Card>
+            {/* The Main Table */}
+            <TableContainer component={Paper}>
+              <Table aria-label="collapsible table">
+                <TableBody>
+                  <TableRow>
+                    <TableCell style={headStyle} align="left">Category</TableCell>
+                    <TableCell style={headStyle} align="left">Description</TableCell>
+                    <TableCell style={headStyle} align="right"></TableCell>
+                  </TableRow>
+                </TableBody>
+                <TableBody>
+                  {/* <CategoryRow /> */}
+                  {temporaryData.map(row => (
+                    <CategoryRow id={row.id} category={row.category} description={row.description} />
+                  ))}
+                </TableBody>              
+              </Table>
+            </TableContainer>
+            <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+          </Card>
+      </Stack>
+    </React.Fragment>
+  )
+}

frontend/dashboard/src/routes/index.tsx

@@ -160,6 +160,10 @@ export default function Router() {
               path: ':corporate_id/formularium',
               element: <CorporateFormularium />,
             },
+            {
+              path: ':corporate_id/formularium/create',
+              element: <CorporateFormulariumCreate />
+            },
 
             {
               path: ':corporate_id/diagnosis-exclusions',
@@ -459,6 +463,7 @@ const DiagnosisExclusionsHistory = Loadable(
 
 
 const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index')));
+const CorporateFormulariumCreate = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/CreateForm')));
 
 const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
 const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));