fe dan dashboard

2025-02-03 15:53:01 +07:00 · 2025-02-03 15:53:01 +07:00 · a9edde2fbd
parent d8125911a7
commit a9edde2fbd
62 changed files with 5604 additions and 4661 deletions
--- a/app/Models/User.php
+++ b/app/Models/User.php
@ -2,12 +2,12 @@

 namespace App\Models;

-use Illuminate\Contracts\Auth\MustVerifyEmail;
+// use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;

-class User extends Authenticatable implements MustVerifyEmail
+class User extends Authenticatable /*implements MustVerifyEmail*/
 {
    use HasFactory, Notifiable;

--- a/components.json
+++ b/components.json
@ -1,17 +1,21 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": true,
+  "style": "new-york",
+  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "resources/css/app.css",
-    "baseColor": "slate",
+    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\User;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\Hash;
+
+class UserSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        User::create([
+            'name' => 'Admin User',
+            'email' => 'admin@gmail.com',
+            'password' => Hash::make('password')
+        ]);
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
        "@headlessui/react": "^1.4.2",
        "@inertiajs/react": "^1.3.0",
        "@tailwindcss/forms": "^0.5.3",
+        "@types/highlight.js": "^9.12.4",
        "@types/node": "^18.13.0",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.10",
@ -24,6 +25,7 @@
        "vite": "^5.0"
    },
    "dependencies": {
+        "@iconify/react": "^5.2.0",
        "@radix-ui/react-alert-dialog": "^1.0.5",
        "@radix-ui/react-avatar": "^1.1.1",
        "@radix-ui/react-collapsible": "^1.1.1",
@ -34,16 +36,32 @@
        "@radix-ui/react-popover": "^1.0.7",
        "@radix-ui/react-scroll-area": "^1.0.5",
        "@radix-ui/react-separator": "^1.1.0",
-        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-slot": "^1.1.1",
+        "@radix-ui/react-switch": "^1.1.2",
        "@radix-ui/react-tooltip": "^1.1.3",
-        "class-variance-authority": "^0.7.0",
+        "@reduxjs/toolkit": "^2.5.1",
+        "@types/react-redux": "^7.1.34",
+        "apexcharts": "^4.4.0",
+        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "date-fns": "^3.6.0",
+        "highlight.js": "^11.11.1",
+        "i18next-browser-languagedetector": "^8.0.2",
+        "i18next-http-backend": "^3.0.2",
        "lucide-react": "^0.378.0",
        "next-themes": "^0.3.0",
+        "react-animate-height": "^3.2.3",
+        "react-apexcharts": "^1.7.0",
+        "react-day-picker": "^8.10.1",
+        "react-i18next": "^15.4.0",
+        "react-perfect-scrollbar": "^1.5.8",
+        "react-popper": "^2.3.0",
+        "react-redux": "^9.2.0",
        "react-resizable-panels": "^2.0.19",
+        "react-router-dom": "^7.1.4",
        "react-type-animation": "^3.2.0",
-        "tailwind-merge": "^2.3.0",
+        "recharts": "^2.15.1",
+        "tailwind-merge": "^2.6.0",
        "tailwindcss-animate": "^1.0.7",
        "vaul": "^1.1.2",
        "ziggy-js": "^2.5.0",
--- a/public/assets/bg-login.png
+++ b/public/assets/bg-login.png
--- a/public/assets/bg-login.svg
+++ b/public/assets/bg-login.svg
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/resources/css/app.css
+++ b/resources/css/app.css
@ -4,6 +4,42 @@

@layer base {
    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --radius: 0.5rem;
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+    }
+    /*
+    .light {
        --background: 210 17% 98%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
@ -32,28 +68,29 @@
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
-    }
+    } */

    .dark {
-        --background: 240 10% 3.9%;
+        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
-        --card: 240 10% 3.9%;
+        --card: 0 0% 3.9%;
+        /* --card: 0 0% 100%; */
        --card-foreground: 0 0% 98%;
-        --popover: 240 10% 3.9%;
+        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
-        --primary-foreground: 240 5.9% 10%;
-        --secondary: 240 3.7% 15.9%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-        --accent: 240 3.7% 15.9%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
        --sidebar-background: 240 5.9% 10%;
        --sidebar-foreground: 240 4.8% 95.9%;
        --sidebar-primary: 224.3 76.3% 48%;
@ -62,6 +99,11 @@
        --sidebar-accent-foreground: 240 4.8% 95.9%;
        --sidebar-border: 240 3.7% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
    }
 }

--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@ -1,5 +1,4 @@
 import "./bootstrap";
-import "../css/app.css";

 import { createRoot } from "react-dom/client";
 import { createInertiaApp } from "@inertiajs/react";
--- a/resources/js/components/Pengumuman/CardPengumuman.tsx
+++ b/resources/js/components/Pengumuman/CardPengumuman.tsx
--- a/resources/js/components/Pengumuman/CardPeraturan.tsx
+++ b/resources/js/components/Pengumuman/CardPeraturan.tsx
--- a/resources/js/components/Pengumuman/CardUndangan.tsx
+++ b/resources/js/components/Pengumuman/CardUndangan.tsx
--- a/resources/js/components/Pengumuman/HeroSecond.tsx
+++ b/resources/js/components/Pengumuman/HeroSecond.tsx
--- a/resources/js/components/Dashboard/CerobongCard.tsx
+++ b/resources/js/components/Dashboard/CerobongCard.tsx
@ -0,0 +1,37 @@
+import React from "react";
+import { Building } from "lucide-react";
+
+type CerobongCardProps = {
+    title: string;
+
+    value: number;
+    fromColor: string;
+    toColor: string;
+};
+
+const CerobongCard: React.FC<CerobongCardProps> = ({
+    title,
+    value,
+    fromColor,
+    toColor,
+}) => {
+    return (
+        <div
+            className={`rounded-xl border bg-card text-card-foreground shadow
+                bg-gradient-to-r ${fromColor} ${toColor} dark:from-gray-800 dark:to-black`}
+        >
+            <div className="flex flex-col items-center justify-center">
+                <div className="px-5 pt-4">
+                    <div className="text-2xl font-bold">{value}</div>
+                </div>
+                <div className="px-5 pb-4 items-center space-y-0">
+                    <div className="tracking-tight text-sm font-medium">
+                        {title}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CerobongCard;
--- a/resources/js/components/Dashboard/ChartCard.tsx
+++ b/resources/js/components/Dashboard/ChartCard.tsx
@ -0,0 +1,70 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+} from "@/components/ui/chart";
+const chartData = [
+    { month: "Genset", desktop: 186 },
+    { month: "Boiler", desktop: 305 },
+    { month: "Proses", desktop: 237 },
+];
+
+const chartConfig = {
+    desktop: {
+        label: "Value",
+        color: "hsl(var(--chart-1))",
+    },
+} satisfies ChartConfig;
+
+export function ChartCard() {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Sumber Emisi</CardTitle>
+                {/* <CardDescription>January - June 2024</CardDescription> */}
+            </CardHeader>
+            <CardContent>
+                <ChartContainer config={chartConfig}>
+                    <BarChart accessibilityLayer data={chartData}>
+                        <CartesianGrid vertical={false} />
+                        <XAxis
+                            dataKey="month"
+                            tickLine={false}
+                            tickMargin={10}
+                            axisLine={false}
+                            // tickFormatter={(value) => value.slice(0, 3)}
+                        />
+                        <ChartTooltip
+                            cursor={false}
+                            content={<ChartTooltipContent hideLabel />}
+                        />
+                        <Bar dataKey="desktop" fill="#53a946" radius={8} />
+                    </BarChart>
+                </ChartContainer>
+            </CardContent>
+            {/* <CardFooter className="flex-col items-start gap-2 text-sm">
+                <div className="flex gap-2 font-medium leading-none">
+                    Trending up by 5.2% this month{" "}
+                    <TrendingUp className="h-4 w-4" />
+                </div>
+                <div className="leading-none text-muted-foreground">
+                    Showing total visitors for the last 6 months
+                </div>
+            </CardFooter> */}
+        </Card>
+    );
+}
--- a/resources/js/components/Dashboard/DashCard.tsx
+++ b/resources/js/components/Dashboard/DashCard.tsx
@ -0,0 +1,37 @@
+import React from "react";
+import { Building } from "lucide-react";
+
+type DashCardProps = {
+    title: string;
+    icon: React.ReactNode;
+    value: number;
+    fromColor: string;
+    toColor: string;
+};
+
+const DashCard: React.FC<DashCardProps> = ({
+    title,
+    icon,
+    value,
+    fromColor,
+    toColor,
+}) => {
+    return (
+        <div
+            className={`rounded-xl border bg-card text-card-foreground shadow
+                bg-gradient-to-r ${fromColor} ${toColor} dark:from-gray-800 dark:to-black`}
+        >
+            <div className="p-5 flex flex-row items-center justify-between space-y-0 pb-2">
+                <div className="tracking-tight text-sm font-medium">
+                    {title}
+                </div>
+                <div className={`rounded-full p-2`}>{icon}</div>
+            </div>
+            <div className="p-5 pt-0">
+                <div className="text-2xl font-bold">{value}</div>
+            </div>
+        </div>
+    );
+};
+
+export default DashCard;
--- a/resources/js/components/Dashboard/DatePicker.tsx
+++ b/resources/js/components/Dashboard/DatePicker.tsx
@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import { addDays, format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+
+export function DatePickerWithRange({
+    className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+    const [date, setDate] = React.useState<DateRange | undefined>({
+        from: new Date(2022, 0, 20),
+        to: addDays(new Date(2022, 0, 20), 20),
+    });
+
+    return (
+        <div className={cn("grid gap-2", className)}>
+            <Popover>
+                <PopoverTrigger asChild>
+                    <Button
+                        id="date"
+                        variant={"outline"}
+                        className={cn(
+                            "w-[300px] justify-start text-left font-normal",
+                            !date && "text-muted-foreground"
+                        )}
+                    >
+                        <CalendarIcon />
+                        {date?.from ? (
+                            date.to ? (
+                                <>
+                                    {format(date.from, "LLL dd, y")} -{" "}
+                                    {format(date.to, "LLL dd, y")}
+                                </>
+                            ) : (
+                                format(date.from, "LLL dd, y")
+                            )
+                        ) : (
+                            <span>Pick a date</span>
+                        )}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                        initialFocus
+                        mode="range"
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={setDate}
+                        numberOfMonths={2}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}
--- a/resources/js/components/Dashboard/Dropdown.tsx
+++ b/resources/js/components/Dashboard/Dropdown.tsx
@ -0,0 +1,68 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+
+const Dropdown = (props : any, forwardedRef: any) => {
+    const [visibility, setVisibility] = useState<any>(false);
+
+    const referenceRef = useRef<any>();
+    const popperRef = useRef<any>();
+
+    const { styles, attributes } = usePopper(referenceRef.current, popperRef.current, {
+        placement: props.placement || 'bottom-end',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: props.offset || [(0)],
+                },
+            },
+        ],
+    });
+
+    const handleDocumentClick = (event: any) => {
+        if (referenceRef.current?.contains(event.target) || popperRef.current?.contains(event.target)) {
+            return;
+        }
+
+        setVisibility(false);
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleDocumentClick);
+        return () => {
+            document.removeEventListener('mousedown', handleDocumentClick);
+        };
+    }, []);
+
+    useImperativeHandle(forwardedRef, () => ({
+        close() {
+            setVisibility(false);
+        },
+    }));
+
+    return (
+        <>
+            <button
+                ref={referenceRef}
+                type="button"
+                className={props.btnClassName}
+                onClick={() => setVisibility(!visibility)}
+            >
+                {props.button}
+            </button>
+
+                <div
+                ref={popperRef}
+                style={styles.popper}
+                {...attributes.popper}
+                className="z-50"
+                onClick={() => setVisibility(!visibility)}
+                >
+                    {visibility && props.children}
+                </div>
+
+        </>
+    );
+};
+
+export default forwardRef(Dropdown);
--- a/resources/js/components/Partials/Footer.tsx
+++ b/resources/js/components/Partials/Footer.tsx
@ -1,26 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
-import PopupModal from "@/components/Home/PopupModal";

 const Footer = () => {
-    const [showPopup, setShowPopup] = useState(true);
-
-    useEffect(() => {
-        const hasSeenPopup = localStorage.getItem("hasSeenPopup");
-        if (hasSeenPopup) {
-            setShowPopup(false);
-        }
-    }, []);
-
-    const handleClosePopup = () => {
-        localStorage.setItem("hasSeenPopup", "true");
-        setShowPopup(false);
-    };
-
    return (
        <>
-            {showPopup && <PopupModal onClose={handleClosePopup} />}
            <footer className="relative bg-green-800 bg-[url('/assets/wood.svg')] rounded-tr-3xl rounded-tl-3xl text-white pt-12 px-6 mt-16">
                <div className="md:container max-w-7xl mx-auto text-center">
                    <h2 className="text-3xl font-bold">
--- a/resources/js/components/Partials/Hero.tsx
+++ b/resources/js/components/Partials/Hero.tsx
--- a/resources/js/components/Partials/Navbar.tsx
+++ b/resources/js/components/Partials/Navbar.tsx
@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Search, LogIn, Menu, X } from "lucide-react";
+import { Search, LogIn, Menu, X, Moon, Sun } from "lucide-react";
 import {
    NavigationMenu,
    NavigationMenuList,
    NavigationMenuItem,
 } from "@/components/ui/navigation-menu";
 import { Button } from "@/components/ui/button";
-import { Link } from "@inertiajs/react";
+import { Link, router } from "@inertiajs/react";
 import {
    Drawer,
    DrawerClose,
@ -16,6 +16,7 @@ import {
    DrawerTrigger,
 } from "@/components/ui/drawer";
 import RunningText from "./RunningText";
+import { useTheme } from "next-themes";

 interface NavItemsProps {
    mobile?: boolean;
@ -25,6 +26,8 @@ interface NavItemsProps {
 const Navbar = () => {
    const [isScrolled, setIsScrolled] = useState(false);
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const { theme, setTheme } = useTheme();

    // Handle scroll effect
    useEffect(() => {
@ -37,6 +40,18 @@ const Navbar = () => {
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

+    const toggleTheme = () => {
+        setTheme(theme === "light" ? "dark" : "light");
+    };
+
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (searchQuery) {
+            router.push(`/search/${searchQuery}`);
+            setSearchQuery(""); // Clear input setelah search
+        }
+    };
+
    const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
        <>
            <NavigationMenuItem>
@ -68,17 +83,24 @@ const Navbar = () => {
                </NavigationMenuItem>
            ))}
            <NavigationMenuItem>
-                <Button
-                    variant="ghost"
-                    onClick={mobile && onClose ? onClose : undefined}
-                    className={`transition-all duration-200 text-white hover:text-white ${
-                        mobile
-                            ? "w-full justify-start rounded-lg hover:bg-green-700"
-                            : "rounded-full hover:bg-green-800"
-                    }`}
-                >
-                    <Search className="h-4 w-4 text-white" />
-                </Button>
+                <form onSubmit={handleSearch} className="flex items-center">
+                    <input
+                        type="text"
+                        placeholder="Search..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className={`bg-white text-black px-3 py-2 rounded-l-full focus:outline-none w-full ${
+                            mobile ? "w-32" : "w-40"
+                        }`}
+                    />
+                    <Button
+                        type="submit"
+                        variant="ghost"
+                        className="bg-green-700 hover:bg-green-600 text-white rounded-r-full p-2"
+                    >
+                        <Search className="h-4 w-4 text-white" />
+                    </Button>
+                </form>
            </NavigationMenuItem>
        </>
    );
@ -138,7 +160,7 @@ const Navbar = () => {
                                </DrawerTrigger>
                                <DrawerContent className="bg-green-800/95 backdrop-blur-lg border-none">
                                    <DrawerHeader>
-                                        <DrawerTitle className="text-white text-2xl font-bold">
+                                        <DrawerTitle className="text-white text-2xl text-center font-bold">
                                            Menu
                                        </DrawerTitle>
                                    </DrawerHeader>
@ -166,6 +188,18 @@ const Navbar = () => {
                            </Drawer>
                        </div>

+                        <Button
+                            variant="ghost"
+                            onClick={toggleTheme}
+                            className="p-3 bg-[#2d7448] hover:bg-[#16a34a] rounded-full text-white "
+                        >
+                            {theme === "light" ? (
+                                <Moon className="h-6 w-6" />
+                            ) : (
+                                <Sun className="h-6 w-6" />
+                            )}
+                        </Button>
+
                        <div className="hidden md:block">
                            <Link
                                href="/login"
--- a/resources/js/components/Partials/Pengumuman.tsx
+++ b/resources/js/components/Partials/Pengumuman.tsx
--- a/resources/js/components/Partials/Peraturan.tsx
+++ b/resources/js/components/Partials/Peraturan.tsx
--- a/resources/js/components/Partials/PopupModal.tsx
+++ b/resources/js/components/Partials/PopupModal.tsx
--- a/resources/js/components/Partials/RunningText.tsx
+++ b/resources/js/components/Partials/RunningText.tsx
--- a/resources/js/components/Partials/Tentang.tsx
+++ b/resources/js/components/Partials/Tentang.tsx
--- a/resources/js/components/Partials/Undangan.tsx
+++ b/resources/js/components/Partials/Undangan.tsx
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@ -1,102 +1,112 @@
-"use client"
+"use client";

-import * as React from "react"
+import * as React from "react";
 import {
-  Command,
-  Frame, Home,
-  LifeBuoy,
-  Send,
-  SquareTerminal,
-} from "lucide-react"
+    Command,
+    Frame,
+    Home,
+    LifeBuoy,
+    Send,
+    SquareTerminal,
+} from "lucide-react";

-import { NavMain } from "@/components/nav-main"
-import { NavSecondary } from "@/components/nav-secondary"
-import { NavUser } from "@/components/nav-user"
+import { NavMain } from "@/components/nav-main";
+import { NavSecondary } from "@/components/nav-secondary";
+import { NavUser } from "@/components/nav-user";
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar"
-import {Link, usePage} from "@inertiajs/react";
-import {PageProps} from "@/types";
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { Link, usePage } from "@inertiajs/react";
+import { PageProps } from "@/types";

 const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  navMain: [
-    {
-      title: "Dashboard",
-      url: "/dashboard",
-      icon: Home,
+    user: {
+        name: "shadcn",
+        email: "m@example.com",
+        avatar: "/avatars/shadcn.jpg",
    },
-    {
-      title: "Projects",
-      url: "#",
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
+    navMain: [
        {
-          title: "History",
-          url: "#",
+            title: "Dashboard",
+            url: "/dashboard",
+            icon: Home,
        },
-      ],
-    },
-  {
-      title: "Design Engineering",
-      url: "#",
-      icon: Frame,
-  },
-  ],
-  navSecondary: [
-    {
-      title: "Support",
-      url: "#",
-      icon: LifeBuoy,
-    },
-    {
-      title: "Feedback",
-      url: "#",
-      icon: Send,
-    },
-  ],
-}
+        {
+            title: "Projects",
+            url: "#",
+            icon: SquareTerminal,
+            isActive: true,
+            items: [
+                {
+                    title: "History",
+                    url: "#",
+                },
+            ],
+        },
+        {
+            title: "Design Engineering",
+            url: "#",
+            icon: Frame,
+        },
+    ],
+    navSecondary: [
+        {
+            title: "Support",
+            url: "#",
+            icon: LifeBuoy,
+        },
+        {
+            title: "Feedback",
+            url: "#",
+            icon: Send,
+        },
+    ],
+};

 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    const { auth } = usePage<PageProps>().props;

    return (
-    <Sidebar variant="inset" {...props}>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
-              <Link href={route('dashboard')}>
-                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                  <Command className="size-4" />
-                </div>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">Acme Inc</span>
-                  <span className="truncate text-xs">Enterprise</span>
-                </div>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <NavMain items={data.navMain} />
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser user={auth.user} />
-      </SidebarFooter>
-    </Sidebar>
-  )
+        <Sidebar variant="inset" {...props}>
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild>
+                            <Link href={route("dashboard")}>
+                                <div className="flex aspect-square size-8 items-center justify-center rounded-lg text-sidebar-primary-foreground">
+                                    {/* <Command className="size-4" /> */}
+                                    <img
+                                        src="/assets/logo_skl.svg"
+                                        alt="Logo"
+                                        className="w-12 h-12 md:w-16 md:h-16"
+                                    />
+                                </div>
+                                <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                        SKL
+                                    </span>
+                                    <span className="truncate text-xs">
+                                        Status Ketaatan Lingkungan
+                                    </span>
+                                </div>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+                <NavMain items={data.navMain} />
+                <NavSecondary items={data.navSecondary} className="mt-auto" />
+            </SidebarContent>
+            <SidebarFooter>
+                <NavUser user={auth.user} />
+            </SidebarFooter>
+        </Sidebar>
+    );
 }
--- a/resources/js/components/appearance-dropdown.tsx
+++ b/resources/js/components/appearance-dropdown.tsx
@ -1,36 +1,82 @@
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";
-import {Button} from "@/components/ui/button";
-import {Moon, Sun} from "lucide-react";
-import {useTheme} from "next-themes";
-import {cn} from "@/lib/utils";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";

 const AppearanceDropdown = () => {
-    const {setTheme, theme} = useTheme();
+    const { setTheme, theme } = useTheme();
+
+    // State untuk tanggal dan waktu
+    const [currentTime, setCurrentTime] = useState(new Date());
+
+    useEffect(() => {
+        // Update waktu setiap detik
+        const interval = setInterval(() => {
+            setCurrentTime(new Date());
+        }, 1000);
+
+        return () => clearInterval(interval); // Bersihkan interval saat komponen unmount
+    }, []);
+
+    // Format tanggal (contoh: Senin, 03 Februari 2025)
+    const formattedDate = new Intl.DateTimeFormat("id-ID", {
+        weekday: "long",
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+    }).format(currentTime);
+
+    // Format waktu (contoh: 15:01:32)
+    const formattedTime = currentTime.toLocaleTimeString("id-ID", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });

    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className={cn("h-7 w-7")}
-                >
-                    {theme == 'light' ? <Sun/> : <Moon/>}
-                    <span className="sr-only">Toggle theme</span>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => setTheme("light")}>
-                    Light
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("dark")}>
-                    Dark
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("system")}>
-                    System
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+        <>
+            <div className="flex flex-row items-center justify-center">
+                <span className="text-sm border-r px-5 items-center text-right">
+                    {formattedDate} <br />
+                    {formattedTime}
+                </span>
+                <div className="px-5">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className={cn("h-7 w-7")}
+                            >
+                                {theme == "light" ? <Sun /> : <Moon />}
+                                <span className="sr-only">Toggle theme</span>
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => setTheme("light")}>
+                                Light
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => setTheme("dark")}>
+                                Dark
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                                onClick={() => setTheme("system")}
+                            >
+                                System
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            </div>
+        </>
    );
 };

--- a/resources/js/components/nav-main.tsx
+++ b/resources/js/components/nav-main.tsx
@ -1,79 +1,93 @@
-"use client"
+"use client";

-import { ChevronRight, type LucideIcon } from "lucide-react"
+import { ChevronRight, type LucideIcon } from "lucide-react";

 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
-import {Link} from "@inertiajs/react";
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+} from "@/components/ui/sidebar";
+import { Link } from "@inertiajs/react";

 export function NavMain({
-  items,
+    items,
 }: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
+    items: {
+        title: string;
+        url: string;
+        icon: LucideIcon;
+        isActive?: boolean;
+        items?: {
+            title: string;
+            url: string;
+        }[];
+    }[];
 }) {
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild tooltip={item.title}>
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-              {item.items?.length ? (
-                <>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                      <ChevronRight />
-                      <span className="sr-only">Toggle</span>
-                    </SidebarMenuAction>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <Link href={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </Link>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </>
-              ) : null}
-            </SidebarMenuItem>
-          </Collapsible>
-        ))}
-      </SidebarMenu>
-    </SidebarGroup>
-  )
+    return (
+        <SidebarGroup>
+            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+            <SidebarMenu>
+                {items.map((item) => (
+                    <Collapsible
+                        key={item.title}
+                        asChild
+                        defaultOpen={item.isActive}
+                    >
+                        <SidebarMenuItem>
+                            <SidebarMenuButton asChild tooltip={item.title}>
+                                <a href={item.url}>
+                                    <item.icon />
+                                    <div>{item.title}</div>
+                                </a>
+                            </SidebarMenuButton>
+                            {item.items?.length ? (
+                                <>
+                                    <CollapsibleTrigger asChild>
+                                        <SidebarMenuAction className="data-[state=open]:rotate-90">
+                                            <ChevronRight />
+                                            <span className="sr-only">
+                                                Toggle
+                                            </span>
+                                        </SidebarMenuAction>
+                                    </CollapsibleTrigger>
+                                    <CollapsibleContent>
+                                        <SidebarMenuSub>
+                                            {item.items?.map((subItem) => (
+                                                <SidebarMenuSubItem
+                                                    key={subItem.title}
+                                                >
+                                                    <SidebarMenuSubButton
+                                                        asChild
+                                                    >
+                                                        <Link
+                                                            href={subItem.url}
+                                                        >
+                                                            <span>
+                                                                {subItem.title}
+                                                            </span>
+                                                        </Link>
+                                                    </SidebarMenuSubButton>
+                                                </SidebarMenuSubItem>
+                                            ))}
+                                        </SidebarMenuSub>
+                                    </CollapsibleContent>
+                                </>
+                            ) : null}
+                        </SidebarMenuItem>
+                    </Collapsible>
+                ))}
+            </SidebarMenu>
+        </SidebarGroup>
+    );
 }
--- a/resources/js/components/nav-secondary.tsx
+++ b/resources/js/components/nav-secondary.tsx
@ -1,40 +1,40 @@
-import * as React from "react"
-import { type LucideIcon } from "lucide-react"
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";

 import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar"
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar";

 export function NavSecondary({
-  items,
-  ...props
+    items,
+    ...props
 }: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-  }[]
+    items: {
+        title: string;
+        url: string;
+        icon: LucideIcon;
+    }[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-  return (
-    <SidebarGroup {...props}>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild size="sm">
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
+    return (
+        <SidebarGroup {...props}>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton asChild size="sm">
+                                <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    );
 }
--- a/resources/js/components/ui/button.tsx
+++ b/resources/js/components/ui/button.tsx
@ -5,25 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
--- a/resources/js/components/ui/calendar.tsx
+++ b/resources/js/components/ui/calendar.tsx
@ -0,0 +1,74 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
--- a/resources/js/components/ui/card.tsx
+++ b/resources/js/components/ui/card.tsx
@ -9,7 +9,7 @@ const Card = React.forwardRef<
  <div
    ref={ref}
    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-xl border bg-card text-card-foreground shadow",
      className
    )}
    {...props}
@ -30,25 +30,22 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"

 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("font-semibold leading-none tracking-tight", className)}
    {...props}
  />
 ))
 CardTitle.displayName = "CardTitle"

 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
--- a/resources/js/components/ui/chart.tsx
+++ b/resources/js/components/ui/chart.tsx
@ -0,0 +1,363 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
--- a/resources/js/components/ui/popover.tsx
+++ b/resources/js/components/ui/popover.tsx
@ -1,31 +1,31 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;

-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;

 const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                className
+            )}
+            {...props}
+        />
+    </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;

-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
--- a/resources/js/components/ui/resizable.tsx
+++ b/resources/js/components/ui/resizable.tsx
@ -1,45 +1,45 @@
-"use client"
+"use client";

-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const ResizablePanelGroup = ({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-)
+    <ResizablePrimitive.PanelGroup
+        className={cn(
+            "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+            className
+        )}
+        {...props}
+    />
+);

-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;

 const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
+    withHandle,
+    className,
+    ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+    withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-)
+    <ResizablePrimitive.PanelResizeHandle
+        className={cn(
+            "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+            className
+        )}
+        {...props}
+    >
+        {withHandle && (
+            <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+                <GripVertical className="h-2.5 w-2.5" />
+            </div>
+        )}
+    </ResizablePrimitive.PanelResizeHandle>
+);

-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/resources/js/components/ui/scroll-area.tsx
+++ b/resources/js/components/ui/scroll-area.tsx
@ -1,48 +1,50 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+    <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn("relative overflow-hidden", className)}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

 const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    React.ComponentPropsWithoutRef<
+        typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+    >
 >(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+            "flex touch-none select-none transition-colors",
+            orientation === "vertical" &&
+                "h-full w-2.5 border-l border-l-transparent p-[1px]",
+            orientation === "horizontal" &&
+                "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+            className
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
--- a/resources/js/components/ui/separator.tsx
+++ b/resources/js/components/ui/separator.tsx
@ -1,31 +1,33 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+    (
+        { className, orientation = "horizontal", decorative = true, ...props },
+        ref
+    ) => (
+        <SeparatorPrimitive.Root
+            ref={ref}
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "shrink-0 bg-border",
+                orientation === "horizontal"
+                    ? "h-[1px] w-full"
+                    : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;

-export { Separator }
+export { Separator };
--- a/resources/js/components/ui/sheet.tsx
+++ b/resources/js/components/ui/sheet.tsx
@ -1,140 +1,138 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;

-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;

-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;

-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;

 const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+    React.ElementRef<typeof SheetPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+    <SheetPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+);

 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+        VariantProps<typeof sheetVariants> {}

 const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
+    React.ElementRef<typeof SheetPrimitive.Content>,
+    SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            ref={ref}
+            className={cn(sheetVariants({ side }), className)}
+            {...props}
+        >
+            {children}
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+        </SheetPrimitive.Content>
+    </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;

 const SheetHeader = ({
-  className,
-  ...props
+    className,
+    ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+);
+SheetHeader.displayName = "SheetHeader";

 const SheetFooter = ({
-  className,
-  ...props
+    className,
+    ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+);
+SheetFooter.displayName = "SheetFooter";

 const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+    React.ElementRef<typeof SheetPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold text-foreground", className)}
+        {...props}
+    />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;

 const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+    React.ElementRef<typeof SheetPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;

 export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+};
--- a/resources/js/components/ui/sidebar.tsx
+++ b/resources/js/components/ui/sidebar.tsx
--- a/resources/js/components/ui/skeleton.tsx
+++ b/resources/js/components/ui/skeleton.tsx
@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Skeleton({
-  className,
-  ...props
+    className,
+    ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
+    return (
+        <div
+            className={cn("animate-pulse rounded-md bg-muted", className)}
+            {...props}
+        />
+    );
 }

-export { Skeleton }
+export { Skeleton };
--- a/resources/js/components/ui/table.tsx
+++ b/resources/js/components/ui/table.tsx
@ -1,117 +1,120 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+    <div className="relative w-full overflow-auto">
+        <table
+            ref={ref}
+            className={cn("w-full caption-bottom text-sm", className)}
+            {...props}
+        />
+    </div>
+));
+Table.displayName = "Table";

 const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";

 const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+    <tbody
+        ref={ref}
+        className={cn("[&_tr:last-child]:border-0", className)}
+        {...props}
+    />
+));
+TableBody.displayName = "TableBody";

 const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
+    <tfoot
+        ref={ref}
+        className={cn(
+            "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableFooter.displayName = "TableFooter";

 const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
+    HTMLTableRowElement,
+    React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+    <tr
+        ref={ref}
+        className={cn(
+            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            className
+        )}
+        {...props}
+    />
+));
+TableRow.displayName = "TableRow";

 const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
+    <th
+        ref={ref}
+        className={cn(
+            "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableHead.displayName = "TableHead";

 const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+    <td
+        ref={ref}
+        className={cn(
+            "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableCell.displayName = "TableCell";

 const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+    <caption
+        ref={ref}
+        className={cn("mt-4 text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+TableCaption.displayName = "TableCaption";

 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption,
+};
--- a/resources/js/components/ui/tooltip.tsx
+++ b/resources/js/components/ui/tooltip.tsx
@ -1,30 +1,30 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;

-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;

-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;

 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+            "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className
+        )}
+        {...props}
+    />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;

-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/resources/js/layouts/authenticated-layout.tsx
+++ b/resources/js/layouts/authenticated-layout.tsx
@ -1,17 +1,23 @@
 import { PropsWithChildren, ReactNode } from "react";
-import {AppSidebar} from "@/components/app-sidebar";
-import {SidebarInset, SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar";
-import {Separator} from "@/components/ui/separator";
+import { AppSidebar } from "@/components/app-sidebar";
+import "../../css/app.css";
+import {
+    SidebarInset,
+    SidebarProvider,
+    SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
 import {
    Breadcrumb,
    BreadcrumbItem,
-    BreadcrumbList, BreadcrumbPage,
+    BreadcrumbList,
+    BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
 import AppearanceDropdown from "@/components/appearance-dropdown";

 export default function AuthenticatedLayout({
    header,
-    children
+    children,
 }: PropsWithChildren<{
    header?: ReactNode;
 }>) {
@ -23,7 +29,10 @@ export default function AuthenticatedLayout({
                <header className="sticky top-0 bg-background flex h-16 shrink-0 items-center gap-2 justify-between p-4 border-b md:border-none md:rounded-xl">
                    <div className="flex items-center gap-2">
                        <SidebarTrigger className="-ml-1" />
-                        <Separator orientation="vertical" className="mr-2 h-4" />
+                        <Separator
+                            orientation="vertical"
+                            className="mr-2 h-4"
+                        />
                        <Breadcrumb>
                            <BreadcrumbList>
                                <BreadcrumbItem>
@ -37,9 +46,12 @@ export default function AuthenticatedLayout({
                    </div>
                </header>

-                <main className="p-4 md:pt-0 h-full">
-                    {children}
-                </main>
+                <main className="p-4 md:pt-0 h-full">{children}</main>
+                <footer className="text-sm p-4">
+                    © Copyright {new Date().getFullYear()} Bidang Tata
+                    Lingkungan dan Kebersihan - Dinas Lingkungan Hidup Provinsi
+                    DKI Jakarta
+                </footer>
            </SidebarInset>
        </SidebarProvider>
    );
--- a/resources/js/layouts/guest-layout.tsx
+++ b/resources/js/layouts/guest-layout.tsx
@ -1,17 +1,8 @@
 import ApplicationLogo from "@/components/application-logo";
 import { Link } from "@inertiajs/react";
 import { PropsWithChildren } from "react";
+import "../../css/app.css";

 export default function Guest({ children }: PropsWithChildren) {
-    return (
-        <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-background">
-            <div>
-                <Link href="/">
-                    <ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
-                </Link>
-            </div>
-
-            <div className="w-full sm:max-w-md mt-6 px-6 py-4">{children}</div>
-        </div>
-    );
+    return <div className="">{children}</div>;
 }
--- a/resources/js/pages/404.tsx
+++ b/resources/js/pages/404.tsx
@ -0,0 +1,25 @@
+import React from "react";
+import { Head, Link } from "@inertiajs/react";
+import "../../css/app.css";
+
+const NotFound = () => {
+    return (
+        <>
+            <Head title="Not Found" />
+            <div className="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white">
+                <h1 className="text-6xl font-bold">404</h1>
+                <p className="text-lg mt-4">
+                    Oops! Halaman yang kamu cari tidak ditemukan.
+                </p>
+                <Link
+                    href="/"
+                    className="mt-6 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+                >
+                    Kembali ke Beranda
+                </Link>
+            </div>
+        </>
+    );
+};
+
+export default NotFound;
--- a/resources/js/pages/Pengumuman.tsx
+++ b/resources/js/pages/Pengumuman.tsx
@ -1,12 +1,14 @@
 import React from "react";
-import Navbar from "@/components/Home/Navbar";
-import Footer from "@/components/Home/Footer";
-import HeroSecond from "@/components/Pengumuman/HeroSecond";
-import CardPengumuman from "@/components/Pengumuman/CardPengumuman";
+import Navbar from "@/components/Partials/Navbar";
+import Footer from "@/components/Partials/Footer";
+import HeroSecond from "@/components/Card/HeroSecond";
+import CardPengumuman from "@/components/Card/CardPengumuman";
+import { Head } from "@inertiajs/react";

 export default function Pengumuman() {
    return (
        <>
+            <Head title="Pengumuman" />
            <Navbar />
            <HeroSecond title="Pengumuman" />
            <CardPengumuman />
--- a/resources/js/pages/Peraturan.tsx
+++ b/resources/js/pages/Peraturan.tsx
@ -1,16 +0,0 @@
-import React from "react";
-import Navbar from "@/components/Home/Navbar";
-import Footer from "@/components/Home/Footer";
-import HeroSecond from "@/components/Pengumuman/HeroSecond";
-import CardPeraturan from "@/components/Pengumuman/CardPeraturan";
-
-export default function Peraturan() {
-    return (
-        <>
-            <Navbar />
-            <HeroSecond title="Peraturan" />
-            <CardPeraturan />
-            <Footer />
-        </>
-    );
-}
--- a/resources/js/pages/Undangan.tsx
+++ b/resources/js/pages/Undangan.tsx
@ -1,12 +1,14 @@
 import React from "react";
-import Navbar from "@/components/Home/Navbar";
-import Footer from "@/components/Home/Footer";
-import HeroSecond from "@/components/Pengumuman/HeroSecond";
-import CardUndangan from "@/components/Pengumuman/CardUndangan";
+import Navbar from "@/components/Partials/Navbar";
+import Footer from "@/components/Partials/Footer";
+import HeroSecond from "@/components/Card/HeroSecond";
+import CardUndangan from "@/components/Card/CardUndangan";
+import { Head } from "@inertiajs/react";

 export default function Undangan() {
    return (
        <>
+            <Head title="Undangan" />
            <Navbar />
            <HeroSecond title="Undangan" />
            <CardUndangan />
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@ -1,16 +1,10 @@
-import GuestLayout from "@/layouts/guest-layout";
-import { Head, useForm } from "@inertiajs/react";
 import { FormEventHandler } from "react";
+import { Head, Link, useForm } from "@inertiajs/react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
-import { InputError } from "@/components/ui/input-error";
 import { Button } from "@/components/ui/button";
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-} from "@/components/ui/card";
+import { InputError } from "@/components/ui/input-error";

 export default function ForgotPassword({ status }: { status?: string }) {
    const { data, setData, post, processing, errors } = useForm({
@ -19,48 +13,110 @@ export default function ForgotPassword({ status }: { status?: string }) {

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
-
        post(route("password.email"));
    };

    return (
-        <GuestLayout>
+        <>
            <Head title="Forgot Password" />
-
            <form onSubmit={submit}>
-                <Card>
-                    <CardHeader>
-                        <CardDescription>
-                            Forgot your password? No problem. Just let us know
-                            your email address and we will email you a password
-                            reset link that will allow you to choose a new one.
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        {status && (
-                            <div className="mb-4 font-medium text-sm text-green-600">
-                                {status}
+                <div className="w-full">
+                    <div className="flex flex-col lg:flex-row min-h-screen">
+                        {/* Left Section - Form */}
+                        <div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
+                            <div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
+                                <Link href="/" className="mb-4">
+                                    <img
+                                        src="/assets/logo_skl.svg"
+                                        alt="Logo SKL"
+                                        className="w-20 h-20 lg:w-24 lg:h-24"
+                                    />
+                                </Link>
+
+                                <h1 className="text-xl lg:text-2xl font-bold mt-2 text-center">
+                                    Status Ketaatan Lingkungan
+                                </h1>
+
+                                <h2 className="text-base lg:text-lg font-bold mt-6 lg:mt-8 text-[#0DAB19] text-center">
+                                    LUPA KATA SANDI?
+                                </h2>
+                                <p className="text-sm mb-6 lg:mb-8 text-center px-4">
+                                    Masukkan email terdaftar untuk <br />
+                                    kami kirimkan link atur ulang kata sandi
+                                </p>
+
+                                <Card className="w-full mx-4 lg:mx-auto lg:max-w-sm">
+                                    <CardContent className="pt-4">
+                                        {status && (
+                                            <div className="mb-4 font-medium text-sm text-green-600">
+                                                {status}
+                                            </div>
+                                        )}
+
+                                        <div className="grid gap-4 mt-6">
+                                            <div className="grid gap-2">
+                                                <Label htmlFor="email">
+                                                    Email
+                                                </Label>
+                                                <Input
+                                                    id="email"
+                                                    type="email"
+                                                    name="email"
+                                                    placeholder="m@example.com"
+                                                    value={data.email}
+                                                    onChange={(e) =>
+                                                        setData(
+                                                            "email",
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    required
+                                                />
+                                                <InputError
+                                                    message={errors.email}
+                                                />
+                                            </div>
+
+                                            <Button
+                                                type="submit"
+                                                disabled={processing}
+                                                className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
+                                            >
+                                                Kirim Link Reset Password
+                                            </Button>
+
+                                            <div className="text-center">
+                                                <Link
+                                                    href={route("login")}
+                                                    className="text-sm text-gray-600 hover:text-[#0DAB19]"
+                                                >
+                                                    Kembali ke halaman login
+                                                </Link>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+
+                                <div className="flex flex-col mt-6 lg:mt-4">
+                                    <div className="text-center text-sm">
+                                        © 2025
+                                    </div>
+                                    <span className="text-center text-bold text-sm">
+                                        Dinas Lingkungan Hidup Provinsi DKI
+                                        Jakarta
+                                    </span>
+                                    <span className="text-center text-bold text-sm">
+                                        Bidang Tata Lingkungan dan Kebersihan
+                                    </span>
+                                </div>
                            </div>
-                        )}
-                        <Input
-                            id="email"
-                            type="email"
-                            name="email"
-                            placeholder="Your email"
-                            value={data.email}
-                            onChange={(e) => setData("email", e.target.value)}
-                        />
+                        </div>

-                        <InputError message={errors.email} className="mt-2" />
-                    </CardContent>
-
-                    <CardFooter className="flex justify-end">
-                        <Button disabled={processing}>
-                            Email Password Reset Link
-                        </Button>
-                    </CardFooter>
-                </Card>
+                        {/* Right Section - Background */}
+                        <div className="hidden lg:block lg:w-7/12 bg-[#29752F] bg-[url('/assets/bg-login.svg')] bg-cover bg-top bg-no-repeat"></div>
+                    </div>
+                </div>
            </form>
-        </GuestLayout>
+        </>
    );
 }
--- a/resources/js/pages/auth/login
+++ b/resources/js/pages/auth/login
@ -0,0 +1,242 @@
+import { FormEventHandler, useEffect } from "react";
+import GuestLayout from "@/layouts/guest-layout";
+import { Head, Link, useForm } from "@inertiajs/react";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { InputError } from "@/components/ui/input-error";
+
+export default function Login({
+    status,
+    canResetPassword,
+}: {
+    status?: string;
+    canResetPassword: boolean;
+}) {
+    const { data, setData, post, processing, errors, reset } = useForm({
+        email: "",
+        password: "",
+        remember: false,
+    });
+
+    useEffect(() => {
+        return () => {
+            reset("password");
+        };
+    }, []);
+
+    const submit: FormEventHandler = (e) => {
+        e.preventDefault();
+
+        post(route("login"));
+    };
+
+    return (
+        // <GuestLayout>
+        //     <Head title="Log in" />
+
+        //     <form onSubmit={submit}>
+        //         <Card className="mx-auto max-w-sm">
+        //             <CardHeader>
+        //                 <CardTitle className="text-2xl">Login</CardTitle>
+        //                 <CardDescription>
+        //                     Enter your email below to login to your account
+        //                 </CardDescription>
+        //             </CardHeader>
+        //             <CardContent>
+        //                 {status && (
+        //                     <div className="mb-4 font-medium text-sm text-green-600">
+        //                         {status}
+        //                     </div>
+        //                 )}
+
+        //                 <div className="grid gap-4">
+        //                     <div className="grid gap-2">
+        //                         <Label htmlFor="email">Email</Label>
+        //                         <Input
+        //                             id="email"
+        //                             type="email"
+        //                             placeholder="m@example.com"
+        //                             value={data.email}
+        //                             onChange={(e) =>
+        //                                 setData("email", e.target.value)
+        //                             }
+        //                             required
+        //                         />
+        //                         <InputError message={errors.email} />
+        //                     </div>
+        //                     <div className="grid gap-2">
+        //                         <div className="flex items-center">
+        //                             <Label htmlFor="password">Password</Label>
+        //                             <Link
+        //                                 href={route("password.request")}
+        //                                 className="ml-auto inline-block text-sm underline"
+        //                             >
+        //                                 Forgot your password?
+        //                             </Link>
+        //                         </div>
+        //                         <Input
+        //                             id="password"
+        //                             type="password"
+        //                             value={data.password}
+        //                             onChange={(e) =>
+        //                                 setData("password", e.target.value)
+        //                             }
+        //                             required
+        //                         />
+        //                         <InputError message={errors.password} />
+        //                     </div>
+        //                     <Button type="submit" className="w-full">
+        //                         Login
+        //                     </Button>
+        //                 </div>
+        //                 <div className="mt-4 text-center text-sm">
+        //                     Don&apos;t have an account?{" "}
+        //                     <Link href="/register" className="underline">
+        //                         Sign up
+        //                     </Link>
+        //                 </div>
+        //             </CardContent>
+        //         </Card>
+        //     </form>
+        // </GuestLayout>
+        <>
+            <Head title="Log in" />
+            <form onSubmit={submit}>
+                <div className="w-full">
+                    <div className="flex justify-center items-center h-screen">
+                        <div className="w-5/12">
+                            <div className="flex flex-col justify-center items-center">
+                                <Link href="/" className="">
+                                    <img
+                                        src="/assets/logo_skl.svg"
+                                        alt="Logo SKL"
+                                        className="w-24 h-24"
+                                    />
+                                </Link>
+
+                                <h1 className="text-2xl font-bold mt-2">
+                                    Status Ketaatan Lingkungan
+                                </h1>
+
+                                <h2 className="text-lg font-bold mt-8 text-[#0DAB19]">
+                                    SELAMAT DATANG KEMBALI!
+                                </h2>
+                                <p className="text-sm mb-8">
+                                    Masuk untuk melanjutkan ke dashboard SKL
+                                </p>
+                                <Card className="mx-auto max-w-sm">
+                                    {/* <CardHeader>
+                                        <CardTitle className="text-2xl">
+                                            Login
+                                        </CardTitle>
+                                        <CardDescription>
+                                            Masuk untuk melanjutkan ke dashboard
+                                            SKL
+                                        </CardDescription>
+                                    </CardHeader> */}
+                                    <CardContent pt-4>
+                                        {status && (
+                                            <div className="mb-4 font-medium text-sm text-green-600">
+                                                {status}
+                                            </div>
+                                        )}
+
+                                        <div className="grid gap-4 mt-6">
+                                            <div className="grid gap-2">
+                                                <Label htmlFor="email">
+                                                    Nama Pengguna
+                                                </Label>
+                                                <Input
+                                                    id="email"
+                                                    type="email"
+                                                    placeholder="m@example.com"
+                                                    value={data.email}
+                                                    onChange={(e) =>
+                                                        setData(
+                                                            "email",
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    required
+                                                />
+                                                <InputError
+                                                    message={errors.email}
+                                                />
+                                            </div>
+                                            <div className="grid gap-2">
+                                                <div className="flex items-center">
+                                                    <Label htmlFor="password">
+                                                        Kata Sandi
+                                                    </Label>
+                                                    <Link
+                                                        href={route(
+                                                            "password.request"
+                                                        )}
+                                                        className="ml-auto inline-block text-sm underline"
+                                                    >
+                                                        Lupa Kata Sandi?
+                                                    </Link>
+                                                </div>
+                                                <Input
+                                                    id="password"
+                                                    type="password"
+                                                    value={data.password}
+                                                    onChange={(e) =>
+                                                        setData(
+                                                            "password",
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    required
+                                                />
+                                                <InputError
+                                                    message={errors.password}
+                                                />
+                                            </div>
+                                            <Button
+                                                type="submit"
+                                                className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
+                                            >
+                                                Login
+                                            </Button>
+                                        </div>
+                                        {/* <div className="mt-4 text-center text-sm">
+                                            Don&apos;t have an account?{" "}
+                                            <Link
+                                                href="/register"
+                                                className="underline"
+                                            >
+                                                Sign up
+                                            </Link>
+                                        </div> */}
+                                    </CardContent>
+                                </Card>
+                                <div className="flex flex-col">
+                                    <div className="mt-4 text-center text-sm">
+                                        © 2025
+                                    </div>
+                                    <span className="text-center text-bold text-sm">
+                                        Dinas Lingkungan Hidup Provinsi DKI
+                                        Jakarta
+                                    </span>
+                                    <span className="text-center text-bold text-sm">
+                                        Bidang Tata Lingkungan dan Kebersihan
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="w-7/12 bg-[#29752F] bg-[url('/assets/bg-login.svg')] h-full pt-10 bg-cover bg-top bg-no-repeat"></div>
+                    </div>
+                </div>
+            </form>
+        </>
+    );
+}
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@ -1,13 +1,6 @@
 import { FormEventHandler, useEffect } from "react";
-import GuestLayout from "@/layouts/guest-layout";
 import { Head, Link, useForm } from "@inertiajs/react";
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@ -34,78 +27,127 @@ export default function Login({

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
-
        post(route("login"));
    };

    return (
-        <GuestLayout>
+        <>
            <Head title="Log in" />
-
            <form onSubmit={submit}>
-                <Card className="mx-auto max-w-sm">
-                    <CardHeader>
-                        <CardTitle className="text-2xl">Login</CardTitle>
-                        <CardDescription>
-                            Enter your email below to login to your account
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        {status && (
-                            <div className="mb-4 font-medium text-sm text-green-600">
-                                {status}
-                            </div>
-                        )}
+                <div className="w-full">
+                    <div className="flex flex-col lg:flex-row min-h-screen">
+                        {/* Left Section - Form */}
+                        <div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
+                            <div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
+                                <Link href="/" className="mb-4">
+                                    <img
+                                        src="/assets/logo_skl.svg"
+                                        alt="Logo SKL"
+                                        className="w-20 h-20 lg:w-24 lg:h-24"
+                                    />
+                                </Link>

-                        <div className="grid gap-4">
-                            <div className="grid gap-2">
-                                <Label htmlFor="email">Email</Label>
-                                <Input
-                                    id="email"
-                                    type="email"
-                                    placeholder="m@example.com"
-                                    value={data.email}
-                                    onChange={(e) =>
-                                        setData("email", e.target.value)
-                                    }
-                                    required
-                                />
-                                <InputError message={errors.email} />
-                            </div>
-                            <div className="grid gap-2">
-                                <div className="flex items-center">
-                                    <Label htmlFor="password">Password</Label>
-                                    <Link
-                                        href={route("password.request")}
-                                        className="ml-auto inline-block text-sm underline"
-                                    >
-                                        Forgot your password?
-                                    </Link>
+                                <h1 className="text-xl lg:text-2xl font-bold mt-2 text-center">
+                                    Status Ketaatan Lingkungan
+                                </h1>
+
+                                <h2 className="text-base lg:text-lg font-bold mt-6 lg:mt-8 text-[#0DAB19] text-center">
+                                    SELAMAT DATANG KEMBALI!
+                                </h2>
+                                <p className="text-sm mb-6 lg:mb-8 text-center px-4">
+                                    Masuk untuk melanjutkan ke dashboard SKL
+                                </p>
+
+                                <Card className="w-full mx-4 lg:mx-auto lg:max-w-sm">
+                                    <CardContent className="pt-4">
+                                        {status && (
+                                            <div className="mb-4 font-medium text-sm text-green-600">
+                                                {status}
+                                            </div>
+                                        )}
+
+                                        <div className="grid gap-4 mt-6">
+                                            <div className="grid gap-2">
+                                                <Label htmlFor="email">
+                                                    Nama Pengguna
+                                                </Label>
+                                                <Input
+                                                    id="email"
+                                                    type="email"
+                                                    placeholder="m@example.com"
+                                                    value={data.email}
+                                                    onChange={(e) =>
+                                                        setData(
+                                                            "email",
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    required
+                                                />
+                                                <InputError
+                                                    message={errors.email}
+                                                />
+                                            </div>
+                                            <div className="grid gap-2">
+                                                <div className="flex items-center">
+                                                    <Label htmlFor="password">
+                                                        Kata Sandi
+                                                    </Label>
+                                                    <Link
+                                                        href={route(
+                                                            "password.request"
+                                                        )}
+                                                        className="ml-auto inline-block text-sm underline"
+                                                    >
+                                                        Lupa Kata Sandi?
+                                                    </Link>
+                                                </div>
+                                                <Input
+                                                    id="password"
+                                                    type="password"
+                                                    value={data.password}
+                                                    onChange={(e) =>
+                                                        setData(
+                                                            "password",
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    required
+                                                />
+                                                <InputError
+                                                    message={errors.password}
+                                                />
+                                            </div>
+                                            <Button
+                                                type="submit"
+                                                className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
+                                            >
+                                                Login
+                                            </Button>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+
+                                <div className="flex flex-col mt-6 lg:mt-4">
+                                    <div className="text-center text-sm">
+                                        © 2025
+                                    </div>
+                                    <span className="text-center text-bold text-sm">
+                                        Dinas Lingkungan Hidup Provinsi DKI
+                                        Jakarta
+                                    </span>
+                                    <span className="text-center text-bold text-sm">
+                                        Bidang Tata Lingkungan dan Kebersihan
+                                    </span>
                                </div>
-                                <Input
-                                    id="password"
-                                    type="password"
-                                    value={data.password}
-                                    onChange={(e) =>
-                                        setData("password", e.target.value)
-                                    }
-                                    required
-                                />
-                                <InputError message={errors.password} />
                            </div>
-                            <Button type="submit" className="w-full">
-                                Login
-                            </Button>
                        </div>
-                        <div className="mt-4 text-center text-sm">
-                            Don&apos;t have an account?{" "}
-                            <Link href="/register" className="underline">
-                                Sign up
-                            </Link>
-                        </div>
-                    </CardContent>
-                </Card>
+
+                        {/* Right Section - Background */}
+                        <div className="hidden lg:block lg:w-7/12 bg-[#29752F] bg-[url('/assets/bg-login.svg')] bg-cover bg-top bg-no-repeat"></div>
+                    </div>
+                </div>
            </form>
-        </GuestLayout>
+        </>
    );
 }
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@ -1,20 +1,124 @@
+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"
-        >
+        <AuthenticatedLayout header="Dashboard">
            <Head title="Dashboard" />

            <div className="flex flex-1 flex-col gap-4 h-full">
-                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
+                <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-1 rounded-xl bg-muted/50 h-full" />
+
+                <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>
    );
--- a/resources/js/pages/peraturan/Index.tsx
+++ b/resources/js/pages/peraturan/Index.tsx
@ -0,0 +1,18 @@
+import React from "react";
+import Navbar from "@/components/Partials/Navbar";
+import Footer from "@/components/Partials/Footer";
+import HeroSecond from "@/components/Card/HeroSecond";
+import CardPeraturan from "@/components/Card/CardPeraturan";
+import { Head } from "@inertiajs/react";
+
+export default function Peraturan() {
+    return (
+        <>
+            <Head title="Peraturan" />
+            <Navbar />
+            <HeroSecond title="Peraturan" />
+            <CardPeraturan />
+            <Footer />
+        </>
+    );
+}
--- a/resources/js/pages/welcome.tsx
+++ b/resources/js/pages/welcome.tsx
@ -1,21 +1,35 @@
-import Navbar from "@/components/Home/Navbar";
-import HeroSection from "@/components/Home/Hero";
-import Tentang from "@/components/Home/Tentang";
-import Pengumuman from "@/components/Home/Pengumuman";
-import Peraturan from "@/components/Home/Peraturan";
-import Undangan from "@/components/Home/Undangan";
-import Footer from "@/components/Home/Footer";
+import Navbar from "@/components/Partials/Navbar";
+import HeroSection from "@/components/Partials/Hero";
+import Tentang from "@/components/Partials/Tentang";
+import Pengumuman from "@/components/Partials/Pengumuman";
+import Peraturan from "@/components/Partials/Peraturan";
+import Undangan from "@/components/Partials/Undangan";
+import Footer from "@/components/Partials/Footer";
+import { Head } from "@inertiajs/react";
+import Guest from "@/layouts/guest-layout";
+import PopupModal from "@/components/Partials/PopupModal";
+import { useState } from "react";

 export default function Home() {
+    const [showPopup, setShowPopup] = useState(true);
+
+    const handleClosePopup = () => {
+        setShowPopup(false);
+    };
+
    return (
        <>
-            <Navbar />
-            <HeroSection />
-            <Tentang />
-            <Pengumuman />
-            <Peraturan />
-            <Undangan />
-            <Footer />
+            {showPopup && <PopupModal onClose={handleClosePopup} />}
+            <Guest>
+                <Head title="Home" />
+                <Navbar />
+                <HeroSection />
+                <Tentang />
+                <Pengumuman />
+                <Peraturan />
+                <Undangan />
+                <Footer />
+            </Guest>
        </>
    );
 }
--- a/resources/js/store/index.tsx
+++ b/resources/js/store/index.tsx
@ -0,0 +1,26 @@
+// import { combineReducers, configureStore } from "@reduxjs/toolkit";
+// import themeConfigSlice from "./themeConfigSlice";
+
+// const rootReducer = combineReducers({
+//     themeConfig: themeConfigSlice,
+// });
+
+// export default configureStore({
+//     reducer: rootReducer,
+// });
+
+// export type IRootState = ReturnType<typeof rootReducer>;
+
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import themeConfigSlice from "./themeConfigSlice";
+
+const rootReducer = combineReducers({
+    themeConfig: themeConfigSlice,
+});
+
+export const store = configureStore({
+    reducer: rootReducer,
+});
+
+export type IRootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@ -4,13 +4,47 @@
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

-        <title inertia>{{ config('app.name', 'Laravel') }}</title>
+        <title inertia>{{ config('app.name', 'Dinas Lingkungan Hidup Provinsi DKI Jakarta') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

+        <!-- Styles Dashboard -->
+
+        {{-- <link rel="stylesheet" href="assets/css/remixicon.css">
+        <!-- BootStrap css -->
+        <link rel="stylesheet" href="assets/css/lib/bootstrap.min.css">
+        <!-- Apex Chart css -->
+        <link rel="stylesheet" href="assets/css/lib/apexcharts.css">
+        <!-- Data Table css -->
+        <link rel="stylesheet" href="assets/css/lib/dataTables.min.css">
+        <!-- Text Editor css -->
+        <link rel="stylesheet" href="assets/css/lib/editor-katex.min.css">
+        <link rel="stylesheet" href="assets/css/lib/editor.atom-one-dark.min.css">
+        <link rel="stylesheet" href="assets/css/lib/editor.quill.snow.css">
+        <!-- Date picker css -->
+        <link rel="stylesheet" href="assets/css/lib/flatpickr.min.css">
+        <!-- Calendar css -->
+        <link rel="stylesheet" href="assets/css/lib/full-calendar.css">
+        <!-- Vector Map css -->
+        <link rel="stylesheet" href="assets/css/lib/jquery-jvectormap-2.0.5.css">
+        <!-- Popup css -->
+        <link rel="stylesheet" href="assets/css/lib/magnific-popup.css">
+        <!-- Slick Slider css -->
+        <link rel="stylesheet" href="assets/css/lib/slick.css">
+        <!-- prism css -->
+        <link rel="stylesheet" href="assets/css/lib/prism.css">
+        <!-- file upload css -->
+        <link rel="stylesheet" href="assets/css/lib/file-upload.css">
+
+        <link rel="stylesheet" href="assets/css/lib/audioplayer.css">
+        <link rel="stylesheet" href="assets/css/lib/animate.min.css">
+        <!-- main css -->
+        <link rel="stylesheet" href="assets/css/style.css">
+        <link rel="stylesheet" href="assets/css/extra.css"> --}}
+
        <!-- Scripts -->
        @routes
        @viteReactRefresh
--- a/routes/api.php
+++ b/routes/api.php
@ -0,0 +1,8 @@
+
+<?php
+use App\Http\Controllers\Api\PeraturanController;
+use Illuminate\Support\Facades\Route;
+
+// Prefix API otomatis menggunakan '/api' di Laravel
+Route::get('/peraturan', [PeraturanController::class, 'index']);
+Route::get('/peraturan/{slug}', [PeraturanController::class, 'show']);
--- a/routes/web.php
+++ b/routes/web.php
@ -4,6 +4,7 @@ use App\Http\Controllers\ProfileController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
+use Illuminate\Http\Response;

 Route::get('/', function () {
    return Inertia::render('welcome', [
@ -14,10 +15,22 @@ Route::get('/', function () {
    ]);
 });

+// Route::get('/404', function () {
+//     return Inertia::render('404');
+// });
+
+Route::fallback(function () {
+    return Inertia::render('404');
+});
+
 Route::get('/pengumuman', function () {
    return Inertia::render('Pengumuman');
 });

+Route::get('/test', function () {
+    return Inertia::render('Test');
+});
+
 Route::get('/undangan', function () {
    return Inertia::render('Undangan');
 });
@ -28,9 +41,9 @@ Route::get('/peraturan', function () {

 Route::get('/dashboard', function () {
    return Inertia::render('dashboard');
-})->middleware(['auth', 'verified'])->name('dashboard');
+})->middleware(['auth'])->name('dashboard');

-Route::middleware(['auth', 'verified'])->group(function () {
+Route::middleware(['auth'])->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,101 +4,91 @@ module.exports = {
    content: ["./resources/views/**/*.blade.php", "./resources/js/**/*.tsx"],
    prefix: "",
    theme: {
-        container: {
-            center: "true",
-            padding: "2rem",
-            screens: {
-                "2xl": "1400px",
-            },
-        },
-        extend: {
-            colors: {
-                border: "hsl(var(--border))",
-                input: "hsl(var(--input))",
-                ring: "hsl(var(--ring))",
-                background: "hsl(var(--background))",
-                foreground: "hsl(var(--foreground))",
-                primary: {
-                    DEFAULT: "hsl(var(--primary))",
-                    foreground: "hsl(var(--primary-foreground))",
-                },
-                secondary: {
-                    DEFAULT: "hsl(var(--secondary))",
-                    foreground: "hsl(var(--secondary-foreground))",
-                },
-                destructive: {
-                    DEFAULT: "hsl(var(--destructive))",
-                    foreground: "hsl(var(--destructive-foreground))",
-                },
-                muted: {
-                    DEFAULT: "hsl(var(--muted))",
-                    foreground: "hsl(var(--muted-foreground))",
-                },
-                accent: {
-                    DEFAULT: "hsl(var(--accent))",
-                    foreground: "hsl(var(--accent-foreground))",
-                },
-                popover: {
-                    DEFAULT: "hsl(var(--popover))",
-                    foreground: "hsl(var(--popover-foreground))",
-                },
-                card: {
-                    DEFAULT: "hsl(var(--card))",
-                    foreground: "hsl(var(--card-foreground))",
-                },
-                sidebar: {
-                    DEFAULT: "hsl(var(--sidebar-background))",
-                    foreground: "hsl(var(--sidebar-foreground))",
-                    primary: "hsl(var(--sidebar-primary))",
-                    "primary-foreground":
-                        "hsl(var(--sidebar-primary-foreground))",
-                    accent: "hsl(var(--sidebar-accent))",
-                    "accent-foreground":
-                        "hsl(var(--sidebar-accent-foreground))",
-                    border: "hsl(var(--sidebar-border))",
-                    ring: "hsl(var(--sidebar-ring))",
-                },
-            },
-            borderRadius: {
-                lg: "var(--radius)",
-                md: "calc(var(--radius) - 2px)",
-                sm: "calc(var(--radius) - 4px)",
-            },
-            keyframes: {
-                "accordion-down": {
-                    from: {
-                        height: "0",
-                    },
-                    to: {
-                        height: "var(--radix-accordion-content-height)",
-                    },
-                },
-                "accordion-up": {
-                    from: {
-                        height: "var(--radix-accordion-content-height)",
-                    },
-                    to: {
-                        height: "0",
-                    },
-                },
-            },
-            animation: {
-                "accordion-down": "accordion-down 0.2s ease-out",
-                "accordion-up": "accordion-up 0.2s ease-out",
-            },
-            fontFamily: {
-                sans: ["Inter Tight", "sans-serif"], // Set default font
-            },
-            keyframes: {
-                "fade-in": {
-                    "0%": { opacity: "0" },
-                    "100%": { opacity: "1" },
-                },
-            },
-            animation: {
-                "fade-in": "fade-in 1s ease-in-out",
-            },
-        },
+    	container: {
+    		center: 'true',
+    		padding: '2rem',
+    		screens: {
+    			'2xl': '1400px'
+    		}
+    	},
+    	extend: {
+    		colors: {
+    			border: 'hsl(var(--border))',
+    			input: 'hsl(var(--input))',
+    			ring: 'hsl(var(--ring))',
+    			background: 'hsl(var(--background))',
+    			foreground: 'hsl(var(--foreground))',
+    			primary: {
+    				DEFAULT: 'hsl(var(--primary))',
+    				foreground: 'hsl(var(--primary-foreground))'
+    			},
+    			secondary: {
+    				DEFAULT: 'hsl(var(--secondary))',
+    				foreground: 'hsl(var(--secondary-foreground))'
+    			},
+    			destructive: {
+    				DEFAULT: 'hsl(var(--destructive))',
+    				foreground: 'hsl(var(--destructive-foreground))'
+    			},
+    			muted: {
+    				DEFAULT: 'hsl(var(--muted))',
+    				foreground: 'hsl(var(--muted-foreground))'
+    			},
+    			accent: {
+    				DEFAULT: 'hsl(var(--accent))',
+    				foreground: 'hsl(var(--accent-foreground))'
+    			},
+    			popover: {
+    				DEFAULT: 'hsl(var(--popover))',
+    				foreground: 'hsl(var(--popover-foreground))'
+    			},
+    			card: {
+    				DEFAULT: 'hsl(var(--card))',
+    				foreground: 'hsl(var(--card-foreground))'
+    			},
+    			sidebar: {
+    				DEFAULT: 'hsl(var(--sidebar-background))',
+    				foreground: 'hsl(var(--sidebar-foreground))',
+    				primary: 'hsl(var(--sidebar-primary))',
+    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+    				accent: 'hsl(var(--sidebar-accent))',
+    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+    				border: 'hsl(var(--sidebar-border))',
+    				ring: 'hsl(var(--sidebar-ring))'
+    			},
+    			chart: {
+    				'1': 'hsl(var(--chart-1))',
+    				'2': 'hsl(var(--chart-2))',
+    				'3': 'hsl(var(--chart-3))',
+    				'4': 'hsl(var(--chart-4))',
+    				'5': 'hsl(var(--chart-5))'
+    			}
+    		},
+    		borderRadius: {
+    			lg: 'var(--radius)',
+    			md: 'calc(var(--radius) - 2px)',
+    			sm: 'calc(var(--radius) - 4px)'
+    		},
+    		keyframes: {
+    			'fade-in': {
+    				'0%': {
+    					opacity: '0'
+    				},
+    				'100%': {
+    					opacity: '1'
+    				}
+    			}
+    		},
+    		animation: {
+    			'fade-in': 'fade-in 1s ease-in-out'
+    		},
+    		fontFamily: {
+    			sans: [
+    				'Inter Tight',
+    				'sans-serif'
+    			]
+    		}
+    	}
    },
    plugins: [require("tailwindcss-animate")],
 };