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

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

@@ -124,6 +124,13 @@ class ClaimReportController extends Controller
                         ->where('claim_request_files.claim_request_id', '=', $claimRequestId)
                         ->get();
         $results['request_files'] = $request_files;
+        $documents = DB::table('files')
+                                ->where('fileable_type', 'App\Models\ClaimRequest')
+                                ->where('fileable_id', $claimRequestId)
+                                ->select('original_name', \DB::raw("CONCAT('" . env('APP_URL') . "/storage/', path) as path"), 'type')
+                                ->orderBy('id', 'desc')
+                                ->get();
+        $results['documents'] = $documents;
 
         return Helper::responseJson($results);
     }

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

@@ -51,7 +51,13 @@ class ClaimRequestController extends Controller
               
                 $code = $this->getNextCode();        
                 $member = Member::find($member_id);
-                $newClaimRequest = ClaimRequestService::storeClaimRequest(code: $code, member: $member, paymentType: 'reimbursement', serviceCode: $request->service_code[$key]);
+                $newClaimRequest = ClaimRequestService::storeClaimRequest(
+                    row: [], 
+                    code: $code, 
+                    member: $member, 
+                    paymentType: 'reimbursement', 
+                    serviceCode: $request->service_code[$key], 
+                );
         
                 ClaimRequested::dispatch($newClaimRequest);
                  // Log History
@@ -62,6 +68,19 @@ class ClaimRequestController extends Controller
                     'system_origin' => 'client-portal'
                 ]);
 
+                // Claim Log
+                DB::table('claim_logs')
+                ->insert([
+                    'claim_request_id' => $newClaimRequest->id,
+                    'status' => 'requested',
+                    'date' => date('Y-m-d H:i:s'),
+                    'description' => "Claim Requested for Member : {$member->member_id} - ({$member->full_name})",
+                    'system_origin' => 'hospital-portal',
+                    'created_by' => auth()->user()->id,
+                    'created_at' => date('Y-m-d H:i:s'),
+                    'updated_at'=> date('Y-m-d H:i:s'),
+                ]);
+
                 if ($request->hasFile('laboratorium')) {
                     foreach ($request->laboratorium[$key] as $file) {
                         $pathFile = File::storeFile('claim-result', $newClaimRequest->id, $file);

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

@@ -68,7 +68,13 @@ class ClaimRequestController extends Controller
         ]);
         $code = $this->getNextCode();
         $member = Member::find($request->member_id);
-        $newClaimRequest = ClaimRequestService::storeClaimRequest(code: $code, member: $member, paymentType: 'reimbursement', serviceCode: $request->service_code);
+        $newClaimRequest = ClaimRequestService::storeClaimRequest(
+            row: [], 
+            code: $code, 
+            member: $member, 
+            paymentType: 'reimbursement', 
+            serviceCode: $request->service_code
+        );
 
         ClaimRequested::dispatch($newClaimRequest);
 
@@ -80,6 +86,20 @@ class ClaimRequestController extends Controller
             'system_origin' => 'hospital-portal'
         ]);
 
+        // Claim Log
+        DB::table('claim_logs')
+        ->insert([
+            'claim_request_id' => $newClaimRequest->id,
+            'status' => 'requested',
+            'date' => date('Y-m-d H:i:s'),
+            'description' => "Claim Requested for Member : {$member->member_id} - ({$member->full_name})",
+            'system_origin' => 'hospital-portal',
+            'created_by' => auth()->user()->id,
+            'created_at' => date('Y-m-d H:i:s'),
+            'updated_at'=> date('Y-m-d H:i:s'),
+        ]);
+
+
         if ($request->hasFile('result_files')) {
             foreach ($request->result_files as $file) {
                 $pathFile = File::storeFile('claim-result', $newClaimRequest->id, $file);

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

@@ -12,9 +12,14 @@ use App\Services\ClaimService;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
+use Modules\HospitalPortal\Helpers\ApiResponse;
+use Illuminate\Support\Facades\Validator;
 use Modules\Internal\Transformers\ClaimShowResource;
+use Modules\Internal\Transformers\ClaimEditResource;
 use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;
 use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
+use Illuminate\Support\Facades\DB;
+
 use PDF;
 
 class ClaimController extends Controller
@@ -23,22 +28,35 @@ class ClaimController extends Controller
      * Display a listing of the resource.
      * @return Renderable
      */
-    public function index()
+    public function index(Request $request)
     {
         $claims = Claim::with([
-                            'member',
+            'member',
-                            'diagnoses' => function ($diagnosis) {
+            'member.currentCorporate',
-                                return $diagnosis->where('type', 'primary');
+            'member.currentCorporate.currentPolicy',
-                            },
+            'member.currentPlan',
-                            'diagnoses.icd',
+            'diagnoses' => function ($diagnosis) {
-                            'plan', 
+                $diagnosis->where('type', 'primary');
-                            'benefit',
+            },
-                            'claimRequest',
+            'diagnoses.icd',
-                            'claimRequest.service'
+            'benefit',
-                        ])
+            'claimRequest',
-                        ->where('status', '!=', 'requested') // penjagaan agar approve baru masuk ke claim management
+            'claimRequest.service',
-                        ->latest()
+        ])
-                        ->paginate(10);
+        ->when($request->search, function ($q, $search) {
+            $q->where(function ($subQuery) use ($search) {
+                $subQuery->whereHas('claimRequest', function ($claimRequest) use ($search) {
+                    $claimRequest->where('code', 'LIKE', "%" . $search . "%");
+                })
+                ->orWhereHas('member', function ($member) use ($search) {
+                    $member->where('name', 'LIKE', "%" . $search . "%");
+                });
+            });
+        })
+        ->where('status', '!=', 'requested') // Penjagaan agar approve baru masuk ke claim management
+        ->latest()
+        ->paginate(10);
+        
 
         return response()->json($claims);
     }
@@ -129,7 +147,32 @@ class ClaimController extends Controller
      */
     public function edit($id)
     {
-        return view('internal::edit');
+        $claim = Claim::query()
+                ->with([
+                    'member', 
+                    'plan',
+                    'member.currentPlan', 
+                    'member.currentPlan.benefits',
+                    'member.currentCorporate',
+                    'member.currentPolicy',
+                    // 'diagnosis',
+                    'diagnoses',
+                    'diagnoses.icd',
+                    'benefit',
+                    'files',
+                    'claimRequest',
+                    'claimRequest.files',
+                    'items',
+                    'items.claim_itemable',
+                    'encounters',
+                    'encounters.doctors',
+                    'encounters.primaryDiagnoses',
+                    'encounters.primaryDiagnoses.diagnosis',
+                    'encounters.healthcare'
+                    ])
+                ->findOrFail($id);
+
+        return Helper::responseJson(ClaimEditResource::make($claim));
     }
 
     /**
@@ -140,7 +183,42 @@ class ClaimController extends Controller
      */
     public function update(Request $request, $id)
     {
-        //
+        $customMessages = [
+            'required' => 'Kolom :attribute wajib diisi.',
+            'numeric' => 'Kolom :attribute harus berupa angka.',
+        ];
+
+        $data = [
+            'benefit_desc' => $request->benefit_desc,
+            'amount_incurred' => $request->amount_incurred,
+            'amount_approved' => $request->amount_approved,
+            'amount_not_approved' => $request->amount_not_approved,
+            'excess_paid' => $request->excess_paid,
+        ];
+        
+        $validator = Validator::make($request->all(), [
+            'benefit_desc' => 'required',
+            'amount_incurred' => 'required|numeric',
+            'amount_approved' => 'required|numeric',
+            'amount_not_approved' => 'required|numeric',
+            'excess_paid' => 'required|numeric',
+        ], $customMessages);
+        
+        if ($validator->fails()) {
+            return ApiResponse::apiResponse('Bad Request', $data, $validator->errors(), 400);
+        }
+        
+        // Validasi berhasil, lanjutkan dengan pembaruan data
+        $claim = Claim::findOrFail($id);
+        $claim->fill([
+            'benefit_desc' => $request->benefit_desc,
+            'amount_incurred' => $request->amount_incurred,
+            'amount_approved' => $request->amount_approved,
+            'amount_not_approved' => $request->amount_not_approved,
+            'excess_paid' => $request->excess_paid,
+        ])->save();
+        
+        return $claim;    
     }
 
     /**
@@ -327,7 +405,6 @@ class ClaimController extends Controller
         // ->latest()
         ->get()->toArray();
         foreach ($claims as $index => $row){
-            dd($row);
             $rowData = [
                '', // Count of Usage
                $row['code'], // Claim Number
@@ -450,4 +527,92 @@ class ClaimController extends Controller
             "file_url" => url('files/Benefit Usage Report.xlsx')
         ]);
     }
+
+    public function getDetailClaims($claim_id)
+    {
+        $customer_data = DB::table('claim_requests')
+                    ->leftJoin('claims', 'claim_requests.id', '=', 'claims.claim_request_id')
+                    ->leftJoin('members', 'claim_requests.member_id', '=', 'members.id')
+                    ->leftJoin('corporate_employees', 'members.id', '=', 'corporate_employees.member_id')
+                    ->leftJoin('corporates', 'corporate_employees.corporate_id', '=', 'corporates.id')
+                    ->where('claim_requests.id', '=', $claim_id)
+                    ->select(
+                        'claim_requests.code',
+                        'claim_requests.submission_date',
+                        'claims.status',
+                        'members.name',
+                        'members.payor_id',
+                        'members.member_id',
+                        'claim_requests.payment_type',
+                        'corporates.name AS coporate_name',                        
+                    )
+                    ->first();
+        $results['customer_data'] = $customer_data;
+
+        $documents = DB::table('files')
+                                ->where('fileable_type', 'App\Models\ClaimRequest')
+                                ->where('fileable_id', $claim_id)
+                                ->select('original_name', \DB::raw("CONCAT('" . env('APP_URL') . "/storage/', path) as path"), 'type')
+                                ->orderBy('id', 'desc')
+                                ->get();
+        $results['documents'] = $documents;
+
+        $request_documents = DB::table('claim_request_files')
+        ->where('claim_request_id', $claim_id)
+        ->get();
+        $results['request_documents'] = $request_documents;
+
+        return Helper::responseJson($results);
+    }
+
+    public function requestDocuments(Request $request)
+    {
+        $request->validate([
+            'claim_id' => 'required',
+            'note' => 'required',
+        ]);
+
+        $condition = $request->input('condition');
+        $diagnosis = $request->input('diagnosis');
+        $result = $request->input('result');
+        $note = $request->input('note');
+
+        $dataToInsert = [];
+        if ($condition) {
+            $dataToInsert[] = [
+                'claim_request_id' => $request->claim_id,
+                'date' => date('Y-m-d H:i:s'),
+                'type' => 'claim-kondisi',
+                'description' => $note,
+                'created_by' =>auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at' => date('Y-m-d H:i:s'),
+            ];
+        }
+        if ($diagnosis) {
+            $dataToInsert[] = [
+                'claim_request_id' => $request->claim_id,
+                'date' => date('Y-m-d H:i:s'),
+                'type' => 'claim-diagnosis',
+                'description' => $note,
+                'created_by' =>auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at' => date('Y-m-d H:i:s'),
+            ];
+        }
+        if ($result) {
+            $dataToInsert[] = [
+                'claim_request_id' => $request->claim_id,
+                'date' => date('Y-m-d H:i:s'),
+                'type' => 'claim-result',
+                'description' => $note,
+                'created_by' =>auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at' => date('Y-m-d H:i:s'),
+            ];
+        }
+        DB::table('claim_request_files')->insert($dataToInsert);      
+
+        return Helper::responseJson([]);
+    }
 }

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

@@ -15,9 +15,13 @@ use Modules\Internal\Transformers\ClaimRequestShowResource;
 use Illuminate\Support\Facades\Storage;
 use App\Services\ClaimRequestService;
 use App\Exceptions\ImportRowException;
+use App\Events\ClaimRequested;
+
 
 use App\Models\File;
 use App\Models\FilesMcu;
+use Illuminate\Support\Facades\DB;
+use App\Models\Member;
 
 class ClaimRequestController extends Controller
 {
@@ -85,7 +89,7 @@ class ClaimRequestController extends Controller
             'files',
             'member',
             'claim',
-            'claim.organization',
+            'organization',
         ]);
 
         return Helper::responseJson(data: ClaimRequestShowResource::make($claimRequest));
@@ -109,30 +113,38 @@ class ClaimRequestController extends Controller
      */
     public function update(Request $request, $id)
     {
-        $claim_id = ClaimRequest::find($id)->claim_id;
+        $claimRequest = ClaimRequest::findOrFail($id);
-        $organization_id = Organization::where('code', $request->provider_code)->first();
+        $claimRequest->load([
-        if (!$organization_id) {
+            'histories' => function ($history) {
+                $history->latest();
+            },
+            'files',
+            'member',
+            'claim',
+            'organization',
+        ]);
+        $organization = Organization::where('code', $request->provider_code)->first();
+        if (!$organization) {
             return response()->json(['error' => true, 'message' => 'Data tidak ditemukan'], 404);
         }
 
-        $newClaimRequest = ClaimRequestService::updateClaimRequest(code: $code, member: $member, paymentType: 'reimbursement', serviceCode: $request->service_code);
+        $updateClaimRequest = ClaimRequestService::updateClaimRequest(organization_id: $organization->id, claim_request_id: $id);
-
+     
-        ClaimRequested::dispatch($newClaimRequest);
+        ClaimRequested::dispatch($updateClaimRequest);
-
         // Log History
-        $newClaimRequest->histories()->create([
+        $updateClaimRequest->histories()->create([
             'title' => 'Update Claim Requested',
-            'description' => "Update Claim Requested for Member : {$member->member_id} - ({$member->full_name})",
+            'description' => "Update Claim Requested for Member : {$claimRequest->member->member_id} - ({$claimRequest->member->full_name})",
-            'type' => 'info',
+            'type' => 'update',
-            'system_origin' => 'hospital-portal'
+            'system_origin' => 'prime-center'
         ]);
 
         if ($request->hasFile('result_files')) {
             foreach ($request->result_files as $file) {
-                $pathFile = File::storeFile('claim-result', $newClaimRequest->id, $file);
+                $pathFile = File::storeFile('claim-result', $id, $file);
-                $newClaimRequest->files()->updateOrCreate([
+                $updateClaimRequest->files()->updateOrCreate([
                     'type' => 'claim-result',
-                    'name' => File::getFileName('claim-result', $newClaimRequest->id, $file),
+                    'name' => File::getFileName('claim-result', $id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
                     'path' => $pathFile,
@@ -144,10 +156,10 @@ class ClaimRequestController extends Controller
 
         if ($request->hasFile('diagnosa_files')) {
             foreach ($request->diagnosa_files as $file) {
-                $pathFile = File::storeFile('claim-diagnosis', $newClaimRequest->id, $file);
+                $pathFile = File::storeFile('claim-diagnosis', $id, $file);
-                $newClaimRequest->files()->updateOrCreate([
+                $updateClaimRequest->files()->updateOrCreate([
                     'type' => 'claim-diagnosis',
-                    'name' => File::getFileName('claim-diagnosis', $newClaimRequest->id, $file),
+                    'name' => File::getFileName('claim-diagnosis', $id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
                     'path' => $pathFile,
@@ -159,10 +171,10 @@ class ClaimRequestController extends Controller
 
         if ($request->hasFile('kondisi_files')) {
             foreach ($request->kondisi_files as $file) {
-                $pathFile = File::storeFile('claim-kondisi', $newClaimRequest->id, $file);
+                $pathFile = File::storeFile('claim-kondisi', $id, $file);
-                $newClaimRequest->files()->updateOrCreate([
+                $updateClaimRequest->files()->updateOrCreate([
                     'type' => 'claim-kondisi',
-                    'name' => File::getFileName('claim-kondisi', $newClaimRequest->id, $file),
+                    'name' => File::getFileName('claim-kondisi', $id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
                     'path' => $pathFile,
@@ -171,6 +183,13 @@ class ClaimRequestController extends Controller
                 ]);
             }
         }
+
+        return response()->json([
+            'error' => false, 
+            'message' => 'Update succses', 
+            'data' =>  $updateClaimRequest], 
+        200);
+
     }
 
     /**
@@ -208,6 +227,19 @@ class ClaimRequestController extends Controller
                 'system_origin' => 'primecenter'
             ]);
 
+            // Claim Log
+            DB::table('claim_logs')
+            ->insert([
+                'claim_request_id' => $id,
+                'status' => 'reviewed',
+                'date' => date('Y-m-d H:i:s'),
+                'description' => "Claim Requested Successfully Reviewed",
+                'system_origin' => 'prime-center',
+                'created_by' => auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at'=> date('Y-m-d H:i:s'),
+            ]);
+
         } catch (\Exception $e) {
             return $e->getMessage();;
         }
@@ -308,17 +340,18 @@ class ClaimRequestController extends Controller
                             'Ingest Code' => $e->getCode(),
                             'Ingest Note' => $e->getMessage(),
                         ]), $sheet->getName());
-                    } catch (\Exception $e) {
+                    } 
-                        // throw new \Exception($e);
+                    // catch (\Exception $e) {
-                        // Write Server Error to File
+                    //     // throw new \Exception($e);
-                        // $import->read($fileRead);
+                    //     // Write Server Error to File
-                        // $import->write($fileWrite, 'xsls');
+                    //     // $import->read($fileRead);
-                        dd($e);
+                    //     // $import->write($fileWrite, 'xsls');
-                        $import->addArrayToRow(array_merge($row_data, [
+                    //     dd( $e->getMessage());
-                            'Ingest Code' => 500,
+                    //     $import->addArrayToRow(array_merge($row_data, [
-                            'Ingest Note' => env('APP_DEBUG') ? $e->getMessage() : 'Server Error',
+                    //         'Ingest Code' => 500,
-                        ]), $sheet->getName());
+                    //         'Ingest Note' => env('APP_DEBUG') ? $e->getMessage() : 'Server Error',
-                    }
+                    //     ]), $sheet->getName());
+                    // }
                 }
             }
         }
@@ -336,4 +369,112 @@ class ClaimRequestController extends Controller
             ]
         ];
     }
+
+    public function claimRequestDetail($claimRequestId)
+    {
+        $status = DB::table('claim_requests')
+                    ->leftJoin('claims', 'claim_requests.id', '=', 'claims.claim_request_id')
+                    ->leftJoin('members', 'claim_requests.member_id', '=', 'members.id')
+                    ->leftJoin('corporate_employees', 'members.id', '=', 'corporate_employees.member_id')
+                    ->leftJoin('corporate_divisions', 'corporate_employees.division_id', '=', 'corporate_divisions.id')
+                    ->where('claim_requests.id', '=', $claimRequestId)
+                    ->select(
+                        'claim_requests.submission_date',
+                        'claim_requests.code',  
+                        DB::raw('
+                            CASE 
+                                WHEN claim_requests.status = "requested" THEN "requested"
+                                WHEN claim_requests.status = "approved" AND claims.status = "approved" THEN "approved"
+                                WHEN claim_requests.status = "approved" AND claims.status = "declined" THEN "declined"
+                                WHEN claim_requests.status = "approved" AND claims.status = "disbrusmented" THEN "disbrusmented"
+                                /*WHEN claim_requests.status = "approved" AND claims.status = "received" THEN "pending"*/
+                                WHEN claim_requests.status = "approved" AND claims.status = "received" THEN "reviewed"
+                                ELSE "" 
+                            END AS status
+                        ')
+                    )
+                    ->first();
+        $results['status'] = $status;
+        $timeline = DB::table('claim_logs')
+                        ->where('claim_logs.claim_request_id', '=', $claimRequestId)
+                        ->select(
+                            DB::raw('
+                                CASE
+                                    WHEN claim_logs.status = "requested" THEN "Request"
+                                    WHEN claim_logs.status = "reviewed" THEN "Review"
+                                    WHEN claim_logs.status = "approved" THEN "Approval"
+                                    ELSE "-"
+                                END AS txt_status
+                            '),
+                            DB::raw('
+                                CASE
+                                    WHEN claim_logs.status = "requested" THEN "#159C9C"
+                                    WHEN claim_logs.status = "reviewed" THEN "#0C53B7"
+                                    WHEN claim_logs.status = "approved" THEN "#229A16"
+                                    ELSE "-"
+                                END AS txt_status_color
+                            '),
+                            DB::raw('
+                                CASE
+                                    WHEN claim_logs.status = "requested" THEN "#00AB5529"
+                                    WHEN claim_logs.status = "reviewed" THEN "#1890FF29"
+                                    WHEN claim_logs.status = "approved" THEN "#54D62C29"
+                                    ELSE "-"
+                                END AS txt_status_backgroundColor
+                            '),
+                            'claim_logs.date',
+                            'claim_logs.description',
+                            'claim_logs.status'
+                        )
+                        ->orderBy('claim_logs.id', 'desc')
+                        ->get();
+        $results['timeline'] = $timeline;
+        $request_files = DB::table('claim_request_files')
+                        ->where('claim_request_files.claim_request_id', '=', $claimRequestId)
+                        ->get();
+        $results['request_files'] = $request_files;
+        $documents = DB::table('files')
+                                ->where('fileable_type', 'App\Models\ClaimRequest')
+                                ->where('fileable_id', $claimRequestId)
+                                ->select('original_name', \DB::raw("CONCAT('" . env('APP_URL') . "/storage/', path) as path"), 'type')
+                                ->orderBy('id', 'desc')
+                                ->get();
+        $results['documents'] = $documents;
+        $dialog_submits = DB::table('claim_requests')
+                            ->leftJoin('members', 'claim_requests.member_id','=', 'members.id')
+                            ->where('claim_requests.id', $claimRequestId)
+                            ->select('claim_requests.code', 'members.name', 'claim_requests.submission_date', 'claim_requests.service_code','claim_requests.status')
+                            ->first();
+        $results['dialog_submits'] = $dialog_submits;
+
+        return Helper::responseJson($results);
+    }
+
+    public function invoiceFiles(Request $request, $claim_id)
+    {
+        if ($request->hasFile('invoice_files')) {
+            foreach ($request->invoice_files as $file) {
+                $pathFile = File::storeFile('claim-invoice', $claim_id, $file);
+                File::updateOrCreate([
+                    'fileable_type'=>'App\Models\ClaimRequest',
+                    'fileable_id' => $claim_id,
+                    'type' => 'claim-invoice',
+                    'name' => File::getFileName('claim-invoice', $claim_id, $file),
+                    'original_name' => $file->getClientOriginalName(),
+                    'extension' => $file->getClientOriginalExtension(),
+                    'path' => $pathFile,
+                    'created_by' => auth()->user()->id,
+                    'updated_by' => auth()->user()->id,
+                ]);
+            }
+        }
+        if($request->date)
+        {
+            DB::table('claim_requests')
+            ->where('id', $claim_id)
+            ->update(['invoice_date' => $request->date]);
+
+        }
+        return Helper::responseJson(data: $request->toArray(), message: 'Invoice Success Uploaded');
+    }
 }

Modules/Internal/Routes/api.php

@@ -129,7 +129,7 @@ Route::prefix('internal')->group(function () {
 
         Route::get('corporates/{corporate_id}/formulariums', [CorporateFormulariumController::class, 'index']);
         Route::get('corporates/{corporate_id}/formulariums/{formularium_id}', [CorporateFormulariumController::class, 'show']);
-        Route::get('corporates/{corporate_id}/formulariums/create', [CorporateFormulariumController::class, 'create']);
+        Route::get('corporates/{corporate_id}/formulariums-create', [CorporateFormulariumController::class, 'create']);
         Route::post('corporates/{corporate_id}/formulariums', [CorporateFormulariumController::class, 'store']);
         Route::get('corporates/{corporate_id}/formulariums/list', [CorporateFormulariumController::class, 'generateFormulariumList']);
         Route::post('corporates/{corporate_id}/formulariums/import', [CorporateFormulariumController::class, 'import']);
@@ -193,8 +193,12 @@ Route::prefix('internal')->group(function () {
         Route::post('claims/{id}/re-open', [ClaimController::class, 'reOpen'])->name('claim.re-open');
         Route::post('claims', [ClaimController::class, 'store']);
         Route::get('claims/{id}', [ClaimController::class, 'show']);
+        Route::put('claims/{id}', [ClaimController::class, 'update']);
+        Route::get('claims/{id}/edit', [ClaimController::class, 'edit']);
         Route::post('check-limit', [ClaimController::class, 'checkLimit']);
         Route::get('claims/1/data-claim', [ClaimController::class, 'dataClaimReport']);
+        Route::get('claims/detail/{id}', [ClaimController::class, 'getDetailClaims']);
+        Route::post('claims/request-documents', [ClaimController::class, 'requestDocuments']);
 
         Route::get('search-organizations', [OrganizationController::class, 'searchOrganization']);
         Route::get('search-specialities', [SpecialityController::class, 'searchSpeciality']);
@@ -218,6 +222,8 @@ Route::prefix('internal')->group(function () {
         Route::get('claim-requests/{id}', [ClaimRequestController::class, 'show'])->name('claim-requests.show');
         Route::put('claim-requests/{id}', [ClaimRequestController::class, 'update'])->name('claim-requests.update');
         Route::post('claim-requests/import', [ClaimRequestController::class, 'importClaim'])->name('claim-requests.importClaim');
+        Route::get('claim-requests/detail/{id}', [ClaimRequestController::class, 'claimRequestDetail']);
+        Route::post('claim-requests/{id}/invoice-files', [ClaimRequestController::class, 'invoiceFiles']);
     });
 
     Route::get('province', [ProvinceController::class, 'index']);

Modules/Internal/Transformers/ClaimEditResource.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Modules\Internal\Transformers;
+
+use App\Models\Benefit;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ClaimEditResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        $value = parent::toArray($request);
+        $data['id'] = $value['id'];
+        $data['plan_id'] = $value['plan'] ? $value['plan']['code'] : '-';
+        $data['payor_id'] = $value['member'] ? $value['member']['current_corporate']['payor_id'] : '-';
+        $data['corporate_id'] = $value['member'] ? $value['member']['current_corporate']['code'] : '-';
+        $data['policy_number'] = $value['member'] ? $value['member']['current_policy']['code'] : '-';
+        $data['member_id'] = $value['member'] ? $value['member']['member_id'] : '-';
+        // $data['benefit_code'] = $value['benefit'] ? $value['benefit']['code'] : '-';
+        // $data['benefit_desc'] = $value['benefit'] ? $value['benefit']['description'] : '-';
+        $data['benefit_code'] = $value['benefit_code'];
+        $data['benefit_desc'] = $value['benefit_desc'];
+        $data['amount_incurred'] = $value['amount_incurred'];
+        $data['amount_approved'] = $value['amount_approved'];
+        $data['amount_not_approved'] = $value['amount_not_approved'];
+        $data['excess_paid'] = $value['excess_paid'];
+
+        return $data;
+    }
+}

app/Models/Claim.php

@@ -31,7 +31,13 @@ class Claim extends Model
         'benefit_id',
         'organization_id',
         'status',
-        'service_code'
+        'service_code',
+        'benefit_code',
+        'benefit_desc',
+        'amount_incurred',
+        'amount_approved',
+        'amount_not_approved',
+        'excess_paid',
     ];
 
     protected $hidden = [

app/Models/ClaimRequest.php

@@ -26,6 +26,7 @@ class ClaimRequest extends Model
         'policy_id',
         'status',
         'claim_id',
+        'organization_id',
         'code'
     ];
 
@@ -45,6 +46,8 @@ class ClaimRequest extends Model
         "MEMBER ID"                     => "member_id",
         "MEMBER NAME"                   => "member_name",
         "RECORD TYPE (P/D)"             => "record_type",
+        "BENEFIT CODE"                  => "benefit_code",
+        "BENEFIT DESC"                  => "benefit_desc",
         "CLAIM TYPE"                    => "claim_type",
         "CLAIM PROCESS STATUS"          => "status",
         "CLIENT CLAIM ID"               => "client_claim_id",
@@ -63,7 +66,7 @@ class ClaimRequest extends Model
         "TOT AMT NOT APPROVED"          => "tot_amt_not_approved",
         "TOT EXCESS PAID"               => "tot_excess_paid",
         "REMARKS"                       => "remarks",
-        "SECONDARY DIAGNOSIS CODE"      => "secondary_diagnosis_code",
+        "SECONDARY DIAGNOSIS CODE"      => "secondary_diagnosis",
         "APPROVED DATE"                 => "approved_date",
         "APPROVED BY"                   => "approved_by",
         "DATE RECEIVED"                 => "data_received",
@@ -233,6 +236,11 @@ class ClaimRequest extends Model
         return $this->morphMany(ClaimHistory::class, 'historiable');
     }
 
+    public function organization()
+    {
+        return $this->belongsTo(Organization::class, 'organization_id');
+    }
+
     public function member()
     {
         return $this->belongsTo(Member::class, 'member_id', 'id');

app/Models/File.php

@@ -43,6 +43,7 @@ class File extends Model
         'claim-result' => 'claim/',
         'claim-diagnosis' => 'claim/',
         'claim-kondisi' => 'claim/',
+        'claim-invoice' => 'claim/',
         'docs' => 'docs/',
     ];
 

app/Models/Organization.php

@@ -103,4 +103,8 @@ class Organization extends Model
     {
         return $this->hasMany(Claim::class, 'organization_id', 'id');
     }
+    public function claim_request()
+    {
+        return $this->hasMany(ClaimRequest::class, 'organization_id', 'id');
+    }
 }

app/Services/ClaimRequestService.php

@@ -11,7 +11,6 @@ use App\Helpers\Helper;
 use App\Models\Icd;
 use App\Models\Member;
 use Carbon\Carbon;
-
 use App\Exceptions\ImportRowException;
 use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
 
@@ -21,9 +20,20 @@ use Str;
 
 class ClaimRequestService{
 
-    public static function storeClaimRequest($code, $member, $paymentType, $serviceCode, $submissionDate = null, $status = 'requested')
+    public static function storeClaimRequest($row = null, $code, $member, $paymentType, $serviceCode, $submissionDate = null, $status = 'requested', $organization_code = null)
     {
-        try {
+        // try {
+            $organization = False;
+            if($organization_code){
+                $organization = Organization::where('code', $organization_code)->first();
+                if (!$organization){
+                    throw new ImportRowException(__('Code Provider Tidak ditemukan', [
+                        'attribute' => 'provider_code',
+                        'code' => $row['provider_code']
+                    ]), 403, null, $row);
+                }
+            };
+
             DB::beginTransaction();
 
             $claimRequestData = [
@@ -34,6 +44,7 @@ class ClaimRequestService{
                 'payment_type' => $paymentType,
                 'service_code' => $serviceCode,
                 'policy_id' => $member->currentPolicy->id ?? null,
+                'organization_id' => $organization ? $organization->id : 0,
             ];
 
             $claimRequest = ClaimRequest::create($claimRequestData);
@@ -41,11 +52,11 @@ class ClaimRequestService{
             DB::commit();
 
             return $claimRequest;
-        } catch (\Exception $error) {
+        // } catch (\Exception $error) {
-            DB::rollBack();
+        //     DB::rollBack();
 
-            throw new \Exception($error);
+        //     throw new \Exception($error);
-        }
+        // }
     }
 
     public static function storeClaimManagement($row, $member, $claim_request_id){
@@ -66,6 +77,12 @@ class ClaimRequestService{
                 'currency' => 'IDR',
                 'plan_id' => $member->currentPlan->id,
                 'total_claim' => $row['tot_amt_insurred'],
+                'benefit_code' => $row['benefit_code'],
+                'benefit_desc' => $row['benefit_desc'],
+                'amount_incurred' => $row['tot_amt_insurred'],
+                'amount_approved' => $row['tot_amt_approved'],
+                'amount_not_approved' => $row['tot_amt_not_approved'],
+                'excess_paid' => $row['tot_excess_paid'],
                 'claim_request_id' => $claim_request_id,
                 'organization_id' => $organization ? $organization->id : NULL,
                 'status' => 'requested'
@@ -90,17 +107,14 @@ class ClaimRequestService{
         }
     }
 
-    public static function updateClaimRequest(){
+    public static function updateClaimRequest($organization_id, $claim_request_id){
         try {
             $data = [
-                'member_id' => $member->id,
+                'organization_id' => $organization_id
-                'currency' => 'IDR',
-                'plan_id' => $member->currentPlan->id,
-                'total_claim' => $row['tot_amt_insurred'],
-                'claim_request_id' => $claim_request_id,
-                'organization_id' => $organization ? $organization->id : NULL,
-                'status' => 'requested'
             ];
+            DB::commit();
+            $update = ClaimRequest::where('id', $claim_request_id)->update($data);
+            return ClaimRequest::find($claim_request_id);
 
         } catch (\Exception $error) {
             DB::rollBack();
@@ -124,12 +138,22 @@ class ClaimRequestService{
                 throw new ImportRowException(__('Member Tidak ditemukan'), 0, null, $row);
             };
             $code = $row['client_claim_id'];
+            $organization_id = $row['provider_code'];
             $submissionDate = Helper::formatDateDB($row['admission_date']);
             $paymentType = $row['claim_type'];
             $status = $row['status'];
             $serviceCode = $row['coverage_type'];
             
-            $newClaimRequest = $this->storeClaimRequest(code: $code, member: $member, paymentType: $paymentType, serviceCode: $serviceCode, submissionDate: $submissionDate, status: $status);
+            $newClaimRequest = $this->storeClaimRequest(
+                row: $row,
+                code: $code,
+                member: $member, 
+                paymentType: $paymentType, 
+                serviceCode: $serviceCode, 
+                submissionDate: $submissionDate, 
+                status: $status, 
+                organization_code: $organization_id
+            );
             
             $newlyCreatedID = $newClaimRequest->id;
 
@@ -145,6 +169,7 @@ class ClaimRequestService{
 
             $claim_request_data = $row;
 
+            dd($row);
             // dd($claim_request_data['admission_date']);
 
             $this->validatePlanRow($claim_request_data);

database/migrations/2023_10_11_131156_create_claim_logs_table.php

@@ -19,7 +19,7 @@ return new class extends Migration
             $table->string('status', 255);
             $table->dateTime('date');
             $table->text('description')->nullable();
-            $table->text('device')->nullable();
+            $table->text('system_origin')->nullable();
             $table->bigInteger('created_by');
             $table->timestamps();
         });

database/migrations/2023_10_25_095323_add_column_organizations_to_claim_request.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('claim_requests', function (Blueprint $table) {
+            $table->integer('organization_id')->after('claim_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('claim_request', function (Blueprint $table) {
+            $table->dropColumn('organization_id');
+        });
+    }
+};

database/migrations/2023_10_25_150556_add_column_to_claims.php

@@ -0,0 +1,42 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('claims', function (Blueprint $table) {
+            $table->string('benefit_code')->after('organization_id');
+            $table->string('benefit_desc')->after('benefit_code');
+            $table->integer('amount_incurred')->after('benefit_desc');
+            $table->integer('amount_approved')->after('amount_incurred');
+            $table->integer('amount_not_approved')->after('amount_approved');
+            $table->integer('excess_paid')->after('amount_not_approved');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('claims', function (Blueprint $table) {
+            $table->dropColumn('benefit_code');
+            $table->dropColumn('benefit_desc');
+            $table->dropColumn('amount_incurred');
+            $table->dropColumn('amount_approved');
+            $table->dropColumn('amount_not_approved');
+            $table->dropColumn('excess_paid');
+        });
+    }
+};

database/migrations/2023_10_26_085839_add_column_invoice_date_to_claim_requests.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('claim_requests', function (Blueprint $table) {
+            $table->dateTime('invoice_date')->nullable()->after('claim_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('claim_requests', function (Blueprint $table) {
+            $table->dropColumn('invoice_date');
+        });
+    }
+};

frontend/client-portal/src/pages/ClaimReport/Detail.tsx

@@ -20,7 +20,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 
 // ----------------------------------------------------------------------
 
-export default function UserProfile() {
+export default function Detail() {
   const navigate = useNavigate();
   const { themeStretch } = useSettings();
   const [data, setData] = useState();

frontend/client-portal/src/pages/ClaimReport/DetailTimeline.tsx

@@ -13,6 +13,8 @@ import AddIcon from '@mui/icons-material/Add';
 import Iconify from '../../components/Iconify';
 import { useEffect, useState } from 'react';
 import { format } from 'date-fns';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import DescriptionIcon from '@mui/icons-material/Description';
 
 const Item1 = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -37,10 +39,12 @@ const Item2 = styled(Paper)(({ theme }) => ({
 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]);
@@ -65,8 +69,8 @@ export default function NoOppositeContent({data}) {
           <TimelineContent spacing={3}>
           	<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
           		<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
-            		<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
+            		<Stack direction="row" sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
-        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
+        				  <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}}>
@@ -81,11 +85,13 @@ export default function NoOppositeContent({data}) {
           					<Button variant="outlined" color="primary" startIcon={< AddIcon/>}>
           				    	<Typography variant="button" display="block">
                         {dataRequestFile.type === 'claim-diagnosis' ? 
-                          'Dokumen Diagnosa'
+                          'Diagnosis'
                         : dataRequestFile.type === 'claim-kondisi' ? 
-                          'Dokumen Kondisi'
+                          'Condition'
                         : dataRequestFile.type === 'claim-result' ?
-                          'Dokumen Hasil Penunjang'
+                          'Supporting Result'
+                        : dataRequestFile.type === 'claim-invoice' ?
+                          'Invoice'
                         : ''}
                         </Typography>
           				    </Button>
@@ -95,6 +101,43 @@ export default function NoOppositeContent({data}) {
                 ) : ''}
     			   </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/@types/claims.ts

@@ -1,3 +1,4 @@
+import { Benefit } from "./corporates";
 import { Member } from "./member";
 
 export type ClaimRequest = {
@@ -17,12 +18,46 @@ export type ClaimRequest = {
     }
   };
 
+export type Claims = {
+    id: number;
+    code: string;
+    plan: Plan;
+    payor_id: string;
+    corporate_id: string;
+    policy_number: string;
+    benefit_desc: string;
+    member: Member;
+    benefit: Benefit | boolean;
+    status: string;
+    claim_request: ClaimRequest;
+};
+
+export type ClaimsEdit = {
+  id: number;
+  plan_id: string;
+  payor_id: string;
+  corporate_id: string;
+  policy_number: string;
+  member_id: string;
+  benefit_code: string;
+  benefit_desc: string;
+  amount_incurred: number;
+  amount_approved: number;
+  amount_not_approved: number;
+  excess_paid: number;
+}
+
 export type Files = {
     name: string;
     url: string;
     path: string;
 }
 
+export type Plan = {
+  code: string;
+}
+
+
 export type Organizations = {
   id: number;
   code: string;
@@ -46,4 +81,11 @@ export type Organizations = {
   merchant_key: string;
   image_url: string;
   region_groups: string;
-};
+};
+
+export type Import = {
+  result_file: {
+    url: string,
+    name: string,
+  }
+}

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

@@ -5,6 +5,7 @@ export type Corporate = {
   code: string;
   name?: string;
   welcome_message?: string;
+  payor_id: string;
   help_text?: string;
   logo?: any;
   logo_url?: string;

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

@@ -1,5 +1,7 @@
 // ----------------------------------------------------------------------
 
+import { Corporate, Plan } from "./corporates";
+
 export type Member = {
   id: string,
   member_id: string,
@@ -18,4 +20,6 @@ export type Member = {
   relation_with_principal: string,
   bpjs_class: string,
   active: string,
+  current_plan: Plan,
+  current_corporate: Corporate,
 };

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

@@ -90,6 +90,13 @@ const navConfig = [
 
         ],
       },
+      {
+        title: 'MASTER',
+        children: [
+          { title: 'Diagnosis', path: '/master/diagnosis' },
+
+        ],
+      },
       {
         title: 'USER MANAGEMENT',
         path: '/users',

frontend/dashboard/src/pages/ClaimRequests/Detail.tsx

@@ -0,0 +1,300 @@
+// 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 { id } = useParams();
+
+    useEffect(() => {
+        axios
+        .get('/claim-requests/detail/'+id)
+        .then((response) => {
+            setData(response.data);
+            setDataDialog(response.data.data.dialog_submits);
+            
+        })
+        .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);
+        
+    };
+    
+    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>
+                <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=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, 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'}} >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'}} 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/ClaimRequests/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/ClaimRequests/DetailTimeline.tsx

@@ -0,0 +1,147 @@
+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} 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 } from 'react';
+import { format } from 'date-fns';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import DescriptionIcon from '@mui/icons-material/Description';
+
+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]);
+  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 ? (
+                  <>
+                  {requestFile?.map((dataRequestFile, index) => (
+          				<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
+          					<Typography variant="body2" gutterBottom fontWeight="bold">{dataRequestFile.description}</Typography>
+          					<Button variant="outlined" color="primary" startIcon={< AddIcon/>}>
+          				    	<Typography variant="button" display="block">
+                        {dataRequestFile.type === 'claim-diagnosis' ? 
+                          'Diagnosis'
+                        : dataRequestFile.type === 'claim-kondisi' ? 
+                          'Condition'
+                        : dataRequestFile.type === 'claim-result' ?
+                          'Supporting Result'
+                        : dataRequestFile.type === 'claim-invoice' ?
+                          'Invoice'
+                        : ''}
+                        </Typography>
+          				    </Button>
+          				</Stack>
+                  ))}
+                  </>
+                ) : ''}
+    			   </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/ClaimRequests/Form.tsx

@@ -6,6 +6,8 @@ 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,
@@ -55,7 +57,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
   const { enqueueSnackbar } = useSnackbar();
 
   const EditClaimSchema = Yup.object().shape({
-    organization_id: Yup.string().required('Name is required'),
+    organization_id: Yup.string().required('Code Provider is required'),
   });
 
   const defaultValues = useMemo(
@@ -66,19 +68,21 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
       date: currentClaim?.submission_date ? fDateTimesecond(currentClaim?.submission_date) : '-',
       claim_method: currentClaim?.payment_type || '-',
       service_type: currentClaim?.service_code || '-',
-      organization_id: currentClaim?.claim?.organization?.code || '-',
+      organization_id: currentClaim?.organization?.code || '-',
     }),
     [currentClaim]
   );
 
   useEffect(() => {
-    console.log(currentClaim, 'er')
     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]);
 
 
@@ -150,6 +154,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
   // 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]) {
@@ -169,12 +174,19 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
-      const formData = new FormData();
+      // const formData = new FormData();
-      formData.append('result_files', fileHasilPenunjangs);
+      // formData.append('result_files', fileHasilPenunjangs);
-      formData.append('diagnosa_files', fileDiagnosaInput);
+      // formData.append('diagnosa_files', fileDiagnosaInput);
-      formData.append('kondisi_files', fileKondisiInput);
+      // formData.append('kondisi_files', fileKondisiInput);
-      formData.append('provider_code', data.organization_id);
+      // formData.append('provider_code', data.organization_id);
-      formData.append('_method', 'PUT');
+      // 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.post(`/claim-requests/${data.id}`, formData);
       

frontend/dashboard/src/pages/ClaimRequests/List.tsx

@@ -47,12 +47,13 @@ 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 LoadingButton from '@/theme/overrides/LoadingButton';
 
 export default function List() {
   const { themeColorPresets } = useSettings();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
+  const [importResult, setImportResult] = useState<Import>(null);
 
   const navigate = useNavigate()
 
@@ -213,7 +214,7 @@ export default function List() {
                 }}
               >
                 <MenuItem onClick={handleImportButton}>Import</MenuItem>
-                <MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template test</MenuItem>
+                <MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template</MenuItem>
                 <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
               </Menu>
             <Button
@@ -257,6 +258,16 @@ export default function List() {
             </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>
     );
   }
@@ -357,7 +368,7 @@ export default function List() {
                   <EditOutlinedIcon />
                   Edit
                 </MenuItem>
-                <MenuItem onClick={() => ''}>
+                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
                   <FindInPageOutlinedIcon />
                   Detail
                 </MenuItem>

frontend/dashboard/src/pages/Claims/CreateUpdate.tsx

@@ -28,31 +28,26 @@ export default function ClaimsCreateUpdate() {
 
   useEffect(() => {
     if (isEdit) {
-      axios.get('/claims/' + id).then((res) => {
+      axios.get(`/claims/${id}/edit`).then((res) => {
-        // console.log('Yeet', res.data);
+        console.log('Yeet', res.data.data);
-        setCurrentClaim(res.data);
+        setCurrentClaim(res.data.data);
-      });
+      });;
+
     }
   }, [id]);
 
   
   return (
-    <Page title={isEdit ? `Edit Claim : ${currentClaim?.id}` : "Create New Claim"}>
+    <Page title={'Edit Claim Management'}>
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Stack direction="row" alignItems="center">
           <HeaderBreadcrumbs
-            heading={
+            heading={`Edit Claim Management`}
-              !isEdit
-                ? 'Create New Claim'
-                : `Edit Claim : ${currentClaim?.code}`
-            }
             links={[
               { name: 'Dashboard', href: '/dashboard' },
               {
-                name: 'Claim',
+                name: 'Claim Management',
-                href: '/claims',
               },
-              { name: !isEdit ? 'Create' : currentClaim?.id ?? '' },
             ]}
           />
         </Stack>

frontend/dashboard/src/pages/Claims/Detail.tsx

@@ -0,0 +1,424 @@
+// 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 FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+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 [customerData, setCustomerData] = useState(null);
+    const [documentData, setDocumentData] = useState(null);
+    const [requestDocumentData, setRequestDocumentData] = useState(null);
+
+    const { id } = useParams();
+
+    useEffect(() => {
+        axios
+        .get('/claims/detail/'+id)
+        .then((response) => {
+            setCustomerData(response.data.data.customer_data);
+            setDocumentData(response.data.data.documents);
+            setRequestDocumentData(response.data.data.request_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);
+        
+    };
+
+    function toTitleCase(str) {
+        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 [openDialogRequest, setOpenDialogRequest] = useState(false);
+    const handleCloseDialogUpdate = () => {
+        setOpenDialogRequest(false);
+    }
+
+    const [conditionChecked, setConditionChecked] = useState(true);
+    const [diagnosisChecked, setDiagnosisChecked] = useState(false);
+    const [supportingResultChecked, setSupportingResultChecked] = useState(false);
+
+    const handleConditionChange = (event) => {
+        setConditionChecked(event.target.checked);
+    };
+
+    const handleDiagnosisChange = (event) => {
+        setDiagnosisChecked(event.target.checked);
+    };
+
+    const handleSupportingResultChange = (event) => {
+        setSupportingResultChecked(event.target.checked);
+    };
+
+    const [noteField, setNoteField] = useState('');
+    const [noteFieldError, setNoteFieldError] = useState('');
+    const isRequiredFieldsFilled = () => {
+        return noteField.trim() !== '';
+    };
+
+    const handelRequestDocument = () => {
+        const dataForm = {
+            claim_id: id,
+            condition: conditionChecked,
+            diagnosis: diagnosisChecked,
+            result: supportingResultChecked,
+            note: noteField,
+        }
+        axios
+        .post('/claims/request-documents', dataForm)
+        .then((response) => {
+            enqueueSnackbar('Success Request Document', { variant: 'success' });
+            setOpenDialogRequest(false);
+            window.location.reload();
+        })
+        .catch((error) => {
+            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
+        })
+    }
+    
+    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}}>{(customerData && customerData.code ? customerData.code : '')}</Typography>
+            {customerData ? (
+                <Stack direction="column" spacing={1} alignItems="center" sx={{marginLeft:'auto'}}>
+                    <Stack direction="row" spacing={2}>
+                        <Typography variant="body2" sx={{color: '#757575'}}>Status</Typography>
+                        <Typography variant="body2" fontWeight="bold">{(customerData && customerData.status) ? toTitleCase(customerData.status) : ''}</Typography>
+                    </Stack>
+                    <Stack direction="row" spacing={2}>
+                        <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
+                        <Typography variant="body2" fontWeight="bold">{(customerData && customerData.submission_date) ? format(new Date(customerData.submission_date), "d MMM yyyy") : ''}</Typography>
+                    </Stack>
+                </Stack>
+            ) : ''}
+            </Stack>
+            <Grid container spacing={2}>
+            {customerData ? (
+                <Grid item xs={12} md={12}>
+                <Card sx={{padding:2}}  >
+                    <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Summary of Customer Data</Typography>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Full Name</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.name}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.payor_id}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.member_id}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Type</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.payment_type)}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Corporate Name</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.coporate_name)}</Typography>
+                    </Stack>
+                </Card>
+                </Grid>
+            ) : ''}
+            {documentData ? (
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Additional Documents</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => setOpenDialogRequest(true)}>
+                                <Typography variant="button" display="block">Request Document</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                            {documentData?.map((documentType, index) => (
+                                <Stack direction="column" spacing={2} key={index}>
+                                    <Typography variant="Subtitle2" gutterBottom>
+                                    {documentType.type === 'claim-diagnosis' ? 
+                                        'Diagnosis'
+                                    : documentType.type === 'claim-kondisi' ? 
+                                        'Condition'
+                                    : documentType.type === 'claim-result' ?
+                                        'Supporting Result'
+                                    : documentType.type === 'claim-invoice' ?
+                                        'Invoice'
+                                    : ''}
+                                    </Typography>
+                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                    <InsertDriveFileIcon />
+                                    <a
+                                        href={documentType.path}
+                                        style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
+                                        target="_blank"
+                                    >
+                                        <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+                                    </a>
+                                    </Stack>
+                                </Stack>
+                            ))}
+                        </Stack>
+                        {requestDocumentData && requestDocumentData.length > 0 ? (
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Request Documents</Typography>
+                        ) : ''}
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                            {requestDocumentData?.map((documentType, index) => (
+                                <Stack direction="column" spacing={2} key={index}>
+                                    
+                                    <Stack direction="row" spacing={1} sx={{color: '#637381'}}>
+                                    <InsertDriveFileIcon />
+                                    <Typography variant="body2" gutterBottom>
+                                    {documentType.type === 'claim-diagnosis' ? 
+                                        'Diagnosis'
+                                    : documentType.type === 'claim-kondisi' ? 
+                                        'Condition'
+                                    : documentType.type === 'claim-result' ?
+                                        'Supporting Result'
+                                    : documentType.type === 'claim-invoice' ?
+                                        'Invoice'
+                                    : ''}
+                                    </Typography>
+                                    </Stack>
+                                </Stack>
+                            ))}
+                        </Stack>
+                        <Dialog open={openDialogRequest} onClose={handleCloseDialogUpdate} fullWidth={true}>
+                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+                            <Stack direction="row" alignItems="center" justifyContent="space-between">
+                                <Stack direction="row" alignItems='center' spacing={1}>
+                                    <Typography variant="h6">Request Document</Typography>
+                                </Stack>
+                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                                    <CloseIcon />
+                                </IconButton>
+                            </Stack>
+                            </DialogTitle>
+                            <DialogContent>
+                            <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
+                                <FormGroup>
+                                    <FormControlLabel
+                                        control={<Checkbox checked={conditionChecked} onChange={handleConditionChange} />}
+                                        label="Condition Document"
+                                    />
+                                    <FormControlLabel
+                                        control={<Checkbox checked={diagnosisChecked} onChange={handleDiagnosisChange} />}
+                                        label="Diagnosis Document"
+                                    />
+                                    <FormControlLabel
+                                        control={<Checkbox checked={supportingResultChecked} onChange={handleSupportingResultChange} />}
+                                        label="Supporting Result Document"
+                                    />
+                                </FormGroup>
+                                <TextField
+                                    label="Note"
+                                    required
+                                    value={noteField ? noteField : ''}
+                                    onChange={(e) =>{
+                                    setNoteField(e.target.value);
+                                    setNoteFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
+                                    }}
+                                    fullWidth
+                                    inputProps={{ maxLength: 50 }}
+                                    error={!!noteFieldError}
+                                    helperText={noteFieldError}
+                                />
+                            </Stack>
+                            </DialogContent>
+                            <DialogActions>
+                            <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+                            <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsFilled()} onClick={() => handelRequestDocument()}>Request</Button>
+                            </DialogActions>
+                        </Dialog>
+                    </Card>
+                </Grid>
+            ): ''}
+                <Grid item xs={12} spacing={2}>
+                    <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'}}>
+                                <Typography variant="button" display="block">History</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnostic History</Typography>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnosis Summary</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
+                                <Typography variant="button" display="block">Diagnosis</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Service</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
+                                <Typography variant="button" display="block">Service</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Client Benefit Configuration</Typography>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} md={12}>
+                    <Stack direction="row" padding={4}>
+                        <>
+                            <Button variant="outlined" sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}} >Decline</Button>
+                            <Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
+                        </>
+                    </Stack>
+                </Grid>
+            </Grid>
+        </Container>
+        </Page>
+    );
+}

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

@@ -24,16 +24,18 @@ import {
   ListItemAvatar,
   Avatar,
   ListItemText,
+  Card,
 } from '@mui/material';
 import Iconify from '../../components/Iconify';
 import { LoadingButton } from '@mui/lab';
 import { fCurrency } from '../../utils/formatNumber';
 import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
 import { Add, DeleteOutline } from '@mui/icons-material';
+import { ClaimsEdit } from '@/@types/claims';
 
 type Props = {
   isEdit: boolean;
-  currentClaim?: any;
+  currentClaim?: ClaimsEdit;
 };
 
 export default function ClaimForm({ isEdit, currentClaim }: Props) {
@@ -42,18 +44,27 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
   const { enqueueSnackbar } = useSnackbar();
 
   const NewCorporateSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
+    benefit_desc: Yup.string().required('Benefit Desc is required'),
-    code: Yup.string().required('Corporate Code is required'),
+    amount_incurred: Yup.string().required('Amount Incurred is required'),
-    active: Yup.boolean().required('Corporate Status is required'),
+    amount_approved: Yup.number().required('Amount Approved is required'),
+    amount_not_approved: Yup.number().required('Amount Not Approved is required'),
+    excess_paid: Yup.number().required('Excess Paid is required'),
     // file: Yup.boolean().required('Corporate Status is required'),
   });
 
   const defaultValues = useMemo(
     () => ({
-      member: currentClaim?.member || {},
+      plan_id: currentClaim?.plan_id || null,
+      payor_id: currentClaim?.payor_id || null,
+      corporate_id: currentClaim?.corporate_id || null,
+      policy_number: currentClaim?.policy_number || null,
       member_id: currentClaim?.member_id || null,
-      diagnosis_id: currentClaim?.diagnosis_id || null,
+      benefit_code: currentClaim?.benefit_code || '-',
-      total_claim: currentClaim?.total_claim || 0,
+      benefit_desc: currentClaim?.benefit_desc || '-',
+      amount_incurred: currentClaim?.amount_incurred || 0,
+      amount_approved: currentClaim?.amount_approved || 0,
+      amount_not_approved: currentClaim?.amount_not_approved || 0,
+      excess_paid: currentClaim?.excess_paid || 0,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentClaim]
@@ -88,11 +99,11 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
     console.log('defaultValues', defaultValues);
     if (isEdit && currentClaim) {
       reset(defaultValues);
-      setMember(defaultValues.member)
+      // setMember(defaultValues.member)
     }
     if (!isEdit) {
       reset(defaultValues);
-      setMember(defaultValues.member)
+      // setMember(defaultValues.member)
     }
   }, [isEdit, currentClaim]);
 
@@ -105,13 +116,13 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
     console.log('currentFiles', getValues('uploaded_files'));
   };
 
-  const memberSelected = (member) => {
+  // const memberSelected = (member) => {
-    setMember(member)
+  //   setMember(member)
-  };
+  // };
 
-  const checkLimit = async () => {
+  // const checkLimit = async () => {
-    console.log('CHECKING LIMIT');
+  //   console.log('CHECKING LIMIT');
-  };
+  // };
 
   const onSubmit = async (data: any) => {
     try {
@@ -122,7 +133,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
       }
       reset();
       enqueueSnackbar(
-        !isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
+        !isEdit ? 'Organizations Created Successfully!' : 'Claim Udpated Successfully!',
         { variant: 'success' }
       );
       navigate('/claims');
@@ -154,443 +165,86 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
   const headStyle = {};
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-      <Stack spacing={3}>
+        <Card sx={{paddingX:2, paddingY:3}}>
-        <Typography variant="h6">Member</Typography>
+          <Grid container spacing={2}>
-
+            {/* Baris ke 1 */}
-        <Stack spacing={2} direction="row">
+            <Grid item xs={3}>
-          <Grid item xs={12}>
+              <Typography marginBottom={2} variant="subtitle1">Plan ID*</Typography>
-            <RHFTextField
+              <RHFTextField name="plan_id" disabled />
-              name="member_id"
+            </Grid>
-              label="Member"
+            <Grid item xs={3}>
-              variant="outlined"
+              <Typography marginBottom={2} variant="subtitle1">Payor ID*</Typography>
-              fullWidth
+              <RHFTextField name="payor_id" disabled />
-              value={member?.name || ''}
+            </Grid>
-              InputProps={{
+            <Grid item xs={3}>
-                readOnly: true,
+              <Typography marginBottom={2} variant="subtitle1">Corporate ID*</Typography>
-              }}
+              <RHFTextField name="corporate_id"disabled />
-              onClick={() => {
+            </Grid>
-                if (!isEdit) setIsMemberDialogOpen(true);
+            <Grid item xs={3}>
-                if (isEdit) enqueueSnackbar('Cannot Change Member', { variant: 'error' });
+              <Typography marginBottom={2} variant="subtitle1">Policy Number*</Typography>
-              }}
+              <RHFTextField name="policy_number" disabled />
-            />
-          </Grid>
-          {/* <Grid item xs={2}>
-                    <Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
-                      setIsMemberDialogOpen(true)
-                    }}>
-                      {member ? 'Change' : 'Search'}
-                    </Button>
-                  </Grid> */}
-        </Stack>
-
-        {member?.id && (
-          <Stack>
-            <Grid container spacing={2}>
-              <Grid item xs={12} md={6}>
-                <Table border="light-700">
-                  <TableBody>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Name
-                      </TableCell>
-                      <TableCell align="left">{member?.full_name}</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        DOB
-                      </TableCell>
-                      <TableCell align="left">
-                        {member?.birth_date} ({member?.age + ' years'})
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Marital Status
-                      </TableCell>
-                      <TableCell align="left">{member?.marital_status}</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Record Type
-                      </TableCell>
-                      <TableCell align="left">{member?.record_type}</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Principal ID
-                      </TableCell>
-                      <TableCell align="left">
-                        {member?.principal_id} (
-                        {member?.relation_with_principal})
-                      </TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </Grid>
-              <Grid item xs={12} md={6}>
-                <Table border="light-700">
-                  <TableBody>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Plan
-                      </TableCell>
-                      <TableCell align="left">{member?.current_plan?.code}</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Active
-                      </TableCell>
-                      <TableCell align="left">
-                        {member?.current_plan?.start} -{' '}
-                        {member?.current_plan?.end} (Active)
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Corporate Limit
-                      </TableCell>
-                      <TableCell align="left">
-                        {fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell style={headStyle} align="left">
-                        Plan Usage
-                      </TableCell>
-                      <TableCell align="left">
-                        {fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
-                      </TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </Grid>
             </Grid>
-          </Stack>
-        )}
 
-        <Controller
+            {/* Baris ke 2 */}
-          name="benefit"
+            <Grid item xs={3}>
-          control={control}
+              <Typography marginBottom={2} variant="subtitle1">Memeber ID*</Typography>
-          render={({ field: { onChange, value } }) => (
+              <RHFTextField name="member_id" disabled />
-            <Autocomplete
+            </Grid>
-              options={memberBenefits}
+            <Grid item xs={3}>
-              getOptionLabel={(option) =>
+              <Typography marginBottom={2} variant="subtitle1">Benefit Code*</Typography>
-                option ? `#${option.id} (${option.code}) ${option.description}` : ''
+              <RHFTextField name="benefit_code" disabled />
-              }
+            </Grid>
-              value={value || ''}
+            <Grid item xs={6}>
-              onChange={(event: any, newValue: any) => {
+              <Typography marginBottom={2} variant="subtitle1">Benefit Desc*</Typography>
-                setValue('benefit_id', newValue?.id);
+              <RHFTextField name="benefit_desc" label="Benefit Desc" />
-                onChange(newValue);
+            </Grid>
-              }}
-              renderInput={(params) => (
-                <TextField
-                  name="benefit"
-                  {...params}
-                  label="Benefit"
-                  variant="outlined"
-                  fullWidth
-                  // onKeyPress={(event) => {
-                  //   if (event.key === 'Enter')
-                  //     searchDiagnosis(event.target.value)
-                  // }}
-                />
-              )}
-            />
-          )}
-        />
 
-        <Controller
+            {/* Baris ke 3 */}
-          name="diagnosis"
+            <Grid item xs={3}>
-          control={control}
+              <Typography marginBottom={2} variant="subtitle1">Amount Incurred*</Typography>
-          render={({ field: { onChange, value } }) => (
+              <RHFTextField name="amount_incurred" label="Amount Incurred" type="number" />
-            <Autocomplete
+            </Grid>
-              options={diagnosisOption}
+            <Grid item xs={3}>
-              getOptionLabel={(option) => (option ? `(${option.code}) ${option.name}` : '')}
+              <Typography marginBottom={2} variant="subtitle1">Amount Approved*</Typography>
-              value={value || ''}
+              <RHFTextField name="amount_approved" label="Amount Approved" type="number" />
-              onChange={(event: any, newValue: any) => {
+            </Grid>
-                setValue('diagnosis_id', newValue?.id);
+            <Grid item xs={3}>
-                // setValue('diagnosis', newValue)
+              <Typography marginBottom={2} variant="subtitle1">Amount Not Approved*</Typography>
-                onChange(newValue);
+              <RHFTextField name="amount_not_approved" label="Amount Not Approved" type="number" />
-              }}
+            </Grid>
-              renderInput={(params) => (
+            <Grid item xs={3}>
-                <TextField
+              <Typography marginBottom={2} variant="subtitle1">Excess Paid*</Typography>
-                  name="diagnosis"
+              <RHFTextField name="excess_paid" label="Excess Paid*" type="number" />
-                  {...params}
+            </Grid>
-                  label="Diagnosis"
+          </Grid>
-                  variant="outlined"
+        </Card>
-                  fullWidth
+        <Grid container marginTop={2}>
-                  onKeyPress={(event) => {
+          <Grid item xs={12} md={12} >
-                    if (event.key === 'Enter') searchDiagnosis(event.target.value);
+          <Stack direction="row" alignItems="center" justifyContent="flex-end">
-                  }}
+              <Button
-                />
+                sx={{
-              )}
+                  margin: 1
-            />
-          )}
-        />
-
-        {isCheckingLimit && (
-          <Stack
-            sx={{
-              backgroundColor: 'gray',
-              paddingY: 1,
-              paddingX: 1.5,
-              mb: 2,
-              borderRadius: '3-xl',
-            }}
-          >
-            {/* Checking */}
-            <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-              <Iconify
-                icon="bxs:info-circle"
-                width={12}
-                height={13}
-                sx={{ color: '#424242', marginRight: '6px' }}
-              />
-              <Typography variant="caption" component="span">
-                Please Wait, Checking Eligibilty
-              </Typography>
-            </Typography>
-          </Stack>
-        )}
-        {false && isCheckingLimit == false && isEligible == null && (
-          <Stack
-            sx={{
-              backgroundColor: 'gray',
-              paddingY: 1,
-              paddingX: 1.5,
-              mb: 2,
-              borderRadius: '3-xl',
-            }}
-          >
-            {/* No Data Selected */}
-            <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-              <Iconify
-                icon="bxs:info-circle"
-                width={12}
-                height={13}
-                sx={{ color: '#424242', marginRight: '6px' }}
-              />
-              <Typography variant="caption" component="span">
-                Please Select Diagnosis !
-              </Typography>
-            </Typography>
-          </Stack>
-        )}
-        {!isCheckingLimit && isEligible !== null && isEligible && (
-          <Stack
-            sx={{
-              backgroundColor: '#B2E8E8',
-              paddingY: 1,
-              paddingX: 1.5,
-              mb: 2,
-              borderRadius: '3-xl',
-            }}
-          >
-            {/* Eligible */}
-            <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-              <Iconify
-                icon="bxs:lock-alt"
-                width={12}
-                height={13}
-                sx={{ color: '#424242', marginRight: '6px' }}
-              />
-              <Typography variant="caption" component="span">
-                Diagnosis is Eligible
-              </Typography>
-            </Typography>
-            <Typography sx={{ typography: 'caption', color: '#637381' }}>
-              125.000.000 / 125.000.000
-            </Typography>
-          </Stack>
-        )}
-        {!isCheckingLimit && isEligible !== null && !isEligible && (
-          <Stack
-            sx={{
-              backgroundColor: '#B2E8E8',
-              paddingY: 1,
-              paddingX: 1.5,
-              mb: 2,
-              borderRadius: '3-xl',
-            }}
-          >
-            {/* Not Eligible */}
-            {/* <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-              <Iconify
-                icon="bxs:lock-alt"
-                width={12}
-                height={13}
-                sx={{ color: '#424242', marginRight: '6px' }}
-              />
-              <Typography variant="caption" component="span">
-                Not Eligible
-              </Typography>
-            </Typography>
-            <Typography sx={{ typography: 'caption', color: '#637381' }}>
-              125.000.000 / 125.000.000
-            </Typography> */}
-          </Stack>
-        )}
-
-        <RHFTextField type="number" name="total_claim" label="Total Claim" />
-
-        {isEdit && (
-          <React.Fragment>
-            <Typography variant="h6">Documents</Typography>
-
-            <List>
-              {(getValues('uploaded_files.invoice') && getValues('uploaded_files.invoice').length
-                ? getValues('uploaded_files.invoice')
-                : []
-              ).map((file, index) => (
-                <ListItem
-                  secondaryAction={
-                    <IconButton edge="end" aria-label="delete">
-                      <DeleteOutline />
-                    </IconButton>
-                  }
-                >
-                  <ListItemAvatar>
-                    <Avatar>
-                      {/* <FileIcon /> */}
-                      I
-                    </Avatar>
-                  </ListItemAvatar>
-                  <ListItemText primary={file.name} secondary={file.type} />
-                </ListItem>
-              ))}
-            </List>
-            <Button
-              variant="outlined"
-              startIcon={<Add />}
-              component="label"
-              sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
-            >
-              Invoice
-              <input
-                name="invoice"
-                hidden
-                accept="image/*,application/pdf"
-                multiple
-                type="file"
-                onChange={(event) => {
-                  fileSelected(event, 'invoice');
                 }}
-              />
+                type="submit"
-            </Button>
+                variant="contained"
-            <List>
+                size="large"
-              {(getValues('uploaded_files.prescription') && getValues('uploaded_files.prescription').length
+                color='inherit'
-                ? getValues('uploaded_files.prescription')
+                onClick={() => navigate(`/claims`)}
-                : []
+              >
-              ).map((file, index) => (
+                Cancel
-                <ListItem
+              </Button>
-                  secondaryAction={
+              <LoadingButton
-                    <IconButton edge="end" aria-label="delete">
+                type="submit"
-                      <DeleteOutline />
+                variant="contained"
-                    </IconButton>
+                size="large"
-                  }
+                // fullWidth={true}
-                >
+                loading={isSubmitting}
-                  <ListItemAvatar>
+              >
-                    <Avatar>
+                Save
-                      {/* <FileIcon /> */}
+              </LoadingButton>
-                      P
+          </Stack>
-                    </Avatar>
+          </Grid>
-                  </ListItemAvatar>
+        </Grid>
-                  <ListItemText primary={file.name} secondary={file.type} />
+      </FormProvider>
-                </ListItem>
-              ))}
-            </List>
-            <Button
-              variant="outlined"
-              startIcon={<Add />}
-              component="label"
-              sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
-            >
-              Prescription
-              <input
-                name="prescription"
-                hidden
-                accept="image/*,application/pdf"
-                multiple
-                type="file"
-                onChange={(event) => {
-                  fileSelected(event, 'prescription');
-                }}
-              />
-            </Button>
-
-            <List>
-              {(getValues('uploaded_files.diagnosis') && getValues('uploaded_files.diagnosis').length
-                ? getValues('uploaded_files.diagnosis')
-                : []
-              ).map((file, index) => (
-                <ListItem
-                  secondaryAction={
-                    <IconButton edge="end" aria-label="delete">
-                      <DeleteOutline />
-                    </IconButton>
-                  }
-                >
-                  <ListItemAvatar>
-                    <Avatar>
-                      {/* <FileIcon /> */}
-                      DR
-                    </Avatar>
-                  </ListItemAvatar>
-                  <ListItemText primary={file.name} secondary={file.type} />
-                </ListItem>
-              ))}
-            </List>
-            <Button
-              variant="outlined"
-              startIcon={<Add />}
-              component="label"
-              sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
-            >
-              Doctor Result
-              <input
-                name="invoice"
-                hidden
-                accept="image/*,application/pdf"
-                multiple
-                type="file"
-                onChange={(event) => {
-                  fileSelected(event, 'diagnosis');
-                }}
-              />
-            </Button>
-          </React.Fragment>
-        )}
-
-        {isEligible === true ? (
-          <LoadingButton
-            onClick={handleSubmit(onSubmit)}
-            variant="contained"
-            color="success"
-            style={{ color: '#ffffff' }}
-            size="large"
-            fullWidth={true}
-            loading={isCheckingLimit}
-          >
-            Create Claim
-          </LoadingButton>
-        ) : (
-          <LoadingButton
-            onClick={checkLimit}
-            variant="outlined"
-            size="large"
-            fullWidth={true}
-            loading={isCheckingLimit}
-          >
-            Check Limit
-          </LoadingButton>
-        )}
-      </Stack>
-
-      <MemberSelectDialog
-        openDialog={isMemberDialogOpen}
-        setOpenDialog={setIsMemberDialogOpen}
-        onSelect={memberSelected}
-      ></MemberSelectDialog>
-    </FormProvider>
   );
 }

frontend/dashboard/src/pages/Claims/List.tsx

@@ -16,13 +16,10 @@ import {
   Menu,
   ButtonGroup,
   Tooltip,
+  TableHead,
 } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import AddIcon from '@mui/icons-material/Add';
 import AssessmentIcon from '@mui/icons-material/Assessment';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
@@ -36,6 +33,12 @@ import { Chip } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import { enqueueSnackbar } from 'notistack';
 import { fDate } from '../../utils/formatTime';
+import { Claims } from '@/@types/claims';
+import Label from '@/components/Label';
+import { capitalizeFirstLetter } from '@/utils/formatString';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import Edit from '@mui/icons-material/Edit';
+import { Download } from '@mui/icons-material';
 
 export default function List() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -84,10 +87,16 @@ export default function List() {
             fullWidth
             onChange={handleSearchChange}
             value={searchText}
+            placeholder='Search Code or Member ID...'
           />
-        <Tooltip title="Benefit Usage Report">
+           <Button
-            <Button variant="outlined" startIcon={<AssessmentIcon />}  sx={{ p: 1.8 }}  onClick={handleGetData}/>
+              variant="contained"
-        </Tooltip>
+              startIcon={<Download />}
+              onClick={() => handleGetData('DO')}
+              sx={{ p: 1.8 }}
+            >
+              Export
+            </Button>
         </Stack>
       </form>
     );
@@ -153,7 +162,7 @@ export default function List() {
   };
 
   // Called on every row to map the data to the columns
-  function createData(data: any): any {
+  function createData(data: Claims): Claims  {
     return {
       ...data,
     };
@@ -176,36 +185,37 @@ export default function List() {
           </TableCell> */}
           <TableCell align="left">{row.claim_request?.code}</TableCell>
           {/* <TableCell align="left">{row.code}</TableCell> */}
-          <TableCell align="left">{fDate(row.created_at)}</TableCell>
+          <TableCell align="left">{row.member?.current_plan?.code}</TableCell>
-          <TableCell align="left">{row.member?.full_name}</TableCell>
+          <TableCell align="left">{row.member?.current_corporate?.payor_id}</TableCell>
-          <TableCell align="left">{row.plan?.code}</TableCell>
+          <TableCell align="left">{row.member?.current_corporate?.code}</TableCell>
-          <TableCell align="left">{row.claim_request?.service?.name}</TableCell>
+          <TableCell align="left">{row.member?.current_corporate?.current_policy?.code}</TableCell>
-          <TableCell align="left">
+          <TableCell align="left">{row.member?.member_id}</TableCell>
-            ({row.diagnoses[0]?.icd?.code}) {row.diagnoses[0]?.icd?.name}
+          <TableCell align="left">{row.benefit_desc}</TableCell>
-          </TableCell>
+         
-          <TableCell align="left">{fCurrency(row.total_claim)}</TableCell>
           <TableCell align="center">
-            {row.status == 'draft' && (<Chip label='Draft' color="default" variant="outlined" />)}
+            {row.status == 'draft' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
-            {row.status == 'requested' && (<Chip label='Requested' color="primary" />)}
+            {row.status == 'requested' && (<Label color='primary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
-            {row.status == 'received' && (<Chip label='Received' color="success" variant='outlined' />)}
+            {row.status == 'received' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
-            {row.status == 'approved' && (<Chip label='Approved' color="success" />)}
+            {row.status == 'approved' && (<Label color='success' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
-            {row.status == 'postpone' && (<Chip label='Postpone' color="primary" variant="outlined" />)}
+            {row.status == 'postpone' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
-            {row.status == 'paid' && (<Chip label='Paid' color="warning" />)}
+            {row.status == 'paid' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
-            {row.status == 'declined' && (<Chip label='Declined' color="error" />)}
+            {row.status == 'declined' && (<Label color='error' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
           </TableCell>
 
-          <TableCell align="right">
+          <TableMoreMenu actions={
-            {['approved', 'paid'].includes(row.status) && (
+              <>
-            <Iconify icon="eva:eye-fill" onClick={(e) => {
+              <MenuItem onClick={() =>navigate(`/claims/edit/${row.id}`) }>
-                navigate('/claims/' + row.id);
+                <Edit />
-              }}></Iconify>
+                Edit
-            )}
+              </MenuItem>
-            {!['approved', 'paid'].includes(row.status) && (
+              <MenuItem onClick={() => navigate('/claims/detail/'+row.id+'') }>
-            <Iconify icon="eva:edit-outline" onClick={(e) => {
+                  <FindInPageOutlinedIcon />
-                navigate('/claims/' + row.id);
+                  Detail
-              }}></Iconify>
+              </MenuItem>
-            )}
+              </>
-          </TableCell>
+            } />
+
+          
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
@@ -230,41 +240,38 @@ export default function List() {
     return (
       <Table aria-label="collapsible table">
         {/* ------------------ TABLE HEADER ------------------ */}
-        <TableBody>
+        <TableHead>
           <TableRow>
             {/* <TableCell style={headStyle} align="left" /> */}
             <TableCell style={headStyle} align="left">
-              Code Request
+              Code
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Date
+              Plan ID
-            </TableCell>
-            {/* <TableCell style={headStyle} align="left">
-              Code Claim
-            </TableCell> */}
-            <TableCell style={headStyle} align="left">
-              Member Name
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Plan
+              Payor ID
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Benefit
+              Corporate ID
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Diagnosis
+              Policy Number
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Total Claim
+              Member ID
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Benefit Desc
             </TableCell>
             <TableCell style={headStyle} align="left">
               Status
             </TableCell>
-            <TableCell style={headStyle} align="right">
+            <TableCell style={headStyle} align="left">
-              Action
+              
             </TableCell>
           </TableRow>
-        </TableBody>
+        </TableHead>
         {/* ------------------ END TABLE HEADER ------------------ */}
 
         {/* ------------------ TABLE ROW ------------------ */}

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

@@ -70,6 +70,7 @@ export default function CorporateTabNavigations({ position }: Props) {
     // },
   ];
   useEffect(() => {
+    console.log(position);
     let currentIndex = mainTabItems.findIndex((item) => item.path === position);
     setCurrentTab(currentIndex);
   }, []);

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

@@ -283,8 +283,8 @@ export default function List(props: any) {
     id: number;
     status: number;
     code: string,
-    name: string, 
+    name: string,
-    rules: string,            
+    rules: string,
   };
   const plans = props?.data.map((plan: any) => {
     return {
@@ -576,32 +576,32 @@ export default function List(props: any) {
                 )}
             </TableCell>
 
-          <TableCell align="left">
+            <TableCell align="left">
-            <TableMoreMenu actions={
+                <TableMoreMenu actions={
-                <>
+                    <>
-                    <MenuItem onClick={() => setOpen(!open)}>
+                        <MenuItem onClick={() => setOpen(!open)}>
-                        <FindInPageOutlined />
+                            <FindInPageOutlined />
-                        Detail
+                            Detail
-                    </MenuItem>
+                        </MenuItem>
-                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
+                        <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
-                        <EditOutlined />
+                            <EditOutlined />
-                        Edit
+                            Edit
-                    </MenuItem>
+                        </MenuItem>
-                    <MenuItem onClick={() => handleActivate(true, { 
+                        <MenuItem onClick={() => handleActivate(true, {
-                        code: row.code,
+                            code: row.code,
-                        name: row.name, 
+                            name: row.name,
-                        rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
+                            rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
-                        id:row.id, 
+                            id:row.id,
-                        status: row.active,
+                            status: row.active,
-                        service: row.service_code
+                            service: row.service_code
-                        }) 
+                            })
-                      } >
+                        } >
-                        <CachedIcon />
+                            <CachedIcon />
-                        Update Status
+                            Update Status
-                    </MenuItem>
+                        </MenuItem>
-                </>
+                    </>
-            } />
+                } />
-          </TableCell>
+            </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
@@ -801,7 +801,7 @@ export default function List(props: any) {
 
   const onSubmit = async (row : any) => {
     try {
-      handleUpdate(dataValue.status, dataValue.id, row.reason) 
+      handleUpdate(dataValue.status, dataValue.id, row.reason)
     } catch (error: any) {
       console.log('data gagal');
     }
@@ -836,7 +836,7 @@ export default function List(props: any) {
     resolver: yupResolver(NewCorporateSchema),
   });
 
-  
+
   const {
       reset,
       handleSubmit,
@@ -924,7 +924,7 @@ export default function List(props: any) {
                 Cancel
             </Button>
 
-            {dataValue?.status == 1?  
+            {dataValue?.status == 1?
               <LoadingButton
                 sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
                 type="submit"
@@ -936,7 +936,7 @@ export default function List(props: any) {
               >
               Inactive
             </LoadingButton>
-            : 
+            :
             <LoadingButton
               sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
               type="submit"
@@ -948,12 +948,12 @@ export default function List(props: any) {
             >
             Active
           </LoadingButton>
-          
+
-            
+
             }
             </Stack>
         </Stack>
-        
+
         </FormProvider>
     </>
   );
@@ -1031,9 +1031,9 @@ export default function List(props: any) {
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
       </Card>
 
-      <DialogUpdateStatus 
+      <DialogUpdateStatus
         openDialog={isDialogOpen}
-        setOpenDialog={setDialogOpen} 
+        setOpenDialog={setDialogOpen}
         title={titles}
         data={dataValue}
         description={dataDescription}

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

@@ -44,7 +44,7 @@ export default function CorporateFormularium() {
       />
 
       <Card>
-        <CorporateTabNavigations position={'formularium'} />
+        <CorporateTabNavigations position={'formulariums'} />
         <List />
       </Card>
     </Page>

frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx

@@ -82,7 +82,6 @@ export default function CategoryDetail({props, formularium} : ParamsDetail) {
     } else {
       active = "1"
     }
-    console.log(corporate_id, id , active)
     axios
       .put(`/corporates/${corporate_id}/formulariums-update-status/${id}`, {
         active: active,

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

@@ -60,7 +60,7 @@ export default function CorporateFormulariumCreateForm() {
   const [dataDropdownData, setDataDropdownData] = React.useState<DetailCorpFormularium[] | null>(null)
   const loadDataDropdown = async () => {
     setDataDropdownLoading(true);
-    const resp = await axios.get(`corporates/${corporate_id}/formulariums/create`);
+    const resp = await axios.get(`corporates/${corporate_id}/formulariums-create`);
     console.log(resp.data);
     setDataDropdownLoading(false);
 

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

@@ -350,11 +350,11 @@ export default function HospitalList() {
             <Card sx={{padding:2}}  >
               <Stack direction='row' spacing={2}>
                 <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
-                <Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
               </Stack>
               <Stack direction='row' spacing={2}>
                 <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Hospital Name</Typography>
-                <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
               </Stack>
             </Card>
           </Stack>

frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx

@@ -16,27 +16,26 @@ export default function Divisions() {
   return (
     <Page title={ pageTitle }>
 
-      <HeaderBreadcrumbs
+        <HeaderBreadcrumbs
-        heading={ pageTitle }
+            heading={ pageTitle }
-        links={[
+            sx={{ px: 2 }}
-          {
+            links={[
-            name: 'Master',
+            {
-            href: '/master/diagnosis-template',
+                name: 'Master',
-          },
+                href: '/master/diagnosis',
-          {
+            },
-            name: 'Diagnosis Template',
+            {
-            href: '/master/diagnosis-template',
+                name: 'Diagnosis',
-          },
+                href: '/master/diagnosis',
-          {
+            },
-            name: 'Diagnosis',
+            {
-            href: '/master/diagnosis-template',
+                name: 'Diagnosis',
-          },
+                href: '/master/diagnosis',
-        ]}
+            },
-      />
+            ]}
-      
+        />
-      <Card>
+
         <List />
-      </Card>
     </Page>
   );
 }

frontend/dashboard/src/pages/Master/Diagnosis/List.tsx

@@ -7,7 +7,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
-import { Link, NavLink as RouterLink } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -17,13 +17,15 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import { Icd } from '../../../@types/diagnosis';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
 
 export default function List() {
-  const { themeStretch } = useSettings();
+    const navigate = useNavigate();
-  const { diagnosis_template_id } = useParams();
+    const { themeStretch } = useSettings();
-  const [searchParams, setSearchParams] = useSearchParams();
+    const { diagnosis_template_id } = useParams();
-  const [importResult, setImportResult] = useState(null);
+    const [searchParams, setSearchParams] = useSearchParams();
-  
+    const [importResult, setImportResult] = useState(null);
+
   function SearchInput(props: any) {
      // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
@@ -44,7 +46,7 @@ export default function List() {
     }, [searchParams])
 
     return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
         <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
       </form>
     );
@@ -55,7 +57,7 @@ export default function List() {
     // Create Button Menu
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+    const importForm = useRef<HTMLInputElement>(null)
     const [currentImportFileName, setCurrentImportFileName] = useState(null)
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -135,8 +137,8 @@ export default function List() {
           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" />
@@ -145,8 +147,8 @@ export default function List() {
           {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
           <Button
               id="import-button"
-              variant='outlined'
+              variant='contained'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+              startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
               aria-controls={createMenu ? 'basic-menu' : undefined}
               aria-haspopup="true"
               aria-expanded={createMenu ? 'true' : undefined}
@@ -186,7 +188,7 @@ export default function List() {
           </Button>
         </Stack>
         )}
-        {( importResult && 
+        {( 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>
@@ -220,7 +222,7 @@ export default function List() {
               let updatedModel = model;
               if (row.id == model.id) {
                 updatedModel.active = res.data.icd.active;
-              } 
+              }
               return updatedModel;
             }),
           });
@@ -240,15 +242,22 @@ export default function List() {
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
-          <TableCell align="left">{row.code}</TableCell>
+            <TableCell align="left"/>
-          <TableCell align="left">{row.name}</TableCell>
+            <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="right">
+            <TableCell align="left">{row.name}</TableCell>
-            {/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
+            <TableCell align="right">
-            <Link to={`/master/diagnosis/${row.id}/diagnosis-history`}>
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
-                <HistoryIcon />
+                    <TableMoreMenu actions={
-              </Link>
+                        <>
-          </TableCell>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}/diagnosis-history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
         </TableRow>
       </React.Fragment>
     );
@@ -301,22 +310,29 @@ export default function List() {
   useEffect(() => {
     loadDataTableData();
   }, [])
-  
+
   return (
     <Stack>
       <ImportForm />
 
-        <Card>
         {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
               <TableRow>
+                <TableCell align="left" />
                 <TableCell style={headStyle} align="left">Code</TableCell>
                 <TableCell style={headStyle} align="left">Description</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ?
               (
                 <TableBody>
@@ -325,7 +341,7 @@ export default function List() {
                   </TableRow>
                 </TableBody>
               ) : (
-                dataTableData.data.length == 0 ? 
+                dataTableData.data.length == 0 ?
                 (
                   <TableBody>
                     <TableRow>
@@ -342,9 +358,8 @@ export default function List() {
             )}
           </Table>
         </TableContainer>
-        
+
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
     </Stack>
   );
 }

frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx

@@ -24,8 +24,8 @@ export default function PlanCreate() {
   }, [configuredCorporateContext])
 
   const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
-  
+
-  
+
   const navigate = useNavigate();
 
   const isEdit = !!id;
@@ -48,6 +48,7 @@ export default function PlanCreate() {
   return (
     <Page title= "Master ICD - 10">
       <HeaderBreadcrumbs
+        sx={{ px: 2 }}
         heading={'Master ICD - 10'}
         links={[
           {

frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { LoadingButton } from "@mui/lab";
-import { Card, Grid, Stack, Typography } from "@mui/material";
+import { Box, Card, Grid, Stack, Typography } from "@mui/material";
 import { CorporatePlan } from "../../../../@types/corporates";
 import { FormProvider, RHFSwitch, RHFTextField } from "../../../../components/hook-form";
 import { useEffect, useMemo } from 'react';
@@ -9,6 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useSnackbar } from 'notistack';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from '../../../../utils/axios';
+import palette from '@/theme/palette';
 
 type Props = {
   isEdit: boolean;
@@ -68,11 +69,11 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
         enqueueSnackbar('Division created successfully', { variant: 'success' });
       })
       .then((res) => {
-        navigate('/master/diagnosis-template',  { replace: true });
+        navigate('/master/diagnosis',  { replace: true });
       })
       .catch(({ response }) => {
         if (response.status === 422) {
-          for (const [key, value] of Object.entries(response.data.errors)) { 
+          for (const [key, value] of Object.entries(response.data.errors)) {
             setError(key, { message: value[0] });
             enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
           }
@@ -88,7 +89,7 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
           enqueueSnackbar('Division updated successfully', { variant: 'success' });
         })
         .then((res) => {
-          navigate('/master/diagnosis-template' ,  { replace: true });
+          navigate('/master/diagnosis' ,  { replace: true });
         })
         .catch(({ response }) => {
           enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
@@ -98,31 +99,27 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
 
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-        <Grid container spacing={2}>
+        <Box sx={{ px: 2 }}>
-          <Grid item xs={8}>
+            <Grid container spacing={2}>
-            <Card sx={{ p: 2 }}>
+                <Grid item xs={8}>
-                <Stack spacing={3}>
+                    <Card sx={{ px: 3, py: 4 }}>
+                        <Stack spacing={6}>
 
-                  <Typography variant="h6">Detail</Typography>
+                        <Typography variant="h6" color={palette.light.primary.main}>Detail</Typography>
 
 
-                  <RHFTextField name="name" label="Name" />
+                        <RHFTextField name="name" label="Name" />
-                  <RHFTextField name="description" label="Description" />
+                        <RHFTextField name="description" label="Description" />
 
-                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                        <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
-                    { isEdit? 'Update' : 'Create' } 
+                            { isEdit? 'Update' : 'Create' }
-                  </LoadingButton>
+                        </LoadingButton>
 
-                </Stack>
+                        </Stack>
-            </Card>
+                    </Card>
-          </Grid>
+                </Grid>
-          {/* <Grid item xs={4}>
+            </Grid>
-            <Card sx={{ p:2 }}>
+        </Box>
-
-            <RHFSwitch name="active" label="Active" />
-              </Card>
-          </Grid> */}
-        </Grid>
       </FormProvider>
   );
 }

frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx

@@ -12,27 +12,26 @@ export default function Divisions() {
 
   const { corporate_id } = useParams();
 
-  const pageTitle = 'Diagnosis Template';
+  const pageTitle = 'Diagnosis';
   return (
     <Page title={ pageTitle }>
 
       <HeaderBreadcrumbs
+        sx={{ px: 2 }}
         heading={ pageTitle }
         links={[
           {
             name: 'Master',
-            href: '/master/diagnosis-template',
+            href: '/master/diagnosis',
           },
           {
-            name: 'Diagnosis Template',
+            name: 'Diagnosis',
-            href: '/master/diagnosis-template',
+            href: '/master/diagnosis',
           },
         ]}
       />
-      
+
-      <Card>
         <List />
-      </Card>
     </Page>
   );
 }

frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx

@@ -7,7 +7,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
-import { Link, NavLink as RouterLink } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../../hooks/useSettings';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -17,13 +17,16 @@ import { LaravelPaginatedData } from '../../../../@types/paginated-data';
 import { Icd } from '../../../../@types/diagnosis';
 import BasePagination from '../../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { EditOutlined, FindInPageOutlined } from '@mui/icons-material';
 
 export default function List() {
-  const { themeStretch } = useSettings();
+    const navigate = useNavigate();
-  const { corporate_id } = useParams();
+    const { themeStretch } = useSettings();
-  const [searchParams, setSearchParams] = useSearchParams();
+    const { corporate_id } = useParams();
-  const [importResult, setImportResult] = useState(null);
+    const [searchParams, setSearchParams] = useSearchParams();
-  
+    const [importResult, setImportResult] = useState(null);
+
   function SearchInput(props: any) {
      // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
@@ -44,7 +47,7 @@ export default function List() {
     }, [searchParams])
 
     return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
         <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
       </form>
     );
@@ -55,7 +58,7 @@ export default function List() {
     // Create Button Menu
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+    const importForm = useRef<HTMLInputElement>(null)
     const [currentImportFileName, setCurrentImportFileName] = useState(null)
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -130,8 +133,8 @@ export default function List() {
         })
     }
 
-    
+
-    
+
     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" />
@@ -139,17 +142,15 @@ export default function List() {
           <SearchInput onSearch={applyFilter}/>
           {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
           <Button
-              id="import-button"
+                id="import-button"
-              variant='outlined'
+                variant='contained'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
-              aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
-              aria-haspopup="true"
+                aria-haspopup="true"
-              aria-expanded={createMenu ? 'true' : undefined}
+                aria-expanded={createMenu ? 'true' : undefined}
-              
+                onClick={() => navigate(`/master/diagnosis/create`)}
             >
-               <Link to={`/master/diagnosis-template/create`} style={{ textDecoration: 'none', color: 'blue'}}>
+                Create
-                    Create
-                </Link>
             </Button>
             <Menu
               id="import-button"
@@ -161,7 +162,7 @@ export default function List() {
               }}
             >
               <MenuItem>
-               
+
               </MenuItem>
             </Menu>
         </Stack>
@@ -195,7 +196,7 @@ export default function List() {
               let updatedModel = model;
               if (row.id == model.id) {
                 updatedModel.active = res.data.icd.active;
-              } 
+              }
               return updatedModel;
             }),
           });
@@ -211,27 +212,30 @@ export default function List() {
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
-          <TableCell align="left">{row.name}</TableCell>
+            <TableCell align="left"/>
-          <TableCell align="left">{row.description ?? '-'}</TableCell>
+            <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="center">
+            <TableCell align="left">{row.description ?? '-'}</TableCell>
-            {/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
+            <TableCell align="center">
-            <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={`/master/diagnosis/${row.id}`}>
+                    <TableMoreMenu actions={
-                <Button variant="outlined" color="primary" size="small">
+                        <>
-                  Detail
+                            <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}`)}>
-                </Button>
+                                <FindInPageOutlined />
-              </Link>
+                                Detail
-              <Link to={`/master/diagnosis-template/${row.id}/edit`}>
+                            </MenuItem>
-                <Button variant="outlined" color="primary" size="small">
+                            <MenuItem onClick={() => navigate(`/master/diagnosis-template/${row.id}/edit`)} >
-                  Edit
+                                <EditOutlined />
-                </Button>
+                                Edit
-              </Link>
+                            </MenuItem>
-              <Link to={`/master/diagnosis-template/${row.id}/diagnosis-template-history`}>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis-template/${row.id}/diagnosis-template-history`)}>
-                <HistoryIcon />
+                                <HistoryIcon />
-              </Link>
+                                History
-            </Stack>
+                            </MenuItem>
-          </TableCell>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
         </TableRow>
       </React.Fragment>
     );
@@ -285,22 +289,29 @@ export default function List() {
   useEffect(() => {
     loadDataTableData();
   }, [])
-  
+
   return (
     <Stack>
-      <ImportForm />
+        <ImportForm />
 
-        <Card>
         {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
               <TableRow>
+                <TableCell align="left" />
                 <TableCell style={headStyle} align="left">Name</TableCell>
                 <TableCell style={headStyle} align="left">Description</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ?
               (
                 <TableBody>
@@ -309,7 +320,7 @@ export default function List() {
                   </TableRow>
                 </TableBody>
               ) : (
-                dataTableData.data.length == 0 ? 
+                dataTableData.data.length == 0 ?
                 (
                   <TableBody>
                     <TableRow>
@@ -326,9 +337,8 @@ export default function List() {
             )}
           </Table>
         </TableContainer>
-        
+
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
     </Stack>
   );
 }

frontend/dashboard/src/pages/Master/Drug/List.tsx

@@ -148,8 +148,8 @@ import {
                       handleCancelImportButton();
                       loadDataTableData();
                       setImportResult(response.data);
-                      console.log(response.data);
                       setImportLoading(false);
+                      enqueueSnackbar('Success Import Drugs', { variant: 'success' });
                       })
                       .catch((response) => {
                       enqueueSnackbar(

frontend/dashboard/src/routes/index.tsx

@@ -268,12 +268,12 @@ export default function Router() {
           element: <MasterHospitalsCreate />,
         },
         {
-          path: 'master/diagnosis-template/create',
+          path: 'master/diagnosis',
-          element: <MasterDiagnosisTemplateCreate />,
+          element: <MasterDiagnosisTemplate />,
         },
         {
-          path: 'master/diagnosis-template',
+          path: 'master/diagnosis/create',
-          element: <MasterDiagnosisTemplate />,
+          element: <MasterDiagnosisTemplateCreate />,
         },
         {
           path: 'master/diagnosis-template/:id/diagnosis-template-history',
@@ -401,6 +401,10 @@ export default function Router() {
           path: 'claim-requests/edit/:id',
           element: <ClaimRequestsCreate />,
         },
+        {
+          path: 'claim-requests/detail/:id',
+          element: <ClaimRequestsDetail />,
+        },
         {
           path: 'claims/create',
           element: <ClaimsCreate />,
@@ -409,6 +413,10 @@ export default function Router() {
           path: 'claims/edit/:id',
           element: <ClaimsCreate />,
         },
+        {
+          path: 'claims/detail/:id',
+          element: <ClaimsDetail />,
+        },
         {
           path: 'claims/:id',
           element: <ClaimShow />,
@@ -580,10 +588,12 @@ const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
 
 const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
 const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
+const ClaimsDetail = Loadable(lazy(() => import('../pages/Claims/Detail')));
 const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
 
 const ClaimRequests = Loadable(lazy(() => import('../pages/ClaimRequests/Index')));
 const ClaimRequestsCreate = Loadable(lazy(() => import('../pages/ClaimRequests/CreateUpdate')));
+const ClaimRequestsDetail = Loadable(lazy(() => import('../pages/ClaimRequests/Detail')));
 
 
 const Membership = Loadable(lazy(() => import('../pages/Service/Membership/index')));

frontend/hospital-portal/src/sections/dashboard/DetailTimeline.tsx

@@ -66,7 +66,7 @@ export default function NoOppositeContent({data}) {
           	<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
           		<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
             		<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
-        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
+        				  <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}}>

frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx

@@ -234,7 +234,7 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
         {/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
           <Typography variant="body1" sx={{fontWeight:'bold'}}>
-            Diagnosis Dokumen
+            Diagnosis Dokument
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack