225 lines
8.2 KiB
TypeScript
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>
|
|
);
|
|
}
|