feat: Tambahkan halaman dashboard_perusahaan, dashboard_admin
marszayn
parent
a61eb18e42
commit
6bb5742623
|
|
@ -1,22 +1,25 @@
|
||||||
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
||||||
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
||||||
import { Head } from "@inertiajs/react";
|
import { Head, usePage } from "@inertiajs/react";
|
||||||
import {
|
import {
|
||||||
Building,
|
Building,
|
||||||
School,
|
School,
|
||||||
Skull,
|
|
||||||
UsersRound,
|
UsersRound,
|
||||||
Waves,
|
Waves,
|
||||||
TrendingUp,
|
Skull,
|
||||||
ArrowUpRight,
|
ArrowUpRight,
|
||||||
ArrowDownRight,
|
ArrowDownRight,
|
||||||
|
TrendingUp,
|
||||||
Activity,
|
Activity,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import StatsCard from "@/components/Dashboard/DashCard";
|
|
||||||
import { ChartCard } from "@/components/Dashboard/ChartCard";
|
|
||||||
import { Card } from "@/components/ui/card";
|
import { Card } from "@/components/ui/card";
|
||||||
|
import hasAnyPermission from "@/utils/hasAnyPermission";
|
||||||
|
import { ChartCard } from "@/components/Dashboard/ChartCard";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
|
const { auth, runPosts } = usePage().props;
|
||||||
|
const userPermissions = auth?.user?.permissions ?? [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthenticatedLayout header="Dashboard">
|
<AuthenticatedLayout header="Dashboard">
|
||||||
<Head title="Dashboard" />
|
<Head title="Dashboard" />
|
||||||
|
|
@ -28,18 +31,15 @@ export default function Dashboard() {
|
||||||
<h2 className="text-2xl font-bold tracking-tight">
|
<h2 className="text-2xl font-bold tracking-tight">
|
||||||
Dashboard Overview
|
Dashboard Overview
|
||||||
</h2>
|
</h2>
|
||||||
{/* <p className="text-muted-foreground">
|
|
||||||
Detailed monitoring and analytics of environmental
|
|
||||||
metrics
|
|
||||||
</p> */}
|
|
||||||
</div>
|
</div>
|
||||||
<DatePickerWithRange />
|
<DatePickerWithRange />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Cards Grid */}
|
{/* Stats Section */}
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
||||||
|
{/* Total Laporan (Cek Permission) */}
|
||||||
|
{/* {hasAnyPermission(userPermissions, ["Dashboard.index"]) && ( */}
|
||||||
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
|
|
||||||
<div className="p-6 relative">
|
<div className="p-6 relative">
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div className="p-2 bg-blue-100 rounded-lg">
|
<div className="p-2 bg-blue-100 rounded-lg">
|
||||||
|
|
@ -58,9 +58,10 @@ export default function Dashboard() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
{/* )} */}
|
||||||
|
|
||||||
|
{/* Jumlah Perusahaan */}
|
||||||
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
|
|
||||||
<div className="p-6 relative">
|
<div className="p-6 relative">
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div className="p-2 bg-purple-100 rounded-lg">
|
<div className="p-2 bg-purple-100 rounded-lg">
|
||||||
|
|
@ -80,8 +81,8 @@ export default function Dashboard() {
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* Jumlah Verifikator */}
|
||||||
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-green-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
|
|
||||||
<div className="p-6 relative">
|
<div className="p-6 relative">
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div className="p-2 bg-green-100 rounded-lg">
|
<div className="p-2 bg-green-100 rounded-lg">
|
||||||
|
|
@ -101,8 +102,8 @@ export default function Dashboard() {
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* Air Limbah */}
|
||||||
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
|
|
||||||
<div className="p-6 relative">
|
<div className="p-6 relative">
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div className="p-2 bg-cyan-100 rounded-lg">
|
<div className="p-2 bg-cyan-100 rounded-lg">
|
||||||
|
|
@ -122,8 +123,8 @@ export default function Dashboard() {
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* Limbah B3 */}
|
||||||
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-red-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
|
|
||||||
<div className="p-6 relative">
|
<div className="p-6 relative">
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div className="p-2 bg-red-100 rounded-lg">
|
<div className="p-2 bg-red-100 rounded-lg">
|
||||||
|
|
@ -146,8 +147,7 @@ export default function Dashboard() {
|
||||||
|
|
||||||
{/* Cerobong Stats Section */}
|
{/* Cerobong Stats Section */}
|
||||||
<Card className="relative overflow-hidden">
|
<Card className="relative overflow-hidden">
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-orange-50/50 to-transparent" />
|
<div className="p-6 relative">
|
||||||
<div className="relative p-6">
|
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="p-2 bg-orange-100 rounded-lg">
|
<div className="p-2 bg-orange-100 rounded-lg">
|
||||||
|
|
@ -164,15 +164,10 @@ export default function Dashboard() {
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<p className="text-3xl font-bold">2,336</p>
|
<p className="text-3xl font-bold">2,336</p>
|
||||||
<div className="flex items-center justify-end gap-1 text-sm text-green-600 mt-1">
|
|
||||||
<span>Seluruh Perusahaan</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Chart Section */}
|
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<ChartCard />
|
<ChartCard />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
||||||
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
||||||
|
import { Head, usePage } from "@inertiajs/react";
|
||||||
|
import {
|
||||||
|
Building,
|
||||||
|
School,
|
||||||
|
UsersRound,
|
||||||
|
Waves,
|
||||||
|
Skull,
|
||||||
|
ArrowUpRight,
|
||||||
|
ArrowDownRight,
|
||||||
|
TrendingUp,
|
||||||
|
Activity,
|
||||||
|
} 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-5">
|
||||||
|
{/* Total Laporan (Cek Permission) */}
|
||||||
|
{/* {hasAnyPermission(userPermissions, ["Dashboard.index"]) && ( */}
|
||||||
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
|
<div className="p-6 relative">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="p-2 bg-blue-100 rounded-lg">
|
||||||
|
<School className="h-5 w-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-green-600">
|
||||||
|
<TrendingUp className="h-4 w-4 mr-1" />
|
||||||
|
+12.5%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Laporan
|
||||||
|
</h3>
|
||||||
|
<p className="text-2xl font-bold">1,305</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
{/* )} */}
|
||||||
|
|
||||||
|
{/* Jumlah Perusahaan */}
|
||||||
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
|
<div className="p-6 relative">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="p-2 bg-purple-100 rounded-lg">
|
||||||
|
<Building className="h-5 w-5 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-green-600">
|
||||||
|
<TrendingUp className="h-4 w-4 mr-1" />
|
||||||
|
+8.2%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground">
|
||||||
|
Jumlah Perusahaan
|
||||||
|
</h3>
|
||||||
|
<p className="text-2xl font-bold">847</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Jumlah Verifikator */}
|
||||||
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
|
<div className="p-6 relative">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="p-2 bg-green-100 rounded-lg">
|
||||||
|
<UsersRound className="h-5 w-5 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-red-600">
|
||||||
|
<ArrowDownRight className="h-4 w-4 mr-1" />
|
||||||
|
-3.1%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground">
|
||||||
|
Jumlah Verifikator
|
||||||
|
</h3>
|
||||||
|
<p className="text-2xl font-bold">124</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Air Limbah */}
|
||||||
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
|
<div className="p-6 relative">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="p-2 bg-cyan-100 rounded-lg">
|
||||||
|
<Waves className="h-5 w-5 text-cyan-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-green-600">
|
||||||
|
<ArrowUpRight className="h-4 w-4 mr-1" />
|
||||||
|
+5.7%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground">
|
||||||
|
Air Limbah
|
||||||
|
</h3>
|
||||||
|
<p className="text-2xl font-bold">2,431</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Limbah B3 */}
|
||||||
|
<Card className="relative overflow-hidden group transition-all hover:shadow-lg">
|
||||||
|
<div className="p-6 relative">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="p-2 bg-red-100 rounded-lg">
|
||||||
|
<Skull className="h-5 w-5 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-red-600">
|
||||||
|
<ArrowDownRight className="h-4 w-4 mr-1" />
|
||||||
|
-2.3%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground">
|
||||||
|
Limbah B3
|
||||||
|
</h3>
|
||||||
|
<p className="text-2xl font-bold">567</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
||||||
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
||||||
|
import { Head, usePage } from "@inertiajs/react";
|
||||||
|
import {
|
||||||
|
Building,
|
||||||
|
School,
|
||||||
|
UsersRound,
|
||||||
|
Waves,
|
||||||
|
Skull,
|
||||||
|
ArrowUpRight,
|
||||||
|
ArrowDownRight,
|
||||||
|
TrendingUp,
|
||||||
|
Activity,
|
||||||
|
} 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">
|
||||||
|
Selamat Datang, {auth.user?.name} 🫡
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AuthenticatedLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,258 @@
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue