feat: Tambahkan halaman dashboard_perusahaan, dashboard_admin
marszayn
parent
a61eb18e42
commit
6bb5742623
|
|
@ -1,22 +1,25 @@
|
|||
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
||||
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
||||
import { Head } from "@inertiajs/react";
|
||||
import { Head, usePage } from "@inertiajs/react";
|
||||
import {
|
||||
Building,
|
||||
School,
|
||||
Skull,
|
||||
UsersRound,
|
||||
Waves,
|
||||
TrendingUp,
|
||||
Skull,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight,
|
||||
TrendingUp,
|
||||
Activity,
|
||||
} from "lucide-react";
|
||||
import StatsCard from "@/components/Dashboard/DashCard";
|
||||
import { ChartCard } from "@/components/Dashboard/ChartCard";
|
||||
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" />
|
||||
|
|
@ -28,18 +31,15 @@ export default function Dashboard() {
|
|||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
Dashboard Overview
|
||||
</h2>
|
||||
{/* <p className="text-muted-foreground">
|
||||
Detailed monitoring and analytics of environmental
|
||||
metrics
|
||||
</p> */}
|
||||
</div>
|
||||
<DatePickerWithRange />
|
||||
</div>
|
||||
|
||||
{/* Stats Cards Grid */}
|
||||
{/* 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="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="flex justify-between items-start">
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
|
|
@ -58,9 +58,10 @@ export default function Dashboard() {
|
|||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/* )} */}
|
||||
|
||||
{/* Jumlah Perusahaan */}
|
||||
<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="flex justify-between items-start">
|
||||
<div className="p-2 bg-purple-100 rounded-lg">
|
||||
|
|
@ -80,8 +81,8 @@ export default function Dashboard() {
|
|||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Jumlah Verifikator */}
|
||||
<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="flex justify-between items-start">
|
||||
<div className="p-2 bg-green-100 rounded-lg">
|
||||
|
|
@ -101,8 +102,8 @@ export default function Dashboard() {
|
|||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Air Limbah */}
|
||||
<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="flex justify-between items-start">
|
||||
<div className="p-2 bg-cyan-100 rounded-lg">
|
||||
|
|
@ -122,8 +123,8 @@ export default function Dashboard() {
|
|||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Limbah B3 */}
|
||||
<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="flex justify-between items-start">
|
||||
<div className="p-2 bg-red-100 rounded-lg">
|
||||
|
|
@ -146,8 +147,7 @@ export default function Dashboard() {
|
|||
|
||||
{/* Cerobong Stats Section */}
|
||||
<Card className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-orange-50/50 to-transparent" />
|
||||
<div className="relative p-6">
|
||||
<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">
|
||||
|
|
@ -164,15 +164,10 @@ export default function Dashboard() {
|
|||
</div>
|
||||
<div className="text-right">
|
||||
<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>
|
||||
</Card>
|
||||
|
||||
{/* Chart Section */}
|
||||
<div className="w-full">
|
||||
<ChartCard />
|
||||
</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