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>
    );
}
