Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging

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

@@ -69,13 +69,14 @@ class CorporateMemberController extends Controller
     public function activation(Request $request, $member_id)
     {
         $request->validate([
-            'active' => 'required'
+            'active' => 'required',
+            'reason' => 'required',
         ]);
 
         // abort(404);
 
         $member = Member::findOrFail($member_id);
-        $member->active = $request->active == '1';
+        $member->active = $request->active;
         $member->reason = $request->reason;
 
         if ($member->save()) {

Modules/Internal/Http/Controllers/Api/HospitalController.php

@@ -0,0 +1,153 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api;
+
+use App\Models\CorporateHospital;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Validation\Rule;
+use Illuminate\Support\Facades\DB;
+
+class HospitalController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index(Request $request, $corporate_id)
+    {
+        $datas = CorporateHospital::query()
+            ->filter($request->all())
+            ->where('corporate_id', $corporate_id)
+            ->orderBy('id', 'DESC')
+            ->paginate(0)
+            ->appends($request->all());
+
+        return $datas;
+    }
+
+    public function activation(Request $request, $hospital_id)
+    {
+        $request->validate([
+            'active' => 'required',
+            'reason' => 'required',
+        ]);
+
+        // abort(404);
+
+        $hostpital = CorporateHospital::findOrFail($hospital_id);
+        $hostpital->active = $request->active;
+        $hostpital->reason = $request->reason;
+
+        if ($hostpital->save()) {
+            return response()->json([
+                'hostpital' => $hostpital,
+                'message' => 'Status Updated Successfully'
+            ]);
+        }
+    }
+
+    public function dataHospital(Request $request, $corporate_id)
+    {
+        $data = DB::table('organizations')
+        ->where('type', 'hospital')
+        ->where('status', 'active')
+        ->orderBy('id', 'desc')
+        ->get();
+        return $data;
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('internal::create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Renderable
+     */
+    public function store(Request $request, $corporate_id)
+    {
+        $request->validate([
+            'corporate_id' => 'required',
+            'code' => 'required',
+            'name' => 'required',
+            'organization_id' => 'required',
+        ]);
+
+        $newCorporateHospital = CorporateHospital::create([
+            'corporate_id' => $corporate_id,
+            'code' => $request->code,
+            'name' => $request->name,
+            'organization_id' => $request->organization_id,
+            'description' => $request->description ? $request->description : null,
+        ]);
+
+        return $newCorporateHospital;
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function show($id)
+    {
+        return view('internal::show');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function edit($corporate_id, $id)
+    {
+        $corporatePlan = CorporateDivision::findOrFail($id);
+
+        return $corporatePlan;
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Renderable
+     */
+    public function update(Request $request, $corporate_id, $id)
+    {
+        $corporatePlan = CorporateHospital::findOrFail($id);
+        $request->validate([
+            'corporate_id' => 'required',
+            'code' => 'required',
+            'name' => 'required',
+            'organization_id' => 'required',
+        ]);
+
+        $corporatePlan->fill([
+            'corporate_id' => $corporate_id,
+            'code' => $request->code,
+            'name' => $request->name,
+            'organization_id' => $request->organization_id,
+            'description' => $request->description ? $request->description : null,
+        ])->save();
+
+        return $corporatePlan;
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}

Modules/Internal/Routes/api.php

@@ -19,6 +19,7 @@ use Modules\Internal\Http\Controllers\Api\DiagnosisTemplateController;
 use Modules\Internal\Http\Controllers\Api\DiagnosisExclusionController;
 use Modules\Internal\Http\Controllers\Api\DistrictController;
 use Modules\Internal\Http\Controllers\Api\DivisionController;
+use Modules\Internal\Http\Controllers\Api\HospitalController;
 use Modules\Internal\Http\Controllers\Api\DoctorController;
 use Modules\Internal\Http\Controllers\Api\DoctorRatingController;
 use Modules\Internal\Http\Controllers\Api\DrugController;
@@ -99,6 +100,12 @@ Route::prefix('internal')->group(function () {
         Route::get('corporates/{corporate_id}/divisions/{id}/edit', [DivisionController::class, 'edit']);
         Route::put('corporates/{corporate_id}/divisions/{id}', [DivisionController::class, 'update']);
 
+        Route::get('corporates/{corporate_id}/hospitals', [HospitalController::class, 'index']);
+        Route::put('hospitals/{hospital_id}/activation', [HospitalController::class, 'activation']);
+        Route::get('corporates/{corporate_id}/hospitals/data', [HospitalController::class, 'dataHospital']);
+        Route::post('corporates/{corporate_id}/hospitals/save', [HospitalController::class, 'store']);
+        Route::put('corporates/{corporate_id}/hospitals/{id}/edit', [HospitalController::class, 'update']);
+
         Route::get('corporates/{corporate_id}/members', [CorporateMemberController::class, 'index']);
         Route::get('corporates/{corporate_id}/members/list', [CorporateMemberController::class, 'generateMemberList']);
         Route::post('corporates/{corporate_id}/members/import', [CorporateMemberController::class, 'import']);

app/Models/CorporateHospital.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\Blameable;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class CorporateHospital extends Model
+{
+    use HasFactory, SoftDeletes, Blameable;
+
+    protected $fillable = [
+        'corporate_id',
+        'organization_id',
+        'code',
+        'name',
+        'description',
+        'active',
+    ];
+
+    public function corporate()
+    {
+        return $this->belongsTo(Corporate::class);
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? false, function ($query, $search) {
+            return $query
+                    ->where('code', 'like', "%" . $search . "%")
+                    ->orWhere('name', 'like', "%" . $search . "%");
+        });
+    }
+}

database/migrations/2023_10_19_132434_create_corporate_hospitals.php

@@ -0,0 +1,42 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('corporate_hospitals', function (Blueprint $table) {
+            $table->id();
+            $table->bigInteger('corporate_id');
+            $table->bigInteger('organization_id');
+            $table->string('code', 255);
+            $table->string('name', 255);
+            $table->text('description')->nullable();
+            $table->tinyInteger('active')->default(1);
+            $table->text('reason');
+            $table->timestamps();
+            $table->softDeletes();
+            $table->bigInteger('created_by')->nullable();
+            $table->bigInteger('updated_by')->nullable();
+            $table->bigInteger('deleted_by')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('corporate_hospitals');
+    }
+};

frontend/dashboard/src/@types/corporates.ts

@@ -25,6 +25,13 @@ export type Division = {
   name?: string;
 }
 
+export type Hospital = {
+  id: number;
+  corporate_id: number;
+  code: string;
+  name?: string;
+}
+
 export type Employee = {
   id: number;
   name: string;

frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx

@@ -26,9 +26,6 @@ function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderPr
   const [corporate, setCorporate] = useState(null);
 
   useEffect(() => {
-    // Load Corporate
-    console.log('calling corporate' + corporate_id);
-    
     axios.get(`corporates/${corporate_id}`)
     .then((res) => {
       setCorporate(res.data)

frontend/dashboard/src/pages/Corporates/Hospital/CreateUpdate.tsx

@@ -1,64 +1,63 @@
-
 import { useNavigate, useParams } from "react-router-dom";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import Page from "../../../components/Page";
 import useSettings from "../../../hooks/useSettings";
-import { useEffect, useMemo, useState } from 'react';
-import axios from '../../../utils/axios';
-import { useSnackbar } from 'notistack';
-import CorporatePlanForm from './Form';
-import { CorporatePlan } from '../../../@types/corporates';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import CorporateHospitalForm from './Form';
+import { Hospital } from '../../../@types/corporates';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { Stack, Typography } from '@mui/material';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 
 
 
-export default function PlanCreate() {
-  const { themeStretch } = useSettings();
+export default function HospitalCreate() {
   const { corporate_id, id } = useParams();
-  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
   const navigate = useNavigate();
 
+  const [corporate, setCorporate] = useState<Corporate|null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
   const isEdit = !!id;
 
   useEffect(() => {
-    if (isEdit) {
-      axios.get('/corporates/'+corporate_id+'/divisions/'+id+'/edit')
-        .then((res) => {
-          setCurrentCorporatePlan(res.data);
-        })
-        .catch((err) => {
-          if (err.response.status === 404) {
-            navigate('/404');
-          }
-        })
-    }
-  }, [corporate_id, id]);
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [corporate_id, id, configuredCorporateContext]);
 
 
   return (
-    <Page title="Create Corporate Division">
-      <HeaderBreadcrumbs
-        heading={'Create Corporate Division'}
-        links={[
-          {
-            name: 'Corporates',
-            href: '/corporates',
-          },
-          {
-            name: 'Corporate Name',
-            href: '/corporates/'+corporate_id,
-          },
-          {
-            name: 'Division',
-            href: '/corporates/'+corporate_id+'/divisions',
-          },
-          {
-            name: !isEdit ? 'Create' : 'Edit',
-            href: '/corporates/'+corporate_id+'/divisions/'+id,
-          },
-        ]}
-      />
-
-      <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
+    <Page title="Create Hospital">
+      {isEdit ? (
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
+          <ArrowBackIosIcon sx={{cursor:'pointer'}} onClick={() => navigate(-1)}/>
+          <Typography variant="h5" sx={{marginLeft:2}}>Edit Hospital</Typography>
+        </Stack>
+      ) : (
+        <HeaderBreadcrumbs
+          heading={'Create Hospital'}
+          links={[
+            {
+              name: 'Corporates',
+              href: '/corporates',
+            },
+            {
+              name: corporate?.name ?? '-',
+              href: '/corporates/'+corporate_id,
+            },
+            {
+              name: 'Hospital',
+              href: '/corporates/'+corporate_id+'/hospitals',
+            },
+            {
+              name: !isEdit ? 'Create' : 'Edit',
+              href: '/corporates/'+corporate_id+'/hospitals/create',
+            },
+          ]}
+        />
+      )}
+      <CorporateHospitalForm isEdit={isEdit} />
     </Page>
   );
 }

frontend/dashboard/src/pages/Corporates/Hospital/Form.tsx

@@ -1,129 +1,161 @@
-import * as Yup from 'yup';
-import { LoadingButton } from "@mui/lab";
-import { Card, Grid, Stack, Typography } from "@mui/material";
-import { CorporatePlan } from "../../../@types/corporates";
-import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form";
-import { useEffect, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, Card, Grid, Stack, Typography, FormControl, InputLabel, Select, FormHelperText, MenuItem } from "@mui/material";
+import { useEffect, useMemo, useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from '../../../utils/axios';
 
 type Props = {
   isEdit: boolean;
-  currentCorporatePlan?: CorporatePlan;
 };
 
-export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
+export default function CorporateHospitalForm({ isEdit }: Props) {
 
   const { enqueueSnackbar } = useSnackbar();
   const navigate = useNavigate();
-  const { corporate_id } = useParams();
-
-  const NewCorporatePlanSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
-    code: Yup.string().required('Corporate Code is required'),
-  });
-
-  const defaultValues = useMemo(
-    () => ({
-      name: currentCorporatePlan?.name || '',
-      code: currentCorporatePlan?.code || '',
-      active: currentCorporatePlan?.active === 1 ? true : false,
-    }),
-    [currentCorporatePlan]
-  );
+  const { corporate_id, id, organization_id } = useParams();
+  const [dataHospital, setDataHospital] = useState(null);
+  const [addData, setAddData] = useState(null);
+  let idHospital = organization_id && isEdit ? organization_id : 0;
+  const [indexData, setIndexData] = useState(idHospital);
+  const [updateData, setUpdateData] = useState(null);
 
   useEffect(() => {
-    if (isEdit && currentCorporatePlan) {
-      reset(defaultValues);
+    axios.get('/corporates/' + corporate_id + '/hospitals/data')
+    .then((res) => {
+      setDataHospital(res.data);
+    })
+    
+  }, [isEdit]);
+  
+  const handlePageChange = (index:any) => {
+    setIndexData(index);
+    const data = {
+      corporate_id : corporate_id ? corporate_id : null,
+      organization_id : dataHospital ? dataHospital[index].id : null,
+      code : dataHospital ? dataHospital[index].code : null,
+      name : dataHospital ? dataHospital[index].name : null,
     }
-    if (!isEdit) {
-      reset(defaultValues);
+    setAddData(data);
+  }
+  const handleSaveData = () => {
+    //Save data
+    axios
+    .post('/corporates/'+corporate_id+'/hospitals/save', addData)
+    .then((response) => {
+      if(response.data)
+      {
+        enqueueSnackbar('Data saved successfully', { variant: 'success' });
+      }
+    })
+    .catch((error) => {
+      enqueueSnackbar('Failed to add data', { variant: 'error' });
+    });
+  }  
+  
+  const handlePageChangeUpdate = (id: any) => {
+    setIndexData(id);
+    const foundData = dataHospital?.find(item => item.id === id);
+    const dataUpdate = {
+      corporate_id : corporate_id ? corporate_id : null,
+      organization_id : dataHospital ? foundData.id : null,
+      code : dataHospital ? foundData.code : null,
+      name : dataHospital ? foundData.name : null,
     }
-  }, [isEdit, currentCorporatePlan]);
+    setUpdateData(dataUpdate);
+  }
 
-  const methods = useForm({
-    resolver: yupResolver(NewCorporatePlanSchema),
-    defaultValues,
-  });
-
-  const {
-    reset,
-    watch,
-    control,
-    setValue,
-    getValues,
-    setError,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-
-  const onSubmit = async (data: any) => {
-    if (!isEdit) {
-      await axios
-      .post('/corporate/' + corporate_id + '/divisions', data)
-      .then((res) => {
-        enqueueSnackbar('Division created successfully', { variant: 'success' });
-      })
-      .then((res) => {
-        navigate('/corporate/' + corporate_id + '/divisions',  { replace: true });
-      })
-      .catch(({ response }) => {
-        if (response.status === 422) {
-          for (const [key, value] of Object.entries(response.data.errors)) { 
-            setError(key, { message: value[0] });
-            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
-          }
-        }
-        else {
-          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+  const handleUpdateData = () => {
+    //Update data
+    if(updateData)
+    {
+      axios
+      .put('/corporates/'+corporate_id+'/hospitals/'+id+'/edit', updateData)
+      .then((response) => {
+        if(response.data)
+        {
+          enqueueSnackbar('Data updated successfully', { variant: 'success' });
+          navigate(-1);
+          window.history.replaceState(null, '', '/corporates/'+corporate_id+'/hospitals');
         }
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to update data', { variant: 'error' });
       });
-    } else {
-      await axios
-        .put('/corporate/' + corporate_id + '/divisions/' + currentCorporatePlan?.id , data)
-        .then((res) => {
-          enqueueSnackbar('Division updated successfully', { variant: 'success' });
-        })
-        .then((res) => {
-          navigate('/corporate/' + corporate_id + '/divisions/' ,  { replace: true });
-        })
-        .catch(({ response }) => {
-          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
-        });
     }
-  };
+    else
+    {
+      enqueueSnackbar('Data has not changed.', { variant: 'error' });
+    }
+    
+  } 
 
   return (
-    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-        <Grid container spacing={2}>
-          <Grid item xs={8}>
-            <Card sx={{ p: 2 }}>
-                <Stack spacing={3}>
+    <Stack>
+      <Card sx={{ p: 2 }}>
+        <Stack spacing={2} direction='column'>
+          <Typography variant='subtitle1'>Hospital *</Typography>
+          {dataHospital && dataHospital.length > 0 ? (
+            isEdit ? (
+              <FormControl>
+                <InputLabel htmlFor="id_hospital" required>
+                  Hospital
+                </InputLabel>
+                <Select
+                  id="id_hospital"
+                  value={dataHospital && dataHospital.length > 0 ? indexData : ''}
+                  fullWidth
+                  label="Hospital"
+                  onChange={(e) => {
+                    handlePageChangeUpdate(e.target.value);
+                  }}
+                  
+                >
+                  {dataHospital?.map((data, index) => (
+                    <MenuItem key={index} value={data.id}>{data.name}</MenuItem>
+                  ))}
+                </Select>
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+              </FormControl>
+            ) : (
+              <FormControl>
+                <InputLabel htmlFor="id_hospital" required>
+                  Hospital
+                </InputLabel>
+                <Select
+                  id="id_hospital"
+                  value={dataHospital && dataHospital.length > 0 ? indexData : ''}
+                  fullWidth
+                  label="Hospital"
+                  onChange={(e) => {
+                    handlePageChange(e.target.value);
+                  }}
+                  
+                >
+                  {dataHospital?.map((data, index) => (
+                    <MenuItem key={index} value={index}>{data.name}</MenuItem>
+                  ))}
+                </Select>
+                <FormHelperText style={{ color: 'red' }}></FormHelperText>
+              </FormControl>
+            )
+          ) : (
+            <Typography variant='body2' style={{ position: 'relative', margin: 'auto', width: 'fit-content' }}>
+              Loading
+            </Typography>
 
-                  <Typography variant="h6">Division Detail</Typography>
-
-                  <RHFTextField name="name" label="Name" />
-
-                  <RHFTextField name="code" label="Code" />
-
-                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
-                    { isEdit? 'Update' : 'Create' } 
-                  </LoadingButton>
-
-                </Stack>
-            </Card>
-          </Grid>
-          <Grid item xs={4}>
-            <Card sx={{ p:2 }}>
-
-            <RHFSwitch name="active" label="Active" />
-              </Card>
-          </Grid>
-        </Grid>
-      </FormProvider>
+          )}
+          
+          <Stack direction='row' spacing={2} justifyContent='flex-end'>
+            <Button variant="outlined" sx={{color: '#212B36'}} onClick={() => navigate(-1)}>Cancel</Button>
+            {isEdit ? (
+              <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" onClick={() => handleUpdateData()}>Save</Button>
+            ):(
+              <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" onClick={() => handleSaveData()}>Save</Button>
+            )}
+            
+          </Stack>
+        </Stack>
+    </Card>
+    </Stack>
   );
 }

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

@@ -1,32 +1,33 @@
-import { Card, Grid, Typography } from '@mui/material';
-import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from '../../../components/Page';
-import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from './List';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { Card } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import List from "./List";
 
-import { useContext, useEffect, useState } from 'react';
-import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
-import { Corporate } from '@/@types/corporates';
 
-export default function Divisions() {
-  const { themeStretch } = useSettings();
+
+export default function hospitals() {
 
   const { corporate_id } = useParams();
-
-  const [corporate, setCorporate] = useState<Corporate | null>();
+  
+  const [corporate, setCorporate] = useState<Corporate|null>();
 
   const configuredCorporateContext = useContext(ConfiguredCorporateContext);
 
   useEffect(() => {
     setCorporate(configuredCorporateContext.currentCorporate);
-  }, [configuredCorporateContext]);
+  }, [configuredCorporateContext])
 
   return (
-    <Page title="Hospitals">
+    <Page title="Hospital">
+
       <HeaderBreadcrumbs
-        heading={'Hospitals'}
+        heading={'Hospital'}
         links={[
           {
             name: 'Corporates',
@@ -37,7 +38,7 @@ export default function Divisions() {
             href: '/corporates/' + corporate_id,
           },
           {
-            name: 'Hospitals',
+            name: 'Hospital',
             href: '/corporates/' + corporate_id + '/hospitals',
           },
         ]}
@@ -45,7 +46,7 @@ export default function Divisions() {
 
       <Card>
         <CorporateTabNavigations position={'hospitals'} />
-        <Typography sx={{ m: 4 }}>Feature Not Implemented Yet</Typography>
+        <List />
       </Card>
     </Page>
   );

frontend/dashboard/src/pages/Corporates/Hospital/List.tsx

@@ -1,124 +1,158 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import {
+  Button,
+  Card,
+  IconButton,
+  MenuItem,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  Collapse,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+  FormHelperText,
+} from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
-import useSettings from '../../../hooks/useSettings';
-import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { CorporatePlan } from '../../../@types/corporates';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import BasePagination from '../../../components/BasePagination';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import HistoryIcon from '@mui/icons-material/History';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { enqueueSnackbar } from 'notistack';
+import Label from '../../../components/Label';
 
 export default function PlanList() {
-  const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  
+
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  {
-      // console.log('Search Input: useEffect')
+    useEffect(() => {
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
       </form>
     );
   }
 
   // Called on every row to map the data to the columns
-  function createData( plan: CorporatePlan ): CorporatePlan {
+  function createData(plan: CorporatePlan): CorporatePlan {
     return {
       ...plan,
-    }
+    };
   }
 
   // Generate the every row of the table
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
+    const style1 = {
+      color: '#637381'
+    }
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
+        <TableRow>
+          <TableCell align="center">{row.code ? row.code : '-'}</TableCell>
+          <TableCell align="left">{row.name ? row.name : '-'}</TableCell>
+          <TableCell align="center">
+            {row.active === 1 ? (
+              <Label color='success' >
+                Active
+              </Label>
+            ) : ( 
+              <Label color='error'>
+                Inactive
+              </Label>
+            )}
+            </TableCell>
+          <TableCell align="center">
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => setOpen(!open)}>
+                  <FindInPageOutlinedIcon />
+                  Details
+                </MenuItem>
+                <MenuItem onClick={() => handleEditData(row)}>
+                  <EditOutlinedIcon />
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={() => handleEditDataStatus(row)}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </MenuItem>
+                <MenuItem onClick={() => navigate ('')}>
+                  <HistoryIcon />
+                  History
+                </MenuItem>
+              </>
+              }
+            />
           </TableCell>
-          <TableCell align="left">{row.id}</TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.description}</TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
+        <TableRow sx={{display: open ? '' : 'none',}}>
+          <TableCell colSpan={4 }>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Typography variant="body2" gutterBottom component="div">
-                  No Extra Data
-                </Typography>
-              </Box>
-            {false && <Box sx={{ margin: 1 }}>
-                <Typography variant="h6" gutterBottom component="div">
-                  Rules
-                </Typography>
-                <Table size="small" aria-label="purchases">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Date</TableCell>
-                      <TableCell>Customer</TableCell>
-                      <TableCell align="right">Amount</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {/* {row.history ? row.history.map((historyRow) => ( */}
-                      <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
-                        <TableCell>{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                      </TableRow>
-                    {/* ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    } */}
-                  </TableBody>
-                </Table>
-              </Box>}
+              <Card sx={{padding:2}}>
+                <Box sx={{ pb: 2 }}>
+                  <Typography variant='subtitle1'>Detail</Typography>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '50%'}}>Code:</Typography>
+                      <Typography variant='body2' sx={{width: '50%'}}>{row.code ? row.code : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '50%'}}>Hospital Name:</Typography>
+                      <Typography variant='body2' sx={{width: '50%'}}>{row.name ? row.name : '-'}</Typography>
+                    </Stack>
+                  </Stack>
+                </Box>
+              </Card>
             </Collapse>
           </TableCell>
         </TableRow>
@@ -131,104 +165,230 @@ export default function PlanList() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
-    first_page_url: "",
+    path: '',
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+corporate_id+'/divisions', { params: filter });
-    // console.log(response.data);
+    // Get Data Hospitals
+    const response = await axios.get('/corporates/' + corporate_id + '/hospitals', {
+      params: filter,
+    });
     setDataTableLoading(false);
-
     setDataTableData(response.data);
-  }
-
-  const headStyle = {
-    fontWeight: 'bold',
   };
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
-    setSearchParams({ "search" : searchFilter });
-  }
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
-
+  };
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
+
+  //validation dialog
+  const [nameField, setNameField] = useState('');
+  const [codeField, setCodeField] = useState('');
+  // ID for edit data
+  const [idField, setIdField] = useState('');
+
+  const handleAddData = () => {
+    navigate('/corporates/'+corporate_id+'/hospitals/create');
+  }
+  //Edit data
+  const handleEditData = (data : any) => {
+    navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);  
+  }
+  // End dialog for hospitals
+
+  // Dialog for update status hospitals
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
+  const [activeField, setActiveField] = useState(0);
+  const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
+
+  const handleCloseDialogUpdate = () => {
+    setOpenDialogStatus(false);
+    setNameField('');
+    setCodeField('');
+    setIdField('');
+    setActiveField(activeField);
+  }
+
+  const handleSaveUpdateData = () => {
+    let activeValue = 0;
+    if(activeField === 1)
+    {
+      activeValue = 0;
+    }
+    else
+    {
+      activeValue = 1;
+    }
+    const updateData = {
+      reason: reasonUpdate,
+      active : activeValue,
+      id: idField,
+    };
+    axios
+      .put('/hospitals/'+idField+'/activation', updateData)
+      .then((response) => {
+        enqueueSnackbar('Data updated successfully', { variant: 'success' });
+        loadDataTableData();
+        handleCloseDialogUpdate();
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+  }
+
+  const handleEditDataStatus = (data: any) => {
+    setIdField(data.id);
+    setNameField(data.name);
+    setCodeField(data.code);
+    setActiveField(data.active);
+    setOpenDialogStatus(true);    
+  }
+  // End dialog for update status devisions
+
   
+
   return (
     <Stack>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-          <SearchInput onSearch={applyFilter}/>
-          <Link to={`/corporates/${corporate_id}/divisions/create`}>
-            <Button
-              component="button"
-              id="upload-button"
-              variant='outlined'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
-            >
-              Create
-            </Button>
-          </Link>
-        </Stack>
-
-        <Card>
+      <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+        <SearchInput onSearch={applyFilter} />
+        <Button
+          component="button"
+          id="upload-button"
+          startIcon={<AddIcon />}
+          sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
+          onClick={handleAddData}
+        >
+          Create
+        </Button>
+      </Stack>
+      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            {/* Table Head */}
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
-                <TableCell style={headStyle} align="left">ID</TableCell>
-                <TableCell style={headStyle} align="left">Code</TableCell>
-                <TableCell style={headStyle} align="left">Name</TableCell>
-                <TableCell style={headStyle} align="left">Description</TableCell>
+                <TableCell sx={{width: '20%'}} align="center">
+                  <Typography variant='subtitle2'>Code</Typography>
+                </TableCell>
+                <TableCell sx={{width: '50%'}} align="left">
+                  <Typography variant='subtitle2'>Hospital</Typography>
+                </TableCell>
+                <TableCell sx={{width: '20%'}} align="center">
+                  <Typography variant='subtitle2'>Status</Typography>
+                </TableCell>
+                <TableCell sx={{width: '10%'}} align="center">
+                </TableCell>
               </TableRow>
-            </TableBody>
-            {dataTableIsLoading ?
-              (
-                <TableBody>
-                  <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
-                  </TableRow>
-                </TableBody>
-              ) : (
-                dataTableData.data.length == 0 ? 
-                (
-                  <TableBody>
-                    <TableRow>
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
-                    </TableRow>
-                  </TableBody>
-                ) : (
-                  <TableBody>
-                    {dataTableData.data.map(row => (
-                      <Row key={row.code} row={row} />
-                    ))}
-                  </TableBody>
-                )
+            </TableHead>
+            {/* Condition Table Body */}
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={4} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length == 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={4} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
             )}
           </Table>
         </TableContainer>
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
+        {/* Paginations */}
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+      {/* Dialog Update Status */}
+      <Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} fullWidth={true}>
+        <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+          <Stack direction="row" alignItems="center" justifyContent="space-between">
+              <Stack direction="row" alignItems='center' spacing={1}>
+                <Typography variant="h6">Update Status</Typography>
+              </Stack>
+              <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                <CloseIcon />
+              </IconButton>
+          </Stack>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this hospital ?</Typography>
+            <Card sx={{padding:2}}  >
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
+              </Stack>
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Hospital Name</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
+              </Stack>
+            </Card>
+          </Stack>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='subtitle1'>Reason for update*</Typography>
+            <FormControl>
+              <InputLabel htmlFor="reason" required>
+                Reason for update
+              </InputLabel>
+              <Select
+                id="reason"
+                value={reasonUpdate}
+                fullWidth
+                label="Reason for update"
+                onChange={(e) => {
+                  setReasonUpdate(e.target.value);
+                }}
+                
+              >
+                <MenuItem value="Agreement changed">Agreement changed</MenuItem>
+                <MenuItem value="Endorsement">Endorsement</MenuItem>
+                <MenuItem value="Renewal">Renewal</MenuItem>
+                <MenuItem value="Worng Setting">Worng Setting</MenuItem>
+              </Select>
+              <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </FormControl>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+          <Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
+        </DialogActions>
+      </Dialog>
+
     </Stack>
   );
-}
+}

frontend/dashboard/src/pages/Corporates/Member/List.tsx

@@ -29,6 +29,9 @@ import {
   Grid,
   Tooltip,
   Divider,
+  ButtonBase,
+  FormControl,
+  FormHelperText,
 } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -40,7 +43,7 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import {Link, useParams, useSearchParams } from 'react-router-dom';
+import {Link, useParams, useNavigate, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { Plan } from '../../../@types/corporates';
@@ -52,8 +55,15 @@ import { LoadingButton } from '@mui/lab';
 import DialogLog from './sections/DialogLog';
 import HistoryIcon from '@mui/icons-material/History';
 import { makeFormData } from '@/utils/jsonToFormData';
+import DownloadIcon from '@mui/icons-material/Download';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 
 export default function CorporatePlanList({handleSubmitSuccess}) {
+  const navigate = useNavigate();
   // Files MCU
   const fileMcuInput = useRef<HTMLInputElement>(null);
   const [fileMcus, setFileMcus] = useState([]);
@@ -196,17 +206,17 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
             setTimeout(() => {
               loadDataTableData();
             }, 2000);
-            enqueueSnackbar(responseData.message ?? 'Berhasil tambah file MemberID '+member_id+', silahkan lihat dilaporan', { variant: 'success' });
+            enqueueSnackbar(responseData.message ?? 'Berhasil tambah file Member ID '+member_id+', silahkan lihat dilaporan', { variant: 'success' });
             handleSubmitSuccess();
           }
           
         })
         .catch(({ response }) => {
           const responseData = response?.data;
-         if(responseData)
-         {
-           enqueueSnackbar(responseData.message ?? 'Something Went Wrong', { variant: 'error' });
-         }
+          if(responseData)
+          {
+            enqueueSnackbar(responseData.message ?? 'Something Went Wrong', { variant: 'error' });
+          }
         })
         .then(() => {
           setSubmitLoading(false);
@@ -319,12 +329,10 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
         {!currentImportFileName && (
           <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
             <SearchInput onSearch={applyFilter} />
-            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
             <Button
               id="import-button"
-              variant="outlined"
-              startIcon={<AddIcon />}
-              sx={{ p: 1.8 }}
+              startIcon={<DownloadIcon />}
+              sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
               aria-controls={createMenu ? 'basic-menu' : undefined}
               aria-haspopup="true"
               aria-expanded={createMenu ? 'true' : undefined}
@@ -341,15 +349,19 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
                 'aria-labelledby': 'basic-button',
               }}
             >
-              <MenuItem onClick={handleImportButton}>Import</MenuItem>
+              <MenuItem onClick={handleImportButton}>
+                <Typography variant='body2'>Import</Typography>
+              </MenuItem>
               <MenuItem
                 onClick={() => {
                   handleGetTemplate('member');
                 }}
               >
-                Download Template
+                <Typography variant='body2'> Download Template</Typography>
+              </MenuItem>
+              <MenuItem onClick={handleMemberList}>
+                <Typography variant='body2'>Download Member</Typography>
               </MenuItem>
-              <MenuItem onClick={handleMemberList}>Download Member</MenuItem>
             </Menu>
           </Stack>
         )}
@@ -412,17 +424,12 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
   }
 
   const [columns, setColumns] = React.useState([
-    { id: 'member_id', label: 'MemberID', minWidth: 100, align: 'left' },
-    // { id: 'principal_id', label: 'Mapping ID', minWidth: 100, align: 'left' },
-    // { id: 'nik', label: 'NIK', minWidth: 100, align: 'left' },
-    // { id: 'current_policy.policy_number', label: 'Policy Number', minWidth: 100, align: 'left' },
-    { id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left' },
-    { id: 'name', label: 'Name', minWidth: 100, align: 'left' },
-    // { id: 'nric', label: 'NRIC', minWidth: 100, align: 'left' },
-    // { id: 'email', label: 'E-mail', minWidth: 100, align: 'left' },
-    { id: 'plan_id', label: 'PlanID', minWidth: 100, align: 'left' },
-    { id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left' },
-    { id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left' },
+    { id: 'member_id', label: 'Member ID', minWidth: 100, align: 'center', width: '10%' },
+    { id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'name', label: 'Name', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'plan_id', label: 'Plan ID', minWidth: 100, align: 'left', width: '10%' },
+    { id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '20%' },
   ]);
 
   // Generate the every row of the table
@@ -432,17 +439,9 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
     const [loadingLog, setLoadingLog] = React.useState(false);
     const [dialogLogOpen, setDialogLogOpen] = React.useState(false);
 
-    // useEffect(function () {
-    //   if (row.full_name == 'Pajri') {
-    //     setDialogLogOpen(true);
-    //     console.log('fuck');
-    //   }
-    // }, []);
-
     const handleActivate = (model: any, status: string) => {
       axios
         .put(`/members/${row.id}/activation`, {
-          // service_code: service.service_code,
           active: status == 'active',
         })
         .then((res) => {
@@ -458,284 +457,203 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
           });
         })
         .catch((error) => {
-          // console.log('asdasd', error.response.data.message)
           enqueueSnackbar(
             error.response.data.message ?? error.message ?? 'Failed Processing Request',
             { variant: 'error' }
           );
         });
     };
+
+    const style1 = {
+      color: '#637381'
+    }
     
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-
-          <TableCell align="left">{row.member_id}</TableCell>
-          <TableCell align="left">{row.members_effective_date}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.current_plan?.code}</TableCell>
-          <TableCell align="left">{row.activation_date}</TableCell>
-          <TableCell align="left">{row.terminated_date}</TableCell>
+        <TableRow key={row.id || index}>
           <TableCell align="center">
-            {row.active == 1 && (
-              <Button
-                variant="outlined"
-                color="success"
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'inactive');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
-                }}
-              >
-                Active
-              </Button>
-            )}
-            {row.active != 1 && (
-              <Button
-                variant="outlined"
-                color="error"
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'active');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
-                }}
-              >
-                Inactive
-              </Button>
-            )}
+            <Typography variant='body2'>{row.member_id ? row.member_id : '-'}</Typography>
           </TableCell>
-          <TableCell align="right">
-            <Tooltip title="History">
-              <Link to={`/corporate/${corporate_id}/members/${row.id}/history`}>
-                <HistoryIcon />
-              </Link>
-            </Tooltip>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.members_effective_date ? row.members_effective_date : '-'}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.name ? row.name : '-'}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.current_plan?.code}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.activation_date ? row.activation_date : '-'}</Typography>
+          </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>{row.terminated_date ? row.terminated_date : '-'}</Typography>
+          </TableCell>
+          <TableCell align='center'>
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => setOpen(!open)}>
+                  <FindInPageOutlinedIcon />
+                  Details
+                </MenuItem>
+                <MenuItem onClick={() => handleEditDataStatus(row)}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </MenuItem>
+                <MenuItem onClick={() => navigate ('')}>
+                  <HistoryIcon />
+                  History
+                </MenuItem>
+              </>
+              }
+            />
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell />
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
+        <TableRow sx={{display: open ? '' : 'none',}}>
+          <TableCell colSpan={8}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ pb: 2 }}>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>Detail</Typography>
-                <Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Mapping ID
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.principal_id ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Policy Number
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.current_policy?.code ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        NRIC
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.nric ?? '-'}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        NIK
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.employeds[0]?.nik ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Email
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.email ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Phone
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.person?.phone ?? '-'}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Birth Date
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.birth_date ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Gender
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.gender ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Marital Status
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.marital_status ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Language
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.language ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Race
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.race ?? '-'}
-                      </Grid>
-                      <Grid item xs={6}>
-                        Relationship
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.relation_with_principal ?? '-'}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>Claim History</Typography>
-                <Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Requested
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.requested}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Pending
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.received}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Approved
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.approved}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Declined
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.declined}
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Paid
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.total_claims?.paid}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>File History</Typography>
-                <Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
-                  <Grid item xs={12}>
-                    <Grid container>
-                      <Grid item xs={12}>
-                        {row.file_mcu_names
-                          ? row.file_mcu_names.split(',').map((fileName, index) => (
-                              <div key={index}>{fileName}</div>
-                            ))
-                          : '-'}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-
-                <Grid spacing={1}>
-                    <Stack sx={{ marginTop: 1}}>
-                      <LoadingButton
-                        id="upload-button"
-                        variant="outlined"
-                        startIcon={<InsertDriveFileIcon />}
-                        // sx={{ p: 1.8 }}
-                        // onClick={() => {handleDownloadLog(row)}}
-                        onClick={() => {
-                          setDialogLogOpen(true);
-                        }}
-                        loading={loadingLog}
-                      >
-                        Download LOG
-                      </LoadingButton>
+              <Card sx={{padding:2}}>
+                <Box sx={{ pb: 2 }}>
+                  <Typography variant='subtitle1'>Detail</Typography>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Mapping ID:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.principal_id ? row.principal_id : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Birth Date:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.birth_date ? row.birth_date : '-'}</Typography>
                     </Stack>
-                    {/* -------------------------------Upload Dokumen MCU------------------------------- */}
-                    <Stack sx={{ marginTop: 1}}>
-                      {/*<Stack
-                        divider={<Divider orientation="horizontal" flexItem />}
-                        spacing={1}
-                        sx={{ marginY: 2}}
-                      >
-                        {fileMcus &&
-                          fileMcus
-                          .filter((datas) => datas.id === row.id)
-                          .map((datas, index) => (
-                            <Stack direction="row" justifyContent={'space-between'} key={index}>
-                              <Typography sx={{ color: "text.secondary" }}>{datas.file.name}</Typography>
-                              <Iconify
-                                icon="eva:trash-2-outline"
-                                color={'darkred'}
-                                onClick={() => {
-                                  removeMcuFiles(datas.id, index);
-                                }}
-                                sx={{ cursor: 'pointer' }}
-                              ></Iconify>
-                            </Stack>
-                          ))}
-                      </Stack>*/}
-                      <input
-                        type="file"
-                        id={`file-${row.id}`}
-                        ref={fileMcuInput}
-                        style={{ display: 'none' }}
-                        onChange={(event) => {
-                          handleMcuInputChange(row.id, row.member_id)(event);
-                        }}
-                        accept="application/pdf"
-                      />
-                      <LoadingButton
-                        variant="outlined"
-                        onClick={() => {
-                          fileMcuInput.current.click();
-                        }}
-                      >
-                        <Iconify icon="eva:plus-fill" />
-                        Add Result
-                      </LoadingButton>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Policy Number:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.current_policy?.code ? row.current_policy?.code : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Gender:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.gender ? row.gender : '-'}</Typography>
                     </Stack>
-                </Grid>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>NRIC:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.nric ? row.nric : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Marital Status:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.marital_status ? row.marital_status : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>NIK:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.employeds[0]?.nik ? row.employeds[0]?.nik : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Language:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.language ? row.language : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Email:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.email ? row.email : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Race:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.race ? row.race : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Phone Number:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.person?.phone ? row.person?.phone : '-'}</Typography>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Relationship:</Typography>
+                      <Typography variant='body2' sx={{width: '25%'}}>{row.relation_with_principal ? row.relation_with_principal : '-'}</Typography>
+                    </Stack>
+                  </Stack>
+                  <Typography variant='subtitle1' marginTop={2}>Claim History</Typography>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Requested:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.requested ? row.total_claims?.requested : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Pending:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.received ? row.total_claims?.received : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Approved:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.approved ? row.total_claims?.approved : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Declined:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.declined ? row.total_claims?.declined : '-'}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '25%'}}>Paid:</Typography>
+                      <Typography variant='body2' sx={{width: '75%'}}>{row.total_claims?.paid ? row.total_claims?.paid : '-'}</Typography>
+                    </Stack>
+                  </Stack>
+                  <Typography variant='subtitle1' marginTop={2}>Files History</Typography>
+                  <Stack marginTop={2}>
+                    
+                    {row.file_mcu_names
+                    ? row.file_mcu_names.split(',').map((fileName, index) => (
+                        <>
+                          <Stack direction='row' spacing={1} alignItems='center'>
+                            <InsertDriveFileIcon />
+                            <Typography key={index} variant='body2' sx={{width: '100%'}}>{fileName}</Typography>
+                          </Stack>
+                        </>
+                      ))
+                    : '-'}
+                  </Stack>
+                  <Stack marginTop={2}>
+                    <Stack direction='row' spacing={1} alignItems='center'>
+                      <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                          bgcolor: '#919EAB52',
+                          borderRadius: '8px',
+                          width: '100%', height: '60px'}} onClick={() => fileMcuInput.current?.click()}>
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              placeItems: 'center',
+                              gap: 1,
+                              placeContent: 'center',
+                              
+
+                            }}
+                          >
+                            <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+                            <Typography variant="body1" fontWeight="bold">
+                              Upload Result
+                            </Typography>
+                          </Box>
+                          <input
+                            type="file"
+                            id={`file-${row.id}`}
+                            ref={fileMcuInput}
+                            style={{ display: 'none' }}
+                            onChange={(event) => {
+                              handleMcuInputChange(row.id, row.member_id)(event);
+                            }}
+                            accept="application/pdf"
+                          />
+                      </ButtonBase>
+                    </Stack>
+                  </Stack>
+                </Box>
+              </Card>
+              <Stack marginTop={2}>
+                <Stack direction='row' alignItems='center' spacing={1} justifyContent="flex-end">
+                  <LoadingButton
+                    id="upload-button"
+                    sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '158px', height: '48px' }}
+                    startIcon={<DownloadIcon />}
+                    // sx={{ p: 1.8 }}
+                    // onClick={() => {handleDownloadLog(row)}}
+                    onClick={() => {
+                      setDialogLogOpen(true);
+                    }}
+                    loading={loadingLog}
+                  >
+                    Download LOG
+                  </LoadingButton>
+                </Stack>
+              </Stack>
+
+              <DialogLog
+                title={{
+                  name: `Generate LOG - ${row.full_name}`,
+                }}
+                openDialog={dialogLogOpen}
+                setOpenDialog={setDialogLogOpen}
+                data={{ member: row }}
+              ></DialogLog>
 
-                <DialogLog
-                  title={{
-                    name: `Generate LOG - ${row.full_name}`,
-                  }}
-                  openDialog={dialogLogOpen}
-                  setOpenDialog={setDialogLogOpen}
-                  data={{ member: row }}
-                ></DialogLog>
-              </Box>
             </Collapse>
           </TableCell>
         </TableRow>
@@ -746,33 +664,73 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
   const headStyle = {
     fontWeight: 'bold',
   };
+  const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
+  const [nameUpdate, setNameUpdate] = useState('');
+  const [memberIdUpdate, setMemberIdUpdate] = useState('');
+  const [activeUpdate, setActiveUpdate] = useState(0);
+  const [idUpdate, setIdUpdate] = useState('');
+
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
+
+  const handleCloseDialogUpdate = () => {
+    setNameUpdate('');
+    setMemberIdUpdate('');
+    setActiveUpdate(activeUpdate);
+    setIdUpdate('');
+    setOpenDialogStatus(false);
+  }
+
+  const handleSaveUpdateData = () => {
+    let activeValue = 0;
+    if(activeUpdate === 1)
+    {
+      activeValue = 0;
+    }
+    else
+    {
+      activeValue = 1;
+    }
+    const updateData = {
+      reason: reasonUpdate,
+      active : activeValue,
+      id: idUpdate,
+    };
+    axios
+      .put('/members/'+idUpdate+'/activation', updateData)
+      .then((response) => {
+        enqueueSnackbar('Data updated successfully', { variant: 'success' });
+        loadDataTableData();
+        handleCloseDialogUpdate();
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+  }
+
+  const handleEditDataStatus = (data:any) => {
+    setNameUpdate(data.name);
+    setMemberIdUpdate(data.member_id);
+    setActiveUpdate(data.active);
+    setIdUpdate(data.id);
+    setOpenDialogStatus(true);    
+  }
   return (
     <Stack>
       <ImportForm />
-
       <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
                 {columns.map((column, index) => (
-                  <TableCell style={headStyle} key={index} align={column.align}>
-                    {column.label}
+                  <TableCell style={{ minWidth: column.minWidth, width: column.width }} key={index} align={column.align}>
+                    <Typography variant='subtitle2'>{column.label}</Typography>
                   </TableCell>
                 ))}
-                <TableCell style={headStyle} align="center">
-                  Status
-                </TableCell>
-                <TableCell style={headStyle} align="center">
-                  Action
-                </TableCell>
-                {/* <TableCell style={headStyle} align="center">
-                  Action
-                </TableCell> */}
+                <TableCell align="center"></TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>
@@ -801,6 +759,62 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
 
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
       </Card>
+      {/* Dialog Update Status */}
+      <Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} fullWidth={true}>
+        <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+          <Stack direction="row" alignItems="center" justifyContent="space-between">
+              <Stack direction="row" alignItems='center' spacing={1}>
+                <Typography variant="h6">Update Status</Typography>
+              </Stack>
+              <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                <CloseIcon />
+              </IconButton>
+          </Stack>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='body1'>Are you sure to {activeUpdate == 1 ? 'Inactive' : 'Active'} this member ?</Typography>
+            <Card sx={{padding:2}}  >
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Member ID</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{memberIdUpdate}</Typography>
+              </Stack>
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{nameUpdate}</Typography>
+              </Stack>
+            </Card>
+          </Stack>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='subtitle1'>Reason for update*</Typography>
+            <FormControl>
+              <InputLabel htmlFor="reason" required>
+                Reason for update
+              </InputLabel>
+              <Select
+                id="reason"
+                value={reasonUpdate}
+                fullWidth
+                label="Reason for update"
+                onChange={(e) => {
+                  setReasonUpdate(e.target.value);
+                }}
+                
+              >
+                <MenuItem value="Agreement changed">Agreement changed</MenuItem>
+                <MenuItem value="Endorsement">Endorsement</MenuItem>
+                <MenuItem value="Renewal">Renewal</MenuItem>
+                <MenuItem value="Worng Setting">Worng Setting</MenuItem>
+              </Select>
+              <FormHelperText style={{ color: 'red' }}></FormHelperText>
+            </FormControl>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+          <Button sx={{backgroundColor: activeUpdate == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeUpdate == 1 ? 'Inactive' : 'Active'}</Button>
+        </DialogActions>
+      </Dialog>
       {isDialog === 'edit' && (
         <DialogLog
           data={edit}

frontend/dashboard/src/pages/Corporates/Member/sections/DialogLog.tsx

@@ -76,6 +76,8 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
   
   const { id, service_code, status } = data;
 
+  const [memberId, setMemberId] = useState(data.member.id);
+
   const isEdit = id ? true : false;
 
   const NewCorporateSchema = Yup.object().shape({
@@ -103,10 +105,11 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
   // const { plan_id } = useParams();
   const handleActivate = (model: any, status: string) => {
     axios
-      .put(`/members/${id}/activation`, {
+      .put(`/members/${memberId}/activation`, {
         // service_code: service.service_code,
         active: status == 'active',
-        reason: model.reason
+        reason: model.reason,
+        id: memberId,
       })
       .then((res) => {
         // Memuat ulang halaman saat ini
@@ -133,7 +136,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
       const data = {
         service_code : service_code,
         reason : row.reason,
-        id : id,
+        id : memberId,
       }
       handleActivate(data, status)  
     } catch (error: any) {
@@ -157,18 +160,18 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
       <Stack spacing={3}>
         <Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
           <Grid item xs={12}>
+          <Typography variant='subtitle1' sx={{marginBottom: 2}}>Reason for update*</Typography>
           <RHFSelect
-                  name="reason"
-                  label="Reason for update"
-                >
-              <option value=""></option>
-              <option value="Agreement changed">Agreement changed</option>
-              <option value="Endorsement">Endorsement</option>
-              <option value="Renewal">Renewal</option>
-              <option value="Worng Setting">Worng Setting</option>
-            </RHFSelect>
+                name="reason"
+                label="Reason for update"
+              >
+            <option value=""></option>
+            <option value="Agreement changed">Agreement changed</option>
+            <option value="Endorsement">Endorsement</option>
+            <option value="Renewal">Renewal</option>
+            <option value="Worng Setting">Worng Setting</option>
+          </RHFSelect>
           </Grid>
-
           <Box sx={{ pt: 5 }}>
             <Stack
               alignItems="center"
@@ -181,6 +184,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
                 <Button
                   sx={{
                     boxShadow: 'none',
+                    color: '#212B36'
                   }}
                   variant="outlined"
                   size="medium"
@@ -190,7 +194,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
                   Cancel
                 </Button>
                 <LoadingButton
-                  sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
+                  sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', backgroundColor: '#19BBBB' }}
                   type="submit"
                   variant="contained"
                   size="medium"

frontend/dashboard/src/routes/index.tsx

@@ -178,7 +178,14 @@ export default function Router() {
               path: ':corporate_id/hospitals',
               element: <CorporateHospitals />,
             },
-
+            {
+              path: ':corporate_id/hospitals/create',
+              element: <HospitalCreateUpdate />,
+            },
+            {
+              path: ':corporate_id/hospitals/edit/:id/:organization_id',
+              element: <HospitalCreateUpdate />,
+            },
             {
               path: ':corporate_id/claim-history',
               element: <CorporateClaimHistories />,
@@ -505,6 +512,7 @@ const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/
 const CorporateServicesHistory = Loadable(lazy(() => import('../pages/Corporates/Services/sections/History')));
 
 const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospital/Index')));
+const HospitalCreateUpdate = Loadable(lazy(() => import('../pages/Corporates/Hospital/CreateUpdate')));
 const CorporateClaimHistories = Loadable(
   lazy(() => import('../pages/Corporates/ClaimHistory/Index'))
 );