update final log

Modules/HospitalPortal/Http/Controllers/Api/AuthController.php

@@ -23,6 +23,7 @@ class AuthController extends Controller
             'email' => $request->email,
             'password' => $request->password
         ];
+        
         $validator = Validator::make($request->all(), [
             'email' => 'required|email',
             'password' => 'required'
@@ -38,7 +39,7 @@ class AuthController extends Controller
         }
         else
         {
-            $user = User::where('email', $request->email)->first();
+            $user = User::with('getOrganization.organization')->where('email', $request->email)->first();
             if (!$user) {
                 return ApiResponse::apiResponse('Not Found', $data, trans('message.not_found'), 404);
             }

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

@@ -34,7 +34,7 @@ class ClaimController extends Controller
      */
     public function index(Request $request)
     {
-        $serviceCode = 'IP';
+        // $serviceCode = 'IP';
         $claims = Claim::with([
             'member',
             'member.currentCorporate',

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

@@ -0,0 +1,141 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api;
+
+use App\Helpers\Helper;
+use App\Models\RequestLogBenefit;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Facades\DB;
+
+
+class RequestLogBenefitController extends Controller
+{
+    
+    public function index(Request $request)
+    {
+       
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('internal::create');
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function show($id)
+    {
+        
+    }
+
+     /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Renderable
+     */
+    public function store(Request $request)
+    {
+
+        $customMessages = [
+            'required' => 'Kolom :attribute wajib diisi.',
+            'numeric' => 'Kolom :attribute harus berupa angka.',
+        ];
+
+        $validator = Validator::make($request->all(), [
+            'benefit_data' => 'required|array',
+            'benefit_data.*' => 'required',
+        ], $customMessages);
+
+        if ($validator->fails()) {
+            return Helper::responseJson([],'error', 400, $validator->errors());
+        } else {
+            $benefitData = $request->benefit_data;
+
+            if (count($benefitData)>0){
+                // BeginTransaction
+                DB::beginTransaction();
+                foreach($benefitData as $key => $value){
+                    $data = [
+                        'request_log_id' => $value['request_log_id'],
+                        'benefit_id' => $value['benefit_id'],
+                        'amount_incurred' => $value['amount_incurred'],
+                        'amount_approved' => $value['amount_approved'],
+                        'amount_not_approved' => $value['amount_not_approved'],
+                        'excess_paid' => $value['excess_paid'],
+                        'keterangan' => $value['keterangan'],
+
+                    ];
+                    // Insert Data
+                    try {
+                        RequestLogBenefit::create($data);
+                    } catch (\Throwable $th) {
+                        DB::rollBack();
+                        return Helper::responseJson(status: 'failed', statusCode: 500, message: $th->getMessage());
+                    }
+                }
+                DB::commit();
+                return Helper::responseJson(status: 'success', statusCode: 201, message: 'success', data: $request->toArray());
+            };
+
+        }
+        
+        
+        $requestLogBenefit = RequestLogBenefit::insert($data);
+        return $requestLogBenefit;
+    }
+
+    /**
+     * 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)
+    {
+        $requestLogBenefit = requestLogBenefit::findOrFail($id);
+        $requestLogBenefit->amount_approved = $request->amount_approved;
+        $requestLogBenefit->amount_incurred = $request->amount_incurred;
+        $requestLogBenefit->amount_not_approved = $request->amount_not_approved;
+        $requestLogBenefit->excess_paid = $request->excess_paid;
+        $requestLogBenefit->keterangan = $request->keterangan;
+
+        $requestLogBenefit->save();
+      
+        return response()->json([
+            'error' => false,
+            'message' => 'Update succses',
+            'data' =>  $requestLogBenefit],
+        200);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+       $requestLogBenefit = RequestLogBenefit::findOrFail($id);
+       $requestLogBenefit->delete();
+    }
+    
+}

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

@@ -57,8 +57,11 @@ class RequestLogController extends Controller
                                 ->when(empty($request->orderBy), function ($q) {
                                     $q->orderBy('created_at', 'desc');
                                 })
-                                ->when($request->status, function($q, $status) {
-                                    $q->where('status', $status);
+                                ->when($request->final_log, function($q, $final_log) {
+                                    $q->where('final_log', $final_log);
+                                })
+                                ->when($request->service_code, function($q, $service_code) {
+                                    $q->where('service_code', $service_code);
                                 })
                                 // ->where('status', $request->status)
                                 ->with(['member', 'files', 'service', 'member.currentPolicy'])
@@ -165,6 +168,9 @@ class RequestLogController extends Controller
             },
             'files',
             'member',
+            'member.currentPlan' => function($memberPlan) {
+                $memberPlan->join('request_logs', 'request_logs.service_code', '=', 'plans.service_code');
+            },
             'claim',
             'organization',
         ]);
@@ -293,10 +299,20 @@ class RequestLogController extends Controller
         ]);
     }
 
-    public function updateFinalLog(Request $request, $id)
+    /**
+     * Submit Request LOG to Final LOG
+     */
+    public function updateFinalLog(Request $request)
     {
+        $id = $request->id;
         $requestLog = RequestLog::findOrFail($id);
 
+        // Update Request LOG untuk lanjut ke Final LOG
+        $requestLog->final_log = 1;
+        $requestLog->status_final_log = 'requested';
+        $requestLog->save();
+
+
         if ($request->hasFile('result_files')) {
             foreach ($request->result_files as $file) {
                 $pathFile = File::storeFile('final-log-result', $id, $file);
@@ -335,7 +351,7 @@ class RequestLogController extends Controller
                     'name' => File::getFileName('final-log-kondisi', $id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
-                    'path' => $pathFile,
+                    'path' =>  $pathFile,
                     'created_by' => auth()->user()->id,
                     'updated_by' => auth()->user()->id,
                 ]);
@@ -345,7 +361,7 @@ class RequestLogController extends Controller
         return response()->json([
             'error' => false,
             'message' => 'Update succses',
-            'data' =>  $updateClaimRequest],
+            'data' =>  $requestLog],
         200);
 
     }

Modules/Internal/Routes/api.php

@@ -8,6 +8,7 @@ use Modules\Internal\Http\Controllers\Api\BenefitController;
 use Modules\Internal\Http\Controllers\Api\CityController;
 use Modules\Internal\Http\Controllers\Api\ClaimController;
 use Modules\Internal\Http\Controllers\Api\RequestLogController;
+use Modules\Internal\Http\Controllers\Api\RequestLogBenefitController;
 use Modules\Internal\Http\Controllers\Api\ClaimRequestController;
 use Modules\Internal\Http\Controllers\Api\CorporateBenefitController;
 use Modules\Internal\Http\Controllers\Api\CorporateController;
@@ -251,11 +252,17 @@ Route::prefix('internal')->group(function () {
         Route::get('customer-service/request', [RequestLogController::class, 'index']);
         Route::post('customer-service/request', [RequestLogController::class, 'createNew']);
         Route::put('customer-service/request/{id}', [RequestLogController::class, 'update']);
+        Route::get('customer-service/request/{id}', [RequestLogController::class, 'show']);
         Route::get('customer-service/request/{id}/download', [RequestLogController::class, 'generateRequestLog']);
         Route::post('customer-service/request/import', [RequestLogController::class, 'importRequestLog']);
         Route::get('customer-service/request/data', [RequestLogController::class, 'generateDataRequestLogExcel']);
 
-
+        Route::post('customer-service/request/final-log', [RequestLogController::class, 'updateFinalLog']);
+        // insert benefit
+        Route::post('customer-service/request/insert-benefit', [RequestLogBenefitController::class, 'store']);
+        Route::delete('customer-service/request/benefit_data/{id}', [RequestLogBenefitController::class, 'destroy']);
+        Route::put('customer-service/request/benefit_data/{id}', [RequestLogBenefitController::class, 'update']);
+        
 
         Route::get('search-organizations', [OrganizationController::class, 'searchOrganization']);
         Route::get('search-specialities', [SpecialityController::class, 'searchSpeciality']);

Modules/Internal/Transformers/RequestLogResource.php

@@ -23,8 +23,9 @@ class RequestLogResource extends JsonResource
             'id' => $this->id,
             'code' => $this->code,
             'submission_date' => $this->submission_date,
-            'member' => $this->member,
+            'member_name' => $this->member->name,
             'status' => $this->status ?? 'unknown',
+            'status_final_log' => $this->status_final_log ?? 'unknown',
             'service_name' => $this->service ? $this->service->name : '',
             'payment_type' => $this->payment_type,
             'payment_type_name' => $this->payment_type_name,

Modules/Internal/Transformers/RequestLogShowResource.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace Modules\Internal\Transformers;
+
+use App\Models\Benefit;
+use App\Models\CorporateBenefit;
+use App\Models\ClaimRequest;
+use App\Models\CorporateService;
+use App\Models\RequestLogBenefit;
+use App\Models\Exclusion;
+use App\Models\Icd;
+use App\Helpers\Helper;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class RequestLogShowResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        $requestLog = parent::toArray($request);
+        $corporateId = $requestLog['member']['current_plan']['corporate_id'] ?? 0;
+        $benefit = CorporateBenefit::with('benefit')->where('plan_id', $corporateId)->get()->toArray();
+        $benefitDetailLog = RequestLogBenefit::with('benefit')->where('request_log_id', $requestLog['id'])->get()->toArray();
+        $benefitData = [];
+        if (count($benefit)){
+            foreach($benefit as $data){
+                array_push($benefitData, $data['benefit']);
+            }
+        }
+
+        // Service Rule
+        $corporateService = CorporateService::query()
+            ->where('corporate_id', $corporateId)
+            ->where('service_code', $requestLog['service_code'])
+            ->with(['configs'])
+            ->first();
+        $config = $corporateService->configs->pluck('value', 'name')->toArray();
+
+        // Exclusion Service or diagnosis
+        $exclusions = Exclusion::query()
+            ->where('corporate_id', $corporateId)
+            ->where('type', 'diagnosis')
+            ->with(['exclusionable', 'rules'])
+            ->get()->toArray();
+
+        $data = [
+            'id' => $requestLog['id'],
+            'code' => $requestLog['code'],
+            'member_id' => $requestLog['member']['member_id'],
+            'policy_number' => $requestLog['member']['current_policy']['code'],
+            'name' => $requestLog['member']['name'],
+            'date_of_birth' => $requestLog['member']['birth_date'],
+            'gender' => $requestLog['member']['gender'],
+            'marital_status' => Helper::maritalNormalization($requestLog['member']['marital_status']),
+            'member_type' => Helper::memberType($requestLog['member']['record_type']),
+            'principal_id' => $requestLog['member']['principal_id'] ? $requestLog['member']['principal_id'] : '-',
+            'principal_name' => $requestLog['member']['principal_id'] ? Helper::principalName($requestLog['member']['principal_id']) : '-',
+            'relation_with_principal' => Helper::relationWithPrincipal($requestLog['member']['relation_with_principal']),
+            'submission_date' => $requestLog['submission_date'],
+            'service_type' => Helper::serviceName($requestLog['service_code']),
+            'claim_method' => $requestLog['payment_type'],
+            'status' => $requestLog['status'],
+            'status_final_log' => $requestLog['status_final_log'],
+            'benefit' => $benefitData,
+            'benefit_data' => $benefitDetailLog,
+            'config_service' => $config,
+            'exclusion' => $exclusions,
+            'files' => $requestLog['files'],
+            
+
+        ];
+
+        return $data;
+    }
+}

app/Helpers/Helper.php

@@ -8,24 +8,39 @@ use Illuminate\Http\JsonResponse;
 use Symfony\Component\HttpFoundation\Response;
 use PHPMailer\PHPMailer\PHPMailer;
 use Illuminate\Support\Facades\DB;
+use App\Models\Member;
+use App\Models\Service;
 
 class Helper
 {
     public static function genderNormalization($anyGenderCode)
     {
         if ($anyGenderCode == 'M') {
-            return 'male';
+            return 'Male';
         } else if ($anyGenderCode == 'F') {
-            return 'female';
+            return 'Female';
         } else if ($anyGenderCode == 'O') {
-            return 'others';
+            return 'Others';
         } else if ($anyGenderCode == 'U') {
-            return 'unknown';
+            return 'Unknown';
         } else {
             return null;
         }
     }
 
+    public static function maritalNormalization($code)
+    {
+        if ($code == 'M') {
+            return 'Married';
+        } else if ($code == 'D') {
+            return 'Divorced';
+        } else if ($code == 'S') {
+            return 'Single';
+        } else {
+            return '-';
+        }
+    }
+
     public static function genderPerson($anyGenderCode)
     {
         if ($anyGenderCode == 'M') {
@@ -41,6 +56,44 @@ class Helper
         }
     }
 
+    public static function memberType($code){
+        if ($code == 'P') {
+            return 'Principal';
+        } else if ($code == 'D') {
+            return 'Dependent';
+        } else {
+            '-';
+        }
+    }
+
+    public static function relationWithPrincipal($code){
+        if ($code == 'H') {
+            return 'Husbund';
+        } 
+        else if ($code == 'W') {
+            return 'Wife';
+        } 
+        else if ($code == 'S') {
+            return 'Son';
+        } 
+        else if ($code == 'D') {
+            return 'Daughter';
+        } 
+        else {
+            '-';
+        }
+    }
+
+    public static function principalName($code){
+        $principalName = Member::where('member_id', $code)->get()->first();
+        return $principalName->name;
+    }
+
+    public static function serviceName($code){
+        $serviceName = Service::where('code', $code)->get()->first();
+        return $serviceName->name;
+    }
+
     public static function paginateResources($resource)
     {
         return [

app/Models/File.php

@@ -44,6 +44,9 @@ class File extends Model
         'claim-diagnosis' => 'claim/',
         'claim-kondisi' => 'claim/',
         'claim-invoice' => 'claim/',
+        'final-log-result' => 'final-log/',
+        'final-log-diagnosis' => 'final-log/',
+        'final-log-kondisi' => 'final-log/',
         'docs' => 'docs/',
     ];
 
@@ -54,7 +57,7 @@ class File extends Model
 
     public static function getDirectory($type)
     {
-        return self::$file_directories[$type] ?? 'any';
+        return self::$file_directories[$type] ?? 'any/';
     }
 
     public static function getFileName($type, $id)

app/Models/OrganizationUser.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class OrganizationUser extends Model
+{
+    use HasFactory;
+    protected $table = 'organization_user';
+    protected $connection = 'mysql';
+    protected $fillable = [
+        'organization_id',
+    ];
+
+    public function organization(){
+        return $this->hasOne(Organization::class, 'id', 'organization_id');
+    }
+}

app/Models/RequestLog.php

@@ -24,7 +24,9 @@ class RequestLog extends Model
         'payment_type',
         'service_code',
         'policy_id',
+        'final_log',
         'status',
+        'status_final_log',
         'source',
         'claim_id',
         'organization_id',

app/Models/RequestLogBenefit.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class RequestLogBenefit extends Model
+{
+    use HasFactory;
+
+    protected $table = 'request_log_benefits';
+
+    public $fillable = [
+        'request_log_id',
+        'benefit_id',
+        'amount_incurred',
+        'amount_approved',
+        'amount_not_approved',
+        'excess_paid',
+        'keterangan',
+    ];
+
+    public function benefit(){
+        return $this->belongsTo(Benefit::class, 'benefit_id', 'id');
+    }
+}

app/Models/User.php

@@ -105,4 +105,9 @@ class User extends Authenticatable
     {
         return $this->morphMany(NotificationToken::class, 'notifiabletoken');
     }
+
+    public function getOrganization()
+    {
+        return $this->hasOne(OrganizationUser::class, 'user_id');
+    }
 }

app/Services/RequestLogService.php

@@ -154,12 +154,16 @@ class RequestLogService{
             }
 
             // Update Request LOG Status & Link with Claim
-            $requestLog->update([
-               'status' =>  $row['status']
-            ]);
-            $requestLog->save();
+            DB::beginTransaction();
+                $requestLog->update([
+                'status' =>  $row['status']
+                ]);
+                $requestLog->save();
+            DB::commit();
             return $requestLog;
         } catch (\Exception $e) {
+            DB::rollBack();
+
             throw $e;
         }
     }

database/migrations/2023_11_07_124118_add_columns_corporate_id_to_users_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('users', function (Blueprint $table) {
+            $table->integer('corporate_id')->default(0)->after('phone');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('corporate_id');
+        });
+    }
+};

database/migrations/2023_11_30_092154_add_columns_to_request_logs.php

@@ -0,0 +1,35 @@
+<?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('request_logs', function (Blueprint $table) {
+            $table->integer('final_log')
+                    ->default(0)
+                    ->after('status')
+                    ->comment('untuk flag request masuk ke final, jika 0 masih request dan 1 itu sudah masuk ke finallog');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('request_logs', function (Blueprint $table) {
+            $table->dropColumn('final_log');
+        });
+    }
+};

database/migrations/2023_11_30_101523_add_columns_to_request_logs.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('request_logs', function (Blueprint $table) {
+            $table->string('status_final_log')->after('status')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('request_logs', function (Blueprint $table) {
+            $table->dropColumn('status_final_log');
+        });
+    }
+};

database/migrations/2023_12_09_090301_create_organization_user.php

@@ -0,0 +1,34 @@
+<?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('organization_user', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id');
+            $table->foreignId('organization_id');
+            $table->integer('status')->nullable()->default(1);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('organization_user');
+    }
+};

database/migrations/2023_12_11_100126_create_request_log_benefits_table.php

@@ -0,0 +1,38 @@
+<?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('request_log_benefits', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+            $table->foreignId('request_log_id');
+            $table->foreignId('benefit_id');
+            $table->integer('amount_incurred');
+            $table->integer('amount_approved');
+            $table->integer('amount_not_approved');
+            $table->integer('excess_paid');
+            $table->string('keterangan');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('request_log_benefits');
+    }
+};

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

@@ -61,7 +61,7 @@ export type ClaimHistoryCare = {
   id: number;
   claim_id: number;
   service_code: string;
-  admision_date: string;
+  admission_date: string;
   discharge_date: string;
   main_diagnosis_id: number;
   main_diagnosis_name: string;

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

@@ -22,4 +22,5 @@ export type Member = {
   active: string,
   current_plans: Plan,
   current_corporate: Corporate,
+  full_name: string,
 };

frontend/dashboard/src/components/MuiDialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton, DialogActions } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { ReactElement } from 'react';
 import Iconify from './Iconify';
@@ -13,12 +13,13 @@ type MuiDialogProps = {
   openDialog: boolean;
   setOpenDialog: Function;
   content?: ReactElement;
+  action?: ReactElement;
   maxWidth?: string;
 };
 
 // ----------------------------------------------------------------------
 
-const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
+const MuiDialog = ({ title, openDialog, setOpenDialog, content, action, maxWidth }: MuiDialogProps) => {
   const handleClose = () => {
     setOpenDialog(false);
   };
@@ -46,9 +47,15 @@ const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiD
           </IconButton>
         </Stack>
       </DialogTitle>
+     
       <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
         {content ? content : 'Testing Content Dialog'}
       </DialogContent>
+     
+      {action ? (
+          <DialogActions> {action} </DialogActions>
+      )  : ''}
+      
     </Dialog>
   );
 };

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -77,6 +77,7 @@ const navConfig = [
         children: [
           { title: 'Daily Monitoring', path: '/case_management/daily_monitoring' },
           { title: 'Laboratorium Result', path: '/case_management/laboratorium_result' },
+          { title: 'Inpatient Monitoring', path: '/case_management/inpatient_monitoring' },
         ],
       },
       {
@@ -84,7 +85,7 @@ const navConfig = [
         children: [
           { title: 'Request', path: '/custormer-service/request' },
           // { title: 'Membership', path: '/cs-membership' },
-          { title: 'Final LOG', path: '/custormer-service/final-request' },
+          { title: 'Final LOG', path: '/custormer-service/final-log' },
         ],
       },
       {

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormCreate.tsx

@@ -0,0 +1,355 @@
+/**
+ * Core
+ * ============================================
+ */
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { Box, FormControlLabel, Grid, Checkbox, Typography, CircularProgress , Button, styled, Stack, IconButton, Card} from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+
+/**
+ * Components
+ * ============================================
+*/
+// - Global -
+import Label from '@/components/Label';
+// - Local -
+import FormCreateSearch from './FormCreateSearch';
+import FormCreateListChoose from './FormCreateListChoose';
+import FormCreateBtnUpload from './FormCreateBtnUpload';
+
+/**
+ * Icon, Utils, Types, Functions, theme, hook
+ * ============================================
+ */
+import { ArrowBackIosNew } from '@mui/icons-material';
+import { fDateTimesecond } from '@/utils/formatTime';
+import { MemberListType } from '../Model/Types';
+import { addClaimRequest, getMemberList } from '../Model/Functions';
+import palette from '@/theme/palette';
+import FormCreateFilesUpload from './FormCreateFilesUpload';
+import useLoadOnScroll from '@/hooks/useLoadOnScroll';
+import useCollapseDrawer from '@/hooks/useCollapseDrawer';
+import FormCreateBtnChoose from './FormCreateBtnChoose';
+import axios from '../../../utils/axios';
+
+export default function FormCreate() {
+    const navigate = useNavigate()
+    const defaultListChoosed:MemberListType[] = [];
+
+    // State
+    // -------------------------
+    const [keyword, setKeyword]             = useState<string>('');
+    const [listChoosed, setListChoosed]     = useState<MemberListType[]>([]);
+    const [isChoosed, setIsChoosed]         = useState<boolean>(false);
+    const [formIsLoading, setFormIsLoading] = useState<boolean>(false);
+
+    // List Choose - auto Scroll
+    // -------------------------
+    const fetchFunction = async (page: number): Promise<MemberListType[]> => getMemberList(page, keyword)
+
+    const {data: MemberList, isLoading: scrollIsLoading, setData, resetLastPage, refetchData} = useLoadOnScroll<MemberListType>(fetchFunction);
+
+    // List Choose - Search
+    // -------------------------
+    const handleSearch = (keyword: string) => {
+        setData([])
+        resetLastPage()
+        setKeyword(keyword)
+        refetchData()
+    }
+
+    // Function - Clear Form
+    // -----------------------------
+    const clearForm = () => {
+        setListChoosed(defaultListChoosed);
+        setIsChoosed(false);
+    }
+
+    // Function - Choose Patien Type
+    // -----------------------------
+    const handleChoosePatienType = (data: MemberListType, type: string) => {
+        let newListChoosed = listChoosed.map((list) => {
+            if (data.id == list.id) {
+                list.patien_type = type
+            }
+            
+            return list;
+        })
+        setListChoosed(newListChoosed)
+    }
+
+    // Function - Handle Btn Upload
+    // -----------------------------
+    const handleChangeInput = (data: MemberListType, type_file: 'kondisi'|'diagnosa'|'penunjang', file: any) => {
+        let newListChoosed = listChoosed.map((list) => {
+            if (data.id == list.id) {
+                if (type_file == 'kondisi') {
+                    if (list.file_kondisi == undefined) {
+                        list.file_kondisi = [file];
+                    }
+                    else {
+                        list.file_kondisi.push(file);
+                    }
+                }
+
+                if (type_file == 'diagnosa') {
+                    if (list.file_diagnosa == undefined) {
+                        list.file_diagnosa = [file];
+                    }
+                    else {
+                        list.file_diagnosa.push(file);
+                    }
+                }
+
+                if (type_file == 'penunjang') {
+                    if (list.file_penunjang == undefined) {
+                        list.file_penunjang = [file];
+                    }
+                    else {
+                        list.file_penunjang.push(file);
+                    }
+                }
+            }
+
+            return list;
+        })
+
+        setListChoosed(newListChoosed)
+    }
+
+    // Function - Handle Remove Fle
+    // -----------------------------
+    const handleRemoveFile = (data: MemberListType, type_file: 'kondisi'|'diagnosa'|'penunjang', target_index: number) => {
+        let newListChoosed = listChoosed.map((list) => {
+            if (data.id == list.id) {
+                if (type_file == 'kondisi') {
+                    list.file_kondisi = list.file_kondisi?.filter((file: any, index: number) =>{
+                        if (target_index !== index) {
+                            return file;
+                        }
+                    });
+                }
+
+                if (type_file == 'diagnosa') {
+                    list.file_diagnosa = list.file_diagnosa?.filter((file: any, index: number) =>{
+                        if (target_index !== index) {
+                            return file;
+                        }
+                    });
+                }
+
+                if (type_file == 'penunjang') {
+                    list.file_penunjang = list.file_penunjang?.filter((file: any, index: number) =>{
+                        if (target_index !== index) {
+                            return file;
+                        }
+                    });
+                }
+            }
+
+            return list;
+        })
+
+        setListChoosed(newListChoosed)
+    }
+
+    // Function - Handle Submit Form
+    // -----------------------------
+    const handleSubmit = async () => {
+        setFormIsLoading(true)
+        let response = await addClaimRequest(listChoosed)
+        setFormIsLoading(false)
+
+        if (response == true) {
+            clearForm()
+        }
+    }
+
+
+
+    let isDirty = listChoosed.some((row) => {
+        if (row.patien_type == undefined) {
+            return true
+        }
+    })
+
+    return (
+        <Box>
+            {/* Back Button */}
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 5}}>
+                <IconButton size='large' color='inherit' onClick={() => isChoosed==false ? navigate(`/claim-requests`) : setIsChoosed(false)} >
+                    <ArrowBackIosNew/>
+                </IconButton>
+
+                <Typography variant="h5" sx={{ marginLeft: '24px' }}>
+                    {'Create Claim Requests'}
+                </Typography>
+            </Box>
+
+            {/* Choose Section */}
+            <Grid container spacing={4} sx={{ px: 2, position: 'relative', display: isChoosed==false ? 'inherit' : 'none' }}>
+                {/* Search */}
+                <Grid item xs={12}>
+                    <FormCreateSearch onEmpty={() => handleSearch('')} onSubmit={(keyword) => handleSearch(keyword)} />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Grid container spacing={2}>
+                        {/* List */}
+                        <Grid item xs={12}>
+                            <Grid container spacing={2}>
+                                {
+                                    MemberList.map((row, index) => {
+                                        return (
+                                            <FormCreateListChoose
+                                                key={index}
+                                                data={row}
+                                                ListChoosed={listChoosed}
+                                                handleCheckedProp={(checked, data) => {
+                                                    checked ? setListChoosed((prevData) => [...prevData, data]) : setListChoosed((items) => items.filter(item => item.id != data.id))
+                                                }}
+                                            />
+                                        )
+                                    })
+                                }
+                            </Grid>
+                        </Grid>
+
+                        {/* Loading */}
+                        <Grid item xs={12} sx={{ display: scrollIsLoading === false ? 'none' : 'flex', justifyContent: 'center', marginTop: '40px' }}>
+                            <CircularProgress />
+                        </Grid>
+
+                        {/* Submit List */}
+                        <Grid item xs={12}>
+                            <FormCreateBtnChoose disabled={listChoosed.length==0} title={`Create Number Batch (${listChoosed.length})`} handleClickProp={() => setIsChoosed(true)} />
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+
+            {/* Input Section */}
+            <Grid container spacing={10} sx={{ px: 2, display: isChoosed==true ? 'inherit' : 'none' }}>
+                {
+                    listChoosed.map((row, index) => {
+                        return (
+                            <Grid key={index} item xs={12}>
+                                <Grid container spacing={6}>
+                                    {/* Patien Name */}
+                                    <Grid item xs={12}>
+                                        <Card sx={{ border: '1px solid rgba(0,0,0,0.05)', display: 'flex', justifyContent: 'space-between', borderRadius: '12px', px: '24px', py: '16px' }}>
+                                            <Box>
+                                                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                                                    {row.name}
+                                                </Typography>
+                                                <Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
+                                                    {row.member_id}
+                                                </Typography>
+                                            </Box>
+
+                                            <Label variant="ghost" color="default">
+                                                {fDateTimesecond(new Date())}
+                                            </Label>
+                                        </Card>
+                                    </Grid>
+                                    {/* Patien Type */}
+                                    <Grid item xs={12}>
+                                        <Grid container spacing={2}>
+                                            {row.service_type.map((r,i) => {
+                                                const code = r.code
+                                                return (
+                                                    <Grid item xs={6}>
+                                                        <Button
+                                                            sx={{ padding: 2, width: '100%',border: row.patien_type === code ? '1px solid #19BBBB' : '1px solid #919EAB52' }}
+                                                            variant="outlined"
+                                                            color={row.patien_type === code ? 'primary' : 'inherit'}
+                                                            onClick={() => {
+                                                                handleChoosePatienType(row, code)
+                                                            }}
+                                                        >
+                                                            {r.name}
+                                                        </Button>
+                                                    </Grid>
+                                                )
+                                            })}
+                                        </Grid>
+                                    </Grid>
+
+                                    {/* File Kondisi */}
+                                    <Grid item xs={12}>
+                                        <Grid container spacing={2}>
+                                            <Grid item xs={12}>
+                                                <Typography variant="h6">Condition Document</Typography>
+                                            </Grid>
+
+                                            {row.file_kondisi && row.file_kondisi.map((file, index) => (
+                                                <Grid item xs={12} key={index}>
+                                                    <FormCreateFilesUpload file={file} handleRemoveFileProp={() => handleRemoveFile(row, 'kondisi', index)} />
+                                                </Grid>
+                                            ))}
+
+                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                                <FormCreateBtnUpload handleChangeInputProp={(file) => handleChangeInput(row, 'kondisi', file)} />
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+
+                                    {/* File Diagnosa */}
+                                    <Grid item xs={12}>
+                                        <Grid container spacing={2}>
+                                            <Grid item xs={12}>
+                                                <Typography variant="h6">Diagnosis Document</Typography>
+                                            </Grid>
+
+                                            {row.file_diagnosa && row.file_diagnosa.map((file, index) => (
+                                                <Grid item xs={12} key={index}>
+                                                    <FormCreateFilesUpload file={file} handleRemoveFileProp={() => handleRemoveFile(row, 'diagnosa', index)} />
+                                                </Grid>
+                                            ))}
+
+                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                                <FormCreateBtnUpload handleChangeInputProp={(file) => handleChangeInput(row, 'diagnosa', file)} />
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+
+                                    {/* File Penunjang */}
+                                    <Grid item xs={12}>
+                                        <Grid container spacing={2}>
+                                            <Grid item xs={12}>
+                                                <Typography variant="h6">Supporting Result Document</Typography>
+                                            </Grid>
+
+                                            {row.file_penunjang && row.file_penunjang.map((file, index) => (
+                                                <Grid item xs={12} key={index}>
+                                                    <FormCreateFilesUpload file={file} handleRemoveFileProp={() => handleRemoveFile(row, 'penunjang', index)} />
+                                                </Grid>
+                                            ))}
+
+                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                                <FormCreateBtnUpload handleChangeInputProp={(file) => handleChangeInput(row, 'penunjang', file)} />
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+
+                                </Grid>
+                            </Grid>
+                        )
+                    })
+                }
+
+                <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <Box display="flex" gap={1}>
+                        <Button variant="outlined" color="inherit" onClick={() => clearForm()}>
+                            Cancel
+                        </Button>
+                        <LoadingButton disabled={isDirty} type="submit" variant="contained" loading={formIsLoading} onClick={() => handleSubmit()}>
+                            Save Changes
+                        </LoadingButton>
+                    </Box>
+                </Grid>
+            </Grid>
+        </Box>
+    )
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormCreateBtnChoose.tsx

@@ -0,0 +1,39 @@
+import { styled, Button } from "@mui/material";
+import useCollapseDrawer from "@/hooks/useCollapseDrawer";
+
+/**
+ * Custom Style
+ * ============================================
+*/
+const DivCustom1 = styled('div')(({ theme }) => ({
+    background: 'white',
+    position: 'fixed',
+    left: '350px',
+    right: 0,
+    bottom: 0,
+    paddingLeft: '32px',
+    paddingRight: '32px',
+    paddingTop: '32px',
+    paddingBottom: '48px',
+    [theme.breakpoints.between('sm', 'lg')]: {
+        left: '0px',
+    },
+}));
+
+type Props = {
+    disabled: boolean,
+    title   : string,
+    handleClickProp: () => void
+}
+
+export default function FormCreateBtnChoose ({disabled, title, handleClickProp}: Props) {
+    const { collapseClick } = useCollapseDrawer();
+
+    return (
+        <DivCustom1 sx={{ left: collapseClick ? '80px' : '350px' }}>
+            <Button variant="contained" color="primary" disabled={disabled} sx={{ width: '100%', p: '11px' }} onClick={handleClickProp}>
+                {title}
+            </Button>
+        </DivCustom1>
+    )
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormCreateBtnUpload.tsx

@@ -0,0 +1,39 @@
+import { useRef } from "react";
+import { Box, ButtonBase, Typography } from "@mui/material";
+import Iconify from "@/components/Iconify";
+
+type Props = {
+    handleChangeInputProp: (event: any) => void
+}
+
+export default function FormCreateBtnUpload ({handleChangeInputProp}: Props) {
+    const fileInput = useRef<HTMLInputElement>(null);
+
+    return (
+        <ButtonBase sx={{ py: 5, border: '2px dashed #F9FAFB',bgcolor: '#919EAB52',borderRadius: '8px',width: '100%', height: '60px'}} onClick={() => fileInput.current?.click()}>
+            <Box
+                sx={{
+                    display: 'flex',
+                    placeItems: 'center',
+                    gap: 1,
+                    placeContent: 'center',
+                    py:'11px'
+                }}
+            >
+                <Iconify icon="icon-park-outline:upload-one" fontSize="1.5em" />
+                <Typography variant="body1" fontWeight="bold" fontSize={'15px'}>
+                    Upload Result
+                </Typography>
+            </Box>
+            <input
+                type="file"
+                id="file"
+                ref={fileInput}
+                style={{ display: 'none' }}
+                multiple
+                onChange={(event) => handleChangeInputProp(event.target.files ? event.target.files[0] : {})}
+                accept="application/pdf"
+            />
+        </ButtonBase>
+    )
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormCreateFilesUpload.tsx

@@ -0,0 +1,25 @@
+import Iconify from "@/components/Iconify";
+import { ArrowBackIosNew, InsertDriveFile } from '@mui/icons-material';
+import { Stack, Typography } from "@mui/material";
+
+type Props = {
+    file: any,
+    handleRemoveFileProp: () => void,
+}
+
+export default function FormCreateFilesUpload({ file, handleRemoveFileProp }: Props) {
+    return (
+        <Stack direction="row" justifyContent={'space-between'} sx={{ mb: '16px' }}>
+            <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                <InsertDriveFile />
+                <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
+            </Stack>
+            <Iconify
+                icon="eva:trash-2-outline"
+                color={'darkred'}
+                onClick={() => {handleRemoveFileProp()}}
+                sx={{cursor: 'pointer'}}
+            ></Iconify>
+        </Stack>
+    )
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormCreateListChoose.tsx

@@ -0,0 +1,78 @@
+/**
+ * Core
+ * ============================================
+ */
+import { useEffect, useState } from 'react';
+import { Box, FormControlLabel, Grid, Checkbox, Typography, Card} from '@mui/material';
+
+/**
+ * Components
+ * ============================================
+*/
+// - Global -
+import Label from '@/components/Label';
+// - Local -
+
+/**
+ * Icon, Utils, Types, Functions, theme, hook
+ * ============================================
+ */
+import { fDateTimesecond } from '@/utils/formatTime';
+import { MemberListType } from '../Model/Types';
+import palette from '@/theme/palette';
+
+/**
+ * Props
+ * =====================================================
+ */
+type Props = {
+    data: MemberListType,
+    ListChoosed: MemberListType[],
+    handleCheckedProp: (checked: boolean, data: MemberListType) => void,
+};
+
+export default function FormCreateListChoose({data, ListChoosed, handleCheckedProp}: Props) {
+    const [isChoosed, setIsChoosed] = useState<boolean>(false)
+
+    useEffect(() => {
+        setIsChoosed(false);
+
+        ListChoosed.forEach(list => {
+            if (list.id == data.id) {
+                setIsChoosed(true);
+            }
+        })
+    }, [ListChoosed])
+
+    return (
+        <Grid item xs={12}>
+            <Card sx={{
+                border: '0px solid rgba(0,0,0,0.125)', px: '24px', py: '16px', borderRadius: '12px', display: 'flex', justifyContent: 'space-between',
+                bgcolor: (theme) => {
+                    return isChoosed ? palette.light.primary.lighter : palette.light.background.default
+                }
+            }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', px: '8px'}}>
+                    <FormControlLabel
+                        label=""
+                        control={<Checkbox onChange={(event, checked) => handleCheckedProp(checked, data)} />}
+                        checked={isChoosed}
+                    />
+
+                    <Box>
+                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                            {data.name}
+                        </Typography>
+                        <Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
+                            {data.member_id}
+                        </Typography>
+                    </Box>
+                </Box>
+
+                <Label variant="ghost" color="default">
+                    {fDateTimesecond(new Date())}
+                </Label>
+            </Card>
+        </Grid>
+    )
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormCreateSearch.tsx

@@ -0,0 +1,70 @@
+/**
+ * Core
+ * ============================================
+ */
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Grid } from '@mui/material';
+
+/**
+ * Components
+ * ============================================
+*/
+// - Global -
+import { FormProvider, RHFTextField } from '@/components/hook-form';
+// - Local -
+
+/**
+ * Icon, Utils, Types, Functions
+ * ============================================
+ */
+import { Search } from '@mui/icons-material';
+import { SearchType } from '../Model/Types';
+
+type Props = {
+    onSubmit: (keyword: string) => void,
+    onEmpty: () => void,
+};
+
+const FormCreateSearch = ({ onSubmit, onEmpty }: Props) => {
+    const defaultValuesSearchForm = {
+        keyword: ''
+    };
+
+    const methodsSearchForm = useForm<SearchType>({
+        defaultValues: defaultValuesSearchForm
+    });
+
+    const { handleSubmit, formState: { isDirty } } = methodsSearchForm;
+
+    // search on submit
+    const onSubmitSearch = (data: SearchType ) => {
+        onSubmit(data.keyword);
+    }
+
+    // search on empty
+    useEffect(() => {
+        if (isDirty === false) {
+            onEmpty()
+        }
+    },[isDirty])
+
+    return (
+        <FormProvider methods={methodsSearchForm} onSubmit={handleSubmit(onSubmitSearch)}>
+            <Grid container direction={"row"}>
+                <Grid item xs={12}>
+                    <RHFTextField
+                        name="keyword"
+                        placeholder="Search..."
+                        autoComplete='off'
+                        fullWidth
+                        InputProps={{ startAdornment: <Search /> }}
+                        sx={{ input: { paddingLeft: '14px' } }}
+                    />
+                </Grid>
+            </Grid>
+        </FormProvider>
+    )
+}
+
+export default FormCreateSearch

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Components/FormEdit.tsx

@@ -0,0 +1,456 @@
+import * as Yup from 'yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Controller, useForm } from 'react-hook-form';
+import React, { useRef, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { FormProvider, RHFTextField } from '../../../components/hook-form';
+
+import { makeFormData } from '@/utils/jsonToFormData';
+import {
+  Autocomplete,
+  Button,
+  Grid,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  TextField,
+  Typography,
+  useTheme,
+  List,
+  ListItem,
+  IconButton,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+  Card,
+  InputAdornment,
+  Divider,
+  ButtonBase,
+  Box,
+} from '@mui/material';
+import Iconify from '../../../components/Iconify';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import { LoadingButton } from '@mui/lab';
+import { fCurrency } from '../../../utils/formatNumber';
+import MemberSelectDialog from '../../../components/dialogs/MemberSelectDialog';
+import { Add, ArrowBackIosNew, DeleteOutline } from '@mui/icons-material';
+import { ClaimRequest, Files } from '@/@types/claims';
+import { fDateTimesecond } from '@/utils/formatTime';
+
+interface FormValuesProps extends Partial<ClaimRequest> {
+  taxes: boolean;
+  inStock: boolean;
+}
+
+type Props = {
+  isEdit: boolean;
+  currentClaim?: ClaimRequest;
+};
+
+export default function FormEdit({ isEdit, currentClaim }: Props) {
+  const navigate = useNavigate();
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const EditClaimSchema = Yup.object().shape({
+    organization_id: Yup.string().required('Code Provider is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      id: currentClaim?.id || '-',
+      code: currentClaim?.code || '-',
+      member_name: currentClaim?.member?.name || '-',
+      date: currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : '-',
+      claim_method: currentClaim?.payment_type || '-',
+      service_type: currentClaim?.service_code || '-',
+      organization_id: currentClaim?.organization?.code || '-',
+    }),
+    [currentClaim]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentClaim) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+    // setFileKondisis(currentClaim?.files_by_type?.claim_diagnosis);
+    // setFileDiagnosas(currentClaim?.files_by_type?.claim_diagnosis);
+    setFileHasilPenunjangCurrent(currentClaim?.files_by_type?.claim_result);
+  }, [isEdit, currentClaim]);
+
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(EditClaimSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
+
+  const [isCheckingLimit, setIsCheckingLimit] = useState(false);
+  const [isEligible, setIsEligible] = useState(false);
+  const [memberBenefits, setMemberBenefits] = useState([]);
+  const [diagnosisOption, setDiagnosisOption] = useState([]);
+  const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
+  const [member, setMember] = useState({})
+
+    // ----------------------------------------------------------------------
+
+  // Files Result Kondisi
+  const fileKondisiInput = useRef<HTMLInputElement>(null);
+  const [fileKondisis, setFileKondisis] = useState<Files>([]);
+
+  const handleKondisiInputChange = (event) => {
+    if (event.target.files[0]) {
+      setFileKondisis([...fileKondisis, ...event.target.files]);
+    } else {
+      console.log('NO FILE');
+    }
+  };
+  const removeKondisiFiles = (filesState, index) => {
+    setFileKondisis(
+      filesState.filter((file, fileIndex) => {
+        return fileIndex != index;
+      })
+    );
+  };
+
+  // Files Result Diagnosa
+  const fileDiagnosaInput = useRef<HTMLInputElement>(null);
+  const [fileDiagnosas, setFileDiagnosas] = useState([]);
+
+  const handleDiagnosaInputChange = (event) => {
+    if (event.target.files[0]) {
+      setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
+    } else {
+      console.log('NO FILE');
+    }
+  };
+  const removeDiagnosaFiles = (filesState, index) => {
+    setFileDiagnosas(
+      filesState.filter((file, fileIndex) => {
+        return fileIndex != index;
+      })
+    );
+  };
+
+  // Files Result Hasil Penunjang
+  const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
+  const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState([]);
+  const [fileHasilPenunjangsCurrent, setFileHasilPenunjangCurrent] = useState([]);
+
+  const handleResultInputChange = (event) => {
+    if (event.target.files[0]) {
+      setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
+    } else {
+      console.log('NO FILE');
+    }
+  };
+  const removeFiles = (filesState, index) => {
+    setFileHasilPenunjangs(
+      filesState.filter((file, fileIndex) => {
+        return fileIndex != index;
+      })
+    );
+  };
+
+
+  const onSubmit = async (data: FormValuesProps) => {
+    try {
+      // const formData = new FormData();
+      // formData.append('result_files', fileHasilPenunjangs);
+      // formData.append('diagnosa_files', fileDiagnosaInput);
+      // formData.append('kondisi_files', fileKondisiInput);
+      // formData.append('provider_code', data.organization_id);
+      // formData.append('_method', 'PUT');
+      const formData = makeFormData({
+        result_files: fileHasilPenunjangs,
+        diagnosa_files: fileDiagnosas,
+        kondisi_files: fileKondisis,
+        provider_code: data.organization_id,
+        _method: 'PUT'
+      });
+
+      const response = await axios.put(`/claim-requests/${data.id}`, formData);
+
+      reset();
+      enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
+      navigate('/claim-requests');
+    } catch (error: any) {
+      if (error && error.response.status === 422) {
+        for (const [key, value] of Object.entries(error.response.data.errors)) {
+          // setError(key, { message: value[0] });
+          enqueueSnackbar('Failed Processing Request', { variant: 'error' });
+        }
+      } else {
+        enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
+      }
+    }
+  };
+
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center'}}>
+                <IconButton size='large' color='inherit' onClick={() => navigate(`/claim-requests`)} >
+                    <ArrowBackIosNew/>
+                </IconButton>
+
+                <Typography variant="h5" sx={{ marginLeft: '24px' }}>
+                    {'Edit Claim Requests'}
+                </Typography>
+            </Box>
+        </Stack>
+
+      <Card sx={{paddingX:2, paddingY:2}}>
+        <Grid container spacing={2}>
+          <Grid item xs={5}>
+            <Typography variant="subtitle1">Code*</Typography>
+          </Grid>
+          <Grid item xs={7}>
+            <Typography variant="subtitle1">Name*</Typography>
+          </Grid>
+          <Grid item xs={5}>
+            <RHFTextField name="code" label="Code" disabled/>
+          </Grid>
+          <Grid item xs={7}>
+            <RHFTextField name="member_name" label="Name" disabled/>
+          </Grid>
+          {/* <input type="hidden" name="id"/> */}
+
+
+          <Grid item xs={12}></Grid>
+
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Date of Submission*</Typography>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Claim Method*</Typography>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Service Type*</Typography>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography variant="subtitle1">Code Provider*</Typography>
+          </Grid>
+
+
+          <Grid item xs={3}>
+            <RHFTextField InputProps={{endAdornment: (
+              <InputAdornment position="end">
+                <CalendarTodayIcon />
+              </InputAdornment>
+            ), }}
+            name="date" label="Date of Submission" disabled/>
+          </Grid>
+          <Grid item xs={3}>
+            <RHFTextField name="claim_method" label="Claim Method" disabled/>
+          </Grid>
+          <Grid item xs={3}>
+            <RHFTextField name="service_type" label="Service Type*" disabled/>
+          </Grid>
+          <Grid item xs={3}>
+            <RHFTextField name="organization_id" label="Code Provider*"/>
+          </Grid>
+
+
+        {/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
+          <React.Fragment>
+            <Grid item xs={12}>
+              <Typography variant='h6'> Condition Document</Typography>
+            </Grid>
+            <Grid item xs={12}>
+              {fileKondisis &&
+                fileKondisis.map((file, index) => (
+                  <Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
+                    <Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
+                    <Iconify
+                      icon="eva:trash-2-outline"
+                      color={'darkred'}
+                      onClick={() => {
+                        removeKondisiFiles(fileKondisis, index);
+                      }}
+                    ></Iconify>
+                  </Stack>
+              ))}
+            </Grid>
+            <Grid item xs={12}>
+              <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileKondisiInput.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">
+                      Add File
+                    </Typography>
+                  </Box>
+                <input
+                  type="file"
+                  id="file"
+                  ref={fileKondisiInput}
+                  style={{ display: 'none' }}
+                  multiple
+                  onChange={handleKondisiInputChange}
+                  accept="application/pdf"
+                />
+              </ButtonBase>
+            </Grid>
+          </React.Fragment>
+        {/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
+          <React.Fragment>
+            <Grid item xs={12}>
+              <Typography variant='h6'> Diagnosis Document</Typography>
+            </Grid>
+            <Grid item xs={12}>
+              {fileDiagnosas &&
+                fileDiagnosas.map((file, index) => (
+                  <Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
+                    <Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
+                    <Iconify
+                      icon="eva:trash-2-outline"
+                      color={'darkred'}
+                      onClick={() => {
+                        removeDiagnosaFiles(fileDiagnosas, index);
+                      }}
+                    ></Iconify>
+                  </Stack>
+              ))}
+            </Grid>
+            <Grid item xs={12}>
+              <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.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">
+                      Add Result
+                    </Typography>
+                  </Box>
+                <input
+                  type="file"
+                  id="file"
+                  ref={fileDiagnosaInput}
+                  style={{ display: 'none' }}
+                  multiple
+                  onChange={handleDiagnosaInputChange}
+                  accept="application/pdf"
+                />
+              </ButtonBase>
+            </Grid>
+          </React.Fragment>
+        {/* -------------------------------Upload Result Hasil Penunjang------------------------------- */}
+          <React.Fragment>
+            <Grid item xs={12}>
+              <Typography variant='h6'> Supporting Result Document</Typography>
+            </Grid>
+            <Grid item xs={12}>
+              {fileHasilPenunjangs &&
+                fileHasilPenunjangs.map((file, index) => (
+                  <Stack sx={{marginTop: 2}} direction="row" justifyContent={'space-between'} key={index}>
+                    <Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
+                    <Iconify
+                      icon="eva:trash-2-outline"
+                      color={'darkred'}
+                      onClick={() => {
+                        removeFiles(fileHasilPenunjangs, index);
+                      }}
+                    ></Iconify>
+                  </Stack>
+              ))}
+            </Grid>
+            <Grid item xs={12}>
+              <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.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">
+                      Add Result
+                    </Typography>
+                  </Box>
+                <input
+                  type="file"
+                  id="file"
+                  ref={fileHasilPenunjangInput}
+                  style={{ display: 'none' }}
+                  multiple
+                  onChange={handleResultInputChange}
+                  accept="application/pdf"
+                />
+              </ButtonBase>
+            </Grid>
+          </React.Fragment>
+
+        </Grid>
+      </Card>
+      <Grid container marginTop={3}>
+        <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(`/claim-requests`)}
+              >
+                Cancel
+              </Button>
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                size="large"
+                loading={isSubmitting}
+              >
+                Update
+              </LoadingButton>
+          </Stack>
+        </Grid>
+      </Grid>
+    </FormProvider>
+  );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/CreateUpdate.tsx

@@ -0,0 +1,63 @@
+import * as Yup from 'yup';
+import { Box, IconButton } from '@mui/material';
+import { ArrowBackIosNew } from '@mui/icons-material';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Autocomplete, Button, Card, Collapse, Container, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { 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 { useEffect, useMemo, useRef, useState } from 'react';
+import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
+import { styled } from '@mui/system';
+import axios from '../../utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import { LoadingButton } from '@mui/lab';
+import { fCurrency } from '../../utils/formatNumber';
+import Iconify from '../../components/Iconify';
+import { ClaimRequest } from '@/@types/claims';
+import FormEdit from './Components/FormEdit';
+import FormCreate from './Components/FormCreate';
+
+export default function ClaimsCreateUpdate() {
+
+    const { themeStretch } = useSettings();
+    const { id } = useParams();
+
+    const isEdit = id ? true : false;
+
+    const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
+
+    useEffect(() => {
+        if (isEdit) {
+        axios.get('/claim-requests/' + id).then((res) => {
+            console.log('Yeet', res.data);
+            setCurrentClaim(res.data.data);
+        });
+
+        console.log(currentClaim)
+        }
+    }, [id]);
+
+
+  return (
+    <Page title={isEdit ? `Edit Claim Request` : "Create New Claim"}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        {
+            id == undefined
+            ?
+            (
+                <FormCreate />
+            )
+            :
+            (
+                <FormEdit isEdit={isEdit} currentClaim={currentClaim} />
+            )
+        }
+
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Detail.tsx

@@ -0,0 +1,306 @@
+// mui
+import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
+// components
+import Page from '../../components/Page';
+// utils
+import useSettings from '../../hooks/useSettings';
+// react
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { useEffect, useState, useRef } from 'react';
+import axios from '../../utils/axios';
+// pages
+import DetailTimeline from '../../pages/ClaimRequests/DetailTimeline';
+import DetailStepper from '../../pages/ClaimRequests/DetailStepper';
+import { format } from 'date-fns';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import Iconify from '@/components/Iconify';
+import { fPostFormat } from '@/utils/formatTime';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import DownloadIcon from '@mui/icons-material/Download';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { fDateTimesecond } from '@/utils/formatTime';
+import { makeFormData } from '@/utils/jsonToFormData';
+
+import { enqueueSnackbar } from 'notistack';
+
+// ----------------------------------------------------------------------
+
+export default function Detail() {
+    const location = useLocation();
+    const queryParams = new URLSearchParams(location.search);
+    const code = queryParams.get('code');
+
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const [data, setData] = useState();
+    const [dataDialog, setDataDialog] = useState();
+    const [document, setDocument] = useState(null);
+
+    const { id } = useParams();
+
+    useEffect(() => {
+        axios
+        .get('/claim-requests/detail/'+id)
+        .then((response) => {
+            setData(response.data);
+            setDataDialog(response.data.data.dialog_submits);
+            setDocument(response.data.data.documents);
+
+        })
+        .catch((error) => {
+            console.error(error);
+        });
+
+    }, []);
+
+    const [isInvoiceVisible, setInvoiceVisibility] = useState(false);
+
+    const handleInvoice = () => {
+        setInvoiceVisibility(!isInvoiceVisible);
+    }
+    const currentDate = new Date();
+    const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
+    const [dateInvoice, setDateInvoice] = useState(currentDate);
+
+    const fileInvoiceInput = useRef<HTMLInputElement>(null);
+    const [fileInvoices, setFileInvoices] = useState([]);
+
+    const handleInvoiceInputChange = (event) => {
+        if (event.target.files[0]) {
+            setFileInvoices([...fileInvoices, ...event.target.files]);
+        } else {
+            console.log('NO FILE');
+        }
+    };
+    const removeInvoiceFiles = (filesState, index) => {
+        setFileInvoices(
+        filesState.filter((file, fileIndex) => {
+            return fileIndex != index;
+        })
+        );
+    };
+    const date = dateInvoice ? fPostFormat(dateInvoice, 'yyyy-MM-dd') : null;
+
+    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
+    const handleCloseDialogSubmit = () => {
+        setOpenDialogSubmit(false);
+    }
+    const handleSubmitData = () => {
+        // if(fileInvoices.length > 0)
+        // {
+            //submit data
+            axios
+            .post('claim-requests/'+id+'/approve')
+            .then((response) => {
+                enqueueSnackbar('Success Submit Claim Request', { variant: 'success' });
+                setOpenDialogSubmit(false);
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+            //Upload file invoices
+            const formData = makeFormData({
+                date:date,
+                invoice_files: fileInvoices,
+            });
+            axios
+            .post('claim-requests/'+id+'/invoice-files', formData)
+            .then((response) => {
+                enqueueSnackbar(response.data.message ?? 'Success upload invoice', { variant: 'success' });
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
+            });
+        // }
+        // else
+        // {
+        //     enqueueSnackbar('Please upload file invoice, before submit', { variant: 'warning' });
+        // }
+
+        setTimeout(() =>
+        {
+            window.location.reload();
+        }, 5000);
+
+    };
+
+    const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
+
+    return (
+        <Page title='Detail'>
+        <Container maxWidth={themeStretch ? false : 'xl'}>
+            <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
+            <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
+            <Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
+            {data ? (
+            <Stack direction="row" spacing={2} ml="auto">
+                <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
+                <Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
+            </Stack>
+            ) : ''}
+            </Stack>
+            {data ? (
+            <Grid container spacing={2}>
+                <Grid item xs={12} md={12}>
+                    <DetailStepper data={data}/>
+                </Grid>
+                <Grid item xs={12} md={12}>
+                    <Stack direction="row" alignItems="center">
+                        <Typography variant="subtitle1">Format Claim</Typography>
+                        <Button variant="outlined" color="primary" startIcon={< DownloadIcon/>} sx={{marginLeft: 'auto'}}>
+                            <Typography variant="button" display="block">Import</Typography>
+                        </Button>
+                    </Stack>
+                </Grid>
+                {check_invoice ? (
+                    <Grid item xs={12} md={12}>
+                        <Stack direction="row" alignItems="center">
+                            <Typography variant="subtitle1">Request Claim</Typography>
+                            <Button variant="outlined" color="primary" startIcon={ isInvoiceVisible ? < RemoveIcon/> : < AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleInvoice()}>
+                                <Typography variant="button" display="block">Invoice</Typography>
+                            </Button>
+                        </Stack>
+                    </Grid>
+                ) : ''}
+                <Grid item xs={12} md={12} sx={{display : isInvoiceVisible ? '' : 'none',}}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="column" spacing={2}>
+                            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                                <DatePicker
+                                    label="Invoice Date"
+                                    value={dateInvoice}
+                                    onChange={(newValue) => {
+                                        setDateInvoice(newValue);
+                                    }}
+                                    inputFormat="dd MMM yyyy"
+                                    renderInput={(params) => <TextField sx={{width:'40%'}} {...params} defaultValue={formattedCurrentDate} required/>}
+                                />
+                            </LocalizationProvider>
+                            <Stack
+                                divider={<Divider orientation="horizontal" flexItem />}
+                                spacing={1}
+                                sx={{ marginY: 2 }}
+                            >
+                                {fileInvoices &&
+                                fileInvoices.map((file, index) => (
+                                    <Stack direction="row" justifyContent={'space-between'} key={index}>
+                                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                            <InsertDriveFileIcon />
+                                            <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
+                                        </Stack>
+                                        <Iconify
+                                            icon="eva:trash-2-outline"
+                                            color={'darkred'}
+                                            onClick={() => {
+                                            removeInvoiceFiles(fileInvoices, index);
+                                            }}
+                                            sx={{cursor: 'pointer'}}
+                                        ></Iconify>
+                                    </Stack>
+                                ))}
+                            </Stack>
+                            <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                                    bgcolor: '#919EAB52',
+                                    borderRadius: '8px',
+                                    width: '100%', height: '60px'}} onClick={() => fileInvoiceInput.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 Invoice
+                                </Typography>
+                                </Box>
+                                <input
+                                type="file"
+                                id="file"
+                                ref={fileInvoiceInput}
+                                style={{ display: 'none' }}
+                                multiple
+                                onChange={handleInvoiceInputChange}
+                                accept="application/pdf"
+                                />
+                            </ButtonBase>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} md={12}>
+                    <DetailTimeline data={data}/>
+                </Grid>
+                <Grid item xs={12} md={12}>
+                    <Stack direction="row" padding={4}>
+                        {dataDialog && dataDialog.status === 'requested' ? (
+                            <>
+                            <Button variant="outlined" sx={{color: '#212B36', marginLeft: 'auto', borderColor: '#919EAB52'}} >Cancel</Button>
+                            <Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
+                            </>
+                        ) : ''}
+                        {/* Dialog Submits */}
+                        <Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} 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">Confirmation</Typography>
+                                </Stack>
+                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
+                                    <CloseIcon />
+                                </IconButton>
+                            </Stack>
+                            </DialogTitle>
+                            <DialogContent>
+                                {dataDialog ? (
+                                <Stack spacing={2} padding={2}>
+                                    <Typography variant='body1'>Are you sure to submit this claim ?</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%'}}>{dataDialog.code}</Typography>
+                                        </Stack>
+                                        <Stack direction='row' spacing={2}>
+                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
+                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.name}</Typography>
+                                        </Stack>
+                                        <Stack direction='row' spacing={2}>
+                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Date Submission</Typography>
+                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{fDateTimesecond(dataDialog.submission_date)}</Typography>
+                                        </Stack>
+                                        <Stack direction='row' spacing={2}>
+                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Claim Method</Typography>
+                                            <Typography variant='subtitle2' sx={{width: '70%'}}>Service Type</Typography>
+                                        </Stack>
+                                        <Stack direction='row' spacing={2}>
+                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Service Type</Typography>
+                                            <Typography variant='subtitle2' sx={{width: '70%'}}>
+                                                {dataDialog.service_code === 'IP' ? 'Inpatient' : 'Outpatient'}
+                                            </Typography>
+                                        </Stack>
+                                    </Card>
+                                </Stack>
+                                ) : ''}
+                            </DialogContent>
+                            <DialogActions>
+                            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
+                            <Button sx={{backgroundColor: '#19BBBB'}} onClick={handleSubmitData} variant="contained">Submit</Button>
+                            </DialogActions>
+                        </Dialog>
+                    </Stack>
+                </Grid>
+            </Grid>
+            ) : ''}
+        </Container>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/DetailStepper.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import { useEffect, useState } from 'react';
+import ClearIcon from '@mui/icons-material/Clear';
+
+const steps = [
+    'Request',
+    'Review',
+    'Approval',
+    'Decline',
+    ];
+
+    export default function HorizontalLinearAlternativeLabelStepper({data}) {
+    const [active, setActive] = useState(0);
+    const [status, SetStatus] = useState(null);
+    let updatedSteps = [...steps];
+    useEffect(() => {
+        if (data && data.data) {
+        if (data.data.status.status === 'requested') {
+            setActive(1);
+            updatedSteps = updatedSteps.filter(step => step !== 'Decline');
+        }
+        else if (data.data.status.status === 'reviewed') {
+            setActive(2);
+            updatedSteps = updatedSteps.filter(step => step !== 'Decline');
+        }
+        else if (data.data.status.status === 'approved')
+        {
+            setActive(3);
+            updatedSteps = updatedSteps.filter(step => step !== 'Decline');
+        }
+        else if(data.data.status.status === 'declined')
+        {
+            setActive(4)
+            updatedSteps = updatedSteps.filter(step => step !== 'Approval');
+        }
+        }
+        SetStatus(updatedSteps);
+    }, [data]);
+
+    
+
+    
+    return (
+        <Box sx={{ width: '100%', marginBottom: 2 }}>
+        <Stepper activeStep={active} alternativeLabel>
+            {status?.map((label) => (
+            <Step key={label}>
+                <StepLabel icon={label==='Decline' ? <ClearIcon sx={{ color: 'white', backgroundColor: 'red', borderRadius: '50%' }} /> : ''}>{label}</StepLabel>
+            </Step>
+            ))}
+        </Stepper>
+        </Box>
+    );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/DetailTimeline.tsx

@@ -0,0 +1,426 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import {Typography, Card, Stack, ButtonBase, Box, Divider} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import Iconify from '../../components/Iconify';
+import { useEffect, useState, useRef } from 'react';
+import { format } from 'date-fns';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import DescriptionIcon from '@mui/icons-material/Description';
+import { LoadingButton } from '@mui/lab';
+import axios from '../../utils/axios';
+import { makeFormData } from '@/utils/jsonToFormData';
+import { enqueueSnackbar } from 'notistack';
+import { useParams} from 'react-router-dom';
+
+const Item1 = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  backgroundColor: '#919EAB29',
+  color: '#637381',
+  width: 'fit-content',
+  marginRight: 'auto',
+}));
+
+const Item2 = styled(Paper)(({ theme }) => ({
+  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  width: 'fit-content',
+  marginLeft: 'auto',
+}));
+
+export default function NoOppositeContent({data}) {
+  const [timeline, setTimeline] = useState(null);
+  const [requestFile, setRequestFile] = useState(null);
+  const [document, setDocument] = useState(null);
+  useEffect(() => {
+    if (data && data.data) {
+      setTimeline(data.data.timeline);
+      setRequestFile(data.data.request_files);
+      setDocument(data.data.documents);
+    }
+
+  }, [data]);
+
+  // Diagnosis
+  const fileRequestDocumentInputDiagnosis = useRef<HTMLInputElement>(null);
+  const [fileDiagnosis, setFileDiagnosis] = useState([]);
+  const handleRequestDocumentInputChangeDiagnosis = (event) => {
+    if (event.target.files[0]) {
+      setFileDiagnosis([...fileDiagnosis, ...event.target.files]);
+    }
+  };
+  const removeFileDiagnois = (filesState, index) => {
+    setFileDiagnosis(
+      filesState.filter((file, fileIndex) => {
+          return fileIndex != index;
+      })
+    );
+  };
+  // Kondisi
+  const fileRequestDocumentInputKondisi = useRef<HTMLInputElement>(null);
+  const [fileKondisi, setFileKondisi] = useState([]);
+  const handleRequestDocumentInputChangeKondisi = (event) => {
+    if (event.target.files[0]) {
+      setFileKondisi([...fileKondisi, ...event.target.files]);
+    }
+  };
+  const removeFileKondisi = (filesState, index) => {
+    setFileKondisi(
+      filesState.filter((file, fileIndex) => {
+          return fileIndex != index;
+      })
+    );
+  };
+  // Result
+  const fileRequestDocumentInputResult = useRef<HTMLInputElement>(null);
+  const [fileResult, setFileResult] = useState([]);
+  const handleRequestDocumentInputChangeResult = (event) => {
+    if (event.target.files[0]) {
+      setFileResult([...fileResult, ...event.target.files]);
+    }
+  };
+  const removeFileResult = (filesState, index) => {
+    setFileResult(
+      filesState.filter((file, fileIndex) => {
+          return fileIndex != index;
+      })
+    );
+  };
+  const { id } = useParams();
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const submitRequestFiles = () => {
+    setSubmitLoading(true);
+    const formData = makeFormData({
+        fileDiagnosis: fileDiagnosis,
+        fileKondisis: fileKondisi,
+        fileResults: fileResult
+    });
+    axios
+    .post('claim-requests/'+id+'/request-files', formData)
+    .then((response) => {
+        window.location.reload();
+    })
+    .catch(({ response }) => {
+        enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
+    });
+  }
+  const submitButton = requestFile?.find((dataRequestFile) => dataRequestFile.check_files === null);
+  return (
+    <>
+      {timeline?.map((dataTimeline, index) => (
+      <Timeline
+        sx={{
+          [`& .${timelineItemClasses.root}:before`]: {
+            flex: 0,
+            padding: 0,
+          },
+        }}
+        key={index}
+      >
+        <Typography variant="body2" gutterBottom fontWeight="bold">{dataTimeline.date ? format(new Date(dataTimeline.date), "d MMM yyyy") : ''}</Typography>
+        <TimelineItem>
+          <TimelineSeparator>
+            <TimelineDot />
+            <TimelineConnector />
+          </TimelineSeparator>
+          <TimelineContent spacing={3}>
+          	<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
+          		<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
+            		<Stack direction="row" sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
+        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : mm") : ''}</Item1>
+        				  <Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
+        				</Stack>
+        				<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>
+        					<Typography variant="body2" gutterBottom>Detail:</Typography>
+        					<Typography variant="body2" gutterBottom>{dataTimeline.description}</Typography>
+        				</Stack>
+                {dataTimeline.status === 'reviewed' && requestFile ? (
+                  <>
+                    {submitButton ? (
+                      <Typography variant="body2" gutterBottom>Request Document</Typography>
+                    ) : (
+                      <Typography sx={{color: '#19BBBB'}} variant="body2" gutterBottom>Request Document Success Uploaded</Typography>
+                    )}
+                    {/* Diagnosis */}
+                    {requestFile?.map((dataRequestFile, index) => {
+                      if(dataRequestFile.type !== 'claim-diagnosis' || dataRequestFile.check_files !== null){
+                        return null;
+                      }
+                      return (
+                        <Stack spacing={2} sx={{marginBottom: 2}} key={index}>
+                          <Typography variant="body2" gutterBottom fontWeight="bold">
+                            Diagnosis
+                          </Typography>
+                          <Stack
+                              divider={<Divider orientation="horizontal" flexItem />}
+                              spacing={1}
+                              sx={{ marginY: 2 }}
+                          >
+                            {fileDiagnosis &&
+                            fileDiagnosis.map((file, index) => (
+                                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                        <InsertDriveFileIcon />
+                                        <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
+                                    </Stack>
+                                    <Iconify
+                                        icon="eva:trash-2-outline"
+                                        color={'darkred'}
+                                        onClick={() => {
+                                          removeFileDiagnois(fileDiagnosis, index);
+                                        }}
+                                        sx={{cursor: 'pointer'}}
+                                    ></Iconify>
+                                </Stack>
+                            ))}
+                          </Stack>
+                          <ButtonBase
+                            sx={{
+                              p: 4,
+                              border: '2px dashed #F9FAFB',
+                              bgcolor: '#919EAB52',
+                              borderRadius: '8px',
+                              width: '100%',
+                              height: '60px',
+                            }}
+                            onClick={() => fileRequestDocumentInputDiagnosis.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">
+                                Add Result
+                              </Typography>
+                            </Box>
+                            <input
+                              type="file"
+                              id={`file-${index}`}
+                              ref={fileRequestDocumentInputDiagnosis}
+                              style={{ display: 'none' }}
+                              multiple
+                              onChange={(event) => handleRequestDocumentInputChangeDiagnosis(event)}
+                              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+                            />
+                          </ButtonBase>
+                        </Stack>
+                      );
+                    })}
+                    {/* Kondisi */}
+                    {requestFile?.map((dataRequestFile, index) => {
+                      if(dataRequestFile.type !== 'claim-kondisi' || dataRequestFile.check_files !== null){
+                        return null;
+                      }
+                      return (
+                        <Stack spacing={2} sx={{marginBottom: 2}} key={index}>
+                          <Typography variant="body2" gutterBottom fontWeight="bold">
+                            Condition
+                          </Typography>
+                          <Stack
+                              divider={<Divider orientation="horizontal" flexItem />}
+                              spacing={1}
+                              sx={{ marginY: 2 }}
+                          >
+                            {fileKondisi &&
+                            fileKondisi.map((file, index) => (
+                                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                        <InsertDriveFileIcon />
+                                        <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
+                                    </Stack>
+                                    <Iconify
+                                        icon="eva:trash-2-outline"
+                                        color={'darkred'}
+                                        onClick={() => {
+                                          removeFileKondisi(fileKondisi, index);
+                                        }}
+                                        sx={{cursor: 'pointer'}}
+                                    ></Iconify>
+                                </Stack>
+                            ))}
+                          </Stack>
+                          <ButtonBase
+                            sx={{
+                              p: 4,
+                              border: '2px dashed #F9FAFB',
+                              bgcolor: '#919EAB52',
+                              borderRadius: '8px',
+                              width: '100%',
+                              height: '60px',
+                            }}
+                            onClick={() => fileRequestDocumentInputKondisi.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">
+                                Add Result
+                              </Typography>
+                            </Box>
+                            <input
+                              type="file"
+                              id={`file-${index}`}
+                              ref={fileRequestDocumentInputKondisi}
+                              style={{ display: 'none' }}
+                              multiple
+                              onChange={(event) => handleRequestDocumentInputChangeKondisi(event)}
+                              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+                            />
+                          </ButtonBase>
+                        </Stack>
+                      );
+                    })}
+                    {/* Supporting Result */}
+                    {requestFile?.map((dataRequestFile, index) => {
+                      if(dataRequestFile.type !== 'claim-result' || dataRequestFile.check_files !== null){
+                        return null;
+                      }
+                      return (
+                        <Stack spacing={2} sx={{marginBottom: 2}} key={index}>
+                          <Typography variant="body2" gutterBottom fontWeight="bold">
+                            Supporting Result
+                          </Typography>
+                          <Stack
+                              divider={<Divider orientation="horizontal" flexItem />}
+                              spacing={1}
+                              sx={{ marginY: 2 }}
+                          >
+                            {fileResult &&
+                            fileResult.map((file, index) => (
+                                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                        <InsertDriveFileIcon />
+                                        <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
+                                    </Stack>
+                                    <Iconify
+                                        icon="eva:trash-2-outline"
+                                        color={'darkred'}
+                                        onClick={() => {
+                                          removeFileResult(fileResult, index);
+                                        }}
+                                        sx={{cursor: 'pointer'}}
+                                    ></Iconify>
+                                </Stack>
+                            ))}
+                          </Stack>
+                          <ButtonBase
+                            sx={{
+                              p: 4,
+                              border: '2px dashed #F9FAFB',
+                              bgcolor: '#919EAB52',
+                              borderRadius: '8px',
+                              width: '100%',
+                              height: '60px',
+                            }}
+                            onClick={() => fileRequestDocumentInputResult.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">
+                                Add Result
+                              </Typography>
+                            </Box>
+                            <input
+                              type="file"
+                              id={`file-${index}`}
+                              ref={fileRequestDocumentInputResult}
+                              style={{ display: 'none' }}
+                              multiple
+                              onChange={(event) => handleRequestDocumentInputChangeResult(event)}
+                              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+                            />
+                          </ButtonBase>
+                        </Stack>
+                      );
+                    })}
+                    {submitButton ? (
+                      <LoadingButton
+                        variant="contained"
+                        sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
+                        onClick={() => {
+                          submitRequestFiles();
+                        }}
+                        loading={submitLoading}
+                      >
+                        Submit
+                      </LoadingButton>
+                    ) : ''}
+                  </>
+                ) : ''}
+    			   </Stack>
+          	</Card>
+            {dataTimeline.status === 'requested' ? (
+              <Card sx={{marginTop: 2 }}>
+                <Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
+                  <Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }} alignItems="center">
+                    <DescriptionIcon />
+                    <Typography variant="Subtitle2" sx={{fontWeight: 'bold'}}>Documents</Typography>
+                  </Stack>
+                  <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                    {document?.map((dataDocument, index) => (
+                      <Stack direction="column" spacing={2} key={index}>
+                        <Typography variant="Subtitle2" gutterBottom>
+                          {dataDocument.type === 'claim-diagnosis' ? 
+                            'Diagnosis'
+                          : dataDocument.type === 'claim-kondisi' ? 
+                            'Condition'
+                          : dataDocument.type === 'claim-result' ?
+                            'Supporting Result'
+                          : dataDocument.type === 'claim-invoice' ?
+                            'Invoice'
+                          : ''}
+                        </Typography>
+                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                          <InsertDriveFileIcon />
+                          <a
+                            href={dataDocument.path}
+                            style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
+                            target="_blank"
+                          >
+                            <Typography variant="body2" gutterBottom>{dataDocument.original_name ? dataDocument.original_name : '-'}</Typography>
+                          </a>
+                        </Stack>
+                      </Stack>
+                    ))}
+                  </Stack>
+                </Stack>
+              </Card>
+            ) : ''}
+          </TimelineContent>
+        </TimelineItem>
+      </Timeline>
+      ))}
+    </>
+  );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Index.tsx

@@ -0,0 +1,30 @@
+import { Card, Stack } from "@mui/material";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import List from "./List";
+
+
+
+export default function Claims() {
+
+  const pageTitle = 'Claim Request';
+  return (
+    <Page title={ pageTitle } sx={{ mx: 2}}>
+
+      <HeaderBreadcrumbs
+        heading={ pageTitle }
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Claim Request',
+            href: '/claim-requests',
+          },
+        ]}
+      />
+      
+      {/* <Stack> */}
+      <List />
+      {/* </Stack> */}
+    </Page>
+  );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/List.tsx

@@ -0,0 +1,582 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  MenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Link,
+  Chip,
+  TableHead,
+  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 FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+// hooks
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+import useSettings from '@/hooks/useSettings';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../../@types/paginated-data';
+import DataTable from '../../../components/LaravelTable';
+import { fCurrency } from '../../../utils/formatNumber';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import { LoadingButton } from '@mui/lab';
+import { enqueueSnackbar } from 'notistack';
+import { Divider } from '@mui/material';
+import Iconify from '@/components/Iconify';
+import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
+import { fDateTimesecond } from '@/utils/formatTime';
+import { capitalizeFirstLetter } from '@/utils/formatString';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { Import } from '@/@types/claims';
+
+import { FinalLogType } from './Model/Types';
+// import LoadingButton from '@/theme/overrides/LoadingButton';
+
+export default function List() {
+  const { themeColorPresets } = useSettings();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState<Import>(null);
+
+  const navigate = useNavigate()
+
+  function SearchInput(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch({ search: searchText }); // Trigger to Parent
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+          placeholder='Search Code or Name...'
+        />
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+     const [importLoading, setImportLoading] = useState(false);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected');
+      }
+    };
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = '';
+      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name);
+      } else {
+        setCurrentImportFileName(null);
+      }
+    };
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append('file', importForm.current?.files[0]);
+
+        setImportLoading(true);
+        axios
+          .post(`claim-requests/import`, formData)
+          .then((response) => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data);
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+            setImportLoading(false);
+          })
+          .catch((response) => {
+            enqueueSnackbar(
+              'Looks like something went wrong. Please check your data and try again. ' +
+                response.message,
+              { variant: 'error' }
+            );
+            setImportLoading(false);
+          });
+      } else {
+        enqueueSnackbar('No File Selected', { variant: 'warning' });
+      }
+    };
+
+    const handleGetTemplate = (type :string) => {
+      axios.get('corporates/import-document-example/' + type)
+        .then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+        })
+    }
+
+    const handleGetData = (type :string) => {
+      axios.get(`corporates/${corporate_id}/data-plan-benefit`)
+        .then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+        })
+    }
+
+    return (
+      <div>
+         <input
+          type="file"
+          id="file"
+          ref={importForm}
+          style={{ display: 'none' }}
+          onChange={handleImportChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        {!currentImportFileName && (
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <SearchInput onSearch={applyFilter} />
+            <Button
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              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('claim-request')}}>Download Template</MenuItem>
+                <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
+              </Menu>
+            {/* <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              sx={{ p: 1.8 }}
+              onClick={() => {
+                navigate('/claim-requests/create');
+              }}
+            >
+              Create
+            </Button> */}
+          </Stack>
+        )}
+
+        {currentImportFileName && (
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
+              <Button onClick={handleImportButton} fullWidth>
+                {currentImportFileName ?? 'No File Selected'}
+              </Button>
+              <Button
+                onClick={handleCancelImportButton}
+                size="small"
+                fullWidth={false}
+                sx={{ p: 1.8 }}
+              >
+                <CancelIcon color="error" />
+              </Button>
+            </ButtonGroup>
+
+            <LoadingButton
+              id="upload-button"
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              onClick={handleUpload}
+              loading={importLoading}
+            >
+              Upload
+            </LoadingButton>
+          </Stack>
+        )}
+         {importResult && (
+          <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+            <Box sx={{ color: 'text.secondary' }}>
+              Last Import Result Report :{' '}
+              <a href={importResult.result_file?.url ?? '#'}>
+                {importResult.result_file?.name ?? '-'}
+              </a>
+            </Box>
+          </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+    LaravelPaginatedDataDefault
+  );
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/customer-service/request?final_log=1&service_code=IP', { params: filter });
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  };
+
+  const applyFilter = async (searchFilter: { search: string }) => {
+    await loadDataTableData(searchFilter);
+    setSearchParams(searchFilter);
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number): void => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  const handleApprove = (claimRequest) => {
+    axios
+      .post(`claim-requests/${claimRequest.id}/approve`)
+      .then((response) => {
+        enqueueSnackbar('Success Approve', { variant: 'success' });
+        loadDataTableData();
+      })
+      .catch(({ response }) => {
+        enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+      });
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  // Called on every row to map the data to the columns
+  function createData(data: FinalLogType) {
+    return {
+      ...data,
+    };
+  }
+
+  {
+    /* ------------------ TABLE ROW ------------------ */
+  }
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+    const [loadingApprove, setLoadingApprove] = React.useState(false);
+
+    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">
+            <Typography
+              // onClick={() => {
+              //   handleShowClaim(row);
+              // }}
+            >
+              {row.id}
+            </Typography>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.member?.full_name}</TableCell>
+          <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
+          <TableCell align="left">{row.service_name}</TableCell>
+          <TableCell align="left">{row.payment_type_name}</TableCell>
+          <TableCell align="left">
+          { row.status_final_log == "requested" ?
+              (<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status_final_log)}</Label>) :
+              row.status_final_log == "declined" ? 
+              (<Label color='error'> {capitalizeFirstLetter(row.status_final_log)}</Label>)
+              :
+              (<Label color='success'> {capitalizeFirstLetter(row.status_final_log)}</Label>)
+            }
+          </TableCell>
+          <TableCell align="right">
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
+                  <EditOutlinedIcon />
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
+                  <FindInPageOutlinedIcon />
+                  Detail
+                </MenuItem>
+              </>
+            } />
+          </TableCell>
+          {/* <TableCell>
+
+          <IconButton
+                          onClick={() => {
+                            handleShowClaim(row);
+                          }}
+                        >
+                          <Iconify icon="eva:eye-fill" />
+                        </IconButton>
+          </TableCell> */}
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Stack
+                  divider={<Divider orientation="horizontal" flexItem />}
+                  spacing={1}
+                  sx={{ marginY: 2 }}
+                >
+                  <Box>
+                    <Typography fontWeight={600}>Berkas Hasil Penunjang</Typography>
+                    {/* {row.files_by_type?.claim_kondisi &&
+                      row.files_by_type?.claim_kondisi.map((file, index) => (
+                        <Stack direction="row" key={index}>
+                          <Typography sx={{ marginRight: 2 }}>-</Typography>{' '}
+                          <a href={file.url} target="_blank">
+                            {file.name}
+                          </a>
+                        </Stack>
+                      ))} */}
+
+                    {row.files_by_type?.claim_kondisi && (
+                      <>
+                        <Typography fontWeight={600} sx={{ marginRight: 4 }}> - Kondisi</Typography>
+                        {row.files_by_type?.claim_kondisi.map((file, index) => (
+
+                          <Stack direction="row" key={index}>
+                            <a href={file.url} target="_blank">
+                              {file.name}
+                            </a>
+                          </Stack>
+                        ))}
+                      </>
+                    )}
+
+                    {row.files_by_type?.claim_diagnosis && (
+                      <>
+                        <Typography fontWeight={600} sx={{ marginRight: 4 }}> - Diagnosa</Typography>
+                        {row.files_by_type?.claim_diagnosis.map((file, index) => (
+
+                          <Stack direction="row" key={index}>
+                            <a href={file.url} target="_blank">
+                              {file.name}
+                            </a>
+                          </Stack>
+                        ))}
+                      </>
+                    )}
+
+                    {row.files_by_type?.claim_result && (
+                      <>
+                        <Typography fontWeight={600} sx={{ marginRight: 4 }}> - Hasil</Typography>
+                        {row.files_by_type?.claim_result.map((file, index) => (
+
+                          <Stack direction="row" key={index}>
+                            <a href={file.url} target="_blank">
+                              {file.name}
+                            </a>
+                          </Stack>
+                        ))}
+                      </>
+                    )}
+                    {(!row.files_by_type?.claim_result && !row.files_by_type?.claim_diagnosis && !row.files_by_type?.claim_kondisi)&& <Typography>Tidak ada berkas</Typography>}
+                  </Box>
+                </Stack>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+  {
+    /* ------------------ END TABLE ROW ------------------ */
+  }
+
+  function TableContent() {
+    return (
+      <Table aria-label="collapsible table">
+        {/* ------------------ TABLE HEADER ------------------ */}
+        <TableHead>
+          <TableRow>
+            {/* <TableCell style={headStyle} align="left" /> */}
+            <TableCell style={headStyle} align="left">
+              ID Request LOG
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Code
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Name
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Date of Submission
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Service Type
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Claim Method
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Status
+            </TableCell>
+            <TableCell style={headStyle} align="right"></TableCell>
+          </TableRow>
+        </TableHead>
+        {/* ------------------ END TABLE HEADER ------------------ */}
+
+        {/* ------------------ TABLE ROW ------------------ */}
+        {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.id} row={row} />
+            ))}
+          </TableBody>
+        )}
+        {/* ------------------ END TABLE ROW ------------------ */}
+      </Table>
+    );
+  }
+
+  // ---------------------------------------------------------
+  // Dialog Detail Claim Request
+  const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
+  const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
+  const [currentClaim, setCurrentClaim] = useState(null);
+
+  function handleShowClaim(claimRequest) {
+    setLoadingClaimDetail(true);
+    setOpenDialogDetailClaim(true);
+
+    axios
+      .get(`/claim-requests/${claimRequest.id}`)
+      .then(({ data }) => {
+        setCurrentClaim(data.data);
+        setLoadingClaimDetail(false);
+      })
+      .catch((err) => {
+        enqueueSnackbar(err.message, { variant: 'error' });
+      });
+  }
+
+  function handleDownloadLog() {}
+
+  return (
+    <Grid container>
+      <Grid item sm={12}>
+        <ImportForm />
+      </Grid>
+
+      <Grid item sm={12}>
+        <DataTable
+          isLoading={dataTableIsLoading}
+          lastRequest={0}
+          data={dataTableData}
+          handlePageChange={handlePageChange}
+          TableContent={<TableContent />}
+        />
+      </Grid>
+      <Grid item sm={12}>
+        <DialogDetailClaim
+          openDialog={openDialogDetailClaim}
+          setOpenDialog={setOpenDialogDetailClaim}
+          title={{ name: 'Claim Request Detail' }}
+          data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
+        ></DialogDetailClaim>
+      </Grid>
+    </Grid>
+  );
+}

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Model/Functions.tsx

@@ -0,0 +1,79 @@
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import { MemberListType } from './Types';
+import { makeFormData } from '@/utils/jsonToFormData';
+
+/**
+ * Listing Member
+ */
+export const getMemberList = async ( page: number, keyword: string ): Promise<MemberListType[]> => {
+    const response = await axios.get(`/claim-requests/list-member?page=${page}&keyword=${keyword}`)
+        .then((res) =>{
+            return res.data.data.member_list;
+        })
+        .catch((res) => {
+            enqueueSnackbar("server error !", {
+                variant: 'error',
+            });
+
+            return [];
+        });
+
+    return response;
+};
+
+/**
+ * Add Claim Request
+ */
+export const addClaimRequest = async ( data: MemberListType[] ): Promise<boolean> => {
+    // Mapping
+    const formData = new FormData();
+
+    data.map((row, index) => {
+        formData.append(`member_id[${index}]`, row.id.toString());
+        formData.append(`service_code[${index}]`, row.patien_type??'');
+
+        if (row.file_kondisi != undefined) {
+            row.file_kondisi.forEach((file, file_index) => {
+                console.log(file);
+
+                formData.append(`file_kondisi[member_${row.id}][${file_index}]`, file);
+            });
+        }
+
+        if (row.file_diagnosa != undefined) {
+            row.file_diagnosa.forEach((file, file_index) => {
+                console.log(file);
+
+                formData.append(`file_diagnosa[member_${row.id}][${file_index}]`, file);
+            });
+        }
+
+        if (row.file_penunjang != undefined) {
+            row.file_penunjang.forEach((file, file_index) => {
+                console.log(file);
+
+                formData.append(`file_penunjang[member_${row.id}][${file_index}]`, file);
+            });
+        }
+    })
+
+    // Axios
+    const response = await axios.post(`/claim-requests`, formData)
+        .then((res) =>{
+            enqueueSnackbar("Berhasil membuat data !", {
+                variant: 'success',
+            });
+
+            return true;
+        })
+        .catch((res) => {
+            enqueueSnackbar("server error !", {
+                variant: 'error',
+            });
+
+            return false;
+        });
+
+    return response;
+};

frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/Model/Types.tsx

@@ -0,0 +1,36 @@
+import { Member } from "@/@types/member"
+
+/**
+ * Search Type
+ */
+export type SearchType = {
+    keyword: string,
+}
+
+/**
+ * Member List
+ */
+export type FinalLogType = {
+    id                  : number,
+    code                : string,
+    member              : Member,
+    submission_date     : string,
+    service_name        : string,
+    payment_type_name   : string,
+    status_final_log    : string,
+    status              : string,
+    files_by_type   : files_by_type,
+}
+
+export type files_by_type = {
+    claim_diagnosis : file[],
+    claim_kondisi : file[],
+    claim_result : file[],
+}
+
+export type file = {
+    name: string,
+    url: string[],
+}
+
+

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

@@ -687,7 +687,7 @@ export default function List(props: any) {
                                         </Grid>
                                         <Grid item xs={3}>
                                             <Typography variant="body1" component="div" color={'GrayText'}>
-                                                Play :
+                                                Plan :
                                             </Typography>
                                         </Grid>
                                         <Grid item xs={9} sx={{display: 'flex', gap: 1}}>

frontend/dashboard/src/pages/CustomerService/Components/CardDetail.tsx

@@ -0,0 +1,57 @@
+import { Card, Typography } from "@mui/material";
+import { Stack } from '@mui/material';
+import { DetailFinalLogType } from "../FinalLog/Model/Types";
+import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+
+
+type CardDetail = {
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+const style1 = {
+    color: '#919EAB',
+    width: '30%'
+}
+const style2 = {
+    width: '70%'
+}
+const marginBottom1 = {
+    marginBottom: 1,
+}
+const marginBottom2 = {
+    marginBottom: 2,
+}
+
+
+export default function CardDetail({requestLog} : CardDetail ) {
+    return (
+        <Card sx={{padding:2}}  >
+            <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.date_of_birth) : '-'}</Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.marital_status}</Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
+            </Stack>
+        </Card>
+    )
+   
+}

frontend/dashboard/src/pages/CustomerService/Components/CardExclusion.tsx

@@ -0,0 +1,117 @@
+import { Accordion, AccordionDetails, AccordionSummary, Card, Typography } from "@mui/material";
+import { Stack } from '@mui/material';
+import { DetailFinalLogType } from "../FinalLog/Model/Types";
+import { toTitleCase } from "@/utils/formatTime";
+import Label from '@/components/Label';
+import { ExpandMore } from "@mui/icons-material";
+
+
+
+type CardDetail = {
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+const style1 = {
+    color: '#919EAB',
+    width: '30%'
+}
+const style2 = {
+    width: '70%'
+}
+const marginBottom2 = {
+    marginBottom: 2,
+}
+
+
+export default function CardExclusion({requestLog} : CardDetail ) {
+    return (
+        <Card sx={{padding:2}} >
+            <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Exclusion</Typography>
+                {requestLog?.exclusion?.length > 0 ? requestLog?.exclusion.map((r, index) => (
+                        <Accordion>
+                        <AccordionSummary
+                            expandIcon={<ExpandMore />}
+                            aria-controls='panelia-content'
+                            id='panel1a-header'
+                        >
+                            <Typography variant='subtitle1'>{r.exclusionable.code}</Typography>
+                            <Typography variant='subtitle1' sx={{marginLeft:3}}>{r.exclusionable.name}</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>MSC</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                                {r.rules.length > 0 && r?.rules?.map((text, i) => {
+                                    return text.name === 'msc' ?
+                                        text.values.split(',').map((text2, j) => {
+                                            let labelMSC: string = text2;
+                                            switch (labelMSC) {
+                                                case 'm':
+                                                    labelMSC = 'Member';
+                                                    break;
+                                                case 'c':
+                                                    labelMSC = 'Child';
+                                                    break;
+                                                case 's':
+                                                    labelMSC = 'Spouse';
+                                                    break;
+                                                default:
+                                                    labelMSC = 'Member';
+                                            }
+                                            return (
+                                                <Label key={j} sx={{marginLeft:1}}>{labelMSC}</Label>
+                                            );
+                                        })
+                                        : null;
+                                })}
+                            </Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Gender</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                                {r.rules.length > 0 && r?.rules?.map((text, i) => {
+                                    return text.name === 'gender' ?
+                                        text.values.split(',').map((text2, j) => {
+                                            let labelGender: string = toTitleCase(text2);
+                                            return (
+                                                <Label key={j} sx={{marginLeft:1}}>{labelGender}</Label>
+                                            );
+                                        })
+                                        : null;
+                                })}
+                            </Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Min Age</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                            {r.rules.length > 0 && r?.rules?.map((text, i) => {
+                                    return text.name === 'min_age' ?
+                                        <Typography variant='subtitle1'> {text.values} </Typography> : null
+                                })}
+                            </Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Max Age</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                            {r.rules.length > 0 && r?.rules?.map((text, i) => {
+                                    return text.name === 'max_age' ?
+                                        <Typography variant='subtitle1'> {text.values} </Typography> : null
+                                })}
+                            </Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Plan</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                            {r.rules.length > 0 && r?.rules?.map((text, i) => {
+                                    return text.name === 'plan' ?
+                                        <Typography variant='subtitle1'> {text.values} </Typography> : null
+                                })}
+                            </Typography>
+                        </Stack>
+                        </AccordionDetails>
+                    </Accordion>
+                )) : null}
+        </Card>
+    )
+   
+}

frontend/dashboard/src/pages/CustomerService/Components/CardService.tsx

@@ -0,0 +1,105 @@
+import { Card, Typography } from "@mui/material";
+import { Stack } from '@mui/material';
+import { DetailFinalLogType } from "../FinalLog/Model/Types";
+import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import Label from '@/components/Label';
+
+
+
+type CardDetail = {
+    requestLog: DetailFinalLogType|undefined; 
+    isFinalLog: boolean
+}
+
+const style1 = {
+    color: '#919EAB',
+    width: '30%'
+}
+const style2 = {
+    width: '70%'
+}
+const marginBottom1 = {
+    marginBottom: 1,
+}
+const marginBottom2 = {
+    marginBottom: 2,
+}
+
+
+export default function CardService({requestLog, isFinalLog = true} : CardDetail ) {
+    return (
+        <Card sx={{padding:2}}  >
+            <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(requestLog?.claim_method ?? '-')}</Typography>
+            </Stack>
+            {/* <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>
+                    <ul>
+                        {requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
+                        <li key={index}>{r.code } - {r.description}</li>
+                        )) : <li>-</li>}
+                    </ul>
+                </Typography>
+            </Stack> */}
+            {/* General Practitioner */}
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>General Practitioner</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>External Doctor : 
+                    {requestLog?.config_service?.gp_external_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
+                    {requestLog?.config_service?.gp_external_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
+                </Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom2}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom></Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>Internal Doctor  :
+                    {requestLog?.config_service?.gp_internal_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
+                    {requestLog?.config_service?.gp_internal_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
+                </Typography>
+            </Stack>
+
+            {/* Specialist Practitioner */}
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Specialist Practitioner</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>External Doctor : 
+                    {requestLog?.config_service?.sp_external_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
+                    {requestLog?.config_service?.sp_external_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
+                </Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom2}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom></Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>Internal Doctor  :
+                    {requestLog?.config_service?.gp_internal_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
+                    {requestLog?.config_service?.gp_internal_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
+                </Typography>
+            </Stack>
+
+            {/* Medicine */}
+            <Stack direction='row' spacing={2} sx={marginBottom1}>
+            <Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Medicine</Typography>
+            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                <ul>
+                    {requestLog?.config_service?.vitamins == '1' ? (<li>Suplemen</li>) : (<li>-</li>)}
+                    {requestLog?.config_service?.delivery_fee == '1' ? (<li>Delivery Fee</li>) : (<li>-</li>)}
+                </ul>
+            </Typography>
+            </Stack>
+            <Stack direction='row' spacing={2} sx={marginBottom2}>
+                <Typography variant='subtitle2' sx={style1} gutterBottom>Admin Fee</Typography>
+                <Typography variant='subtitle2' sx={style2} gutterBottom>
+                    {requestLog?.config_service?.general_practitioner_fee == '1' ? (<Label sx={{marginLeft:2}}> General Practitioner</Label>) : '-'}
+                    {requestLog?.config_service?.specialist_practitioner_fee == '1' ? (<Label sx={{marginLeft:1}}> Specialist Practitioner</Label>) : '-'}
+                </Typography>
+            </Stack>
+
+
+        </Card>
+    )
+   
+}

frontend/dashboard/src/pages/CustomerService/Components/DetailBenefit.tsx

@@ -0,0 +1,115 @@
+import { Card, Grid, Typography } from "@mui/material";
+import { Stack } from '@mui/material';
+import { DetailFinalLogType } from "../FinalLog/Model/Types";
+import { useEffect, useState, useRef, useMemo } from 'react';
+import { Box } from "@mui/material";
+
+
+import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import Label from '@/components/Label';
+
+import AddIcon from '@mui/icons-material/Add';
+import { Button } from "@mui/material";
+
+
+
+type CardDetail = {
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+const style1 = {
+    color: '#919EAB',
+    width: '30%'
+}
+const style2 = {
+    width: '70%'
+}
+const marginBottom1 = {
+    marginBottom: 1,
+}
+const marginBottom2 = {
+    marginBottom: 2,
+}
+
+
+
+export default function DetailBenefit({requestLog} : CardDetail ) {
+    return (
+        {requestLog.benefitData?.map((item, index) => (
+            <Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>  
+                <Grid container spacing={2}>
+                    <Grid item xs={12}>
+                        <Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
+                            {item.description}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={2.5}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="subtitle1" component="div">
+                                        Amount Incurred*
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={2.5}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="subtitle1" component="div">
+                                        Amount Approved*
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={2.5}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="subtitle1" component="div">
+                                        Amount Not Approved*
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={2.5}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="subtitle1" component="div">
+                                        Excess Paid*
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={2}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="subtitle1" component="div">
+                                        Keterangan*
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                </Grid>
+            </Box>
+        ))}
+    )
+   
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogBenefit.tsx

@@ -0,0 +1,343 @@
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import MuiDialog from "@/components/MuiDialog";
+import { Checkbox, Typography, FormControl, Card, Grid, DialogActions } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { BenefitConfigurationListType } from "../Model/Types";
+import { InputLabel, Select, FormHelperText } from "@mui/material";
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Button from '@mui/material/Button';
+import { fNumber } from "@/utils/formatNumber";
+import palette from "@/theme/palette";
+import { Box } from "@mui/material";
+import { FormProvider, RHFTextField } from "@/components/hook-form";
+import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
+
+import { useFieldArray, useForm } from 'react-hook-form';
+import { LoadingButton } from '@mui/lab';
+import { postAddBenefit } from '../Model/Functions';
+import { useNavigate } from 'react-router';
+import { description } from '@/_mock/text';
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+type BenefitSelected = {
+    id: number,
+    description: string,
+    benefit_id: number,
+}
+
+
+
+export default function DialogBenefit({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
+
+    // Add Benefit 
+    const [addBenefit, setAddBenefit] = useState(false)
+    const navigate  = useNavigate()
+   //Benefit Name
+    const [valBenefitNames, setValBenefitNames] = useState([]);
+    const [valBenefitNameError, setValBenefitNameError] = useState('');
+    const benefitNameData  = requestLog?.benefit;
+    const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
+
+    const handleConditionChangeService = (event) => {
+        const selectedItem = event.target.value;
+
+        if (valBenefitNames.includes(selectedItem)) {
+            // Item is already selected, remove it
+            setValBenefitNames(valBenefitNames.filter(item => item !== selectedItem));
+        } else {
+            // Item is not selected, add it
+            setValBenefitNames([...valBenefitNames, selectedItem]);
+        }
+    };
+
+    useEffect(() => {
+        const datax: any[] = []
+
+        valBenefitNames.map((data) => {
+            benefitNameData?.map((row) => {
+                if(row.id == data) {
+                    datax.push(row)
+                }
+            })
+        })
+
+        // for data information
+        let temp = datax.map((item, indx) => {
+            return {
+                benefit_id: item.id,
+                description: item.description,
+                request_log_id: requestLog?.id,
+                amount_incurred: 0,
+                amount_approved: 0,
+                amount_not_approved: 0,
+                excess_paid: 0,
+                keterangan: '',
+            }
+        })
+    
+        reset({benefit_data: temp})
+
+        setBenefitSelected(datax)
+        
+    }, [valBenefitNames])
+
+    const handleCloseDialogBenefit = () => {
+        // setOpenDialog(false);
+        setAddBenefit(false)
+        setBenefitSelected([])
+        setValBenefitNames([])
+    }
+
+    const handleAddDialogBenefit = () => {
+        setAddBenefit(true)
+    }
+
+    const defaultValues: BenefitConfigurationListType = {
+        request_log_id: requestLog?.id,
+        benefit_name: '',
+        amount_incurred: 0,
+        amount_approved: 0,
+        amount_not_approved: 0,
+        excess_paid: 0,
+    };
+
+    const validationSchema = Yup.object().shape({
+        benefit_data: Yup.array().of(
+            Yup.object().shape({
+                amount_incurred     : Yup.number().typeError('').required(''),
+                amount_approved     : Yup.number().typeError('').required(''),
+                amount_not_approved : Yup.number().typeError('').required(''),
+                excess_paid         : Yup.number().typeError('').required(''),
+            })
+        )
+    })
+
+    const methods = useForm<any>({
+        resolver: yupResolver(validationSchema),
+        defaultValues
+    });
+
+    const {fields, append, remove} = useFieldArray({name: 'benefit_data',control: methods.control})
+    
+    const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
+    // Submit Form
+    // =====================================
+    const submitHandler = async (data: BenefitConfigurationListType) => {
+    
+        const response = await postAddBenefit(data);
+
+        if (response == true) {
+            reset();
+            // navigate('custormer-service/final-log/detail/'+requestLog?.id);
+            window.location.reload()
+        }
+    }
+
+    const getContent = () => !addBenefit ? (
+        <Stack spacing={2} sx={{marginTop: 2, padding: 2}} direction="column">
+            <Stack direction="row" spacing={2}>
+                <Stack spacing={2} sx={{width:'100%'}}>
+                    <Typography variant='subtitle1'>Benefit Name*</Typography>
+                    <FormControl>
+                    <InputLabel htmlFor="benefit_name">
+                        Benefit Name
+                    </InputLabel>
+                    <Select
+                        id="benefit_name"
+                        value={valBenefitNames}
+                        fullWidth
+                        label="Benefit Name"
+                        error={!!valBenefitNameError}
+                        onChange={(e) => {
+                            setValBenefitNameError(!valBenefitNames ? 'At least one item must be selected' : '');
+                        }}
+                        renderValue={(selected) => selected.map(value => {
+                            const selectedOption = benefitNameData?.find(option => String(option.id) === value);
+                            return selectedOption ? selectedOption.description : '';
+                        }).join(', ')}
+                    >
+                        {benefitNameData?.map((item, index) => (
+                            <FormGroup key={index} sx={{ marginLeft: 2 }}>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            checked={valBenefitNames.includes(String(item.id))}
+                                            onChange={handleConditionChangeService}
+                                            value={String(item.id)}
+                                        />
+                                    }
+                                    label={item.description}
+                                />
+                            </FormGroup>
+                        ))}
+                    </Select>
+                    <FormHelperText style={{ color: 'red' }}>{valBenefitNameError}</FormHelperText>
+                    </FormControl>
+                    </Stack>
+                </Stack>
+        </Stack>
+      ) : 
+      
+      (
+        <FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
+            <Stack paddingX={2} paddingY={4}>
+            {/* <Card sx={{padding:2}}> */}
+                {fields?.map((item, index) => 
+                (
+                    <Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>                    
+                            <Grid key={item.id} container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
+                                        {item.description}
+                                    </Typography>
+                                   
+                                </Grid>
+                                <Grid item xs={2.5}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <Typography variant="subtitle1" component="div">
+                                                Amount Incurred*
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                            <RHFTextFieldMoney 
+                                                key={item.id}
+                                                id='amount_incurred'
+                                                name={`benefit_data.${index}.amount_incurred`}
+                                                placeholder='Amount Incurred'
+                                                required
+                                            />
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={2.5}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <Typography variant="subtitle1" component="div">
+                                                Amount Approved*
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                            <RHFTextFieldMoney
+                                                // onChange={() => append({amount_approved: ''}) }
+                                                id='amount_approved'
+                                                key={item.id}
+                                                name={`benefit_data.${index}.amount_approved`}
+                                                placeholder='Amount Approved'
+                                                required
+                                            />
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={2.5}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <Typography variant="subtitle1" component="div">
+                                                Amount Not Approved*
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                            <RHFTextFieldMoney
+                                                // onChange={() => append({amount_not_approved: ''}) }
+                                                id='amount_not_approved'
+                                                key={item.id}
+                                                name={`benefit_data.${index}.amount_not_approved`}
+                                                placeholder='Amount Not Approved'
+                                                required
+                                            />
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={2.5}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <Typography variant="subtitle1" component="div">
+                                                Excess Paid*
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                            <RHFTextFieldMoney
+                                                // onChange={() => append({excess_paid: ''}) }
+                                                id='excess_paid'
+                                                key={item.id}
+                                                name={`benefit_data.${index}.excess_paid`}
+                                                placeholder='Excess Paid'
+                                                required
+                                            />
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={2}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={12}>
+                                            <Typography variant="subtitle1" component="div">
+                                                Keterangan*
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                            <RHFTextField
+                                                // onChange={() => append({keterangan: ''}) }
+                                                id='keterangan'
+                                                key={item.id}
+                                                name={`benefit_data.${index}.keterangan`}
+                                                placeholder='Keterangan'
+                                                required
+                                            />
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                        </Grid>
+                    </Box>
+                ))}
+
+                
+                {/* </Card> */}
+                <DialogActions>
+                    <Stack direction="row" sx={{marginTop:3}} alignItems="center" justifyContent="space-between" spacing={2}>
+                        <Button variant="outlined" onClick={handleCloseDialogBenefit}><Typography>Cancel</Typography></Button>
+                        <LoadingButton disabled={!addBenefit} type="submit" variant="contained" loading={isSubmitting}>
+                            Save
+                        </LoadingButton>
+                    </Stack>
+                </DialogActions>
+            </Stack>
+        </FormProvider>
+        
+      );
+
+    const getAction = () => !addBenefit ? (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
+            <Button variant="outlined" onClick={handleCloseDialogBenefit}><Typography>Cancel</Typography></Button>
+            <Button variant="contained" onClick={handleAddDialogBenefit}><Typography>Add</Typography></Button>
+        </Stack>
+    ) : null;
+
+
+    return (
+        <MuiDialog
+          title={{name: "Add Benefit"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          action={getAction()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation.tsx

@@ -0,0 +1,109 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    approve: string;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
+
+    const navigate = useNavigate();
+    const handleSubmit = () => {
+        const formData = {
+            status : approve
+        }
+        axios
+            .put(`customer-service/request/${requestLog?.id}`, formData)
+            .then((response) => {
+                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
+                setOpenDialog(false);
+                navigate('/custormer-service/request')
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this request ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+
+                    {approve == 'approved' ? (
+                        <Button color="primary"  variant="contained" onClick={handleSubmit}>Approve</Button>
+                    ) : (
+                        <Button color="error" variant="contained" onClick={handleSubmit}>Decline</Button>
+                    ) }
+                    
+                </DialogActions>
+        </Stack>
+      );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Confirmation"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDelete.tsx

@@ -0,0 +1,69 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+
+
+type DialogDeleteType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    id: number|undefined; 
+}
+
+export default function DialogDelete({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
+    const handleSubmit = () => {
+        axios
+            .delete(`customer-service/request/benefit_data/${id}`)
+            .then((response) => {
+                enqueueSnackbar('Benefit Data has Deleted', { variant: 'success' });
+                setOpenDialog(false);
+                window.location.reload()
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to delete this detail benefit ?</Typography>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                    <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+                </DialogActions>
+        </Stack>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Delete Benefit"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xs"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx

@@ -0,0 +1,220 @@
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import MuiDialog from "@/components/MuiDialog";
+import { Box, Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { BenefitConfigurationListType } from "../Model/Types";
+import { postEditBenefit } from "../Model/Functions";
+import { useForm } from 'react-hook-form';
+import { FormProvider, RHFTextField } from "@/components/hook-form";
+import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
+import { LoadingButton } from "@mui/lab";
+
+
+type DialogDeleteType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    data: BenefitConfigurationListType|undefined; 
+    id: number;
+}
+
+export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) { 
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+     // setup form
+    // ====================================
+    const defaultValues: BenefitConfigurationListType = {
+        request_log_id: 0,
+        benefit_name: '',
+        amount_incurred: 0,
+        amount_approved: 0,
+        amount_not_approved: 0,
+        excess_paid: 0,
+        keterangan: '-',
+        description: '-'
+    };
+
+    const validationSchema = Yup.object().shape({
+        amount_incurred     : Yup.string().typeError('').required(''),
+        amount_approved     : Yup.string().typeError('').required(''),
+        amount_not_approved : Yup.string().typeError('').required(''),
+        excess_paid         : Yup.string().typeError('').required(''),
+    });
+
+    const methods = useForm<any>({
+        resolver: yupResolver(validationSchema),
+        defaultValues
+    });
+
+    const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
+
+    // Submit Form
+    // =====================================
+    const submitHandler = async (data: BenefitConfigurationListType) => {
+    
+        const response = await postEditBenefit(id, data);
+
+        if (response == true) {
+            reset();
+            // navigate('custormer-service/final-log/detail/'+requestLog?.id);
+            window.location.reload()
+        }
+    }
+
+     // Set Value Form
+    // =====================================
+    useEffect(() => {
+        setValue('amount_incurred', data?.amount_incurred)
+        setValue('amount_approved', data?.amount_approved)
+        setValue('amount_not_approved', data?.amount_not_approved)
+        setValue('excess_paid', data?.excess_paid)
+        setValue('keterangan', data?.keterangan)
+    }, [data])
+
+    const getContent = () => (
+        <FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
+            <Stack paddingX={2} paddingY={4}>
+            {/* <Card sx={{padding:2}}> */}
+                <Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>                    
+                        <Grid key={id} container spacing={2}>
+                            <Grid item xs={12}>
+                                <Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
+                                    {data?.benefit?.description}
+                                </Typography>
+                                
+                            </Grid>
+                            <Grid item xs={2.5}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="subtitle1" component="div">
+                                            Amount Incurred*
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <RHFTextFieldMoney 
+                                            key={id}
+                                            id='amount_incurred'
+                                            name={`amount_incurred`}
+                                            placeholder='Amount Incurred'
+                                            required
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={2.5}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="subtitle1" component="div">
+                                            Amount Approved*
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <RHFTextFieldMoney
+                                            // onChange={() => append({amount_approved: ''}) }
+                                            id='amount_approved'
+                                            key={id}
+                                            name={`amount_approved`}
+                                            placeholder='Amount Approved'
+                                            required
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={2.5}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="subtitle1" component="div">
+                                            Amount Not Approved*
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <RHFTextFieldMoney
+                                            // onChange={() => append({amount_not_approved: ''}) }
+                                            id='amount_not_approved'
+                                            key={id}
+                                            name={`amount_not_approved`}
+                                            placeholder='Amount Not Approved'
+                                            required
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={2.5}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="subtitle1" component="div">
+                                            Excess Paid*
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <RHFTextFieldMoney
+                                            // onChange={() => append({excess_paid: ''}) }
+                                            id='excess_paid'
+                                            key={id}
+                                            name={`excess_paid`}
+                                            placeholder='Excess Paid'
+                                            required
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={2}>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={12}>
+                                        <Typography variant="subtitle1" component="div">
+                                            Keterangan*
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                        <RHFTextField
+                                            // onChange={() => append({keterangan: ''}) }
+                                            id='keterangan'
+                                            key={id}
+                                            name={`keterangan`}
+                                            placeholder='Keterangan'
+                                            required
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                    </Grid>
+                </Box>
+                {/* </Card> */}
+                <DialogActions>
+                    <Stack direction="row" sx={{marginTop:3}} alignItems="center" justifyContent="space-between" spacing={2}>
+                        <Button variant="outlined" onClick={handleCloseDialog}><Typography>Cancel</Typography></Button>
+                        <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
+                            Save
+                        </LoadingButton>
+                    </Stack>
+                </DialogActions>
+            </Stack>
+        </FormProvider>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Edit Detail Benefit"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogHospitalCare.tsx

@@ -0,0 +1,155 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import { useFieldArray, useForm } from 'react-hook-form';
+import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
+
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { LoadingButton } from '@mui/lab';
+import AddIcon from '@mui/icons-material/Add';
+
+
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+export default function DialogHospitalCare({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
+
+    interface FormValuesProps extends Partial<DetailFinalLogType> {
+        taxes: boolean;
+        inStock: boolean;
+    }
+
+    const onSubmit = async (data: DetailFinalLogType) => {
+        
+        reset();
+    }
+
+    const methods = useForm<DetailFinalLogType>();
+    const {
+        reset,
+        watch,
+        control,
+        setValue,
+        getValues,
+        setError,
+        handleSubmit,
+        resetField,
+        formState: { isSubmitting },
+    } = methods;
+
+    const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
+
+    const getContent = () => (
+        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
+            <Grid container spacing={2}>
+                {/* Location */}
+                <Grid item xs={12}>
+                    <Typography variant='subtitle1' marginBottom={1}>Location*</Typography>
+                    <RHFTextField name="location" label="Location" required placeholder='Location' />
+                </Grid>
+
+                {/* Dokter */}
+                <Grid item xs={12}>
+                    <Typography variant='subtitle1' marginBottom={1}>Doctor*</Typography>
+                    <RHFTextField name="doctor" label="Doctor" required placeholder='Doctor' />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Typography variant='subtitle1' marginBottom={1}>Medical Record Number*</Typography>
+                    <RHFTextField name="medical_record_number" label="Medical Record Number" required placeholder='Medical Record Number' />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Typography variant='subtitle1' marginBottom={1}>Symptoms*</Typography>
+                    <RHFTextField name="symptoms" label="Symptoms" placeholder='Symptoms' required/>
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Typography variant='subtitle1' marginBottom={1}>Sign*</Typography>
+                    <RHFTextField name="sign" label="Sign" placeholder='Sign' required />
+                </Grid>
+
+                <Grid item xs={10.8}>
+                    <Typography variant='subtitle1'>Diagnosis*</Typography>
+                </Grid>
+                
+                <Grid item xs={1} justifyContent={'flex-end'}>
+                    {/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
+                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
+                        <Typography variant="button" display="block">Diagnosis</Typography>
+                    </Button>
+                </Grid>
+
+
+                <Grid item xs={12}>
+                    <RHFTextField name="Diagnosis" label="Diagnosis" placeholder='Diagnosis' required />
+                </Grid>
+
+                <Grid item xs={10.7}>
+                    <Typography variant='subtitle1'>Examination and Result*</Typography>
+                </Grid>
+                
+                <Grid item xs={1} justifyContent={'flex-end'}>
+                    {/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
+                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
+                        <Typography variant="button" display="block">Examination</Typography>
+                    </Button>
+                </Grid>
+
+                <Grid item xs={6}>
+                    <RHFTextField name="examination" label="Examination" placeholder='Examination' required />
+                </Grid>
+                <Grid item xs={6}>
+                    <RHFTextField name="result" label="Result" placeholder='Result' required />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Typography variant='subtitle1' marginBottom={1}>Invoice*</Typography>
+                    <RHFTextField name="invoice" label="Invoice" placeholder='Invoice' required/>
+                </Grid>
+            </Grid>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+            <Grid container item xs={12} md={12} justifyContent="flex-end">
+            <Button variant="outlined" color='primary' >Cancel</Button>
+            <LoadingButton
+                type="submit"
+                variant="contained"
+                size="medium"
+                loading={isSubmitting}
+                sx={{marginLeft:2}}
+            >
+                <Typography variant="subtitle2"> Save</Typography>
+            </LoadingButton>
+            </Grid>
+        </Stack>
+    </FormProvider>
+    );
+
+    
+
+
+    return (
+        <MuiDialog
+          title={{name: "Add History of Hospital Care"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogMedicine.tsx

@@ -0,0 +1,160 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import { useFieldArray, useForm } from 'react-hook-form';
+import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
+
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { LoadingButton } from '@mui/lab';
+import AddIcon from '@mui/icons-material/Add';
+import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+export default function DialogHMedicine({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
+
+    interface FormValuesProps extends Partial<DetailFinalLogType> {
+        taxes: boolean;
+        inStock: boolean;
+    }
+
+    const onSubmit = async (data: DetailFinalLogType) => {
+        
+        reset();
+    }
+
+    const handleCloseDialogMedicine = () => {
+        setOpenDialog(false)
+        setMedicines([])
+    }
+    const [medicines, setMedicines] = useState([]);
+
+    const addMedicine = () => {
+        setMedicines((prevMedicines) => [...prevMedicines, { medicine: '', price: '' }]);
+        
+    };
+
+    const handleDelete = (index) => {
+        // Update the medicines state to remove the medicine at the given index
+        setMedicines((prevMeds) => prevMeds.filter((med, medIndex) => medIndex !== index));
+    };
+
+    const removeMedicene = (i:number) => {
+        const index = medicines.indexOf(i);
+        if (index > -1) { // only splice array when item is found
+            medicines.splice(index, 1); // 2nd parameter means remove one item only
+        }
+    }
+    
+
+    const methods = useForm<DetailFinalLogType>();
+    const {
+        reset,
+        watch,
+        control,
+        setValue,
+        getValues,
+        setError,
+        handleSubmit,
+        resetField,
+        formState: { isSubmitting },
+    } = methods;
+
+    const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
+
+    const getContent = () => (
+        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
+            <Grid container spacing={2}>
+                {/* Medicine */}
+                <Grid item xs={12}>
+                    <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                        <Typography variant='subtitle1' gutterBottom>Medicine*</Typography>
+                        <Button color="inherit" variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={addMedicine}>
+                            <Typography variant="button" display="block">Medicine</Typography>
+                        </Button>
+                    </Stack>
+                </Grid>
+
+                {/* Listing */}
+                <Grid item xs={6}>
+                    <RHFTextField
+                        name={`medicine[0].name`}
+                        label="Medicine"
+                        required
+                        placeholder="Medicine"
+                    />
+                    </Grid>
+                    <Grid item xs={6}>
+                    <RHFTextFieldMoney
+                        name={`medicine[0].price`}
+                        label="Price"
+                        required
+                        placeholder="Price"
+                    />
+                </Grid>
+                {medicines.map((medicine, index) => (
+                    <React.Fragment key={index+1}>
+                        <Grid item xs={6}>
+                        <RHFTextField
+                            name={`medicine[${index+1}].name`}
+                            label="Medicine"
+                            required
+                            placeholder="Medicine"
+                        />
+                        </Grid>
+                        <Grid item xs={6}>
+                        <RHFTextFieldMoney
+                            name={`medicine[${index+1}].price`}
+                            label="Price"
+                            required
+                            placeholder="Price"
+                        />
+                        </Grid>
+                        {/* <Grid item xs={1}>
+                            <Button variant="contained" color="error" onClick={() => handleDelete(index)}>
+                                Delete
+                            </Button>
+                        </Grid> */}
+                        
+                    </React.Fragment>
+                ))}
+                
+            </Grid>
+        </Stack>
+
+    </FormProvider>
+    );
+
+    const getAction = () => (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
+            <Button color="inherit" variant="outlined" onClick={handleCloseDialogMedicine}><Typography>Cancel</Typography></Button>
+            <Button variant="contained"><Typography>Add</Typography></Button>
+        </Stack>
+    );
+
+
+
+    return (
+        <MuiDialog
+          title={{name: "Medicine"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          action={getAction()}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx

@@ -1,305 +1,412 @@
-// mui
-import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
+import {
+    Container,
+    Grid,
+    Stack,
+    Typography,
+    Card,
+    Dialog,
+    TableRow,
+    Tab,
+    TableCell,
+    Collapse,
+    AccordionSummary,
+    AccordionDetails,
+ } from '@mui/material';
 // components
-import Page from '../../components/Page';
+import Page from '../../../components/Page';
 // utils
-import useSettings from '../../hooks/useSettings';
+import useSettings from '../../../hooks/useSettings';
 // react
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { useEffect, useState, useRef } from 'react';
-import axios from '../../utils/axios';
+import { useEffect, useState, useRef, useMemo } from 'react';
+import axios from '../../../utils/axios';
 // pages
-import DetailTimeline from '../../pages/ClaimRequests/DetailTimeline';
-import DetailStepper from '../../pages/ClaimRequests/DetailStepper';
-import { format } from 'date-fns';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import Button from '@mui/material/Button';
+import { DetailFinalLogType } from './Model/Types';
+import { fDate, fDateTimesecond } from '@/utils/formatTime';
+import { Button } from '@mui/material';
+import DialogConfirmation from '../FinalLog/Components/DialogConfirmation';
+import Label from '@/components/Label';
+import { Box } from '@mui/system';
+import { Accordion } from '@mui/material';
+import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
+import {BenefitData } from '../FinalLog/Model/Types'
 import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import Iconify from '@/components/Iconify';
-import { fPostFormat } from '@/utils/formatTime';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import DownloadIcon from '@mui/icons-material/Download';
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { fDateTimesecond } from '@/utils/formatTime';
-import { makeFormData } from '@/utils/jsonToFormData';
 
-import { enqueueSnackbar } from 'notistack';
+// Import Card Detail Final LOG
+import CardDetail from '../Components/CardDetail';
+import CardService from '../Components/CardService';
+import CardExclusion from '../Components/CardExclusion';
+
+// Import Dialog
+import DialogHospitalCare from './Components/DialogHospitalCare';
+import DialogBenefit from './Components/DialogBenefit';
+import DialogMedicine from './Components/DialogMedicine';
+import DetailBenefit from '../Components/DetailBenefit';
+import DialogEditBenefit from './Components/DialogEditBenefit'; 
+
+import MoreMenu from '@/components/MoreMenu';
+import { MenuItem } from '@mui/material';
+import { fNumber } from '@/utils/formatNumber';
+import palette from '@/theme/palette';
+import DialogDelete from './Components/DialogDelete';
+
 
 // ----------------------------------------------------------------------
 
 export default function Detail() {
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
-    const code = queryParams.get('code');
 
     const navigate = useNavigate();
     const { themeStretch } = useSettings();
-    const [data, setData] = useState();
-    const [dataDialog, setDataDialog] = useState();
-    const [document, setDocument] = useState(null);
+    const [requestLog, setRequestLog] = useState<DetailFinalLogType>();
+   
 
     const { id } = useParams();
 
     useEffect(() => {
         axios
-        .get('/claim-requests/detail/'+id)
+        .get('customer-service/request/'+id)
         .then((response) => {
-            setData(response.data);
-            setDataDialog(response.data.data.dialog_submits);
-            setDocument(response.data.data.documents);
-
+            setRequestLog(response.data.data)
         })
         .catch((error) => {
             console.error(error);
-        });
-
-    }, []);
-
-    const [isInvoiceVisible, setInvoiceVisibility] = useState(false);
-
-    const handleInvoice = () => {
-        setInvoiceVisibility(!isInvoiceVisible);
-    }
-    const currentDate = new Date();
-    const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
-    const [dateInvoice, setDateInvoice] = useState(currentDate);
-
-    const fileInvoiceInput = useRef<HTMLInputElement>(null);
-    const [fileInvoices, setFileInvoices] = useState([]);
-
-    const handleInvoiceInputChange = (event) => {
-        if (event.target.files[0]) {
-            setFileInvoices([...fileInvoices, ...event.target.files]);
-        } else {
-            console.log('NO FILE');
-        }
-    };
-    const removeInvoiceFiles = (filesState, index) => {
-        setFileInvoices(
-        filesState.filter((file, fileIndex) => {
-            return fileIndex != index;
         })
-        );
-    };
-    const date = dateInvoice ? fPostFormat(dateInvoice, 'yyyy-MM-dd') : null;
+    }, [id]);
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
 
     const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
-    const handleCloseDialogSubmit = () => {
-        setOpenDialogSubmit(false);
-    }
-    const handleSubmitData = () => {
-        // if(fileInvoices.length > 0)
-        // {
-            //submit data
-            axios
-            .post('claim-requests/'+id+'/approve')
-            .then((response) => {
-                enqueueSnackbar('Success Submit Claim Request', { variant: 'success' });
-                setOpenDialogSubmit(false);
-            })
-            .catch(({ response }) => {
-                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
-            });
-            //Upload file invoices
-            const formData = makeFormData({
-                date:date,
-                invoice_files: fileInvoices,
-            });
-            axios
-            .post('claim-requests/'+id+'/invoice-files', formData)
-            .then((response) => {
-                enqueueSnackbar(response.data.message ?? 'Success upload invoice', { variant: 'success' });
-            })
-            .catch(({ response }) => {
-                enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
-            });
-        // }
-        // else
-        // {
-        //     enqueueSnackbar('Please upload file invoice, before submit', { variant: 'warning' });
-        // }
+    const [openDialogHospital, setDialogHospital] = useState(false);
+    const [openDialogBenefit, setDialogBenefit] = useState(false);
+    const [openDialogMedicine, setDialogMedicine] = useState(false);
 
-        setTimeout(() =>
-        {
-            window.location.reload();
-        }, 5000);
+    // Handel Delete Detail Benefit
+    const [idBenefitData, setIdBenefitData] = useState<number>();
+    const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
 
-    };
-
-    const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
+    const [approve, setApprove] = useState('')
 
+    // Handle Edit Detail Benefit
+    const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
+    const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
     return (
         <Page title='Detail'>
         <Container maxWidth={themeStretch ? false : 'xl'}>
             <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
             <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
-            <Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
-            {data ? (
-            <Stack direction="row" spacing={2} ml="auto">
-                <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
-                <Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
+            <Typography variant="h5" sx={{marginLeft:2}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
             </Stack>
-            ) : ''}
-            </Stack>
-            {data ? (
             <Grid container spacing={2}>
+                {/* Detail */}
                 <Grid item xs={12} md={12}>
-                    <DetailStepper data={data}/>
+                    <CardDetail
+                        requestLog={requestLog}
+                    >
+                    </CardDetail>
                 </Grid>
-                <Grid item xs={12} md={12}>
-                    <Stack direction="row" alignItems="center">
-                        <Typography variant="subtitle1">Format Claim</Typography>
-                        <Button variant="outlined" color="primary" startIcon={< DownloadIcon/>} sx={{marginLeft: 'auto'}}>
-                            <Typography variant="button" display="block">Import</Typography>
-                        </Button>
-                    </Stack>
+
+                {/* Service */}
+                <Grid item xs={12} md={12} marginTop={2}>
+                    <CardService 
+                        requestLog={requestLog}
+                        isFinalLog={true}
+                    >
+                    </CardService>
                 </Grid>
-                {check_invoice ? (
-                    <Grid item xs={12} md={12}>
-                        <Stack direction="row" alignItems="center">
-                            <Typography variant="subtitle1">Request Claim</Typography>
-                            <Button variant="outlined" color="primary" startIcon={ isInvoiceVisible ? < RemoveIcon/> : < AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleInvoice()}>
-                                <Typography variant="button" display="block">Invoice</Typography>
-                            </Button>
+                
+                {/* Exclusion */}
+                <Grid item xs={12} md={12} marginTop={2}>
+                    <CardExclusion 
+                        requestLog={requestLog}
+                    >
+                    </CardExclusion>
+                </Grid>
+
+                {/* Hospital Care */}
+                {/* <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
+                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
+                                setDialogHospital(true);
+                            }} >
+                                    <Typography variant="button" display="block">History</Typography>
+                                </Button>
                         </Stack>
-                    </Grid>
-                ) : ''}
-                <Grid item xs={12} md={12} sx={{display : isInvoiceVisible ? '' : 'none',}}>
-                    <Card sx={{padding: 2}}>
-                        <Stack direction="column" spacing={2}>
-                            <LocalizationProvider dateAdapter={AdapterDateFns}>
-                                <DatePicker
-                                    label="Invoice Date"
-                                    value={dateInvoice}
-                                    onChange={(newValue) => {
-                                        setDateInvoice(newValue);
-                                    }}
-                                    inputFormat="dd MMM yyyy"
-                                    renderInput={(params) => <TextField sx={{width:'40%'}} {...params} defaultValue={formattedCurrentDate} required/>}
-                                />
-                            </LocalizationProvider>
-                            <Stack
-                                divider={<Divider orientation="horizontal" flexItem />}
-                                spacing={1}
-                                sx={{ marginY: 2 }}
-                            >
-                                {fileInvoices &&
-                                fileInvoices.map((file, index) => (
-                                    <Stack direction="row" justifyContent={'space-between'} key={index}>
-                                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
-                                            <InsertDriveFileIcon />
-                                            <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
-                                        </Stack>
-                                        <Iconify
-                                            icon="eva:trash-2-outline"
-                                            color={'darkred'}
-                                            onClick={() => {
-                                            removeInvoiceFiles(fileInvoices, index);
-                                            }}
-                                            sx={{cursor: 'pointer'}}
-                                        ></Iconify>
+                    </Card>
+                    <DialogHospitalCare
+                        requestLog={requestLog}
+                        openDialog={openDialogHospital}
+                        setOpenDialog={setDialogHospital}
+                        
+                    >
+                    </DialogHospitalCare>
+                </Grid> */}
+
+                {/* Benefit */}
+                <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Benefit</Typography>
+                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}  onClick={() => {
+                                    setDialogBenefit(true);
+                                }} >
+                                    <Typography variant="button" display="block">Benefit</Typography>
+                                </Button>
+                        </Stack>
+
+                        {requestLog?.benefit_data?.map((item, index) => (
+                            <Box key={index} sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}> 
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={6}>
+                                            <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
+                                                {item.benefit?.description}
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
+                                            <MoreMenu actions={
+                                                <>
+                                                    <MenuItem onClick={() => {
+                                                            setDialogEditBenefit(true)
+                                                            setIdBenefitData(item.id)
+                                                            setBenefitConfigurationData(item)
+                                                        }}
+                                                    >
+                                                        <EditOutlined />
+                                                        Edit
+                                                    </MenuItem>
+                                                    <MenuItem onClick={() => {
+                                                        setIdBenefitData(item.id)
+                                                        setDialogDeleteBenefit(true)
+                                                    }}
+                                                    >
+                                                        <Delete color='error'/>
+                                                        Delete
+                                                    </MenuItem>
+                                                </>
+                                            } />
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
+                                        <Grid container spacing={1}>
+
+                                            {/* Amount Incurred */}
+                                            <Grid item xs={2}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Amount Incurred
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(item.amount_incurred)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Amount Approved */}
+                                            <Grid item xs={2}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Amount Approved
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(item.amount_approved)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Amount Not Approved */}
+                                            <Grid item xs={3}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Amount Not Approved
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(item.amount_not_approved)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Excess Paid* */}
+                                            <Grid item xs={2}>
+                                                <Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Excess Paid*
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {fNumber(item.excess_paid)}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                            {/* Keterangan* */}
+                                            <Grid item xs={3}>
+                                                <Grid container>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption">
+                                                            Keterangan*
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                                                            {item.keterangan}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+
+                                        </Grid>
+                                    </Box>
+                                </Grid>
+                             
+                            </Grid>
+                        </Box>
+                        ))}
+                      
+                        
+                    </Card>
+                    
+
+                    <DialogBenefit
+                        requestLog={requestLog}
+                        openDialog={openDialogBenefit}
+                        setOpenDialog={setDialogBenefit}
+                        
+                    />
+                    {/* Dialog Edit */}
+                    <DialogEditBenefit
+                        id={idBenefitData}
+                        data={BenefitConfigurationData}
+                        openDialog={openDialogEditBenefit}
+                        setOpenDialog={setDialogEditBenefit}
+                    >
+
+                    </DialogEditBenefit>
+                    {/* Dialog Delete */}
+                    <DialogDelete 
+                        id={idBenefitData}
+                        openDialog={openDialogDeleteBenefit}
+                        setOpenDialog={setDialogDeleteBenefit}
+                    />
+                </Grid>
+
+                {/* Medicine */}
+                <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Medicine</Typography>
+                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
+                                    setDialogMedicine(true)
+                                }} >
+                                    <Typography variant="button" display="block">Medicine</Typography>
+                                </Button>
+                        </Stack>
+                    </Card>
+                    <DialogMedicine
+                     requestLog={requestLog}
+                     openDialog={openDialogMedicine}
+                     setOpenDialog={setDialogMedicine}
+                    />
+
+                </Grid>
+
+                {/* File */}
+                <Grid item xs={12} md={12}>
+                    <Card sx={{padding:2}}  >
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files History</Typography>
+                            {requestLog?.files?.map((documentType, index) => (
+                                <Stack direction="column" spacing={2} key={index}>
+                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                    <a
+                                        href={documentType.url}
+                                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                                        target="_blank"
+                                    >
+                                        <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+                                    </a>
                                     </Stack>
-                                ))}
-                            </Stack>
-                            <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
-                                    bgcolor: '#919EAB52',
-                                    borderRadius: '8px',
-                                    width: '100%', height: '60px'}} onClick={() => fileInvoiceInput.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 Invoice
-                                </Typography>
-                                </Box>
-                                <input
-                                type="file"
-                                id="file"
-                                ref={fileInvoiceInput}
-                                style={{ display: 'none' }}
-                                multiple
-                                onChange={handleInvoiceInputChange}
-                                accept="application/pdf"
-                                />
-                            </ButtonBase>
+                                </Stack>
+                            ))}
+                        </Stack>
                         </Stack>
                     </Card>
                 </Grid>
-                <Grid item xs={12} md={12}>
-                    <DetailTimeline data={data}/>
-                </Grid>
-                <Grid item xs={12} md={12}>
-                    <Stack direction="row" padding={4}>
-                        {dataDialog && dataDialog.status === 'requested' ? (
-                            <>
-                            <Button variant="outlined" sx={{color: '#212B36', marginLeft: 'auto', borderColor: '#919EAB52'}} >Cancel</Button>
-                            <Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
-                            </>
-                        ) : ''}
-                        {/* Dialog Submits */}
-                        <Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} 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">Confirmation</Typography>
-                                </Stack>
-                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
-                                    <CloseIcon />
-                                </IconButton>
-                            </Stack>
-                            </DialogTitle>
-                            <DialogContent>
-                                {dataDialog ? (
-                                <Stack spacing={2} padding={2}>
-                                    <Typography variant='body1'>Are you sure to submit this claim ?</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%'}}>{dataDialog.code}</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.name}</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Date Submission</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{fDateTimesecond(dataDialog.submission_date)}</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Claim Method</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>Service Type</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Service Type</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>
-                                                {dataDialog.service_code === 'IP' ? 'Inpatient' : 'Outpatient'}
-                                            </Typography>
-                                        </Stack>
-                                    </Card>
-                                </Stack>
-                                ) : ''}
-                            </DialogContent>
-                            <DialogActions>
-                            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
-                            <Button sx={{backgroundColor: '#19BBBB'}} onClick={handleSubmitData} variant="contained">Submit</Button>
-                            </DialogActions>
-                        </Dialog>
+
+                {requestLog?.status_final_log == 'requested' ? (
+                    <Grid item xs={12} md={12}>
+                    <Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
+                        <>
+                        <div>
+                            <Button
+                            variant="outlined"
+                            sx={{ color: '#FF4842', borderColor: '#FF4842' }}
+                            onClick={() => {
+                                setOpenDialogSubmit(true);
+                                setApprove('declined');
+                            }}
+                            >
+                            Decline
+                            </Button>
+                        </div>
+                        <div>
+                            <Button
+                            variant="contained"
+                            onClick={() => {
+                                setOpenDialogSubmit(true);
+                                setApprove('approved');
+                            }}
+                            >
+                            Approve
+                            </Button>
+                        </div>
+                        </>
+                        <DialogConfirmation
+                            setOpenDialog={setOpenDialogSubmit}
+                            requestLog={requestLog}
+                            openDialog={openDialogSubmit}
+                            approve={approve}
+                            ></DialogConfirmation>
                     </Stack>
                 </Grid>
+                ) : null}
+                
             </Grid>
-            ) : ''}
         </Container>
         </Page>
     );

frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx

@@ -48,6 +48,8 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
 import Label from '@/components/Label';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';
+
+import { FinalLogType } from '../FinalLog/Model/Types';
 // import LoadingButton from '@/theme/overrides/LoadingButton';
 
 export default function List() {
@@ -217,7 +219,7 @@ export default function List() {
                 <MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template</MenuItem>
                 <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
               </Menu>
-            <Button
+            {/* <Button
               variant="contained"
               startIcon={<AddIcon />}
               sx={{ p: 1.8 }}
@@ -226,7 +228,7 @@ export default function List() {
               }}
             >
               Create
-            </Button>
+            </Button> */}
           </Stack>
         )}
 
@@ -281,7 +283,7 @@ export default function List() {
   const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/customer-service/request?status=approved', { params: filter });
+    const response = await axios.get('/customer-service/request?final_log=1&service_code=OP', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
@@ -320,7 +322,7 @@ export default function List() {
   };
 
   // Called on every row to map the data to the columns
-  function createData(data: any): any {
+  function createData(data: FinalLogType) {
     return {
       ...data,
     };
@@ -342,7 +344,7 @@ export default function List() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
             </TableCell> */ }
-          <TableCell align="left">
+          {/* <TableCell align="left">
             <Typography
               // onClick={() => {
               //   handleShowClaim(row);
@@ -350,26 +352,29 @@ export default function List() {
             >
               {row.id}
             </Typography>
-          </TableCell>
-          <TableCell align="left">{row.member?.code}</TableCell>
+          </TableCell> */}
+          <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.member?.full_name}</TableCell>
           <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
           <TableCell align="left">{row.service_name}</TableCell>
           <TableCell align="left">{row.payment_type_name}</TableCell>
           <TableCell align="left">
-           { row.status == "requested" ?
-              (<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
-              (<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
-          }
+          { row.status_final_log == "requested" ?
+              (<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status_final_log)}</Label>) :
+              row.status_final_log == "declined" ? 
+              (<Label color='error'> {capitalizeFirstLetter(row.status_final_log)}</Label>)
+              :
+              (<Label color='success'> {capitalizeFirstLetter(row.status_final_log)}</Label>)
+            }
           </TableCell>
           <TableCell align="right">
             <TableMoreMenu actions={
               <>
-                <MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
+                {/* <MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
                   <EditOutlinedIcon />
                   Edit
-                </MenuItem>
-                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
+                </MenuItem> */}
+                <MenuItem onClick={() => navigate ('/custormer-service/final-log/detail/'+row.id+'')}>
                   <FindInPageOutlinedIcon />
                   Detail
                 </MenuItem>
@@ -471,9 +476,9 @@ export default function List() {
         <TableHead>
           <TableRow>
             {/* <TableCell style={headStyle} align="left" /> */}
-            <TableCell style={headStyle} align="left">
+            {/* <TableCell style={headStyle} align="left">
               ID Request LOG
-            </TableCell>
+            </TableCell> */}
             <TableCell style={headStyle} align="left">
               Code
             </TableCell>

frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Functions.tsx

@@ -1,6 +1,7 @@
 import axios from '@/utils/axios';
 import { enqueueSnackbar } from 'notistack';
 import { MemberListType } from './Types';
+import { BenefitConfigurationListType } from './Types';
 import { makeFormData } from '@/utils/jsonToFormData';
 
 /**
@@ -77,3 +78,76 @@ export const addClaimRequest = async ( data: MemberListType[] ): Promise<boolean
 
     return response;
 };
+
+/**
+ * Add Benefit
+ */
+
+export const postAddBenefit = async (data: BenefitConfigurationListType):Promise<boolean> => {
+    const response = await axios.post(`customer-service/request/insert-benefit`, {
+       ...data 
+    })
+    .then((res) =>{
+        enqueueSnackbar(res.data.message, {
+            variant: 'success',
+        });
+
+        return true;
+    })
+    .catch((res) => {
+        if (res.response.status == 400) {
+            let arr_message = res.response.data.message;
+
+            // for (const key in arr_message) {
+                enqueueSnackbar(arr_message, {
+                    variant: 'warning',
+                });
+            // }
+        }
+        else {
+            enqueueSnackbar("server error !", {
+                variant: 'error',
+            });
+        }
+
+        return false;
+    });
+
+    return response;
+}
+
+/**
+ * Edit Benefit
+ */
+export const postEditBenefit = async (id:number, data: BenefitConfigurationListType):Promise<boolean> => {
+    const response = await axios.put(`customer-service/request/benefit_data/${id}`, {
+       ...data 
+    })
+    .then((res) =>{
+        enqueueSnackbar(res.data.message, {
+            variant: 'success',
+        });
+
+        return true;
+    })
+    .catch((res) => {
+        if (res.response.status == 400) {
+            let arr_message = res.response.data.message;
+
+            // for (const key in arr_message) {
+                enqueueSnackbar(arr_message, {
+                    variant: 'warning',
+                });
+            // }
+        }
+        else {
+            enqueueSnackbar("server error !", {
+                variant: 'error',
+            });
+        }
+
+        return false;
+    });
+
+    return response;
+}

frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx

@@ -1,3 +1,5 @@
+import { Member } from "@/@types/member"
+
 /**
  * Search Type
  */
@@ -8,18 +10,109 @@ export type SearchType = {
 /**
  * Member List
  */
-export type MemberListType = {
-    id           : string,
-    member_id    : string,
-    name         : string,
-    service_type : ServiceType[],
-    patien_type?    : string,
-    file_kondisi?   : any[],
-    file_diagnosa?  : any[],
-    file_penunjang? : any[],
+export type FinalLogType = {
+    id                  : number,
+    code                : string,
+    member              : Member,
+    submission_date     : string,
+    service_name        : string,
+    payment_type_name   : string,
+    status_final_log    : string,
+    status              : string,
+    files_by_type   : files_by_type,
 }
 
-export type ServiceType = {
-    code : string
-    name : string
+
+export type DetailFinalLogType = {
+    id                  : number,
+    code                : string,
+    member_id           : string,
+    policy_number       : string,
+    name                : string|any,
+    date_of_birth       : string,
+    gender              : string,
+    marital_status      : string,
+    submission_date     : string,
+    service_type        : string,
+    claim_method        : string,
+    status              : string,
+    status_final_log    : string,
+    benefit             : Benefit[],
+    benefit_data        : BenefitData[],
+    config_service      : ConfigService,
+    exclusion           : Exclusion[],
+    files               : file[],
 }
+
+export type BenefitData = {
+    amount_incurred : number,
+    amount_approved : number,
+    amount_not_approved : number,
+    excess_paid : number,
+    keterangan : string,
+    benefit : Benefit,
+    id : number,
+}
+
+export type Benefit = {
+    id: number,
+    code: string,
+    description: string
+}
+
+export type files_by_type = {
+    claim_diagnosis : file[],
+    claim_kondisi : file[],
+    claim_result : file[],
+}
+
+export type file = {
+    original_name: string,
+    name: string,
+    path: string,
+    url: string,
+}
+
+export type ConfigService = {
+    gp_external_doctor_online: string,
+    gp_external_doctor_offline: string,
+    gp_internal_doctor_online: string,
+    gp_internal_doctor_offline: string,
+    sp_external_doctor_online: string,
+    sp_external_doctor_offline: string,
+    sp_internal_doctor_online: string,
+    sp_internal_doctor_offline: string,
+    vitamins: string,
+    delivery_fee: string,
+    general_practitioner_fee: string,
+    specialist_practitioner_fee: string
+}
+
+export type Exclusion = {
+    exclusionable: {
+        code: string,
+        name: string
+    },
+    rules: Rule[]
+}
+
+export type Rule = {
+    id: number,
+    exclusion_id: number,
+    name: string,
+    values: string,
+
+}
+
+
+export type BenefitConfigurationListType = {
+    request_log_id: number|undefined,
+    benefit_name: string,
+    amount_incurred: number,
+    amount_approved: number,
+    amount_not_approved: number,
+    excess_paid: number,
+    keterangan: string,
+    description: string,
+}
+

frontend/dashboard/src/pages/CustomerService/Request/Components/DialogConfirmation.tsx

@@ -0,0 +1,109 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailRequestLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    approve: string;
+    requestLog: DetailRequestLogType|undefined; 
+}
+
+export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
+
+    const navigate = useNavigate();
+    const handleSubmit = () => {
+        const formData = {
+            status : approve
+        }
+        axios
+            .put(`customer-service/request/${requestLog?.id}`, formData)
+            .then((response) => {
+                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
+                setOpenDialog(false);
+                navigate('/custormer-service/request')
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this request ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+
+                    {approve == 'approved' ? (
+                        <Button color="primary"  variant="contained" onClick={handleSubmit}>Approve</Button>
+                    ) : (
+                        <Button color="error" variant="contained" onClick={handleSubmit}>Decline</Button>
+                    ) }
+                    
+                </DialogActions>
+        </Stack>
+      );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Confirmation"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}

frontend/dashboard/src/pages/CustomerService/Request/Detail.tsx

@@ -1,305 +1,174 @@
-// mui
-import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
+import {
+    Container,
+    Grid,
+    Stack,
+    Typography,
+    Card,
+    Dialog,
+ } from '@mui/material';
 // components
 import Page from '../../../components/Page';
 // utils
 import useSettings from '../../../hooks/useSettings';
 // react
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import axios from '../../../utils/axios';
 // pages
-import DetailTimeline from '../../../pages/ClaimRequests/DetailTimeline';
-import DetailStepper from '../../../pages/ClaimRequests/DetailStepper';
-import { format } from 'date-fns';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import Iconify from '@/components/Iconify';
-import { fPostFormat } from '@/utils/formatTime';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import DownloadIcon from '@mui/icons-material/Download';
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { fDateTimesecond } from '@/utils/formatTime';
-import { makeFormData } from '@/utils/jsonToFormData';
-
-import { enqueueSnackbar } from 'notistack';
+import { DetailRequestLogType } from './Model/Types';
+import { fDate, fDateTimesecond } from '@/utils/formatTime';
+import { Button } from '@mui/material';
+import DialogConfirmation from './Components/DialogConfirmation';
 
 // ----------------------------------------------------------------------
 
 export default function Detail() {
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
-    const code = queryParams.get('code');
 
     const navigate = useNavigate();
     const { themeStretch } = useSettings();
-    const [data, setData] = useState();
-    const [dataDialog, setDataDialog] = useState();
-    const [document, setDocument] = useState(null);
+    const [requestLog, setRequestLog] = useState<DetailRequestLogType>();
+   
 
     const { id } = useParams();
 
     useEffect(() => {
         axios
-        .get('/claim-requests/detail/'+id)
+        .get('customer-service/request/'+id)
         .then((response) => {
-            setData(response.data);
-            setDataDialog(response.data.data.dialog_submits);
-            setDocument(response.data.data.documents);
-
+            setRequestLog(response.data.data)
         })
         .catch((error) => {
             console.error(error);
-        });
-
-    }, []);
-
-    const [isInvoiceVisible, setInvoiceVisibility] = useState(false);
-
-    const handleInvoice = () => {
-        setInvoiceVisibility(!isInvoiceVisible);
-    }
-    const currentDate = new Date();
-    const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
-    const [dateInvoice, setDateInvoice] = useState(currentDate);
-
-    const fileInvoiceInput = useRef<HTMLInputElement>(null);
-    const [fileInvoices, setFileInvoices] = useState([]);
-
-    const handleInvoiceInputChange = (event) => {
-        if (event.target.files[0]) {
-            setFileInvoices([...fileInvoices, ...event.target.files]);
-        } else {
-            console.log('NO FILE');
-        }
-    };
-    const removeInvoiceFiles = (filesState, index) => {
-        setFileInvoices(
-        filesState.filter((file, fileIndex) => {
-            return fileIndex != index;
         })
-        );
-    };
-    const date = dateInvoice ? fPostFormat(dateInvoice, 'yyyy-MM-dd') : null;
+    }, [id]);
+
+    function toTitleCase(str: string | null) {
+        return str.replace(/\w\S*/g, function(txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
 
     const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
     const handleCloseDialogSubmit = () => {
         setOpenDialogSubmit(false);
     }
-    const handleSubmitData = () => {
-        // if(fileInvoices.length > 0)
-        // {
-            //submit data
-            axios
-            .post('claim-requests/'+id+'/approve')
-            .then((response) => {
-                enqueueSnackbar('Success Submit Claim Request', { variant: 'success' });
-                setOpenDialogSubmit(false);
-            })
-            .catch(({ response }) => {
-                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
-            });
-            //Upload file invoices
-            const formData = makeFormData({
-                date:date,
-                invoice_files: fileInvoices,
-            });
-            axios
-            .post('claim-requests/'+id+'/invoice-files', formData)
-            .then((response) => {
-                enqueueSnackbar(response.data.message ?? 'Success upload invoice', { variant: 'success' });
-            })
-            .catch(({ response }) => {
-                enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
-            });
-        // }
-        // else
-        // {
-        //     enqueueSnackbar('Please upload file invoice, before submit', { variant: 'warning' });
-        // }
 
-        setTimeout(() =>
-        {
-            window.location.reload();
-        }, 5000);
-
-    };
-
-    const check_invoice = document?.find((dataInvoice) => dataInvoice.type === 'claim-invoice');
+    const [approve, setApprove] = useState('')
 
     return (
         <Page title='Detail'>
         <Container maxWidth={themeStretch ? false : 'xl'}>
             <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
             <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
-            <Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
-            {data ? (
-            <Stack direction="row" spacing={2} ml="auto">
-                <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
-                <Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
+            <Typography variant="h5" sx={{marginLeft:2}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
             </Stack>
-            ) : ''}
-            </Stack>
-            {data ? (
             <Grid container spacing={2}>
                 <Grid item xs={12} md={12}>
-                    <DetailStepper data={data}/>
-                </Grid>
-                <Grid item xs={12} md={12}>
-                    <Stack direction="row" alignItems="center">
-                        <Typography variant="subtitle1">Format Claim</Typography>
-                        <Button variant="outlined" color="primary" startIcon={< DownloadIcon/>} sx={{marginLeft: 'auto'}}>
-                            <Typography variant="button" display="block">Import</Typography>
-                        </Button>
-                    </Stack>
-                </Grid>
-                {check_invoice ? (
-                    <Grid item xs={12} md={12}>
-                        <Stack direction="row" alignItems="center">
-                            <Typography variant="subtitle1">Request Claim</Typography>
-                            <Button variant="outlined" color="primary" startIcon={ isInvoiceVisible ? < RemoveIcon/> : < AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleInvoice()}>
-                                <Typography variant="button" display="block">Invoice</Typography>
-                            </Button>
+                    <Card sx={{padding:2}}  >
+                        <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
                         </Stack>
-                    </Grid>
-                ) : ''}
-                <Grid item xs={12} md={12} sx={{display : isInvoiceVisible ? '' : 'none',}}>
-                    <Card sx={{padding: 2}}>
-                        <Stack direction="column" spacing={2}>
-                            <LocalizationProvider dateAdapter={AdapterDateFns}>
-                                <DatePicker
-                                    label="Invoice Date"
-                                    value={dateInvoice}
-                                    onChange={(newValue) => {
-                                        setDateInvoice(newValue);
-                                    }}
-                                    inputFormat="dd MMM yyyy"
-                                    renderInput={(params) => <TextField sx={{width:'40%'}} {...params} defaultValue={formattedCurrentDate} required/>}
-                                />
-                            </LocalizationProvider>
-                            <Stack
-                                divider={<Divider orientation="horizontal" flexItem />}
-                                spacing={1}
-                                sx={{ marginY: 2 }}
-                            >
-                                {fileInvoices &&
-                                fileInvoices.map((file, index) => (
-                                    <Stack direction="row" justifyContent={'space-between'} key={index}>
-                                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
-                                            <InsertDriveFileIcon />
-                                            <Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
-                                        </Stack>
-                                        <Iconify
-                                            icon="eva:trash-2-outline"
-                                            color={'darkred'}
-                                            onClick={() => {
-                                            removeInvoiceFiles(fileInvoices, index);
-                                            }}
-                                            sx={{cursor: 'pointer'}}
-                                        ></Iconify>
-                                    </Stack>
-                                ))}
-                            </Stack>
-                            <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
-                                    bgcolor: '#919EAB52',
-                                    borderRadius: '8px',
-                                    width: '100%', height: '60px'}} onClick={() => fileInvoiceInput.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 Invoice
-                                </Typography>
-                                </Box>
-                                <input
-                                type="file"
-                                id="file"
-                                ref={fileInvoiceInput}
-                                style={{ display: 'none' }}
-                                multiple
-                                onChange={handleInvoiceInputChange}
-                                accept="application/pdf"
-                                />
-                            </ButtonBase>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.date_of_birth) : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.marital_status}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
                         </Stack>
                     </Card>
                 </Grid>
-                <Grid item xs={12} md={12}>
-                    <DetailTimeline data={data}/>
+                <Grid item xs={12} md={12} marginTop={2}>
+                    <Card sx={{padding:2}}  >
+                        <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(requestLog?.claim_method ?? '-')}</Typography>
+                        </Stack>
+                        {/* <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>
+                                <ul>
+                                    {requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
+                                    <li key={index}>{r.code } - {r.description}</li>
+                                    )) : <li>-</li>}
+                                </ul>
+                            </Typography>
+                        </Stack> */}
+                    </Card>
                 </Grid>
-                <Grid item xs={12} md={12}>
-                    <Stack direction="row" padding={4}>
-                        {dataDialog && dataDialog.status === 'requested' ? (
-                            <>
-                            <Button variant="outlined" sx={{color: '#212B36', marginLeft: 'auto', borderColor: '#919EAB52'}} >Cancel</Button>
-                            <Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
-                            </>
-                        ) : ''}
-                        {/* Dialog Submits */}
-                        <Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} 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">Confirmation</Typography>
-                                </Stack>
-                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
-                                    <CloseIcon />
-                                </IconButton>
-                            </Stack>
-                            </DialogTitle>
-                            <DialogContent>
-                                {dataDialog ? (
-                                <Stack spacing={2} padding={2}>
-                                    <Typography variant='body1'>Are you sure to submit this claim ?</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%'}}>{dataDialog.code}</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.name}</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Date Submission</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{fDateTimesecond(dataDialog.submission_date)}</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Claim Method</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>Service Type</Typography>
-                                        </Stack>
-                                        <Stack direction='row' spacing={2}>
-                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Service Type</Typography>
-                                            <Typography variant='subtitle2' sx={{width: '70%'}}>
-                                                {dataDialog.service_code === 'IP' ? 'Inpatient' : 'Outpatient'}
-                                            </Typography>
-                                        </Stack>
-                                    </Card>
-                                </Stack>
-                                ) : ''}
-                            </DialogContent>
-                            <DialogActions>
-                            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
-                            <Button sx={{backgroundColor: '#19BBBB'}} onClick={handleSubmitData} variant="contained">Submit</Button>
-                            </DialogActions>
-                        </Dialog>
+                {requestLog?.status == 'requested' ? (
+                    <Grid item xs={12} md={12}>
+                    <Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
+                        <>
+                        <div>
+                            <Button
+                            variant="outlined"
+                            sx={{ color: '#FF4842', borderColor: '#FF4842' }}
+                            onClick={() => {
+                                setOpenDialogSubmit(true);
+                                setApprove('declined');
+                            }}
+                            >
+                            Decline
+                            </Button>
+                        </div>
+                        <div>
+                            <Button
+                            variant="outlined"
+                            sx={{ color: '#19BBBB', borderColor: '#19BBBB' }}
+                            onClick={() => {
+                                setOpenDialogSubmit(true);
+                                setApprove('approved');
+                            }}
+                            >
+                            Approve
+                            </Button>
+                        </div>
+                        </>
+                        <DialogConfirmation
+                            setOpenDialog={setOpenDialogSubmit}
+                            requestLog={requestLog}
+                            openDialog={openDialogSubmit}
+                            approve={approve}
+                            ></DialogConfirmation>
                     </Stack>
                 </Grid>
+                ) : null}
+                
             </Grid>
-            ) : ''}
         </Container>
         </Page>
     );

frontend/dashboard/src/pages/CustomerService/Request/List.tsx

@@ -51,6 +51,8 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
 import Label from '@/components/Label';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';
+
+import { RequestLogType } from '../Request/Model/Types';
 // import SvgIconStyle from '@/components/SvgIconStyle';
 import SvgIconStyle from '../../../components/SvgIconStyle';
 // import LoadingButton from '@/theme/overrides/LoadingButton';
@@ -323,7 +325,7 @@ export default function List() {
   };
 
   // Called on every row to map the data to the columns
-  function createData(data: any): any {
+  function createData(data: RequestLogType): any {
     return {
       ...data,
     };
@@ -345,7 +347,7 @@ export default function List() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
             </TableCell> */ }
-          <TableCell align="left">
+          {/* <TableCell align="left">
             <Typography
               // onClick={() => {
               //   handleShowClaim(row);
@@ -353,9 +355,9 @@ export default function List() {
             >
               {row.id}
             </Typography>
-          </TableCell>
+          </TableCell> */}
           <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.member?.full_name}</TableCell>
+          <TableCell align="left">{row.member_name}</TableCell>
           <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
           <TableCell align="left">{row.service_name}</TableCell>
           <TableCell align="left">{row.payment_type_name}</TableCell>
@@ -371,19 +373,11 @@ export default function List() {
           <TableCell align="right">
             <TableMoreMenu actions={
               <>
-                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
+                <MenuItem onClick={() => navigate ('/custormer-service/request/detail/'+row.id+'')}>
                   <FindInPageOutlinedIcon />
                   Detail
                 </MenuItem>
-                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
-                <SvgIcon>
-                  {/* credit: plus icon from https://heroicons.com/ */}
-                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12.5 10.25C12.5 10.0511 12.579 9.86032 12.7197 9.71967C12.8603 9.57902 13.0511 9.5 13.25 9.5H16.75C16.9489 9.5 17.1397 9.57902 17.2803 9.71967C17.421 9.86032 17.5 10.0511 17.5 10.25C17.5 10.4489 17.421 10.6397 17.2803 10.7803C17.1397 10.921 16.9489 11 16.75 11H13.25C13.0511 11 12.8603 10.921 12.7197 10.7803C12.579 10.6397 12.5 10.4489 12.5 10.25ZM13.25 15C13.0511 15 12.8603 15.079 12.7197 15.2197C12.579 15.3603 12.5 15.5511 12.5 15.75C12.5 15.9489 12.579 16.1397 12.7197 16.2803C12.8603 16.421 13.0511 16.5 13.25 16.5H16.75C16.9489 16.5 17.1397 16.421 17.2803 16.2803C17.421 16.1397 17.5 15.9489 17.5 15.75C17.5 15.5511 17.421 15.3603 17.2803 15.2197C17.1397 15.079 16.9489 15 16.75 15H13.25ZM10.78 9.78C10.8537 9.71134 10.9128 9.62854 10.9538 9.53654C10.9948 9.44454 11.0168 9.34522 11.0186 9.24452C11.0204 9.14382 11.0018 9.04379 10.9641 8.9504C10.9264 8.85701 10.8703 8.77218 10.799 8.70096C10.7278 8.62974 10.643 8.5736 10.5496 8.53588C10.4562 8.49816 10.3562 8.47963 10.2555 8.48141C10.1548 8.48318 10.0555 8.50523 9.96346 8.54622C9.87146 8.58721 9.78866 8.64631 9.72 8.72L8.25 10.19L7.78 9.72C7.63783 9.58752 7.44978 9.5154 7.25548 9.51882C7.06118 9.52225 6.87579 9.60097 6.73838 9.73838C6.60097 9.87579 6.52225 10.0612 6.51883 10.2555C6.5154 10.4498 6.58752 10.6378 6.72 10.78L7.72 11.78C7.86063 11.9205 8.05125 11.9993 8.25 11.9993C8.44875 11.9993 8.63937 11.9205 8.78 11.78L10.78 9.78ZM10.78 14.22C10.9205 14.3606 10.9993 14.5512 10.9993 14.75C10.9993 14.9488 10.9205 15.1394 10.78 15.28L8.78 17.28C8.63937 17.4205 8.44875 17.4993 8.25 17.4993C8.05125 17.4993 7.86063 17.4205 7.72 17.28L6.72 16.28C6.64631 16.2113 6.58721 16.1285 6.54622 16.0365C6.50523 15.9445 6.48319 15.8452 6.48141 15.7445C6.47963 15.6438 6.49816 15.5438 6.53588 15.4504C6.5736 15.357 6.62974 15.2722 6.70096 15.201C6.77218 15.1297 6.85701 15.0736 6.9504 15.0359C7.04379 14.9982 7.14382 14.9796 7.24452 14.9814C7.34523 14.9832 7.44454 15.0052 7.53654 15.0462C7.62854 15.0872 7.71134 15.1463 7.78 15.22L8.25 15.69L9.72 14.22C9.86063 14.0795 10.0512 14.0007 10.25 14.0007C10.4488 14.0007 10.6394 14.0795 10.78 14.22ZM15.994 4.084C15.9521 3.51752 15.6975 2.98786 15.2813 2.60132C14.865 2.21478 14.318 1.99997 13.75 2H10.25C9.69656 2.00002 9.16255 2.20401 8.75004 2.57297C8.33754 2.94194 8.07549 3.44999 8.014 4H6.25C5.65326 4 5.08097 4.23705 4.65901 4.65901C4.23705 5.08097 4 5.65326 4 6.25V19.75C4 20.3467 4.23705 20.919 4.65901 21.341C5.08097 21.7629 5.65326 22 6.25 22H17.75C18.0455 22 18.3381 21.9418 18.611 21.8287C18.884 21.7157 19.1321 21.5499 19.341 21.341C19.5499 21.1321 19.7157 20.884 19.8287 20.611C19.9418 20.3381 20 20.0455 20 19.75V6.25C20 5.95453 19.9418 5.66194 19.8287 5.38896C19.7157 5.11598 19.5499 4.86794 19.341 4.65901C19.1321 4.45008 18.884 4.28434 18.611 4.17127C18.3381 4.0582 18.0455 4 17.75 4H15.986L15.994 4.084ZM15.994 4.096L16 4.25C16 4.198 15.997 4.147 15.994 4.096ZM10.25 6.5H13.75C14.53 6.5 15.217 6.103 15.621 5.5H17.75C17.9489 5.5 18.1397 5.57902 18.2803 5.71967C18.421 5.86032 18.5 6.05109 18.5 6.25V19.75C18.5 19.9489 18.421 20.1397 18.2803 20.2803C18.1397 20.421 17.9489 20.5 17.75 20.5H6.25C6.05109 20.5 5.86032 20.421 5.71967 20.2803C5.57902 20.1397 5.5 19.9489 5.5 19.75V6.25C5.5 6.05109 5.57902 5.86032 5.71967 5.71967C5.86032 5.57902 6.05109 5.5 6.25 5.5H8.379C8.783 6.103 9.47 6.5 10.25 6.5ZM10.25 3.5H13.75C13.9489 3.5 14.1397 3.57902 14.2803 3.71967C14.421 3.86032 14.5 4.05109 14.5 4.25C14.5 4.44891 14.421 4.63968 14.2803 4.78033C14.1397 4.92098 13.9489 5 13.75 5H10.25C10.0511 5 9.86032 4.92098 9.71967 4.78033C9.57902 4.63968 9.5 4.44891 9.5 4.25C9.5 4.05109 9.57902 3.86032 9.71967 3.71967C9.86032 3.57902 10.0511 3.5 10.25 3.5Z" fill="black"/>
-                  </svg>
-                </SvgIcon>
-                  Konfirmasi
-                </MenuItem>
+               
               </>
             } />
           </TableCell>
@@ -482,9 +476,9 @@ export default function List() {
         <TableHead>
           <TableRow>
             {/* <TableCell style={headStyle} align="left" /> */}
-            <TableCell style={headStyle} align="left">
+            {/* <TableCell style={headStyle} align="left">
               ID Request LOG
-            </TableCell>
+            </TableCell> */}
             <TableCell style={headStyle} align="left">
               Code
             </TableCell>

frontend/dashboard/src/pages/CustomerService/Request/Model/Types.tsx

@@ -1,3 +1,5 @@
+import { Member } from "@/@types/member"
+
 /**
  * Search Type
  */
@@ -8,18 +10,48 @@ export type SearchType = {
 /**
  * Member List
  */
-export type MemberListType = {
-    id           : string,
-    member_id    : string,
-    name         : string,
-    service_type : ServiceType[],
-    patien_type?    : string,
-    file_kondisi?   : any[],
-    file_diagnosa?  : any[],
-    file_penunjang? : any[],
+export type RequestLogType = {
+    id                  : number,
+    code                : string,
+    member              : Member,
+    submission_date     : string,
+    service_name        : string,
+    payment_type_name   : string,
+    status_final_log    : string,
+    status              : string,
+    files_by_type   : files_by_type,
 }
 
-export type ServiceType = {
-    code : string
-    name : string
+export type files_by_type = {
+    claim_diagnosis : file[],
+    claim_kondisi : file[],
+    claim_result : file[],
 }
+
+export type file = {
+    name: string,
+    url: string,
+}
+
+export type DetailRequestLogType = {
+    id               : number,
+    code                : string,
+    member_id           : string,
+    policy_number       : string,
+    name                : string,
+    date_of_birth       : string,
+    gender              : string,
+    marital_status      : string,
+    submission_date      : string,
+    service_type        : string,
+    claim_method        : string,
+    status        : string,
+    benefit             : Benefit[],
+}
+
+export type Benefit = {
+    code: string,
+    description: string
+}
+
+

frontend/dashboard/src/routes/index.tsx

@@ -252,6 +252,10 @@ export default function Router() {
                     path: 'laboratorium_result/:member_id/claims/:claim_code/list_lab_result',
                     element: <DetailLabResultList />
                 },
+                {
+                    path: 'inpatient_monitoring', // Inpatient Monitoring
+                    element: <InpatientMonitoring />
+                },
             ]
         },
         {
@@ -475,9 +479,17 @@ export default function Router() {
           element: <RequestLog />,
         },
         {
-          path: 'custormer-service/final-request',
+          path: 'custormer-service/request/detail/:id',
+          element: <RequestLogDetail />,
+        },
+        {
+          path: 'custormer-service/final-log',
           element: <FinalLog />,
         },
+        {
+          path: 'custormer-service/final-log/detail/:id',
+          element: <FinalLogDetail />,
+        },
       ],
     },
     // {
@@ -594,6 +606,8 @@ const LaboratoriumResult       = Loadable(lazy(() => import('../pages/CaseManage
 const LaboratoriumResultClaims = Loadable(lazy(() => import('../pages/CaseManagement/LaboratoriumResult/Claim')))
 const DetailLabResultForm      = Loadable(lazy(() => import('../pages/CaseManagement/LaboratoriumResult/Components/DetailLabResultForm')))
 const DetailLabResultList      = Loadable(lazy(() => import('../pages/CaseManagement/LaboratoriumResult/Components/DetailLabResultList')))
+// Inpatient Monitoring
+const InpatientMonitoring = Loadable(lazy(() => import('../pages/CaseManagement/InpatientMonitoring/Index')))
 
 
 /**
@@ -601,7 +615,13 @@ const DetailLabResultList      = Loadable(lazy(() => import('../pages/CaseManage
  */
 // Request 
 const RequestLog    = Loadable(lazy(() => import('../pages/CustomerService/Request/Index')))
+const RequestLogDetail  = Loadable(lazy(() => import('../pages/CustomerService/Request/Detail')))
+// Final LOG
 const FinalLog      = Loadable(lazy(() => import('../pages/CustomerService/FinalLog/Index')))
+const FinalLogDetail      = Loadable(lazy(() => import('../pages/CustomerService/FinalLog/Detail')))
+
+
+
 
 const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
 const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));

frontend/dashboard/src/utils/formatTime.ts

@@ -35,3 +35,9 @@ export function fPostFormat(date: Date | string | number) {
 export function fDateOnly(date: Date | string | number) {
   return format(new Date(date), 'yyyy-MM-dd');
 }
+
+export function toTitleCase(str: string | null) {
+  return str.replace(/\w\S*/g, function(txt) {
+      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+  });
+}