368 lines
20 KiB
TypeScript
368 lines
20 KiB
TypeScript
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 } 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";
|
|
|
|
interface PelaporanALFormProps {
|
|
onSubmit: (data: any) => void;
|
|
}
|
|
|
|
const PelaporanALForm = ({ onSubmit }: PelaporanALFormProps) => {
|
|
const [isConnected, setIsConnected] = useState<boolean | null>(null);
|
|
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
|
|
const [uploadedFile, setUploadedFile] = useState<File | null>(null);
|
|
|
|
return (
|
|
<AuthenticatedLayout header="Pelaporan Air Limbah">
|
|
<Head title="Pelaporan Air Limbah" />
|
|
<div className="p-4 space-y-6">
|
|
<Card className="shadow-lg">
|
|
<CardHeader className="bg-[#166534] text-white rounded-t-lg">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle className="text-xl">
|
|
Laporan Pengelolaan Air Limbah - Ujicoba
|
|
</CardTitle>
|
|
<p className="text-sm opacity-90">
|
|
Tahun 2025 - Periode Triwulan 1
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => window.history.back()}
|
|
>
|
|
Kembali
|
|
</Button>
|
|
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => window.print()}
|
|
>
|
|
<Printer />
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => {
|
|
// Add PDF download logic here
|
|
}}
|
|
>
|
|
<FileDown />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="space-y-6">
|
|
{/* Header Section */}
|
|
<div className="flex justify-between items-center gap-4 mb-6">
|
|
<div className="flex items-center gap-2">
|
|
<h2>Tersambung IPAL Komunal:</h2>
|
|
<div className="flex flex-row gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
id="tersambung"
|
|
name="connection"
|
|
className="w-4 h-4 text-teal-600"
|
|
onChange={() =>
|
|
setIsConnected(true)
|
|
}
|
|
checked={isConnected === true}
|
|
/>
|
|
<Label htmlFor="tersambung">
|
|
Ya
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
id="tidak"
|
|
name="connection"
|
|
className="w-4 h-4 text-teal-600"
|
|
onChange={() =>
|
|
setIsConnected(false)
|
|
}
|
|
checked={isConnected === false}
|
|
/>
|
|
<Label htmlFor="tidak">Tidak</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{isConnected && (
|
|
<div className="flex items-center gap-2">
|
|
<h2>
|
|
Lampiran
|
|
<span className="text-red-600">
|
|
*
|
|
</span>{" "}
|
|
:
|
|
</h2>
|
|
<Button
|
|
variant="outline"
|
|
className="w-48"
|
|
onClick={() =>
|
|
setIsUploadModalOpen(true)
|
|
}
|
|
>
|
|
{uploadedFile
|
|
? uploadedFile.name
|
|
: "Unggah Surat Kerjasama"}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<UploadDoc
|
|
isOpen={isUploadModalOpen}
|
|
onClose={() => setIsUploadModalOpen(false)}
|
|
onUpload={(file) => {
|
|
setUploadedFile(file);
|
|
// Handle the file upload logic here
|
|
console.log("File uploaded:", file);
|
|
}}
|
|
/>
|
|
|
|
{/* Main Form Table */}
|
|
<div className="border rounded-lg overflow-hidden">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-[#166534] text-white">
|
|
<th className="p-3 text-left w-16">
|
|
No
|
|
</th>
|
|
<th className="p-3 text-left">
|
|
Komponen
|
|
</th>
|
|
<th className="p-3 text-left w-32">
|
|
Hasil
|
|
</th>
|
|
<th className="p-3 text-left w-24">
|
|
Nilai
|
|
</th>
|
|
<th className="p-3 text-left w-32">
|
|
Lampiran
|
|
</th>
|
|
<th className="p-3 text-left w-32">
|
|
Verifikasi
|
|
</th>
|
|
<th className="p-3 text-left w-32">
|
|
Keterangan
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{/* Section 1 */}
|
|
<tr className="bg-teal-50">
|
|
<td className="p-3">I</td>
|
|
<td
|
|
className="p-3 font-medium"
|
|
colSpan={1}
|
|
>
|
|
Nilai tingkat ketaatan
|
|
pengelolaan air limbah (IKLl)
|
|
(%)
|
|
</td>
|
|
<td className="p-3"></td>
|
|
<td className="p-3">100</td>
|
|
<td className="p-3"></td>
|
|
<td className="p-3"></td>
|
|
<td className="p-3"></td>
|
|
</tr>
|
|
|
|
{/* Technical Requirements */}
|
|
{[
|
|
"Instalasi pengolah air limbah",
|
|
"Flowmeter",
|
|
"Titik pengambilan sampel",
|
|
"Saluran air limbah & air hujan terpisah",
|
|
"Izin pembuangan air limbah",
|
|
].map((item, index) => (
|
|
<tr
|
|
key={index}
|
|
className="border-t"
|
|
>
|
|
<td className="p-3">
|
|
A{index + 1}
|
|
</td>
|
|
<td className="p-3">
|
|
<div className="flex justify-between items-center w-full">
|
|
<div>{item}</div>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<CircleHelp className="text-teal-600 w-5 h-5" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>
|
|
Deskripsi
|
|
untuk {item}
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</td>
|
|
<td className="p-3">
|
|
{" "}
|
|
<Select>
|
|
<SelectTrigger className="w-24">
|
|
<SelectValue placeholder="Ada" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ada">
|
|
Ada
|
|
</SelectItem>
|
|
<SelectItem value="tidak">
|
|
Tidak Ada
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</td>
|
|
<td className="p-3">100</td>
|
|
<td className="p-3"></td>
|
|
<td className="p-3"></td>
|
|
<td className="p-3"></td>
|
|
</tr>
|
|
))}
|
|
|
|
{/* Implementation Section */}
|
|
{[
|
|
{
|
|
name: "Pengujian air limbah",
|
|
hasAttachment: true,
|
|
},
|
|
{
|
|
name: "Pemenuhan baku mutu air limbah",
|
|
hasAttachment: false,
|
|
},
|
|
{
|
|
name: "Pelaksanaan dan pemutusan wewenang",
|
|
hasSelect: true,
|
|
},
|
|
{
|
|
name: "Pembuatan neraca air",
|
|
hasSelect: true,
|
|
},
|
|
{
|
|
name: "Sertifikasi kompetensi",
|
|
hasSelect: true,
|
|
},
|
|
].map((item, index) => (
|
|
<tr
|
|
key={index}
|
|
className="border-t"
|
|
>
|
|
<td className="p-3">
|
|
A{index + 6}
|
|
</td>
|
|
<td className="p-3">
|
|
<div className="flex justify-between items-center w-full">
|
|
<div>{item.name}</div>
|
|
<CircleHelp className="text-teal-600 w-5 h-5" />
|
|
</div>
|
|
</td>
|
|
<td className="p-3">
|
|
<Select>
|
|
<SelectTrigger className="w-24">
|
|
<SelectValue placeholder="Ada" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ada">
|
|
Ada
|
|
</SelectItem>
|
|
<SelectItem value="tidak">
|
|
Tidak Ada
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</td>
|
|
<td className="p-3">100</td>
|
|
<td className="p-3">
|
|
{item.hasAttachment && (
|
|
<span className="text-teal-600">
|
|
Data...
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="p-3"></td>
|
|
<td className="p-3"></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Notes Section */}
|
|
<div className="bg-gray-50 p-6 rounded-lg border border-gray-200 mt-6">
|
|
<h2 className="text-lg font-semibold mb-3 text-gray-800">
|
|
Catatan
|
|
</h2>
|
|
<Textarea
|
|
placeholder="Tambahkan catatan atau komentar tambahan di sini..."
|
|
className="min-h-[100px] bg-white"
|
|
/>
|
|
</div>
|
|
|
|
{/* Agreement & Submit Section */}
|
|
<div className="mt-8 space-y-6">
|
|
<div className="flex items-start gap-3 p-4 bg-green-50 rounded-lg border border-teal-200">
|
|
<Checkbox id="agreement" className="mt-1" />
|
|
<Label
|
|
htmlFor="agreement"
|
|
className="text-sm leading-relaxed text-gray-700"
|
|
>
|
|
Dengan mencentang ini, kami menyatakan
|
|
bahwa laporan ini telah disusun
|
|
berdasarkan ketentuan peraturan yang
|
|
berlaku dan kami bersedia bertanggung
|
|
jawab atas kebenaran data-data yang kami
|
|
kirimkan sesuai dengan fakta dilapangan.
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-4">
|
|
<Button
|
|
variant="outline"
|
|
className="hover:bg-gray-100"
|
|
>
|
|
Simpan Draft
|
|
</Button>
|
|
<Button className="bg-[#166534] hover:bg-green-700 transition-colors px-8">
|
|
Kirim Laporan
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
};
|
|
|
|
export default PelaporanALForm;
|