tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update fitur alarm center

Browse Source
This commit is contained in:
Tb Fajri
2023-10-13 10:47:22 +07:00
parent a9e6a750ad
commit 54019e998d
17 changed files with 1563 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
Modules/Client/Http/Controllers/Api/CorporateMemberController.php
View File

@@ -4,11 +4,15 @@ namespace Modules\Client\Http\Controllers\Api;
use App\Helpers\Helper;
use App\Models\Member;
use App\Models\Claim;
use App\Models\ClaimRequest;
use App\Services\CorporateMemberService;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller;
use Modules\Client\Transformers\ClaimReport\MemberResources as ClaimReportMemberResources;
use Modules\Client\Transformers\AlarmCenter\DataListClaimMemberResource;
use Modules\Client\Transformers\AlarmCenter\DataServiceMonitoring;
use Modules\Client\Transformers\Dashboard\MemberResources as ClaimSubmitMemberResources;
use Modules\Client\Transformers\Dashboard\MemberResources as DashboardMemberResources;
use Modules\Client\Transformers\Dashboard\MemberAlarmCenterResources as DashboardMemberAlarmResources;
@@ -52,12 +56,13 @@ class CorporateMemberController extends Controller
public function show($corporate_id, $person_id)
{
$data = Member::with(['claims', 'person', 'employeds', 'currentPlan.benefits', 'person.currentAddress'])
->where('person_id', $person_id)
->whereHas('employeds', function ($query) use ($corporate_id) {
$query->where('corporate_id', $corporate_id);
})
->first();
->where('person_id', $person_id)
->whereHas('employeds', function ($query) use ($corporate_id) {
$query->where('corporate_id', $corporate_id);
})
->first();
$totalClaims = $data->claims->sum('total_claim');
$data->total_claims = $totalClaims;
@@ -95,5 +100,22 @@ class CorporateMemberController extends Controller
$data->claim_history = $data_claim_history;
return response()->json(DataMemberResource::make($data));
}
public function showPerMember($corporate_id, $member_id){
$data = ClaimRequest::where(['member_id' => $member_id])
->whereNotNull('claim_id')
->paginate(10);
return response()->json(Helper::paginateResources(DataListClaimMemberResource::collection($data)));
}
public function serviceMonitoring($corporate_id, $claim_id)
{
$data = Claim::where('id', $claim_id)->first();
return Helper::responseJson(DataServiceMonitoring::make($data));
}
}

2
Modules/Client/Routes/api.php
View File

@@ -48,6 +48,8 @@ Route::prefix('client')->group(function () {
Route::get('division', [CorporateDivisionController::class, 'index']);
Route::get('members', [CorporateMemberController::class, 'index']);
Route::get('members/{id}', [CorporateMemberController::class, 'show']);
Route::get('alarm-center-members/{id}', [CorporateMemberController::class, 'showPerMember']);
Route::get('service-monitoring/{id}', [CorporateMemberController::class, 'serviceMonitoring']);
Route::get('claims/status', [ClaimController::class, 'status']);
Route::get('claims', [ClaimController::class, 'index']);
Route::get('claims/{claim_id}/encounters', [ClaimEncounterController::class, 'getEncounterData']);

37
Modules/Client/Transformers/AlarmCenter/DataListClaimMemberResource.php Normal file
View File

@@ -0,0 +1,37 @@
<?php
namespace Modules\Client\Transformers\AlarmCenter;
use App\Models\Member;
use Illuminate\Http\Resources\Json\JsonResource;
use Illuminate\Support\Facades\Storage;
class DataListClaimMemberResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request
* @return array
*/
public function toArray($request)
{
$member = Member::findOrFail($this->member_id);
return [
'id' => $this->id,
'admission_date' => $this->submission_date,
'discharge_date' => $this->submission_date,
'code' => $this->code,
'service_type' => $this->service_code == 'IP' ? 'Inpatient' : 'Outpatient',
'status' => $this->service_code == 'approved' ? 'Done' : 'OnGoing',
'claim_id' => $this->claim_id,
// 'memberId' => $this->member_id,
'fullName' => $member->name,
// 'division' => $this->division_name ?? '',
// 'status' => $this->status,
// 'claimRequestId' => $this->claim_request_id,
// 'submissionDate' => $this->submission_date,
];
}
}

126
Modules/Client/Transformers/AlarmCenter/DataServiceMonitoring.php Normal file
View File

@@ -0,0 +1,126 @@
<?php
namespace Modules\Client\Transformers\AlarmCenter;
use App\Models\ClaimRequest;
use App\Models\ClaimEncounter;
use App\Models\Encounter;
use App\Models\Member;
use App\Models\Organization;
use App\Models\CorporateEmployee;
use Illuminate\Http\Resources\Json\JsonResource;
use Illuminate\Support\Facades\Storage;
class DataServiceMonitoring extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request
* @return array
*/
public function toArray($request)
{
$claim_request = ClaimRequest::findOrFail($this->claim_request_id);
$member = Member::findOrFail($this->member_id);
$encounter = ClaimEncounter::where('claim_id', $this->id)->first();
if ($encounter) {
$final_encounter = Encounter::findOrFail($this->final_encounter_id);
$data = Organization::findOrFail($final_encounter->healthcare_id);
$hospital = $data->name;
} else {
$hospital = '-';
}
$data = [
"id" => $this->id,
"company_name" => $member->currentCorporate->name,
"member_name" => $member->name,
"member_code" => $member->member_id,
"member_id" => $member->id,
"phone" => $member->person->phone,
"email" => $member->email,
"birth_date" => $member->birth_date,
"symptoms" => "Nyeri dada",
"sign" => "Sesak Nafas",
"main_diagnose" => "Chest pain on breathing",
"main_diagnose_code" => "R07.1",
"comparative_diagnosis" => "Abnormalities of breathing",
"comparative_diagnosis_code" => "R06",
"medical_evacuation" => "Land Transportation",
"benefit_name" => "Konsultasi Dokter",
"hospital" => $hospital,
"admission_date" => $claim_request->submission_date,
"discharge_date" => $claim_request->submission_date,
"dialy_monitoring" => [
"0" => [
"date" => "2023-10-05",
"time" => "09:10",
"status" => "Done",
"subject_title" => "Pasien mengalami sesak napas dan nyeri dada",
"body_temperature" => "36.5",
"sistole" => "110 mm[Hg]",
"diastole" => "110 mm[Hg]",
"respiration_rate" => "20/min",
"analisis_title" => "Asthma bronkial dengan perbaikan",
"Perencanaan" => [
"O2 4L/min", "IVDL RL 2 kolf/6 jam", "Rencana tes sputum"
]
],
"1" => [
"date" => "2023-10-04",
"time" => "09:10",
"status" => "Done",
"subject_title" => "Pasien mengalami sesak napas dan nyeri dada",
"body_temperature" => "36.5",
"sistole" => "110 mm[Hg]",
"diastole" => "110 mm[Hg]",
"respiration_rate" => "20/min",
"analisis_title" => "Asthma bronkial dengan perbaikan",
"Perencanaan" => [
"O2 4L/min", "IVDL RL 2 kolf/6 jam", "Rencana tes sputum"
]
]
],
"laboratorium_result" => [
"0" => [
[
"datetime" => "2023-10-05 10:00",
"reimbursement_code" => "RE-011",
"examination" => "SGOT",
"location" => "Pramita Jakarta Ragunan",
"files" => "https:://test.com"
],
[
"datetime" => "2023-10-05 09:00",
"reimbursement_code" => "RE-010",
"examination" => "SGOT",
"location" => "Pramita Jakarta Ragunan",
"files" => "https:://test.com"
],
],
"1" => [
[
"datetime" => "2023-10-04 10:00",
"reimbursement_code" => "RE-09",
"examination" => "Hematologi Lengkap",
"location" => "Pramita Jakarta Ragunan",
"files" => "https:://test.com"
],
[
"datetime" => "2023-10-04 09:00",
"reimbursement_code" => "RE-08",
"examination" => "Hematologi Lengkap",
"location" => "Pramita Jakarta Ragunan",
"files" => "https:://test.com"
]
]
]
];
return $data;
}
}

1
app/Models/Claim.php
View File

@@ -30,6 +30,7 @@ class Claim extends Model
'plan_id',
'benefit_id',
'status',
'service_code'
];
protected $hidden = [

12
app/Models/ClaimEncounter.php Normal file
View File

@@ -0,0 +1,12 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class ClaimEncounter extends Model
{
use HasFactory;
protected $table = 'claim_encounter';
}

5
app/Models/ClaimItem.php
View File

@@ -25,6 +25,11 @@ class ClaimItem extends Model
return $this->belongsTo(Claim::class, 'claim_id');
}
public function benefit()
{
return $this->belongsTo(Benefit::class, 'claim_itemable_id');
}
public function claim_itemable()
{
return $this->morphTo();

6
app/Models/Member.php
View File

@@ -98,6 +98,12 @@ class Member extends Model
return $this->hasMany(Claim::class, 'member_id', 'id');
}
public function claimRequest()
{
return $this->hasMany(ClaimRequest::class, 'member_id', 'id')->where('claim_id', '!=', null);
}
public function postponedClaims()
{
return $this->hasMany(Claim::class, 'member_id', 'id')->where('status', 'postpone');

12
app/Services/CorporateMemberService.php
View File

@@ -130,7 +130,10 @@ class CorporateMemberService
public function getAllMemberAlarmCenter(int $corporateId, Request $request)
{
$limit = $request->has('perPage') ? $request->input('perPage') : 10;
$start_date = date('Y-m-d', strtotime($request->input('start_date') . ' +1 day'));
$end_date = date('Y-m-d', strtotime($request->input('end_date') . ' +1 day'));
// dd($request);
return Member::query()
->joinCorporateEmployees('left')
->joinMemberPlans('left')
@@ -143,9 +146,18 @@ class CorporateMemberService
->orWhere('members.name', 'like', "%" . $search . "%");
});
})
->when($request->input('start_date'), function (Builder $query, $start) {
$query->where('member_plans.start', '>=', $start);
})
->when($request->input('end_date'), function (Builder $query, $end) {
$query->where('member_plans.end', '<', $end);
})
->when($request->input('division'), function (Builder $query, $value) {
$query->where('corporate_employees.division_id', $value);
})
->when($request->input('status'), function (Builder $query, $value) {
$query->where('plans.active', $value);
})
->when($request->has('orderBy'), function (Builder $query) use ($request) {
$orderBy = match ($request->input('orderBy')) {
'memberId' => 'member_id',

40
frontend/client-portal/src/@types/table.ts
View File

@@ -23,6 +23,11 @@ export type DivisionDataProps = {
id: number;
name: string;
};
export type StatusDataProps = {
id: number;
name: string;
};
/* -------------------------------------------------------------------------- */
/* -------------------------------- headcell -------------------------------- */
@@ -42,6 +47,13 @@ export type DivisionData = {
};
/* -------------------------------------------------------------------------- */
/* ----------------------------- status filter ---------------------------- */
export type Status = {
id: number;
name: string;
};
/* -------------------------------------------------------------------------- */
/* ----------------------------------- row ---------------------------------- */
export type TableListProps<DataType> = {
headCells?: HeadCell<DataType>[];
@@ -85,5 +97,33 @@ export type TableListProps<DataType> = {
handleDivisionChange: (event: SelectChangeEvent) => void;
};
};
filterStatus?: {
useFilter: boolean;
config: {
label: string;
statusValue: string;
statusData: Status[];
handleStatusChange: (event: SelectChangeEvent) => void;
};
};
filterStartDate: {
useFilter: boolean;
startDate: string;
setStartDate: Dispatch<SetStateAction<string>>;
handleStartDateChange: (event: FormEvent<HTMLFormElement>) => void;
};
filterEndDate: {
useFilter: boolean;
endDate: string;
setEndDate: Dispatch<SetStateAction<string>>;
handleEndDateChange: (event: FormEvent<HTMLFormElement>) => void;
};
exportReport: {
useExport: boolean;
startDate: string;
endDate: string;
status: string;
handleExportReport: (event: FormEvent<HTMLFormElement>) => void;
};
};
/* -------------------------------------------------------------------------- */

157
frontend/client-portal/src/components/Table.tsx
View File

@@ -37,9 +37,11 @@ import palette from '../theme/palette';
/* ---------------------------------- utils --------------------------------- */
import { UserCurrentCorporateContext } from '../contexts/UserCurrentCorporate';
import { fSplit } from '../utils/formatNumber';
import { Download, Search as SearchIcon, Upload } from '@mui/icons-material';
/* ---------------------------------- types --------------------------------- */
import { DivisionDataProps, Order, PaginationTableProps, TableListProps } from '../@types/table';
import { InputAdornment } from '@mui/material';
import GetAppIcon from '@mui/icons-material/GetApp';
/* --------------------------------- styled --------------------------------- */
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 10,
@@ -62,7 +64,11 @@ export default function Table<T>({
loadings,
params,
filters,
filterStatus,
filterStartDate,
filterEndDate,
searchs,
exportReport,
}: TableListProps<T>) {
/* ------------------------------- handle sort ------------------------------ */
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
@@ -192,39 +198,132 @@ export default function Table<T>({
</form>
</Grid>
</Fragment>
) : null
// (
// <Grid item xs={12}>
// <form onSubmit={searchs.handleSearchSubmit}>
// <TextField
// id="search-input"
// label="Search"
// variant="outlined"
// onChange={(event) => searchs.setSearchText(event.target.value)}
// value={searchs.searchText}
// fullWidth
// />
// </form>
// </Grid>
// )
}
) : null }
{searchs && searchs.useSearchs ? (
<Fragment>
<Grid item xs={12} lg={9} xl={10}>
<form onSubmit={searchs.handleSearchSubmit}>
<TextField
id="search-input"
label="Search"
variant="outlined"
onChange={(event) => searchs.setSearchText(event.target.value)}
value={searchs.searchText}
fullWidth
/>
</form>
{filterStatus && filterStatus.useFilter ? (
<Grid item xs={12} lg={4} xl={4}>
<form onSubmit={searchs.handleSearchSubmit}>
<TextField
id="search-input"
variant="outlined"
onChange={(event) => searchs.setSearchText(event.target.value)}
value={searchs.searchText}
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
placeholder="Search Name or Member ID... "
/>
</form>
</Grid>
) :
<Grid item xs={12} lg={6} xl={6}>
<form onSubmit={searchs.handleSearchSubmit}>
<TextField
id="search-input"
variant="outlined"
onChange={(event) => searchs.setSearchText(event.target.value)}
value={searchs.searchText}
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
placeholder="Search Name or Member ID... "
/>
</form>
</Grid>
}
</Fragment>
) : null }
{/* Start date */}
{filterStartDate && filterStartDate.useFilter ? (
<Grid item xs={12} lg={2} xl={2}>
<form onChange={filterStartDate.handleStartDateChange}>
<TextField
id="date-input"
type="date"
variant="outlined"
value={filterStartDate.startDate}
onChange={(event) => filterStartDate.setStartDate(event.target.value)}
fullWidth
label="Start Date"
InputLabelProps={{
shrink: true,
}}
/>
</form>
</Grid>
) : null }
{/* End Date */}
{filterEndDate && filterEndDate.useFilter ? (
<Grid item xs={12} lg={2} xl={2}>
<form onChange={filterEndDate.handleEndDateChange}>
<TextField
id="date-input"
type="date"
variant="outlined"
value={filterEndDate.endDate}
onChange={(event) => filterEndDate.setEndDate(event.target.value)}
fullWidth
label="End Date"
InputLabelProps={{
shrink: true,
}}
/>
</form>
</Grid>
) : null }
{/* Filter status */}
{filterStatus && filterStatus.useFilter ? (
<Grid item xs={12} lg={2} xl={2}>
<FormControl fullWidth>
<InputLabel id="simple-status-select-lable">Status</InputLabel>
<Select
labelId="simple-status-select-lable"
id="status-select-lable"
value={filterStatus.config.statusValue}
label="Status"
onChange={filterStatus.config.handleStatusChange}
>
<MenuItem value="all">All</MenuItem>
{filterStatus.config.filterData.map((row: StatusDataProps, index) => (
<MenuItem key={index} value={row.id}>
{row.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
) : null }
{/* Export Report */}
{exportReport && exportReport.useExport ? (
<Grid item xs={12} lg={2} xl={2}>
<FormControl fullWidth>
<Button variant='contained' sx={{p:2}}>
<Download />
<Typography variant='inherit' sx={{marginLeft: 1}}>Export</Typography>
</Button>
</FormControl>
</Grid>
) : null }
</Grid>
</Grid>
{/* End Field 1 */}
@@ -238,7 +337,7 @@ export default function Table<T>({
{/* End Table Header */}
{/* Table Body */}
<TableBody>
{loadings.isLoading ? (
{loadings.isLoading && rows.length >= 1 ? (
<TableRow>
<TableCell colSpan={headCells?.length} align="center">
Loading . . .

16
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
View File

@@ -10,6 +10,7 @@ import useSettings from '../../hooks/useSettings';
import List from './List';
import ServiceMonitoring from './ServiceMonitoring';
import UserProfile from './UserProfile';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
/* ------------------------------ tabs setting ------------------------------ */
@@ -102,16 +103,23 @@ export default function Drugs() {
return (
<Page title="Alarm Center">
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={'Alarm Center'}
links={[
{ name: 'Case Management', href: '/alarm-center' },
{ name: 'Alarm Center', href: '/alarm-center'}
]}
/>
<Grid container>
<Grid item xs={12} lg={12} md={12}>
<Card>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
{/* <Card> */}
{/* <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
<StyledTab label="All Data" {...a11yProps(0)} />
<StyledTab label="Ongoing" {...a11yProps(1)} />
<StyledTab label="Done" {...a11yProps(2)} />
</StyledTabs>
</Box>
</Box> */}
<TabPanel value={value} index={0}>
<List />
</TabPanel>
@@ -121,7 +129,7 @@ export default function Drugs() {
<TabPanel value={value} index={2}>
<UserProfile />
</TabPanel> */}
</Card>
{/* </Card> */}
</Grid>
</Grid>
</Container>

228
frontend/client-portal/src/pages/AlarmCenter/List.tsx
View File

@@ -12,6 +12,9 @@ import {
Button,
TableSortLabel,
Box,
SelectChangeEvent,
Typography,
MenuItem
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
@@ -32,6 +35,11 @@ import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { fDateSuffix } from '../../utils/formatTime';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import DetailDataMember from './ListMember';
/* ---------------------------------- types --------------------------------- */
@@ -227,6 +235,94 @@ export default function List() {
handleSearchSubmit: handleSearchSubmit,
};
/* ------------------------------ handle filter ----------------------------- */
const [statusValue, setStatusValue] = useState('all');
const [filterData, setStatusData] = useState([]);
// handle status
const handleStatusChanges = (event: SelectChangeEvent) => {
setStatusValue(event.target.value as string);
if (event.target.value === 'all') {
searchParams.delete('status');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([
...searchParams.entries(),
['status', event.target.value as string],
]);
setAppliedParams(params);
}
};
const filterStatus = {
useFilter: false,
config: {
label: 'Status',
statusValue: statusValue,
filterData: filterData,
handleStatusChange: handleStatusChanges,
},
};
// handle start date
const [startDateValue, setStartDateValue] = useState('');
const handleStartDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(startDateValue)
if (startDateValue === '') {
searchParams.delete('start_date');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['start_date', startDateValue]]);
setAppliedParams(params);
}
};
const filterStartDate = {
useFilter: true,
startDate: startDateValue,
setStartDate: setStartDateValue,
handleStartDateChange: handleStartDateChanges,
};
// handle end date
const [endDateValue, setEndDateValue] = useState('');
const handleEndDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (endDateValue === '') {
searchParams.delete('end_date');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['end_date', endDateValue]]);
setAppliedParams(params);
}
};
const filterEndDate = {
useFilter: true,
endDate: endDateValue,
setEndDate: setEndDateValue,
handleEndDateChange: handleEndDateChanges,
};
/* -------------------------------- handle export --------------------------- */
const handleExportReport = {
}
const exportReport = {
useExport: true,
startDate: startDateValue,
endDate: endDateValue,
status: statusValue,
handleExportReport: handleExportReport
}
/* -------------------------------- headCell -------------------------------- */
const headCells: HeadCell<never>[] = [
{
@@ -252,14 +348,20 @@ export default function List() {
id: 'end_date',
align: 'center',
label: 'End Date',
isSort: false,
},
{
id: 'status',
align: 'center',
label: 'Status',
isSort: true,
},
// {
// id: 'status',
// align: 'center',
// label: 'Status',
// isSort: false,
// },
{
id: 'action',
align: 'center',
label: '',
isSort: false,
},
];
/* -------------------------------------------------------------------------- */
@@ -278,50 +380,82 @@ export default function List() {
params: { ...parameters },
});
const status = [
{"id": 1, "name": "Done" },
{"id": 0, "name": "On Going" },
]
setStatusData(status)
setData(
response.data.data.map((obj: any) => {
return {
...obj,
memberId:
// <Link to={'/user-profile/'+obj.personId} >
<Button
onClick={() => navigate ('/user-profile/'+obj.personId)}
>{obj.memberId}</Button>
// memberId:
// // <Link to={'/user-profile/'+obj.personId} >
// <Button
// onClick={() => navigate ('/user-profile/'+obj.personId)}
// >{obj.memberId}</Button>
// ,
start_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.start_date) }
</Typography>
,
status:
obj.status === 1 ? (
<Button onClick={() => navigate('service-monitoring/'+obj.personId )}
startIcon={<Iconify icon="ic:round-check" />}
sx={{
backgroundColor: palette.light.grey[300],
color: palette.light.grey[800],
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: palette.light.grey[400],
color: palette.light.grey[800],
},
}}
>
done
</Button>
) : (
<Button
startIcon={<Iconify icon="fa6-solid:clock" />}
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: '#BF6919',
color: '#FFFF',
},
}}
>
Ongoing
</Button>
),
end_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.end_date) }
</Typography>
,
// status:
// obj.status === 1 ? (
// <Typography
// sx={{
// background: 'rgba(84, 214, 44, 0.16)',
// color: '#229A16',
// paddingX: 1.5,
// paddingY: 1,
// borderRadius: 3,
// }} variant='overline'
// >
// Done
// </Typography>
// ) : (
// <Typography
// sx={{
// background: 'rgba(255, 193, 7, 0.16)',
// color: '#BF6919',
// paddingX: 1.5,
// paddingY: 1,
// borderRadius: 3,
// }} variant='overline'
// >
// Ongoing
// </Typography>
// ),
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate('member/'+obj.id )}>
<VisibilityOutlinedIcon />
View
</MenuItem>
</>
} />
};
})
);
@@ -354,6 +488,10 @@ export default function List() {
params={params}
searchs={searchs}
// filters={filters}
filterStatus={filterStatus}
filterStartDate={filterStartDate}
filterEndDate={filterEndDate}
exportReport={exportReport}
/>
</Stack>
);

520
frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx Normal file
View File

@@ -0,0 +1,520 @@
/* ---------------------------------- @mui ---------------------------------- */
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Stack,
Button,
TableSortLabel,
Box,
SelectChangeEvent,
Typography,
MenuItem,
Grid
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
// import axios from 'axios';
import axios from '../../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
import TableComponent from '../../components/Table';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate, Link, useParams } from 'react-router-dom';
import { fDateSuffix, fPostFormat } from '../../utils/formatTime';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
/* ---------------------------------- types --------------------------------- */
type DataList = {
name: string;
};
// type PaginationTableProps = {
// current_page: number;
// from: number;
// last_page: number;
// links: [];
// path: string;
// per_page: number;
// to: number;
// total: number;
// };
// type DataTableProps = {
// fullName: string;
// memberId: string;
// service: string;
// start_date: string;
// end_date: string;
// status: boolean | number;
// };
// /* -------------------------------------------------------------------------- */
// /* -------------------------- enchanced table head -------------------------- */
// type Order = 'asc' | 'desc';
// interface HeadCell {
// id: string;
// label: string;
// }
// const headCells: readonly HeadCell[] = [
// {
// id: 'name',
// label: 'Name',
// },
// {
// id: 'member_id',
// label: 'Member ID',
// },
// {
// id: 'service',
// label: 'Service',
// },
// {
// id: 'start_date',
// label: 'Start Date',
// },
// {
// id: 'end_date',
// label: 'End Date',
// },
// {
// id: 'status',
// label: 'Status',
// },
// ];
// interface EnhancedTableProps {
// onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
// order: Order;
// orderBy: string;
// }
// function EnhancedTableHead(props: EnhancedTableProps) {
// const { order, orderBy, onRequestSort } = props;
// const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
// onRequestSort(event, property);
// };
// return (
// <TableHead>
// <TableRow>
// <TableCell align="center">No</TableCell>
// {headCells.map((headCell) => (
// <TableCell
// key={headCell.id}
// sortDirection={orderBy === headCell.id ? order : false}
// align="center"
// >
// <TableSortLabel
// active={orderBy === headCell.id}
// direction={orderBy === headCell.id ? order : 'asc'}
// onClick={createSortHandler(headCell.id)}
// >
// {headCell.label}
// {orderBy === headCell.id ? (
// <Box component="span" sx={visuallyHidden}>
// {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
// </Box>
// ) : null}
// </TableSortLabel>
// </TableCell>
// ))}
// </TableRow>
// </TableHead>
// );
// }
/* -------------------------------------------------------------------------- */
export default function List() {
const navigate = useNavigate();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [data, setData] = useState([]);
const { id } = useParams();
/* -------------------------------------------------------------------------- */
/* setting up for the table */
/* -------------------------------------------------------------------------- */
const [isLoading, setIsLoading] = useState(true);
const loadings = {
isLoading: isLoading,
setIsLoading: setIsLoading,
};
/* ------------------------------ handle params ----------------------------- */
const [searchParams, setSearchParams] = useSearchParams();
const [appliedParams, setAppliedParams] = useState({});
const params = {
searchParams: searchParams,
setSearchParams: setSearchParams,
appliedParams: appliedParams,
setAppliedParams: setAppliedParams,
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ handle order ------------------------------ */
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('fullName');
const orders = {
order: order,
setOrder: setOrder,
orderBy: orderBy,
setOrderBy: setOrderBy,
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- handle pagination --------------------------- */
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
current_page: 0,
from: 0,
last_page: 0,
links: [],
path: '',
per_page: 0,
to: 0,
total: 0,
});
const paginations = {
page: page,
setPage: setPage,
rowsPerPage: rowsPerPage,
setRowsPerPage: setRowsPerPage,
paginationTable: paginationTable,
setPaginationTable: setPaginationTable,
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ handle search ----------------------------- */
const [searchText, setSearchText] = useState('');
const [name, setName] = useState('');
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (searchText === '') {
searchParams.delete('search');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
setAppliedParams(params);
}
};
const searchs = {
useSearchs: false,
searchText: searchText,
setSearchText: setSearchText,
handleSearchSubmit: handleSearchSubmit,
};
/* ------------------------------ handle filter ----------------------------- */
const [statusValue, setStatusValue] = useState('all');
const [filterData, setStatusData] = useState([]);
// handle status
const handleStatusChanges = (event: SelectChangeEvent) => {
setStatusValue(event.target.value as string);
if (event.target.value === 'all') {
searchParams.delete('status');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([
...searchParams.entries(),
['status', event.target.value as string],
]);
setAppliedParams(params);
}
};
const filterStatus = {
useFilter: false,
config: {
label: 'Status',
statusValue: statusValue,
filterData: filterData,
handleStatusChange: handleStatusChanges,
},
};
// handle start date
const [startDateValue, setStartDateValue] = useState('');
const handleStartDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(startDateValue)
if (startDateValue === '') {
searchParams.delete('start_date');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['start_date', startDateValue]]);
setAppliedParams(params);
}
};
const filterStartDate = {
useFilter: false,
startDate: startDateValue,
setStartDate: setStartDateValue,
handleStartDateChange: handleStartDateChanges,
};
// handle end date
const [endDateValue, setEndDateValue] = useState('');
const handleEndDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (endDateValue === '') {
searchParams.delete('end_date');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([...searchParams.entries(), ['end_date', endDateValue]]);
setAppliedParams(params);
}
};
const filterEndDate = {
useFilter: false,
endDate: endDateValue,
setEndDate: setEndDateValue,
handleEndDateChange: handleEndDateChanges,
};
/* -------------------------------- handle export --------------------------- */
const handleExportReport = {
}
const exportReport = {
useExport: false,
startDate: startDateValue,
endDate: endDateValue,
status: statusValue,
handleExportReport: handleExportReport
}
/* -------------------------------- headCell -------------------------------- */
const headCells: HeadCell<never>[] = [
{
id: 'admission_date',
align: 'center',
label: 'Admission Date',
isSort: true,
},
{
id: 'discharge_date',
align: 'center',
label: 'Discharge Date',
isSort: true,
},
{
id: 'code',
align: 'left',
label: 'Code',
isSort: true,
},
{
id: 'status',
align: 'center',
label: 'Status',
isSort: false,
},
{
id: 'action',
align: 'center',
label: '',
isSort: false,
},
];
/* -------------------------------------------------------------------------- */
useEffect(() => {
(async () => {
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 250));
const parameters =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
const response = await axios.get(`${corporateValue}/alarm-center-members/${id}`, {
params: { ...parameters },
});
const status = [
{"id": 1, "name": "Done" },
{"id": 0, "name": "On Going" },
]
setStatusData(status)
const datatable = response.data.data;
// if (response.data.data.length > 0){
// setIsLoading(true);
// } else {
// setIsLoading(false);
// }
const dataName = response.data.data[0].fullName
setName(dataName)
setData(
datatable.map((obj: any) => {
return {
...obj,
admission_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
marginTop: 2,
}} variant='overline'
>{ fDateSuffix(obj.admission_date) }
</Typography>
,
discharge_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.discharge_date) }
</Typography>
,
status:
obj.status === 'Done' ? (
<Typography
sx={{
background: 'rgba(84, 214, 44, 0.16)',
color: '#229A16',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>
Done
</Typography>
) : (
<Typography
sx={{
background: 'rgba(255, 193, 7, 0.16)',
color: '#BF6919',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>
Ongoing
</Typography>
),
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate('service-monitoring/'+obj.claim_id )}>
<VisibilityOutlinedIcon />
View
</MenuItem>
</>
} />
};
})
);
setPaginationTable(response.data);
setRowsPerPage(response.data.per_page);
if (searchParams.get('page')) {
//@ts-ignore
const currentPage = parseInt(searchParams.get('page')) - 1;
paginationTable.current_page = currentPage;
setPage(currentPage);
}
setIsLoading(false);
})();
}, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
console.log(loadings);
return (
<Grid container spacing={8}>
<Grid item xs={12} paddingX="24px" >
<Stack direction="row" alignItems="center">
<ArrowBackIosIcon
onClick={() => navigate(`/alarm-center`)}
sx={{ cursor: 'pointer' }}
/>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
{name}
</Typography>
</Stack>
</Grid>
<Grid item xs={12}>
<Stack>
<TableComponent
headCells={headCells}
rows={data}
orders={orders}
paginations={paginations}
loadings={loadings}
params={params}
searchs={searchs}
// filters={filters}
filterStatus={filterStatus}
filterStartDate={filterStartDate}
filterEndDate={filterEndDate}
exportReport={exportReport}
/>
</Stack>
</Grid>
</Grid>
);
}

622
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
View File

@@ -9,9 +9,14 @@ import {
Card,
Stack,
Typography,
TableHead,
TableCell,
TableBody,
Table,
TableRow,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { Favorite } from '@mui/icons-material';
import DownloadIcon from '@mui/icons-material/Download';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
@@ -21,8 +26,15 @@ import { useState, SyntheticEvent, useContext, useEffect } from 'react';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { useNavigate, useParams } from 'react-router-dom';
import axios from '../../utils/axios';
import { fDate } from '../../utils/formatTime';
import { fDate, fDateSuffix, fDateTime, fDateTimeSuffix } from '../../utils/formatTime';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineSeparator } from '@mui/lab';
import Select from '../../theme/overrides/Select';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import { MenuItem } from '@mui/material';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -42,7 +54,7 @@ function TabPanel(props: TabPanelProps) {
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
style={{ backgroundColor: '#F9FAFB' }}
// style={{ backgroundColor: '#F9FAFB' }}
{...other}
>
{value === index && (
@@ -61,6 +73,8 @@ function a11yProps(index: number) {
};
}
interface StyledTabsProps {
children?: React.ReactNode;
value: number;
@@ -71,7 +85,7 @@ const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
'& .MuiTabs-indicator': {
display: 'flex',
justifyContent: 'center',
backgroundColor: 'transparent',
backgroundColor: '19BBBB',
},
'& .MuiTabs-indicatorSpan': {
maxWidth: 40,
@@ -85,27 +99,73 @@ interface StyledTabProps {
icon?: string | React.ReactElement;
}
const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
({ theme }) => ({
textTransform: 'none',
fontWeight: 500,
fontSize: theme.typography.pxToRem(20),
color: theme.palette.primary.main,
maxWidth: '100%',
color: '#637381',
maxWidth: '15%',
flex: 1,
margin: '0 !important',
'&.Mui-selected': {
color: '#FFF',
backgroundColor: theme.palette.primary.main,
color: '#212B36',
},
'&:hover': {
backgroundColor: theme.palette.primary.dark,
color: '#FFF',
color: '#212B36',
opacity: 1,
},
})
);
type Data = {
id: number,
company_name: string,
member_name: string,
member_code: string,
member_id: number,
phone: string,
email: string,
birth_date: string,
symptoms: string,
sign: string,
main_diagnose: string,
main_diagnose_code: string,
comparative_diagnosis: string,
comparative_diagnosis_code: string,
medical_evacuation: string,
benefit_name: string,
hospital: string,
admission_date: string,
discharge_date: string,
dialy_monitoring: DailyMonitoring[],
laboratorium_result: LaboratoriumResult[],
}
type DailyMonitoring = {
date: string,
time: string,
status: string,
subject_title: string,
body_temperature: string,
sistole: string,
diastole: string,
respiration_rate: string,
analisis_title: string,
Perencanaan: string,
}
type LaboratoriumResult = {
datetime: string,
reimbursement_code: string,
examination: string,
location: string,
files: string,
}
export default function ServiceMonitoring() {
const { themeStretch } = useSettings();
const navigate = useNavigate();
@@ -115,234 +175,436 @@ export default function ServiceMonitoring() {
setValue(newValue);
};
const [data, setData] = useState({});
const [data, setData] = useState<Data | null>(null);
const [corporate, setCorporate] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const { id } = useParams();
const claimId = '2';
// console.log('id', id);
useEffect(() => {
console.log('fetching data...');
axios
.get('/data/' + id)
.then((response) => {
// console.log('data fetched...', response.data);
setData(response.data);
})
.catch((error) => {
console.error('error fetching data...', error);
});
(async () => {
axios
.get('/corporate-manage/' + corporateValue)
.then((response) => {
// console.log('corporate fetched...', response.data);
setCorporate(response.data);
})
.catch((error) => {
console.error('error fetching corporate...', error);
});
}, []);
// console.log('Data:', data);
const [encounterData, setEncounterData] = useState({});
useEffect(() => {
// console.log('fetching encounter data...');
axios
.get('/claims/${claim_id}/encounters')
.then((response) => {
// console.log('encounter data fetched...', response.data);
setEncounterData(response.data);
})
.catch((error) => {
console.error('error fetching encounter data...', error);
});
}, []);
await new Promise((resolve) => setTimeout(resolve, 250));
const response = await axios.get(`${corporateValue}/service-monitoring/${id}`);
setData(response.data.data);
})();
}, [corporateValue]);
console.log(data?.laboratorium_result)
return (
<Page title="Service Monitoring 123456">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
<IconButton
onClick={() => navigate('/alarm-center')}
sx={{ marginRight: '10px', color: '#424242' }}
>
<Iconify icon="heroicons-outline:arrow-narrow-left" />
</IconButton>
<Typography variant="h5">Service Monitoring</Typography>
<Stack
direction="row"
alignItems="center"
sx={{
backgroundColor: '#DFE3E8',
color: '#212B36',
paddingX: 2,
paddingY: 1,
marginLeft: 3,
borderRadius: 1,
}}
>
<Iconify icon="akar-icons:check" sx={{ marginRight: 1 }} />
<Typography variant="caption">Done</Typography>
</Stack>
</Stack>
<Grid container spacing={3} sx={{ marginBottom: 5 }}>
<Page title="Service Monitoring">
<Grid container spacing={3} paddingX={2} sx={{ marginBottom: 5, marginTop: 1 }} >
<Grid item xs={12} paddingX="24px" >
<Stack direction="row" alignItems="center">
<ArrowBackIosIcon
onClick={() => navigate(`/alarm-center/member/${data.member_id}}`)}
sx={{ cursor: 'pointer' }}
/>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
Service Monitoring
</Typography>
</Stack>
</Grid>
{/* Item 1 */}
<Grid item xs={4} lg={4} md={6}>
<Grid item xs={12} lg={12} md={12}>
<Card sx={{ borderRadius: '6px' }}>
<Stack>
<Stack
direction="row"
alignItems="center"
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
sx={{ paddingY: 2, paddingX: 2, marginTop: 2 }}
>
<Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
<Typography>Employee Profiles</Typography>
<Typography variant='h5'>Employee Profiles</Typography>
</Stack>
<Stack direction="row" spacing={1} sx={{ paddingY: 2, paddingX: 2 }}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant="inherit">Company Name</Typography>
<Typography variant="h6">{data?.company_name}</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant="inherit">Member ID</Typography>
<Typography variant="h6">{data?.member_code || 'Loading...'}</Typography>
</Stack>
</Grid>
</Stack>
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
<Stack spacing={2}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant="caption">Nama perusahaan</Typography>
<Typography variant="body2">{corporate?.name}</Typography>
<Typography variant="inherit">Full Name</Typography>
<Typography variant="h6">{data?.member_name}</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant="caption">Nama Lengkap</Typography>
<Typography variant="body2">{data?.name || 'Loading...'}</Typography>
<Typography variant="inherit">Date of Birth</Typography>
<Typography variant="h6">{data?.birth_date || 'Loading...'}</Typography>
</Stack>
</Grid>
</Stack>
<Stack direction="row" spacing={1} sx={{ paddingY: 2, paddingX: 2 }}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant="caption">Tanggal lahir</Typography>
<Typography variant="body2">
{data?.birth_date ? fDate(data?.birth_date) : ''}
</Typography>
<Typography variant="inherit">Phone Number</Typography>
<Typography variant="h6">{data?.phone}</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant="caption">Email</Typography>
<Typography variant="body2">{data?.email}</Typography>
<Typography variant="inherit">Email</Typography>
<Typography variant="h6">{data?.email || 'Loading...'}</Typography>
</Stack>
<Stack>
<Typography variant="caption">No telepon</Typography>
<Typography variant="body2">{data?.phone}</Typography>
</Stack>
</Stack>
<Stack>
<Typography variant="caption">ID Karyawan</Typography>
<Typography variant="body2">12345678</Typography>
</Stack>
</Grid>
</Stack>
</Stack>
</Card>
</Grid>
{/* Item 2 */}
<Grid item xs={4} lg={4} md={6}>
<Card sx={{ borderRadius: '6px', height: '100%' }}>
<Grid item xs={6} lg={6} md={6}>
<Card sx={{ borderRadius: '6px', paddingLeft:2 }}>
<Stack>
<Stack
direction="row"
alignItems="center"
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
sx={{ paddingY: 2, paddingX: 2, marginTop: 2 }}
>
<Iconify
icon="heroicons-solid:clipboard-list"
width={22}
height={18}
sx={{ marginRight: '10px' }}
/>
<Typography>Diagnose Summary</Typography>
<Typography variant='h5'>Diagnose Summary</Typography>
</Stack>
<Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
<Stack>
<Typography variant="caption">Gejala</Typography>
<Typography variant="body2">Nyeri dada</Typography>
</Stack>
<Stack>
<Typography variant="caption">Tanda</Typography>
<Typography variant="body2">Sesak Napas</Typography>
</Stack>
<Stack>
<Typography variant="caption">Main Diagnose</Typography>
<Typography variant="body2">
J46 Status asthmaticus, Acute severe asthma
</Typography>
</Stack>
<Stack>
<Typography variant="caption">Diagnosis pembanding</Typography>
<Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
</Stack>
<Stack spacing={3} sx={{ paddingY: 2, paddingX: 2 }}>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Symptoms</Typography>
<Typography variant="h6">{data?.symptoms}</Typography>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Sign</Typography>
<Typography variant="h6">{data?.sign || 'Loading...'}</Typography>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Main Diagnosis</Typography>
<Stack direction={'row'}>
<Typography variant="h6">{data?.main_diagnose}</Typography>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginLeft: 1,
paddingX: 1,
paddingY: 1,
marginRight: 'auto',
}} variant='overline'
>{data?.main_diagnose_code}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Comparative Diagnosis</Typography>
<Stack direction={'row'}>
<Typography variant="h6">{data?.comparative_diagnosis}</Typography>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginLeft: 1,
paddingX: 1,
paddingY: 1,
marginRight: 'auto',
}} variant='overline'
>{data?.comparative_diagnosis_code}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={8}>
<Typography variant="inherit"></Typography>
<Typography variant="h6"></Typography>
</Stack>
</Grid>
</Stack>
</Stack>
</Card>
</Grid>
{/* Item 3 */}
<Grid item xs={4} lg={4} md={6}>
<Card sx={{ borderRadius: '6px', height: '100%' }}>
<Grid item xs={6} lg={6} md={6}>
<Card sx={{ borderRadius: '6px', paddingLeft:2 }}>
<Stack>
<Stack
direction="row"
alignItems="center"
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
sx={{ paddingY: 2, paddingX: 2, marginTop: 2 }}
>
<Iconify
icon="iconoir:healthcare"
width={22}
height={18}
sx={{ marginRight: '10px' }}
/>
<Typography>Services</Typography>
<Typography variant='h5'>Services</Typography>
</Stack>
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
<Stack spacing={2}>
<Stack>
<Typography variant="caption">Evakuasi medis</Typography>
<Typography variant="body2">Land Transportation</Typography>
<Stack spacing={3} sx={{ paddingY: 2, paddingX: 2 }}>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Medical Evacuation</Typography>
<Typography variant="h6">{data?.medical_evacuation}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Rumah sakit</Typography>
<Typography variant="body2">Primaya Hospital</Typography>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Benefit Name</Typography>
<Typography variant="h6">{data?.benefit_name || 'Loading...'}</Typography>
</Stack>
<Stack direction="row" spacing={16}>
<Stack>
<Typography variant="caption">Tanggal mulai</Typography>
<Typography variant="body2">17 Aug 2022</Typography>
</Stack>
<Stack>
<Typography variant="caption">Selesai</Typography>
<Typography variant="body2">18 Aug 2022</Typography>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Hospital</Typography>
<Typography variant="h6">{data?.hospital}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Daftar layanan</Typography>
<Typography variant="body2">
Inpatient, Medivac (Medical Evacuation)
</Typography>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Admission Date</Typography>
<Typography variant="h6">{data?.admission_date ? fDateSuffix(data?.admission_date) : '-'}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Discharge Date</Typography>
<Typography variant="h6">{ data?.discharge_date ? fDateSuffix(data?.discharge_date) : '-'}</Typography>
</Stack>
</Grid>
</Stack>
</Stack>
</Card>
</Grid>
<Grid item sm>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
<StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
<StyledTab
icon={<Iconify icon="heroicons-solid:beaker" />}
label="Laboratorium Result"
{...a11yProps(1)}
/>
</StyledTabs>
</Box>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<Grid item xs={12} lg={12} md={12}>
<Card sx={{ borderRadius: '6px' }}>
<Box sx={{ margin:5, borderBottom: 1, borderColor: 'divider' }}>
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
<StyledTab label="Daily Monitoring" {...a11yProps(0)} />
<StyledTab
label="Laboratorium Result"
{...a11yProps(1)}
/>
</StyledTabs>
</Box>
<TabPanel value={value} index={0}>
<Grid container>
<Grid item xs={12} md={12}>
<Timeline sx={{
[`& .${timelineItemClasses.root}:before`]: {
flex: 0,
padding: 0,
},
}}>
{data?.dialy_monitoring.length > 0 ? data?.dialy_monitoring.map((row, index) => (
<TimelineItem key={index}>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector sx={{border: '0.5px dashed rgba(145, 158, 171, 0.32)', backgrounSize: '4px 4px' }} />
</TimelineSeparator>
<TimelineContent>
<Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography>
<Card sx={{paddinX:2, paddingY:2}} >
<Stack direction={'row'} sx={{ alignItems: 'center' }}>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginLeft: 2,
paddingX: 2,
paddingY: 1,
marginRight: 'auto',
}} variant='overline'> {row.time} </Typography>
<Typography
sx={{
background: 'rgba(84, 214, 44, 0.16)',
color: '#229A16',
borderRadius: 1,
marginRight: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {row.status} </Typography>
</Stack>
<hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/>
<Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="h6">Subject</Typography>
<Typography variant="inherit">{row.subject_title}</Typography>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="h6" sx={{ paddingBottom: 2}}>Objektif</Typography>
</Stack>
<Stack direction={'row'} sx={{ paddingY: 1}} spacing={2}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='inherit'>Body Temperature</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='subtitle1'>{row.body_temperature}</Typography>
</Stack>
</Grid>
</Stack>
<Stack direction={'row'} sx={{ paddingY: 1}} spacing={2}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='inherit'>Sistole</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack >
<Typography variant='subtitle1' >{row.sistole}</Typography>
</Stack>
</Grid>
</Stack>
<Stack direction={'row'} sx={{ paddingY: 1}} spacing={2}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='inherit'>Diastole</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='subtitle1'>{row.diastole}</Typography>
</Stack>
</Grid>
</Stack>
<Stack direction={'row'} sx={{ paddingY: 1}} spacing={2}>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='inherit'>Respiration Rate</Typography>
</Stack>
</Grid>
<Grid item xs={6} lg={6} md={6}>
<Stack>
<Typography variant='subtitle1'>{row.respiration_rate}</Typography>
</Stack>
</Grid>
</Stack>
<Stack spacing={1}>
<Typography variant="h6" sx={{ paddingTop: 2}}>Analysis</Typography>
</Stack>
<Stack direction={'row'} sx={{ paddingY: 2,}} spacing={2}>
<Grid item xs={12} lg={12} md={12}>
<Stack>
<Typography variant='inherit'>{row.analisis_title}</Typography>
</Stack>
</Grid>
</Stack>
<Stack spacing={1}>
<Typography variant="h6" sx={{ paddingTop: 2}}>Perencanaan</Typography>
</Stack>
<Stack direction={'row'} spacing={2}>
<Grid item xs={12} lg={12} md={12}>
<Stack marginLeft={5}>
<ul>
{/* {data.} */}
<li>test</li>
<li>test</li>
</ul>
</Stack>
</Grid>
</Stack>
</Grid>
</Stack>
</Card>
</TimelineContent>
</TimelineItem>
)) :
<Typography variant='subtitle1'>
No Data Found
</Typography>
}
</Timeline>
</Grid>
</Grid>
</TabPanel>
<TabPanel value={value} index={1}>
<Grid container>
<Grid item xs={12} md={12}>
{data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => (
<Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} >
<Stack paddingX={5}>
<Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography>
{row.length > 0 ? row.map((list, i) => (
<Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginBottom: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {list.reimbursement_code}
</Typography>
<Table sx={{marginY:2}}>
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Examination</TableCell>
<TableCell>Location</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginBottom: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {fDateTime(list.datetime)}
</Typography>
</TableCell>
<TableCell>{list.examination}</TableCell>
<TableCell>{list.location}</TableCell>
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate(`${list.files}` )}>
<DownloadIcon />
Download
</MenuItem>
</>
} />
</TableRow>
</TableBody>
</Table>
</Card>
)) : <Typography variant='subtitle1'>Data Not Found</Typography>}
</Stack>
</Card>
)) :
<Typography variant='subtitle1'>
Data Not Found
</Typography>
}
</Grid>
</Grid>
</TabPanel>
</Card>
</Grid>
</Grid>
</Container>
</Page>
);
}

9
frontend/client-portal/src/routes/index.tsx
View File

@@ -108,11 +108,17 @@ export default function Router() {
index: true,
},
{
path: 'service-monitoring/:id',
path: 'member/:id',
element: <AlarmCenterMemberPerList />,
},
{
path: 'member/:id/service-monitoring/:id',
element: <AlarmCenterServiceMonitoring />,
},
],
},
{
path: '/claim-submit',
element: (
@@ -242,6 +248,7 @@ const EmployeeDataUserProfile = Loadable(lazy(() => import('../pages/EmployeeDat
// Alarm Center
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
const AlarmCenterMemberPerList = Loadable(lazy(() => import('../pages/AlarmCenter/ListMember')));
const AlarmCenterServiceMonitoring = Loadable(
lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
);

3
frontend/client-portal/src/utils/formatTime.ts
View File

@@ -8,7 +8,7 @@ export function fDate(date: Date | string | number) {
}
export function fDateTime(date: Date | string | number) {
return format(new Date(date), 'dd MMM yyyy p');
return format(new Date(date), 'dd MMM yyyy hh:mm');
}
export function fTimestamp(date: Date | string | number) {
@@ -19,6 +19,7 @@ export function fDateTimeSuffix(date: Date | string | number) {
return format(new Date(date), 'dd/MM/yyyy hh:mm p');
}
export function fDateSuffix(date: Date | string | number) {
return format(new Date(date), 'dd MMM yyyy');
}