178 lines
8.5 KiB
TypeScript
178 lines
8.5 KiB
TypeScript
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>
|
|
);
|
|
}
|