ryan
1003 lines
44 KiB
TypeScript
1003 lines
44 KiB
TypeScript
"use client";
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import { FaTrash, FaPlus, FaChevronDown } from 'react-icons/fa';
|
||
import { getRuangan, getTarifRumahSakit, getICD9, getICD10, getApiBaseUrl, type Ruangan, type TarifData, type ICD9, type ICD10 } from '@/lib/api-helper';
|
||
|
||
interface EditPasienModalProps {
|
||
isOpen: boolean;
|
||
billingId: number;
|
||
currentData: {
|
||
nama_pasien: string;
|
||
usia: number;
|
||
jenis_kelamin: string;
|
||
ruangan: string;
|
||
kelas: string;
|
||
tindakan_rs?: string[];
|
||
icd9?: string[];
|
||
icd10?: string[];
|
||
};
|
||
onClose: () => void;
|
||
onSuccess: () => void;
|
||
}
|
||
|
||
const EditPasienModal: React.FC<EditPasienModalProps> = ({
|
||
isOpen,
|
||
billingId,
|
||
currentData,
|
||
onClose,
|
||
onSuccess,
|
||
}) => {
|
||
const [nama, setNama] = useState('');
|
||
const [usia, setUsia] = useState('');
|
||
const [gender, setGender] = useState('');
|
||
const [ruangan, setRuangan] = useState(''); // Store nama_ruangan
|
||
const [ruanganId, setRuanganId] = useState(''); // Store ID_Ruangan
|
||
const [ruanganSearch, setRuanganSearch] = useState('');
|
||
const [ruanganList, setRuanganList] = useState<Ruangan[]>([]);
|
||
const [ruanganDropdownOpen, setRuanganDropdownOpen] = useState(false);
|
||
const ruanganInputRef = useRef<HTMLInputElement>(null);
|
||
const ruanganDropdownRef = useRef<HTMLDivElement>(null);
|
||
|
||
const [kelas, setKelas] = useState('');
|
||
const [tindakan, setTindakan] = useState<string[]>([]);
|
||
const [tindakanInput, setTindakanInput] = useState('');
|
||
const [tindakanList, setTindakanList] = useState<TarifData[]>([]);
|
||
const [tindakanSearch, setTindakanSearch] = useState('');
|
||
const [tindakanDropdownOpen, setTindakanDropdownOpen] = useState(false);
|
||
const tindakanInputRef = useRef<HTMLInputElement>(null);
|
||
const tindakanDropdownRef = useRef<HTMLDivElement>(null);
|
||
|
||
const [icd9, setIcd9] = useState<string[]>([]);
|
||
const [icd9Input, setIcd9Input] = useState('');
|
||
const [icd9List, setIcd9List] = useState<ICD9[]>([]);
|
||
const [icd9Search, setIcd9Search] = useState('');
|
||
const [icd9DropdownOpen, setIcd9DropdownOpen] = useState(false);
|
||
const icd9InputRef = useRef<HTMLInputElement>(null);
|
||
const icd9DropdownRef = useRef<HTMLDivElement>(null);
|
||
|
||
const [icd10, setIcd10] = useState<string[]>([]);
|
||
const [icd10Input, setIcd10Input] = useState('');
|
||
const [icd10List, setIcd10List] = useState<ICD10[]>([]);
|
||
const [icd10Search, setIcd10Search] = useState('');
|
||
const [icd10DropdownOpen, setIcd10DropdownOpen] = useState(false);
|
||
const icd10InputRef = useRef<HTMLInputElement>(null);
|
||
const icd10DropdownRef = useRef<HTMLDivElement>(null);
|
||
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
const [totalTarifRS, setTotalTarifRS] = useState<number>(0);
|
||
const [billingSign, setBillingSign] = useState<string>('');
|
||
|
||
// Hitung total tarif pas tindakan berubah (mirip kayak billing pasien)
|
||
useEffect(() => {
|
||
// Hitung tarif dari SEMUA tindakan yang ada di state sekarang
|
||
console.log('🔄 Calculation useEffect triggered');
|
||
console.log(' tindakan length:', tindakan.length);
|
||
console.log(' tindakan array:', tindakan);
|
||
console.log(' tindakanList length:', tindakanList.length);
|
||
|
||
const total = tindakan.reduce((sum, deskripsi) => {
|
||
const tarif = tindakanList.find(t => (t as any).Deskripsi === deskripsi);
|
||
const harga = (tarif as any)?.Harga || 0;
|
||
console.log(` Tindakan: ${deskripsi} → Harga: ${harga}`);
|
||
return sum + harga;
|
||
}, 0);
|
||
|
||
console.log(`📊 Edit Modal Calculation: Total Tarif RS = ${total}`);
|
||
setTotalTarifRS(total);
|
||
|
||
// Hitung billing sign
|
||
const totalKlaimBPJS = (currentData as any).total_klaim_bpjs || 0;
|
||
const sign = computeBillingSign(total, totalKlaimBPJS);
|
||
console.log(`🎨 Edit Modal Billing Sign: ${sign} (total: ${total}, klaim: ${totalKlaimBPJS})`);
|
||
setBillingSign(sign);
|
||
}, [tindakan, tindakanList, currentData]);
|
||
|
||
// Compute billing sign berdasarkan tarif dan klaim
|
||
const computeBillingSign = (tarif: number, totalKlaim: number): string => {
|
||
const totalTarif = tarif || 0;
|
||
const klaim = totalKlaim || 0;
|
||
|
||
if (!klaim || klaim === 0) return '';
|
||
const percentage = (totalTarif / klaim) * 100;
|
||
|
||
if (percentage <= 25) {
|
||
return "Hijau";
|
||
} else if (percentage <= 50) {
|
||
return "Kuning";
|
||
} else {
|
||
return "Merah";
|
||
}
|
||
};
|
||
|
||
const getBillingSignColor = (sign: string) => {
|
||
switch(sign) {
|
||
case 'Hijau':
|
||
return { bg: 'bg-green-100', border: 'border-green-300', text: 'text-green-700', dot: 'bg-green-500' };
|
||
case 'Kuning':
|
||
return { bg: 'bg-yellow-100', border: 'border-yellow-300', text: 'text-yellow-700', dot: 'bg-yellow-500' };
|
||
case 'Merah':
|
||
return { bg: 'bg-red-100', border: 'border-red-300', text: 'text-red-700', dot: 'bg-red-500' };
|
||
default:
|
||
return { bg: 'bg-gray-100', border: 'border-gray-300', text: 'text-gray-700', dot: 'bg-gray-400' };
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (isOpen && currentData) {
|
||
console.log('📋 Modal opened with currentData:', currentData);
|
||
console.log('📋 currentData.tindakan_rs:', currentData.tindakan_rs);
|
||
console.log('📋 currentData.tindakan_rs type:', typeof currentData.tindakan_rs);
|
||
console.log('📋 currentData.tindakan_rs is Array?:', Array.isArray(currentData.tindakan_rs));
|
||
console.log('📋 currentData.tindakan_rs length:', (currentData.tindakan_rs as any)?.length);
|
||
console.log('📋 Full currentData object keys:', Object.keys(currentData));
|
||
|
||
setNama(currentData.nama_pasien);
|
||
setUsia(currentData.usia.toString());
|
||
setGender(currentData.jenis_kelamin);
|
||
setRuangan(currentData.ruangan);
|
||
setRuanganId(currentData.ruangan);
|
||
setRuanganSearch(currentData.ruangan);
|
||
setKelas(currentData.kelas);
|
||
const tindakanToSet = Array.isArray(currentData.tindakan_rs) ? currentData.tindakan_rs : [];
|
||
setTindakan(tindakanToSet);
|
||
console.log('📋 setTindakan called with:', tindakanToSet);
|
||
setIcd9(currentData.icd9 || []);
|
||
setIcd10(currentData.icd10 || []);
|
||
setError('');
|
||
setSuccess('');
|
||
|
||
// Fetch dropdown data
|
||
const fetchDropdownData = async () => {
|
||
try {
|
||
const [ruanganRes, tarifRes, icd9Res, icd10Res] = await Promise.all([
|
||
getRuangan(),
|
||
getTarifRumahSakit(),
|
||
getICD9(),
|
||
getICD10(),
|
||
]);
|
||
|
||
if (ruanganRes.data) {
|
||
setRuanganList(ruanganRes.data);
|
||
// Find ruangan name by ID or name match
|
||
const foundRuangan = ruanganRes.data.find(r =>
|
||
(r as any).ID_Ruangan?.toString() === currentData.ruangan ||
|
||
(r as any).Nama_Ruangan === currentData.ruangan
|
||
);
|
||
if (foundRuangan) {
|
||
setRuangan((foundRuangan as any).Nama_Ruangan);
|
||
setRuanganId((foundRuangan as any).ID_Ruangan?.toString());
|
||
setRuanganSearch((foundRuangan as any).Nama_Ruangan);
|
||
}
|
||
}
|
||
if (tarifRes.data) {
|
||
console.log('📋 Setting tindakanList with', tarifRes.data.length, 'items');
|
||
setTindakanList(tarifRes.data);
|
||
}
|
||
if (icd9Res.data) setIcd9List(icd9Res.data);
|
||
if (icd10Res.data) setIcd10List(icd10Res.data);
|
||
} catch (err) {
|
||
console.error('Error fetching dropdown data:', err);
|
||
}
|
||
};
|
||
|
||
fetchDropdownData();
|
||
}
|
||
}, [isOpen, currentData]);
|
||
|
||
// Close dropdowns when clicking outside
|
||
useEffect(() => {
|
||
const handleClickOutside = (event: MouseEvent) => {
|
||
const target = event.target as Node;
|
||
|
||
if (ruanganDropdownOpen) {
|
||
const isClickInsideInput = ruanganInputRef.current?.contains(target);
|
||
const isClickInsideDropdown = ruanganDropdownRef.current?.contains(target);
|
||
if (!isClickInsideInput && !isClickInsideDropdown) {
|
||
setRuanganDropdownOpen(false);
|
||
}
|
||
}
|
||
|
||
if (tindakanDropdownOpen) {
|
||
const isClickInsideInput = tindakanInputRef.current?.contains(target);
|
||
const isClickInsideDropdown = tindakanDropdownRef.current?.contains(target);
|
||
if (!isClickInsideInput && !isClickInsideDropdown) {
|
||
setTindakanDropdownOpen(false);
|
||
}
|
||
}
|
||
|
||
if (icd9DropdownOpen) {
|
||
const isClickInsideInput = icd9InputRef.current?.contains(target);
|
||
const isClickInsideDropdown = icd9DropdownRef.current?.contains(target);
|
||
if (!isClickInsideInput && !isClickInsideDropdown) {
|
||
setIcd9DropdownOpen(false);
|
||
}
|
||
}
|
||
|
||
if (icd10DropdownOpen) {
|
||
const isClickInsideInput = icd10InputRef.current?.contains(target);
|
||
const isClickInsideDropdown = icd10DropdownRef.current?.contains(target);
|
||
if (!isClickInsideInput && !isClickInsideDropdown) {
|
||
setIcd10DropdownOpen(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
};
|
||
}, [ruanganDropdownOpen, tindakanDropdownOpen, icd9DropdownOpen, icd10DropdownOpen]);
|
||
|
||
const addTindakan = (kode?: string) => {
|
||
const tarifData = kode
|
||
? tindakanList.find(t => (t as any).KodeRS === kode)
|
||
: tindakanList.find(t => (t as any).Deskripsi === tindakanInput);
|
||
|
||
if (tarifData) {
|
||
const deskripsi = (tarifData as any).Deskripsi;
|
||
if (!tindakan.includes(deskripsi)) {
|
||
setTindakan([...tindakan, deskripsi]);
|
||
setTindakanInput('');
|
||
setTindakanSearch('');
|
||
setTindakanDropdownOpen(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const removeTindakan = (index: number) => {
|
||
setTindakan(tindakan.filter((_, i) => i !== index));
|
||
};
|
||
|
||
const addIcd9 = (kode?: string) => {
|
||
const icdData = kode
|
||
? icd9List.find(i => (i as any).Kode_ICD9 === kode)
|
||
: icd9List.find(i => (i as any).Prosedur === icd9Input);
|
||
|
||
if (icdData) {
|
||
const prosedur = (icdData as any).Prosedur;
|
||
if (!icd9.includes(prosedur)) {
|
||
setIcd9([...icd9, prosedur]);
|
||
setIcd9Input('');
|
||
setIcd9Search('');
|
||
setIcd9DropdownOpen(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const removeIcd9 = (index: number) => {
|
||
setIcd9(icd9.filter((_, i) => i !== index));
|
||
};
|
||
|
||
const addIcd10 = (kode?: string) => {
|
||
const icdData = kode
|
||
? icd10List.find(i => (i as any).Kode_ICD10 === kode)
|
||
: icd10List.find(i => (i as any).Diagnosa === icd10Input);
|
||
|
||
if (icdData) {
|
||
const diagnosa = (icdData as any).Diagnosa;
|
||
if (!icd10.includes(diagnosa)) {
|
||
setIcd10([...icd10, diagnosa]);
|
||
setIcd10Input('');
|
||
setIcd10Search('');
|
||
setIcd10DropdownOpen(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const removeIcd10 = (index: number) => {
|
||
setIcd10(icd10.filter((_, i) => i !== index));
|
||
};
|
||
|
||
const handleSelectRuangan = (ruanganId: string, ruanganName: string) => {
|
||
setRuangan(ruanganName); // Store nama ruangan
|
||
setRuanganId(ruanganId);
|
||
setRuanganSearch(ruanganName);
|
||
setRuanganDropdownOpen(false);
|
||
};
|
||
|
||
// Tampilkan semua ruangan kalo search kosong atau sama pake selected, else filter
|
||
const filteredRuangan = ruanganSearch === '' || ruanganSearch === ruangan
|
||
? ruanganList
|
||
: ruanganList.filter(r =>
|
||
(r as any).Nama_Ruangan?.toLowerCase().includes(ruanganSearch.toLowerCase())
|
||
);
|
||
|
||
const filteredTindakan = tindakanList.filter(t =>
|
||
(t as any).Deskripsi?.toLowerCase().includes(tindakanSearch.toLowerCase()) ||
|
||
(t as any).KodeRS?.toLowerCase().includes(tindakanSearch.toLowerCase())
|
||
);
|
||
|
||
const filteredIcd9 = icd9List.filter(i =>
|
||
(i as any).Prosedur?.toLowerCase().includes(icd9Search.toLowerCase()) ||
|
||
(i as any).Kode_ICD9?.toLowerCase().includes(icd9Search.toLowerCase())
|
||
);
|
||
|
||
const filteredIcd10 = icd10List.filter(i =>
|
||
(i as any).Diagnosa?.toLowerCase().includes(icd10Search.toLowerCase()) ||
|
||
(i as any).Kode_ICD10?.toLowerCase().includes(icd10Search.toLowerCase())
|
||
);;
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
console.log('🟢 handleSubmit CALLED - Form submit triggered');
|
||
console.log(' nama:', nama);
|
||
console.log(' usia:', usia);
|
||
console.log(' gender:', gender);
|
||
console.log(' ruangan:', ruangan);
|
||
console.log(' kelas:', kelas);
|
||
|
||
// Validasi required fields
|
||
if (!nama || !usia || !gender || !ruangan || !kelas) {
|
||
const errorMsg = 'Nama, Usia, Jenis Kelamin, Ruangan, dan Kelas harus diisi';
|
||
console.error('❌ Validation failed:', errorMsg);
|
||
setError(errorMsg);
|
||
return;
|
||
}
|
||
|
||
// Validasi billingId
|
||
if (!billingId || billingId <= 0) {
|
||
const errorMsg = 'Billing ID tidak valid. Silakan close modal dan coba lagi.';
|
||
console.error('❌ Invalid billingId:', billingId);
|
||
setError(errorMsg);
|
||
return;
|
||
}
|
||
|
||
console.log('🟢 All validations passed, starting submission...');
|
||
setLoading(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
// Deteksi apakah ada perubahan pada tindakan, icd9, atau icd10
|
||
const tindakanChanged = JSON.stringify(tindakan) !== JSON.stringify(currentData.tindakan_rs || []);
|
||
const icd9Changed = JSON.stringify(icd9) !== JSON.stringify(currentData.icd9 || []);
|
||
const icd10Changed = JSON.stringify(icd10) !== JSON.stringify(currentData.icd10 || []);
|
||
const hasDataChanged = tindakanChanged || icd9Changed || icd10Changed;
|
||
|
||
// Base request body - selalu kirim identitas pasien + billing sign
|
||
const requestBody: any = {
|
||
nama_pasien: nama,
|
||
usia: parseInt(usia),
|
||
jenis_kelamin: gender,
|
||
ruangan: ruangan,
|
||
kelas: kelas,
|
||
tindakan_rs: tindakan || [],
|
||
icd9: icd9 || [],
|
||
icd10: icd10 || [],
|
||
total_tarif_rs: Number(totalTarifRS) || 0, // ← Ensure it's a number, not string
|
||
};
|
||
|
||
// ALWAYS send billing_sign (tidak peduli ada perubahan atau tidak)
|
||
if (billingSign) {
|
||
requestBody.billing_sign = billingSign;
|
||
}
|
||
|
||
// Jika ada perubahan tindakan/icd9/icd10, log details
|
||
if (hasDataChanged) {
|
||
console.log('📤 Update dengan perubahan tindakan/ICD:', {
|
||
tindakanChanged,
|
||
icd9Changed,
|
||
icd10Changed,
|
||
totalTarifRS,
|
||
totalTarifRS_type: typeof totalTarifRS,
|
||
totalTarifRS_asNumber: Number(totalTarifRS),
|
||
billing_sign: billingSign,
|
||
requestBody,
|
||
});
|
||
} else {
|
||
console.log('📤 Update hanya identitas pasien (tanpa perubahan tindakan/ICD)', requestBody);
|
||
}
|
||
|
||
const fullUrl = `${getApiBaseUrl()}/billing/${billingId}`;
|
||
const requestBodyJson = JSON.stringify(requestBody);
|
||
|
||
console.log('� Request Details:');
|
||
console.log(' URL:', fullUrl);
|
||
console.log(' Method: PUT');
|
||
console.log(' billingId:', billingId, 'type:', typeof billingId);
|
||
console.log(' Request Body:', requestBody);
|
||
console.log(' JSON String:', requestBodyJson);
|
||
console.log(' Parsed back:', JSON.parse(requestBodyJson));
|
||
|
||
const response = await fetch(fullUrl, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: requestBodyJson,
|
||
});
|
||
|
||
console.log('✅ Response received. Status:', response.status);
|
||
|
||
console.log('📥 Response:', {
|
||
status: response.status,
|
||
statusText: response.statusText,
|
||
ok: response.ok,
|
||
headers: {
|
||
contentType: response.headers.get('content-type'),
|
||
}
|
||
});
|
||
|
||
// DISPATCH EVENT REGARDLESS OF RESPONSE STATUS (sebelum throw error)
|
||
console.log('🔍 Preparing to dispatch event...');
|
||
if (typeof window !== 'undefined') {
|
||
try {
|
||
console.log('🔍 Starting event dispatch preparation...');
|
||
|
||
// Hitung tarif value buat pass ke event - HITUNG DARI SEMUA TINDAKAN YANG ADA
|
||
const calculatedTotalTarif = tindakan.reduce((sum, deskripsi) => {
|
||
const tarif = tindakanList.find(t => (t as any).Deskripsi === deskripsi);
|
||
const harga = (tarif as any)?.Harga || 0;
|
||
console.log(` Dispatch calc - Tindakan: ${deskripsi} → Harga: ${harga}`);
|
||
return sum + harga;
|
||
}, 0);
|
||
|
||
console.log('💰 Final calculated tarif for dispatch:', calculatedTotalTarif);
|
||
|
||
const totalKlaimBPJS = (currentData as any).total_klaim_bpjs || 0;
|
||
const calculatedBillingSign = computeBillingSign(calculatedTotalTarif, totalKlaimBPJS);
|
||
|
||
console.log('📤 ABOUT TO DISPATCH EVENT with calculated values:', {
|
||
calculatedTotalTarif,
|
||
calculatedBillingSign,
|
||
tindakan,
|
||
billingId
|
||
});
|
||
|
||
// Dispatch custom event dengan data yang sudah di-calculate (jangan perlu fetch ulang)
|
||
window.dispatchEvent(new CustomEvent('billingDataUpdated', {
|
||
detail: {
|
||
billingId,
|
||
timestamp: new Date().getTime(),
|
||
totalTarifRS: calculatedTotalTarif, // ← Pass calculated value
|
||
billingSign: calculatedBillingSign, // ← Pass calculated sign
|
||
tindakan: tindakan, // ← Pass updated tindakan list
|
||
icd9: icd9, // ← Pass updated ICD9
|
||
icd10: icd10 // ← Pass updated ICD10
|
||
}
|
||
}));
|
||
|
||
console.log('✅ EVENT DISPATCHED SUCCESSFULLY!');
|
||
|
||
// Clear localStorage cache jika ada
|
||
sessionStorage.removeItem('billingHistory');
|
||
sessionStorage.removeItem('billingAktif');
|
||
} catch (eventError) {
|
||
console.error('❌ Error saat dispatch event:', eventError);
|
||
}
|
||
}
|
||
|
||
if (!response.ok) {
|
||
let errData: any = {};
|
||
let errMessage = `HTTP ${response.status}: ${response.statusText}`;
|
||
let rawText = '';
|
||
|
||
try {
|
||
rawText = await response.text();
|
||
console.log('📥 Raw response body:', rawText); // Log full response
|
||
console.log('📥 Raw response body length:', rawText.length);
|
||
|
||
if (rawText && rawText.trim()) {
|
||
try {
|
||
errData = JSON.parse(rawText);
|
||
console.log('📥 Parsed JSON error:', errData);
|
||
errMessage = errData?.message || errData?.error || `HTTP ${response.status}`;
|
||
} catch (jsonError) {
|
||
console.warn('Response is not valid JSON:', jsonError);
|
||
// Response mungkin HTML error page atau plain text
|
||
if (rawText.includes('<!DOCTYPE') || rawText.includes('<html')) {
|
||
errMessage = `Server error (${response.status}): HTML response received. Check if endpoint exists.`;
|
||
} else {
|
||
errMessage = rawText.substring(0, 500); // Use raw text as error message
|
||
}
|
||
}
|
||
} else {
|
||
errMessage = `Server returned empty response (HTTP ${response.status})`;
|
||
}
|
||
} catch (e) {
|
||
console.error('❌ Gagal membaca response:', e);
|
||
errMessage = `Failed to read response: ${e instanceof Error ? e.message : String(e)}`;
|
||
}
|
||
|
||
console.error('❌ Error response from backend:', {
|
||
status: response.status,
|
||
statusText: response.statusText,
|
||
rawBody: rawText.substring(0, 300),
|
||
data: errData,
|
||
message: errMessage
|
||
});
|
||
|
||
console.error('❌ FINAL ERROR MESSAGE:', errMessage);
|
||
throw new Error(errMessage);
|
||
}
|
||
|
||
setSuccess('Data berhasil diupdate!');
|
||
|
||
// Log success untuk verifikasi
|
||
console.log('✅ SUCCESS! Response status:', response.status);
|
||
console.log('✅ Response OK:', response.ok);
|
||
console.log('✅ Data yang dikirim:', requestBody);
|
||
console.log('✅ Modal akan ditutup dalam 1.5 detik...');
|
||
|
||
setTimeout(() => {
|
||
onSuccess();
|
||
onClose();
|
||
}, 1500);
|
||
} catch (err) {
|
||
console.error('❌ ERROR in handleSubmit:', err);
|
||
console.error(' Error type:', err instanceof Error ? 'Error object' : typeof err);
|
||
if (err instanceof Error) {
|
||
console.error(' Error message:', err.message);
|
||
console.error(' Error stack:', err.stack);
|
||
}
|
||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
|
||
} finally {
|
||
console.log('🟢 handleSubmit finally block - setting loading to false');
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<>
|
||
{/* Blur background - halaman tetap terlihat tapi sedikit blur dan gelap */}
|
||
<div
|
||
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-40"
|
||
onClick={onClose}
|
||
/>
|
||
|
||
{/* Modal */}
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 overflow-y-auto">
|
||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl my-4 sm:my-8">
|
||
{/* Header dengan gradient */}
|
||
<div className="bg-gradient-to-r from-[#2591D0] to-blue-600 p-6 sm:p-8 rounded-t-2xl flex justify-between items-center">
|
||
<div>
|
||
<h2 className="text-2xl sm:text-3xl font-bold text-white">Edit Data Pasien</h2>
|
||
<p className="text-blue-100 text-sm mt-1">Perbarui informasi identitas dan pemeriksaan pasien</p>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-white hover:bg-blue-700 rounded-full p-2 transition-colors"
|
||
type="button"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<form onSubmit={handleSubmit} className="p-6 sm:p-8 space-y-6 max-h-[calc(100vh-250px)] overflow-y-auto">
|
||
{error && (
|
||
<div className="p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-lg text-sm flex items-start gap-3">
|
||
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{error}</span>
|
||
</div>
|
||
)}
|
||
|
||
{success && (
|
||
<div className="p-4 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-lg text-sm flex items-start gap-3">
|
||
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{success}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Section 1: Data Dasar */}
|
||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 p-5 rounded-xl">
|
||
<h3 className="text-lg font-bold text-[#2591D0] mb-4 flex items-center gap-2">
|
||
<span className="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">👤</span>
|
||
Data Dasar Pasien
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-[#2591D0] mb-2">Nama Pasien</label>
|
||
<input
|
||
type="text"
|
||
value={nama}
|
||
onChange={(e) => setNama(e.target.value)}
|
||
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2.5 text-sm text-[#2591D0] bg-white focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:outline-none transition-all"
|
||
placeholder="Nama lengkap pasien"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-[#2591D0] mb-2">Usia (Tahun)</label>
|
||
<input
|
||
type="number"
|
||
value={usia}
|
||
onChange={(e) => setUsia(e.target.value)}
|
||
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2.5 text-sm text-[#2591D0] bg-white focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:outline-none transition-all"
|
||
placeholder="Contoh: 45"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-[#2591D0] mb-2">Jenis Kelamin</label>
|
||
<select
|
||
value={gender}
|
||
onChange={(e) => setGender(e.target.value)}
|
||
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2.5 text-sm text-[#2591D0] bg-white focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:outline-none transition-all"
|
||
required
|
||
>
|
||
<option value="">Pilih Jenis Kelamin</option>
|
||
<option value="Laki-Laki">Laki-Laki</option>
|
||
<option value="Perempuan">Perempuan</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold text-[#2591D0] mb-2">Ruangan</label>
|
||
<div className="flex items-center gap-2 mb-2 relative">
|
||
<div className="flex-1 relative">
|
||
<input
|
||
ref={ruanganInputRef}
|
||
type="text"
|
||
value={ruanganSearch}
|
||
onChange={(e) => {
|
||
setRuanganSearch(e.target.value);
|
||
setRuanganDropdownOpen(true);
|
||
}}
|
||
onFocus={() => setRuanganDropdownOpen(true)}
|
||
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2.5 text-sm text-[#2591D0] bg-white focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:outline-none transition-all"
|
||
placeholder="Cari ruangan..."
|
||
required
|
||
/>
|
||
<FaChevronDown
|
||
onClick={() => {
|
||
setRuanganDropdownOpen(!ruanganDropdownOpen);
|
||
if (!ruanganDropdownOpen) {
|
||
setRuanganSearch('');
|
||
}
|
||
}}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-blue-400 cursor-pointer text-sm hover:text-blue-600"
|
||
/>
|
||
{ruanganDropdownOpen && (
|
||
<div
|
||
ref={ruanganDropdownRef}
|
||
className="absolute z-50 w-full mt-1 bg-white border border-blue-200 rounded-lg shadow-lg max-h-56 overflow-y-auto"
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
{ruanganSearch === ''
|
||
? ruanganList.map((r) => (
|
||
<div
|
||
key={(r as any).ID_Ruangan}
|
||
onClick={() => {
|
||
handleSelectRuangan((r as any).ID_Ruangan.toString(), (r as any).Nama_Ruangan);
|
||
setRuanganDropdownOpen(false);
|
||
}}
|
||
className="px-4 py-2 hover:bg-blue-50 cursor-pointer text-sm text-[#2591D0] border-b border-blue-100 last:border-b-0"
|
||
>
|
||
<div className="font-medium">{(r as any).Nama_Ruangan}</div>
|
||
</div>
|
||
))
|
||
: ruanganList
|
||
.filter(r =>
|
||
(r as any).Nama_Ruangan?.toLowerCase().includes(ruanganSearch.toLowerCase())
|
||
)
|
||
.map((r) => (
|
||
<div
|
||
key={(r as any).ID_Ruangan}
|
||
onClick={() => {
|
||
handleSelectRuangan((r as any).ID_Ruangan.toString(), (r as any).Nama_Ruangan);
|
||
setRuanganDropdownOpen(false);
|
||
}}
|
||
className="px-4 py-2 hover:bg-blue-50 cursor-pointer text-sm text-[#2591D0] border-b border-blue-100 last:border-b-0"
|
||
>
|
||
<div className="font-medium">{(r as any).Nama_Ruangan}</div>
|
||
</div>
|
||
)) ||
|
||
(ruanganSearch && (
|
||
<div className="px-4 py-2 text-sm text-gray-500 text-center">Tidak ada ruangan ditemukan</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setRuanganDropdownOpen(true);
|
||
setRuanganSearch('');
|
||
}}
|
||
className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white hover:bg-blue-600 transition-colors flex-shrink-0"
|
||
>
|
||
<FaChevronDown className="text-xs" />
|
||
</button>
|
||
</div>
|
||
{/* Selected Ruangan Display */}
|
||
{ruangan && (
|
||
<div className="mt-2 inline-flex items-center bg-blue-50 border border-blue-200 text-[#2591D0] rounded-full px-4 py-1.5 text-sm">
|
||
<span className="font-medium">{ruangan}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setRuangan('');
|
||
setRuanganId('');
|
||
setRuanganSearch('');
|
||
}}
|
||
className="text-red-500 hover:text-red-700 ml-2"
|
||
aria-label={`Hapus ruangan ${ruangan}`}
|
||
>
|
||
<FaTrash />
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-sm font-semibold text-[#2591D0] mb-2">Kelas</label>
|
||
<select
|
||
value={kelas}
|
||
onChange={(e) => setKelas(e.target.value)}
|
||
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2.5 text-sm text-[#2591D0] bg-white focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:outline-none transition-all"
|
||
required
|
||
>
|
||
<option value="">Pilih Kelas</option>
|
||
<option value="1">Kelas 1</option>
|
||
<option value="2">Kelas 2</option>
|
||
<option value="3">Kelas 3</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 1.5: Billing Summary */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{/* Total Tarif RS */}
|
||
<div className="bg-gradient-to-br from-orange-50 to-orange-100 border-2 border-orange-300 p-4 rounded-lg">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm font-semibold text-orange-600 mb-1">Total Tarif RS</p>
|
||
<p className="text-2xl font-bold text-orange-700">Rp {totalTarifRS.toLocaleString('id-ID')}</p>
|
||
</div>
|
||
<div className="text-4xl">💰</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Billing Sign Warning */}
|
||
{billingSign && (
|
||
<div className={`bg-gradient-to-br border-2 p-4 rounded-lg flex items-center justify-between ${getBillingSignColor(billingSign).bg} ${getBillingSignColor(billingSign).border}`}>
|
||
<div>
|
||
<p className={`text-sm font-semibold mb-1 ${getBillingSignColor(billingSign).text}`}>Status Billing Sign</p>
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-4 h-4 rounded-full ${getBillingSignColor(billingSign).dot}`}></div>
|
||
<p className={`text-2xl font-bold ${getBillingSignColor(billingSign).text}`}>{billingSign}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-4xl">⚠️</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Section 2: Tindakan */}
|
||
<div className="bg-gradient-to-br from-emerald-50 to-emerald-100 border border-emerald-200 p-5 rounded-xl">
|
||
<h3 className="text-lg font-bold text-emerald-700 mb-4 flex items-center gap-2">
|
||
<span className="bg-emerald-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">🔬</span>
|
||
Tindakan & Pemeriksaan Penunjang
|
||
</h3>
|
||
|
||
<div className="relative mb-4">
|
||
<input
|
||
ref={tindakanInputRef}
|
||
type="text"
|
||
value={tindakanSearch}
|
||
onChange={(e) => {
|
||
setTindakanSearch(e.target.value);
|
||
setTindakanDropdownOpen(true);
|
||
}}
|
||
onFocus={() => setTindakanDropdownOpen(true)}
|
||
className="w-full border-2 border-emerald-300 rounded-lg px-4 py-2.5 text-sm text-emerald-700 bg-white focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400 focus:outline-none transition-all placeholder-emerald-400"
|
||
placeholder="Cari tindakan..."
|
||
/>
|
||
<FaChevronDown
|
||
onClick={() => setTindakanDropdownOpen(!tindakanDropdownOpen)}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-emerald-400 cursor-pointer text-xs"
|
||
/>
|
||
{tindakanDropdownOpen && (
|
||
<div
|
||
ref={tindakanDropdownRef}
|
||
className="absolute z-50 w-full mt-1 bg-white border border-emerald-200 rounded-lg shadow-lg max-h-96 overflow-y-auto"
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
{(tindakanSearch ? filteredTindakan : tindakanList).map((t) => (
|
||
<div
|
||
key={(t as any).KodeRS}
|
||
onClick={() => addTindakan((t as any).KodeRS)}
|
||
className="px-4 py-2 hover:bg-emerald-50 cursor-pointer text-sm text-emerald-700 border-b border-emerald-100 last:border-b-0"
|
||
>
|
||
<div className="font-medium">{(t as any).Deskripsi}</div>
|
||
<div className="text-xs text-gray-600">{(t as any).KodeRS}</div>
|
||
</div>
|
||
))}
|
||
{tindakanSearch && filteredTindakan.length === 0 && (
|
||
<div className="px-4 py-2 text-sm text-gray-500 text-center">Tidak ada tindakan ditemukan</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{tindakan.length > 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{tindakan.map((t, idx) => (
|
||
<div key={idx} className="bg-white border-2 border-emerald-300 px-4 py-2 rounded-full flex items-center gap-2 text-sm text-emerald-700 font-medium shadow-sm hover:shadow-md transition-shadow">
|
||
<span>🏥</span>
|
||
<span>{t}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeTindakan(idx)}
|
||
className="text-red-500 hover:text-red-700 ml-1"
|
||
>
|
||
<FaTrash size={14} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Section 3: ICD9 */}
|
||
<div className="bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200 p-5 rounded-xl">
|
||
<h3 className="text-lg font-bold text-amber-700 mb-4 flex items-center gap-2">
|
||
<span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">📋</span>
|
||
ICD 9 (Prosedur)
|
||
</h3>
|
||
|
||
<div className="relative mb-4">
|
||
<input
|
||
ref={icd9InputRef}
|
||
type="text"
|
||
value={icd9Search}
|
||
onChange={(e) => {
|
||
setIcd9Search(e.target.value);
|
||
setIcd9DropdownOpen(true);
|
||
}}
|
||
onFocus={() => setIcd9DropdownOpen(true)}
|
||
className="w-full border-2 border-amber-300 rounded-lg px-4 py-2.5 text-sm text-amber-700 bg-white focus:ring-2 focus:ring-amber-400 focus:border-amber-400 focus:outline-none transition-all placeholder-amber-400"
|
||
placeholder="Cari ICD 9..."
|
||
/>
|
||
<FaChevronDown
|
||
onClick={() => setIcd9DropdownOpen(!icd9DropdownOpen)}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-400 cursor-pointer text-xs"
|
||
/>
|
||
{icd9DropdownOpen && (
|
||
<div
|
||
ref={icd9DropdownRef}
|
||
className="absolute z-50 w-full mt-1 bg-white border border-amber-200 rounded-lg shadow-lg max-h-96 overflow-y-auto"
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
{(icd9Search ? filteredIcd9 : icd9List).map((i) => (
|
||
<div
|
||
key={(i as any).Kode_ICD9}
|
||
onClick={() => addIcd9((i as any).Kode_ICD9)}
|
||
className="px-4 py-2 hover:bg-amber-50 cursor-pointer text-sm text-amber-700 border-b border-amber-100 last:border-b-0"
|
||
>
|
||
<div className="font-medium">{(i as any).Prosedur}</div>
|
||
<div className="text-xs text-gray-600">{(i as any).Kode_ICD9}</div>
|
||
</div>
|
||
))}
|
||
{icd9Search && filteredIcd9.length === 0 && (
|
||
<div className="px-4 py-2 text-sm text-gray-500 text-center">Tidak ada ICD 9 ditemukan</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{icd9.length > 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{icd9.map((i, idx) => (
|
||
<div key={idx} className="bg-white border-2 border-amber-300 px-4 py-2 rounded-full flex items-center gap-2 text-sm text-amber-700 font-medium shadow-sm hover:shadow-md transition-shadow">
|
||
<span>🔖</span>
|
||
<span>{i}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeIcd9(idx)}
|
||
className="text-red-500 hover:text-red-700 ml-1"
|
||
>
|
||
<FaTrash size={14} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Section 4: ICD10 */}
|
||
<div className="bg-gradient-to-br from-violet-50 to-violet-100 border border-violet-200 p-5 rounded-xl">
|
||
<h3 className="text-lg font-bold text-violet-700 mb-4 flex items-center gap-2">
|
||
<span className="bg-violet-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">🏷️</span>
|
||
ICD 10 (Diagnosis)
|
||
</h3>
|
||
|
||
<div className="relative mb-4">
|
||
<input
|
||
ref={icd10InputRef}
|
||
type="text"
|
||
value={icd10Search}
|
||
onChange={(e) => {
|
||
setIcd10Search(e.target.value);
|
||
setIcd10DropdownOpen(true);
|
||
}}
|
||
onFocus={() => setIcd10DropdownOpen(true)}
|
||
className="w-full border-2 border-violet-300 rounded-lg px-4 py-2.5 text-sm text-violet-700 bg-white focus:ring-2 focus:ring-violet-400 focus:border-violet-400 focus:outline-none transition-all placeholder-violet-400"
|
||
placeholder="Cari ICD 10..."
|
||
/>
|
||
<FaChevronDown
|
||
onClick={() => setIcd10DropdownOpen(!icd10DropdownOpen)}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-violet-400 cursor-pointer text-xs"
|
||
/>
|
||
{icd10DropdownOpen && (
|
||
<div
|
||
ref={icd10DropdownRef}
|
||
className="absolute z-50 w-full mt-1 bg-white border border-violet-200 rounded-lg shadow-lg max-h-96 overflow-y-auto"
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
{(icd10Search ? filteredIcd10 : icd10List).map((i) => (
|
||
<div
|
||
key={(i as any).Kode_ICD10}
|
||
onClick={() => addIcd10((i as any).Kode_ICD10)}
|
||
className="px-4 py-2 hover:bg-violet-50 cursor-pointer text-sm text-violet-700 border-b border-violet-100 last:border-b-0"
|
||
>
|
||
<div className="font-medium">{(i as any).Diagnosa}</div>
|
||
<div className="text-xs text-gray-600">{(i as any).Kode_ICD10}</div>
|
||
</div>
|
||
))}
|
||
{icd10Search && filteredIcd10.length === 0 && (
|
||
<div className="px-4 py-2 text-sm text-gray-500 text-center">Tidak ada ICD 10 ditemukan</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{icd10.length > 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{icd10.map((i, idx) => (
|
||
<div key={idx} className="bg-white border-2 border-violet-300 px-4 py-2 rounded-full flex items-center gap-2 text-sm text-violet-700 font-medium shadow-sm hover:shadow-md transition-shadow">
|
||
<span>🩺</span>
|
||
<span>{i}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeIcd10(idx)}
|
||
className="text-red-500 hover:text-red-700 ml-1"
|
||
>
|
||
<FaTrash size={14} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex gap-3 pt-6 border-t-2 border-gray-200">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-100 transition-all"
|
||
>
|
||
Batal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="flex-1 px-6 py-3 bg-gradient-to-r from-[#2591D0] to-blue-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl"
|
||
>
|
||
{loading ? '⏳ Menyimpan...' : '💾 Simpan Perubahan'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default EditPasienModal;
|