From 4ea83cf6b9d8ecd1d3eb73821458cdf59e00ef45 Mon Sep 17 00:00:00 2001 From: marszayn Date: Mon, 3 Mar 2025 11:52:06 +0700 Subject: [PATCH] style: Tambahkan beberapa icon baru dan perbaiki tata letak --- .../js/pages/admin/pelaporan/AL/index_AL.tsx | 663 ++++++++++++++---- 1 file changed, 519 insertions(+), 144 deletions(-) diff --git a/resources/js/pages/admin/pelaporan/AL/index_AL.tsx b/resources/js/pages/admin/pelaporan/AL/index_AL.tsx index 5b4b326..47f7329 100644 --- a/resources/js/pages/admin/pelaporan/AL/index_AL.tsx +++ b/resources/js/pages/admin/pelaporan/AL/index_AL.tsx @@ -11,7 +11,19 @@ import { SelectValue, } from "@/components/ui/select"; import { Checkbox } from "@/components/ui/checkbox"; -import { CircleHelp, FileDown, Printer } from "lucide-react"; +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"; @@ -21,6 +33,7 @@ import { TooltipTrigger, } from "@/components/ui/tooltip"; import UploadDoc from "@/components/upload_doc"; +import { Badge } from "@/components/ui/badge"; interface PelaporanALFormProps { onSubmit: (data: any) => void; @@ -31,36 +44,77 @@ const PelaporanALForm = ({ onSubmit }: PelaporanALFormProps) => { 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 (
- - + +
- - Laporan Pengelolaan Air Limbah - Ujicoba +
+ + Nama Perusahaan + +
+ + Laporan Pengelolaan Air Limbah -

- Tahun 2025 - Periode Triwulan 1 +

+ Tahun 2025 - Periode Triwulan 1 (Januari - + Maret)

- {/* Header Section */} -
-
-

Tersambung IPAL Komunal:

-
-
- - setIsConnected(true) - } - checked={isConnected === true} - /> - + {/* Connection Status Card */} + + +
+
+

+ Status Koneksi IPAL Komunal +

+

+ Pilih status koneksi instalasi + pengolahan air limbah +

-
- - setIsConnected(false) - } - checked={isConnected === false} - /> - -
-
-
-
- {isConnected && ( -
-

- Lampiran - - * - {" "} - : -

- +
+
+ + setIsConnected(true) + } + checked={ + isConnected === true + } + /> + +
+
+ + setIsConnected(false) + } + checked={ + isConnected === false || + isConnected === null + } + /> + +
- )} -
-
+ + {isConnected && ( +
+ + + Lampiran Wajib + + * + + : + + +
+ )} +
+ + { /> {/* Main Form Table */} -
+
- + @@ -178,7 +277,7 @@ const PelaporanALForm = ({ onSubmit }: PelaporanALFormProps) => { {/* Section 1 */} - + - + - {/* Technical Requirements */} + {/* 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", + // "Izin pembuangan air limbah", ].map((item, index) => ( - - - - - + + + ))} - {/* Implementation Section */} + {/* Implementation Section Header */} + + + + + + {/* Implementation Section A6-A10 */} {[ { - name: "Pengujian air limbah", - hasAttachment: true, - }, - { - name: "Pemenuhan baku mutu air limbah", + code: "A5", + name: "Izin pembuangan 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) => ( + ].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) => ( + + + + + + + - - ))} @@ -317,41 +676,57 @@ const PelaporanALForm = ({ onSubmit }: PelaporanALFormProps) => { {/* Notes Section */} -
-

- Catatan -

-
No
I { (%) 100 + + 100 + +
+ 1. Persyaratan Teknis +
+ A{index + 1}
-
{item}
+
+ {item} +
- + - -

+ +

+ {item} +

+

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

- {" "} 100 + 100 + + + + + + Menunggu + +
+ 2. Perijinan +
- A{index + 6} + + {item.code}
-
{item.name}
- +
+ {item.name} +
+ + + + + +

+ Info:{" "} + {item.name} +

+

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

+ +
100 + 100 + - {item.hasAttachment && ( - - Data... - + {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 + )}