126 lines
5.1 KiB
TypeScript
126 lines
5.1 KiB
TypeScript
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
|
import { Head } from "@inertiajs/react";
|
|
import {
|
|
Building,
|
|
School,
|
|
Skull,
|
|
TestTubeDiagonalIcon,
|
|
UsersRound,
|
|
Waves,
|
|
} from "lucide-react";
|
|
import StatsCard from "@/components/Dashboard/DashCard";
|
|
import CerobongCard from "@/components/Dashboard/CerobongCard";
|
|
import { ChartCard } from "@/components/Dashboard/ChartCard";
|
|
|
|
export default function Dashboard() {
|
|
return (
|
|
<AuthenticatedLayout header="Dashboard">
|
|
<Head title="Dashboard" />
|
|
|
|
<div className="flex flex-1 flex-col gap-4 h-full">
|
|
<DatePickerWithRange />
|
|
<div className="grid gap-4 md:grid-cols-5 items-center w-full">
|
|
<StatsCard
|
|
title="Total Laporan Perusahaan"
|
|
icon={<School size={24} />}
|
|
value={1305}
|
|
fromColor="from-[#E6F9FF]"
|
|
toColor=""
|
|
/>
|
|
<StatsCard
|
|
title="Jumlah Perusahaan"
|
|
icon={<Building size={24} />}
|
|
value={1305}
|
|
fromColor="from-[#F7E9FF]"
|
|
toColor=""
|
|
/>
|
|
<StatsCard
|
|
title="Jumlah Verifikator"
|
|
icon={<UsersRound size={24} />}
|
|
value={1305}
|
|
fromColor="from-[#F7E9FF]"
|
|
toColor=""
|
|
/>
|
|
<StatsCard
|
|
title="Air Limbah"
|
|
icon={<Waves size={24} />}
|
|
value={1305}
|
|
fromColor="from-[#F7E9FF]"
|
|
toColor="#fffff"
|
|
/>
|
|
<StatsCard
|
|
title="Limbah B3"
|
|
icon={<Skull size={24} />}
|
|
value={1305}
|
|
fromColor="from-[#F7E9FF]"
|
|
toColor="#fffff"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row mt-8">
|
|
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
|
|
<div className="font-semibold leading-none tracking-tight">
|
|
Total Cerobong per hari ini
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Senin, 03 Feb 2025
|
|
</div>
|
|
</div>
|
|
<div className="flex">
|
|
<button
|
|
data-active="true"
|
|
className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
|
|
>
|
|
<span className="text-xs text-muted-foreground">
|
|
Seluruh Perusahaan
|
|
</span>
|
|
<span className="text-lg font-bold leading-none sm:text-3xl">
|
|
2336
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<ChartCard />
|
|
</div>
|
|
|
|
{/* <div className="flex flex-1 flex-col gap-4 h-full mt-4">
|
|
<div>
|
|
<h2>Total Cerobong per hari ini</h2>
|
|
<span>Senin, 03 Feb 2025</span>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-4 items-center w-full">
|
|
<CerobongCard
|
|
title="Seluruh Perusahaan"
|
|
value={1305}
|
|
fromColor="from-[#F7E9FF]"
|
|
toColor="#fffff"
|
|
/>
|
|
<CardChart />
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* <div className="flex-row mt-5">
|
|
<div className="w-1/3 gap-4 md:grid-cols-3 items-center">
|
|
<div className="flex flex-row gap-4 h-full">
|
|
<div className="flex flex-col">
|
|
<h2>Total Cerobong per hari ini</h2>
|
|
<span>Senin, 03 Feb 2025</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-2/3 gap-4 md:grid-cols-3 items-center mt-3 ">
|
|
<CerobongCard
|
|
title="Jumlah Perusahaan"
|
|
value={1305}
|
|
fromColor="from-[#F7E9FF]"
|
|
toColor=""
|
|
/>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|