update fitur alarm center

Modules/Client/Http/Controllers/Api/CorporateMemberController.php

@@ -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)
+        ->where('person_id', $person_id)
-            ->whereHas('employeds', function ($query) use ($corporate_id) {
+        ->whereHas('employeds', function ($query) use ($corporate_id) {
-                $query->where('corporate_id', $corporate_id);
+            $query->where('corporate_id', $corporate_id);
-            })
+        })
-            ->first();
+        ->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));
     }
 }

Modules/Client/Routes/api.php

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

Modules/Client/Transformers/AlarmCenter/DataListClaimMemberResource.php

@@ -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,
+        ];   
+    }
+}

Modules/Client/Transformers/AlarmCenter/DataServiceMonitoring.php

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

app/Models/Claim.php

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

app/Models/ClaimEncounter.php

@@ -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';
+}

app/Models/ClaimItem.php

@@ -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();

app/Models/Member.php

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

app/Services/CorporateMemberService.php

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

frontend/client-portal/src/@types/table.ts

@@ -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;
+  };
 };
 /* -------------------------------------------------------------------------- */

frontend/client-portal/src/components/Table.tsx

@@ -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
+            ) : 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>
-            // )
-            }
 
             {searchs && searchs.useSearchs ? (
               <Fragment>
-                <Grid item xs={12} lg={9} xl={10}>
+                {filterStatus && filterStatus.useFilter ? (
-                  <form onSubmit={searchs.handleSearchSubmit}>
+                  <Grid item xs={12} lg={4} xl={4}>
-                    <TextField
+                    <form onSubmit={searchs.handleSearchSubmit}>
-                      id="search-input"
+                      <TextField
-                      label="Search"
+                        id="search-input"
-                      variant="outlined"
+                        variant="outlined"
-                      onChange={(event) => searchs.setSearchText(event.target.value)}
+                        onChange={(event) => searchs.setSearchText(event.target.value)}
-                      value={searchs.searchText}
+                        value={searchs.searchText}
-                      fullWidth
+                        fullWidth
-                    />
+                        InputProps={{
-                  </form>
+                          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 . . .

frontend/client-portal/src/pages/AlarmCenter/Index.tsx

@@ -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>
+            {/* <Card> */}
-              <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              {/* <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>

frontend/client-portal/src/pages/AlarmCenter/List.tsx

@@ -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: 
+            // memberId: 
-            // <Link to={'/user-profile/'+obj.personId} >
+            // // <Link to={'/user-profile/'+obj.personId} >
-            <Button
+            // <Button
-             onClick={() => navigate ('/user-profile/'+obj.personId)}
+            //  onClick={() => navigate ('/user-profile/'+obj.personId)}
-            >{obj.memberId}</Button>
+            // >{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:
+            end_date:
-              obj.status === 1 ? (
+            <Typography
-                <Button onClick={() => navigate('service-monitoring/'+obj.personId )}
+            sx={{
-                  startIcon={<Iconify icon="ic:round-check" />}
+              background: 'rgba(145, 158, 171, 0.16)',
-                  sx={{
+              color: '#637381',
-                    backgroundColor: palette.light.grey[300],
+              paddingX: 1.5,
-                    color: palette.light.grey[800],
+              paddingY: 1,
-                    paddingX: 1.5,
+              borderRadius: 3,
-                    paddingY: 1,
+            }} variant='overline'
-                    '&:hover': {
+          >{ fDateSuffix(obj.end_date) }
-                      backgroundColor: palette.light.grey[400],
+          </Typography>
-                      color: palette.light.grey[800],
+            ,
-                    },
+            // status:
-                  }}
+            //   obj.status === 1 ? (
-                >
+            //     <Typography
-                  done
+            //       sx={{
-                </Button>
+            //         background: 'rgba(84, 214, 44, 0.16)',
-              ) : (
+            //         color: '#229A16',
-                <Button
+            //         paddingX: 1.5,
-                  startIcon={<Iconify icon="fa6-solid:clock" />}
+            //         paddingY: 1,
-                  sx={{
+            //         borderRadius: 3,
-                    backgroundColor: '#CD7B2E',
+            //       }} variant='overline'
-                    color: '#FFFF',
+            //     >
-                    paddingX: 1.5,
+            //       Done
-                    paddingY: 1,
+            //     </Typography>
-                    '&:hover': {
+            //   ) : (
-                      backgroundColor: '#BF6919',
+            //     <Typography
-                      color: '#FFFF',
+            //       sx={{
-                    },
+            //         background: 'rgba(255, 193, 7, 0.16)',
-                  }}
+            //         color: '#BF6919',
-                >
+            //         paddingX: 1.5,
-                  Ongoing
+            //         paddingY: 1,
-                </Button>
+            //         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>
   );

frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx

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

frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx

@@ -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,
+    color: '#637381',
-    maxWidth: '100%',
+    maxWidth: '15%',
     flex: 1,
     margin: '0 !important',
     '&.Mui-selected': {
-      color: '#FFF',
+      color: '#212B36',
-      backgroundColor: theme.palette.primary.main,
     },
     '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
+      color: '#212B36',
-      color: '#FFF',
       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...');
+    (async () => {
-    axios
-      .get('/data/' + id)
-      .then((response) => {
-//        console.log('data fetched...', response.data);
-        setData(response.data);
-      })
-      .catch((error) => {
-        console.error('error fetching data...', error);
-      });
 
-    axios
+      await new Promise((resolve) => setTimeout(resolve, 250));
-      .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);
-      });
-  }, []);
 
+      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">
+    <Page title="Service Monitoring">
-      <Container maxWidth={themeStretch ? false : 'xl'}>
+      <Grid container spacing={3} paddingX={2} sx={{ marginBottom: 5, marginTop: 1 }} >
-        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+          <Grid item xs={12} paddingX="24px" >
-          <IconButton
+            <Stack direction="row" alignItems="center">
-            onClick={() => navigate('/alarm-center')}
+              <ArrowBackIosIcon
-            sx={{ marginRight: '10px', color: '#424242' }}
+                onClick={() => navigate(`/alarm-center/member/${data.member_id}}`)}
-          >
+                sx={{ cursor: 'pointer' }}
-            <Iconify icon="heroicons-outline:arrow-narrow-left" />
+              />
-          </IconButton>
+              <Typography variant="h5" sx={{ flexGrow: 1 }}>
-          <Typography variant="h5">Service Monitoring</Typography>
+                Service Monitoring
-          <Stack
+              </Typography>
-            direction="row"
+            </Stack>
-            alignItems="center"
+          </Grid>
-            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 }}>
           {/* 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 variant='h5'>Employee Profiles</Typography>
-                  <Typography>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="inherit">Full Name</Typography>
-                      <Typography variant="body2">{corporate?.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="inherit">Date of Birth</Typography>
-                      <Typography variant="body2">{data?.name || 'Loading...'}</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="inherit">Phone Number</Typography>
-                      <Typography variant="body2">
+                      <Typography variant="h6">{data?.phone}</Typography>
-                        {data?.birth_date ? fDate(data?.birth_date) : ''}
-                      </Typography>
                     </Stack>
+                  </Grid>
+                  <Grid  item xs={6} lg={6} md={6}>
                     <Stack>
-                      <Typography variant="caption">Email</Typography>
+                      <Typography variant="inherit">Email</Typography>
-                      <Typography variant="body2">{data?.email}</Typography>
+                      <Typography variant="h6">{data?.email || 'Loading...'}</Typography>
                     </Stack>
-                    <Stack>
+                  </Grid>
-                      <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>
                 </Stack>
               </Stack>
             </Card>
           </Grid>
           {/* Item 2 */}
-          <Grid item xs={4} lg={4} md={6}>
+          <Grid item xs={6} lg={6} md={6}>
-            <Card sx={{ borderRadius: '6px', height: '100%' }}>
+            <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
+                  <Typography variant='h5'>Diagnose Summary</Typography>
-                    icon="heroicons-solid:clipboard-list"
-                    width={22}
-                    height={18}
-                    sx={{ marginRight: '10px' }}
-                  />
-                  <Typography>Diagnose Summary</Typography>
                 </Stack>
-                <Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
+                <Stack spacing={3} sx={{ paddingY: 2, paddingX: 2 }}>
-                  <Stack>
+                  <Grid  item xs={12} lg={12} md={12}>
-                    <Typography variant="caption">Gejala</Typography>
+                    <Stack spacing={1}>
-                    <Typography variant="body2">Nyeri dada</Typography>
+                      <Typography variant="inherit">Symptoms</Typography>
-                  </Stack>
+                      <Typography variant="h6">{data?.symptoms}</Typography>
-                  <Stack>
+                    </Stack>
-                    <Typography variant="caption">Tanda</Typography>
+                  </Grid>
-                    <Typography variant="body2">Sesak Napas</Typography>
+                  <Grid  item xs={12} lg={12} md={12}>
-                  </Stack>
+                    <Stack  spacing={1}>
-                  <Stack>
+                      <Typography variant="inherit">Sign</Typography>
-                    <Typography variant="caption">Main Diagnose</Typography>
+                      <Typography variant="h6">{data?.sign || 'Loading...'}</Typography>
-                    <Typography variant="body2">
+                    </Stack>
-                      J46 Status asthmaticus, Acute severe asthma
+                  </Grid>
-                    </Typography>
+                  <Grid  item xs={12} lg={12} md={12}>
-                  </Stack>
+                    <Stack spacing={1}>
-                  <Stack>
+                      <Typography variant="inherit">Main Diagnosis</Typography>
-                    <Typography variant="caption">Diagnosis pembanding</Typography>
+                      <Stack direction={'row'}>
-                    <Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
+                        <Typography variant="h6">{data?.main_diagnose}</Typography>
-                  </Stack>
+                        <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}>
+          <Grid item xs={6} lg={6} md={6}>
-            <Card sx={{ borderRadius: '6px', height: '100%' }}>
+            <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
+                  <Typography variant='h5'>Services</Typography>
-                    icon="iconoir:healthcare"
-                    width={22}
-                    height={18}
-                    sx={{ marginRight: '10px' }}
-                  />
-                  <Typography>Services</Typography>
                 </Stack>
-                <Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
+                <Stack spacing={3} sx={{ paddingY: 2, paddingX: 2 }}>
-                  <Stack spacing={2}>
+                  <Grid  item xs={12} lg={12} md={12}>
-                    <Stack>
+                    <Stack spacing={1}>
-                      <Typography variant="caption">Evakuasi medis</Typography>
+                      <Typography variant="inherit">Medical Evacuation</Typography>
-                      <Typography variant="body2">Land Transportation</Typography>
+                      <Typography variant="h6">{data?.medical_evacuation}</Typography>
                     </Stack>
-                    <Stack>
+                  </Grid>
-                      <Typography variant="caption">Rumah sakit</Typography>
+                  <Grid  item xs={12} lg={12} md={12}>
-                      <Typography variant="body2">Primaya Hospital</Typography>
+                    <Stack  spacing={1}>
+                      <Typography variant="inherit">Benefit Name</Typography>
+                      <Typography variant="h6">{data?.benefit_name || 'Loading...'}</Typography>
                     </Stack>
-                    <Stack direction="row" spacing={16}>
+                  </Grid>
-                      <Stack>
+                  <Grid  item xs={12} lg={12} md={12}>
-                        <Typography variant="caption">Tanggal mulai</Typography>
+                    <Stack  spacing={1}>
-                        <Typography variant="body2">17 Aug 2022</Typography>
+                      <Typography variant="inherit">Hospital</Typography>
-                      </Stack>
+                      <Typography variant="h6">{data?.hospital}</Typography>
-                      <Stack>
-                        <Typography variant="caption">Selesai</Typography>
-                        <Typography variant="body2">18 Aug 2022</Typography>
-                      </Stack>
                     </Stack>
-                    <Stack>
+                  </Grid>
-                      <Typography variant="caption">Daftar layanan</Typography>
+                  <Grid  item xs={12} lg={12} md={12}>
-                      <Typography variant="body2">
+                    <Stack  spacing={1}>
-                        Inpatient, Medivac (Medical Evacuation)
+                      <Typography variant="inherit">Admission Date</Typography>
-                      </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>
+          <Grid item xs={12} lg={12} md={12}>
-            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <Card sx={{ borderRadius: '6px' }}>
-              <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                <Box sx={{ margin:5, borderBottom: 1, borderColor: 'divider' }}>
-                <StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
+                  <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
-                <StyledTab
+                    <StyledTab label="Daily Monitoring" {...a11yProps(0)} />
-                  icon={<Iconify icon="heroicons-solid:beaker" />}
+                    <StyledTab
-                  label="Laboratorium Result"
+                      label="Laboratorium Result"
-                  {...a11yProps(1)}
+                      {...a11yProps(1)}
-                />
+                    />
-              </StyledTabs>
+                  </StyledTabs>
-            </Box>
+                </Box>
-            <TabPanel value={value} index={0}>
+                <TabPanel value={value} index={0}>
-              Item One
+                  <Grid container>
-            </TabPanel>
+                    <Grid item xs={12} md={12}>
-            <TabPanel value={value} index={1}>
+                      <Timeline  sx={{
-              Item Two
+                        [`& .${timelineItemClasses.root}:before`]: {
-            </TabPanel>
+                          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>
   );
 }

frontend/client-portal/src/routes/index.tsx

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

frontend/client-portal/src/utils/formatTime.ts

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