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

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

@@ -6,6 +6,8 @@ use App\Helpers\Helper;
 use App\Http\Controllers\Controller;
 use App\Models\ClaimRequest;
 use Modules\Client\Transformers\ClaimReport\ShowResources;
+use Illuminate\Support\Facades\Crypt;
+use Illuminate\Support\Facades\DB;
 
 class ClaimReportController extends Controller
 {
@@ -25,6 +27,7 @@ class ClaimReportController extends Controller
                     $corporateEmployee->where('corporate_id', $corporateId);
                 });
             })
+            ->whereHas('claim', fn ($query) => $query->where('status', 'approved'))
             ->where('status', 'approved')
             ->get();
 
@@ -38,13 +41,148 @@ class ClaimReportController extends Controller
             ->where('status', 'approved')
             ->get();
 
+        $disbrusments = ClaimRequest::query()
+            ->whereHas('member', function ($query) use ($corporateId) {
+                $query->whereHas('employeds', function ($corporateEmployee) use ($corporateId) {
+                    $corporateEmployee->where('corporate_id', $corporateId);
+                });
+            })
+            ->whereHas('claim', fn ($query) => $query->where('status', 'disbrusmented'))
+            ->where('status', 'approved')
+            ->get();
+
         return Helper::responseJson([
             'requesteds' => count($requesteds),
             'approveds' => count($approveds),
-            'rejecteds' => count($rejecteds)
+            'rejecteds' => count($rejecteds),
+            'disbrusments' => count($disbrusments)
         ]);
     }
 
+    public function claimDetail($corporate_id, $claimRequestId)
+    {
+        $claimRequestId = Crypt::decrypt($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('corporate_employees.corporate_id', '=', $corporate_id)
+                    ->where('claim_requests.id', '=', $claimRequestId)
+                    ->select(
+                        'claim_requests.submission_date', 
+                        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;
+
+        return Helper::responseJson($results);
+    }
+
+    public function claimDetailHistory($corporate_id, $claimRequestId)
+    {
+        $claimRequestId = Crypt::decrypt($claimRequestId);
+
+        $member = 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('corporate_employees.corporate_id', '=', $corporate_id)
+                    ->where('claim_requests.id', '=', $claimRequestId)
+                    ->select(
+                        'claim_requests.code','members.member_id', 'members.name'
+                    )
+                    ->first();
+        $results['member'] = $member;
+        $claim_item = DB::table('claim_items')
+                        ->leftJoin('claims','claim_items.claim_id', '=', 'claims.id')
+                        ->leftJoin('benefits', 'claim_items.claim_itemable_id', '=', 'benefits.id')
+                        ->leftJoin('claim_requests', 'claims.claim_request_id', '=', 'claim_requests.id')
+                        ->leftJoin('members', 'claim_requests.member_id', '=', 'members.id')
+                        ->leftJoin('corporate_employees', 'members.id', '=', 'corporate_employees.member_id')
+                        ->where('corporate_employees.corporate_id', '=', $corporate_id)
+                        ->where('claim_requests.id', '=', $claimRequestId)
+                        ->select(   
+                            'claim_items.nominal_ditagihkan',
+                            'claim_items.nominal_dicover',
+                            'benefits.description',
+                            'claim_requests.submission_date'
+                        )
+                        ->orderBy('claim_items.id', 'desc')
+                        ->get();
+        $results['claim_item'] = $claim_item;
+        $tot_claim_item = DB::table('claim_items')
+                        ->leftJoin('claims','claim_items.claim_id', '=', 'claims.id')
+                        ->leftJoin('benefits', 'claim_items.claim_itemable_id', '=', 'benefits.id')
+                        ->leftJoin('claim_requests', 'claims.claim_request_id', '=', 'claim_requests.id')
+                        ->leftJoin('members', 'claim_requests.member_id', '=', 'members.id')
+                        ->leftJoin('corporate_employees', 'members.id', '=', 'corporate_employees.member_id')
+                        ->where('corporate_employees.corporate_id', '=', $corporate_id)
+                        ->where('claim_requests.id', '=', $claimRequestId)
+                        ->select( 
+                            DB::raw('SUM(claim_items.nominal_ditagihkan) AS nominal_ditagihkan'),
+                            DB::raw('SUM(claim_items.nominal_dicover) AS nominal_dicover'),
+                            DB::raw('(SUM(claim_items.nominal_ditagihkan) - SUM(claim_items.nominal_dicover)) AS difference'),
+                        )
+                        ->groupBy('claim_items.id')
+                        ->orderBy('claim_items.id', 'desc')
+                        ->first();
+        $results['tot_claim_item'] = $tot_claim_item;
+
+
+        return Helper::responseJson($results);
+    }
+
     public function show($corporateId, $claimRequestId)
     {
         $data = ClaimRequest::query()

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

@@ -16,6 +16,7 @@ use Modules\Client\Transformers\AlarmCenter\DataServiceMonitoring;
 use Modules\Client\Transformers\Dashboard\MemberResources as ClaimSubmitMemberResources;
 use Modules\Client\Transformers\Dashboard\MemberResources as DashboardMemberResources;
 use Modules\Client\Transformers\Dashboard\MemberAlarmCenterResources as DashboardMemberAlarmResources;
+use Modules\Client\Transformers\Dashboard\MemberEmployeeDataResources as DashboardMemberEmployeeDataResources;
 use Modules\Client\Transformers\DataMemberResource;
 use Illuminate\Support\Facades\DB;
 
@@ -33,8 +34,8 @@ class CorporateMemberController extends Controller
     {
         switch ($request->input('type')) {
             case 'employee-data':
-                $members = $this->corporateMemberService->getAllMemberAlarmCenter($corporate_id, $request);
+                $members = $this->corporateMemberService->getAllMemberEmployeeData($corporate_id, $request);
-                return response()->json(Helper::paginateResources(DashboardMemberAlarmResources::collection($members)));
+                return response()->json(Helper::paginateResources(DashboardMemberEmployeeDataResources::collection($members)));
             case 'claim-report':
                 $members = $this->corporateMemberService->getAllMemberClaimReports($corporate_id, $request);
                 return response()->json(Helper::paginateResources(ClaimReportMemberResources::collection($members)));

Modules/Client/Routes/api.php

@@ -57,6 +57,8 @@ Route::prefix('client')->group(function () {
             // Route::get('topup', [TopUpController::class, 'get']);
             Route::post('topup', [TopUpController::class, 'store']);
             Route::get('claim-report/claim-status', [ClaimReportController::class, 'claimStatus']);
+            Route::get('claim-report/detail/{id}', [ClaimReportController::class, 'claimDetail']);
+            Route::get('claim-report/detail-history/{id}', [ClaimReportController::class, 'claimDetailHistory']);
 
             Route::get('corporate', [CorporateCurrentController::class, 'index']);
             Route::put('corporate-update', [CorporateCurrentController::class, 'update']);

Modules/Client/Transformers/ClaimReport/MemberResources.php

@@ -3,6 +3,7 @@
 namespace Modules\Client\Transformers\ClaimReport;
 
 use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\Crypt;
 
 class MemberResources extends JsonResource
 {
@@ -16,13 +17,13 @@ class MemberResources extends JsonResource
     {
         return [
             'id' => $this->id,
-            'codeRequest' => $this->code,
+            'code' => $this->code,
-            'memberId' => $this->member_id,
+            'member_id' => $this->member_id,
-            'fullName' => $this->full_name,
+            'full_name' => $this->full_name,
-            'division' => $this->division_name ?? '',
+            'division_name' => $this->division_name ?? '',
             'status' => $this->status,
-            'claimRequestId' => $this->claim_request_id,
+            'claimRequestId' => Crypt::encrypt($this->claim_request_id),
-            'submissionDate' => $this->submission_date,
+            'submission_date' => $this->submission_date,
         ];
     }
 }

Modules/Client/Transformers/Dashboard/MemberEmployeeDataResources.php

@@ -0,0 +1,27 @@
+<?php
+namespace Modules\Client\Transformers\Dashboard;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class MemberEmployeeDataResources extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => $this->id,
+            'personId' => $this->person_id,
+            'memberId' => $this->member_id,
+            'fullName' => $this->full_name,
+            'service' => $this->service_code,
+            'start_date' => $this->start_date,
+            'end_date' => $this->end_date,
+            'status' => $this->active,
+        ];
+    }
+}

app/Services/CorporateMemberService.php

@@ -6,6 +6,7 @@ use App\Models\Member;
 use App\Models\Encounter;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 
 class CorporateMemberService
 {
@@ -47,42 +48,43 @@ class CorporateMemberService
     {
         $limit = $request->has('perPage') ? $request->input('perPage') : 10;
 
-        return Member::query()
+        $results = DB::table('claim_requests')
-            ->joinClaimRequests('right')
+                    ->leftJoin('claims', 'claim_requests.id', '=', 'claims.claim_request_id')
-            ->joinCorporateEmployees('left')
+                    ->leftJoin('members', 'claim_requests.member_id', '=', 'members.id')
-            ->joinCorporateDivisions('left')
+                    ->leftJoin('corporate_employees', 'members.id', '=', 'corporate_employees.member_id')
-            ->with('person:id,name_prefix,name_suffix,gender,name,birth_date')
+                    ->leftJoin('corporate_divisions', 'corporate_employees.division_id', '=', 'corporate_divisions.id')
-            ->withSum('claims', 'total_claim')
+                    ->where('corporate_employees.corporate_id', '=', $corporateId)
-            ->whereHas('employeds', function (Builder $corporateEmployee) use ($corporateId) {
+                    ->when($request->input('search'), function ($query, $search) {
-                $corporateEmployee->where('corporate_id', $corporateId);
+                        $query->where(function ($query) use ($search) {
-            })
+                            $query->orWhere('claim_requests.code', 'like', "%" . $search . "%")
-            ->when($request->input('search'), function (Builder $query, $search) {
+                                ->orWhere('members.member_id', 'like', "%" . $search . "%")
-                $query->where(function (Builder $query) use ($search) {
+                                ->orWhere('members.name', 'like', "%" . $search . "%")
-                    $query->orWhere('members.member_id', 'like', "%" . $search . "%")
+                                ->orWhere('corporate_divisions.name', 'like', "%" . $search . "%")
-                        ->orWhere('members.name', 'like', "%" . $search . "%");
+                                ->orWhere('claim_requests.status', 'like', "%" . $search . "%")
-                });
+                                ->orWhere('claim_requests.submission_date', 'like', "%" . $search . "%");
-            })
+                        });
-            ->when($request->input('division'), function (Builder $division, $value) {
+                    })
-                $division->whereHas('division', function (Builder $corporateEmployee) use ($value) {
+                    ->when($request->has('orderBy'), function ($query) use ($request) {
-                    $corporateEmployee->where('division_id', $value);
+                        $orderBy = $request->orderBy;
-                });
+                        $direction = $request->order ?? 'asc';
-            })
-            ->when($request->has('orderBy'), function (Builder $query) use ($request) {
-                $orderBy = match ($request->orderBy) {
-                    'memberId' => 'member_id',
-                    'fullName' => 'name',
-                    'codeRequest' => 'code',
-                    default => ''
-                };
 
-                if (in_array($orderBy, ['member_id', 'name', 'active', 'code'])) {
+                        $query->orderBy($orderBy, $direction);
-                    $query->getQuery()->orderBy($orderBy, $request->order);
+                    })
-                } elseif ($request->orderBy === 'division') {
+                    ->select('members.id', 'claim_requests.code','members.member_id', 'members.name as full_name', 'corporate_divisions.name AS division_name', 
-                    $query->getQuery()->orderBy('corporate_divisions.name', $request->order);
+                        DB::raw('
-                }
+                            CASE 
-            })
+                                WHEN claim_requests.status = "requested" THEN "requested"
-            ->select(['members.id', 'members.person_id', 'members.member_id', 'members.name', 'corporate_divisions.name AS division_name', 'claim_requests.status', 'claim_requests.code', 'claim_requests.id AS claim_request_id','claim_requests.submission_date'])
+                                WHEN claim_requests.status = "approved" AND claims.status = "approved" THEN "approved"
-            ->paginate($limit);
+                                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
+                        '), 
+                        'claim_requests.id AS claim_request_id', 'claim_requests.submission_date')
+                    ->paginate($limit);
+        return $results;
     }
 
     public function getAllMemberClaimSubmits(int $corporateId, Request $request)
@@ -177,6 +179,44 @@ class CorporateMemberService
             ->paginate($limit);
     }
 
+    public function getAllMemberEmployeeData(int $corporateId, Request $request)
+    {
+        $limit = $request->has('perPage') ? $request->input('perPage') : 10;
+
+        return Member::query()
+            ->joinCorporateEmployees('left')
+            ->joinMemberPlans('left')
+            ->joinPlans('left')
+            ->with(['currentPlan', 'person'])
+            ->where('corporate_employees.corporate_id', $corporateId)
+            ->when($request->input('search'), function (Builder $query, $search) {
+                $query->where(function (Builder $query) use ($search) {
+                    $query->orWhere('members.member_id', 'like', "%" . $search . "%")
+                        ->orWhere('members.name', 'like', "%" . $search . "%");
+                });
+            })
+            ->when($request->input('division'), function (Builder $query, $value) {
+                $query->where('corporate_employees.division_id', $value);
+            })
+            ->when($request->has('orderBy'), function (Builder $query) use ($request) {
+                $orderBy = match ($request->input('orderBy')) {
+                    'memberId' => 'member_id',
+                    'fullName' => 'name',
+                    'status' => 'active',
+                    'start_date' => 'member_plans.start',
+                    'end_date' => 'member_plans.end',
+                    'service' => 'plans.service_code',
+
+                    default => ''
+                };
+
+                $query->getQuery()->orderBy($orderBy, $request->order);
+            })
+            ->select(['members.id', 'members.person_id', 'members.member_id', 'members.name', 'member_plans.start AS start_date',  'member_plans.end AS end_date', 'plans.active', 'plans.service_code'])
+            ->selectRaw("(select sum(`claims`.`total_claim`) from `claims` where `members`.`id` = `claims`.`member_id` AND `claims`.`deleted_at` IS NULL) AS `claims_sum_total_claim`")
+            ->paginate($limit);
+    }
+
     public function getAllEncounter(int $corporateId)
     {
         return Encounter::query()->select(['id'])->paginate(10);

database/migrations/2023_10_11_131156_create_claim_logs_table.php

@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('claim_logs', function (Blueprint $table) {
+            $table->id();
+            $table->bigInteger('claim_request_id');
+            $table->string('status', 255);
+            $table->dateTime('date');
+            $table->text('description')->nullable();
+            $table->text('device')->nullable();
+            $table->bigInteger('created_by');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('claim_logs');
+    }
+};

database/migrations/2023_10_11_145555_create_claim_request_files_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('claim_request_files', function (Blueprint $table) {
+            $table->id();
+            $table->bigInteger('claim_request_id');
+            $table->dateTime('date');
+            $table->string('type', 255);
+            $table->text('description')->nullable();
+            $table->bigInteger('created_by');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('claim_request_files');
+    }
+};

frontend/client-portal/public/icons/ic_gmail.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.45456 17.9116V8.68687L2.57878 6.06959L0 4.61719V16.2837C0 17.1845 0.733594 17.9116 1.63641 17.9116H5.45456Z" fill="#4285F4"/>
+<path d="M18.5469 17.9115H22.365C23.2706 17.9115 24.0014 17.1817 24.0014 16.2836V4.61719L21.0806 6.28074L18.5469 8.68677V17.9115Z" fill="#34A853"/>
+<path d="M5.45381 8.68695L5.0625 5.08256L5.45381 1.63281L11.9993 6.5165L18.5447 1.63281L18.9824 4.89631L18.5447 8.68695L11.9993 13.5706L5.45381 8.68695Z" fill="#EA4335"/>
+<path d="M18.5469 1.63247V8.6866L24.0014 4.61693V2.44639C24.0014 0.433277 21.6914 -0.71434 20.0743 0.492966L18.5469 1.63247Z" fill="#FBBC04"/>
+<path d="M0 4.61697L2.50866 6.48878L5.45456 8.68665V1.63251L3.92719 0.493009C2.30719 -0.71439 0 0.43332 0 2.44633V4.61687V4.61697Z" fill="#C5221F"/>
+</svg>

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

@@ -0,0 +1,69 @@
+// mui
+import { Container, Grid, Stack, Typography } from '@mui/material';
+// components
+import Page from '../../components/Page';
+// utils
+import useSettings from '../../hooks/useSettings';
+// section
+import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
+// react
+import { useNavigate, useParams } from 'react-router-dom';
+import ButtonBack from '../../components/ButtonBack';
+import { useEffect, useState, useContext } from 'react';
+import axios from '../../utils/axios';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+// pages
+import DetailTimeline from '../../pages/ClaimReport/DetailTimeline';
+import DetailStepper from '../../pages/ClaimReport/DetailStepper';
+import { format } from 'date-fns';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+
+// ----------------------------------------------------------------------
+
+export default function UserProfile() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const [data, setData] = useState();
+
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const { id } = useParams();
+
+  useEffect(() => {
+    axios
+      .get(corporateValue + '/claim-report/detail/' + id)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        console.error(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}}>Detail</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}>
+            <DetailTimeline data={data}/>
+          </Grid>
+        </Grid>
+        ) : ''}
+      </Container>
+    </Page>
+  );
+}

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

@@ -0,0 +1,291 @@
+// mui
+import { 
+  Container, 
+  Grid, 
+  Stack,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Button,
+  Box,
+  TableSortLabel,
+  Avatar } from '@mui/material';
+// components
+import Page from '../../components/Page';
+// utils
+import useSettings from '../../hooks/useSettings';
+// section
+import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
+// react
+import { useNavigate, useParams } from 'react-router-dom';
+import ButtonBack from '../../components/ButtonBack';
+import { useEffect, useState, useContext } from 'react';
+import axios from '../../utils/axios';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import { format } from 'date-fns';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { fCurrency } from '../../utils/formatNumber';
+
+// ----------------------------------------------------------------------
+
+export default function DetailHistory() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const [data, setData] = useState();
+
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const { id } = useParams();
+
+  useEffect(() => {
+    axios
+      .get(corporateValue + '/claim-report/detail-history/' + id)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        console.error(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}}>History</Typography>
+        </Stack>
+        {data ? (
+        <Grid container spacing={3}>
+          <Grid item xs={12} md={12}>
+            <Stack direction="row" sx={{marginBottom:2}}>
+            	<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Name</Typography>
+            	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.name}</Typography>
+            </Stack>
+            <Stack direction="row" sx={{marginBottom:2}}>
+            	<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Member ID</Typography>
+            	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.member_id}</Typography>
+            </Stack>
+            <Stack direction="row" sx={{marginBottom:2}}>
+            	<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Claim Code</Typography>
+            	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.code}</Typography>
+            </Stack>
+          </Grid>
+          <Grid item xs={12} md={12}>
+          	<TableContainer>
+	            <Table aria-label="collapsible table" size="small">
+	              {/* Table Header */}
+	              <TableHead>
+			        <TableRow>
+			              <TableCell
+			              	align= 'left'
+                			sx={{ padding: 2 }}
+                			width= '5%'
+			              >
+			              	<Typography variant="body2" sx={{color:'#637381'}}>No</Typography>
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			sx={{ padding: 2 }}
+                			width= '15%'
+			              >
+			              	<Typography variant="body2" sx={{color:'#637381'}}>Date</Typography>
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			sx={{ padding: 2 }}
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{color:'#637381'}}>Requirment</Typography>
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			sx={{ padding: 2 }}
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			sx={{ padding: 2 }}
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
+			              </TableCell>
+			        </TableRow>
+			      </TableHead>
+	              {/* End Table Header */}
+	              {/* Table Body */}
+	              <TableBody>
+	              {data?.data?.claim_item?.length === 0 ? (
+					  <TableRow>
+					    <TableCell colSpan={5} align="center">
+					      <Typography variant="body2">No data available</Typography>
+					    </TableCell>
+					  </TableRow>
+					) : (
+					  data.data.claim_item?.map((dataItem, index) => (
+					    <TableRow key={index}>
+					      <TableCell align="left">
+					        <Typography variant="body2">{parseInt(index)+1}</Typography>
+					      </TableCell>
+					      <TableCell align="center">
+					        <Typography
+					          sx={{
+					            backgroundColor: '#919EAB29',
+					            color: '#637381',
+					            borderRadius: '4px',
+					            width: '70%',
+					          }}
+					          variant="body2"
+					        >
+					          {format(new Date(dataItem.submission_date), "d MMM yyyy")}
+					        </Typography>
+					      </TableCell>
+					      <TableCell align="left">
+					        {dataItem.description}
+					      </TableCell>
+					      <TableCell align="left">
+					        {fCurrency(dataItem.nominal_ditagihkan)}
+					      </TableCell>
+					      <TableCell align="left">
+					        {fCurrency(dataItem.nominal_dicover)}
+					      </TableCell>
+					    </TableRow>
+					  ))
+					)}
+
+	              </TableBody>
+	              {/* End Table Body */}
+	            </Table>
+	          </TableContainer>
+          </Grid>
+          {data.data.tot_claim_item ? (
+          <Grid item xs={12} md={12}>
+          	<TableContainer>
+	            <Table aria-label="collapsible table" size="small">
+	              {/* Table Body */}
+	              <TableBody>
+               		<TableRow sx={{ borderBottom: 0 }}>
+		              <TableCell
+		              	align= 'left'
+            			width= '5%'
+		              >
+		              	
+		              </TableCell>
+		              <TableCell
+		              	align= 'left'
+            			width= '15%'
+		              >
+		              	
+		              </TableCell>
+		              <TableCell
+		              	align= 'left'
+            			width= '20%'
+		              >
+		              	
+		              </TableCell>
+		              <TableCell
+		              	align= 'left'
+            			width= '20%'
+		              >
+		              	<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
+		              </TableCell>
+		              <TableCell
+		              	align= 'left'
+            			width= '20%'
+		              >
+		              	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.nominal_ditagihkan ? fCurrency(data.data.tot_claim_item.nominal_ditagihkan) : '-'}</Typography>
+		              </TableCell>
+					</TableRow>
+			        <TableRow sx={{ borderBottom: 0 }}>
+			              <TableCell
+			              	align= 'left'
+                			width= '5%'
+			              >
+			              	
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '15%'
+			              >
+			              	
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '20%'
+			              >
+			              	
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{fontWeight: 'bold', color: '#FF4842'}}>{data.data.tot_claim_item.nominal_dicover ? fCurrency(data.data.tot_claim_item.nominal_dicover) : '-'}</Typography>
+			              </TableCell>
+			        </TableRow>
+			        <TableRow sx={{ borderBottom: 0 }}>
+			              <TableCell
+			              	align= 'left'
+                			width= '5%'
+			              >
+			              	
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '15%'
+			              >
+			              	
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '20%'
+			              >
+			              	
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{fontWeight: 'bold'}}>Difference</Typography>
+			              </TableCell>
+			              <TableCell
+			              	align= 'left'
+                			width= '20%'
+			              >
+			              	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.difference ? fCurrency(data.data.tot_claim_item.difference) : '-'}</Typography>
+			              </TableCell>
+			        </TableRow>
+	              </TableBody>
+	              {/* End Table Body */}
+	            </Table>
+	        </TableContainer>
+	        <Stack
+		      direction="row"
+		      justifyContent="flex-end"
+		      alignItems="flex-end"
+		      sx={{ marginTop: 15, padding: 2 }}
+		      spacing={1}
+		    >
+		      <Typography variant="body2" sx={{ fontStyle: 'italic', color: '#637381' }}>Note : Apabila terdapat perbedaan nominal silahkan hubungi kami </Typography>
+		      <img alt="Gmail Icon" sx={{ height: 32, width: 30 }} src="/images/gmail.png" />
+		    </Stack>
+          </Grid>
+          ) : ''}
+        </Grid>
+        ) : ''}
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/ClaimReport/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/client-portal/src/pages/ClaimReport/DetailTimeline.tsx

@@ -0,0 +1,106 @@
+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';
+
+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);
+  useEffect(() => {
+    if (data && data.data) {
+      setTimeline(data.data.timeline);
+      setRequestFile(data.data.request_files);
+    }
+
+  }, [data]);
+  console.log(timeline);
+  console.log(requestFile);
+  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" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
+        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</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' ? 
+                          'Dokumen Diagnosa'
+                        : dataRequestFile.type === 'claim-kondisi' ? 
+                          'Dokumen Kondisi'
+                        : dataRequestFile.type === 'claim-result' ?
+                          'Dokumen Hasil Penunjang'
+                        : ''}
+                        </Typography>
+          				    </Button>
+          				</Stack>
+                  ))}
+                  </>
+                ) : ''}
+    			   </Stack>
+          	</Card>
+          </TimelineContent>
+        </TimelineItem>
+      </Timeline>
+      ))}
+    </>
+  );
+}

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

@@ -15,6 +15,7 @@ import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate
 import List from './List';
 // theme
 import palette from '../../theme/palette';
+import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
 
 interface ClaimStatusType {
   name: string;
@@ -35,17 +36,22 @@ export default function Drugs() {
         {
           name: 'Requested',
           value: claimStatus.data.data.requesteds,
-          color: palette.dark.primary.dark,
+          color: '#159C9C',
         },
         {
           name: 'Approval',
           value: claimStatus.data.data.approveds,
-          color: palette.dark.warning.dark,
+          color: '#229A16',
         },
+        // {
+        //   name: 'Disbrusment',
+        //   value: claimStatus.data.data.disbrusments,
+        //   color: '#BF6919',
+        // },
         {
-          name: 'Rejected',
+          name: 'Decline',
           value: claimStatus.data.data.rejecteds,
-          color: palette.dark.error.dark,
+          color: '#B72136',
         },
       ]);
     })();
@@ -54,6 +60,13 @@ export default function Drugs() {
   return (
     <Page title="Claim Reports">
       <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+              heading={'Claim Report'}
+              links={[
+                { name: 'Case Management', href: '/claim-report' },
+                { name: 'Claim Report', href: '/claim-report'}
+              ]}
+        />
         <Grid container spacing={2}>
           <Grid item xs={12} lg={12} md={12}>
             <CardClaimStatus data={listClaimStatusItems} />

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

@@ -1,5 +1,5 @@
 /* ---------------------------------- @mui ---------------------------------- */
-import { Stack, Button } from '@mui/material';
+import { Stack, Button, MenuItem } from '@mui/material';
 /* ---------------------------------- axios --------------------------------- */
 // import axios from 'axios';
 import axios from '../../utils/axios';
@@ -15,6 +15,12 @@ import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate
 import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { fDate } from '../../utils/formatTime';
+import Typography from '@mui/material/Typography';
+import { format } from 'date-fns';
+import TableMoreMenu from '../../components/table/TableMoreMenu';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import HistoryIcon from '@mui/icons-material/History';
+import SearchIcon from '@mui/icons-material/Search';
 
 export default function List() {
   const navigate = useNavigate();
@@ -47,7 +53,7 @@ export default function List() {
 
   /* ------------------------------ handle order ------------------------------ */
   const [order, setOrder] = useState<Order>('desc');
-  const [orderBy, setOrderBy] = useState('codeRequest');
+  const [orderBy, setOrderBy] = useState('member_id');
 
   const orders = {
     order: order,
@@ -109,41 +115,41 @@ export default function List() {
   /* -------------------------------- headCell -------------------------------- */
   const headCells: HeadCell<never>[] = [
     {
-      id: 'memberId',
+      id: 'submission_date',
+      align: 'center',
+      label: 'Request Date',
+      isSort: true,
+    },
+    {
+      id: 'member_id',
       align: 'left',
       label: 'Member ID',
       isSort: true,
     },
     {
-      id: 'codeRequest',
+      id: 'code',
       align: 'left',
-      label: 'Code Request',
+      label: 'Claim Code',
       isSort: true,
     },
     {
-      id: 'submissionDate',
+      id: 'full_name',
-      align: 'left',
-      label: 'Request Date',
-      isSort: true,
-    },
-    {
-      id: 'fullName',
       align: 'left',
       label: 'Name',
       isSort: true,
     },
 
     {
-      id: 'division',
+      id: 'division_name',
       align: 'left',
-      label: 'Divisi',
+      label: 'Division',
-      isSort: false,
+      isSort: true,
     },
     {
       id: 'status',
       align: 'center',
       label: 'Status',
-      isSort: false,
+      isSort: true,
     },
     {
       id: 'action',
@@ -173,44 +179,92 @@ export default function List() {
           ...obj,
           status:
             obj.status === 'requested' ? (
-              <Button
+              <Typography
-                onClick={() => navigate(`dialog-detail/${obj.claimRequestId}`)}
+                variant="body2"
                 sx={{
-                  backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                  width: 'Hug (6px)',
-                  color: palette.dark.success.dark,
+                  height: 'Hug (22px)',
-                  paddingX: 1.5,
+                  left: '862px',
-                  paddingY: 1,
+                  top: '17px',
-                  '&:hover': {
+                  color: '#159C9C',
-                    backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                  backgroundColor: '#00AB5529',
-                    color: palette.dark.success.dark,
+                  padding: '1px, 8px',
-                  },
+                  borderRadius: '6px',
                 }}
               >
                 Request
-              </Button>
+              </Typography>
             ) : obj.status === 'approved' ? (
-              <Button
+              <Typography
-                onClick={() => navigate(`dialog-detail/${obj.claimRequestId}`)}
+                variant="body2"
                 sx={{
-                  backgroundColor: (theme) => theme.palette.secondary.main,
+                  width: 'Hug (6px)',
-                  color: '#FFFF',
+                  height: 'Hug (22px)',
-                  paddingX: 1.5,
+                  left: '862px',
-                  paddingY: 1,
+                  top: '17px',
-                  '&:hover': {
+                  color: '#229A16',
-                    backgroundColor: (theme) => theme.palette.secondary.dark,
+                  backgroundColor: '#54D62C29',
-                    color: '#FFFF',
+                  padding: '1px, 8px',
-                  },
+                  borderRadius: '6px',
                 }}
               >
-                Approved
+                Approval
-              </Button>
+              </Typography>
+            ) : obj.status === 'declined' ? (
+              <Typography
+                variant="body2"
+                sx={{
+                  width: 'Hug (6px)',
+                  height: 'Hug (22px)',
+                  left: '862px',
+                  top: '17px',
+                  color: '#B72136',
+                  backgroundColor: '#FF484229',
+                  padding: '1px, 8px',
+                  borderRadius: '6px',
+                }}
+              >
+                Decline
+              </Typography>
+            ) : obj.status === 'pending' ? (
+              <Typography
+                variant="body2"
+                sx={{
+                  width: 'Hug (6px)',
+                  height: 'Hug (22px)',
+                  left: '862px',
+                  top: '17px',
+                  color: '#BF6919',
+                  backgroundColor: '#FFC10729',
+                  padding: '1px, 8px',
+                  borderRadius: '6px',
+                }}
+              >
+                Pending
+              </Typography>
+            ) : obj.status === 'reviewed' ? (
+              <Typography
+                variant="body2"
+                sx={{
+                  width: 'Hug (6px)',
+                  height: 'Hug (22px)',
+                  left: '862px',
+                  top: '17px',
+                  color: '#0C53B7',
+                  backgroundColor: '#1890FF29',
+                  padding: '1px, 8px',
+                  borderRadius: '6px',
+                }}
+              >
+                Review
+              </Typography>
             ) : (
               <Button
                 startIcon={<Iconify icon="fa6-solid:clock" />}
                 sx={{
                   backgroundColor: '#CD7B2E',
                   color: '#FFFF',
-                  paddingX: 1.5,
+                  padding: '1px, 8px',
                   paddingY: 1,
                   '&:hover': {
                     backgroundColor: '#BF6919',
@@ -221,8 +275,31 @@ export default function List() {
                 Ongoing
               </Button>
             ),
-            submissionDate:
+            submission_date:
-              obj.submissionDate ? fDate(obj.submissionDate) : ''
+              <Typography
+                sx={{
+                  backgroundColor: (theme) => theme.palette.grey[300],
+                  borderRadius: '4px',
+                  width: '70%',
+                }}
+                variant="body2"
+              >
+                {obj.submission_date ? format(new Date(obj.submission_date), "d MMM yyyy") : ''}
+              </Typography>
+            ,
+            action:
+                <TableMoreMenu actions={
+                  <>
+                    <MenuItem onClick={() => navigate ('/claim-report/detail/'+obj.claimRequestId)}>
+                      <SearchIcon />
+                      Detail
+                    </MenuItem>
+                    <MenuItem onClick={() => navigate ('/claim-report/detail-history/'+obj.claimRequestId)}>
+                      <HistoryIcon />
+                      History
+                    </MenuItem>
+                  </>
+                 } />
         }))
       );
 

frontend/client-portal/src/pages/EmployeeData/Index.tsx

@@ -113,11 +113,9 @@ export default function Drugs() {
         />
         <Grid container>
           <Grid item xs={12} lg={12} md={12}>
-            <Card>
               <TabPanel value={value} index={0}>
                 <List />
               </TabPanel>
-            </Card> 
           </Grid>
         </Grid>
       </Container>

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

@@ -250,24 +250,24 @@ export default function List() {
     
     {
       id: 'start_date',
-      align: 'left',
+      align: 'center',
       label: 'Start Date',
       isSort: true,
     },
     {
       id: 'end_date',
-      align: 'left',
+      align: 'center',
       label: 'End Date',
       isSort: true,
     },
     {
       id: 'status',
-      align: 'left',
+      align: 'center',
       label: 'Status',
       isSort: true,
     },
     {
-      id: 'view',
+      id: 'action',
       align: 'center',
       label: '',
       isSort: true,
@@ -289,9 +289,7 @@ export default function List() {
       const response = await axios.get(`${corporateValue}/members?type=employee-data`, {
         params: { ...parameters },
       });
-
+      
-      console.log(response.data.data);
-
       setData(
         response.data.data.map((obj: any) => {
           return {
@@ -303,34 +301,48 @@ export default function List() {
             // ,
             status:
               obj.status === 1 ? (
-                <Button
+                <Typography
-                  variant="outlined"
+                  variant="body2"
-                  color="success"
+                  sx={{
-                  size="small"
+                    width: 'Hug (6px)',
-                  sx={{cursor:'default'}}
+                    height: 'Hug (22px)',
+                    left: '862px',
+                    top: '17px',
+                    color: '#229A16',
+                    backgroundColor: '#54D62C29',
+                    padding: '1px, 8px',
+                    borderRadius: '6px',
+                  }}
                 >
                   Active
-                </Button>
+                </Typography>
               ) : (
-                <Button
+                <Typography
-                  variant="outlined"
+                  variant="body2"
-                  color="error"
+                  sx={{
-                  size="small"
+                    width: 'Hug (6px)',
-                  sx={{cursor:'default'}}
+                    height: 'Hug (22px)',
+                    left: '862px',
+                    top: '17px',
+                    color: '#B72136',
+                    backgroundColor: '#FF484229',
+                    padding: '1px, 8px',
+                    borderRadius: '6px',
+                  }}
                 >
                   Inactive
-                </Button>
+                </Typography>
               ),
               start_date:
                 <Typography
                   sx={{
                     backgroundColor: (theme) => theme.palette.grey[300],
                     borderRadius: '4px',
-                    width: '95%',
+                    width: '70%',
                   }}
                   variant="body2"
                 >
-                  {obj.start_date ? format(new Date(obj.start_date), "dd MMMM yyyy HH:mm:ss") : ''}
+                  {obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
                 </Typography>
               ,
               end_date:
@@ -338,11 +350,11 @@ export default function List() {
                   sx={{
                     backgroundColor: (theme) => theme.palette.grey[300],
                     borderRadius: '4px',
-                    width: '95%',
+                    width: '70%',
                   }}
                   variant="body2"
                 >
-                  {obj.end_date ? format(new Date(obj.end_date), "d MMMM yyyy HH:mm:ss") : ''}
+                  {obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
                 </Typography>
               ,
               fullName:
@@ -359,7 +371,7 @@ export default function List() {
                   {obj.memberId}
                 </Typography>
               ,
-              view:
+              action:
                 <TableMoreMenu actions={
                   <>
                     <MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>

frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx

@@ -17,12 +17,13 @@ import ButtonBack from '../../components/ButtonBack';
 import { useEffect, useState, useContext } from 'react';
 import axios from '../../utils/axios';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 
 // ----------------------------------------------------------------------
 
 export default function UserProfile() {
   const { themeStretch } = useSettings();
-  // const navigate = useNavigate();
+  const navigate = useNavigate();
   const [data, setData] = useState();
 
   const { corporateValue } = useContext(UserCurrentCorporateContext);
@@ -44,13 +45,14 @@ export default function UserProfile() {
   return (
     <Page title="Profile">
       <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
           {/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
             <Iconify icon="heroicons-outline:arrow-narrow-left" />
           </IconButton> */}
-          <ButtonBack />
+          <ArrowBackIosIcon sx={{cursor:'pointer'}} onClick={() => navigate(-1)}/>
-          <Typography variant="h5">Profile</Typography>
+          <Typography variant="h5" sx={{marginLeft:2}}>Profile</Typography>
         </Stack>
+        {data ? (
         <Grid container spacing={2}>
           {/* Row 1 */}
           <Grid item xs={12} md={12}>
@@ -60,6 +62,7 @@ export default function UserProfile() {
             <CardFamilyInformation data={data} />
           </Grid>
         </Grid>
+        ) : ''}
       </Container>
     </Page>
   );

frontend/client-portal/src/routes/index.tsx

@@ -174,9 +174,13 @@ export default function Router() {
           index: true,
         },
         {
-          path: 'dialog-detail/:id',
+          path: '/claim-report/detail/:id',
-          element: <DialogDetailClaim />,
+          element: <DetailClaimReport />,
         },
+        {
+          path: '/claim-report/detail-history/:id',
+          element: <DetailHitoryClaimReport />,
+        }
       ],
     },
     {
@@ -259,6 +263,8 @@ const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));
 const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
 const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
 const DialogDetailClaim = Loadable(lazy(()=> import('../pages/ClaimReport/DialogDetailClaim')));
+const DetailClaimReport = Loadable(lazy(()=> import('../pages/ClaimReport/Detail')));
+const DetailHitoryClaimReport = Loadable(lazy(()=> import('../pages/ClaimReport/DetailHistory')));
 
 // Claim submit
 const ClaimSubmit = Loadable(lazy(() => import('../pages/ClaimSubmit/Index')));

frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx

@@ -117,7 +117,7 @@ export default function CardFamilyInformation({ data }) {
       <Grid container maxHeight="584px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
       {data?.family.map((familyMember, index) => (
         <Grid item xs={12} sm={6} md={6} key={index}>
-          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1, marginBottom: 2 }}>
             {/* Stack 1 */}
             <Stack
               direction="row"

frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx

@@ -30,7 +30,7 @@ const RootStyle = styled(Card)(({ theme }) => ({
 const defaultData = [
   { name: 'Requested', value: 5, color: palette.dark.primary.dark },
   { name: 'Approval', value: 1, color: palette.dark.warning.dark },
-  { name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
+  //{ name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
   { name: 'Rejected', value: 3, color: palette.dark.error.dark },
 ];
 
@@ -39,13 +39,13 @@ const defaultData = [
 export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
   return (
     <RootStyle>
-      <Stack sx={{ mb: 1 }}>
+      {/*<Stack sx={{ mb: 1 }}>
         <Typography variant="body2">Claim Status</Typography>
-      </Stack>
+      </Stack>*/}
       <Grid container spacing={2}>
         {data
           ? data.map(({ name, value, color }: ClaimStatusType, key) => (
-              <Grid item key={key} xs={6} sm={4}>
+              <Grid item key={key} xs={12} sm={4}>
                 <Card
                   sx={{
                     paddingX: 1,
@@ -71,7 +71,7 @@ export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
               </Grid>
             ))
           : defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
-              <Grid item key={key} xs={6} sm={4}>
+              <Grid item key={key} xs={12} sm={3}>
                 <Card
                   sx={{
                     paddingX: 1,

frontend/dashboard/src/pages/Claims/components/Documents.tsx

@@ -97,9 +97,6 @@ export default function Documents({ files }) {
           <Stack sx={{px: 2}}>
             <Typography variant="body2">Dokumen Diagnosa</Typography>
           </Stack>
-          <Stack sx={{px: 2}}>
-            <Typography variant="body2">Dokumen Diagnosa</Typography>
-          </Stack>
         </Stack>