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

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

@@ -108,18 +108,15 @@ class CorporateBenefitController extends Controller
     {
 
         $corporateBenefit = CorporateBenefit::findOrFail($id);
+      
         $request->validate([
-            'code' => [
+            'budget' => [
                 'required',
-                Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)->ignore($corporateBenefit->id)
             ],
-            'name' => 'required'
         ]);
 
         $corporateBenefit->fill([
-            'code' => $request->code,
+            'budget' => $request->budget,
-            'name' => $request->name,
-            'active' => $request->active,
         ])->save();
 
         return $corporateBenefit;

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

@@ -381,13 +381,15 @@ class CorporateController extends Controller
     public function activation(Request $request, $corporate_id)
     {
         $request->validate([
-            'active' => 'required'
+            'active' => 'required',
+            'reason' => 'required'
         ]);
 
         // abort(404);
 
         $corporate = Corporate::findOrFail($corporate_id);
         $corporate->active = $request->active == '1';
+        $corporate->reason = $request->reason;
 
         if ($corporate->save()) {
             return response()->json([

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

@@ -34,7 +34,7 @@ class CorporatePlanController extends Controller
         // abort(404);
 
         $plan = CorporatePlan::findOrFail($plan_id);
-        $plan->active = $request->active == '1';
+        $plan->active = $request->active == 1 ? 0 : 1;
         $plan->reason = $request->reason;
 
         if ($plan->save()) {
@@ -110,19 +110,19 @@ class CorporatePlanController extends Controller
     public function update(Request $request, $corporate_id, $id)
     {
         $corporatePlan = CorporatePlan::findOrFail($id);
+        
         $request->validate([
             'code' => [
                 'required',
-                Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)->ignore($corporatePlan->id)
+                // Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)->ignore($corporatePlan->id)
             ],
-            'name' => 'required'
         ]);
-
         $corporatePlan->fill([
             'code' => $request->code,
-            'name' => $request->name,
+            'corporate_plan_id' => $request->plan,
-            'active' => $request->active,
+            'service_code' => $request->service,
-            'description' => $request->description
+            'type' => $request->type,
+            'limit_rules' => $request->limit
         ])->save();
         
         return $corporatePlan;

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

@@ -144,7 +144,7 @@ class CorporateServiceController extends Controller
             // ->with('configs', 'service')
             ->first();
         $corporateService->fill([
-            'status' => $request->status == 'active' ? 'active' : 'inactive',
+            'status' => $request->status == 'active' ? 'inactive' : 'active',
             'reason' => $request->reason
         ]);
         $corporateService->save();

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

@@ -18,6 +18,8 @@ use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Storage;
 use Modules\Internal\Services\ExclusionService;
 use Modules\Internal\Transformers\DiagnosisExclusionResource;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
 
 class DiagnosisExclusionController extends Controller
 {
@@ -327,4 +329,19 @@ class DiagnosisExclusionController extends Controller
         // return $exclusions;
         return Helper::paginateResources(DiagnosisExclusionResource::collection($exclusions));
     }
+
+    public function updateActivation(Request $request)
+    {
+        // validation rule
+        $validator = Validator::make($request->all(),[
+            'id'     => 'required|exists:exclusions',
+            'active' => 'required|in:0,1',
+        ],$this->messages());
+
+        // validation error
+        if ($validator->fails()) {
+            return response()->json($validator->getMessageBag(),400);
+        }
+
+    }
 }

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

@@ -0,0 +1,86 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api;
+
+use App\Models\Service;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class ServiceController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index(Request $request)
+    {
+        $service = Service::orderBy('name', 'ASC')->get();
+
+        if (empty($service)) {
+            return response(['message' => 'Tidak ada data'], 404);
+        } else {
+            return response(['message' => 'Data ditemukan', "status" => 200, 'data' => $service]);
+        }
+    }
+
+    /**
+     * 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)
+    {
+        //
+    }
+
+    /**
+     * 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($id)
+    {
+        return view('internal::edit');
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Renderable
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}

Modules/Internal/Routes/api.php

@@ -31,6 +31,7 @@ use Modules\Internal\Http\Controllers\Api\OptionController;
 use Modules\Internal\Http\Controllers\Api\OrganizationController;
 use Modules\Internal\Http\Controllers\Api\PlanController;
 use Modules\Internal\Http\Controllers\Api\ProvinceController;
+use Modules\Internal\Http\Controllers\Api\ServiceController;
 use Modules\Internal\Http\Controllers\Api\PrescriptionController;
 use Modules\Internal\Http\Controllers\Api\SpecialityController;
 use Modules\Internal\Http\Controllers\Api\VillageController;
@@ -106,6 +107,7 @@ Route::prefix('internal')->group(function () {
 
         Route::get('corporates/{corporate_id}/diagnosis-exclusions', [DiagnosisExclusionController::class, 'index']);
         Route::post('corporates/{corporate_id}/diagnosis-exclusions/store', [DiagnosisExclusionController::class, 'storeExclusion']);
+        Route::put('corporates/diagnosis-exclusions/update_activation', [DiagnosisExclusionController::class, 'updateActivation']);
         Route::delete('diagnosis-exclusions/{id}', [DiagnosisExclusionController::class, 'destroy']);
         Route::post('corporates/{corporate_id}/diagnosis-exclusions/import', [DiagnosisExclusionController::class, 'import']);
 
@@ -201,6 +203,7 @@ Route::prefix('internal')->group(function () {
     });
 
     Route::get('province', [ProvinceController::class, 'index']);
+    Route::get('service', [ServiceController::class, 'index']);
     Route::get('city', [CityController::class, 'index']);
     Route::get('district', [DistrictController::class, 'index']);
     Route::get('village', [VillageController::class, 'index']);

Modules/Internal/Transformers/CorporateServiceConfigResource.php

@@ -41,8 +41,23 @@ class CorporateServiceConfigResource extends JsonResource
         ];
 
         $list_msc = $this->corporateServiceSpecialities->map(function ($speciality) {
-            return  explode(',', $speciality->exclusions->first()->rules->where('name', 'msc')->first()->values ?? '');
+            $exclusions = $speciality->exclusions->first();
-        })->map(function ($item) {
+            
+            if ($exclusions) {
+                $rules = $exclusions->rules->where('name', 'msc')->first();
+        
+                if ($rules) {
+                    $values = $rules->values ?? '';
+                    $item = explode(',', $values);
+                } else {
+                    // Handle case where 'rules' with name 'msc' is not found
+                    $item = [];
+                }
+            } else {
+                // Handle case where 'exclusions' is not found
+                $item = [];
+            }
+        
             return [
                 'm' => in_array('m', $item),
                 's' => in_array('s', $item),
@@ -51,9 +66,22 @@ class CorporateServiceConfigResource extends JsonResource
         });
         
         $list_gender = $this->corporateServiceSpecialities->map(function ($speciality) {
-            // dd($speciality->exclusions->first()->rules);
+            $exclusions = $speciality->exclusions->first();
-            return  explode(',', $speciality->exclusions->first()->rules->where('name', 'gender')->first()->values ?? '');
+            
-        })->map(function ($item) {
+            if ($exclusions) {
+                $rules = $exclusions->rules->where('name', 'gender')->first();
+        
+                if ($rules) {
+                    $values = $rules->values ?? '';
+                    $item = explode(',', $values);
+                } else {
+                    // Handle case where 'rules' with name 'gender' is not found
+                    $item = [];
+                }
+            } else {
+                // Handle case where 'exclusions' is not found
+                $item = [];
+            }
         
             return [
                 'male' => in_array('male', $item),
@@ -61,16 +89,47 @@ class CorporateServiceConfigResource extends JsonResource
             ];
         });
         
+
         $min_age = $this->corporateServiceSpecialities->map(function ($speciality) {
-            return  $speciality->exclusions->first()->rules->where('name', 'min_age')->first()->values ?? '';
+            $exclusions = $speciality->exclusions->first();
+            
+            if ($exclusions) {
+                $rules = $exclusions->rules->where('name', 'min_age')->first();
+        
+                if ($rules) {
+                    return $rules->values ?? '';
+                }
+            }
+        
+            return '';
         });
         
         $max_age = $this->corporateServiceSpecialities->map(function ($speciality) {
-            return  $speciality->exclusions->first()->rules->where('name', 'max_age')->first()->values ?? '';
+            $exclusions = $speciality->exclusions->first();
+            
+            if ($exclusions) {
+                $rules = $exclusions->rules->where('name', 'max_age')->first();
+        
+                if ($rules) {
+                    return $rules->values ?? '';
+                }
+            }
+        
+            return '';
         });
         
         $plan = $this->corporateServiceSpecialities->map(function ($speciality) {
-            return $speciality->exclusions->first()->rules->where('name', 'plan')->first()->values ?? null;
+            $exclusions = $speciality->exclusions->first();
+            
+            if ($exclusions) {
+                $rules = $exclusions->rules->where('name', 'plan')->first();
+        
+                if ($rules) {
+                    return $rules->values ?? null;
+                }
+            }
+        
+            return null;
         });
         
         $data['exclusions'] = $data['exclusions']->map(function ($item, $key) use (

app/Models/CorporatePlan.php

@@ -18,6 +18,10 @@ class CorporatePlan extends Model
         'code',
         'name',
         'description',
+        'corporate_plan_id',
+        'service_code',
+        'type',
+        'limit_rules',
         'active',
         'reason'
     ];

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

@@ -106,23 +106,6 @@ export default function List() {
     handleSearchSubmit: handleSearchSubmit,
   };
   
-  /* ------------------------------------------------------------------------- */
-  /*-------------------------------- handlle checkbox ------------------------ */
-  const handleCheckboxChange = async (event: React.FormEvent<HTMLFormElement>) => {
-    // Anda bisa menambahkan logika di sini
-    if (event.target.checked) {
-      // Checkbox dicentang
-      console.log('Checkbox dicentang');
-      // Tambahkan kode lain yang ingin Anda jalankan saat checkbox dicentang
-    } else {
-      // Checkbox tidak dicentang
-      console.log('Checkbox tidak dicentang');
-      // Tambahkan kode lain yang ingin Anda jalankan saat checkbox tidak dicentang
-    }
-  };
-
-  /* -------------------------------- headCell -------------------------------- */
-
   return (
     <Stack>
       <CardClaimSubmit rows={data} loadings={loadings} params={params} searchs={searchs} />

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

@@ -12,6 +12,10 @@ export type Corporate = {
   divisions?: Division[];
   employees?: Employee[];
   current_policy?: Policy;
+  corporate_plans_count: number;
+  corporate_benefits_count: number;
+  employees_count: number;
+
 };
 
 export type Division = {
@@ -39,14 +43,19 @@ export type Policy = {
   minimal_stop_service_net: number;
   start: string | Date;
   end: string | Date;
+  limit_balance: number;
 }
 
 export type CorporatePlan = {
   id: number;
   corporate_id: number;
   code: string;
+  service_code: string;
+  limit_rules: number;
+  corporate_plan_id: number;
   name: string;
   description: string | null;
+  type: number;
   active: boolean | number;
 }
 
@@ -101,6 +110,7 @@ export type Plan = {
   currency: string;
   max_surgery_reinstatement_days: string;
   max_surgery_periode_days: string;
+  active: number
 }
 
 export type CorporateBenefit = {
@@ -113,6 +123,7 @@ export type CorporateBenefit = {
 }
 
 export type Benefit = {
+  id : number;
   service_code : string;
   plan_code : string;
   benefit_code : string;
@@ -170,6 +181,11 @@ export type Benefit = {
   currency : string;
   show_benefit_item : string;
   show_benefit_value : string;
+  plan : Plan;
+  benefit: Benefit;
+  corporate_benefit_code: string;
+  active: number;
+  limit_free_tc: number;
 }
 
 export type CorporateService = {
@@ -189,3 +205,7 @@ export type MasterExclusion = {
   code: string;
   description?: string;
 }
+
+export type CorporateId = {
+  corporate_id?: number
+}

frontend/dashboard/src/components/DialogUpdateStatus.tsx

@@ -0,0 +1,208 @@
+import * as Yup from 'yup';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton, Grid } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ReactElement } from 'react';
+import Iconify from './Iconify';
+import { Card } from '@mui/material';
+import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from './hook-form';
+import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+    code: string;
+    name: string;
+    id: number;
+    status: string
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  maxWidth?: string;
+  data?: DataContent | undefined;
+  description: string;
+};
+
+type FormValuesProps = {
+  value: string;
+  active: boolean;
+};
+
+
+// ----------------------------------------------------------------------
+
+const DialogUpdateStatus = ({ title, openDialog, setOpenDialog, data, maxWidth, content }: MuiDialogProps) => {
+    const NewCorporateSchema = Yup.object().shape({
+        reason: Yup.string().required('Corporate Status is required'),
+    });
+
+    const methods = useForm<FormValuesProps>({
+      resolver: yupResolver(NewCorporateSchema),
+    });
+
+    const {
+        reset,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = methods;
+
+
+    useEffect(() => {
+    if (openDialog === false) {
+        reset();
+    }
+    }, [openDialog, reset]);
+
+    const handleClose = () => {
+        setOpenDialog(false);
+    };
+
+    const handleUpdate = (id: number, status: number) => {
+         axios
+        .put(`/corporates/${id}/activation`, {
+          // service_code: service.service_code,
+          active: status,
+        })
+        .then((res) => {
+            handleClose()
+            window.location.reload();
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    }
+    let maxWidthDialog = 'md';
+
+    if (maxWidth) {
+        maxWidthDialog = maxWidth;
+    }
+
+    const onSubmit = async (row : any) => {
+        console.log('test')
+    };
+
+  return (
+    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={'sm'}>
+      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between">
+          {title?.icon ? (
+            <Stack direction="row">
+              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
+              <Typography variant="h6">{title?.name}</Typography>
+            </Stack>
+          ) : (
+            <Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
+          )}
+          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
+        
+            {/* <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>{description}</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={4} md={4}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Typography variant='subtitle1'>{data?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={4} md={4} marginTop={2}>
+                        <Typography variant='inherit'>Corporate Name</Typography>
+                    </Grid>
+                    <Grid item xs={8} marginTop={2}>
+                        <Typography variant='subtitle1'>{data?.name}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <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>
+            </FormProvider>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setOpenDialog(false)}
+            >
+                Cancel
+            </Button>
+
+            {data?.status == 1 ?  
+            <Button
+                sx={{
+                    boxShadow: 'none',
+                }}
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                color='error'
+                onClick={() => handleUpdate(data?.id, 0)}
+            >
+                Inactive
+            </Button>
+            : <Button
+                sx={{
+                    boxShadow: 'none',
+                }}
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                color='success'
+                onClick={() => handleUpdate(data?.id, 1)}
+            >
+                Active
+            </Button> }
+            </Stack>
+        </Stack> */}
+        {content}
+            
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DialogUpdateStatus;

frontend/dashboard/src/components/Label.tsx

@@ -0,0 +1,98 @@
+// @mui
+import { alpha, Theme, useTheme, styled } from '@mui/material/styles';
+import { BoxProps } from '@mui/material';
+// theme
+import { ColorSchema } from '../theme/palette';
+
+// ----------------------------------------------------------------------
+
+type LabelColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+
+type LabelVariant = 'filled' | 'outlined' | 'ghost';
+
+const RootStyle = styled('span')(
+  ({
+    theme,
+    ownerState,
+  }: {
+    theme: Theme;
+    ownerState: {
+      color: LabelColor;
+      variant: LabelVariant;
+    };
+  }) => {
+    const isLight = theme.palette.mode === 'light';
+    const { color, variant } = ownerState;
+
+    const styleFilled = (color: ColorSchema) => ({
+      color: theme.palette[color].contrastText,
+      backgroundColor: theme.palette[color].main,
+    });
+
+    const styleOutlined = (color: ColorSchema) => ({
+      color: theme.palette[color].main,
+      backgroundColor: 'transparent',
+      border: `1px solid ${theme.palette[color].main}`,
+    });
+
+    const styleGhost = (color: ColorSchema) => ({
+      color: theme.palette[color][isLight ? 'dark' : 'light'],
+      backgroundColor: alpha(theme.palette[color].main, 0.16),
+    });
+
+    return {
+      height: 22,
+      minWidth: 22,
+      lineHeight: 0,
+      borderRadius: 6,
+      // cursor: 'default',
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      padding: theme.spacing(0, 1),
+      color: theme.palette.grey[800],
+      fontSize: theme.typography.pxToRem(12),
+      fontFamily: theme.typography.fontFamily,
+      backgroundColor: theme.palette.grey[300],
+      fontWeight: theme.typography.fontWeightBold,
+
+      ...(color !== 'default'
+        ? {
+            ...(variant === 'filled' && { ...styleFilled(color) }),
+            ...(variant === 'outlined' && { ...styleOutlined(color) }),
+            ...(variant === 'ghost' && { ...styleGhost(color) }),
+          }
+        : {
+            ...(variant === 'outlined' && {
+              backgroundColor: 'transparent',
+              color: theme.palette.text.primary,
+              border: `1px solid ${theme.palette.grey[500_32]}`,
+            }),
+            ...(variant === 'ghost' && {
+              color: isLight ? theme.palette.text.secondary : theme.palette.common.white,
+              backgroundColor: theme.palette.grey[500_16],
+            }),
+          }),
+    };
+  }
+);
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  color?: LabelColor;
+  variant?: LabelVariant;
+}
+
+export default function Label({ color = 'default', variant = 'ghost', children, sx }: Props) {
+  const theme = useTheme();
+
+  return (
+    <RootStyle ownerState={{ color, variant }} sx={sx} theme={theme}>
+      {children}
+    </RootStyle>
+  );
+}
+
+

frontend/dashboard/src/components/ThemeColorPresets.tsx

@@ -21,7 +21,7 @@ export default function ThemeColorPresets({ children }: Props) {
       ...defaultTheme,
       palette: {
         ...defaultTheme.palette,
-        primary: setColor,
+        // primary: setColor,
       },
       customShadows: {
         ...defaultTheme.customShadows,

frontend/dashboard/src/pages/Corporates/Benefit/Create.tsx

@@ -2,21 +2,43 @@ import * as Yup from 'yup';
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
 import { useForm } from "react-hook-form";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
 import Page from "../../../components/Page";
 import useSettings from "../../../hooks/useSettings";
 import CorporateTabNavigations from "../CorporateTabNavigations";
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import DivisionsList from "./List";
-import { useMemo, useState } from 'react';
+import FormEdit from "./Form";
+import { useEffect, useMemo, useState } from 'react';
+import { Benefit } from '@/@types/corporates';
+import axios from '@/utils/axios';
 
 
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { corporate_id } = useParams();
+  const { corporate_id, benefit_id } = useParams();
+  const [ currentCorporateBenefit, setCurrentCorporateBenefit ] = useState<Benefit>();
+  const navigate = useNavigate();
+  const isEdit = !!benefit_id;
+  useEffect(() => {
+    console.log(benefit_id);
+    if (isEdit) {
+      axios.get('/corporates/'+corporate_id+'/corporate-benefits/'+benefit_id+'/edit')
+        .then((res) => {
+          setCurrentCorporateBenefit(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+  }, [corporate_id, benefit_id]);
+
 
   const NewDivisionSchema = Yup.object().shape({
     name: Yup.string().required('Name is required'),
@@ -51,97 +73,12 @@ export default function Divisions() {
     console.log(data);
   };
 
-  const [open, setOpen] = useState(false);
 
-  const benefits = [
-    {
-      'category' : 'General Practitioner',
-      'childs' : [
-        {
-          'name' : 'External Doctor Online',
-          'code' : 'gp-external-doctor-online'
-        },
-        {
-          'name' : 'External Doctor Offline',
-          'code' : 'gp-external-doctor-offline'
-        },
-        {
-          'name' : 'Internal Doctor Online',
-          'code' : 'gp-internal-doctor-online'
-        },
-        {
-          'name' : 'Internal Doctor Offline',
-          'code' : 'gp-internal-doctor-offline'
-        },
-      ]
-    },
-    {
-      'category' : 'Specialist',
-      'childs' : [
-        {
-          'name' : 'External Doctor Online',
-          'code' : 'sp-external-doctor-online'
-        },
-        {
-          'name' : 'External Doctor Offline',
-          'code' : 'sp-external-doctor-offline'
-        },
-        {
-          'name' : 'Internal Doctor Online',
-          'code' : 'sp-internal-doctor-online'
-        },
-        {
-          'name' : 'Internal Doctor Offline',
-          'code' : 'sp-internal-doctor-offline'
-        },
-      ]
-    },
-    {
-      'category' : 'Medicines',
-      'childs' : [
-        {
-          'name' : 'Vitamins',
-          'code' : 'medicines-vitamins'
-        },
-        {
-          'name' : 'Delivery Fee',
-          'code' : 'medicines-delivery-fee'
-        },
-      ]
-    },
-  ];
-
-  const products = [
-    {
-      'name' : 'Inpatient',
-      'code' : 'IP',
-    },
-    {
-      'name' : 'Outpatient',
-      'code' : 'OP',
-    },
-    {
-      'name' : 'Dental',
-      'code' : 'DT',
-    },
-    {
-      'name' : 'Dental',
-      'code' : 'DTL',
-    },
-    {
-      'name' : 'Matternity',
-      'code' : 'MT',
-    },
-    {
-      'name' : 'Special Benefit',
-      'code' : 'SB',
-    },
-  ];
 
   return (
     <Page title="Create Benefit">
 
-      <HeaderBreadcrumbs
+      {/* <HeaderBreadcrumbs
         heading={'Create Benefit'}
         links={[
           { name: 'Dashboard', href: '/dashboard' },
@@ -162,9 +99,9 @@ export default function Divisions() {
             href: '/corporates/'+id+'/benefits/create',
           },
         ]}
-      />
+      /> */}
-      
       
+{/* 
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card sx={{ p: 2 }}>
@@ -235,7 +172,17 @@ export default function Divisions() {
             </FormProvider>
           </Card>
         </Grid>
-      </Grid>
+      </Grid> */}
+      <Stack direction="row" alignItems="center">
+        <ArrowBackIosIcon
+          onClick={() => navigate(`/corporates/${corporate_id}/benefit`)}
+          sx={{ cursor: 'pointer' }}
+        />
+        <Typography variant="h5" sx={{ marginRight:2, flexGrow: 1 }}>
+          Edit Plan 
+        </Typography>
+      </Stack>
+      <FormEdit isEdit={true} currentCorporateBenefit={currentCorporateBenefit}/>
     </Page>
   );
 }

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

@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
 import { LoadingButton } from '@mui/lab';
-import { Box, Card, Grid, Stack, Typography } from '@mui/material';
+import { Box, Button, Card, Grid, Stack, Typography } from '@mui/material';
-import { CorporatePlan } from '../../../@types/corporates';
+import { Benefit } from '../../../@types/corporates';
 import { FormProvider, RHFSwitch, RHFTextField } from '../../../components/hook-form';
 import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
@@ -12,39 +12,36 @@ import axios from '../../../utils/axios';
 
 type Props = {
   isEdit: boolean;
-  currentCorporatePlan?: CorporatePlan;
+  currentCorporateBenefit?: Benefit;
 };
 
-export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
+export default function CorporateBenefitForm({ isEdit, currentCorporateBenefit }: Props) {
   const { enqueueSnackbar } = useSnackbar();
   const navigate = useNavigate();
-  const { corporate_id } = useParams();
+  const { corporate_id, benefit_id } = useParams();
 
-  const NewCorporatePlanSchema = Yup.object().shape({
+  const NewCorporateBenefitSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
+    budget: Yup.string().required('Budget is required'),
-    code: Yup.string().required('Corporate Code is required'),
   });
 
   const defaultValues = useMemo(
     () => ({
-      name: currentCorporatePlan?.name || '',
+      budget: currentCorporateBenefit?.budget || '',
-      code: currentCorporatePlan?.code || '',
-      active: currentCorporatePlan?.active === 1 ? true : false,
     }),
-    [currentCorporatePlan]
+    [currentCorporateBenefit]
   );
 
   useEffect(() => {
-    if (isEdit && currentCorporatePlan) {
+    if (isEdit && currentCorporateBenefit) {
       reset(defaultValues);
     }
     if (!isEdit) {
       reset(defaultValues);
     }
-  }, [isEdit, currentCorporatePlan]);
+  }, [isEdit, currentCorporateBenefit]);
 
   const methods = useForm({
-    resolver: yupResolver(NewCorporatePlanSchema),
+    resolver: yupResolver(NewCorporateBenefitSchema),
     defaultValues,
   });
 
@@ -81,12 +78,12 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
         });
     } else {
       await axios
-        .put('/corporate/' + corporate_id + '/divisions/' + currentCorporatePlan?.id, data)
+        .put('/corporates/' + corporate_id + '/corporate-benefits/' + benefit_id, data)
         .then((res) => {
           enqueueSnackbar('Division updated successfully', { variant: 'success' });
         })
         .then((res) => {
-          navigate('/corporate/' + corporate_id + '/divisions/', { replace: true });
+          navigate('/corporates/' + corporate_id + '/benefits', { replace: true });
         })
         .catch(({ response }) => {
           enqueueSnackbar('Update Failed : ' + response.data.message, { variant: 'error' });
@@ -95,30 +92,44 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
   };
 
   return (
+    
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
       <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
         <Grid container>
-          <Grid item xs={6} sx={{ padding: 2 }}>
+          <Grid item xs={12} sx={{ padding: 2 }}>
             <Grid container>
               <Stack direction="row" alignItems="center" sx={{ width: '100%' }}>
                 <Typography variant="subtitle2" sx={{ mr: 2 }}>
                   ASO/Budget
                 </Typography>
-                <RHFTextField name="budget" />
+                <RHFTextField name="budget" type='number'/>
-              </Stack>
-            </Grid>
-          </Grid>
-          <Grid item xs={6} sx={{ padding: 2 }}>
-            <Grid container>
-              <Stack direction="row" alignItems="center" sx={{ width: '100%' }}>
-                <Typography variant="subtitle2" sx={{ mr: 2 }}>
-                  ASO/Budget
-                </Typography>
-                <RHFTextField name="budget" />
               </Stack>
             </Grid>
           </Grid>
         </Grid>
+        <Stack direction="row" alignItems="center" justifyContent="flex-end">
+          <Button
+            sx={{marginTop:2}}
+            type="submit"
+            variant="contained"
+            size="large"
+            color='inherit'
+            onClick={() => navigate(`/corporates/${corporate_id}/benefits`)}
+            
+          >
+            Cancel
+          </Button>
+          <LoadingButton
+            type="submit"
+            variant="contained"
+            size="large"
+            // fullWidth={true}
+            loading={isSubmitting}
+            sx={{marginTop:2, marginLeft:2}}
+          >
+            Save
+          </LoadingButton>
+        </Stack>
       </Box>
     </FormProvider>
   );

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

@@ -44,10 +44,10 @@ export default function Divisions() {
         ]}
       />
 
-      <Card>
+      {/* <Card> */}
         <CorporateTabNavigations position={'benefits'} />
         <DivisionsList />
-      </Card>
+      {/* </Card> */}
     </Page>
   );
 }

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

@@ -35,11 +35,14 @@ import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+
 
 // 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, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 
 import {
@@ -64,6 +67,11 @@ import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
 import DialogLog from './sections/DialogLog';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { Edit } from '@mui/icons-material';
+import { fData, fNumber } from '@/utils/formatNumber';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus';
 
 export default function PlanList() {
   const { themeStretch } = useSettings();
@@ -71,6 +79,8 @@ export default function PlanList() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
 
+  const navigate = useNavigate()
+  
   const [openDialog, setOpenDialog] = useState(false);
   const [isDialog, setIsDialog] = useState('');
   const [edit, setEdit] = useState({});
@@ -302,84 +312,141 @@ export default function PlanList() {
     };
   }
 
+  type DataContent = {
+    code: string;
+    name: string;
+    id: number;
+    status: string|number;
+  };
+
+
   // Generate the every row of the table
+  const [isDialogOpen, setDialogOpen] = useState(false)
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  const [dataValue, setDataValue] = useState('');
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
     const [openEdit, setOpenEdit] = React.useState(false);
 
-    const handleActivate = (model: any, status: string) => {
+    // const handleActivate = (model: any, status: string) => {
-      axios
+    //   axios
-        .put(`/benefits/${row.id}/activation`, {
+    //     .put(`/benefits/${row.id}/activation`, {
-          // service_code: service.service_code,
+    //       // service_code: service.service_code,
-          active: status == 'active',
+    //       active: status == 'active',
-        })
+    //     })
-        .then((res) => {
+    //     .then((res) => {
-          setDataTableData({
+    //       setDataTableData({
-            ...dataTableData,
+    //         ...dataTableData,
-            data: dataTableData.data.map((model) => {
+    //         data: dataTableData.data.map((model) => {
-              let updatedModel = model;
+    //           let updatedModel = model;
-              if (row.id == model.id) {
+    //           if (row.id == model.id) {
-                updatedModel.active = res.data.benefit.active;
+    //             updatedModel.active = res.data.benefit.active;
-              }
+    //           }
-              return updatedModel;
+    //           return updatedModel;
-            }),
+    //         }),
-          });
+    //       });
-        })
+    //     })
-        .catch((error) => {
+    //     .catch((error) => {
-          // console.log('asdasd', error.response.data.message)
+    //       // console.log('asdasd', error.response.data.message)
-          enqueueSnackbar(
+    //       enqueueSnackbar(
-            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+    //         error.response.data.message ?? error.message ?? 'Failed Processing Request',
-            { variant: 'error' }
+    //         { variant: 'error' }
-          );
+    //       );
-        });
+    //     });
+    // };
+
+    
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
+      setDialogOpen(isOpen)
+      setDataValue(dataValue)
+      setDescriptionValue('Are you sure to inactive this service ?')
+      setUrl(url)
     };
 
+    let frequency_period_name: string
+    switch (row.max_frequency_period) {
+      case '1' :
+        frequency_period_name = 'Daily Visit';
+        break;
+      case '2':
+        frequency_period_name = 'Weekly';
+        break;
+      case '3':
+        frequency_period_name = 'Monthly';
+        break;
+      case '4':
+        frequency_period_name = 'Yearly';
+        break;
+      case '5':
+        frequency_period_name = 'Disability';
+        break;
+      case '6':
+        frequency_period_name = 'Visit';
+        break;
+      default:
+        frequency_period_name = 'Policy Period';
+    }
+  
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
+          {/* <TableCell>
             <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
-          </TableCell>
+          </TableCell> */}
           <TableCell align="left">{row.plan?.service_code}</TableCell>
           <TableCell align="left">{row.plan?.code}</TableCell>
           <TableCell align="left">{row.benefit?.code}</TableCell>
           <TableCell align="left">{row.corporate_benefit_code}</TableCell>
           <TableCell align="left">{row.benefit?.description}</TableCell>
+          <TableCell align="left">{ fNumber(row.limit_amount)}</TableCell>
+          <TableCell align="left">{ row.max_frequency_period}</TableCell>
 
           <TableCell align="center">
             {row.active == 1 && (
-              <Button
+              // <Button
-                variant="outlined"
+              //   variant="outlined"
-                color="success"
+              //   color="success"
-                size="small"
+              //   size="small"
-                onClick={() => {
+              //   onClick={() => {
-                  // handleActivate(row, 'inactive');
+              //     // handleActivate(row, 'inactive');
-                  clickHandler('edit');
+              //     clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
+              //     setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
-                }}
+              //   }}
-              >
+              // >
+                <Label color='success' variant='ghost'>
                   Active
-              </Button>
+
+                </Label>
+              // </Button>
             )}
             {row.active != 1 && (
-              <Button
+              // <Button
-                variant="outlined"
+              //   variant="outlined"
-                color="error"
+              //   color="error"
-                size="small"
+              //   size="small"
-                onClick={() => {
+              //   onClick={() => {
-                  // handleActivate(row, 'active');
+              //     // handleActivate(row, 'active');
-                  clickHandler('edit');
+              //     clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
+              //     setEdit({id: row.id, service_code: row.service_code, status: 'active'});
-                }}
+              //   }}
-              >
+              // >
+              //   Inactive
+              // </Button>
+              <Label color='error' variant='ghost'>
                 Inactive
-              </Button>
+              </Label>
             )}
           </TableCell>
-          <TableCell align="right">
+          {/* <TableCell align="right">
             <Button
               variant="outlined"
               color="success"
@@ -393,19 +460,42 @@ export default function PlanList() {
             >
               {openEdit ? 'Save' : 'Edit'}
             </Button>
+          </TableCell> */}
+          <TableCell align="center">
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => setOpen(!open) }>
+                  <FindInPageOutlinedIcon />
+                  Detail
+                </MenuItem>
+                <MenuItem onClick={() =>navigate(`/corporates/${corporate_id}/benefits/${row.id}/edit`) }>
+                  <Edit />
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/benefits/${row.id}/history`)}>
+                  <HistoryIcon />
+                  History
+                </MenuItem>
+                <MenuItem onClick={() => handleActivate(true, {code: row.code, name: row.service_code, id:row.id, status: row.active}) }>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </MenuItem>
+              </>
+            } />
           </TableCell>
-          <TableCell>
+          {/* <TableCell>
             <Tooltip title="History">
               <Link to={`/corporate/${corporate_id}/benefits/${row.id}/history`}>
                 <HistoryIcon />
               </Link>
             </Tooltip>
-          </TableCell>
+          </TableCell> */}
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
             <Collapse in={open} timeout="auto" unmountOnExit>
+              <Card sx={{margin: 2}}>
                 {open == true ? (
                   openEdit == false ? (
                     <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
@@ -470,7 +560,7 @@ export default function PlanList() {
                               Limit Value
                             </Grid>
                             <Grid item xs={6}>
-                            : {row.limit_amount ? row.limit_amount : '-'}
+                              : {row.limit_amount ? fNumber(row.limit_amount) : '-'}
                             </Grid>
                             <Grid item xs={6}>
                               Area
@@ -518,7 +608,7 @@ export default function PlanList() {
                               Freq. Period
                             </Grid>
                             <Grid item xs={6}>
-                            : {row.max_frequency_period ? row.max_frequency_period : '-'}
+                              : {row.max_frequency_period ? frequency_period_name : '-'}
                             </Grid>
                             <Grid item xs={6}>
                               Daily Frequency
@@ -742,6 +832,7 @@ export default function PlanList() {
                     <Form />
                   )
                 ) : null}
+              </Card>
             </Collapse>
 
             {/* <Collapse in={openEdit} timeout="auto" unmountOnExit>
@@ -803,17 +894,106 @@ export default function PlanList() {
     loadDataTableData();
   }, []);
 
+  
+  const getContent = () => (
+    <>
+       <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 1 ? 'inactive' : 'active'} this service ?</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={4} md={4}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={4} md={4} marginTop={2}>
+                        <Typography variant='inherit'>Service Name</Typography>
+                    </Grid>
+                    <Grid item xs={8} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <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>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setDialogOpen(false)}
+            >
+                Cancel
+            </Button>
+
+            {dataValue?.status == 1?  
+              <LoadingButton
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+                type="submit"
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                loading={isSubmitting}
+                color='error'
+              >
+              Inactive
+            </LoadingButton>
+            : 
+            <LoadingButton
+              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+              type="submit"
+              variant="contained"
+              size="medium"
+              fullWidth={true}
+              loading={isSubmitting}
+              color='success'
+            >
+            Active
+          </LoadingButton>
+          
+            
+            }
+            </Stack>
+        </Stack>
+        
+        </FormProvider>
+    </>
+  );
+
   return (
     <Stack>
       <ImportForm />
-
-      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
-          <Table aria-label="collapsible table">
+          <Table aria-label="collapsible table" sx={{margin:1}}>
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
+                {/* <TableCell style={headStyle} align="left" /> */}
                 <TableCell style={headStyle} align="left">
                   Service
                 </TableCell>
@@ -829,15 +1009,20 @@ export default function PlanList() {
                 <TableCell style={headStyle} align="left">
                   Detail Benefit
                 </TableCell>
-
+                <TableCell style={headStyle} align="left">
+                  Limit Benefit
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Limit Frequency
+                </TableCell>
                 <TableCell style={headStyle} align="center">
                   Status
                 </TableCell>
                 <TableCell style={headStyle} colSpan={2} align="center">
-                  Action
+                  
                 </TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>
@@ -865,7 +1050,6 @@ export default function PlanList() {
         </TableContainer>
 
       <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-      </Card>
       {isDialog === 'edit' && (
         <DialogLog
           data={edit}
@@ -874,6 +1058,15 @@ export default function PlanList() {
           title={{ name: 'Reason For Update' }}
         />
       )}
+      {/* <DialogUpdateStatus 
+        openDialog={isDialogOpen}
+        setOpenDialog={setDialogOpen} 
+        title={titles}
+        data={dataValue}
+        description={dataDescription}
+        content={getContent()}
+        // maxWidth='50px'
+      /> */}
     </Stack>
   );
 }

frontend/dashboard/src/pages/Corporates/Benefit/sections/History.tsx

@@ -85,7 +85,7 @@ export default function CustomizedAccordions() {
     (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
       setExpanded(newExpanded ? panel : false);
     };
-  const pageTitle = 'Audittrail Corporate';
+  const pageTitle = 'Corporate Dashboard';
   
   const { themeStretch } = useSettings();
 
@@ -121,11 +121,11 @@ export default function CustomizedAccordions() {
           },
           {
             name: corporate?.name ?? '-',
-            href: '/corporate/' + corporate_id + '/plans',
+            href: '/corporates/' + corporate_id + '/benefits',
           },
           {
-            name: 'Audittrail Corporate',
+            name: 'Benefit',
-            href: '/corporate/' + corporate_id + '/plans',
+            href: '/corporates/' + corporate_id + '/benefits',
           },
         ]}
       />

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

@@ -8,6 +8,9 @@ import axios from '../../../utils/axios';
 import { useSnackbar } from 'notistack';
 import CorporatePlanForm from './Form';
 import { CorporatePlan } from '../../../@types/corporates';
+import { Stack } from "@mui/system";
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { Typography } from "@mui/material";
 
 
 
@@ -36,8 +39,8 @@ export default function PlanCreate() {
 
   return (
     <Page title="Create Corporate Plan">
-      <HeaderBreadcrumbs
+      {/* <HeaderBreadcrumbs
-        heading={'Create Corporate Plan'}
+        heading={ 'Edit Plan'}
         links={[
           {
             name: 'Corporates',
@@ -56,7 +59,16 @@ export default function PlanCreate() {
             href: '/corporates/'+corporate_id+'/corporate-plans/'+id,
           },
         ]}
+      /> */}
+      <Stack direction="row" alignItems="center">
+        <ArrowBackIosIcon
+          onClick={() => navigate(`/corporates/${corporate_id}/plans`)}
+          sx={{ cursor: 'pointer' }}
         />
+        <Typography variant="h5" sx={{ marginRight:2, flexGrow: 1 }}>
+          Edit Plan 
+        </Typography>
+      </Stack>
 
       <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
     </Page>

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

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { LoadingButton } from '@mui/lab';
-import { Card, Grid, Stack, Typography } from '@mui/material';
+import { Card, Grid, Stack, Typography, Button } from '@mui/material';
 import { CorporatePlan } from '../../../@types/corporates';
 import { FormProvider, RHFEditor, RHFSwitch, RHFTextField } from '../../../components/hook-form';
 import { useEffect, useMemo, useState } from 'react';
@@ -22,16 +22,22 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
   const { corporate_id } = useParams();
 
   const NewCorporatePlanSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
     code: Yup.string().required('Corporate Code is required'),
+    service: Yup.string().required('Corporate Service is required'),
+    plan: Yup.string().required('Corporate Plan is required'),
+    type: Yup.string().required('Corporate Type is required'),
+    limit: Yup.string().required('Corporate Limit is required'),
   });
 
   const defaultValues = useMemo(
     () => ({
-      name: currentCorporatePlan?.name || '',
+      // name: currentCorporatePlan?.name || '',
       code: currentCorporatePlan?.code || '',
-      active: currentCorporatePlan?.active || true,
+      // active: currentCorporatePlan?.active || true,
-      description: currentCorporatePlan?.description || '',
+      type: currentCorporatePlan?.type || '',
+      limit: currentCorporatePlan?.limit_rules || '',
+      service: currentCorporatePlan?.service_code || '',
+      plan: currentCorporatePlan?.corporate_plan_id || '',
     }),
     [currentCorporatePlan]
   );
@@ -62,14 +68,15 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
   } = methods;
 
   const onSubmit = async (data: any) => {
+    console.log(data);
     if (!isEdit) {
       await axios
-        .post('/corporate/' + corporate_id + '/corporate-plans', data)
+        .post('/corporates/' + corporate_id + '/corporate-plans', data)
         .then((res) => {
           enqueueSnackbar('Corporate Plan created successfully', { variant: 'success' });
         })
         .then((res) => {
-          navigate('/corporate/' + corporate_id + '/corporate-plans', { replace: true });
+          navigate(`/corporates/${corporate_id}/plans`, { replace: true });
         })
         .catch(({ response }) => {
           if (response.status === 422) {
@@ -83,12 +90,12 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
         });
     } else {
       await axios
-        .put('/corporate/' + corporate_id + '/corporate-plans/' + currentCorporatePlan?.id, data)
+        .put('/corporates/' + corporate_id + '/corporate-plans/' + currentCorporatePlan?.id, data)
         .then((res) => {
           enqueueSnackbar('Corporate Plan updated successfully', { variant: 'success' });
         })
         .then((res) => {
-          navigate('/corporate/' + corporate_id + '/corporate-plans/', { replace: true });
+          navigate('/corporates/' + corporate_id + '/plans', { replace: true });
         })
         .catch(({ response }) => {
           enqueueSnackbar('Update Failed : ' + response.data.message, { variant: 'error' });
@@ -98,12 +105,34 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
 
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-      <Grid container spacing={2}>
+      <Card sx={{ p: 2, marginTop: 2 }}>
-        <Grid item xs={8}>
+        <Grid container spacing={4} paddingX={2} paddingY={2}>
-          <Card sx={{ p: 2 }}>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Service*</Typography>
+            <RHFTextField name="service" label="service" sx={{marginTop:2}}/>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Plan*</Typography>
+            <RHFTextField name="plan" label="plan" sx={{marginTop:2}} />
+          </Grid>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Code*</Typography>
+            <RHFTextField name="code" label="code" sx={{marginTop:2}} />
+          </Grid>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Type*</Typography>
+            <RHFTextField name="type" label="type" sx={{marginTop:2}} />
+          </Grid>
+          <Grid item xs={6}>
+            <Typography variant="subtitle1">Plan Limit*</Typography>
+            <RHFTextField name="limit" label="limit" sx={{marginTop:2}} />
+          </Grid>
+
+          {/* <Grid item xs={3}>
             <Stack spacing={3}>
               <Typography variant="h6">Corporate Plan Detail</Typography>
 
+              
               <RHFTextField name="name" label="Name" />
 
               <RHFTextField name="code" label="Code" />
@@ -122,17 +151,35 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
                 fullWidth={true}
                 loading={isSubmitting}
               >
-                Create Corporate Plan
+                { isEdit ? 'Update' : 'Create'} Corporate Plan
               </LoadingButton>
             </Stack>
+          </Grid> */}
+        </Grid>
       </Card>
-        </Grid>
+      <Stack direction="row" alignItems="center" justifyContent="flex-end">
-        <Grid item xs={4}>
+            <Button
-          <Card sx={{ p: 2 }}>
+              sx={{marginTop:2}}
-            <RHFSwitch name="active" label="Active" />
+              type="submit"
-          </Card>
+              variant="contained"
-        </Grid>
+              size="large"
-      </Grid>
+              color='inherit'
+              onClick={() => navigate(`/corporates/${corporate_id}/plans`)}
+              
+            >
+              Cancel
+            </Button>
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              size="large"
+              // fullWidth={true}
+              loading={isSubmitting}
+              sx={{marginTop:2, marginLeft:2}}
+            >
+              Save
+            </LoadingButton>
+        </Stack>
     </FormProvider>
   );
 }

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

@@ -38,13 +38,13 @@ import {
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import AddIcon from '@mui/icons-material/Add';
+import GetApp from '@mui/icons-material/GetApp';
 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, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useParams, useSearchParams, useNavigate } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
@@ -54,6 +54,11 @@ import { enqueueSnackbar } from 'notistack';
 import { Icon } from '@iconify/react';
 import { LoadingButton } from '@mui/lab';
 import HistoryIcon from '@mui/icons-material/History';
+import CachedIcon from '@mui/icons-material/Cached';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { EditOutlined, FindInPageOutlined } from '@mui/icons-material';
+import Label from '@/components/Label';
+import { display } from '@mui/system';
 
 export default function List(props: any) {
   const { themeStretch } = useSettings();
@@ -82,7 +87,7 @@ export default function List(props: any) {
     }, [searchParams]);
 
     return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
         <TextField
           id="search-input"
           ref={searchInput}
@@ -192,16 +197,18 @@ export default function List(props: any) {
             {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
             <Button
             id="import-button"
-              variant="outlined"
+            variant="contained"
-              startIcon={<AddIcon />}
+            startIcon={<GetApp />}
-              sx={{ p: 1.8 }}
+            sx={{ p: 1.8,width: '200px' }}
             aria-controls={createMenu ? 'basic-menu' : undefined}
             aria-haspopup="true"
             aria-expanded={createMenu ? 'true' : undefined}
             onClick={handleClick}
+            color='primary'
             >
             Import
             </Button>
+
             <Menu
               id="import-button"
               anchorEl={anchorEl}
@@ -462,69 +469,86 @@ export default function List(props: any) {
 
     console.log('exclusions', exclusions);
 
+    const handleActivate = (row: any) => {
+      axios
+        .put(`/corporates/diagnosis-exclusions/update_activation`, {
+            id: row.id,
+            active: row.active == 1 ? 0 : 1,
+        })
+        .then((res) => {
+        //   setDataTableData({
+        //     ...dataTableData,
+        //     data: dataTableData.data.map((model) => {
+        //       let updatedModel = model;
+        //       if (row.id == model.id) {
+        //         updatedModel.active = res.data.corporate.active;
+        //       }
+        //       return updatedModel;
+        //     }),
+        //   });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}/>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+                {row.service_code}
-            </IconButton>
             </TableCell>
-          <TableCell align="left">{row.service_code}</TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
-          <TableCell align="left">{row.code}</TableCell>
+                {row.code}
-          <TableCell align="left">{row.name}</TableCell>
+            </TableCell>
-          <TableCell align="left">{Object.keys(row.rules).length ? 'With Rules' : 'All'}</TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
-          <TableCell align="left">{row.active ? 'Active' : 'Inactive'}</TableCell>
+                {row.name}
-
+            </TableCell>
-          <TableCell align="center">
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
-          <Stack direction={'row'} spacing={1} sx={{ mb: 1 }}>
+                {Object.keys(row.rules).length ? 'With Rules' : 'All'}
-          {openEdit ? (
+            </TableCell>
-              <Button
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
-                variant="contained"
+                {row.active == 1 && (
-                color="success"
+                <Label
-                size="small"
-                sx={{
-                  color: '#fff',
-                }}
-                onClick={(event) => {
-                  setOpenEdit(!openEdit);
-                  if (open == false) {
-                    setOpen(true);
-                  }
-                  handleConfigExclusion(event, row, '', 'one_row');
-                }}
-              >
-                Save
-              </Button>
-            ) : (
-              <Button
                     variant="outlined"
                     color="success"
                     size="small"
-                onClick={() => {
-                  setOpenEdit(true);
-                  setOpen(true);
-                }}
                 >
-                Edit
+                    Active
-              </Button>
+                </Label>
                 )}
-            {/* <Button
+                {row.active != 1 && (
+                <Label
                     variant="outlined"
                     color="error"
                     size="small"
-              sx={{ ml: 2 }}
-              onClick={() => {
-                setOpenDelete(true);
-              }}
                 >
-              Delete
+                    Inactive
-            </Button> */}
+                </Label>
-             {/* <Link to={`/corporate/${corporate_id}/diagnosis-exclusions/${row.id}/history`}>
+                )}
-                <HistoryIcon />
+            </TableCell>
-              </Link> */}
-          </Stack>
 
+          <TableCell align="left">
+            <TableMoreMenu actions={
+                <>
+                    <MenuItem onClick={() => setOpen(!open)}>
+                        <FindInPageOutlined />
+                        Detail
+                    </MenuItem>
+                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/history`)} >
+                        <EditOutlined />
+                        Edit
+                    </MenuItem>
+                    <MenuItem onClick={() => handleActivate(row)}>
+                        <CachedIcon />
+                        Update Status
+                    </MenuItem>
+                </>
+            } />
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
@@ -532,9 +556,83 @@ export default function List(props: any) {
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
             <Collapse in={open} timeout="auto" unmountOnExit>
                 {open == true ? (
+                    <Box sx={{ padding: '24px' }}>
+                        <Card sx={{ padding: '24px' }}>
+                            <Grid container spacing={6}>
+                                <Grid item xs={8}>
+                                    <Typography variant="body1" sx={{ fontWeight: 'bold'}}>
+                                        Excluded Only for :
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                MSC :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            {row?.rules?.msc && row?.rules?.msc[0] ? (
+                                                row?.rules?.msc[0].split(',').map((text,i) => {
+                                                    return (
+                                                        <Typography key={i} component="div">
+                                                            <Label>{text}</Label>
+                                                        </Typography>
+                                                    )
+                                                })
+                                            ) : '-'}
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Gender :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            {row?.rules?.gender && row?.rules?.gender[0] ? (
+                                                <Typography component="div">
+                                                    <Label>{row?.rules?.gender[0]}</Label>
+                                                </Typography>
+                                            ) : '-'}
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Min Age :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            <Typography component="div">
+                                                {row?.rules?.min_age && row?.rules?.min_age[0] ? row?.rules?.min_age[0] : '-'}
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Max Age :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            <Typography component="div">
+                                                {row?.rules?.max_age && row?.rules?.max_age[0] ? row?.rules?.max_age[0] : '-'}
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Play :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            <Typography component="div">
+                                                {row?.rules?.plan && row?.rules?.plan[0] ? row?.rules?.plan[0] : '-'}
+                                            </Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Card>
+                    </Box>
+                ) : null }
+              {/* {open == true ? (
                 openEdit == false ? (
                   <Box sx={{ borderBottom: 1 }}>
-                    {Object.keys(row.rules).length ? (
                     <div>
                         <Typography variant="body" sx={{ fontWeight: 'bold' }}>
                           Excluded Only for :
@@ -561,11 +659,6 @@ export default function List(props: any) {
                           </Typography>
                         )}
                     </div>
-                    ) : (
-                      <Typography variant="body2" gutterBottom component="div">
-                        Excluded for All
-                      </Typography>
-                    )}
                   </Box>
                 ) : (
                   // <CollapseEdit row={row} index={index} plans={plans} />
@@ -752,7 +845,7 @@ export default function List(props: any) {
                     </Stack>
                   </Box>
                 )
-              ) : null}
+              ) : null} */}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -866,6 +959,8 @@ export default function List(props: any) {
     loadDataTableData();
   }, []);
 
+  const navigate = useNavigate()
+
   return (
     <Stack>
       <ImportForm />
@@ -874,9 +969,9 @@ export default function List(props: any) {
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
+                <TableCell align="left" width={50} />
                 <TableCell style={headStyle} align="left">
                   Service
                 </TableCell>
@@ -893,15 +988,17 @@ export default function List(props: any) {
                   Status
                 </TableCell>
                 <TableCell style={headStyle} align="left">
-                  Action
+                    <TableMoreMenu actions={
-                </TableCell>
+                        <>
-                <TableCell style={headStyle} align="left">
+                            <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/history`)}>
-                  <Link to={`/corporate/${corporate_id}/diagnosis-exclusions/history`}>
                                 <HistoryIcon />
-                  </Link>
+                                History
+                            </MenuItem>
+                        </>
+                    } />
                 </TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>

frontend/dashboard/src/pages/Corporates/DialogUpdateStatus.tsx

@@ -0,0 +1,189 @@
+import * as Yup from 'yup';
+import { enqueueSnackbar, useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+// @mui
+import { styled } from '@mui/material/styles';
+import { LoadingButton } from '@mui/lab';
+import { Box, Button, Grid, Stack, Typography, Chip, Autocomplete } from '@mui/material';
+import { CorporateService } from '../../@types/corporates';
+// components
+import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from '../../components/hook-form';
+import axios from '../../utils/axios';
+import { LaravelPaginatedData } from '../../@types/paginated-data';
+
+// import { Contact } from '../../../../@types/contact';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
+
+// @mui
+// components
+import MuiDialog from '../../components/MuiDialog';
+// React
+import { ReactElement } from 'react';
+
+// ----------------------------------------------------------------------
+
+const HeaderStyle = styled('header')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  justifyContent: 'space-between',
+}));
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  id: number;
+};
+
+type FormValuesProps = {
+  value: string;
+  active: boolean;
+};
+
+// ----------------------------------------------------------------------
+
+// ----------------------------------------------------------------------
+
+const DialogUpdateStatus = ({ title, openDialog, setOpenDialog, id }: MuiDialogProps) => {
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Corporate Status is required'),
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
+  const handleActivate = (id: number, status: string) => {
+    axios
+        .put(`/corporates/${id}/activation`, {
+          active: status == 'active',
+        })
+        .then((res) => {
+         console.log(res)
+        enqueueSnackbar(
+          'Succes',
+          { variant: 'success' }
+        );
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+  };
+
+  const onSubmit = async (row : ReturnType<typeof createData>) => {
+    try {
+      handleActivate(1, 'active')
+    } catch (error: any) {
+
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
+  function createData(corporateService: CorporateService): CorporateService {
+    return {
+      ...corporateService,
+    };
+  }
+  
+  const getContent = (props: { row: ReturnType<typeof createData> }) => (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={3}>
+        <Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
+          <Grid item xs={12}>
+            <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"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              // sx={{ textAlign: { xs: 'center', md: 'left' } }}
+              spacing={2}
+            >
+              <Stack direction="row" spacing={1}>
+                <Button
+                  sx={{
+                    boxShadow: 'none',
+                  }}
+                  variant="outlined"
+                  size="medium"
+                  fullWidth={true}
+                  onClick={() => setOpenDialog(false)}
+                >
+                  Cancel
+                </Button>
+                <LoadingButton
+                  sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
+                  type="submit"
+                  variant="contained"
+                  size="medium"
+                  fullWidth={true}
+                  loading={isSubmitting}
+                >
+                  Save
+                </LoadingButton>
+              </Stack>
+            </Stack>
+          </Box>
+        </Box>
+      </Stack>
+    </FormProvider>
+  );
+
+  return (
+    <MuiDialog
+      title={title}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+      maxWidth="sm"
+    />
+  );
+};
+
+export default DialogUpdateStatus;

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

@@ -496,7 +496,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
           <Card sx={{ p: 3 }}>
             <Stack spacing={3}>
               <Grid item xs={12}>
-                <Typography variant="h5" color="#19BBBB">Corporate Profile</Typography>
+                <Typography variant="h5" color={'primary'}>Corporate Profile</Typography>
               </Grid>
 
               <Typography variant='subtitle1' color="#637381">Corporate Profile*</Typography>
@@ -627,7 +627,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
             {/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Policy Detail</Typography></Card> */}
             <Card sx={{ p: 3 }}>
               <Stack spacing={3} mt={2}>
-                <Typography variant="h5" color="#19BBBB">Policy Detail</Typography>
+                <Typography variant="h5" color={'primary'}>Policy Detail</Typography>
 
                 <input type="hidden" name="policy_id" />
 
@@ -733,7 +733,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
         )}
 
       {/* Type contrack */}
-        <Grid item xs={12} md={12}>
+        {/* <Grid item xs={12} md={12}>
             <Card sx={{ p: 3 }}>
               <Stack direction="row" spacing={2}>
                   <Grid item xs={12} md={6}>
@@ -806,18 +806,32 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                 </Grid>
               </Stack>
             </Card>
-        </Grid>
+        </Grid> */}
 
-        <Grid item xs={12} md={4}>
+        <Grid item xs={12} md={12} >
+        <Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button
+              sx={{
+                margin: 1
+              }}
+              type="submit"
+              variant="contained"
+              size="large"
+              color='inherit'
+              onClick={() => navigate(`/corporates`)}
+            >
+              Cancel
+            </Button>
             <LoadingButton
               type="submit"
               variant="contained"
               size="large"
-            fullWidth={true}
+              // fullWidth={true}
               loading={isSubmitting}
             >
-            {!isEdit ? 'Save New Corporate' : 'Save Corporate'}
+              Save
             </LoadingButton>
+        </Stack>
         </Grid>
       </Grid>
     </FormProvider>

frontend/dashboard/src/pages/Corporates/History.tsx

@@ -139,7 +139,7 @@ export default function CustomizedAccordions() {
           aria-controls={`panel${index}d-content`}
           id={`panel${index}d-header`}
         >
-        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        <Typography variant='subtitle1'>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
         </AccordionSummary>
         <AccordionDetails>
         <TableHead>

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

@@ -24,24 +24,33 @@ import {
   Typography,
   Badge,
   Stack,
+  Dialog,
 } from '@mui/material';
+import * as Yup from 'yup';
+
+
+// icon
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import PublishIcon from '@mui/icons-material/Publish';
 import AddIcon from '@mui/icons-material/Add';
 import HistoryIcon from '@mui/icons-material/History';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 
 // hooks
 import useSettings from '../../hooks/useSettings';
 // components
 import Page from '../../components/Page';
+import DialogUpdateStatus from '../../components/DialogUpdateStatus';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
+import { useForm } from 'react-hook-form'
 import { Link, NavLink as RouterLink, useNavigate, useSearchParams } from 'react-router-dom';
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+import React, { ChangeEvent, ReactElement, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
 import { LaravelPaginatedData } from '../../@types/paginated-data';
@@ -51,11 +60,14 @@ import { fCurrency } from '../../utils/formatNumber';
 import { enqueueSnackbar } from 'notistack';
 import { fDate } from '@/utils/formatTime';
 import Popover from '@mui/material/Popover';
-import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 
 import ButtonStyles from '../../theme/overrides/Button';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import Iconify from '@/components/Iconify';
+import Label from '@/components/Label';
+import { FormProvider, RHFSelect } from '@/components/hook-form';
+import { LoadingButton } from '@mui/lab';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 
 export default function Corporates() {
@@ -63,6 +75,30 @@ export default function Corporates() {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate()
 
+  // Type 
+  type DataContent = {
+    code: string;
+    name: string;
+    id: string;
+    status: string|number;
+  };
+  
+  type MuiDialogProps = {
+    title?: {
+      name?: string;
+      icon?: string;
+    };
+    openDialog: boolean;
+    setOpenDialog: Function;
+    content?: ReactElement;
+    data?: DataContent[];
+  };
+
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
+
   // Called on every row to map the data to the columns
   function createData(corporate: Corporate): Corporate {
     return {
@@ -70,6 +106,7 @@ export default function Corporates() {
     };
   }
   
+
   // Dummy Default Data
   const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
@@ -161,6 +198,8 @@ export default function Corporates() {
       typeof value === 'string' ? value.split(',') : value
     );
   };
+
+
   // END FILTER SELECT
 
   // Component Search Input
@@ -258,7 +297,11 @@ export default function Corporates() {
               Import
             </Button> */}
           <Link to={'/corporates/create'}>
+<<<<<<< HEAD
+            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2' }}> 
+=======
             <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2', backgroundColor: '#19BBBB'  }}>
+>>>>>>> 8a3b0f3d1185955685128bc197a50193b837ddc1
               New Corporate
             </Button>
           </Link>
@@ -274,36 +317,154 @@ export default function Corporates() {
 
   // Component Row
   // Generate the every row of the table
+  const [isDialogOpen, setDialogOpen] = useState(false)
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  const [dataValue, setDataValue] = useState();
+  const [dataDescription, setDescriptionValue] = useState('');
+
+  
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason Edit is required'),
+  });
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+
+  const {
+      reset,
+      handleSubmit,
+      formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = async (row : any) => {
+    try {
+      console.log(dataValue)
+      handleUpdate(dataValue.id, dataValue.status, row.reason) 
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
+  const handleUpdate = (id: string, active: number, reason: string) => {
+      axios
+        .put(`/corporates/${id}/activation`, {
+          active: active, 
+          reason: reason
+        })
+        .then((res) => {
+          window.location.reload();
+        });
+  }
+
+
+  const getContent = () => (
+    <>
+       <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 1 ? 'inactive' : 'active'} this service ?</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={4} md={4}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={4} md={4} marginTop={2}>
+                        <Typography variant='inherit'>Corporate Name</Typography>
+                    </Grid>
+                    <Grid item xs={8} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <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>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setDialogOpen(false)}
+            >
+                Cancel
+            </Button>
+
+            {dataValue?.status == 1 ?  
+              <LoadingButton
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+                type="submit"
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                loading={isSubmitting}
+                color='error'
+              >
+              Inactive
+            </LoadingButton>
+            : 
+            <LoadingButton
+              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+              type="submit"
+              variant="contained"
+              size="medium"
+              fullWidth={true}
+              loading={isSubmitting}
+              color='success'
+            >
+            Active
+          </LoadingButton>
+          
+            
+            }
+            </Stack>
+        </Stack>
+        
+        </FormProvider>
+    </>
+  );
+
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
     const navigate = useNavigate()
 
-    const handleActivate = (model: any, status: string) => {
+    
-      axios
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
-        .put(`/corporates/${row.id}/activation`, {
+      setDialogOpen(isOpen)
-          // service_code: service.service_code,
+      setDataValue(dataValue)
-          active: status == 'active',
+      setDescriptionValue('Are you sure to inactive this coporate ?')
-        })
-        .then((res) => {
-          setDataTableData({
-            ...dataTableData,
-            data: dataTableData.data.map((model) => {
-              let updatedModel = model;
-              if (row.id == model.id) {
-                updatedModel.active = res.data.corporate.active;
-              }
-              return updatedModel;
-            }),
-          });
-        })
-        .catch((error) => {
-          // console.log('asdasd', error.response.data.message)
-          enqueueSnackbar(
-            error.response.data.message ?? error.message ?? 'Failed Processing Request',
-            { variant: 'error' }
-          );
-        });
     };
 
     return (
@@ -318,31 +479,37 @@ export default function Corporates() {
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">
             {row.active == 1 && (
-              <Button
+              <Label color='success'>
-                variant="outlined"
-                color="success"
-                size="small"
-                onClick={() => {
-                  handleActivate(row, 'inactive');
-                }}
-              >
                 Active
-              </Button>
+              </Label>
+              // <Button
+              //   variant="outlined"
+              //   color="success"
+              //   size="small"
+              //   onClick={() => {
+              //     handleActivate(row, 'inactive');
+              //   }}
+              // >
+              //   Active
+              // </Button>
             )}
             {row.active != 1 && (
-              <Button
+              <Label color='error'>
-                variant="outlined"
-                color="error"
-                size="small"
-                onClick={() => {
-                  handleActivate(row, 'active');
-                }}
-              >
                 Inactive
-              </Button>
+              </Label>
+              // <Button
+              //   variant="outlined"
+              //   color="error"
+              //   size="small"
+              //   onClick={() => {
+              //     handleActivate(row, 'active');
+              //   }}
+              // >
+              //   Inactive
+              // </Button>
             )}
           </TableCell>
-          <TableCell align="right">
+          <TableCell align="right" sx={{borderBottom: 'unset'}}>
             {/* <Stack direction="row" justifyContent="flex-end" spacing={1}>
               <Link to={`/corporates/${row.id}/edit`}>
                 <Button variant="outlined" color="primary" size="small">
@@ -360,10 +527,10 @@ export default function Corporates() {
             </Stack> */}
            <TableMoreMenu actions={
             <>
-              {/* <MenuItem onClick={() => navigate(`/corporates/${row.id}/edit`)}>
+              <MenuItem onClick={() => setOpen(!open)}>
-                <EditOutlinedIcon />
+                <FindInPageOutlinedIcon />
-                View
+                Detail
-              </MenuItem> */}
+              </MenuItem>
               <MenuItem onClick={() => navigate(`/corporates/${row.id}/edit`)}>
                 <EditOutlinedIcon />
                 Edit
@@ -376,46 +543,50 @@ export default function Corporates() {
                 <HistoryIcon />
                 History
               </MenuItem>
+              <MenuItem onClick={() => handleActivate(true, {code: row.code, name: row.name, id:row.id, status: row.active})}>
+                <CachedOutlinedIcon />
+                Update Status
+              </MenuItem>
             </>
            } />
           </TableCell>
         </TableRow>
-        {/* COLLAPSIBLE ROW */}
+
+        
+
+        {/* COLLAPSIBLE Detail ROW */}
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={9999}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1, borderBottom: 1, pb: 2 }}>
+              <Card sx={{paddingX: 2, paddingY: 2, marginBottom:3}}>
+                <Box sx={{ margin: 1, pb: 2 }}>
+                  <Grid container>
+                    <Grid item xs={6}>
                       <Typography sx={{ fontWeight: '600', mb: 1 }}>Current Policy Detail</Typography>
                       <Grid container>
-                  <Grid item xs={6}>
+                        <Grid item xs={4}>
-                    <Grid container>
+                          Policy Code :
-                      <Grid item xs={6}>
-                        Policy Code
                         </Grid>
                         <Grid item xs={6}>
-                        : {row.current_policy?.code}
+                          {row.current_policy?.code}
                         </Grid>
 
-                      <Grid item xs={6}>
+                        <Grid item xs={4}>
-                        Number of Plan
+                          Number of Plan :
                         </Grid>
                         <Grid item xs={6}>
-                        : {row.corporate_plans_count}
+                          {row.corporate_plans_count}
                         </Grid>
 
-                      <Grid item xs={6}>
+                        <Grid item xs={4}>
-                        Number of Benefit
+                          Number of Benefit :
                         </Grid>
                         <Grid item xs={6}>
-                        : {row.corporate_benefits_count}
+                          {row.corporate_benefits_count}
-                      </Grid>
-                    </Grid>
                         </Grid>
 
-                  <Grid item xs={6}>
+                        <Grid item xs={4}>
-                    <Grid container>
+                          Period :
-                      <Grid item xs={6}>
-                        Period
                         </Grid>
                         <Grid item xs={6}>
                           <Box sx={{ display: 'flex', placeContent: 'space-between' }}>
@@ -424,14 +595,14 @@ export default function Corporates() {
                           </Box>
                         </Grid>
 
-                      <Grid item xs={6}>
+                        <Grid item xs={4}>
-                        Total Premi
+                          Total Premi :
                         </Grid>
                         <Grid item xs={6}>
                           {row.current_policy ? (
                             <Box sx={{ display: 'flex', placeContent: 'space-between' }}>
                               <span>
-                              : {fCurrency(row.current_policy?.total_premi).split(' ')[0]}
+                                {fCurrency(row.current_policy?.total_premi).split(' ')[0]}
                               </span>
                               <span>{fCurrency(row.current_policy?.total_premi).split(' ')[1]}</span>
                             </Box>
@@ -440,14 +611,14 @@ export default function Corporates() {
                           )}
                         </Grid>
 
-                      <Grid item xs={6}>
+                        <Grid item xs={4}>
-                        Minimal Deposit
+                          Minimal Deposit :
                         </Grid>
                         <Grid item xs={6}>
                           {row.current_policy ? (
                             <Box sx={{ display: 'flex', placeContent: 'space-between' }}>
                               <span>
-                              : {fCurrency(row.current_policy?.minimal_deposit_net).split(' ')[0]}
+                                {fCurrency(row.current_policy?.minimal_deposit_net).split(' ')[0]}
                               </span>
                               <span>
                                 {fCurrency(row.current_policy?.minimal_deposit_net).split(' ')[1]}
@@ -457,15 +628,14 @@ export default function Corporates() {
                             '-'
                           )}
                         </Grid>
-
+                        <Grid item xs={4}>
-                      <Grid item xs={6}>
+                          Corporate Limit :
-                        Corporate Limit
                         </Grid>
                         <Grid item xs={6}>
                           {row.current_policy ? (
                             <Box sx={{ display: 'flex', placeContent: 'space-between' }}>
                               <span>
-                              : {fCurrency(row.current_policy?.limit_balance).split(' ')[0]}
+                                {fCurrency(row.current_policy?.limit_balance).split(' ')[0]}
                               </span>
                               <span>
                                 {fCurrency(row.current_policy?.limit_balance).split(' ')[1]}
@@ -477,47 +647,28 @@ export default function Corporates() {
                         </Grid>
                       </Grid>
                     </Grid>
-                </Grid>
 
-                <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Member Detail</Typography>
+                    <Grid item xs={6}>
+                      <Typography sx={{ fontWeight: '600', mb: 1 }}>Member Detail</Typography>
                       <Grid container>
                         <Grid item xs={6}>
-                    <Grid container>
+                          Total Member :
-                      <Grid item xs={6}>
-                        Total Member
                         </Grid>
                         <Grid item xs={6}>
-                        : {row.employees_count}
+                          {row.employees_count}
+                        </Grid>
+                        <Grid item xs={6}>
+                          Total Claim This Month  : 
+                        </Grid>
+                        <Grid item xs={6}>
+                          0
                         </Grid>
                       </Grid>
                     </Grid>
 
-                  <Grid item xs={6}>
-                    <Grid Grid container>
-                      <Grid item xs={6}>
-                        Total Claim This Month
                   </Grid>
-                      <Grid item xs={6}>
-                        : 0
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid>
-
-                {/* <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
-                <Grid container>
-                  <Grid item xs={12}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Sub Corporates ({row.sub_corporates.length})
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.sub_corporates?.map((corp) => corp.name).join(', ')}
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid> */}
                 </Box>
+              </Card>
             </Collapse>
           </TableCell>
         </TableRow>
@@ -594,6 +745,15 @@ export default function Corporates() {
           <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
         {/* </Card> */}
       </Container>
+      <DialogUpdateStatus 
+        openDialog={isDialogOpen}
+        setOpenDialog={setDialogOpen} 
+        title={titles}
+        data={dataValue}
+        description={dataDescription}
+        content={getContent()}
+      />
     </Page>
+
   );
 }

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

@@ -1,4 +1,5 @@
 // @mui
+import * as Yup from 'yup';
 import {
   Box,
   Button,
@@ -28,17 +29,22 @@ import {
   ButtonGroup,
   Grid,
   Tooltip,
+  Autocomplete,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { Form, useNavigate, Link, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { Plan } from '../../../@types/corporates';
@@ -47,6 +53,11 @@ import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
 import DialogLog from './sections/DialogLog';
+import { FormProvider, RHFSelect } from '@/components/hook-form';
+import { Download, Edit } from '@mui/icons-material';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import Label from '@/components/Label';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus';
 
 export default function CorporatePlanList() {
   const { themeStretch } = useSettings();
@@ -54,6 +65,7 @@ export default function CorporatePlanList() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
 
+  const navigate = useNavigate()
   const [openDialog, setOpenDialog] = useState(false);
   const [dialogTitle, setDialogTitle] = useState('');
   const [isDialog, setIsDialog] = useState('');
@@ -207,12 +219,117 @@ export default function CorporatePlanList() {
         />
         {!currentImportFileName && (
           <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            
+            <Grid container spacing={2}>
+              <Grid item xs={3.5}>
                 <SearchInput onSearch={applyFilter} />
-            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+              </Grid>
+              <Grid item xs={2}>
+                <Autocomplete
+                  id="combo-box-demo"
+                  options={[
+                    {
+                      value: 'IP',
+                      label: 'Inpatient'
+                    },
+                    {
+                      value: 'OP',
+                      label: 'Outpatient'
+                    },
+                  ]}
+                  multiple
+                  limitTags={1}
+                  fullWidth
+                  getOptionLabel={(option) => option.label}
+                  isOptionEqualToValue={(option, value) =>
+                    option.value === value.value
+                  }
+                  renderInput={(params) => (
+                    <TextField {...params} label="Service" variant="outlined" />
+                  )}
+                />
+              </Grid>
+              <Grid item xs={1.5}>
+                <Autocomplete
+                    id="combo-box-demo"
+                    options={[
+                      {
+                        value: 'IP',
+                        label: 'IP-001'
+                      },
+                      {
+                        value: 'OP',
+                        label: 'OP-001'
+                      },
+                    ]}
+                    multiple
+                    limitTags={1}
+                    fullWidth
+                    getOptionLabel={(option) => option.label}
+                    isOptionEqualToValue={(option, value) =>
+                      option.value === value.value
+                    }
+                    renderInput={(params) => (
+                      <TextField {...params} label="Plan" variant="outlined" />
+                    )}
+                  />
+              </Grid>
+              <Grid item xs={1.5}>
+                <Autocomplete
+                  id="combo-box-demo"
+                  options={[
+                    {
+                      value: 'IP',
+                      label: 'IP-001'
+                    },
+                    {
+                      value: 'OP',
+                      label: 'OP-001'
+                    },
+                  ]}
+                  multiple
+                  limitTags={1}
+                  fullWidth
+                  getOptionLabel={(option) => option.label}
+                  isOptionEqualToValue={(option, value) =>
+                    option.value === value.value
+                  }
+                  renderInput={(params) => (
+                    <TextField {...params} label="Code" variant="outlined" />
+                  )}
+                />
+              </Grid>
+              <Grid item xs={1.5}>
+                <Autocomplete
+                    id="combo-box-demo"
+                    options={[
+                      {
+                        value: 'IP',
+                        label: 'IP-001'
+                      },
+                      {
+                        value: 'OP',
+                        label: 'OP-001'
+                      },
+                    ]}
+                    multiple
+                    limitTags={1}
+                    fullWidth
+                    getOptionLabel={(option) => option.label}
+                    isOptionEqualToValue={(option, value) =>
+                      option.value === value.value
+                    }
+                    renderInput={(params) => (
+                      <TextField {...params} label="Type" variant="outlined" />
+                    )}
+                  />
+              </Grid>
+              <Grid item xs={1.5}>
                 <Button
                 id="import-button"
-              variant="outlined"
+                variant="contained"
-              startIcon={<AddIcon />}
+                startIcon={<Download />}
+                fullWidth={true}
                 sx={{ p: 1.8 }}
                 aria-controls={createMenu ? 'basic-menu' : undefined}
                 aria-haspopup="true"
@@ -234,6 +351,10 @@ export default function CorporatePlanList() {
                 <MenuItem onClick={() => {handleGetTemplate('plan-benefit')}}>Download Template</MenuItem>
                 <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Plans & Benefit</MenuItem>
               </Menu>
+              </Grid>
+            </Grid>
+            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+            
           </Stack>
         )}
 
@@ -286,47 +407,51 @@ export default function CorporatePlanList() {
     };
   }
 
+  type DataContent = {
+    code: string;
+    name: string;
+    id: number;
+    status: string|number;
+  };
+
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
+
   // Generate the every row of the table
+  const [isDialogOpen, setDialogOpen] = useState(false)
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  const [dataValue, setDataValue] = useState('');
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
 
-    const handleActivate = (model: any, status: string) => {
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
-      axios
+      setDialogOpen(isOpen)
-        .put(`/plans/${row.id}/activation`, {
+      setDataValue(dataValue)
-          // service_code: service.service_code,
+      setDescriptionValue('Are you sure to inactive this service ?')
-          active: status == 'active',
+      setUrl(url)
-        })
-        .then((res) => {
-          setDataTableData({
-            ...dataTableData,
-            data: dataTableData.data.map((model) => {
-              let updatedModel = model;
-              if (row.id == model.id) {
-                updatedModel.active = res.data.plan.active;
-              }
-              return updatedModel;
-            }),
-          });
-        })
-        .catch((error) => {
-          // console.log('asdasd', error.response.data.message)
-          enqueueSnackbar(
-            error.response.data.message ?? error.message ?? 'Failed Processing Request',
-            { variant: 'error' }
-          );
-        });
     };
     
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TableRow>
-          <TableCell>
+          {/* <TableCell> */}
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+            {/* <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
+            </IconButton> */}
+          {/* </TableCell> */}
+          <TableCell sx={{ borderBottom: '1px solid rgba(145, 158, 171, 0.24)' }} align="left">
+            {row.service_code}
           </TableCell>
-          <TableCell align="left">{row.service_code}</TableCell>
+
           <TableCell align="left">{row.corporate_plan_id}</TableCell>
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.type}</TableCell>
@@ -334,41 +459,27 @@ export default function CorporatePlanList() {
           <TableCell align="left">{row.limit_rules}</TableCell>
 
           <TableCell align="center">
-            {row.active == 1 && (
+            {row.active == 1 ? 
-              <Button
+            <Label color='success'>Active</Label> : 
-                variant="outlined"
+            <Label color='error'>Inactive</Label>}
-                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>
-            )}
           </TableCell>
           <TableCell align="center">
-          <Tooltip title="History">
+            <TableMoreMenu actions={
-            <Link to={`/corporate/${corporate_id}/plans/${row.id}/history`}>
+              <>
+                <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/corporate-plans/${row.id}/edit`)}>
+                  <Edit />
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/plans/${row.id}/history`)}>
                   <HistoryIcon />
-            </Link>
+                  History
-          </Tooltip>
+                </MenuItem>
+                <MenuItem onClick={() => handleActivate(true, {code: row.code, name: row.service_code, id:row.id, status: row.active})}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </MenuItem>
+              </>
+            } />
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
@@ -689,6 +800,20 @@ export default function CorporatePlanList() {
     fontWeight: 'bold',
   };
 
+  
+  const onSubmit = async (row : any) => {
+    try {
+      handleUpdate(dataValue.status, dataValue.id, row.reason) 
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
   const applyFilter = async (searchFilter: string) => {
     await loadDataTableData({ search: searchFilter });
     setSearchParams({ search: searchFilter });
@@ -704,17 +829,134 @@ export default function CorporatePlanList() {
     loadDataTableData();
   }, []);
 
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason Edit is required'),
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+
+  
+  const {
+      reset,
+      handleSubmit,
+      formState: { isSubmitting },
+  } = methods;
+
+  const handleUpdate = (active: number, id: number, reason:string) => {
+    console.log(active)
+    axios
+      .put(`/plans/${id}/activation`, {
+        active: active, 
+        reason: reason
+      })
+      .then((res) => {
+        window.location.reload();
+      });
+}
+
+  const getContent = () => (
+    <>
+       <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 1 ? 'inactive' : 'active'} this service ?</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={4} md={4}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={4} md={4} marginTop={2}>
+                        <Typography variant='inherit'>Service Name</Typography>
+                    </Grid>
+                    <Grid item xs={8} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <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>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setDialogOpen(false)}
+            >
+                Cancel
+            </Button>
+
+            {dataValue?.status == 1?  
+              <LoadingButton
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+                type="submit"
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                loading={isSubmitting}
+                color='error'
+              >
+              Inactive
+            </LoadingButton>
+            : 
+            <LoadingButton
+              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+              type="submit"
+              variant="contained"
+              size="medium"
+              fullWidth={true}
+              loading={isSubmitting}
+              color='success'
+            >
+            Active
+          </LoadingButton>
+          
+            
+            }
+            </Stack>
+        </Stack>
+        
+        </FormProvider>
+    </>
+  );
+
   return (
     <Stack>
       <ImportForm />
 
-      <Card>
+      {/* <Card> */}
         {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
+                {/* <TableCell style={headStyle} align="left" /> */}
                 <TableCell style={headStyle} align="left">
                   Service
                 </TableCell>
@@ -737,7 +979,7 @@ export default function CorporatePlanList() {
                   Action
                 </TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>
@@ -765,7 +1007,7 @@ export default function CorporatePlanList() {
         </TableContainer>
 
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-      </Card>
+      {/* </Card> */}
 
       {isDialog === 'edit' && (
         <DialogLog
@@ -775,6 +1017,16 @@ export default function CorporatePlanList() {
           title={{ name: 'Reason For Update' }}
         />
       )}
+
+      <DialogUpdateStatus 
+        openDialog={isDialogOpen}
+        setOpenDialog={setDialogOpen} 
+        title={titles}
+        data={dataValue}
+        description={dataDescription}
+        content={getContent()}
+        // maxWidth='50px'
+      />
     </Stack>
   );
 }

frontend/dashboard/src/pages/Corporates/Plan/sections/History.tsx

@@ -121,11 +121,11 @@ export default function CustomizedAccordions() {
           },
           {
             name: corporate?.name ?? '-',
-            href: '/corporate/' + corporate_id + '/plans',
+            href: '/corporates/' + corporate_id + '/plans',
           },
           {
-            name: 'Audittrail Corporate',
+            name: 'Corporate Dashboard',
-            href: '/corporate/' + corporate_id + '/plans',
+            href: '/corporates/' + corporate_id + '/plans',
           },
         ]}
       />

frontend/dashboard/src/pages/Corporates/Services/Create.tsx

@@ -44,7 +44,7 @@ import {
   RHFCustomMultiCheckbox,
 } from '../../../components/hook-form';
 import { Controller, useForm } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
 import Page from '../../../components/Page';
 import useSettings from '../../../hooks/useSettings';
@@ -150,6 +150,8 @@ export default function Divisions() {
       });
   };
 
+  const navigate = useNavigate();
+
   const handleConfigExclusion = (
     event: ChangeEvent<HTMLInputElement>,
     service: any,
@@ -378,41 +380,36 @@ export default function Divisions() {
           },
           {
             name: corporate?.name ?? '-',
-            href: '/corporate/' + corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Services',
-            href: '/corporate/' + corporate_id + '/services',
+            href: '/corporates/' + corporate_id + '/services',
           },
           {
             name: service_code ?? '-',
-            href: '/corporate/' + corporate_id + '/services/' + service_code,
+            href: '/corporates/' + corporate_id + '/services/' + service_code,
           },
         ]}
       />
 
       <Grid container spacing={2}>
         <Grid item xs={12}>
-          <Card sx={{ p: 2 }}>
+          <Card>
-            {/* <FormProvider methods={methods}> */}
+            <Grid container padding={2}>
-            <Box sx={{ borderBottom: 1 }}>
+              <Grid item xs={12} paddingY={2}>
-              <Stack>
+                <Typography color={'#19BBBB'} variant='subtitle1'>General Practitioner*</Typography>
-                <TableContainer sx={{ mb: 4 }}>
+              </Grid>
-                  <Table sx={{ minWidth: 650 }} size="small">
+              <Grid item xs={6}>
-                    <TableHead>
+                <Typography variant='subtitle1' color={'#637381'}> External Doctor </Typography>
-                      <TableRow>
+              </Grid>
-                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
+
-                          General Practitioner
+              <Grid item xs={6}>
-                        </TableCell>
+                <Typography variant='subtitle1' color={'#637381'}> Internal Doctor </Typography>
-                      </TableRow>
+              </Grid>
-                    </TableHead>
+
-                    <TableBody>
+              {/* Dokter external online */}
-                      <TableRow>
+              <Grid item xs={6} paddingX={2} paddingY={2}>
-                        <TableCell colSpan={2}>External Doctor</TableCell>
-                        <TableCell colSpan={2}>Internal Doctor</TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell>
                 <FormControlLabel
                   control={
                     <Checkbox
@@ -425,22 +422,9 @@ export default function Divisions() {
                   }
                   label="Online"
                 />
-                        </TableCell>
+              </Grid>
-                        <TableCell>
+              {/* Dokter internal online */}
-                          <FormControlLabel
+              <Grid item xs={6} paddingX={2} paddingY={2}>
-                            control={
-                              <Checkbox
-                                checked={service?.configurations?.gp_external_doctor_offline == '1'}
-                                onChange={(event) => {
-                                  handleConfigChange(event, service);
-                                }}
-                                name="gp_external_doctor_offline"
-                              />
-                            }
-                            label="Offline"
-                          />
-                        </TableCell>
-                        <TableCell>
                 <FormControlLabel
                   control={
                     <Checkbox
@@ -453,8 +437,9 @@ export default function Divisions() {
                   }
                   label="Online"
                 />
-                        </TableCell>
+              </Grid>
-                        <TableCell>
+              {/* Dokter internal offline */}
+              <Grid item xs={6} paddingX={2} paddingY={2}>
                 <FormControlLabel
                   control={
                     <Checkbox
@@ -467,28 +452,45 @@ export default function Divisions() {
                   }
                   label="Offline"
                 />
-                        </TableCell>
+              </Grid>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </TableContainer>
 
-                <TableContainer sx={{ mb: 4 }}>
+              {/* Dokter external offline */}
-                  <Table sx={{ minWidth: 650 }} size="small">
+              <Grid item xs={6} paddingX={2} paddingY={2}>
-                    <TableHead>
+                <FormControlLabel
-                      <TableRow>
+                  control={
-                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
+                    <Checkbox
-                          Specialist Practitioner
+                      checked={service?.configurations?.gp_external_doctor_offline == '1'}
-                        </TableCell>
+                      onChange={(event) => {
-                      </TableRow>
+                        handleConfigChange(event, service);
-                    </TableHead>
+                      }}
-                    <TableBody>
+                      name="gp_external_doctor_offline"
-                      <TableRow>
+                    />
-                        <TableCell colSpan={2}>External Doctor</TableCell>
+                  }
-                        <TableCell colSpan={2}>Internal Doctor</TableCell>
+                  label="Offline"
-                      </TableRow>
+                />
-                      <TableRow>
+              </Grid>
-                        <TableCell>
+            </Grid>
+          </Card>
+
+          {/* Specialist Practitioner* */}
+          <Card sx={{'marginTop': 5}}>
+            <Grid container padding={2}>
+              <Grid item xs={11} paddingY={2}>
+                <Typography color={'#19BBBB'} variant='subtitle1'>Specialist Practitioner*</Typography>
+              </Grid>
+              <Grid item xs={1}>
+                <Button variant='outlined' color={'inherit'} onClick={() => { setSpecialityModal(true); }}>Specialities</Button>
+              </Grid>
+              <Grid item xs={6}>
+                <Typography variant='subtitle1' color={'#637381'}> External Doctor </Typography>
+              </Grid>
+
+              <Grid item xs={6}>
+                <Typography variant='subtitle1' color={'#637381'}> Internal Doctor </Typography>
+              </Grid>
+
+              {/* Dokter external online */}
+              <Grid item xs={6} paddingX={2} paddingY={2}>
                   <FormControlLabel
                     control={
                       <Checkbox
@@ -501,22 +503,9 @@ export default function Divisions() {
                     }
                     label="Online"
                   />
-                        </TableCell>
+              </Grid>
-                        <TableCell>
+              {/* Dokter internal online */}
-                          <FormControlLabel
+              <Grid item xs={6} paddingX={2} paddingY={2}>
-                            control={
-                              <Checkbox
-                                checked={service?.configurations?.sp_external_doctor_offline == '1'}
-                                onChange={(event) => {
-                                  handleConfigChange(event, service);
-                                }}
-                                name="sp_external_doctor_offline"
-                              />
-                            }
-                            label="Offline"
-                          />
-                        </TableCell>
-                        <TableCell>
                   <FormControlLabel
                     control={
                       <Checkbox
@@ -529,8 +518,9 @@ export default function Divisions() {
                     }
                     label="Online"
                   />
-                        </TableCell>
+              </Grid>
-                        <TableCell>
+              {/* Dokter internal offline */}
+              <Grid item xs={6} paddingX={2} paddingY={2}>
                 <FormControlLabel
                   control={
                     <Checkbox
@@ -543,28 +533,107 @@ export default function Divisions() {
                   }
                   label="Offline"
                 />
-                        </TableCell>
+              </Grid>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell colSpan={4}>
-                          <Typography
-                            onClick={() => {
-                              setSpecialityModal(true);
-                            }}
-                          >
-                            <Button variant='contained'>Specialities</Button>
-                          </Typography>
-                          <Typography sx={{mt: 2}}>
-                            {(service.selected_specialities && service.selected_specialities != '')
-                              ? Object.keys(service.selected_specialities).length + ' Spesialis Diijinkan : {' + Object.values(service.selected_specialities).join(', ') + '}'
-                              : 'Tidak Ada Spesialis yang diijinkan'}
-                          </Typography>
-                        </TableCell>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </TableContainer>
 
+              {/* Dokter external offline */}
+              <Grid item xs={6} paddingX={2} paddingY={2}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={service?.configurations?.sp_external_doctor_offline == '1'}
+                      onChange={(event) => {
+                        handleConfigChange(event, service);
+                      }}
+                      name="sp_external_doctor_offline"
+                    />
+                  }
+                  label="Offline"
+                />
+              </Grid>
+            </Grid>
+          </Card>
+
+          {/* Medicine */}
+          <Card sx={{'marginTop': 5}}>
+            <Grid container padding={2}>
+              <Grid item xs={12} paddingY={2}>
+                <Typography color={'#19BBBB'} variant='subtitle1'>Medicine*</Typography>
+              </Grid>
+              {/* Medicine */}
+              <Grid item xs={12} paddingX={2} paddingY={2}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={service?.configurations?.vitamins == '1'}
+                      onChange={(event) => {
+                        handleConfigChange(event, service);
+                      }}
+                      name="vitamins"
+                    />
+                  }
+                  label="Suplemen"
+                />
+              </Grid>
+              {/* Dokter internal online */}
+              <Grid item xs={12} paddingX={2} paddingY={2}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={service?.configurations?.delivery_fee == '1'}
+                      onChange={(event) => {
+                        handleConfigChange(event, service);
+                      }}
+                      name="delivery_fee"
+                    />
+                  }
+                  label="Delivery Fee"
+                />
+              </Grid>
+            </Grid>
+          </Card>
+
+          {/* Free Admin Fee* */}
+          <Card sx={{'marginTop': 5}}>
+            <Grid container padding={2}>
+              <Grid item xs={12} paddingY={2}>
+                <Typography color={'#19BBBB'} variant='subtitle1'>Free Admin Fee*</Typography>
+              </Grid>
+              <Grid item xs={12} paddingX={2} paddingY={2}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={service?.configurations?.general_practitioner_fee == '1'}
+                      onChange={(event) => {
+                        handleConfigChange(event, service);
+                      }}
+                      name="general_practitioner_fee"
+                    />
+                  }
+                  label="General Practitioner"
+                />
+              </Grid>
+              <Grid item xs={12} paddingX={2} paddingY={2}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={
+                        service?.configurations?.specialist_practitioner_fee == '1'
+                      }
+                      onChange={(event) => {
+                        handleConfigChange(event, service);
+                      }}
+                      name="specialist_practitioner_fee"
+                    />
+                  }
+                  label="Specialist Practitioner"
+                />
+              </Grid>
+            </Grid>
+          </Card>
+
+          {/* <FormProvider methods={methods}> */}
+          <Box>
+            <Stack>
               <Dialog
                 open={specialityModal}
                 onClose={() => {
@@ -573,8 +642,8 @@ export default function Divisions() {
                 sx={{
                   '& .MuiDialog-paper': {
                     width: '100%',
-                      maxWidth: 1500,
+                    maxWidth: '90%',
-                      maxHeight: 750,
+                    maxHeight: '90%',
                     bgcolor: 'background.paper',
                     boxShadow: 24,
                   },
@@ -582,43 +651,50 @@ export default function Divisions() {
                 aria-labelledby="modal-modal-title"
                 aria-describedby="modal-modal-description"
               >
-                  <DialogTitle>
+                <DialogTitle sx={{
+                  backgroundColor: '#19BBBB'
+                }}>
                   <Stack
                     spacing={2}
                     direction="row"
                     justifyContent={'space-between'}
-                      sx={{ mb: 4, pb: 2, borderBottom: 1, borderColor: 'divider' }}
+                    sx={{ mb: 2, pb: 1, }}
                     alignItems="center"
                   >
-                      <Typography id="modal-modal-title" variant="h6" component="h2">
+                    <Typography id="modal-modal-title" variant="h6" color={'#FFF'} component="h2">
                       Specialities
                     </Typography>
                     <Button
-                        sx={{ color: 'red' }}
+                      sx={{ color: '#FFF' }}
                       aria-label="close"
                       onClick={() => setSpecialityModal(false)}
                     >
-                        <CancelIcon />
+                      X
                     </Button>
                   </Stack>
                 </DialogTitle>
-                  <DialogContent>
+                <DialogContent sx={{p:4, mt: 2}}>
                   <Box>
                     <TableContainer component={Paper}>
                       <Table aria-label="simple table">
                         <TableHead>
                           <TableRow>
-                              <TableCell>Covered</TableCell>
+                            <TableCell>
-                              <TableCell sx={{ width: 10 }}>Nama Spesialisasi</TableCell>
+                              <Checkbox 
-                              <TableCell align="center">MSC</TableCell>
+                                
-                              <TableCell align="center">Gender</TableCell>
+                              />
-                              <TableCell sx={{ width: 100 }} align="center">
+                              
+                            </TableCell>
+                            <TableCell sx={{ width: 10 }}>Specialitation</TableCell>
+                            <TableCell>MSC</TableCell>
+                            <TableCell>Gender</TableCell>
+                            <TableCell sx={{ width: 100 }}>
                               Min Age
                             </TableCell>
-                              <TableCell sx={{ width: 100 }} align="center">
+                            <TableCell sx={{ width: 100 }}>
                               Max Age
                             </TableCell>
-                              <TableCell align="center">Plan</TableCell>
+                            <TableCell>Plan</TableCell>
                             <TableCell />
                           </TableRow>
                         </TableHead>
@@ -626,7 +702,6 @@ export default function Divisions() {
                           {specialities.map((row: any, index: any) => (
                             <TableRow
                               key={row.id}
-                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                             >
                               <TableCell>
                                 <Checkbox
@@ -641,8 +716,8 @@ export default function Divisions() {
                               <TableCell component="th" scope="row">
                                 {row.name}
                               </TableCell>
-                                <TableCell align="center">
+                              <TableCell>
-                                  <Stack direction="row" spacing={2} justifyContent="center">
+                                <Stack direction="row" spacing={2}>
                                   <FormControlLabel
                                     control={
                                       <Checkbox
@@ -687,8 +762,8 @@ export default function Divisions() {
                                   />
                                 </Stack>
                               </TableCell>
-                                <TableCell align="center">
+                              <TableCell>
-                                  <Stack direction="row" spacing={2} justifyContent="center">
+                                <Stack direction="row" spacing={2}>
                                   <FormControlLabel
                                     control={
                                       <Checkbox
@@ -837,8 +912,8 @@ export default function Divisions() {
                               </TableCell>
                               <TableCell align="center">
                                 <Button
-                                    variant="outlined"
+                                  variant="contained"
-                                    color="primary"
+                                  color="inherit"
                                   onClick={(event) => {
                                     handleConfigExclusion(event, service, row, '', 'one_row');
                                   }}
@@ -854,104 +929,35 @@ export default function Divisions() {
                   </Box>
                 </DialogContent>
               </Dialog>
-
-                <TableContainer sx={{ mb: 4 }}>
-                  <Table sx={{ minWidth: 650 }} size="small">
-                    <TableHead>
-                      <TableRow>
-                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
-                          Medicine
-                        </TableCell>
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      <TableRow>
-                        <TableCell width={'25%'}>
-                          <FormControlLabel
-                            control={
-                              <Checkbox
-                                checked={service?.configurations?.vitamins == '1'}
-                                onChange={(event) => {
-                                  handleConfigChange(event, service);
-                                }}
-                                name="vitamins"
-                              />
-                            }
-                            label="Vitamins"
-                          />
-                        </TableCell>
-                        <TableCell width={'25%'}>
-                          <FormControlLabel
-                            control={
-                              <Checkbox
-                                checked={service?.configurations?.delivery_fee == '1'}
-                                onChange={(event) => {
-                                  handleConfigChange(event, service);
-                                }}
-                                name="delivery_fee"
-                              />
-                            }
-                            label="Delivery Fee"
-                          />
-                        </TableCell>
-                        <TableCell width={'25%'} />
-                        <TableCell width={'25%'} />
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </TableContainer>
-
-                <TableContainer sx={{ mb: 4 }}>
-                  <Table sx={{ minWidth: 650 }} size="small">
-                    <TableHead>
-                      <TableRow>
-                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
-                          Free Admin Fee
-                        </TableCell>
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      <TableRow>
-                        <TableCell width={'25%'}>
-                          <FormControlLabel
-                            control={
-                              <Checkbox
-                                checked={service?.configurations?.general_practitioner_fee == '1'}
-                                onChange={(event) => {
-                                  handleConfigChange(event, service);
-                                }}
-                                name="general_practitioner_fee"
-                              />
-                            }
-                            label="General Practitioner"
-                          />
-                        </TableCell>
-                        <TableCell width={'25%'}>
-                          <FormControlLabel
-                            control={
-                              <Checkbox
-                                checked={
-                                  service?.configurations?.specialist_practitioner_fee == '1'
-                                }
-                                onChange={(event) => {
-                                  handleConfigChange(event, service);
-                                }}
-                                name="specialist_practitioner_fee"
-                              />
-                            }
-                            label="Specialist Practitioner"
-                          />
-                        </TableCell>
-                        <TableCell width={'25%'} />
-                        <TableCell width={'25%'} />
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </TableContainer>
             </Stack>
           </Box>
           {/* </FormProvider> */}
-          </Card>
+          
+          <Grid item xs={12} md={12} mt={3}>
+          <Stack direction="row" alignItems="center" justifyContent="flex-end">
+              <Button
+                sx={{
+                  margin: 1
+                }}
+                type="submit"
+                variant="outlined"
+                size="small"
+                color='inherit'
+                onClick={() => navigate(`/corporates/${corporate_id}/services`)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="contained"
+                size="small"
+                onClick={() => navigate(`/corporates/${corporate_id}/services`)}
+                // fullWidth={true}
+              >
+                Save
+              </Button>
+          </Stack>
+          </Grid>
         </Grid>
       </Grid>
     </Page>

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

@@ -30,17 +30,21 @@ import {
   Checkbox,
   FormControlLabel,
   Tooltip,
+  Divider,
+  Grid,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useMemo, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
@@ -48,11 +52,17 @@ import { Icd } from '../../../@types/diagnosis';
 import BasePagination from '../../../components/BasePagination';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { RHFCheckbox } from '../../../components/hook-form';
+import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from '../../../components/hook-form';
-import { CheckBox } from '@mui/icons-material';
+import { Add, CheckBox } from '@mui/icons-material';
 import { CorporateService } from '../../../@types/corporates';
 import { number } from 'yup/lib/locale';
 import DialogLog from './sections/DialogLog';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import Label from '@/components/Label';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus';
+import palette from '@/theme/palette';
+import { enqueueSnackbar } from 'notistack';
+import { LoadingButton } from '@mui/lab';
 
 export default function List() {
   const { themeStretch } = useSettings();
@@ -154,9 +164,39 @@ export default function List() {
   }
 
   // Generate the every row of the table
+  type DataContent = {
+    code: string;
+    name: string;
+    id: string;
+    status: string|number;
+  };
+
+  type DataType = {
+    code: string;
+    name: string;
+    id: string;
+  }
+
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
+  
+  const [isDialogOpen, setDialogOpen] = useState(false)
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  const [dataValue, setDataValue] = useState('');
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+
+  //  const { id, service_code, status } = data;
+  
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
+    const navigate = useNavigate()
 
     const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
       console.log(event.target.name, event.target.checked, service);
@@ -168,85 +208,67 @@ export default function List() {
       });
     };
 
-    const handleActivate = (service: any, status: string) => {
+    // const handleActivate = (service: any, status: string) => {
-      axios
+    //   axios
-        .put(`/corporates/${corporate_id}/services/${service.service_code}`, {
+    //     .put(`/corporates/${corporate_id}/services/${service.service_code}`, {
-          service_code: service.service_code,
+    //       service_code: service.service_code,
-          status, 
+    //       status, 
-          reason:service.reason
+    //       reason:service.reason
-        })
+    //     })
-        .then((res) => {
+    //     .then((res) => {
-          setDataTableData({
+    //       setDataTableData({
-            ...dataTableData,
+    //         ...dataTableData,
-            data: dataTableData.data.map((service) => {
+    //         data: dataTableData.data.map((service) => {
-              let updatedService = service;
+    //           let updatedService = service;
-              if (row.id == service.id) {
+    //           if (row.id == service.id) {
-                updatedService.status = res.data.status;
+    //             updatedService.status = res.data.status;
-              }
+    //           }
-              return updatedService;
+    //           return updatedService;
-            }),
+    //         }),
-          });
+    //       });
-        });
+    //     });
+    // };
+
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
+      setDialogOpen(isOpen)
+      setDataValue(dataValue)
+      setDescriptionValue('Are you sure to inactive this service ?')
+      setUrl(url)
     };
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TableRow>
-          {/* <TableCell>
+          <TableCell>
-            <IconButton
+
-              aria-label="expand row"
+          </TableCell>
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell> */}
           <TableCell align="left">{row.service_code}</TableCell>
           <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">
+            {row.status == 'active' ? 
+            <Label color='success'>{row.status}</Label> : 
+            <Label color='error'>{row.status}</Label>}
+          </TableCell>
 
-          <TableCell align="right">
+          <TableCell align="right" sx={{borderBottom: 'unset'}}>
-            {row.status == 'active' && (
+            <TableMoreMenu actions={
-              <Button
+              <>
-                variant="outlined"
+                <MenuItem onClick={() => navigate(`/corporates/${row.corporate_id}/services/${row.service_code}`)}>
-                color="success"
+                  <SettingsOutlinedIcon />
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'inactive', 'test');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
-                }}
-              >
-                Active
-              </Button>
-            )}
-            {row.status == 'inactive' && (
-              <Button
-                variant="outlined"
-                color="error"
-                size="small"
-                onClick={() => {
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
-                }}
-              >
-                Inactive
-              </Button>
-            )}
-          </TableCell>
-          <TableCell align="right" width='10%'>
-            <Link to={`/corporate/${corporate_id}/services/${row.service_code}`}>
-              <Button variant="outlined" color="primary" size="small">
                   Config
-              </Button>
+                </MenuItem>
-            </Link>
+                <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/services/${row.id}/history`)}>
-            </TableCell>
+                  <HistoryIcon />
-            <TableCell width='1%'>
+                  History
-            <Tooltip title="History">
+                </MenuItem>
-              <Link to={`/corporate/${corporate_id}/services/${row.id}/history`} >
+                <MenuItem onClick={() => handleActivate(true, {code: row.service_code, name: row.name, id:corporate_id, status: row.status})}>
-                <HistoryIcon/>
+                  <CachedOutlinedIcon />
-              </Link>
+                  Update Status
-            </Tooltip>
+                </MenuItem>
+              </>
+            } />
           </TableCell>
+          
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         {false && (
@@ -682,6 +704,20 @@ export default function List() {
     fontWeight: 'bold',
   };
 
+  const onSubmit = async (row : any) => {
+    try {
+      handleUpdate(dataValue.status, dataValue.code, row.reason) 
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
+
   const applyFilter = async (searchFilter: any) => {
     await loadDataTableData({ search: searchFilter });
     setSearchParams({ search: searchFilter });
@@ -697,32 +733,146 @@ export default function List() {
     loadDataTableData();
   }, []);
 
+  const NewCorporateSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason Edit is required'),
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+  });
+
+  const {
+      reset,
+      handleSubmit,
+      formState: { isSubmitting },
+  } = methods;
+
+  const handleUpdate = (active: string, service_code: string, reason:string) => {
+      console.log(active)
+      axios
+        .put(`/corporates/${corporate_id}/services/${service_code}`, {
+          service_code: service_code,
+          status: active, 
+          reason: reason
+        })
+        .then((res) => {
+          window.location.reload();
+        });
+  }
+
+  const getContent = () => (
+    <>
+       <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 'active' ? 'inactive' : 'active'} this service ?</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={4} md={4}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={4} md={4} marginTop={2}>
+                        <Typography variant='inherit'>Service Name</Typography>
+                    </Grid>
+                    <Grid item xs={8} marginTop={2}>
+                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <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>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setDialogOpen(false)}
+            >
+                Cancel
+            </Button>
+
+            {dataValue?.status == 'active' ?  
+              <LoadingButton
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+                type="submit"
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                loading={isSubmitting}
+                color='error'
+              >
+              Inactive
+            </LoadingButton>
+            : 
+            <LoadingButton
+              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
+              type="submit"
+              variant="contained"
+              size="medium"
+              fullWidth={true}
+              loading={isSubmitting}
+              color='success'
+            >
+            Active
+          </LoadingButton>
+          
+            
+            }
+            </Stack>
+        </Stack>
+        
+        </FormProvider>
+    </>
+  );
+
   return (
     <Stack>
       <SearchForm />
-
-      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                {/* <TableCell style={headStyle} align="left" width={10}/> */}
+                <TableCell align="left" width={50} />
-                <TableCell style={headStyle} align="left">
+                <TableCell align="left">
                   Code
                 </TableCell>
-                <TableCell style={headStyle} align="left">
+                <TableCell align="left">
                   Service
                 </TableCell>
-
+                <TableCell align="left" width={100}>
-                <TableCell style={headStyle} align="right" width={30}>
                   Status
                 </TableCell>
-                <TableCell style={headStyle} align="center" width={30} colSpan={2}>
+                <TableCell align="center" width={100}>
-                  Action
+                  {/* Action */}
                 </TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>
@@ -750,16 +900,27 @@ export default function List() {
         </TableContainer>
 
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-      </Card>
 
-      {isDialog === 'edit' && (
+      {/* {isDialog === 'edit' && (
         <DialogLog
           data={edit}
           openDialog={openDialog}
           setOpenDialog={setOpenDialog}
           title={{ name: 'Reason For Update' }}
         />
-      )}
+      )} */}
+
+
+
+      <DialogUpdateStatus 
+        openDialog={isDialogOpen}
+        setOpenDialog={setDialogOpen} 
+        title={titles}
+        data={dataValue}
+        description={dataDescription}
+        content={getContent()}
+        // maxWidth='50px'
+      />
     </Stack>
   );
 }

frontend/dashboard/src/pages/Corporates/Services/sections/History.tsx

@@ -121,11 +121,11 @@ export default function CustomizedAccordions() {
           },
           {
             name: corporate?.name ?? '-',
-            href: '/corporate/' + corporate_id + '/services',
+            href: '/corporates/' + corporate_id + '/services',
           },
           {
             name: 'Audittrail Corporate',
-            href: '/corporate/' + corporate_id + '/benefits',
+            href: '/corporates/' + corporate_id + '/benefits',
           },
         ]}
       />

frontend/dashboard/src/routes/index.tsx

@@ -135,6 +135,10 @@ export default function Router() {
               path: ':corporate_id/benefits/:benefit_id/history',
               element: <CorporateBenefitsHistory />,
             },
+            {
+              path: ':corporate_id/benefits/:benefit_id/edit',
+              element: <CorporateBenefitsEdit />,
+            },
             {
               path: ':corporate_id/members',
               element: <CorporateMembers />,
@@ -444,6 +448,9 @@ const CorporateBenefits = Loadable(
 const CorporateBenefitsHistory = Loadable(
   lazy(() => import('../pages/Corporates/Benefit/sections/History'))
 );
+const CorporateBenefitsEdit = Loadable(
+  lazy(() => import('../pages/Corporates/Benefit/Create'))
+);
 
 const CorporatePlanCreate = Loadable(
   lazy(() => import('../pages/Corporates/CorporatePlan/CreateUpdate'))

frontend/dashboard/src/theme/overrides/Table.ts

@@ -25,7 +25,7 @@ export default function Table(theme: Theme) {
           color: theme.palette.text.secondary,
           backgroundColor: theme.palette.background.neutral,
           '&:first-of-type': {
-            // paddingLeft: theme.spacing(3),
+            paddingLeft: theme.spacing(3),
             borderTopLeftRadius: theme.shape.borderRadius,
             borderBottomLeftRadius: theme.shape.borderRadius,
             boxShadow: `inset 8px 0 0 ${theme.palette.background.paper}`,
@@ -44,6 +44,7 @@ export default function Table(theme: Theme) {
         body: {
           '&:first-of-type': {
             paddingLeft: theme.spacing(3),
+            // borderBottom: 'none',
           },
           '&:last-of-type': {
             paddingRight: theme.spacing(3),

frontend/dashboard/src/theme/palette.ts

@@ -62,11 +62,11 @@ declare module '@mui/material' {
 
 // SETUP COLORS
 const PRIMARY = {
-  lighter: '#C8FACD',
+  lighter: '#D0FBEC',
-  light: '#5BE584',
+  light: '#70EAD5',
-  main: '#00AB55',
+  main: '#19BBBB',
-  dark: '#007B55',
+  dark: '#0C7186',
-  darker: '#005249',
+  darker: '#043C59',
 };
 const SECONDARY = {
   lighter: '#D6E4FF',

frontend/hospital-portal/src/components/ThemeColorPresets.tsx

@@ -21,7 +21,7 @@ export default function ThemeColorPresets({ children }: Props) {
       ...defaultTheme,
       palette: {
         ...defaultTheme.palette,
-        primary: setColor,
+        // primary: setColor,
       },
       customShadows: {
         ...defaultTheme.customShadows,