skl/resources/js/components/PerizinanLingkungan/ModalIzinLingkungan.tsx

225 lines
8.2 KiB
TypeScript

import React, { useState } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Select from "react-select";
import { router } from "@inertiajs/react";
import { Perusahaan, JenisKegiatan } from "@/types/perusahaan";
type ModalIzinLingkunganProps = {
open: boolean;
onClose: () => void;
onSuccess: () => void;
selectedPerusahaan: Perusahaan | null;
jenisKegiatan: JenisKegiatan[]; // Ganti dari jenisDokIL menjadi jenisKegiatan
};
export function ModalIzinLingkungan({
open,
onClose,
onSuccess,
selectedPerusahaan,
jenisKegiatan,
}: ModalIzinLingkunganProps) {
if (!selectedPerusahaan) return null;
// State untuk field Nomor & Tanggal Izin Lingkungan (contoh)
const [nomorIzin, setNomorIzin] = useState(
selectedPerusahaan.ILNomor || ""
);
const [tanggalIzin, setTanggalIzin] = useState(
selectedPerusahaan.ILTanggal
? new Date(selectedPerusahaan.ILTanggal).toISOString().split("T")[0]
: ""
);
const [dokumen, setDokumen] = useState<File | null>(null);
// State untuk dropdown Jenis Kegiatan
// Jika perusahaan sudah memiliki jenis_kegiatan, kita set default-nya
const [selectedJenisKegiatan, setSelectedJenisKegiatan] = useState<{
value: number;
label: string;
} | null>(
selectedPerusahaan.jenis_kegiatan
? {
value: selectedPerusahaan.jenis_kegiatan.JenisKegiatanId,
label: selectedPerusahaan.jenis_kegiatan.NamaJenisKegiatan,
}
: null
);
// Konversi data jenisKegiatan agar bisa dibaca oleh react-select
const jenisKegiatanOptions = jenisKegiatan.map((jk) => ({
value: jk.JenisKegiatanId,
label: jk.NamaJenisKegiatan,
}));
// Handler submit form
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!selectedPerusahaan) return;
// Siapkan FormData untuk dikirim via Inertia
const formData = new FormData();
formData.append(
"PerusahaanId",
String(selectedPerusahaan.PerusahaanId)
);
formData.append("ILNomor", nomorIzin);
formData.append("ILTanggal", tanggalIzin);
// Ganti JenisDokILId -> JenisKegiatanId (sesuaikan dengan field di DB)
formData.append(
"JenisKegiatanId",
selectedJenisKegiatan?.value.toString() || ""
);
if (dokumen) {
formData.append("ILDokumen", dokumen);
}
router.post(
`/admin/perizinan_lingkungan/${selectedPerusahaan.PerusahaanId}`,
formData,
{
onSuccess: () => {
onSuccess(); // menutup modal & refresh data
},
}
);
};
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Perizinan Lingkungan</DialogTitle>
</DialogHeader>
{/* Detail perusahaan */}
<div className="mb-4 p-4 bg-blue-100 rounded-md border border-gray-200">
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="font-bold">No Induk:</div>
<div>{selectedPerusahaan.NomorInduk || "-"}</div>
<div className="font-bold">Perusahaan:</div>
<div>{selectedPerusahaan.NamaPerusahaan || "-"}</div>
<div className="font-bold">Jenis Kegiatan:</div>
<div>
{selectedPerusahaan.jenis_kegiatan
?.NamaJenisKegiatan || "-"}
</div>
<div className="font-bold">Alamat:</div>
<div>{selectedPerusahaan.Alamat || "-"}</div>
<div className="font-bold">Telepon:</div>
<div>{selectedPerusahaan.Telepon || "-"}</div>
<div className="font-bold">Fax:</div>
<div>{selectedPerusahaan.Fax || "-"}</div>
<div className="font-bold">Email:</div>
<div>{selectedPerusahaan.Email || "-"}</div>
</div>
</div>
{/* Form update dokumen izin */}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
Nomor Izin Lingkungan
</label>
<Input
type="text"
value={nomorIzin}
onChange={(e) => setNomorIzin(e.target.value)}
/>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
Tanggal Izin
</label>
<Input
type="date"
value={tanggalIzin}
onChange={(e) => setTanggalIzin(e.target.value)}
/>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
Jenis Kegiatan
</label>
<Select
options={jenisKegiatanOptions}
value={selectedJenisKegiatan}
onChange={setSelectedJenisKegiatan}
placeholder="Pilih Jenis Kegiatan"
isClearable
isSearchable
/>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
Upload Dokumen
</label>
<Input
type="file"
onChange={(e) => {
if (
e.target.files &&
e.target.files.length > 0
) {
setDokumen(e.target.files[0]);
}
}}
/>
</div>
{selectedPerusahaan.ILDokumen && (
<div className="mb-4">
<Button
className="bg-green-100"
type="button"
variant="outline"
size="sm"
onClick={() =>
window.open(
`/storage/${selectedPerusahaan.ILDokumen}`,
"_blank"
)
}
>
Lihat File saat ini
</Button>
</div>
)}
<div className="flex justify-end mt-6">
<Button
variant="outline"
onClick={onClose}
className="mr-2"
>
Batal
</Button>
<Button
type="submit"
className="bg-green-600 text-white"
>
Simpan
</Button>
</div>
</form>
</DialogContent>
</Dialog>
);
}