add fitur delete dan upload ulang file di FINAL log

Modules/Client/Transformers/AlarmCenter/DataServiceMonitoring.php

@@ -118,7 +118,11 @@ class DataServiceMonitoring extends JsonResource
                         ->map(function ($requestLogDailyMonitoring) {
                             $arr_document = [];
                             $document     = DB::table('files')
-                                                ->where(['fileable_type' => 'App\Models\LaboratoriumResult', 'fileable_id' => $requestLogDailyMonitoring->id])
+                                                ->where([
+                                                    'fileable_type' => 'App\Models\LaboratoriumResult', 
+                                                    'fileable_id' => $requestLogDailyMonitoring->id,
+                                                    'deleted_at' => null
+                                                ])
                                                 ->whereIn('type', ['medical-action-letter', 'confirmation-medical-letter'])
                                                 ->get();
                             if ($document){
@@ -173,7 +177,11 @@ class DataServiceMonitoring extends JsonResource
                         ->map(function ($requestLogDailyMonitoring) {
                             $arr_document = [];
                             $document     = DB::table('files')
-                                                ->where(['fileable_type' => 'App\Models\LaboratoriumResult', 'fileable_id' => $requestLogDailyMonitoring->id])
+                                                ->where([
+                                                    'fileable_type' => 'App\Models\LaboratoriumResult', 
+                                                    'fileable_id' => $requestLogDailyMonitoring->id,
+                                                    'deleted_at' => null
+                                                ])
                                                 ->whereIn('type', ['laboratorium-result'])
                                                 ->get();
                             if ($document){

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

@@ -861,17 +861,15 @@ class RequestLogController extends Controller
         return self::$code_prefix . $sparator. $data['source'] . $sparator. $data['provideCode'] . $sparator. $data['date'] . $sparator . $data['policy'] . $sparator. $data['member_code'] . $sparator. str_pad($next_number, 5, '0', STR_PAD_LEFT);
     }
 
-    public function requestFiles(Request $request, $claim_id)
+    public function requestFiles(Request $request, $id)
     {
-
+        $requestLog = RequestLog::findOrFail($id);
-        if ($request->hasFile('fileDiagnosis')) {
+        if ($request->hasFile('result_files')) {
-            foreach ($request->fileDiagnosis as $file) {
+            foreach ($request->result_files as $file) {
-                $pathFile = File::storeFile('claim-diagnosis', $claim_id, $file);
+                $pathFile = File::storeFile('final-log-result', $id, $file);
-                File::updateOrCreate([
+                $requestLog->files()->updateOrCreate([
-                    'fileable_type'=>'App\Models\RequestLog',
+                    'type' => 'final-log-result',
-                    'fileable_id' => $claim_id,
+                    'name' => File::getFileName('final-log-result', $id, $file),
-                    'type' => 'claim-diagnosis',
-                    'name' => File::getFileName('claim-diagnosis', $claim_id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
                     'path' => $pathFile,
@@ -881,14 +879,12 @@ class RequestLogController extends Controller
             }
         }
 
-        if ($request->hasFile('fileKondisis')) {
+        if ($request->hasFile('diagnosa_files')) {
-            foreach ($request->fileKondisis as $file) {
+            foreach ($request->diagnosa_files as $file) {
-                $pathFile = File::storeFile('claim-kondisi', $claim_id, $file);
+                $pathFile = File::storeFile('final-log-diagnosis', $id, $file);
-                File::updateOrCreate([
+                $requestLog->files()->updateOrCreate([
-                    'fileable_type'=>'App\Models\RequestLog',
+                    'type' => 'final-log-diagnosis',
-                    'fileable_id' => $claim_id,
+                    'name' => File::getFileName('final-log-diagnosis', $id, $file),
-                    'type' => 'claim-kondisi',
-                    'name' => File::getFileName('claim-kondisi', $claim_id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
                     'path' => $pathFile,
@@ -898,23 +894,44 @@ class RequestLogController extends Controller
             }
         }
 
-        if ($request->hasFile('fileResults')) {
+        if ($request->hasFile('kondisi_files')) {
-            foreach ($request->fileResults as $file) {
+            foreach ($request->kondisi_files as $file) {
-                $pathFile = File::storeFile('claim-result', $claim_id, $file);
+                $pathFile = File::storeFile('final-log-kondisi', $id, $file);
-                File::updateOrCreate([
+                $requestLog->files()->updateOrCreate([
-                    'fileable_type'=>'App\Models\RequestLog',
+                    'type' => 'final-log-kondisi',
-                    'fileable_id' => $claim_id,
+                    'name' => File::getFileName('final-log-kondisi', $id, $file),
-                    'type' => 'claim-result',
-                    'name' => File::getFileName('claim-result', $claim_id, $file),
                     'original_name' => $file->getClientOriginalName(),
                     'extension' => $file->getClientOriginalExtension(),
-                    'path' => $pathFile,
+                    'path' =>  $pathFile,
                     'created_by' => auth()->user()->id,
                     'updated_by' => auth()->user()->id,
                 ]);
             }
         }
 
-        return Helper::responseJson(data: $request->toArray(), message: 'Invoice Success Uploaded');
+        return Helper::responseJson(data: $request->toArray(), message: 'File Success Uploaded');
+    }
+
+    public function deleteFiles(Request $request, $id)
+    {
+        // Path file yang akan dihapus
+        $path = 'public/' . $request->path;
+
+        // Menghapus file dari penyimpanan
+        if (Storage::exists($path)) {
+            Storage::delete($path);
+            
+            // Update entri file dari basis data
+            File::where('path', $request->path)->update([
+                'deleted_at' => Carbon::now(), // Gunakan Carbon untuk mendapatkan tanggal dan waktu saat ini
+                'deleted_by' => auth()->user()->id,
+                'reason'     => $request->reason
+            ]);
+            // Mengembalikan respons JSON sukses
+            return Helper::responseJson(data: $request->toArray(), message: 'File successfully deleted');
+        }
+
+        // Jika file tidak ditemukan di penyimpanan, kirim respons JSON gagal
+        return Helper::responseJson(data: $request->toArray(), message: 'File deletion failed');
     }
 }

Modules/Internal/Routes/api.php

@@ -267,6 +267,8 @@ Route::prefix('internal')->group(function () {
         Route::get('customer-service/request/{id}/download', [RequestLogController::class, 'generateRequestLog']);
         Route::post('customer-service/request/import', [RequestLogController::class, 'importRequestLog']);
         Route::get('customer-service/request/data', [RequestLogController::class, 'generateDataRequestLogExcel']);
+        Route::post('customer-service/request/{id}/add_file', [RequestLogController::class, 'requestFiles']);
+        Route::post('customer-service/request/{id}/delete_file', [RequestLogController::class, 'deleteFiles']);
 
         Route::post('customer-service/request/final-log', [RequestLogController::class, 'updateFinalLog']);
         

app/Models/File.php

@@ -21,6 +21,7 @@ class File extends Model
         'path',
         'created_by',
         'updated_by',
+        'reason'
     ];
 
     protected $hidden = [

app/Models/RequestLog.php

@@ -220,7 +220,7 @@ class RequestLog extends Model
 
     public function files()
     {
-        return $this->morphMany(File::class, 'fileable');
+        return $this->morphMany(File::class, 'fileable')->whereNull('deleted_at');
     }
 
     public function claimResults()

database/migrations/2024_02_09_152415_add_column_reason_to_files_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('files', function (Blueprint $table) {
+            $table->string('reason')->after('deleted_at')->nullable()->default(null);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('files', function (Blueprint $table) {
+            $table->dropColumn('reason');
+        });
+    }
+};

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx

@@ -553,7 +553,7 @@ export default function DetailMonitoringList() {
                                 <Grid container spacing={3}>
                                     <Grid item xs={12}>
                                         <Typography variant="body1" component="div">
-                                                Laboratorium Result
+                                            Pemeriksaan Penunjang
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={6}>
@@ -598,7 +598,7 @@ export default function DetailMonitoringList() {
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Typography variant="body1" component="div">
-                                                Laboratorium Result
+                                            Pemeriksaan Penunjang
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12}>

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

@@ -1,7 +1,10 @@
-import { Card, Typography } from "@mui/material";
+import { Card, IconButton, Typography } from "@mui/material";
 import { Stack } from '@mui/material';
 import { DetailFinalLogType } from "../FinalLog/Model/Types";
 import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import { Button } from "@mui/material";
+import AddIcon from '@mui/icons-material/Add';
+import { Delete } from "@mui/icons-material";
 
 
 type CardDetail = {
@@ -26,25 +29,40 @@ const marginBottom2 = {
 export default function CardFile({requestLog} : CardDetail ) {
     return (
         <Card sx={{padding:2}}  >
-            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
                 <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
-                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
+                    <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
-                {requestLog?.files?.map((documentType, index) => (
+                </Stack>
-                    <Stack direction="column" spacing={2} key={index}>
+                <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
-                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
-                        <a
+                        // setDialogMedicine(true)
-                            href={documentType.url}
+                    }} >
-                            style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                        <Typography variant="button" display="block">Files</Typography>
-                            target="_blank"
+                    </Button>
-                        >
+                </Stack>
-                            <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+            </Stack>
-                        </a>
+            {requestLog?.files?.map((documentType, index) => (
-                        </Stack>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
+                    <Stack direction="column" spacing={2} >
+                     <a
+                      href={documentType.url}
+                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                         target="_blank"
+                     >
+                         <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+                     </a>
                     </Stack>
-                ))}
+                    <Stack direction="column" spacing={2}>
-            </Stack>
+                    <IconButton onClick={() => {}} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
-            </Stack>
+                       <Delete color='error' fontSize="small" />
+                     </IconButton>
+                    </Stack>
+                </Stack>
+            ))}
         </Card>
+
+    
+    
     )
    
 }

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

@@ -0,0 +1,144 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { TextField } from "@mui/material";
+
+
+type DialogDeleteType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    id: number|undefined;
+    path: string; 
+}
+
+export default function DialogDeleteFileLog({id, path,  setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+        resetForm();
+    }
+
+    const [isReasonSelected, setIsReasonSelected] = useState(false);
+   
+    const reasons = [
+        { value: 'agreement', label: 'Agreement changed' },
+        { value: 'endorsement', label: 'Endorsement' },
+        { value: 'renewal', label: 'Renewal' },
+        { value: 'wrong_setting', label: 'Wrong Setting' },
+        // Add more options as needed
+    ];
+    const [formData, setFormData] = useState({
+        path: path,
+        reason: null
+    });
+
+    const resetForm = () => {
+        setFormData({
+            reason: null,
+            path: path
+        });
+    };
+
+    useEffect(() => {
+        // Update formData setiap kali approve berubah
+        setFormData(prevData => ({
+          ...prevData,
+          path: path || '',
+        }));
+    }, [path]);
+
+    const handleChange = (field, value) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [field]: value,
+        }));
+        if (field === 'reason') {
+            setIsReasonSelected(!!value);
+        }
+
+    };
+
+    const handleSubmit = () => {
+        if (isReasonSelected && formData.reason !== '') {
+            console.log(formData)
+            axios
+            .post(`customer-service/request/${id}/delete_file`, formData)
+            .then((response) => {
+                enqueueSnackbar('File LOG has Deleted', { variant: 'success' });
+                setOpenDialog(false);
+                window.location.reload()
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+        } else {
+            setIsReasonSelected(false);
+            alert('Silakan pilih alasan sebelum menghapus data.');
+        }
+        
+    }
+
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to delete this file Final LOG ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                <Card sx={{padding:2, marginTop:2}}  >
+                    <Stack direction='row' spacing={2} sx={marginBottom2}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                        <Autocomplete
+                            options={reasons}
+                            getOptionLabel={(option) => option.label}
+                            fullWidth
+                            value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                            onChange={(e, newValue) => handleChange('reason', newValue?.value)}
+                            renderInput={(params) => (
+                                <TextField
+                                    {...params}
+                                    label="Reason"
+                                    variant="outlined"
+                                    required
+                                    error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                    helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+
+                                />
+                            )}
+                        />
+                    </Stack>
+                </Card>
+            </Grid>
+            <DialogActions>
+                <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+            </DialogActions>
+        </Stack>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Delete File Final LOG"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xs"
+        />
+      );
+}

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

@@ -0,0 +1,322 @@
+import { styled } from '@mui/material/styles';
+import Iconify from '@/components/Iconify';
+import { fCurrency } from '@/utils/formatNumber';
+import { LoadingButton } from '@mui/lab';
+import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box } from '@mui/material';
+import { Card } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import { fPostFormat } from '@/utils/formatTime';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import { useRef, useState, useContext, useEffect } from 'react';
+import { makeFormData } from '@/utils/jsonToFormData';
+import { format } from 'date-fns';
+// import { LanguageContext } from '@/contexts/LanguageContext';
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import TextField from '@mui/material/TextField';
+import MuiDialog from '@/components/MuiDialog';
+
+type DialogUploadType = {
+  openDialog: boolean;
+  setOpenDialog: any;
+  onSubmit?: void;
+  id: number|undefined;
+}
+export default function DialogUploadFileFinalLog({ id, openDialog, setOpenDialog }: DialogUploadType) {
+  // ----------------------------------------------------------------------
+  // Files Diagnosa
+
+  const fileDiagnosaInput = useRef<HTMLInputElement>(null);
+  const [fileDiagnosas, setFileDiagnosas] = useState<any>([]);
+
+  const handleDiagnosaInputChange = (event:any) => {
+    if (event.target.files[0]) {
+      setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
+    } else {
+      console.log('NO FILE');
+    }
+  };
+  const removeDiagnosaFiles = (filesState:any, index:any) => {
+    setFileDiagnosas(
+      filesState.filter((file:any, fileIndex:any) => {
+        return fileIndex != index;
+      })
+    );
+  };
+
+  // ----------------------------------------------------------------------
+  // Files Result Kondisi
+
+  const fileKondisiInput = useRef<HTMLInputElement>(null);
+  const [fileKondisis, setFileKondisis] = useState<any>([]);
+
+  const handleKondisiInputChange = (event:any) => {
+    if (event.target.files[0]) {
+      setFileKondisis([...fileKondisis, ...event.target.files]);
+    } else {
+      console.log('NO FILE');
+    }
+  };
+  const removeKondisiFiles = (filesState:any, index:any) => {
+    setFileKondisis(
+      filesState.filter((file:any, fileIndex:any) => {
+        return fileIndex != index;
+      })
+    );
+  };
+
+  // ----------------------------------------------------------------------
+  // Files Result Hasil Penunjang
+
+  const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
+  const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState<any>([]);
+
+  const handleResultInputChange = (event:any) => {
+    if (event.target.files[0]) {
+      setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
+    } else {
+      console.log('NO FILE');
+    }
+  };
+  const removeFiles = (filesState:any, index:any) => {
+    setFileHasilPenunjangs(
+      filesState.filter((file:any, fileIndex:any) => {
+        return fileIndex != index;
+      })
+    );
+  };
+
+  // --------------------------------------------------------------
+  // Submit Form
+  const [submitLoading, setSubmitLoading] = useState(false);
+  function submitRequestFinalLog() {
+    setSubmitLoading(true);
+    const formData = makeFormData({
+      request_logs_id: id,
+      result_files: fileHasilPenunjangs,
+      diagnosa_files: fileDiagnosas,
+      kondisi_files: fileKondisis,
+    });
+    axios
+      .post(`/customer-service/request/${id}/add_file`, formData)
+      .then((response) => {
+        enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
+        setOpenDialog(false);
+        window.location.reload()
+      })
+      .catch(({ response }) => {
+        enqueueSnackbar('Something Went Wrong', { variant: 'error' });
+      })
+      .then(() => {
+        setSubmitLoading(false);
+      });
+  }
+
+  const getContent = () => (
+<Stack>
+      <Stack
+        divider={<Divider orientation="horizontal" flexItem />}
+        spacing={4}
+        sx={{ marginY: 2, marginBottom: 6 }}
+      >
+        {/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
+        <Stack sx={{ marginTop: 2 }}>
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
+            File Kondisi
+          </Typography>
+          {/* <Typography variant="body2">Hasil Lab, </Typography> */}
+          <Stack
+            divider={<Divider orientation="horizontal" flexItem />}
+            spacing={1}
+            sx={{ marginY: 2 }}
+          >
+            {fileKondisis &&
+              fileKondisis.map((file:any, index:any) => (
+                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                  <Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
+                  <Iconify
+                    icon="eva:trash-2-outline"
+                    color={'darkred'}
+                    onClick={() => {
+                      removeKondisiFiles(fileKondisis, index);
+                    }}
+                  ></Iconify>
+                </Stack>
+              ))}
+          </Stack>
+           <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileKondisiInput.current?.click()}>
+            <Box
+              sx={{
+                display: 'flex',
+                placeItems: 'center',
+                gap: 1,
+                placeContent: 'center',
+                
+
+              }}
+            >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+              <Typography variant="body1" fontWeight="bold">
+                Upload
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileKondisiInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleKondisiInputChange}
+              accept="application/pdf,image/*"
+            />
+          </ButtonBase>
+        </Stack>
+
+        {/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
+        <Stack sx={{ marginTop: 2 }}>
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
+              File Diagnosa
+          </Typography>
+          {/* <Typography variant="body2">Hasil Lab, </Typography> */}
+          <Stack
+            divider={<Divider orientation="horizontal" flexItem />}
+            spacing={1}
+            sx={{ marginY: 2 }}
+          >
+            {fileDiagnosas &&
+              fileDiagnosas.map((file:any, index:any) => (
+                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                  <Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
+                  <Iconify
+                    icon="eva:trash-2-outline"
+                    color={'darkred'}
+                    onClick={() => {
+                      removeDiagnosaFiles(fileDiagnosas, index);
+                    }}
+                  ></Iconify>
+                </Stack>
+              ))}
+            {/* <Stack direction="row" justifyContent={'space-between'}>
+                                      <Typography>Nama File .pdf</Typography>
+                                      <Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
+                                  </Stack> */}
+          </Stack>
+          {/* { JSON.stringify(filesResult) } */}
+          <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.current?.click()}>
+            <Box
+              sx={{
+                display: 'flex',
+                placeItems: 'center',
+                gap: 1,
+                placeContent: 'center',
+                
+
+              }}
+            >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+              <Typography variant="body1" fontWeight="bold">
+                Upload
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileDiagnosaInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleDiagnosaInputChange}
+              accept="application/pdf,image/*"
+            />
+          </ButtonBase>
+        </Stack>
+
+        {/* -------------------------------Upload Dokumen Hasil Penunjang------------------------------- */}
+        <Stack sx={{ marginTop: 2 }}>
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
+            File Hasil Penunjang
+          </Typography>
+          {/* <Typography variant="body2">Hasil Lab, </Typography> */}
+          <Stack
+            divider={<Divider orientation="horizontal" flexItem />}
+            spacing={1}
+            sx={{ marginY: 2 }}
+          >
+            {fileHasilPenunjangs &&
+              fileHasilPenunjangs.map((file:any, index:any) => (
+                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                  <Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
+                  <Iconify
+                    icon="eva:trash-2-outline"
+                    color={'darkred'}
+                    onClick={() => {
+                      removeFiles(fileHasilPenunjangs, index);
+                    }}
+                  ></Iconify>
+                </Stack>
+              ))}
+            {/* <Stack direction="row" justifyContent={'space-between'}>
+                                      <Typography>Nama File .pdf</Typography>
+                                      <Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
+                                  </Stack> */}
+          </Stack>
+          {/* { JSON.stringify(filesResult) } */}
+          <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+                bgcolor: '#919EAB52',
+                borderRadius: '8px',
+                width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.current?.click()}>
+            <Box
+              sx={{
+                display: 'flex',
+                placeItems: 'center',
+                gap: 1,
+                placeContent: 'center',
+                
+
+              }}
+            >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+              <Typography variant="body1" fontWeight="bold">
+                Upload
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileHasilPenunjangInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleResultInputChange}
+              accept="application/pdf,image/*"
+            />
+          </ButtonBase>
+        </Stack>
+      </Stack>
+      <LoadingButton
+        variant="contained"
+        sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
+        onClick={() => {
+          submitRequestFinalLog();
+        }}
+        loading={submitLoading}
+      >
+        Upload File
+      </LoadingButton>
+    </Stack>
+  )
+  return (
+    <MuiDialog
+      title={{name: "Upload Final LOG"}}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+      maxWidth="md"
+    />
+  );
+}

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

@@ -55,6 +55,8 @@ import palette from '@/theme/palette';
 import CardMedicine from '../Components/CardMedicine';
 import CardFile from '../Components/CardFile';
 import DialogEditFinalLOG from './Components/DialogEditFinalLOG';
+import DialogDeleteFileLog from './Components/DialogDeleteFileLog';
+import DialogUploadFileFinalLog from './Components/DialogUploadFileFinalLog';
 
 
 // ----------------------------------------------------------------------
@@ -131,6 +133,12 @@ export default function Detail() {
         return accumulator + (item.excess_paid || 0);
       }, 0);
       
+    // Handle Delete File LOG
+    const [pathFile, setPathFile] = useState('')
+    const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
+
+    // Handle Upload File LOG
+    const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
 
     return (
         <Page title='Detail'>
@@ -260,27 +268,6 @@ export default function Detail() {
                     </CardExclusion> */}
                 </Grid>
 
-                {/* Hospital Care */}
-                {/* <Grid item xs={12} md={12}>
-                    <Card sx={{padding:2}}  >
-                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
-                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
-                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
-                                setDialogHospital(true);
-                            }} >
-                                    <Typography variant="button" display="block">History</Typography>
-                                </Button>
-                        </Stack>
-                    </Card>
-                    <DialogHospitalCare
-                        requestLog={requestLog}
-                        openDialog={openDialogHospital}
-                        setOpenDialog={setDialogHospital}
-                        
-                    >
-                    </DialogHospitalCare>
-                </Grid> */}
-
                 {/* Benefit */}
                 <Grid item xs={12} md={12}>
                     <Card sx={{padding:2}}  >
@@ -595,9 +582,54 @@ export default function Detail() {
 
                 {/* File */}
                 <Grid item xs={12} md={12}>
-                    <CardFile
+                    <Card sx={{padding:2}}  >
-                        requestLog={requestLog}
+                        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
-                    />
+                            <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
+                            </Stack>
+                            <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
+                                    setDialogUploadFileLog(true)
+                                }} >
+                                    <Typography variant="button" display="block">Files</Typography>
+                                </Button>
+                            </Stack>
+                        </Stack>
+                        {requestLog?.files?.map((documentType, index) => (
+                            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
+                                <Stack direction="column" spacing={2} >
+                                <a
+                                href={documentType.url}
+                                    style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                                    target="_blank"
+                                >
+                                    <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+                                </a>
+                                </Stack>
+                                <Stack direction="column" spacing={2}>
+                                <IconButton onClick={() => {
+                                    setDialogDeleteFileLog(true)
+                                    setPathFile(documentType.path)
+                                }} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
+                                <Delete color='error' fontSize="small" />
+                                </IconButton>
+                                </Stack>
+                            </Stack>
+                        ))}
+
+                        <DialogDeleteFileLog
+                            id={requestLog?.id}
+                            path={pathFile}
+                            setOpenDialog={setDialogDeleteFileLog}
+                            openDialog={dialogDeleteFIleLog}
+                        />
+
+                        <DialogUploadFileFinalLog
+                            id={requestLog?.id}
+                            setOpenDialog={setDialogUploadFileLog}
+                            openDialog={dialogUploadFileLog}
+                        />
+                    </Card>
                 </Grid>
 
                 {requestLog?.status_final_log == 'requested' ? (