From 010e971b69a5dc882ebc5364c68821d73f882868 Mon Sep 17 00:00:00 2001 From: adibwp Date: Thu, 26 Oct 2023 17:43:47 +0700 Subject: [PATCH] add list master formularium --- .../layouts/dashboard/navbar/NavConfig.tsx | 2 +- .../Corporates/Formularium/New/History.tsx | 2 +- .../Formularium/Master/CreateUpdate.tsx | 1 + .../Master/FormulariumV2/CreateUpdate.tsx | 69 +++++ .../Master/FormulariumV2/CreateUpdateForm.tsx | 143 +++++++++ .../FormulariumV2/Detail/Formularium.tsx | 289 ++++++++++++++++++ .../Master/FormulariumV2/Detail/Index.tsx | 37 +++ .../Master/FormulariumV2/FormulariumRow.tsx | 48 +++ .../pages/Master/FormulariumV2/History.tsx | 211 +++++++++++++ .../src/pages/Master/FormulariumV2/Index.tsx | 33 ++ .../src/pages/Master/FormulariumV2/List.tsx | 172 +++++++++++ .../src/pages/Master/FormulariumV2/Type.ts | 31 ++ frontend/dashboard/src/routes/index.tsx | 25 ++ 13 files changed, 1061 insertions(+), 2 deletions(-) create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdate.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdateForm.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Index.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/History.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/Index.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/List.tsx create mode 100644 frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts diff --git a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx index 6ecadc09..70aa3a2b 100644 --- a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx +++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx @@ -53,7 +53,7 @@ const navConfig = [ children: [ { title: 'Corporate', path: '/corporates' }, // { title: 'Corporate Create', path: '/corporates/create' }, - { title: 'Formularium', path: '/master/formularium-template' }, + { title: 'Formularium', path: '/master/formularium-template-v2' }, { title: 'Master ICD-10 Diagnosis', path: '/master/diagnosis-template' }, { title: 'Hospitals', path: '/hospitals' }, ], diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx index 1a4b4eb2..95f83d2c 100644 --- a/frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx @@ -200,7 +200,7 @@ import { } else { return ( - {`${field}`} + {`${field}`} {`${value}`} {renderedValue} diff --git a/frontend/dashboard/src/pages/Master/Formularium/Master/CreateUpdate.tsx b/frontend/dashboard/src/pages/Master/Formularium/Master/CreateUpdate.tsx index 5aaaf2eb..29cd5cb4 100644 --- a/frontend/dashboard/src/pages/Master/Formularium/Master/CreateUpdate.tsx +++ b/frontend/dashboard/src/pages/Master/Formularium/Master/CreateUpdate.tsx @@ -21,6 +21,7 @@ export default function PlanCreate() { useEffect(() => { setCorporate(configuredCorporateContext.currentCorporate); + console.log(configuredCorporateContext.currentCorporate); }, [configuredCorporateContext]) const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState(); diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdate.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdate.tsx new file mode 100644 index 00000000..2e1aa7f7 --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdate.tsx @@ -0,0 +1,69 @@ +import { useNavigate, useParams } from "react-router-dom"; +import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs"; +import Page from "../../../components/Page"; +import useSettings from "../../../hooks/useSettings"; +import {useContext, useEffect, useMemo, useState } from 'react'; +import axios from '../../../utils/axios'; +import { useSnackbar } from 'notistack'; +import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext"; +import { Corporate, CorporatePlan } from "@/@types/corporates"; +import { MasterFormularium } from "./Type"; +import CreateUpdateForm from "./CreateUpdateForm"; +import Typography from "@/theme/overrides/Typography"; + +export default function CreateUpdate() { + const navigate = useNavigate(); + const { corporate_id, id } = useParams(); + const [corporate, setCorporate] = useState(); + const configuredCorporateContext = useContext(ConfiguredCorporateContext) + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [ConfiguredCorporateContext]) + + const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState(); + const [ currentMasterForm, setCurrentMasterForm ] = useState(); + const isEdit = !!id; + + useEffect(() => { + if (isEdit) { + axios.get(`/master/formularium-template/${id}/edit`) + .then((res) => { + // setCurrentCorporatePlan(res.data); + setCurrentMasterForm(res.data); + }) + .catch((err) => { + if (err.response.status === 404) { + navigate('/404'); + } + }) + } + }, [corporate_id, id]) + + const pageType = !isEdit ? "Create" : "Edit" + const pageTitle = `Master Formularium ${pageType}` + return ( + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdateForm.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdateForm.tsx new file mode 100644 index 00000000..b93d3bfd --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/CreateUpdateForm.tsx @@ -0,0 +1,143 @@ +import * as Yup from 'yup'; +import { LoadingButton } from "@mui/lab"; +import { Button, Card, Grid, Stack, Typography } from "@mui/material"; +import { CorporatePlan } from "../../../@types/corporates"; +import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form"; +import { useEffect, useMemo } from 'react'; +import { useForm } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { useSnackbar } from 'notistack'; +import { useNavigate, useParams } from 'react-router-dom'; +import axios from '../../../utils/axios'; +import { MasterFormularium } from "./Type"; + + +type Props = { + isEdit: boolean; + currentMasterForm?: MasterFormularium; +}; + +export default function CreateUpdateForm({ isEdit, currentMasterForm }: Props) { + const navigate = useNavigate(); + const { enqueueSnackbar } = useSnackbar(); + + const NewCorporatePlanSchema = Yup.object().shape({ + name: Yup.string().required('Name is required'), + }); + + const defaultValues = useMemo( + () => ({ + name: currentMasterForm?.name || '', + description: currentMasterForm?.description || '', + }), + [currentMasterForm] + ) + + useEffect(() => { + if (isEdit && currentMasterForm) { + reset(defaultValues); + } + if (!isEdit) { + reset(defaultValues); + } + }, [isEdit, currentMasterForm]) + + const methods = useForm({ + resolver: yupResolver(NewCorporatePlanSchema), + defaultValues, + }) + + const { + reset, + setError, + handleSubmit, + formState: { isSubmitting } + } = methods; + + const onSubmit = async (data: any) => { + if (!isEdit) { + await axios + .post('/master/formularium-template/store', data) + .then((res) => { + enqueueSnackbar('Formularium created succesfully', {variant: 'success'}); + }) + .then((res) => { + navigate('/master/formularium-template-v2', { replace: true }); + }) + .catch(({ response }) => { + if (response.status === 422) { + for (const [key, value] of Object.entries(response.data.errors)) { + setError(key, { message: value[0] }); + enqueueSnackbar(value[0] ?? 'Failed Processing Reques', { variant: 'error' }); + } + } + else { + enqueueSnackbar('Create Failed : ' + response.data.message, {variant: 'error'}); + } + }); + } else { + await axios + .put(`/master/formularium-template/${currentMasterForm?.id}/update`, data) + .then((res) => { + enqueueSnackbar('Formularium updated successfully', { variant: 'success' }); + }) + .then((res) => { + navigate('/master/formularium-template-v2', { replace: true }); + }) + .catch(({ response }) => { + enqueueSnackbar(`Update Failed : ${response.data.message}`, { variant: 'error' }) + }) + } + } + + return ( + + + + + + Detail + Name* + + Description* + + + + + + + + { isEdit? 'Update' : 'Create' } + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx new file mode 100644 index 00000000..d340f412 --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx @@ -0,0 +1,289 @@ +// @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'; +import { enqueueSnackbar } from 'notistack'; + + +export default function List() { + const navigate = useNavigate(); + const { master_formularium_id } = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + const [importResult, setImportResult] = useState(null); + + function SearchInput(props: any) { + const searchInput = useRef(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); + } + + useEffect(() => { + setSearchText(searchParams.get('search') ?? ''); + }, [searchParams]) + + return ( +
+ + + ); + } + + function ImportForm( props: any ) { + const [anchorEl, setAnchorEl] = React.useState(null); + const createMenu = Boolean(anchorEl); + const importForm = useRef(null) + const [currentImportFileName, setCurrentImportFileName] = useState(null) + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleImportButton = () => { + if (importForm?.current) { + handleClose(); + importForm.current ? importForm.current.click() : console.log('No File selected'); + } else { + alert('No file selected') + } + } + + const handleCancelImportButton = () => { + importForm.current.value = ''; + importForm.current?.dispatchEvent(new Event('change', { bubbles: true })) + } + + const handleGetTemplate = (type: string) => { + axios.get('corporate/import-document-example/' + type) + .then((response) => { + const link = document.createElement('a'); + link.href = response.data.data.file_url; + link.setAttribute('download', response.data.data.file_name); + document.body.appendChild(link); + link.click(); + handleClose(); + }) + } + + const handleImportChange = (event: any) => { + if (event.target.files[0]) { + setCurrentImportFileName(event.target.files[0].name) + } else { + setCurrentImportFileName(null); + } + } + + const handleFormulariumList = async (appliedFilter = null) => { + axios.get(`master/formulariums/${master_formularium_id}/list`) + .then((response) => { + const link = document.createElement('a'); + link.href = response.data.data.file_url; + link.setAttribute('download', response.data.data.file_name); + document.body.appendChild(link); + link.click(); + handleClose(); + enqueueSnackbar('Download Success', { variant: 'success' }) + }) + .catch(response => { + enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' }) + }); + } + + const handleUpload = () => { + if (importForm.current?.files?.length) { + const formData = new FormData(); + formData.append('file', importForm.current?.files[0]) + axios.post(`master/formularium/${master_formularium_id}/import`, formData ) + .then(response => { + handleCancelImportButton(); + loadDataTableData(); + setImportResult(response.data); + }) + .catch(response => { + enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' }) + }) + } else { + enqueueSnackbar(`No File Selected`, { variant: 'warning' }) + } + } + + return ( +
+ + {(!currentImportFileName && + + + + handleImportButton}>Import + handleGetTemplate('master-formularium')}>Download Template + handleFormulariumList()}>Download Formularium + + + )} + {( currentImportFileName && + + + + + + + )} + {( importResult && + + Last Import Result Report : {importResult.result_file?.name ?? "-"} + + )} +
+ ); + } + + // Default data + const [dataTableRow, setDataTableRow] = useState<[] | null>(null) + const [dataTableIsLoading, setDataTableLoading] = useState(true); + const [dataTableData, setDataTableData] = useState({ + 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 + }); + + const loadDataTableData = async (appliedFilter : any | null = null) => { + setDataTableLoading(true); + const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]); + const response = await axios.get(`/master/formulariums/${master_formularium_id}`, { params: filter }); + setDataTableLoading(false); + + setDataTableData(response.data) + setDataTableRow(response.data.data) + } + + const applyFilter = async (searchFilter: string) => { + await loadDataTableData({ 'search': searchFilter }); + setSearchParams({ 'search' : searchFilter }); + } + + const handlePageChange = (event : ChangeEvent, value: number) => { + const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]); + loadDataTableData(filter); + setSearchParams(filter); + } + + useEffect(() => { + loadDataTableData(); + }, []) + + const headStyle = { + fontWeight: 'bold', + }; + + return ( + + + + + + + + + Code + ATC Code + Name + Category Name + UOM + + + +
+ + + + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Index.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Index.tsx new file mode 100644 index 00000000..17345616 --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Index.tsx @@ -0,0 +1,37 @@ +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 List from "./Formularium"; + + +export default function Formularium() { + const pageTitle = "Formularium" + const { id } = useParams(); + + return ( + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx new file mode 100644 index 00000000..24225cfd --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx @@ -0,0 +1,48 @@ +import TableMoreMenu from "@/components/table/TableMoreMenu" +import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; +import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined'; +import HistoryIcon from '@mui/icons-material/History'; +import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined'; +import { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material" +import React, { useEffect } from "react"; +import axios from "@/utils/axios"; +import { useNavigate, useParams } from "react-router-dom"; +import { MasterFormularium } from "./Type"; + +type Props = { + props: MasterFormularium +} + +export default function FormulariumRow({props} : Props) { + const navigate = useNavigate(); + + return ( + + + {props.name} + {props.description} + + + navigate(`/master/formularium-template-v2/${props.id}/detail`)}> + + Detail + + navigate(`/master/formularium-template-v2/${props.id}/edit`)}> + + Edit + + + + Update Status + + navigate(`/master/formularium-template-v2/${props.id}/history`)}> + + History + + + } /> + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/History.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/History.tsx new file mode 100644 index 00000000..ca991be6 --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/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) => ( + +))(({ theme }) => ({ + border: `1px solid ${theme.palette.divider}`, + "&:not(:last-child)": { + borderBottom: 0, + }, + "&:before": { + display: 'none' + }, +})); + +const AccordionSummary = styled((props: AccordionSummaryProps) => ( + } + {...props} + /> +))(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' + ? 'rgba(255,255,255,0.5)' + : 'rgba(0,0,0,.03)', + flexDirection: 'row-reverse', + "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": { + transform: 'rotate(90dg)', + }, + "& .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 MasterFormulariumHistory() { + const [expanded, setExpanded] = React.useState('panel1'); + + const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => { + setExpanded(newExpanded ? panel : false); + }; + const pageTitle = 'Master Formularium History' + const { id } = useParams(); + const { corporate_id } = useParams(); + const [corporate, setCorporate] = useState(); + const [currentCorporate, setCurrentCorporate] = useState(); + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + const model = 'App\\Models\\FormulariumTemplate'; + const url = `/audittrail/${id}?model=${model}`; + axios.get(url) + .then((res) => { + setCurrentCorporate(res.data); + }) + .catch((error) => { + console.error('Terjadi kesalahan: ', error); + }); + }, [configuredCorporateContext]) + + return ( +
+ + {currentCorporate?.data.map((item, index) => ( + + + {`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`} + + + + + + + Field + Old Value + New Values + + + + {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 '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 ( + + {`${field}`} + {`${value}`} + {renderedValue} + + ); + } + })} + +
+ + + + ))} +
+ ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/Index.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/Index.tsx new file mode 100644 index 00000000..370d2f9e --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Index.tsx @@ -0,0 +1,33 @@ +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 List from "./List"; + +export default function MasterFormularium() { + const pageTitle = "Master Formularium" + + return ( + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/List.tsx b/frontend/dashboard/src/pages/Master/FormulariumV2/List.tsx new file mode 100644 index 00000000..dda9ab94 --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/List.tsx @@ -0,0 +1,172 @@ +// @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 AddIcon from '@mui/icons-material/Add'; +// 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 BasePagination from '../../../components/BasePagination'; +import FormulariumRow from "./FormulariumRow"; +import { MasterFormularium } from "./Type"; + +export default function List() { + const navigate = useNavigate(); + const [searchParams, setSearchParams] = useSearchParams(); + + // Default data + const [dataTableRow, setDataTableRow] = useState(null) + const [dataTableIsLoading, setDataTableLoading] = useState(true); + const [dataTableData, setDataTableData] = useState({ + 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 + }); + + const loadDataTableData =async (appliedFilter: any | null = null) => { + setDataTableLoading(true); + const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]); + const response = await axios.get('/master/formularium-template', { params: filter }); + console.log(response.data); + console.log(response.data.data) + setDataTableLoading(false); + + setDataTableData(response.data); + setDataTableRow(response.data.data); + } + + const applyFilter = async (searchFilter: string) => { + await loadDataTableData({'search' : searchFilter }); + setSearchParams({ 'search' : searchFilter }) + } + + const handlePageChange = (event : ChangeEvent, value: number) => { + const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]); + loadDataTableData(filter); + setSearchParams(filter); + } + + useEffect(() => { + loadDataTableData(); + }, []) + + function SearchInput(props: any) { + const searchInput = useRef(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); + } + + useEffect(() => { + setSearchText(searchParams.get('search') ?? ''); + }, [searchParams]) + + return ( +
+ + + ) + } + + function SearchCreate(props: any) { + return ( +
+ + + + +
+ ) + } + + const headStyle = { + fontWeight: 'bold' + } + + return ( + + + + + + + + + + Name + Description + + + + {dataTableIsLoading ? ( + + + + Loading + + + + ) : dataTableData.data.length == 0 ? ( + + + + No Data + + + + ) : ( + + {dataTableRow?.map(item => ( + + ))} + + )} +
+ + + + + + ) +} \ No newline at end of file diff --git a/frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts b/frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts new file mode 100644 index 00000000..0421b24c --- /dev/null +++ b/frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts @@ -0,0 +1,31 @@ +export type MasterFormularium = { + id: number + name: string + description: string +} + + +export type FormulariumData = { + 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 + } \ No newline at end of file diff --git a/frontend/dashboard/src/routes/index.tsx b/frontend/dashboard/src/routes/index.tsx index 75a4c793..5755645a 100644 --- a/frontend/dashboard/src/routes/index.tsx +++ b/frontend/dashboard/src/routes/index.tsx @@ -323,6 +323,26 @@ export default function Router() { path: 'master/formularium-template/:id/edit', element: , }, + { + path: 'master/formularium-template-v2', + element: + }, + { + path: 'master/formularium-template-v2/create', + element: + }, + { + path: 'master/formularium-template-v2/:id/edit', + element: + }, + { + path: 'master/formularium-template-v2/:id/history', + element: + }, + { + path: 'master/formularium-template-v2/:id/detail', + element: + }, { path: 'report/appointments', @@ -536,6 +556,11 @@ const MasterFormulariumTemplate = Loadable(lazy(() => import('../pages/Master/Fo const MasterFormulariumTemplateCreate = Loadable(lazy(() => import('../pages/Master/Formularium/Master/CreateUpdate'))); const MasterFormulariumTemplateHistories = Loadable(lazy(() => import('../pages/Master/Formularium/Master/History'))); +const MasterFormulariumTemplateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Index'))); +const MasterFormulariumTemplateCreateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/CreateUpdate'))); +const MasterFormulariumTemplateHistoriesV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/History'))); +const MasterFormulariumTemplateDetailV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Detail/Index'))) + const CorporateServices = Loadable(lazy(() => import('../pages/Corporates/Services/Index'))); const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/Services/Create'))); const CorporateServicesHistory = Loadable(lazy(() => import('../pages/Corporates/Services/sections/History')));