import React, { useState } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Checkbox } from "@/components/ui/checkbox"; import { CircleHelp, FileDown, Printer, ChevronLeft, Upload, PlusCircle, CheckCircle2, Clock, AlertCircle, ArrowUpRight, Save, } from "lucide-react"; import AuthenticatedLayout from "@/layouts/authenticated-layout"; import { Head } from "@inertiajs/react"; import { Textarea } from "@/components/ui/textarea"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import UploadDoc from "@/components/upload_doc"; import { Badge } from "@/components/ui/badge"; interface PelaporanALFormProps { onSubmit: (data: any) => void; } const PelaporanALForm = ({ onSubmit }: PelaporanALFormProps) => { const [isConnected, setIsConnected] = useState(null); const [isUploadModalOpen, setIsUploadModalOpen] = useState(false); const [uploadedFile, setUploadedFile] = useState(null); // Mock data for uploaded files/attachments const [attachments, setAttachments] = useState({ A6: { name: "hasil-uji-lab-q1-2025.pdf", status: "uploaded" }, A7: null, A8: null, A9: null, A10: null, }); const openAttachmentUpload = (itemCode: string) => { // Implementation for attachment upload console.log(`Opening upload for ${itemCode}`); }; return (
Nama Perusahaan
Laporan Pengelolaan Air Limbah

Tahun 2025 - Periode Triwulan 1 (Januari - Maret)

{/* Connection Status Card */}

Status Koneksi IPAL Komunal

Pilih status koneksi instalasi pengolahan air limbah

setIsConnected(true) } checked={ isConnected === true } />
setIsConnected(false) } checked={ isConnected === false || isConnected === null } />
{isConnected && (
Lampiran Wajib * :
)}
setIsUploadModalOpen(false)} onUpload={(file) => { setUploadedFile(file); // Handle the file upload logic here console.log("File uploaded:", file); }} /> {/* Main Form Table */}
{/* Section 1 */} {/* Technical Requirements Section Header */} {/* Technical Requirements A1-A5 */} {[ "Instalasi pengolah air limbah", "Flowmeter", "Titik pengambilan sampel", "Saluran air limbah & air hujan terpisah", // "Izin pembuangan air limbah", ].map((item, index) => ( ))} {/* Implementation Section Header */} {/* Implementation Section A6-A10 */} {[ { code: "A5", name: "Izin pembuangan air limbah", hasAttachment: false, }, ].map((item) => ( ))} {/* Implementation Section Header */} {/* Implementation Section A6-A10 */} {[ { code: "A6", name: "Pengujian air limbah", hasAttachment: true, }, { code: "A7", name: "Pemenuhan baku mutu air limbah", hasAttachment: true, }, { code: "A8", name: "Pelaksanaan dan pemutusan wewenang", hasAttachment: true, }, { code: "A9", name: "Pembuatan neraca air", hasAttachment: true, }, { code: "A10", name: "Sertifikasi kompetensi", hasAttachment: true, }, ].map((item) => ( ))}
No Komponen Hasil Nilai Lampiran Verifikasi Keterangan
I Nilai tingkat ketaatan pengelolaan air limbah (IKLl) (%) 100
1. Persyaratan Teknis
A{index + 1}
{item}

{item}

Deskripsi persyaratan teknis untuk{" "} {item.toLowerCase()} . Pastikan data yang diisi sesuai dengan kondisi aktual.

100 Menunggu
2. Perijinan
{item.code}
{item.name}

Info:{" "} {item.name}

Deskripsi untuk persyaratan{" "} {item.name.toLowerCase()} . Pastikan data yang diisi sesuai dengan dokumen pendukung.

100 {attachments[ item.code as keyof typeof attachments ] ? ( ) : ( )} {item.code === "A6" ? ( Terverifikasi ) : ( Menunggu )}
3. Pelaksanaan
{item.code}
{item.name}

Info:{" "} {item.name}

Deskripsi untuk persyaratan{" "} {item.name.toLowerCase()} . Pastikan data yang diisi sesuai dengan dokumen pendukung.

100 {attachments[ item.code as keyof typeof attachments ] ? ( ) : ( )} {item.code === "A6" ? ( Terverifikasi ) : ( Menunggu )}
{/* Notes Section */}

Catatan {/* (Opsional) */}