512 lines
25 KiB
TypeScript
512 lines
25 KiB
TypeScript
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
|
import { Head, Link } from "@inertiajs/react";
|
|
import React from "react";
|
|
import { useState } from "react";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
BadgeCheck,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ChevronUp,
|
|
Download,
|
|
FileText,
|
|
Search,
|
|
Upload,
|
|
} from "lucide-react";
|
|
|
|
import Select from "react-select";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
interface SKLData {
|
|
no: number;
|
|
namaPerusahaan: string;
|
|
tahun: number;
|
|
periodePelaporan: string;
|
|
skl: number;
|
|
spbm: number;
|
|
hasil: {
|
|
il: string;
|
|
al: string;
|
|
lb3: string;
|
|
sb: string;
|
|
bs: string;
|
|
stb: string;
|
|
lp: string;
|
|
kdm: string;
|
|
};
|
|
stt: string;
|
|
se: string;
|
|
}
|
|
|
|
export default function PelaporanIndex() {
|
|
const [year, setYear] = useState<string>("2025");
|
|
const [quarter, setQuarter] = useState<string>("Triwulan 1");
|
|
// const [company, setCompany] = useState<string>("PT Ajinomoto Indonesia");
|
|
|
|
const companyOptions = [
|
|
{ value: "PT Ajinomoto Indonesia", label: "PT Ajinomoto Indonesia" },
|
|
{ value: "PT Unilever Indonesia", label: "PT Unilever Indonesia" },
|
|
{
|
|
value: "PT Indofood Sukses Makmur",
|
|
label: "PT Indofood Sukses Makmur",
|
|
},
|
|
{ value: "PT Mayora Indah", label: "PT Mayora Indah" },
|
|
];
|
|
|
|
const [company, setCompany] = useState<{
|
|
value: string;
|
|
label: string;
|
|
} | null>(companyOptions[0]);
|
|
// Color coding helper
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case "belum":
|
|
return "bg-red-100 text-red-800";
|
|
case "pending":
|
|
return "bg-gray-100 text-gray-800";
|
|
case "siap":
|
|
return "bg-orange-100 text-orange-800";
|
|
case "selesai":
|
|
return "bg-green-100 text-green-800";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
return (
|
|
<AuthenticatedLayout header={"Pelaporan SKL"}>
|
|
<Head title="Pelaporan SKL" />
|
|
|
|
<div className="p-8">
|
|
{/* Filter Section */}
|
|
<div className="bg-white rounded-lg shadow-sm mb-6">
|
|
<Card className="shadow-md border-slate-200 justify-between">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg font-medium">
|
|
Pelaporan SKL
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
|
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center w-full">
|
|
<Select
|
|
options={companyOptions}
|
|
value={company}
|
|
onChange={setCompany}
|
|
placeholder="Pilih Perusahaan"
|
|
isSearchable
|
|
className="w-full sm:w-[300px]"
|
|
/>
|
|
|
|
<div className="flex gap-4 w-full sm:w-auto">
|
|
<Input
|
|
type="number"
|
|
value={year}
|
|
onChange={(e) =>
|
|
setYear(e.target.value)
|
|
}
|
|
className="w-full sm:w-24"
|
|
/>
|
|
|
|
<Select
|
|
options={[
|
|
{
|
|
value: "Triwulan 1",
|
|
label: "Triwulan 1",
|
|
},
|
|
{
|
|
value: "Triwulan 2",
|
|
label: "Triwulan 2",
|
|
},
|
|
{
|
|
value: "Triwulan 3",
|
|
label: "Triwulan 3",
|
|
},
|
|
{
|
|
value: "Triwulan 4",
|
|
label: "Triwulan 4",
|
|
},
|
|
]}
|
|
value={{
|
|
value: quarter,
|
|
label: quarter,
|
|
}}
|
|
onChange={(newValue) =>
|
|
setQuarter(
|
|
newValue?.value ||
|
|
"Triwulan 1"
|
|
)
|
|
}
|
|
placeholder="Pilih Periode"
|
|
className="w-full sm:w-[150px]"
|
|
/>
|
|
</div>
|
|
|
|
<Button className="w-full sm:w-auto">
|
|
<Search className="w-4 h-4 mr-2" />
|
|
Cari
|
|
</Button>
|
|
</div>
|
|
|
|
{/* <div className="flex gap-2">
|
|
<Button variant="outline">
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Import
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Export
|
|
</Button>
|
|
<Button variant="outline">
|
|
<FileText className="w-4 h-4 mr-2" />
|
|
Template
|
|
</Button>
|
|
</div> */}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Table Section */}
|
|
<div className="w-full overflow-x-auto">
|
|
<Table className="min-w-[1000px] border-collapse">
|
|
<TableHeader>
|
|
<TableRow className="border-b border-t bg-green-800">
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="w-[50px] border-r border-l text-white"
|
|
>
|
|
No.
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
Nama Perusahaan
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
Tahun
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
Periode Pelaporan
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
SKL (%)
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
SPBM (%)
|
|
</TableHead>
|
|
<TableHead
|
|
className="border-r text-center text-white"
|
|
colSpan={8}
|
|
>
|
|
Hasil (Nilai SKL)
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
STT
|
|
</TableHead>
|
|
<TableHead
|
|
rowSpan={2}
|
|
className="border-r text-center text-white"
|
|
>
|
|
SE
|
|
</TableHead>
|
|
</TableRow>
|
|
<TableRow className="border-b bg-green-600">
|
|
<TableHead className="text-center border-r text-white">
|
|
IL
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
AL
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
LB3
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
SB
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
BS
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
STB
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
LP
|
|
</TableHead>
|
|
<TableHead className="text-center border-r text-white">
|
|
KDM
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="border-b">
|
|
<TableRow className="border-b">
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
1
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
PT Ajinomoto Indonesia
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
2023
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
Triwulan 2 / Semester 1
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l "
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-red-100 text-red-700"
|
|
>
|
|
00.00
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-red-100 text-red-700"
|
|
>
|
|
<Link href="/admin/pelaporan/al">
|
|
00.00
|
|
</Link>
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-red-100 text-red-700"
|
|
>
|
|
00.00
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-gray-100 text-gray-700"
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-gray-100 text-gray-700"
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-orange-100 text-orange-700"
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-green-100 text-green-700"
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center hover:underline text-muted-foreground border-r border-l bg-green-100 text-green-700"
|
|
>
|
|
76.70
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
</TableCell>
|
|
<TableCell
|
|
colSpan={1}
|
|
className="text-center text-muted-foreground border-r border-l"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
{/* Pagination */}
|
|
{/* <div className="mt-4 flex items-center gap-2 justify-end">
|
|
<Button variant="outline" size="icon">
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div> */}
|
|
|
|
{/* Legend Section */}
|
|
<div className="mt-6 flex flex-col md:grid md:grid-cols-2 gap-6">
|
|
{/* Keterangan Section */}
|
|
<div className="bg-white rounded-lg shadow-sm border p-4 md:p-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<FileText className="w-5 h-5 text-green-600" />
|
|
<h3 className="font-semibold text-lg">
|
|
Keterangan
|
|
</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
SKL : Status Ketaatan Lingkungan
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
SPBM : Status Pemenuhan Baku Mutu
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
IL : Ijin Lingkungan
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">AL : Air Limbah</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">LB3 : Limbah B3</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
SB : Sumber Bergerak
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
BS : Kebisingan & Udara Ambien
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
STB : Sumber Tidak Bergerak
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">LP : Limbah Padat</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
KDM : Kawasan Dilarang Merokok
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 pt-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
STT : Surat Tanda Terima
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 pt-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
|
|
<p className="text-sm">
|
|
SE : Surat Evaluasi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status Data Section */}
|
|
<div className="bg-white rounded-lg shadow-sm border p-4 md:p-6 mt-4 md:mt-0">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<BadgeCheck className="w-5 h-5 text-green-600" />
|
|
<h3 className="font-semibold text-lg">
|
|
Status Data
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3 p-2 rounded-md bg-red-100">
|
|
<div className="min-w-[12px] w-3 h-3 rounded-full bg-red-500"></div>
|
|
<p className="text-sm text-red-700">
|
|
Data belum diisi
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3 p-2 rounded-md bg-gray-100">
|
|
<div className="min-w-[12px] w-3 h-3 rounded-full bg-gray-500"></div>
|
|
<p className="text-sm text-gray-700">
|
|
Data telah diisi dan belum diverifikasi
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3 p-2 rounded-md bg-orange-100">
|
|
<div className="min-w-[12px] w-3 h-3 rounded-full bg-orange-500"></div>
|
|
<p className="text-sm text-orange-700">
|
|
Data telah siap untuk diverifikasi
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3 p-2 rounded-md bg-green-100">
|
|
<div className="min-w-[12px] w-3 h-3 rounded-full bg-green-500"></div>
|
|
<p className="text-sm text-green-700">
|
|
Data telah diisi dan diverifikasi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|