259 lines
13 KiB
TypeScript
259 lines
13 KiB
TypeScript
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
|
import { Head, usePage, Link } from "@inertiajs/react";
|
|
import {
|
|
Building,
|
|
School,
|
|
UsersRound,
|
|
Waves,
|
|
Skull,
|
|
ArrowUpRight,
|
|
ArrowDownRight,
|
|
TrendingUp,
|
|
Activity,
|
|
FileText,
|
|
Volume2,
|
|
Box,
|
|
Ban,
|
|
} from "lucide-react";
|
|
import { Card } from "@/components/ui/card";
|
|
import hasAnyPermission from "@/utils/hasAnyPermission";
|
|
import { ChartCard } from "@/components/Dashboard/ChartCard";
|
|
|
|
export default function Dashboard() {
|
|
const { auth, runPosts } = usePage().props;
|
|
const userPermissions = auth?.user?.permissions ?? [];
|
|
|
|
return (
|
|
<AuthenticatedLayout header="Dashboard">
|
|
<Head title="Dashboard" />
|
|
|
|
<div className="flex flex-1 flex-col gap-6 h-full p-6">
|
|
{/* Top Section */}
|
|
<div className="flex justify-between items-center gap-4 flex-wrap">
|
|
<div className="space-y-1">
|
|
<h2 className="text-2xl font-bold tracking-tight">
|
|
Dashboard Overview
|
|
</h2>
|
|
</div>
|
|
<DatePickerWithRange />
|
|
</div>
|
|
|
|
{/* Stats Section */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{/* Izin Lingkungan */}
|
|
<Card className="bg-emerald-500 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<FileText className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">13.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Izin Lingkungan
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/environmental-permit"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Air Limbah */}
|
|
<Card className="bg-blue-500 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Waves className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">62.67</p>
|
|
<h3 className="text-xl font-medium">
|
|
Air Limbah
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/wastewater"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Limbah B3 */}
|
|
<Card className="bg-red-500 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Skull className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">0.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Limbah B3
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/hazardous-waste"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Sumber Bergerak */}
|
|
<Card className="bg-purple-500 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Building className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">0.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Sumber Bergerak
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/mobile-sources"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Kebisingan */}
|
|
<Card className="bg-blue-600 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Volume2 className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">0.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Kebisingan
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/noise"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Sumber Tidak Bergerak */}
|
|
<Card className="bg-purple-400 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Building className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">0.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Sumber Tidak Bergerak
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/stationary-sources"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Limbah Padat */}
|
|
<Card className="bg-gray-400 text-white relative overflow-hidden flex flex-col">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Box className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">0.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Limbah Padat
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/solid-waste"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
|
|
{/* Kawasan Dilarang Merokok */}
|
|
<Card className="bg-orange-400 text-white relative overflow-hidden flex flex-col ">
|
|
<div className="p-6 relative flex-grow">
|
|
<div className="flex justify-between items-center">
|
|
<div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
|
|
<Ban className="h-24 w-24" />
|
|
</div>
|
|
<div className="z-10 w-full text-right">
|
|
<p className="text-4xl font-bold">0.00</p>
|
|
<h3 className="text-xl font-medium">
|
|
Kawasan Dilarang Merokok
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/reports/no-smoking-zones"
|
|
className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
|
|
>
|
|
KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
|
|
</Link>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Cerobong Stats Section */}
|
|
<Card className="relative overflow-hidden">
|
|
<div className="p-6 relative">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-orange-100 rounded-lg">
|
|
<Activity className="h-5 w-5 text-orange-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold">
|
|
Total Cerobong
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Update terakhir: Senin, 03 Feb 2025
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-3xl font-bold">2,336</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<div className="w-full">
|
|
<ChartCard />
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|