Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging
This commit is contained in:
@@ -6,6 +6,8 @@ use App\Models\Drug;
|
||||
use Illuminate\Contracts\Support\Renderable;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Routing\Controller;
|
||||
use App\Helpers\Helper;
|
||||
use Maatwebsite\Excel\Facades\Excel;
|
||||
|
||||
class DrugController extends Controller
|
||||
{
|
||||
@@ -15,8 +17,11 @@ class DrugController extends Controller
|
||||
*/
|
||||
public function index(Request $request)
|
||||
{
|
||||
$drugs = Drug::withTrashed()->filter($request->toArray())->paginate();
|
||||
|
||||
$drugs = Drug::query()
|
||||
->filter($request->all())
|
||||
->orderBy('id', 'DESC')
|
||||
->paginate(0)
|
||||
->appends($request->all());
|
||||
return $drugs;
|
||||
}
|
||||
|
||||
@@ -79,4 +84,110 @@ class DrugController extends Controller
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
public function activation(Request $request, $drug_id)
|
||||
{
|
||||
$request->validate([
|
||||
'active' => 'required',
|
||||
'reason' => 'required',
|
||||
]);
|
||||
|
||||
$drug = Drug::findOrFail($drug_id);
|
||||
$drug->active = $request->active;
|
||||
$drug->reason = $request->reason;
|
||||
|
||||
if ($drug->save()) {
|
||||
return response()->json([
|
||||
'hostpital' => $drug,
|
||||
'message' => 'Status Updated Successfully'
|
||||
]);
|
||||
}
|
||||
}
|
||||
public function downloadTemplate()
|
||||
{
|
||||
return Helper::responseJson([
|
||||
'file_name' => "Template - Drugs.xlsx",
|
||||
"file_url" => url('files/Template - Drugs.xlsx')
|
||||
]);
|
||||
}
|
||||
public function import(Request $request)
|
||||
{
|
||||
if ($request->hasFile('file')) {
|
||||
$file = $request->file('file');
|
||||
$data = Excel::toArray([], $file);
|
||||
|
||||
$processedData = $this->processCategoryNames($data);
|
||||
|
||||
$importedRows = 0;
|
||||
$failedRows = [];
|
||||
|
||||
foreach ($processedData as $row) {
|
||||
try {
|
||||
Drug::create(
|
||||
[
|
||||
'name' => $row['name'],
|
||||
'code' => $row['code'],
|
||||
'generic_name' => $row['generic_name'],
|
||||
'description' => $row['description'],
|
||||
'mims_class' => $row['mims_class'],
|
||||
'indications' => $row['indications'],
|
||||
'atc_code' => $row['atc_code'],
|
||||
'segmentation' => $row['segmentation'],
|
||||
'type' => $row['type'],
|
||||
'dosage' => $row['dosage'],
|
||||
'remark' => $row['remark'],
|
||||
]
|
||||
);
|
||||
$importedRows++;
|
||||
} catch (\Exception $e) {
|
||||
$failedRows[] = $row;
|
||||
}
|
||||
}
|
||||
|
||||
$response = [
|
||||
'message' => 'File uploaded and data saved to database!',
|
||||
'data' => [
|
||||
'total_success_row' => $importedRows,
|
||||
'total_failed_row' => count($failedRows),
|
||||
'failed_rows' => $failedRows,
|
||||
],
|
||||
];
|
||||
|
||||
return response()->json($response);
|
||||
}
|
||||
|
||||
return response()->json(['error' => 'No file uploaded.']);
|
||||
}
|
||||
|
||||
private function processCategoryNames($data)
|
||||
{
|
||||
$header = [];
|
||||
$row = [];
|
||||
for ($i = 1; $i < count($data[0]); $i++) {
|
||||
$row[] = $data[0][$i];
|
||||
$header[] = $data[0][0];
|
||||
}
|
||||
|
||||
$filed = [];
|
||||
foreach ($header[0] as $value)
|
||||
{
|
||||
$modelColumn = strtolower(preg_replace('/\s+/', '_', trim($value)));
|
||||
$modelColumn = str_replace(['*', ' '], '', $modelColumn);
|
||||
if($modelColumn)
|
||||
{
|
||||
$filed[] = $modelColumn;
|
||||
}
|
||||
}
|
||||
|
||||
$result = [];
|
||||
foreach ($row as $subarray) {
|
||||
$trimmedSubarray = [];
|
||||
for ($i = 0; $i < count($filed); $i++) {
|
||||
$trimmedSubarray[$filed[$i]] = $subarray[$i] ? $subarray[$i] : null;
|
||||
}
|
||||
|
||||
$result[] = $trimmedSubarray;
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,6 +173,9 @@ Route::prefix('internal')->group(function () {
|
||||
Route::put('master/diagnosis/{diagnosis_template_id}/activation', [DiagnosisController::class, 'activation']);
|
||||
|
||||
Route::get('master/drugs', [DrugController::class, 'index']);
|
||||
Route::put('master/drugs/{drug_id}/activation', [DrugController::class, 'activation']);
|
||||
Route::get('master/drugs/download-template', [DrugController::class, 'downloadTemplate']);
|
||||
Route::post('master/drugs/import', [DrugController::class, 'import']);
|
||||
|
||||
|
||||
Route::get('members', [MemberController::class, 'index']);
|
||||
|
||||
@@ -25,7 +25,8 @@ class Drug extends Model
|
||||
'dosage',
|
||||
'remark',
|
||||
'selling_unit_id',
|
||||
'status'
|
||||
'status',
|
||||
'active',
|
||||
];
|
||||
|
||||
public function categories()
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('drugs', function (Blueprint $table) {
|
||||
$table->text('reason')->nullable()->after('status');
|
||||
$table->tinyInteger('active')->default(1)->after('reason');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
Schema::table('drugs', function (Blueprint $table) {
|
||||
$table->dropColumn('reason');
|
||||
$table->dropColumn('active');
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -4,4 +4,4 @@ PORT=8000
|
||||
|
||||
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"
|
||||
|
||||
@@ -30,6 +30,7 @@ export type Hospital = {
|
||||
corporate_id: number;
|
||||
code: string;
|
||||
name?: string;
|
||||
active: number;
|
||||
}
|
||||
|
||||
export type Employee = {
|
||||
@@ -215,4 +216,4 @@ export type MasterExclusion = {
|
||||
|
||||
export type CorporateId = {
|
||||
corporate_id?: number
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export type Drug = {
|
||||
id: number;
|
||||
type: string;
|
||||
code: string;
|
||||
name: string;
|
||||
version:string;
|
||||
active: number;
|
||||
}
|
||||
@@ -42,6 +42,7 @@ const navConfig = [
|
||||
{
|
||||
title: 'PHARMACY & DELIVERY MANAGEMENT',
|
||||
children: [
|
||||
{ title: 'Drug', path: '/master/drugs'},
|
||||
{ title: 'Inventory', path: '/inventory' },
|
||||
{ title: 'Delivery Services', path: '/delivery' },
|
||||
],
|
||||
@@ -53,7 +54,6 @@ const navConfig = [
|
||||
{ title: 'Corporate', path: '/corporates' },
|
||||
// { title: 'Corporate Create', path: '/corporates/create' },
|
||||
{ title: 'Formularium', path: '/master/formularium-template' },
|
||||
{ title: 'Obat', path: '/master/drugs' },
|
||||
{ title: 'Master ICD-10 Diagnosis', path: '/master/diagnosis-template' },
|
||||
{ title: 'Hospitals', path: '/hospitals' },
|
||||
],
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function CorporateTabNavigations({ position }: Props) {
|
||||
label: 'Hospital',
|
||||
},
|
||||
{
|
||||
path: 'formularium',
|
||||
path: 'formulariums',
|
||||
label: 'Formularium',
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
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';
|
||||
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';
|
||||
@@ -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',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
// @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 { 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';
|
||||
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 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(props: DetailCorpFormularium) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [isDialogOpen, setDialogOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import TableMoreMenu from "@/components/table/TableMoreMenu"
|
||||
import { FindInPageOutlined } from "@mui/icons-material"
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
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";
|
||||
|
||||
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="center" width={100}>
|
||||
<TableMoreMenu actions = {
|
||||
<>
|
||||
<MenuItem onClick={async () => { loadDataTableData(props.id); setOpen(!open)}}>
|
||||
<FindInPageOutlined />
|
||||
Detail
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate(`/corporates/${corporate_id}/formulariums/${props.id}/history`)}>
|
||||
<HistoryIcon />
|
||||
History
|
||||
</MenuItem>
|
||||
</>
|
||||
} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
export default CategoryRow
|
||||
@@ -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 + '/formulariums',
|
||||
},
|
||||
{
|
||||
name: 'Create Formularium',
|
||||
href: '/corporates/' + corporate_id + '/formulariums/create',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<CorporateFormulariumCreateForm />
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
103
frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx
Normal file
103
frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
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,
|
||||
} = methods;
|
||||
|
||||
// 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">Formularium Name*</Typography>
|
||||
<RHFSelect name="category" label="Category" placeholder="Category" fullWidth={true}>
|
||||
{/* {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>
|
||||
</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"
|
||||
onClick={() => navigate(`/corporates/${corporate_id}/formulariums/`)}
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
179
frontend/dashboard/src/pages/Corporates/Formularium/New/List.tsx
Normal file
179
frontend/dashboard/src/pages/Corporates/Formularium/New/List.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
// @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 axiosInstance from '../../../../utils/axios';
|
||||
import axios from '../../../../utils/axios';
|
||||
import { LaravelPaginatedData } from '../../../../@types/paginated-data';
|
||||
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 [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
|
||||
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 />}
|
||||
onClick={() => navigate(`/corporates/${corporate_id}/formulariums/create`)}
|
||||
sx={{
|
||||
p: 1.8,
|
||||
backgroundColor: '#19BBBB', color: '#FFF',
|
||||
"&:hover":{
|
||||
backgroundColor: '#19BBBB', color: '#FFF',
|
||||
},
|
||||
width: '200px'
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</Stack>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
return(
|
||||
<React.Fragment>
|
||||
<Stack>
|
||||
<SearchCreate />
|
||||
<Card>
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table aria-label="collapsible table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align='left' width={50}/>
|
||||
<TableCell style={headStyle} align="left">Formularium Name</TableCell>
|
||||
<TableCell style={headStyle} align="left">Description</TableCell>
|
||||
<TableCell style={headStyle} align="center" width={100}></TableCell>
|
||||
</TableRow>
|
||||
</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} />
|
||||
</Card>
|
||||
</Stack>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -27,7 +27,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { CorporatePlan } from '../../../@types/corporates';
|
||||
import { Hospital } from '../../../@types/corporates';
|
||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||
import BasePagination from '../../../components/BasePagination';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
@@ -40,7 +40,7 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import Label from '../../../components/Label';
|
||||
|
||||
export default function PlanList() {
|
||||
export default function HospitalList() {
|
||||
const { corporate_id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
@@ -80,9 +80,9 @@ export default function PlanList() {
|
||||
}
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData(plan: CorporatePlan): CorporatePlan {
|
||||
function createData(hospital: Hospital): Hospital {
|
||||
return {
|
||||
...plan,
|
||||
...hospital,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -61,6 +61,7 @@ import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
|
||||
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Label from '../../../components/Label';
|
||||
|
||||
export default function CorporatePlanList({handleSubmitSuccess}) {
|
||||
const navigate = useNavigate();
|
||||
@@ -424,12 +425,14 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
|
||||
}
|
||||
|
||||
const [columns, setColumns] = React.useState([
|
||||
{ id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '10%' },
|
||||
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '20%' },
|
||||
{ id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '15%' },
|
||||
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '15%' },
|
||||
{ id: 'name', label: 'Name', minWidth: 100, align: 'left', width: '20%' },
|
||||
{ id: 'plan_id', label: 'Plan ID', minWidth: 100, align: 'left', width: '10%' },
|
||||
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '20%' },
|
||||
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '20%' },
|
||||
{ id: 'plan_id', label: 'Plan', minWidth: 100, align: 'left', width: '10%' },
|
||||
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '15%' },
|
||||
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '15%' },
|
||||
{id: 'status', label: 'Status', minWidth: 100, align: 'left', width: '5%' },
|
||||
{id: 'action', label: '', minWidth: 100, align: 'left', width: '5%' },
|
||||
]);
|
||||
|
||||
// Generate the every row of the table
|
||||
@@ -489,6 +492,19 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
|
||||
<TableCell align="left">
|
||||
<Typography variant='body2'>{row.terminated_date ? row.terminated_date : '-'}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Typography variant='body2'>
|
||||
{row.active === 1 ? (
|
||||
<Label color='success' >
|
||||
Active
|
||||
</Label>
|
||||
) : (
|
||||
<Label color='error'>
|
||||
Inactive
|
||||
</Label>
|
||||
)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
import { Card, Grid } from "@mui/material";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Card } from "@mui/material";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import Page from "../../../components/Page";
|
||||
import useSettings from "../../../hooks/useSettings";
|
||||
import List from "./List";
|
||||
|
||||
|
||||
|
||||
export default function Drugs() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { corporate_id } = useParams();
|
||||
|
||||
const pageTitle = 'Drug';
|
||||
return (
|
||||
@@ -20,8 +15,8 @@ export default function Drugs() {
|
||||
heading={ pageTitle }
|
||||
links={[
|
||||
{
|
||||
name: 'Master',
|
||||
href: '/master',
|
||||
name: 'Pharmacy & Delivery Management',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
name: 'Drug',
|
||||
|
||||
@@ -1,310 +1,579 @@
|
||||
// @mui
|
||||
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, 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 { 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 {
|
||||
Button,
|
||||
Card,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Stack,
|
||||
Collapse,
|
||||
Box,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
FormHelperText,
|
||||
Menu,
|
||||
ButtonGroup,
|
||||
} from '@mui/material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
// hooks
|
||||
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { Drug } from '../../../@types/pharmacy-and-delivery-managements';
|
||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||
import BasePagination from '../../../components/BasePagination';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
|
||||
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import Label from '../../../components/Label';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
|
||||
export default function List() {
|
||||
const { themeStretch } = useSettings();
|
||||
export default function DrugList() {
|
||||
const { corporate_id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? ''
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
const handleSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
props.onSearch(searchText); // Trigger to Parent
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { // Trigger First Search
|
||||
useEffect(() => {
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, [searchParams])
|
||||
}, [searchParams]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
||||
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
|
||||
return (
|
||||
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
label="Search Code or Name..."
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
value={searchText}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportForm(props: any) {
|
||||
// IMPORT
|
||||
// Create Button Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const createMenu = Boolean(anchorEl);
|
||||
const importForm = useRef<HTMLInputElement>(null)
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState(null)
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
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 handleImportChange = (event: any) => {
|
||||
if (event.target.files[0]) {
|
||||
setCurrentImportFileName(event.target.files[0].name)
|
||||
} else {
|
||||
setCurrentImportFileName(null);
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
if (importForm.current?.files.length) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", importForm.current?.files[0])
|
||||
axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
|
||||
.then(response => {
|
||||
handleCancelImportButton();
|
||||
loadDataTableData();
|
||||
setImportResult(response.data)
|
||||
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
|
||||
})
|
||||
.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 (
|
||||
<div>
|
||||
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
|
||||
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter}/>
|
||||
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
|
||||
<Button
|
||||
id="import-button"
|
||||
variant='outlined'
|
||||
startIcon={<AddIcon />} sx={{ p: 1.8 }}
|
||||
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={createMenu ? 'true' : undefined}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleImportButton}>Import</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Download Template</MenuItem>
|
||||
</Menu>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
|
||||
<Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Button
|
||||
id="upload-button"
|
||||
variant='outlined'
|
||||
startIcon={<UploadIcon />} sx={{ p: 1.8 }}
|
||||
onClick={handleUpload}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
{( importResult &&
|
||||
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||
<Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData( icd: Icd ): Icd {
|
||||
return {
|
||||
...icd,
|
||||
}
|
||||
function createData(drug: Drug): Drug {
|
||||
return {
|
||||
...drug,
|
||||
};
|
||||
}
|
||||
function ImportForm(props: any) {
|
||||
// IMPORT
|
||||
// Create Button Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const createMenu = Boolean(anchorEl);
|
||||
const importPlan = useRef<HTMLInputElement>(null);
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState(null);
|
||||
const [importLoading, setImportLoading] = useState(false);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleImportButton = () => {
|
||||
if (importPlan?.current) {
|
||||
handleClose();
|
||||
importPlan.current ? importPlan.current.click() : console.log('No File selected');
|
||||
} else {
|
||||
alert('No file selected');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelImportButton = () => {
|
||||
if(importPlan.current)
|
||||
{
|
||||
importPlan.current.value = '';
|
||||
importPlan.current.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportChange = (event: any) => {
|
||||
if (event.target.files[0]) {
|
||||
setCurrentImportFileName(event.target.files[0].name);
|
||||
} else {
|
||||
setCurrentImportFileName(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
if(importPlan.current && importPlan.current.files)
|
||||
{
|
||||
if (importPlan.current?.files.length) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', importPlan.current?.files[0]);
|
||||
setImportLoading(true);
|
||||
axios
|
||||
.post(`master/drugs/import`, formData)
|
||||
.then((response) => {
|
||||
handleCancelImportButton();
|
||||
loadDataTableData();
|
||||
setImportResult(response.data);
|
||||
console.log(response.data);
|
||||
setImportLoading(false);
|
||||
})
|
||||
.catch((response) => {
|
||||
enqueueSnackbar(
|
||||
'Looks like something went wrong. Please check your data and try again. ' +
|
||||
response.message,
|
||||
{ variant: 'error' }
|
||||
);
|
||||
setImportLoading(false);
|
||||
});
|
||||
} else {
|
||||
enqueueSnackbar('No File Selected', { variant: 'warning' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleGetTemplate = () => {
|
||||
axios.get('master/drugs/download-template').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();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
ref={importPlan}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleImportChange}
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
|
||||
/>
|
||||
{!currentImportFileName && (
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter} />
|
||||
<Button
|
||||
id="import-button"
|
||||
startIcon={<DownloadIcon />}
|
||||
sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
|
||||
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={createMenu ? 'true' : undefined}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleImportButton}>
|
||||
<Typography variant='body2'>Import</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleGetTemplate();
|
||||
}}
|
||||
>
|
||||
<Typography variant='body2'> Download Template</Typography>
|
||||
</MenuItem>
|
||||
{/* <MenuItem onClick={handleICDList}>
|
||||
<Typography variant='body2'>Download ICD</Typography>
|
||||
</MenuItem> */}
|
||||
</Menu>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{currentImportFileName && (
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>
|
||||
{currentImportFileName ?? 'No File Selected'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancelImportButton}
|
||||
size="small"
|
||||
fullWidth={false}
|
||||
sx={{ p: 1.8 }}
|
||||
>
|
||||
<CancelIcon color="error" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<LoadingButton
|
||||
id="upload-button"
|
||||
variant="outlined"
|
||||
startIcon={<UploadIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={handleUpload}
|
||||
loading={importLoading}
|
||||
>
|
||||
Upload
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
)}
|
||||
{importResult && (
|
||||
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||
<Box sx={{ color: 'text.secondary' }}>
|
||||
Last Import Result :{' '}
|
||||
<Box sx={{ color: 'success.main', display: 'inline' }}>
|
||||
{importResult.data.total_success_row ?? 0}
|
||||
</Box>{' '}
|
||||
Row Processed,{' '}
|
||||
<Box sx={{ color: 'error.main', display: 'inline' }}>
|
||||
{importResult.data.total_failed_row}
|
||||
</Box>{' '}
|
||||
Failed
|
||||
{importResult.data.failed_rows.map((row, index) => (
|
||||
<Typography variant='body' key={index} color="error"> [Code=>{row.code ? row.code : 'Required'},Name=>{row.name ? row.name : 'Required'}]</Typography>
|
||||
))}
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Generate the every row of the table
|
||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||
const { row } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const { row } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const style1 = {
|
||||
color: '#637381'
|
||||
}
|
||||
|
||||
return (
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
<TableRow sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
|
||||
<TableCell align="left">{row.type ? row.type : '-'}</TableCell>
|
||||
<TableCell align="left">{row.code ? row.code : '-'}</TableCell>
|
||||
<TableCell align="left">{row.name ? row.name : '-'}</TableCell>
|
||||
<TableCell align="left">{row.version ? row.version : '-'}</TableCell>
|
||||
<TableCell align="left">
|
||||
{row.active === 1 ? (
|
||||
<Label color='success' >
|
||||
Active
|
||||
</Label>
|
||||
) : (
|
||||
<Label color='error'>
|
||||
Inactive
|
||||
</Label>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => setOpen(!open)}>
|
||||
<FindInPageOutlinedIcon />
|
||||
Details
|
||||
</MenuItem>
|
||||
{/* <MenuItem onClick={() => handleEditData(row)}>
|
||||
<EditOutlinedIcon />
|
||||
Edit
|
||||
</MenuItem> */}
|
||||
<MenuItem onClick={() => handleEditDataStatus(row)}>
|
||||
<CachedOutlinedIcon />
|
||||
Update Status
|
||||
</MenuItem>
|
||||
{/* <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/hospitals/'+row.id+'/history')}>
|
||||
<HistoryIcon />
|
||||
History
|
||||
</MenuItem> */}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.type}</TableCell>
|
||||
<TableCell align="left">{row.code}</TableCell>
|
||||
<TableCell align="left">{row.name}</TableCell>
|
||||
<TableCell align="left">{row.version}</TableCell>
|
||||
|
||||
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
|
||||
<TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box sx={{ borderBottom: 1 }}>
|
||||
<Typography variant="body2" gutterBottom component="div">
|
||||
Description : {row.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
|
||||
<TableCell colSpan={6}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Card sx={{padding:2}}>
|
||||
<Box sx={{ pb: 2 }}>
|
||||
<Typography variant='subtitle1'>Detail</Typography>
|
||||
<Stack marginTop={2}>
|
||||
<Stack direction='row' spacing={1}>
|
||||
<Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Code:</Typography>
|
||||
<Typography variant='body2' sx={{width: '70%'}}>{row.code ? row.code : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={1}>
|
||||
<Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Name:</Typography>
|
||||
<Typography variant='body2' sx={{width: '70%'}}>{row.name ? row.name : '-'}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
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
|
||||
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,
|
||||
});
|
||||
const [dataTablePage, setDataTablePage] = useState(5);
|
||||
|
||||
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/master/drugs', { params: filter });
|
||||
// console.log(response.data);
|
||||
setDataTableLoading(false);
|
||||
|
||||
setDataTableData(response.data);
|
||||
}
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
// Get Data Drugs
|
||||
const response = await axios.get('/master/drugs', { params: filter });
|
||||
setDataTableLoading(false);
|
||||
setDataTableData(response.data);
|
||||
};
|
||||
|
||||
const applyFilter = async (searchFilter: string) => {
|
||||
await loadDataTableData({ "search" : searchFilter });
|
||||
setSearchParams({ "search" : searchFilter });
|
||||
}
|
||||
const applyFilter = async (searchFilter: any) => {
|
||||
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);
|
||||
}
|
||||
const handlePageChange = (event: ChangeEvent, value: number) => {
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
|
||||
loadDataTableData(filter);
|
||||
setSearchParams(filter);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<ImportForm />
|
||||
loadDataTableData();
|
||||
}, []);
|
||||
|
||||
<Card>
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table aria-label="collapsible table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell style={headStyle} align="left" />
|
||||
<TableCell style={headStyle} align="left">Type</TableCell>
|
||||
<TableCell style={headStyle} align="left">Code</TableCell>
|
||||
<TableCell style={headStyle} align="left">Name</TableCell>
|
||||
<TableCell style={headStyle} align="left">Version</TableCell>
|
||||
<TableCell style={headStyle} align="right">Status</TableCell>
|
||||
<TableCell style={headStyle} align="right">Action</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
{dataTableIsLoading ?
|
||||
(
|
||||
<TableBody>
|
||||
//validation dialog
|
||||
const [nameField, setNameField] = useState('');
|
||||
const [codeField, setCodeField] = useState('');
|
||||
// ID for edit data
|
||||
const [idField, setIdField] = useState('');
|
||||
|
||||
const handleAddData = () => {
|
||||
navigate('/corporates/'+corporate_id+'/hospitals/create');
|
||||
}
|
||||
//Edit data
|
||||
const handleEditData = (data : any) => {
|
||||
navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);
|
||||
}
|
||||
// End dialog for hospitals
|
||||
|
||||
// Dialog for update status hospitals
|
||||
const [openDialogStatus, setOpenDialogStatus] = useState(false);
|
||||
const [activeField, setActiveField] = useState(0);
|
||||
const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
|
||||
|
||||
const handleCloseDialogUpdate = () => {
|
||||
setOpenDialogStatus(false);
|
||||
setNameField('');
|
||||
setCodeField('');
|
||||
setIdField('');
|
||||
setActiveField(activeField);
|
||||
}
|
||||
|
||||
const handleSaveUpdateData = () => {
|
||||
let activeValue = 0;
|
||||
if(activeField === 1)
|
||||
{
|
||||
activeValue = 0;
|
||||
}
|
||||
else
|
||||
{
|
||||
activeValue = 1;
|
||||
}
|
||||
const updateData = {
|
||||
reason: reasonUpdate,
|
||||
active : activeValue,
|
||||
id: idField,
|
||||
};
|
||||
axios
|
||||
.put('/master/drugs/'+idField+'/activation', updateData)
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Data updated successfully', { variant: 'success' });
|
||||
loadDataTableData();
|
||||
handleCloseDialogUpdate();
|
||||
})
|
||||
.catch((error) => {
|
||||
enqueueSnackbar('Failed to add data', { variant: 'error' });
|
||||
});
|
||||
}
|
||||
|
||||
const handleEditDataStatus = (data: any) => {
|
||||
setIdField(data.id);
|
||||
setNameField(data.name);
|
||||
setCodeField(data.code);
|
||||
setActiveField(data.active);
|
||||
setOpenDialogStatus(true);
|
||||
}
|
||||
// End dialog for update status devisions
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<ImportForm />
|
||||
<Card>
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table aria-label="collapsible table">
|
||||
{/* Table Head */}
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">Loading</TableCell>
|
||||
<TableCell sx={{width: '10%'}} align="left">
|
||||
<Typography variant='subtitle2'>Type</Typography>
|
||||
</TableCell>
|
||||
<TableCell sx={{width: '20%'}} align="left">
|
||||
<Typography variant='subtitle2'>Code</Typography>
|
||||
</TableCell>
|
||||
<TableCell sx={{width: '30%'}} align="left">
|
||||
<Typography variant='subtitle2'>Name</Typography>
|
||||
</TableCell>
|
||||
<TableCell sx={{width: '20%'}} align="left">
|
||||
<Typography variant='subtitle2'>Version</Typography>
|
||||
</TableCell>
|
||||
<TableCell sx={{width: '10%'}} align="left">
|
||||
<Typography variant='subtitle2'>Status</Typography>
|
||||
</TableCell>
|
||||
<TableCell sx={{width: '10%'}} align="left">
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
dataTableData.data.length == 0 ?
|
||||
(
|
||||
</TableHead>
|
||||
{/* Condition Table Body */}
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">No Data</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} align="center">
|
||||
Loading
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
) : dataTableData.data.length == 0 ? (
|
||||
<TableBody>
|
||||
{dataTableData.data.map(row => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
))}
|
||||
</TableBody>
|
||||
)
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
|
||||
</Card>
|
||||
</Stack>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
{/* Paginations */}
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
|
||||
</Card>
|
||||
{/* Dialog Update Status */}
|
||||
<Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">Update Status</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} padding={2}>
|
||||
<Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this drug ?</Typography>
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2}>
|
||||
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
|
||||
<Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
<Stack spacing={2} padding={2}>
|
||||
<Typography variant='subtitle1'>Reason for update*</Typography>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="reason" required>
|
||||
Reason for update
|
||||
</InputLabel>
|
||||
<Select
|
||||
id="reason"
|
||||
value={reasonUpdate}
|
||||
fullWidth
|
||||
label="Reason for update"
|
||||
onChange={(e) => {
|
||||
setReasonUpdate(e.target.value);
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem value="Agreement changed">Agreement changed</MenuItem>
|
||||
<MenuItem value="Endorsement">Endorsement</MenuItem>
|
||||
<MenuItem value="Renewal">Renewal</MenuItem>
|
||||
<MenuItem value="Worng Setting">Worng Setting</MenuItem>
|
||||
</Select>
|
||||
<FormHelperText style={{ color: 'red' }}></FormHelperText>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
|
||||
<Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -161,9 +161,17 @@ export default function Router() {
|
||||
element: <CorporateDivisionsCreate />,
|
||||
},
|
||||
{
|
||||
path: ':corporate_id/formularium',
|
||||
path: ':corporate_id/formulariums',
|
||||
element: <CorporateFormularium />,
|
||||
},
|
||||
{
|
||||
path: ':corporate_id/formulariums/create',
|
||||
element: <CorporateFormulariumCreate />
|
||||
},
|
||||
{
|
||||
path: ':corporate_id/formulariums/:id/history',
|
||||
element: <CorporateFormulariumHistory />
|
||||
},
|
||||
|
||||
{
|
||||
path: ':corporate_id/diagnosis-exclusions',
|
||||
@@ -492,6 +500,8 @@ 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')));
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
BIN
public/files/Template - Drugs.xlsx
Normal file
BIN
public/files/Template - Drugs.xlsx
Normal file
Binary file not shown.
Reference in New Issue
Block a user