Claim Management Report

2024-02-23 13:48:36 +07:00
parent 4dfbb8f867
commit bca43e3030
7 changed files with 1494 additions and 1580 deletions
--- a/Modules/Internal/Http/Controllers/Api/ClaimController.php
+++ b/Modules/Internal/Http/Controllers/Api/ClaimController.php
@@ -21,9 +21,16 @@ use Modules\Internal\Transformers\ClaimEditResource;
 use Modules\Internal\Transformers\ClaimHistoryCareResource;
 use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;
 use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
+
+use Box\Spout\Writer\Common\Creator\Style\StyleBuilder;
+use Box\Spout\Common\Entity\Style\CellAlignment;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\View;

+use Modules\Internal\Transformers\RequestLogResource;
+
+use App\Models\RequestLog;
+
 use PDF;

 class ClaimController extends Controller
@@ -34,41 +41,257 @@ class ClaimController extends Controller
     */
    public function index(Request $request)
    {
-        // $serviceCode = 'IP';
-        $claims = Claim::with([
-            'member',
-            'member.currentCorporate',
-            'member.currentCorporate.currentPolicy',
-            // 'member.currentPlan' => function($memberPlan) use ($serviceCode) {
-            //     $memberPlan->where('plans.service_code', $serviceCode);
-            // },
-            'member.currentPlan' => function($memberPlan) {
-                $memberPlan->join('claim_requests', 'claim_requests.service_code', '=', 'plans.service_code');
-            },
-            'diagnoses' => function ($diagnosis) {
-                $diagnosis->where('type', 'primary');
-            },
-            'diagnoses.icd',
-            'benefit',
-            'claimRequest',
-            'claimRequest.service',
-        ])
-        ->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 . "%");
-                });
+        $limit = $request->has('per_page') ? $request->input('per_page') : 10;
+        $results = DB::table('claims')
+        ->leftJoin('claim_requests', 'claims.claim_request_id','=', 'claim_requests.id')
+        ->leftJoin('request_logs', 'claim_requests.request_log_id','=', 'request_logs.id')
+        ->leftJoin('members', 'request_logs.member_id', '=', 'members.id')
+        ->when($request->input('search'), function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->orWhere('members.name', 'like', "%" . $search . "%");
            });
        })
-        ->where('status', '!=', 'requested') // Penjagaan agar approve baru masuk ke claim management
-        ->latest()
-        ->paginate(10);
+        ->when($request->has('orderBy'), function ($query) use ($request) {
+            $orderBy = $request->orderBy;
+            $direction = $request->order ?? 'asc';
+
+            $query->orderBy($orderBy, $direction);
+        })
+        ->when($request->input('start_date') , function ($query, $start_date) {
+            $query->where(function ($query) use ($start_date) {
+                $query->where('claims.created_at', '>=', $start_date);
+            });
+        })
+        ->when($request->input('end_date') , function ($query, $end_date) {
+            $query->where(function ($query) use ($end_date) {
+                $query->where('claims.created_at', '<=', $end_date);
+            });
+        })
+        ->when($request->input('provider') , function ($query, $provider) {
+            $query->where(function ($query) use ($provider) {
+                $query->where('request_logs.organization_id', '=', $provider);
+            });
+        })
+        ->select(
+            'claims.id',
+            'request_logs.id AS id_log',
+            'claims.code',
+            'members.name',
+            DB::raw('
+                (SELECT members.member_id FROM members WHERE members.id = claims.member_id LIMIT 1) AS member_id
+            '),
+            'claims.created_at',
+            DB::raw('
+                (SELECT plans.code FROM plans WHERE plans.id = claims.plan_id LIMIT 1) AS plan_code
+            '),
+            DB::raw('
+                (SELECT services.description FROM services WHERE services.code = claim_requests.service_code LIMIT 1) AS service_code
+            '),
+            DB::raw('
+                (SELECT corporate_policies.code FROM corporate_policies WHERE corporate_policies.id = claim_requests.policy_id LIMIT 1) AS corporate_policies
+            '),
+            DB::raw('
+                (SELECT organizations.name FROM organizations WHERE organizations.id = request_logs.organization_id LIMIT 1) AS provider
+            '),
+            DB::raw('
+                (Select SUM(request_log_benefits.amount_approved) as tot_bill FROM request_log_benefits
+                    WHERE request_log_benefits.request_log_id = request_logs.id LIMIT 1) AS tot_bill
+            '),
+            'claims.status',
+            )
+        ->paginate($limit);
+        


-        return response()->json($claims);
+        return response()->json(Helper::paginateResources($results));
+    }
+
+    public function exportClaimManagement(Request $request)
+    {
+        $start_date = $request->input('start_date') ? $request->input('start_date') : 'all';
+        $end_date = $request->input('end_date') ? $request->input('end_date') : 'all';
+        $writer = WriterEntityFactory::createXLSXWriter();
+        $writer->openToFile(public_path('files/Report-Data-Claim-Management-'.$start_date.'-'.$end_date.'.xlsx'));
+        $header = [
+            'No',
+            'Code',
+            'Name',
+            'Member ID',
+            'Date Submission',
+            'Plan ID',
+            'Service',
+            'Policy Number',
+            'Provider',
+            'Total Billing',
+        ];
+        $style = (new StyleBuilder())
+           ->setFontBold()
+        //    ->setFontSize(15)
+        //    ->setFontColor(Color::BLUE)
+        //    ->setShouldWrapText()
+           ->setCellAlignment(CellAlignment::LEFT)
+        //    ->setBackgroundColor(Color::YELLOW)
+           ->build();
+
+        $headerRow = WriterEntityFactory::createRowFromArray($header, $style);
+        $writer->addRow($headerRow);
+        // ============================
+        $results = DB::table('claims')
+        ->leftJoin('claim_requests', 'claims.claim_request_id','=', 'claim_requests.id')
+        ->leftJoin('request_logs', 'claim_requests.request_log_id','=', 'request_logs.id')
+        ->leftJoin('members', 'request_logs.member_id', '=', 'members.id')
+        ->when($request->input('search'), function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->orWhere('members.name', 'like', "%" . $search . "%");
+            });
+        })
+        ->when($request->has('orderBy'), function ($query) use ($request) {
+            $orderBy = $request->orderBy;
+            $direction = $request->order ?? 'asc';
+
+            $query->orderBy($orderBy, $direction);
+        })
+        ->when($request->input('start_date') , function ($query, $start_date) {
+            $query->where(function ($query) use ($start_date) {
+                $query->where('claims.created_at', '>=', $start_date);
+            });
+        })
+        ->when($request->input('end_date') , function ($query, $end_date) {
+            $query->where(function ($query) use ($end_date) {
+                $query->where('claims.created_at', '<=', $end_date);
+            });
+        })
+        ->when($request->input('provider') , function ($query, $provider) {
+            $query->where(function ($query) use ($provider) {
+                $query->where('request_logs.organization_id', '=', $provider);
+            });
+        })
+        ->select(
+            'claims.id',
+            'request_logs.id AS id_log',
+            'claims.code',
+            'members.name',
+            DB::raw('
+                (SELECT members.member_id FROM members WHERE members.id = claims.member_id LIMIT 1) AS member_id
+            '),
+            'claims.created_at',
+            DB::raw('
+                (SELECT plans.code FROM plans WHERE plans.id = claims.plan_id LIMIT 1) AS plan_code
+            '),
+            DB::raw('
+                (SELECT services.description FROM services WHERE services.code = claim_requests.service_code LIMIT 1) AS service_code
+            '),
+            DB::raw('
+                (SELECT corporate_policies.code FROM corporate_policies WHERE corporate_policies.id = claim_requests.policy_id LIMIT 1) AS corporate_policies
+            '),
+            DB::raw('
+                (SELECT organizations.name FROM organizations WHERE organizations.id = request_logs.organization_id LIMIT 1) AS provider
+            '),
+            DB::raw('
+                (Select SUM(request_log_benefits.amount_approved) as tot_bill FROM request_log_benefits
+                    WHERE request_log_benefits.request_log_id = request_logs.id LIMIT 1) AS tot_bill
+            '),
+            'claims.status',
+            )
+        ->get();
+        $no=0;
+        $gr_total = 0;
+        foreach($results as $item)
+        {
+            $gr_total += $item->tot_bill;
+            $no++;
+            $rowData = [
+                $no,
+                $item->code,
+                $item->name,
+                $item->member_id,
+                $item->created_at,
+                $item->plan_code,
+                $item->service_code,
+                $item->corporate_policies,
+                $item->provider,
+                $item->tot_bill ? $item->tot_bill : 0
+            ];
+            $style = (new StyleBuilder())
+            //->setFontBold()
+            //    ->setFontSize(15)
+            //    ->setFontColor(Color::BLUE)
+            //    ->setShouldWrapText()
+            ->setCellAlignment(CellAlignment::LEFT)
+            //    ->setBackgroundColor(Color::YELLOW)
+            ->build();
+            $row = WriterEntityFactory::createRowFromArray($rowData, $style);
+            $writer->addRow($row);
+        }
+        $footer = [
+            'Grand Total',
+            '',
+            '',
+            '',
+            '',
+            '',
+            '',
+            '',
+            '',
+            $gr_total,
+        ];
+        $style = (new StyleBuilder())
+               ->setFontBold()
+            //    ->setFontSize(15)
+            //    ->setFontColor(Color::BLUE)
+            //    ->setShouldWrapText()
+               ->setCellAlignment(CellAlignment::LEFT)
+            //    ->setBackgroundColor(Color::YELLOW)
+               ->build();
+    
+        $footerRow = WriterEntityFactory::createRowFromArray($footer, $style);
+        $writer->addRow($footerRow);
+
+        $writer->close();
+
+        return Helper::responseJson([
+            'file_name' => 'Report-Data-Claim-Management-'. $start_date.'-'.$end_date,
+            "file_url" => url('files/Report-Data-Claim-Management-'. $start_date.'-'.$end_date.'.xlsx')
+        ]);
+    }
+    public function getProvider(Request $request)
+    {
+        $providers = DB::table('organizations')
+                ->where('organizations.type', '=', 'hospital')
+                ->where('organizations.status', '=', 'active')
+                ->select(
+                    'organizations.id',
+                    'organizations.name'
+                )
+                ->orderBy('name', 'asc')
+                ->get();
+
+                return response()->json($providers);
+    }
+
+    public function cekStatus($id)
+    {
+        $cek = DB::table('claims')
+        ->where('claims.id', '=', $id)
+        ->select('claims.status')
+        ->first();
+
+        $data['cek'] = $cek;
+
+        $member = DB::table('claims')
+        ->join('claim_requests', 'claims.claim_request_id','=', 'claim_requests.id')
+        ->join('request_logs', 'claim_requests.request_log_id','=', 'request_logs.id')
+        ->join('members', 'request_logs.member_id', '=', 'members.id')
+        ->where('claims.id', '=', $id)
+        ->select('claims.code','members.name','claims.created_at', DB::raw('
+        (SELECT services.name FROM services WHERE services.code = request_logs.service_code LIMIT 1) AS service_type
+    '),)
+        ->first();
+
+        $data['member'] = $member;
+
+        return response()->json($data);
+
    }

    /**
@@ -334,7 +557,7 @@ class ClaimController extends Controller
        return Helper::responseJson([], message: "Diagnosis berhasil di update");
    }

-    public function decline($id)
+    public function decline(Request $request, $id)
    {
        //Get claim request id
        $data_claim_requests = DB::table('claim_requests')
@@ -348,7 +571,8 @@ class ClaimController extends Controller
        ->where('claim_request_id', $id)
        ->update(
            [
-                'status' => 'declined'
+                'status' => 'declined',
+                'reason_decline' => $request->reasonDecline ? $request->reasonDecline : ''
            ]
        );

--- a/Modules/Internal/Routes/api.php
+++ b/Modules/Internal/Routes/api.php
@@ -235,6 +235,8 @@ Route::prefix('internal')->group(function () {
        Route::post('claims/{claim_id}/set-final-encounter', [ClaimEncounterController::class, 'setFinalEncounter']);

        Route::get('claims', [ClaimController::class, 'index']);
+        Route::get('claims/export-claim-management', [ClaimController::class, 'exportClaimManagement']);
+        Route::get('claims/get-provider', [ClaimController::class, 'getProvider']);
        Route::post('claims/{id}/update-items', [ClaimController::class, 'updateItems'])->name('claim.update-items');
        Route::post('claims/{id}/update-diagnosis', [ClaimController::class, 'updateDiagnosis'])->name('claim.update-diagnosis');
        Route::post('claims/{id}/decline', [ClaimController::class, 'decline'])->name('claim.decline');
@@ -248,6 +250,7 @@ Route::prefix('internal')->group(function () {

        Route::post('claims', [ClaimController::class, 'store']);
        Route::get('claims/{id}', [ClaimController::class, 'show']);
+        Route::get('claims/cek_status/{id}', [ClaimController::class, 'cekStatus']);
        Route::put('claims/{id}', [ClaimController::class, 'update']);
        Route::get('claims/{id}/edit', [ClaimController::class, 'edit']);
        Route::post('check-limit', [ClaimController::class, 'checkLimit']);
--- a/frontend/dashboard/src/pages/Claims/Detail.tsx
+++ b/frontend/dashboard/src/pages/Claims/Detail.tsx
--- a/frontend/dashboard/src/pages/Claims/Index.tsx
+++ b/frontend/dashboard/src/pages/Claims/Index.tsx
@@ -7,7 +7,7 @@ import List from "./List";

 export default function Claims() {

-  const pageTitle = 'Claim';
+  const pageTitle = 'Claim Management';
  return (
    <Page title={ pageTitle } sx={{ mx: 2}}>

@@ -16,7 +16,7 @@ export default function Claims() {
        links={[
          { name: 'Dashboard', href: '/dashboard' },
          {
-            name: 'Claim',
+            name: 'Claim Management',
            href: '/claims',
          },
        ]}
--- a/frontend/dashboard/src/pages/Claims/List.tsx
+++ b/frontend/dashboard/src/pages/Claims/List.tsx
@@ -1,6 +1,7 @@
 // @mui
 import {
  Box,
+  Grid,
  Button,
  Card,
  Collapse,
@@ -17,12 +18,24 @@ import {
  ButtonGroup,
  Tooltip,
  TableHead,
+  Checkbox,
+  InputAdornment,
+  TableSortLabel,
+  FormControl
 } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { fDateOnly } from '@/utils/formatTime';
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+
+import { LoadingButton } from '@mui/lab';
 // components
 import axios from '../../utils/axios';
 import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
@@ -32,23 +45,146 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { Chip } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import { enqueueSnackbar } from 'notistack';
-import { fDate } from '../../utils/formatTime';
+import { fDate, fDateTime } 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';
+import { Add, Search } from '@mui/icons-material';
+import Autocomplete from '@mui/material/Autocomplete';
+
+import DownloadIcon from '@mui/icons-material/Download';
+
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+

 export default function List() {
+  const [selectAll, setSelectAll] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+   const [providers, setProviders] = useState(null);
+  // const [searchText, setSearchText] = useState('');
+  const [order, setOrder] = useState<Order>('desc');
+  const [orderBy, setOrderBy] = useState('created_at');
+  const [perPage, setPerPage] = useState<number>(0);
+
+    const handleChange = (event, newValue) => {
+        // Jika newValue tidak undefined, atur nilai dataProvider
+        if (newValue !== undefined) {
+            setDataProvider(newValue.service_code);
+        } else {
+            // Jika tidak ada yang dipilih, set dataProvider menjadi string kosong
+            setDataProvider(null);
+        }
+    };
+  // Dummy data
+const dummyServices = [
+  { service_code: '1', name: 'Service 1' },
+  { service_code: '2', name: 'Service 2' },
+  { service_code: '3', name: 'Service 3' },
+  // tambahkan data lain sesuai kebutuhan
+];
+
+
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      const requestedIds = dataTableData.data
+        .filter(row => row.status === 'requested') // Memfilter baris dengan status 'requested'
+        .map(row => row.id); // Mengambil hanya ID dari baris-baris yang memenuhi kondisi
+        setSelectedRows(requestedIds);
+    } else {
+      setSelectedRows([]);
+    }
+  };
+
+  const handleRowSelect = (id) => {
+    if (selectedRows.includes(id)) {
+      setSelectedRows(selectedRows.filter(rowId => rowId !== id));
+    } else {
+      setSelectedRows([...selectedRows, id]);
+    }
+  };
+
  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
+  const [startDate, setStartDate] = useState(null);
+  const [searchText, setSearchText] = useState('');
+  const [endDate, setEndDate] = useState(null);
  const navigate = useNavigate();
+  const [dataProvider, setDataProvider] = useState(null);
+
+  useEffect(() => {
+    if (startDate !== null || endDate !== null || dataProvider !== null
+       || order !== null || orderBy !== null || perPage !== 0) {
+      loadDataTableData();
+      getProvider();
+    }
+  }, [startDate, endDate, dataProvider, order, orderBy, perPage]);
+  
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingImport, setIsLoadingImport] = useState(false);
+  const handleExportReport = async () => {
+
+
+    const year = startDate?.getFullYear();
+    const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
+    
+    const year1 = endDate?.getFullYear();
+    const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
+
+    
+      
+    var filter = Object.fromEntries([...searchParams.entries()]);
+    setIsLoading(true)
+    await axios
+      .get('/claims/export-claim-management',{
+        params: {
+          search: searchText,
+          start_date: formattedDate ? formattedDate : null,
+          end_date:formattedDate1,
+          provider: dataProvider,
+          order: order,
+          orderBy: orderBy,
+          page: perPage,
+        }
+      })
+      .then((res) => {
+          enqueueSnackbar('Data berhasil di Export', {
+          variant: 'success',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        });
+        setIsLoading(false)
+  
+        document.location.href = res.data.data.file_url;
+      })
+      .catch((err) =>
+          enqueueSnackbar('Data Gagal di Export', {
+          variant: 'error',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        })
+        
+      );
+  };
+

  function SearchInput(props: any) {
    // SEARCH
    const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState('');
+    
+    

    const handleSearchChange = (event: any) => {
      const newSearchText = event.target.value ?? '';
@@ -73,7 +209,7 @@ export default function List() {

    useEffect(() => {
      // Trigger First Search
-      setSearchText(searchParams.get('search') ?? '');
+      // setSearchText(searchParams.get('search') ?? '');
    }, []);

    return (
@@ -126,41 +262,232 @@ export default function List() {
    );
  }

+  const searchInput = useRef<HTMLInputElement>(null);
+    
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      loadDataTableData();
+    };
+
+    
+
+    useEffect(() => {
+      // Trigger First Search
+      //setSearchText(searchText);
+    }, []);
+
+    const item = [
+      {
+        id: '',
+        value: '',
+        name: 'Semua',
+      },
+    ];
+
+    const handleClick = () => {
+
+    }
+
+  
+
  // Dummy Default Data
  const [dataTableIsLoading, setDataTableLoading] = useState(true);
  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
    LaravelPaginatedDataDefault
  );

+  
+
  const loadDataTableData = async (appliedFilter: any | null = null) => {
    setDataTableLoading(true);
+    const year = startDate?.getFullYear();
+    const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
+    
+    const year1 = endDate?.getFullYear();
+    const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+    const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+    const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
+
    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/claims', { params: filter });
-    // console.log(response.data);
+    const response = await axios.get('/claims', {
+      params: {
+        search: searchText,
+        start_date: formattedDate ? formattedDate : null,
+        end_date:formattedDate1,
+        provider: dataProvider,
+        order: order,
+        orderBy: orderBy,
+        page: perPage,
+      }
+    });
+    
    setDataTableLoading(false);

    setDataTableData(response.data);
  };

+  const getProvider =  async () => {
+    const response = await axios.get('/claims/get-provider');
+    setProviders(response.data)
+  }
+
  const applyFilter = async (searchFilter: { search: string }) => {
    await loadDataTableData(searchFilter);
    setSearchParams(searchFilter);
  };
-
+  
  const handlePageChange = (event: ChangeEvent, value: number): void => {
-    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
-    loadDataTableData(filter);
-    setSearchParams(filter);
+    setPerPage(value);
  };

-  useEffect(() => {
-    loadDataTableData();
-  }, []);
+  const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
+  const handleCloseDialogSubmit = () => {
+      setOpenDialogSubmit(false);
+  }
+
+  function toTitleCase(str: string | null) {
+      return str.replace(/\w\S*/g, function(txt) {
+          return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+      });
+  }
+
+  const [approve, setApprove] = useState('');
+
+  const [reasonDecline, setReasonDecline] = useState('');
+
+  const handleReasonDeclineChange = (event) => {
+      setReasonDecline(event.target.value);
+      // Tambahkan logika yang diperlukan di sini
+  };
+
+  const handleSubmitData = () => {
+    //approve or decline
+    if (!reasonDecline && approve == 'decline') {
+      enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
+      return false;
+    }
+    Promise.all(selectedRows.map(send_bulk))
+      .then(() => {
+        enqueueSnackbar('All requests processed successfully', { variant: 'success' });
+        setOpenDialogSubmit(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 5000); // Reload the page after 5 seconds
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.response?.data?.message ?? 'Something went wrong!', { variant: 'error' });
+      });
+  };
+  
+  function send_bulk(id) {
+    return axios.post(`claims/${id}/${approve}`, { reasonDecline: reasonDecline });
+  }
+  
+
+  // useEffect(() => {
+  //   loadDataTableData();
+  //   getProvider();
+  // }, []);

  const headStyle = {
    fontWeight: 'bold',
  };
+  const headCells = [
+    {
+      id: 'code',
+      align: 'left',
+      label: 'Code',
+      isSort: true,
+    },
+    {
+      id: 'name',
+      align: 'left',
+      label: 'Name',
+      isSort: false,
+    },

+    {
+      id: 'member_id',
+      align: 'left',
+      label: 'Member ID',
+      isSort: false,
+    },
+    {
+      id: 'created_at',
+      align: 'left',
+      label: 'Date Submission',
+      isSort: true,
+    },
+    {
+      id: 'plan_code',
+      align: 'left',
+      label: 'Plan ID',
+      isSort: true,
+    },
+    {
+      id: 'service_code',
+      align: 'left',
+      label: 'Service',
+      isSort: false,
+    },
+    {
+      id: 'corporate_policies',
+      align: 'left',
+      label: 'Policy Number',
+      isSort: true,
+    },
+    {
+      id: 'provider',
+      align: 'left',
+      label: 'Provider',
+      isSort: false,
+    },
+    {
+      id: 'tot_bill',
+      align: 'left',
+      label: 'Total Billing',
+      isSort: false,
+    },
+    {
+      id: 'status',
+      align: 'left',
+      label: 'Status',
+      isSort: false,
+    },
+    {
+      id: 'action',
+      align: 'left',
+      label: '',
+      isSort: false,
+    },
+  ];
+  
+  const orders = {
+    order: order,
+    setOrder: setOrder,
+    orderBy: orderBy,
+    setOrderBy: setOrderBy,
+  };
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    handleRequestSort(event, property);
+  };
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orders?.orderBy === property && orders?.order === 'asc';
+
+    orders?.setOrder(isAsc ? 'desc' : 'asc');
+    orders?.setOrderBy(property);
+  };
  // Called on every row to map the data to the columns
  function createData(data: Claims): Claims  {
    return {
@@ -171,10 +498,18 @@ export default function List() {
  {
    /* ------------------ TABLE ROW ------------------ */
  }
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
+  function Row(props: { row: ReturnType<typeof createData>, isSelected: boolean, onSelect: (id: string) => void }) {
+    const { row, isSelected, onSelect } = props;
+     // Memperbaiki destrukturisasi props
+  
+    const handleRowCheckboxChange = () => {
+      onSelect(row.id); // Panggil fungsi onSelect dari komponen induk dengan id baris saat checkbox di baris diklik
+    };
+  
    const [open, setOpen] = React.useState(false);

+    const test = 1000;
+
    return (
      <React.Fragment>
        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
@@ -183,16 +518,22 @@ export default function List() {
              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
            </IconButton>
          </TableCell> */}
-          <TableCell align="left">{row.claim_request?.code}</TableCell>
+          <TableCell align="left">
+            {row?.status == 'requested' ? (
+              <Checkbox checked={isSelected} onChange={handleRowCheckboxChange} />
+            ):''}
+          </TableCell>
+          <TableCell align="left">{row?.code}</TableCell>
          {/* <TableCell align="left">{row.code}</TableCell> */}
-          <TableCell align="left">{row.member?.current_plan?.code}</TableCell>
-          <TableCell align="left">{row.member?.current_corporate?.payor_id}</TableCell>
-          <TableCell align="left">{row.member?.current_corporate?.code}</TableCell>
-          <TableCell align="left">{row.member?.current_corporate?.current_policy?.code}</TableCell>
-          <TableCell align="left">{row.member?.member_id}</TableCell>
-          <TableCell align="left">{row.benefit_desc}</TableCell>
-         
-          <TableCell align="center">
+          <TableCell align="left">{row?.name}</TableCell>
+          <TableCell align="left">{row?.member_id}</TableCell>
+          <TableCell align="left">{row?.created_at ? fDateTime(row?.created_at) : ''}</TableCell>
+          <TableCell align="left">{row?.plan_code}</TableCell>
+          <TableCell align="left">{row?.service_code}</TableCell>
+          <TableCell align="left">{row?.corporate_policies}</TableCell>
+          <TableCell align="left">{row?.provider}</TableCell>
+          <TableCell align="left">Rp. {row?.tot_bill?.toLocaleString('id-ID')}</TableCell>
+          <TableCell align="left">
            {row.status == 'draft' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
            {row.status == 'requested' && (<Label color='primary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
            {row.status == 'received' && (<Label color='secondary' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
@@ -202,18 +543,17 @@ export default function List() {
            {row.status == 'declined' && (<Label color='error' variant='ghost'>{capitalizeFirstLetter(row.status)}</Label>)}
          </TableCell>

-          <TableMoreMenu actions={
-              <>
-              <MenuItem onClick={() =>navigate(`/claims/edit/${row.id}`) }>
-                <Edit />
-                Edit
-              </MenuItem>
-              <MenuItem onClick={() => navigate('/claims/detail/'+row.id+'') }>
-                  <FindInPageOutlinedIcon />
-                  Detail
-              </MenuItem>
-              </>
-            } />
+          <TableCell align="left">
+            <TableMoreMenu actions={
+                <>
+                <MenuItem onClick={() => navigate('/claims/detail/'+row.id_log+'/'+row.id+'') }>
+                    <FindInPageOutlinedIcon />
+                    Detail
+                </MenuItem>
+                </>
+              } />
+          </TableCell>
+          

          
        </TableRow>
@@ -236,40 +576,77 @@ export default function List() {
    /* ------------------ END TABLE ROW ------------------ */
  }

+  
+
  function TableContent() {
    return (
      <Table aria-label="collapsible table">
        {/* ------------------ TABLE HEADER ------------------ */}
        <TableHead>
          <TableRow>
-            {/* <TableCell style={headStyle} align="left" /> */}
-            <TableCell style={headStyle} align="left">
-              Code
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Plan ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Payor ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Corporate ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Policy Number
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Member ID
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Benefit Desc
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Status
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              
-            </TableCell>
+            {selectedRows.length > 0 ? ( 
+              <>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }}  align="left" colSpan={2}>
+                  <Stack direction="row">
+                    <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                    {selectedRows.length > 0 ? selectedRows.length : '0'}  &nbsp;<Typography variant='subtitle2'>Selected</Typography>
+                  </Stack>
+                </TableCell>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={6}>
+                  
+                </TableCell>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }} align="right" colSpan={2}>
+                  <Button variant="text" color="error" startIcon={<CancelIcon />} onClick={() => {setOpenDialogSubmit(true);
+                                        setApprove('decline');}}>
+                    <Typography variant='subtitle2'>Decline</Typography>
+                  </Button>
+                </TableCell>
+                <TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={2}>
+                  <Button variant="text" color="primary" startIcon={<CheckCircleIcon />} onClick={() => {setOpenDialogSubmit(true);
+                                        setApprove('approve');}}>
+                    <Typography variant='subtitle2'>Approve</Typography>
+                  </Button>
+                </TableCell>
+                
+              </>
+            ) : (
+              <>
+              <TableCell style={headStyle} align="left">
+                  <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                </TableCell>
+              {headCells &&
+                headCells.map((headCell, index) => (
+                  <TableCell
+                    key={index}
+                    sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
+                    // @ts-ignore
+                    align={headCell.align}
+                    sx={{ padding: 2 }}
+                    width={headCell.width ? headCell.width : 'auto'}
+                  >
+                    {headCell.isSort ? (
+                      <TableSortLabel
+                        active={orders?.orderBy === headCell.id}
+                        direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
+                        onClick={createSortHandler(headCell.id)}
+                      >
+                        {headCell.label}
+                        {orders?.orderBy === headCell.id ? (
+                          <Box component="span" sx={visuallyHidden}>
+                            {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                          </Box>
+                        ) : null}
+                      </TableSortLabel>
+                    ) : (
+                      headCell.label
+                    )}
+                  </TableCell>
+                ))}
+              </>
+
+            )}
+            
+          
          </TableRow>
        </TableHead>
        {/* ------------------ END TABLE HEADER ------------------ */}
@@ -278,7 +655,7 @@ export default function List() {
        {dataTableIsLoading ? (
          <TableBody>
            <TableRow>
-              <TableCell colSpan={8} align="center">
+              <TableCell colSpan={11} align="center">
                Loading
              </TableCell>
            </TableRow>
@@ -286,7 +663,7 @@ export default function List() {
        ) : dataTableData.data.length === 0 ? (
          <TableBody>
            <TableRow>
-              <TableCell colSpan={8} align="center">
+              <TableCell colSpan={11} align="center">
                No Data
              </TableCell>
            </TableRow>
@@ -294,7 +671,7 @@ export default function List() {
        ) : (
          <TableBody>
            {dataTableData.data.map((row) => (
-              <Row key={row.id} row={row} />
+              <Row key={row.id} row={row} isSelected={selectedRows.includes(row.id)} onSelect={handleRowSelect} />
            ))}
          </TableBody>
        )}
@@ -305,7 +682,131 @@ export default function List() {

  return (
    <Card>
-      <ImportForm />
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+        <form style={{ width: '100%' }}>
+        <Grid container spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item xs={12} md={3}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              value={searchText}
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleSearchSubmit(event);
+                }
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search />
+                  </InputAdornment>
+                ),
+                placeholder: 'Search Code or Name',
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} md={4} display="flex" sx={{ gap: '16px' }}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={startDate}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  
+                  // loadDataTableData();
+                  setStartDate(value);
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={endDate}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  setEndDate(value);
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item xs={12} md={2}>
+          {
+          providers && (
+            <Autocomplete
+                id="provider"
+                options={providers}
+                getOptionLabel={(option) => option.name || ''}
+                value={providers.find((item) => item.id === dataProvider) || null}
+                onChange={(event, value) => {
+                  if (value) {
+                    setDataProvider(value.id);
+                  } else {
+                    setDataProvider(null);
+                  }
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="Provider"
+                    fullWidth
+                  />
+                )}
+              />
+            )
+          }
+          </Grid>
+          <Grid item xs={12} md={3} display="flex" sx={{ gap: '16px' }}>
+              <FormControl >
+                <LoadingButton
+                  id="upload-button"
+                  variant="outlined"
+                  startIcon={<UploadIcon />}
+                  sx={{ p: 1.8 }}
+                  // onClick={handleExportReport}
+                  loading={isLoadingImport}
+                >
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Import
+                  </Typography>
+                </LoadingButton>
+              </FormControl>
+              <FormControl >
+                <LoadingButton
+                  id="upload-button"
+                  variant="contained"
+                  startIcon={<Download />}
+                  sx={{ p: 1.8 }}
+                  onClick={handleExportReport}
+                  loading={isLoading}
+                >
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Export
+                  </Typography>
+                </LoadingButton>
+              </FormControl>
+            </Grid>
+        </Grid>
+      </form>
+        </Grid>
+      </Grid>

      <DataTable
        isLoading={dataTableIsLoading}
@@ -314,6 +815,43 @@ export default function List() {
        handlePageChange={handlePageChange}
        TableContent={<TableContent />}
      />
+      <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>
+                        
+                        <Stack spacing={2} padding={2}>
+                            <Typography variant='body1'>Are you sure to {toTitleCase(approve)} this claim ?</Typography>
+                            {approve == "decline" ? (
+                                <Stack direction='row' spacing={2} marginTop={2}>
+                                <TextField
+                                    id="outlined-multiline-static"
+                                    label="Reason decline"
+                                    multiline
+                                    rows={4} // Tentukan jumlah baris yang diinginkan
+                                    defaultValue=""
+                                    onChange={handleReasonDeclineChange}
+                                    variant="outlined"
+                                    sx={{width:'100%'}}
+                                    // fullWidth // Gunakan ini jika Anda ingin input memenuhi lebar Stack
+                                />
+                                </Stack>
+                                  ): ''}
+                        </Stack>
+                    </DialogContent>
+                    <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
+                    <Button sx={{backgroundColor: (approve === 'decline' ? '' : '#19BBBB'), color: (approve === 'decline' ? '#FF4842' : ''), borderColor: '#FF4842'}} onClick={handleSubmitData} variant={(approve === 'decline' ? 'outlined' : 'contained')}>{(approve === "decline" ? 'Decline' : 'Approve')}</Button>
+                    </DialogActions>
+                </Dialog>
    </Card>
  );
 }
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -456,7 +456,7 @@ export default function Router() {
          element: <ClaimsCreate />,
        },
        {
-          path: 'claims/detail/:id',
+          path: 'claims/detail/:id/:id_claim',
          element: <ClaimsDetail />,
        },
        {
--- a/frontend/hospital-portal/src/sections/dashboard/DialogClaimSubmit.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/DialogClaimSubmit.tsx
@@ -76,7 +76,7 @@ export default function DialogClaimSubmit({ member, getData, onClose, handleSubm
      <Card sx={{ p: 1, background: '#f4f6f8'}}>
        <Stack direction="row">
          <Avatar
-            src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
+            src=""
            alt={member?.full_name ?? ''}
            sx={{ marginTop: 1, width: 48, height: 48 }}
          />