solve conflict

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,
-            'name' => $request->name,
-            'active' => $request->active,
+            'budget' => $request->budget,
         ])->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/CorporateFormulariumController.php

@@ -6,6 +6,7 @@ use App\Exceptions\ImportRowException;
 use App\Helpers\Helper;
 use App\Models\CorporateFormularium;
 use App\Models\Formularium;
+use App\Models\FormulariumTemplate;
 use App\Services\ImportService;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
@@ -52,9 +53,16 @@ class CorporateFormulariumController extends Controller
      * Show the form for creating a new resource.
      * @return Renderable
      */
-    public function create()
+    public function create(Request $request, $corporate_id)
     {
-        return view('internal::create');
+        $data = CorporateFormularium::where('corporate_id', $corporate_id)->pluck('formularium_template_id')->toArray(); // agar tidak dobel
+        $formularium_template = FormulariumTemplate::whereNotIn('id', $data)->get();
+        $respone = [
+            "status" => 200,
+            "message" => 'data berhasil diambil',
+            "data" => $formularium_template
+        ];
+        return $respone;
     }
 
     /**
@@ -62,9 +70,36 @@ class CorporateFormulariumController extends Controller
      * @param Request $request
      * @return Renderable
      */
-    public function store(Request $request)
+    public function store(Request $request, $corporate_id)
     {
-        //
+        $request->validate([
+            'id' => 'required'
+        ]);
+
+        $checkFormularium = FormulariumTemplate::find($request->id);
+        if (!$checkFormularium){
+            $respone = [
+                "status" => 404,
+                "message" => "data master formularium tidak ditemukan",
+                "data" => []
+            ];
+            return $respone;
+        }
+        $newCorporateFormularium = CorporateFormularium::create([
+            'corporate_id' => $corporate_id,
+            'formularium_template_id' => $request->id,
+            'active' => 1
+        ]);
+
+        if ($newCorporateFormularium){
+            $respone = [
+                "status" => 200,
+                "message" => "data berhasil disimpan"
+            ];
+            return $respone;
+        }
+
+        return $newCorporatePlan;
     }
 
     /**
@@ -72,9 +107,15 @@ class CorporateFormulariumController extends Controller
      * @param int $id
      * @return Renderable
      */
-    public function show($id)
+    public function show(Request $request, $corporate_id, $id)
     {
-        return view('internal::show');
+        $data = Formularium::where('formularium_template_id', $id)->get();
+        $respone = [
+            "status" => 200,
+            "message" => 'data berhasil diambil',
+            "data" => $data
+        ];
+        return $respone;
     }
 
     /**
@@ -82,9 +123,16 @@ class CorporateFormulariumController extends Controller
      * @param int $id
      * @return Renderable
      */
-    public function edit($id)
+    public function edit(Request $request, $corporate_id)
     {
-        return view('internal::edit');
+        $data = CorporateFormularium::where('corporate_id', $corporate_id)->pluck('formularium_template_id')->toArray(); // agar tidak dobel
+        $formularium_template = FormulariumTemplate::whereNotIn('id', $data)->get();
+        $respone = [
+            "status" => 200,
+            "message" => 'data berhasil diambil',
+            "data" => $formularium_template
+        ];
+        return $respone;
     }
 
     /**
@@ -139,6 +187,22 @@ class CorporateFormulariumController extends Controller
         }
     }
 
+    public function active(Request $request, $corporate_id, $id)
+    {
+        $corporateFormularium = CorporateFormularium::find($id);
+        $corporateFormularium->fill([
+            'active' => $request->active,
+        ])->save();
+
+        $respone = [
+            "status" => 200,
+            "message" => 'data berhasil diedit',
+            "data" => $corporateFormularium
+        ];
+
+        return $respone;
+    }
+
     public function import(Request $request, $id) 
     {
         $request->validate([

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

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

Modules/Internal/Http/Controllers/Api/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,21 +110,21 @@ 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,
-            'active' => $request->active,
-            'description' => $request->description
+            'corporate_plan_id' => $request->plan,
+            'service_code' => $request->service,
+            '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/HospitalController.php

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

Modules/Internal/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

@@ -19,6 +19,7 @@ use Modules\Internal\Http\Controllers\Api\DiagnosisTemplateController;
 use Modules\Internal\Http\Controllers\Api\DiagnosisExclusionController;
 use Modules\Internal\Http\Controllers\Api\DistrictController;
 use Modules\Internal\Http\Controllers\Api\DivisionController;
+use Modules\Internal\Http\Controllers\Api\HospitalController;
 use Modules\Internal\Http\Controllers\Api\DoctorController;
 use Modules\Internal\Http\Controllers\Api\DoctorRatingController;
 use Modules\Internal\Http\Controllers\Api\DrugController;
@@ -31,6 +32,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;
@@ -98,6 +100,12 @@ Route::prefix('internal')->group(function () {
         Route::get('corporates/{corporate_id}/divisions/{id}/edit', [DivisionController::class, 'edit']);
         Route::put('corporates/{corporate_id}/divisions/{id}', [DivisionController::class, 'update']);
 
+        Route::get('corporates/{corporate_id}/hospitals', [HospitalController::class, 'index']);
+        Route::put('hospitals/{hospital_id}/activation', [HospitalController::class, 'activation']);
+        Route::get('corporates/{corporate_id}/hospitals/data', [HospitalController::class, 'dataHospital']);
+        Route::post('corporates/{corporate_id}/hospitals/save', [HospitalController::class, 'store']);
+        Route::put('corporates/{corporate_id}/hospitals/{id}/edit', [HospitalController::class, 'update']);
+
         Route::get('corporates/{corporate_id}/members', [CorporateMemberController::class, 'index']);
         Route::get('corporates/{corporate_id}/members/list', [CorporateMemberController::class, 'generateMemberList']);
         Route::post('corporates/{corporate_id}/members/import', [CorporateMemberController::class, 'import']);
@@ -119,8 +127,12 @@ Route::prefix('internal')->group(function () {
         Route::post('corporates/{corporate_id}/services/{service_code}/specialities/exclusion', [CorporateServiceController::class, 'storeExclusion']);
 
         Route::get('corporates/{corporate_id}/formulariums', [CorporateFormulariumController::class, 'index']);
+        Route::get('corporates/{corporate_id}/formulariums/{formularium_id}', [CorporateFormulariumController::class, 'show']);
+        Route::get('corporates/{corporate_id}/formulariums/create', [CorporateFormulariumController::class, 'create']);
+        Route::post('corporates/{corporate_id}/formulariums', [CorporateFormulariumController::class, 'store']);
         Route::get('corporates/{corporate_id}/formulariums/list', [CorporateFormulariumController::class, 'generateFormulariumList']);
         Route::post('corporates/{corporate_id}/formulariums/import', [CorporateFormulariumController::class, 'import']);
+        Route::put('corporates/{corporate_id}/formulariums-update-status/{id}', [CorporateFormulariumController::class, 'active']);
         Route::put('corporates/{corporate_id}/formulariums/{formularium_id}/{action}', [CorporateFormulariumController::class, 'updateStatus']);
         Route::controller(CorporateController::class)->group(function () {
             Route::post('add-files-doc', 'addFilesDoc');
@@ -203,6 +215,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/CorporateFormulariumResource.php

@@ -14,27 +14,11 @@ class CorporateFormulariumResource extends JsonResource
      */
     public function toArray($request)
     {
-
-        
         return [
-            'id' => $this->formularium->id,
-            'code' => $this->formularium->code,
-            'name' => $this->formularium->name,
-            'description' => $this->formularium->description,
-            'manufacturer' => $this->formularium->manufacturer,
-            'category_name' => $this->formularium->category_name,
-            'kategori_obat' => $this->formularium->kategori_obat,
-            'uom' => $this->formularium->uom,
-            'general_indication' => $this->formularium->general_indication,
-            'composition' => $this->formularium->composition,
-            'atc_code' => $this->formularium->atc_code,
-            'class' => $this->formularium->class,
-            'bpom_registration' => $this->formularium->bpom_registration,
-            'classifications' => $this->formularium->classifications,
-            'cat_for' => $this->formularium->cat_for,
-            'items_count' => $this->formularium->items_count,
-            'status' => $this->active ? 'active' : 'inactive',
-            // 'corporate_formulariums' => $this->formua,
+            'id' => $this->id,
+            'formulaurium_category_id' => $this->formularium_template->id,
+            'category' => $this->formularium_template->name,
+            'description' => $this->formularium_template->description,
             'active' => $this->active == 1 ? 'Active' : 'Inactive',
         ];
     }

Modules/Internal/Transformers/CorporateServiceConfigResource.php

@@ -41,38 +41,97 @@ class CorporateServiceConfigResource extends JsonResource
         ];
 
         $list_msc = $this->corporateServiceSpecialities->map(function ($speciality) {
-            return  explode(',', $speciality->exclusions->first()->rules->where('name', 'msc')->first()->values ?? '');
-        })->map(function ($item) {
+            $exclusions = $speciality->exclusions->first();
+            
+            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),
                 'c' => in_array('c', $item),
             ];
         });
-
+        
         $list_gender = $this->corporateServiceSpecialities->map(function ($speciality) {
-            // dd($speciality->exclusions->first()->rules);
-            return  explode(',', $speciality->exclusions->first()->rules->where('name', 'gender')->first()->values ?? '');
-        })->map(function ($item) {
-
+            $exclusions = $speciality->exclusions->first();
+            
+            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),
                 'female' => in_array('female', $item),
             ];
         });
+        
 
         $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 (
             $list_msc,
             $list_gender,

app/Models/CorporateFormularium.php

@@ -6,6 +6,7 @@ use App\Traits\Blameable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Altek\Accountant\Contracts\Recordable;
 
 class CorporateFormularium extends Model
 {
@@ -15,7 +16,7 @@ class CorporateFormularium extends Model
 
     protected $fillable = [
         'corporate_id',
-        'formularium_id',
+        'formularium_template_id',
         'active'
     ];
 
@@ -24,8 +25,8 @@ class CorporateFormularium extends Model
         return $this->belongsTo(Corporate::class);
     }
 
-    public function formularium()
+    public function formularium_template()
     {
-        return $this->belongsTo(Formularium::class);
+        return $this->belongsTo(FormulariumTemplate::class);
     }
 }

app/Models/CorporateHospital.php

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

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

app/Models/Formularium.php

@@ -37,11 +37,6 @@ class Formularium extends Model
         $this->attributes['code'] = !empty($value) ? $value : Str::upper(Str::random('6'));
     }
 
-    public function corporateFormulariums()
-    {
-        return $this->hasMany(CorporateFormularium::class, 'formularium_id', 'id');
-    }
-
     public function items()
     {
         return $this->belongsToMany(Drug::class, 'formularium_items', 'formularium_id', 'item_id');

app/Models/FormulariumTemplate.php

@@ -23,4 +23,9 @@ class FormulariumTemplate extends Model
         'updated_by',
         // 'deleted_by',
     ];
+
+    // public function corporateFormulariums()
+    // {
+    //     return $this->hasMany(CorporateFormularium::class, 'formularium_template_id', 'id');
+    // }
 }

app/Providers/AppServiceProvider.php

@@ -7,6 +7,7 @@ use Illuminate\Support\Facades\Schema;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Support\ServiceProvider;
 use App\Models\Corporate;
+use App\Models\CorporateFormularium;
 use App\Models\CorporateService;
 use App\Models\CorporatePlan;
 use App\Models\CorporateBenefit;
@@ -143,6 +144,14 @@ class AppServiceProvider extends ServiceProvider
             $this->logAuditTrail($model, 'deleted');
         });
 
+        // Formualrium Template
+        CorporateFormularium::updated(function ($model) {
+            $this->logAuditTrail($model, 'updated');
+        });
+        CorporateFormularium::deleted(function ($model) {
+            $this->logAuditTrail($model, 'deleted');
+        });
+
 
     }
 

database/migrations/2023_10_19_132434_create_corporate_hospitals.php

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

database/migrations/2023_10_20_091646_rename_feild_formularium_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('corporate_formulariums', function (Blueprint $table) {
+            $table->renameColumn('formularium_id', 'formularium_template_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('corporate_formulariums', function (Blueprint $table) {
+            $table->renameColumn('formularium_template_id', 'formularium_id');
+        });
+    }
+};

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

@@ -105,24 +105,7 @@ export default function List() {
     setSearchText: setSearchText,
     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/.env.development

@@ -2,6 +2,6 @@ GENERATE_SOURCEMAP=false
 
 PORT=8000
 
-REACT_APP_HOST_API_URL="http://127.0.0.1:8000/api/internal"
+REACT_APP_HOST_API_URL="http://lms.test"
 
 VITE_API_URL="http://127.0.0.1:8000/api/internal"

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 = {
@@ -21,6 +25,13 @@ export type Division = {
   name?: string;
 }
 
+export type Hospital = {
+  id: number;
+  corporate_id: number;
+  code: string;
+  name?: string;
+}
+
 export type Employee = {
   id: number;
   name: string;
@@ -39,14 +50,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 +117,7 @@ export type Plan = {
   currency: string;
   max_surgery_reinstatement_days: string;
   max_surgery_periode_days: string;
+  active: number
 }
 
 export type CorporateBenefit = {
@@ -113,6 +130,7 @@ export type CorporateBenefit = {
 }
 
 export type Benefit = {
+  id : number;
   service_code : string;
   plan_code : string;
   benefit_code : string;
@@ -170,6 +188,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 +212,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/contexts/ConfiguredCorporateContext.tsx

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

frontend/dashboard/src/pages/Corporates/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 { CorporatePlan } from '../../../@types/corporates';
+import { Box, Button, Card, Grid, Stack, Typography } from '@mui/material';
+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({
-    name: Yup.string().required('Name is required'),
-    code: Yup.string().required('Corporate Code is required'),
+  const NewCorporateBenefitSchema = Yup.object().shape({
+    budget: Yup.string().required('Budget is required'),
   });
 
   const defaultValues = useMemo(
     () => ({
-      name: currentCorporatePlan?.name || '',
-      code: currentCorporatePlan?.code || '',
-      active: currentCorporatePlan?.active === 1 ? true : false,
+      budget: currentCorporateBenefit?.budget || '',
     }),
-    [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" />
-              </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" />
+                <RHFTextField name="budget" type='number'/>
               </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/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',
-            href: '/corporate/' + corporate_id + '/plans',
+            name: 'Benefit',
+            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
-        heading={'Create Corporate Plan'}
+      {/* <HeaderBreadcrumbs
+        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,
-      description: currentCorporatePlan?.description || '',
+      // active: currentCorporatePlan?.active || true,
+      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}>
-        <Grid item xs={8}>
-          <Card sx={{ p: 2 }}>
+      <Card sx={{ p: 2, marginTop: 2 }}>
+        <Grid container spacing={4} paddingX={2} paddingY={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>
-          </Card>
+          </Grid> */}
         </Grid>
-        <Grid item xs={4}>
-          <Card sx={{ p: 2 }}>
-            <RHFSwitch name="active" label="Active" />
-          </Card>
-        </Grid>
-      </Grid>
+      </Card>
+      <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}/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/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}>
-          <LoadingButton
-            type="submit"
-            variant="contained"
-            size="large"
-            fullWidth={true}
-            loading={isSubmitting}
-          >
-            {!isEdit ? 'Save New Corporate' : 'Save Corporate'}
-          </LoadingButton>
+        <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}
+              loading={isSubmitting}
+            >
+              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/Hospital/CreateUpdate.tsx

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

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

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

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

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

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

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

frontend/dashboard/src/pages/Corporates/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,12 +75,37 @@ 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 {
       ...corporate,
     };
   }
+  
 
   // Dummy Default Data
   const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
@@ -161,6 +198,8 @@ export default function Corporates() {
       typeof value === 'string' ? value.split(',') : value
     );
   };
+
+
   // END FILTER SELECT
 
   // Component Search Input
@@ -258,7 +297,7 @@ export default function Corporates() {
               Import
             </Button> */}
           <Link to={'/corporates/create'}>
-            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2', backgroundColor: '#19BBBB'  }}>
+            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2' }}> 
               New Corporate
             </Button>
           </Link>
@@ -274,36 +313,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
-        .put(`/corporates/${row.id}/activation`, {
-          // service_code: service.service_code,
-          active: status == 'active',
-        })
-        .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' }
-          );
-        });
+    
+    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
+      setDialogOpen(isOpen)
+      setDataValue(dataValue)
+      setDescriptionValue('Are you sure to inactive this coporate ?')
     };
 
     return (
@@ -318,31 +475,37 @@ export default function Corporates() {
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">
             {row.active == 1 && (
-              <Button
-                variant="outlined"
-                color="success"
-                size="small"
-                onClick={() => {
-                  handleActivate(row, 'inactive');
-                }}
-              >
+              <Label color='success'>
                 Active
-              </Button>
+              </Label>
+              // <Button
+              //   variant="outlined"
+              //   color="success"
+              //   size="small"
+              //   onClick={() => {
+              //     handleActivate(row, 'inactive');
+              //   }}
+              // >
+              //   Active
+              // </Button>
             )}
             {row.active != 1 && (
-              <Button
-                variant="outlined"
-                color="error"
-                size="small"
-                onClick={() => {
-                  handleActivate(row, 'active');
-                }}
-              >
+              <Label color='error'>
                 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 +523,10 @@ export default function Corporates() {
             </Stack> */}
            <TableMoreMenu actions={
             <>
-              {/* <MenuItem onClick={() => navigate(`/corporates/${row.id}/edit`)}>
-                <EditOutlinedIcon />
-                View
-              </MenuItem> */}
+              <MenuItem onClick={() => setOpen(!open)}>
+                <FindInPageOutlinedIcon />
+                Detail
+              </MenuItem>
               <MenuItem onClick={() => navigate(`/corporates/${row.id}/edit`)}>
                 <EditOutlinedIcon />
                 Edit
@@ -376,148 +539,132 @@ 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 }}>
-                <Typography sx={{ fontWeight: '600', mb: 1 }}>Current Policy Detail</Typography>
-                <Grid container>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Policy Code
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.current_policy?.code}
-                      </Grid>
+              <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={4}>
+                          Policy Code :
+                        </Grid>
+                        <Grid item xs={6}>
+                          {row.current_policy?.code}
+                        </Grid>
 
-                      <Grid item xs={6}>
-                        Number of Plan
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.corporate_plans_count}
-                      </Grid>
+                        <Grid item xs={4}>
+                          Number of Plan :
+                        </Grid>
+                        <Grid item xs={6}>
+                          {row.corporate_plans_count}
+                        </Grid>
 
-                      <Grid item xs={6}>
-                        Number of Benefit
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.corporate_benefits_count}
-                      </Grid>
-                    </Grid>
-                  </Grid>
+                        <Grid item xs={4}>
+                          Number of Benefit :
+                        </Grid>
+                        <Grid item xs={6}>
+                          {row.corporate_benefits_count}
+                        </Grid>
 
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Period
-                      </Grid>
-                      <Grid item xs={6}>
-                        <Box sx={{ display: 'flex', placeContent: 'space-between' }}>
-                          {/* <span>: {fDate(row.current_policy?.start)}</span>- */}
-                          {/* <span>{fDate(row.current_policy?.end)}</span> */}
-                        </Box>
-                      </Grid>
-
-                      <Grid item xs={6}>
-                        Total Premi
-                      </Grid>
-                      <Grid item xs={6}>
-                        {row.current_policy ? (
+                        <Grid item xs={4}>
+                          Period :
+                        </Grid>
+                        <Grid item xs={6}>
                           <Box sx={{ display: 'flex', placeContent: 'space-between' }}>
-                            <span>
-                              : {fCurrency(row.current_policy?.total_premi).split(' ')[0]}
-                            </span>
-                            <span>{fCurrency(row.current_policy?.total_premi).split(' ')[1]}</span>
+                            {/* <span>: {fDate(row.current_policy?.start)}</span>- */}
+                            {/* <span>{fDate(row.current_policy?.end)}</span> */}
                           </Box>
-                        ) : (
-                          '-'
-                        )}
-                      </Grid>
+                        </Grid>
 
-                      <Grid item xs={6}>
-                        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]}
-                            </span>
-                            <span>
-                              {fCurrency(row.current_policy?.minimal_deposit_net).split(' ')[1]}
-                            </span>
-                          </Box>
-                        ) : (
-                          '-'
-                        )}
-                      </Grid>
+                        <Grid item xs={4}>
+                          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]}
+                              </span>
+                              <span>{fCurrency(row.current_policy?.total_premi).split(' ')[1]}</span>
+                            </Box>
+                          ) : (
+                            '-'
+                          )}
+                        </Grid>
 
-                      <Grid item xs={6}>
-                        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]}
-                            </span>
-                            <span>
-                              {fCurrency(row.current_policy?.limit_balance).split(' ')[1]}
-                            </span>
-                          </Box>
-                        ) : (
-                          '-'
-                        )}
+                        <Grid item xs={4}>
+                          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]}
+                              </span>
+                              <span>
+                                {fCurrency(row.current_policy?.minimal_deposit_net).split(' ')[1]}
+                              </span>
+                            </Box>
+                          ) : (
+                            '-'
+                          )}
+                        </Grid>
+                        <Grid item xs={4}>
+                          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]}
+                              </span>
+                              <span>
+                                {fCurrency(row.current_policy?.limit_balance).split(' ')[1]}
+                              </span>
+                            </Box>
+                          ) : (
+                            '-'
+                          )}
+                        </Grid>
                       </Grid>
                     </Grid>
-                  </Grid>
-                </Grid>
 
-                <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Member Detail</Typography>
-                <Grid container>
-                  <Grid item xs={6}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Total Member
-                      </Grid>
-                      <Grid item xs={6}>
-                        : {row.employees_count}
+                    <Grid item xs={6}>
+                      <Typography sx={{ fontWeight: '600', mb: 1 }}>Member Detail</Typography>
+                      <Grid container>
+                        <Grid item xs={6}>
+                          Total Member :
+                        </Grid>
+                        <Grid item xs={6}>
+                          {row.employees_count}
+                        </Grid>
+                        <Grid item xs={6}>
+                          Total Claim This Month  : 
+                        </Grid>
+                        <Grid item xs={6}>
+                          0
+                        </Grid>
                       </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>
+                </Box>
+              </Card>
             </Collapse>
           </TableCell>
         </TableRow>
@@ -594,6 +741,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/Member/List.tsx

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

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

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

frontend/dashboard/src/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,33 +219,142 @@ export default function CorporatePlanList() {
         />
         {!currentImportFileName && (
           <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <SearchInput onSearch={applyFilter} />
+            
+            <Grid container spacing={2}>
+              <Grid item xs={3.5}>
+                <SearchInput onSearch={applyFilter} />
+              </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="contained"
+                startIcon={<Download />}
+                fullWidth={true}
+                sx={{ p: 1.8 }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={handleClick}
+              >
+                Import
+              </Button>
+              <Menu
+                id="import-button"
+                anchorEl={anchorEl}
+                open={createMenu}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'basic-button',
+                }}
+              >
+                <MenuItem onClick={handleImportButton}>Import</MenuItem>
+                <MenuItem onClick={() => {handleGetTemplate('plan-benefit')}}>Download Template</MenuItem>
+                <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Plans & Benefit</MenuItem>
+              </Menu>
+              </Grid>
+            </Grid>
             {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
-            <Button
-              id="import-button"
-              variant="outlined"
-              startIcon={<AddIcon />}
-              sx={{ p: 1.8 }}
-              aria-controls={createMenu ? 'basic-menu' : undefined}
-              aria-haspopup="true"
-              aria-expanded={createMenu ? 'true' : undefined}
-              onClick={handleClick}
-            >
-              Import
-            </Button>
-            <Menu
-              id="import-button"
-              anchorEl={anchorEl}
-              open={createMenu}
-              onClose={handleClose}
-              MenuListProps={{
-                'aria-labelledby': 'basic-button',
-              }}
-            >
-              <MenuItem onClick={handleImportButton}>Import</MenuItem>
-              <MenuItem onClick={() => {handleGetTemplate('plan-benefit')}}>Download Template</MenuItem>
-              <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Plans & Benefit</MenuItem>
-            </Menu>
+            
           </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) => {
-      axios
-        .put(`/plans/${row.id}/activation`, {
-          // service_code: service.service_code,
-          active: status == 'active',
-        })
-        .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' }
-          );
-        });
+    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' } }}>
-          <TableCell>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+        <TableRow>
+          {/* <TableCell> */}
+            {/* <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 && (
-              <Button
-                variant="outlined"
-                color="success"
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'inactive');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
-                }}
-              >
-                Active
-              </Button>
-            )}
-            {row.active != 1 && (
-              <Button
-                variant="outlined"
-                color="error"
-                size="small"
-                onClick={() => {
-                  // handleActivate(row, 'active');
-                  clickHandler('edit');
-                  setEdit({id: row.id, service_code: row.service_code, status: 'active'});
-                }}
-              >
-                Inactive
-              </Button>
-            )}
+            {row.active == 1 ? 
+            <Label color='success'>Active</Label> : 
+            <Label color='error'>Inactive</Label>}
           </TableCell>
           <TableCell align="center">
-          <Tooltip title="History">
-            <Link to={`/corporate/${corporate_id}/plans/${row.id}/history`}>
-              <HistoryIcon />
-            </Link>
-          </Tooltip>
+            <TableMoreMenu actions={
+              <>
+                <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 />
+                  History
+                </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',
-            href: '/corporate/' + corporate_id + '/plans',
+            name: 'Corporate Dashboard',
+            href: '/corporates/' + corporate_id + '/plans',
           },
         ]}
       />

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 { CheckBox } from '@mui/icons-material';
+import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from '../../../components/hook-form';
+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) => {
-      axios
-        .put(`/corporates/${corporate_id}/services/${service.service_code}`, {
-          service_code: service.service_code,
-          status, 
-          reason:service.reason
-        })
-        .then((res) => {
-          setDataTableData({
-            ...dataTableData,
-            data: dataTableData.data.map((service) => {
-              let updatedService = service;
-              if (row.id == service.id) {
-                updatedService.status = res.data.status;
-              }
-              return updatedService;
-            }),
-          });
-        });
+    // const handleActivate = (service: any, status: string) => {
+    //   axios
+    //     .put(`/corporates/${corporate_id}/services/${service.service_code}`, {
+    //       service_code: service.service_code,
+    //       status, 
+    //       reason:service.reason
+    //     })
+    //     .then((res) => {
+    //       setDataTableData({
+    //         ...dataTableData,
+    //         data: dataTableData.data.map((service) => {
+    //           let updatedService = service;
+    //           if (row.id == service.id) {
+    //             updatedService.status = res.data.status;
+    //           }
+    //           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' } }}>
-          {/* <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell> */}
+        <TableRow>
+          <TableCell>
+
+          </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">
-            {row.status == 'active' && (
-              <Button
-                variant="outlined"
-                color="success"
-                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>
-            </Link>
-            </TableCell>
-            <TableCell width='1%'>
-            <Tooltip title="History">
-              <Link to={`/corporate/${corporate_id}/services/${row.id}/history`} >
-                <HistoryIcon/>
-              </Link>
-            </Tooltip>
+          <TableCell align="right" sx={{borderBottom: 'unset'}}>
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => navigate(`/corporates/${row.corporate_id}/services/${row.service_code}`)}>
+                  <SettingsOutlinedIcon />
+                  Config
+                </MenuItem>
+                <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/services/${row.id}/history`)}>
+                  <HistoryIcon />
+                  History
+                </MenuItem>
+                <MenuItem onClick={() => handleActivate(true, {code: row.service_code, name: row.name, id:corporate_id, status: row.status})}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                </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 style={headStyle} align="left">
+                <TableCell align="left" width={50} />
+                <TableCell align="left">
                   Code
                 </TableCell>
-                <TableCell style={headStyle} align="left">
+                <TableCell align="left">
                   Service
                 </TableCell>
-
-                <TableCell style={headStyle} align="right" width={30}>
+                <TableCell align="left" width={100}>
                   Status
                 </TableCell>
-                <TableCell style={headStyle} align="center" width={30} colSpan={2}>
-                  Action
+                <TableCell align="center" width={100}>
+                  {/* 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 />,
@@ -178,7 +182,14 @@ export default function Router() {
               path: ':corporate_id/hospitals',
               element: <CorporateHospitals />,
             },
-
+            {
+              path: ':corporate_id/hospitals/create',
+              element: <HospitalCreateUpdate />,
+            },
+            {
+              path: ':corporate_id/hospitals/edit/:id/:organization_id',
+              element: <HospitalCreateUpdate />,
+            },
             {
               path: ':corporate_id/claim-history',
               element: <CorporateClaimHistories />,
@@ -444,6 +455,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'))
@@ -505,6 +519,7 @@ const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/
 const CorporateServicesHistory = Loadable(lazy(() => import('../pages/Corporates/Services/sections/History')));
 
 const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospital/Index')));
+const HospitalCreateUpdate = Loadable(lazy(() => import('../pages/Corporates/Hospital/CreateUpdate')));
 const CorporateClaimHistories = Loadable(
   lazy(() => import('../pages/Corporates/ClaimHistory/Index'))
 );

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/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,