fe dan dashboard

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;
 

components.json

@@ -1,17 +1,21 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
-  "rsc": true,
+  "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"
 }

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')
+        ]);
+    }
+}

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",

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%;
+        --primary-foreground: 0 0% 9%;
-        --secondary: 240 3.7% 15.9%;
+        --secondary: 0 0% 14.9%;
         --secondary-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
+        --muted: 0 0% 14.9%;
-        --muted-foreground: 240 5% 64.9%;
+        --muted-foreground: 0 0% 63.9%;
-        --accent: 240 3.7% 15.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%;
+        --border: 0 0% 14.9%;
-        --input: 240 3.7% 15.9%;
+        --input: 0 0% 14.9%;
-        --ring: 240 4.9% 83.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%;
     }
 }
 

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";

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;

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

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;

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

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

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">

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
+                <form onSubmit={handleSearch} className="flex items-center">
-                    variant="ghost"
+                    <input
-                    onClick={mobile && onClose ? onClose : undefined}
+                        type="text"
-                    className={`transition-all duration-200 text-white hover:text-white ${
+                        placeholder="Search..."
-                        mobile
+                        value={searchQuery}
-                            ? "w-full justify-start rounded-lg hover:bg-green-700"
+                        onChange={(e) => setSearchQuery(e.target.value)}
-                            : "rounded-full hover:bg-green-800"
+                        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"

resources/js/components/app-sidebar.tsx

@@ -1,17 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
     Command,
-  Frame, Home,
+    Frame,
+    Home,
     LifeBuoy,
     Send,
     SquareTerminal,
-} from "lucide-react"
+} from "lucide-react";
 
-import { NavMain } from "@/components/nav-main"
+import { NavMain } from "@/components/nav-main";
-import { NavSecondary } from "@/components/nav-secondary"
+import { NavSecondary } from "@/components/nav-secondary";
-import { NavUser } from "@/components/nav-user"
+import { NavUser } from "@/components/nav-user";
 import {
     Sidebar,
     SidebarContent,
@@ -20,7 +21,7 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
 import { Link, usePage } from "@inertiajs/react";
 import { PageProps } from "@/types";
 
@@ -66,7 +67,7 @@ const data = {
             icon: Send,
         },
     ],
-}
+};
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     const { auth } = usePage<PageProps>().props;
@@ -77,13 +78,22 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <SidebarMenu>
                     <SidebarMenuItem>
                         <SidebarMenuButton size="lg" asChild>
-              <Link href={route('dashboard')}>
+                            <Link href={route("dashboard")}>
-                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                                <div className="flex aspect-square size-8 items-center justify-center rounded-lg text-sidebar-primary-foreground">
-                  <Command className="size-4" />
+                                    {/* <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">Acme Inc</span>
+                                    <span className="truncate font-semibold">
-                  <span className="truncate text-xs">Enterprise</span>
+                                        SKL
+                                    </span>
+                                    <span className="truncate text-xs">
+                                        Status Ketaatan Lingkungan
+                                    </span>
                                 </div>
                             </Link>
                         </SidebarMenuButton>
@@ -98,5 +108,5 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <NavUser user={auth.user} />
             </SidebarFooter>
         </Sidebar>
-  )
+    );
 }

resources/js/components/appearance-dropdown.tsx

@@ -1,13 +1,54 @@
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";
+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();
 
+    // 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 (
+        <>
+            <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
@@ -15,7 +56,7 @@ const AppearanceDropdown = () => {
                                 size="icon"
                                 className={cn("h-7 w-7")}
                             >
-                    {theme == 'light' ? <Sun/> : <Moon/>}
+                                {theme == "light" ? <Sun /> : <Moon />}
                                 <span className="sr-only">Toggle theme</span>
                             </Button>
                         </DropdownMenuTrigger>
@@ -26,11 +67,16 @@ const AppearanceDropdown = () => {
                             <DropdownMenuItem onClick={() => setTheme("dark")}>
                                 Dark
                             </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("system")}>
+                            <DropdownMenuItem
+                                onClick={() => setTheme("system")}
+                            >
                                 System
                             </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
+                </div>
+            </div>
+        </>
     );
 };
 

resources/js/components/nav-main.tsx

@@ -1,12 +1,12 @@
-"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"
+} from "@/components/ui/collapsible";
 import {
     SidebarGroup,
     SidebarGroupLabel,
@@ -17,34 +17,38 @@ import {
     SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
 import { Link } from "@inertiajs/react";
 
 export function NavMain({
     items,
 }: {
     items: {
-    title: string
+        title: string;
-    url: string
+        url: string;
-    icon: LucideIcon
+        icon: LucideIcon;
-    isActive?: boolean
+        isActive?: boolean;
         items?: {
-      title: string
+            title: string;
-      url: string
+            url: string;
-    }[]
+        }[];
-  }[]
+    }[];
 }) {
     return (
         <SidebarGroup>
             <SidebarGroupLabel>Navigation</SidebarGroupLabel>
             <SidebarMenu>
                 {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+                    <Collapsible
+                        key={item.title}
+                        asChild
+                        defaultOpen={item.isActive}
+                    >
                         <SidebarMenuItem>
                             <SidebarMenuButton asChild tooltip={item.title}>
                                 <a href={item.url}>
                                     <item.icon />
-                  <span>{item.title}</span>
+                                    <div>{item.title}</div>
                                 </a>
                             </SidebarMenuButton>
                             {item.items?.length ? (
@@ -52,16 +56,26 @@ export function NavMain({
                                     <CollapsibleTrigger asChild>
                                         <SidebarMenuAction className="data-[state=open]:rotate-90">
                                             <ChevronRight />
-                      <span className="sr-only">Toggle</span>
+                                            <span className="sr-only">
+                                                Toggle
+                                            </span>
                                         </SidebarMenuAction>
                                     </CollapsibleTrigger>
                                     <CollapsibleContent>
                                         <SidebarMenuSub>
                                             {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
+                                                <SidebarMenuSubItem
-                          <SidebarMenuSubButton asChild>
+                                                    key={subItem.title}
-                            <Link href={subItem.url}>
+                                                >
-                              <span>{subItem.title}</span>
+                                                    <SidebarMenuSubButton
+                                                        asChild
+                                                    >
+                                                        <Link
+                                                            href={subItem.url}
+                                                        >
+                                                            <span>
+                                                                {subItem.title}
+                                                            </span>
                                                         </Link>
                                                     </SidebarMenuSubButton>
                                                 </SidebarMenuSubItem>
@@ -75,5 +89,5 @@ export function NavMain({
                 ))}
             </SidebarMenu>
         </SidebarGroup>
-  )
+    );
 }

resources/js/components/nav-secondary.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
+import * as React from "react";
-import { type LucideIcon } from "lucide-react"
+import { type LucideIcon } from "lucide-react";
 
 import {
     SidebarGroup,
@@ -7,17 +7,17 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
 
 export function NavSecondary({
     items,
     ...props
 }: {
     items: {
-    title: string
+        title: string;
-    url: string
+        url: string;
-    icon: LucideIcon
+        icon: LucideIcon;
-  }[]
+    }[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
     return (
         <SidebarGroup {...props}>
@@ -36,5 +36,5 @@ export function NavSecondary({
                 </SidebarMenu>
             </SidebarGroupContent>
         </SidebarGroup>
-  )
+    );
 }

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",
+        default: "h-9 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
+        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-11 rounded-md px-8",
+        lg: "h-10 rounded-md px-8",
-        icon: "h-10 w-10",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {

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 }

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,
+  HTMLDivElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
-    className={cn(
+    className={cn("font-semibold leading-none tracking-tight", className)}
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
     {...props}
   />
 ))
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
+  HTMLDivElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}

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,
+}

resources/js/components/ui/popover.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+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>,
@@ -25,7 +25,7 @@ const PopoverContent = React.forwardRef<
             {...props}
         />
     </PopoverPrimitive.Portal>
-))
+));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };

resources/js/components/ui/resizable.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { GripVertical } from "lucide-react"
+import { GripVertical } from "lucide-react";
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ResizablePanelGroup = ({
     className,
@@ -16,16 +16,16 @@ const ResizablePanelGroup = ({
         )}
         {...props}
     />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
     withHandle,
     className,
     ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+    withHandle?: boolean;
 }) => (
     <ResizablePrimitive.PanelResizeHandle
         className={cn(
@@ -40,6 +40,6 @@ const ResizableHandle = ({
             </div>
         )}
     </ResizablePrimitive.PanelResizeHandle>
-)
+);
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

resources/js/components/ui/scroll-area.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+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>,
@@ -20,12 +20,14 @@ const ScrollArea = React.forwardRef<
         <ScrollBar />
         <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-))
+));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
     React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+    React.ComponentPropsWithoutRef<
+        typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+    >
 >(({ className, orientation = "vertical", ...props }, ref) => (
     <ScrollAreaPrimitive.ScrollAreaScrollbar
         ref={ref}
@@ -42,7 +44,7 @@ const ScrollBar = React.forwardRef<
     >
         <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
+));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };

resources/js/components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+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>,
@@ -19,13 +19,15 @@ const Separator = React.forwardRef<
             orientation={orientation}
             className={cn(
                 "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                orientation === "horizontal"
+                    ? "h-[1px] w-full"
+                    : "h-full w-[1px]",
                 className
             )}
             {...props}
         />
     )
-)
+);
-Separator.displayName = SeparatorPrimitive.Root.displayName
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

resources/js/components/ui/sheet.tsx

@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react"
+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>,
@@ -27,8 +27,8 @@ const SheetOverlay = React.forwardRef<
         {...props}
         ref={ref}
     />
-))
+));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+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",
@@ -36,18 +36,16 @@ const sheetVariants = cva(
         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:
+                bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-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:
+                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",
-          "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>,
@@ -71,8 +69,8 @@ const SheetContent = React.forwardRef<
             </SheetPrimitive.Close>
         </SheetPrimitive.Content>
     </SheetPortal>
-))
+));
-SheetContent.displayName = SheetPrimitive.Content.displayName
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
     className,
@@ -85,8 +83,8 @@ const SheetHeader = ({
         )}
         {...props}
     />
-)
+);
-SheetHeader.displayName = "SheetHeader"
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
     className,
@@ -99,8 +97,8 @@ const SheetFooter = ({
         )}
         {...props}
     />
-)
+);
-SheetFooter.displayName = "SheetFooter"
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
     React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +109,8 @@ const SheetTitle = React.forwardRef<
         className={cn("text-lg font-semibold text-foreground", className)}
         {...props}
     />
-))
+));
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
     React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,8 +121,8 @@ const SheetDescription = React.forwardRef<
         className={cn("text-sm text-muted-foreground", className)}
         {...props}
     />
-))
+));
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
     Sheet,
@@ -137,4 +135,4 @@ export {
     SheetFooter,
     SheetTitle,
     SheetDescription,
-}
+};

resources/js/components/ui/sidebar.tsx

@@ -1,58 +1,58 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react"
+import { PanelLeft } from "lucide-react";
 
-import { useIsMobile } from "@/hooks/use-mobile"
+import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton";
 import {
     Tooltip,
     TooltipContent,
     TooltipProvider,
     TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContext = {
-  state: "expanded" | "collapsed"
+    state: "expanded" | "collapsed";
-  open: boolean
+    open: boolean;
-  setOpen: (open: boolean) => void
+    setOpen: (open: boolean) => void;
-  openMobile: boolean
+    openMobile: boolean;
-  setOpenMobile: (open: boolean) => void
+    setOpenMobile: (open: boolean) => void;
-  isMobile: boolean
+    isMobile: boolean;
-  toggleSidebar: () => void
+    toggleSidebar: () => void;
-}
+};
 
-const SidebarContext = React.createContext<SidebarContext | null>(null)
+const SidebarContext = React.createContext<SidebarContext | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+    const context = React.useContext(SidebarContext);
     if (!context) {
-    throw new Error("useSidebar must be used within a Sidebar.")
+        throw new Error("useSidebar must be used within a Sidebar.");
     }
 
-  return context
+    return context;
 }
 
 const SidebarProvider = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
+        defaultOpen?: boolean;
-    open?: boolean
+        open?: boolean;
-    onOpenChange?: (open: boolean) => void
+        onOpenChange?: (open: boolean) => void;
     }
 >(
     (
@@ -67,35 +67,35 @@ const SidebarProvider = React.forwardRef<
         },
         ref
     ) => {
-    const isMobile = useIsMobile()
+        const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false)
+        const [openMobile, setOpenMobile] = React.useState(false);
 
         // This is the internal state of the sidebar.
         // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
+        const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open
+        const open = openProp ?? _open;
         const setOpen = React.useCallback(
             (value: boolean | ((value: boolean) => boolean)) => {
                 if (setOpenProp) {
                     return setOpenProp?.(
                         typeof value === "function" ? value(open) : value
-          )
+                    );
                 }
 
-        _setOpen(value)
+                _setOpen(value);
 
                 // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+                document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
             },
             [setOpenProp, open]
-    )
+        );
 
         // Helper to toggle the sidebar.
         const toggleSidebar = React.useCallback(() => {
             return isMobile
                 ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
+                : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile])
+        }, [isMobile, setOpen, setOpenMobile]);
 
         // Adds a keyboard shortcut to toggle the sidebar.
         React.useEffect(() => {
@@ -104,18 +104,18 @@ const SidebarProvider = React.forwardRef<
                     event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
                     (event.metaKey || event.ctrlKey)
                 ) {
-          event.preventDefault()
+                    event.preventDefault();
-          toggleSidebar()
+                    toggleSidebar();
-        }
                 }
+            };
 
-      window.addEventListener("keydown", handleKeyDown)
+            window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown)
+            return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar])
+        }, [toggleSidebar]);
 
         // We add a state so that we can do data-state="expanded" or "collapsed".
         // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
+        const state = open ? "expanded" : "collapsed";
 
         const contextValue = React.useMemo<SidebarContext>(
             () => ({
@@ -127,8 +127,16 @@ const SidebarProvider = React.forwardRef<
                 setOpenMobile,
                 toggleSidebar,
             }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+            [
-    )
+                state,
+                open,
+                setOpen,
+                isMobile,
+                openMobile,
+                setOpenMobile,
+                toggleSidebar,
+            ]
+        );
 
         return (
             <SidebarContext.Provider value={contextValue}>
@@ -152,17 +160,17 @@ const SidebarProvider = React.forwardRef<
                     </div>
                 </TooltipProvider>
             </SidebarContext.Provider>
-    )
+        );
     }
-)
+);
-SidebarProvider.displayName = "SidebarProvider"
+SidebarProvider.displayName = "SidebarProvider";
 
 const Sidebar = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> & {
-    side?: "left" | "right"
+        side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset"
+        variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none"
+        collapsible?: "offcanvas" | "icon" | "none";
     }
 >(
     (
@@ -176,7 +184,7 @@ const Sidebar = React.forwardRef<
         },
         ref
     ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+        const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
         if (collapsible === "none") {
             return (
@@ -190,12 +198,16 @@ const Sidebar = React.forwardRef<
                 >
                     {children}
                 </div>
-      )
+            );
         }
 
         if (isMobile) {
             return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+                <Sheet
+                    open={openMobile}
+                    onOpenChange={setOpenMobile}
+                    {...props}
+                >
                     <SheetContent
                         data-sidebar="sidebar"
                         data-mobile="true"
@@ -207,10 +219,12 @@ const Sidebar = React.forwardRef<
                         }
                         side={side}
                     >
-            <div className="flex h-full w-full flex-col">{children}</div>
+                        <div className="flex h-full w-full flex-col">
+                            {children}
+                        </div>
                     </SheetContent>
                 </Sheet>
-      )
+            );
         }
 
         return (
@@ -255,16 +269,16 @@ const Sidebar = React.forwardRef<
                     </div>
                 </div>
             </div>
-    )
+        );
     }
-)
+);
-Sidebar.displayName = "Sidebar"
+Sidebar.displayName = "Sidebar";
 
 const SidebarTrigger = React.forwardRef<
     React.ElementRef<typeof Button>,
     React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+    const { toggleSidebar } = useSidebar();
 
     return (
         <Button
@@ -274,23 +288,23 @@ const SidebarTrigger = React.forwardRef<
             size="icon"
             className={cn("h-7 w-7", className)}
             onClick={(event) => {
-        onClick?.(event)
+                onClick?.(event);
-        toggleSidebar()
+                toggleSidebar();
             }}
             {...props}
         >
             <PanelLeft />
             <span className="sr-only">Toggle Sidebar</span>
         </Button>
-  )
+    );
-})
+});
-SidebarTrigger.displayName = "SidebarTrigger"
+SidebarTrigger.displayName = "SidebarTrigger";
 
 const SidebarRail = React.forwardRef<
     HTMLButtonElement,
     React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+    const { toggleSidebar } = useSidebar();
 
     return (
         <button
@@ -311,9 +325,9 @@ const SidebarRail = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarRail.displayName = "SidebarRail"
+SidebarRail.displayName = "SidebarRail";
 
 const SidebarInset = React.forwardRef<
     HTMLDivElement,
@@ -329,9 +343,9 @@ const SidebarInset = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarInset.displayName = "SidebarInset"
+SidebarInset.displayName = "SidebarInset";
 
 const SidebarInput = React.forwardRef<
     React.ElementRef<typeof Input>,
@@ -347,9 +361,9 @@ const SidebarInput = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarInput.displayName = "SidebarInput"
+SidebarInput.displayName = "SidebarInput";
 
 const SidebarHeader = React.forwardRef<
     HTMLDivElement,
@@ -362,9 +376,9 @@ const SidebarHeader = React.forwardRef<
             className={cn("flex flex-col gap-2 p-2", className)}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarHeader.displayName = "SidebarHeader"
+SidebarHeader.displayName = "SidebarHeader";
 
 const SidebarFooter = React.forwardRef<
     HTMLDivElement,
@@ -377,9 +391,9 @@ const SidebarFooter = React.forwardRef<
             className={cn("flex flex-col gap-2 p-2", className)}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarFooter.displayName = "SidebarFooter"
+SidebarFooter.displayName = "SidebarFooter";
 
 const SidebarSeparator = React.forwardRef<
     React.ElementRef<typeof Separator>,
@@ -392,9 +406,9 @@ const SidebarSeparator = React.forwardRef<
             className={cn("mx-2 w-auto bg-sidebar-border", className)}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarSeparator.displayName = "SidebarSeparator"
+SidebarSeparator.displayName = "SidebarSeparator";
 
 const SidebarContent = React.forwardRef<
     HTMLDivElement,
@@ -410,9 +424,9 @@ const SidebarContent = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarContent.displayName = "SidebarContent"
+SidebarContent.displayName = "SidebarContent";
 
 const SidebarGroup = React.forwardRef<
     HTMLDivElement,
@@ -422,18 +436,21 @@ const SidebarGroup = React.forwardRef<
         <div
             ref={ref}
             data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+            className={cn(
+                "relative flex w-full min-w-0 flex-col p-2",
+                className
+            )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarGroup.displayName = "SidebarGroup"
+SidebarGroup.displayName = "SidebarGroup";
 
 const SidebarGroupLabel = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
+    const Comp = asChild ? Slot : "div";
 
     return (
         <Comp
@@ -446,15 +463,15 @@ const SidebarGroupLabel = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
 
 const SidebarGroupAction = React.forwardRef<
     HTMLButtonElement,
     React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
 
     return (
         <Comp
@@ -469,9 +486,9 @@ const SidebarGroupAction = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarGroupAction.displayName = "SidebarGroupAction"
+SidebarGroupAction.displayName = "SidebarGroupAction";
 
 const SidebarGroupContent = React.forwardRef<
     HTMLDivElement,
@@ -483,8 +500,8 @@ const SidebarGroupContent = React.forwardRef<
         className={cn("w-full text-sm", className)}
         {...props}
     />
-))
+));
-SidebarGroupContent.displayName = "SidebarGroupContent"
+SidebarGroupContent.displayName = "SidebarGroupContent";
 
 const SidebarMenu = React.forwardRef<
     HTMLUListElement,
@@ -496,8 +513,8 @@ const SidebarMenu = React.forwardRef<
         className={cn("flex w-full min-w-0 flex-col gap-1", className)}
         {...props}
     />
-))
+));
-SidebarMenu.displayName = "SidebarMenu"
+SidebarMenu.displayName = "SidebarMenu";
 
 const SidebarMenuItem = React.forwardRef<
     HTMLLIElement,
@@ -509,15 +526,16 @@ const SidebarMenuItem = React.forwardRef<
         className={cn("group/menu-item relative", className)}
         {...props}
     />
-))
+));
-SidebarMenuItem.displayName = "SidebarMenuItem"
+SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
     "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
     {
         variants: {
             variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                default:
+                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                 outline:
                     "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
             },
@@ -532,14 +550,14 @@ const sidebarMenuButtonVariants = cva(
             size: "default",
         },
     }
-)
+);
 
 const SidebarMenuButton = React.forwardRef<
     HTMLButtonElement,
     React.ComponentProps<"button"> & {
-    asChild?: boolean
+        asChild?: boolean;
-    isActive?: boolean
+        isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+        tooltip?: string | React.ComponentProps<typeof TooltipContent>;
     } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
     (
@@ -554,8 +572,8 @@ const SidebarMenuButton = React.forwardRef<
         },
         ref
     ) => {
-    const Comp = asChild ? Slot : "button"
+        const Comp = asChild ? Slot : "button";
-    const { isMobile, state } = useSidebar()
+        const { isMobile, state } = useSidebar();
 
         const button = (
             <Comp
@@ -563,19 +581,22 @@ const SidebarMenuButton = React.forwardRef<
                 data-sidebar="menu-button"
                 data-size={size}
                 data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+                className={cn(
+                    sidebarMenuButtonVariants({ variant, size }),
+                    className
+                )}
                 {...props}
             />
-    )
+        );
 
         if (!tooltip) {
-      return button
+            return button;
         }
 
         if (typeof tooltip === "string") {
             tooltip = {
                 children: tooltip,
-      }
+            };
         }
 
         return (
@@ -588,19 +609,19 @@ const SidebarMenuButton = React.forwardRef<
                     {...tooltip}
                 />
             </Tooltip>
-    )
+        );
     }
-)
+);
-SidebarMenuButton.displayName = "SidebarMenuButton"
+SidebarMenuButton.displayName = "SidebarMenuButton";
 
 const SidebarMenuAction = React.forwardRef<
     HTMLButtonElement,
     React.ComponentProps<"button"> & {
-    asChild?: boolean
+        asChild?: boolean;
-    showOnHover?: boolean
+        showOnHover?: boolean;
     }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
 
     return (
         <Comp
@@ -620,9 +641,9 @@ const SidebarMenuAction = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarMenuAction.displayName = "SidebarMenuAction"
+SidebarMenuAction.displayName = "SidebarMenuAction";
 
 const SidebarMenuBadge = React.forwardRef<
     HTMLDivElement,
@@ -642,25 +663,28 @@ const SidebarMenuBadge = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
 
 const SidebarMenuSkeleton = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> & {
-    showIcon?: boolean
+        showIcon?: boolean;
     }
 >(({ className, showIcon = false, ...props }, ref) => {
     // Random width between 50 to 90%.
     const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
+        return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, [])
+    }, []);
 
     return (
         <div
             ref={ref}
             data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+            className={cn(
+                "rounded-md h-8 flex gap-2 px-2 items-center",
+                className
+            )}
             {...props}
         >
             {showIcon && (
@@ -679,9 +703,9 @@ const SidebarMenuSkeleton = React.forwardRef<
                 }
             />
         </div>
-  )
+    );
-})
+});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
 
 const SidebarMenuSub = React.forwardRef<
     HTMLUListElement,
@@ -697,24 +721,24 @@ const SidebarMenuSub = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-SidebarMenuSub.displayName = "SidebarMenuSub"
+SidebarMenuSub.displayName = "SidebarMenuSub";
 
 const SidebarMenuSubItem = React.forwardRef<
     HTMLLIElement,
     React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 const SidebarMenuSubButton = React.forwardRef<
     HTMLAnchorElement,
     React.ComponentProps<"a"> & {
-    asChild?: boolean
+        asChild?: boolean;
-    size?: "sm" | "md"
+        size?: "sm" | "md";
-    isActive?: boolean
+        isActive?: boolean;
     }
 >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+    const Comp = asChild ? Slot : "a";
 
     return (
         <Comp
@@ -732,9 +756,9 @@ const SidebarMenuSubButton = React.forwardRef<
             )}
             {...props}
         />
-  )
+    );
-})
+});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 export {
     Sidebar,
@@ -761,4 +785,4 @@ export {
     SidebarSeparator,
     SidebarTrigger,
     useSidebar,
-}
+};

resources/js/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
     className,
@@ -9,7 +9,7 @@ function Skeleton({
             className={cn("animate-pulse rounded-md bg-muted", className)}
             {...props}
         />
-  )
+    );
 }
 
-export { Skeleton }
+export { Skeleton };

resources/js/components/ui/table.tsx

@@ -1,6 +1,6 @@
-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,
@@ -13,16 +13,16 @@ const Table = React.forwardRef<
             {...props}
         />
     </div>
-))
+));
-Table.displayName = "Table"
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
     HTMLTableSectionElement,
     React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
     <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
+));
-TableHeader.displayName = "TableHeader"
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
     HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
         className={cn("[&_tr:last-child]:border-0", className)}
         {...props}
     />
-))
+));
-TableBody.displayName = "TableBody"
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
     HTMLTableSectionElement,
@@ -48,8 +48,8 @@ const TableFooter = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-TableFooter.displayName = "TableFooter"
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
     HTMLTableRowElement,
@@ -63,8 +63,8 @@ const TableRow = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-TableRow.displayName = "TableRow"
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
     HTMLTableCellElement,
@@ -78,8 +78,8 @@ const TableHead = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-TableHead.displayName = "TableHead"
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
     HTMLTableCellElement,
@@ -87,11 +87,14 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <td
         ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+        className={cn(
+            "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+            className
+        )}
         {...props}
     />
-))
+));
-TableCell.displayName = "TableCell"
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
     HTMLTableCaptionElement,
@@ -102,8 +105,8 @@ const TableCaption = React.forwardRef<
         className={cn("mt-4 text-sm text-muted-foreground", className)}
         {...props}
     />
-))
+));
-TableCaption.displayName = "TableCaption"
+TableCaption.displayName = "TableCaption";
 
 export {
     Table,
@@ -114,4 +117,4 @@ export {
     TableRow,
     TableCell,
     TableCaption,
-}
+};

resources/js/components/ui/tooltip.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+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>,
@@ -24,7 +24,7 @@ const TooltipContent = React.forwardRef<
         )}
         {...props}
     />
-))
+));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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 "../../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">
+                <main className="p-4 md:pt-0 h-full">{children}</main>
-                    {children}
+                <footer className="text-sm p-4">
-                </main>
+                    © Copyright {new Date().getFullYear()} Bidang Tata
+                    Lingkungan dan Kebersihan - Dinas Lingkungan Hidup Provinsi
+                    DKI Jakarta
+                </footer>
             </SidebarInset>
         </SidebarProvider>
     );

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 (
+    return <div className="">{children}</div>;
-        <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>
-    );
 }

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;

resources/js/pages/Pengumuman.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import Navbar from "@/components/Home/Navbar";
+import Navbar from "@/components/Partials/Navbar";
-import Footer from "@/components/Home/Footer";
+import Footer from "@/components/Partials/Footer";
-import HeroSecond from "@/components/Pengumuman/HeroSecond";
+import HeroSecond from "@/components/Card/HeroSecond";
-import CardPengumuman from "@/components/Pengumuman/CardPengumuman";
+import CardPengumuman from "@/components/Card/CardPengumuman";
+import { Head } from "@inertiajs/react";
 
 export default function Pengumuman() {
     return (
         <>
+            <Head title="Pengumuman" />
             <Navbar />
             <HeroSecond title="Pengumuman" />
             <CardPengumuman />

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

resources/js/pages/Undangan.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import Navbar from "@/components/Home/Navbar";
+import Navbar from "@/components/Partials/Navbar";
-import Footer from "@/components/Home/Footer";
+import Footer from "@/components/Partials/Footer";
-import HeroSecond from "@/components/Pengumuman/HeroSecond";
+import HeroSecond from "@/components/Card/HeroSecond";
-import CardUndangan from "@/components/Pengumuman/CardUndangan";
+import CardUndangan from "@/components/Card/CardUndangan";
+import { Head } from "@inertiajs/react";
 
 export default function Undangan() {
     return (
         <>
+            <Head title="Undangan" />
             <Navbar />
             <HeroSecond title="Undangan" />
             <CardUndangan />

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 {
+import { InputError } from "@/components/ui/input-error";
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-} from "@/components/ui/card";
 
 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>
+                <div className="w-full">
-                    <CardHeader>
+                    <div className="flex flex-col lg:flex-row min-h-screen">
-                        <CardDescription>
+                        {/* Left Section - Form */}
-                            Forgot your password? No problem. Just let us know
+                        <div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
-                            your email address and we will email you a password
+                            <div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
-                            reset link that will allow you to choose a new one.
+                                <Link href="/" className="mb-4">
-                        </CardDescription>
+                                    <img
-                    </CardHeader>
+                                        src="/assets/logo_skl.svg"
-                    <CardContent>
+                                        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="Your email"
+                                                    placeholder="m@example.com"
                                                     value={data.email}
-                            onChange={(e) => setData("email", e.target.value)}
+                                                    onChange={(e) =>
+                                                        setData(
+                                                            "email",
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    required
                                                 />
+                                                <InputError
+                                                    message={errors.email}
+                                                />
+                                            </div>
 
-                        <InputError message={errors.email} className="mt-2" />
+                                            <Button
-                    </CardContent>
+                                                type="submit"
-
+                                                disabled={processing}
-                    <CardFooter className="flex justify-end">
+                                                className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
-                        <Button disabled={processing}>
+                                            >
-                            Email Password Reset Link
+                                                Kirim Link Reset Password
                                             </Button>
-                    </CardFooter>
+
+                                            <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>
+                        </div>
+
+                        {/* 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>
+        </>
     );
 }

resources/js/pages/auth/login copy.tsx

@@ -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>
+        </>
+    );
+}

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 {
+import { Card, CardContent } from "@/components/ui/card";
-    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";
@@ -34,52 +27,79 @@ 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">
+                <div className="w-full">
-                    <CardHeader>
+                    <div className="flex flex-col lg:flex-row min-h-screen">
-                        <CardTitle className="text-2xl">Login</CardTitle>
+                        {/* Left Section - Form */}
-                        <CardDescription>
+                        <div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
-                            Enter your email below to login to your account
+                            <div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
-                        </CardDescription>
+                                <Link href="/" className="mb-4">
-                    </CardHeader>
+                                    <img
-                    <CardContent>
+                                        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">
+                                    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">
+                                        <div className="grid gap-4 mt-6">
                                             <div className="grid gap-2">
-                                <Label htmlFor="email">Email</Label>
+                                                <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)
+                                                        setData(
+                                                            "email",
+                                                            e.target.value
+                                                        )
                                                     }
                                                     required
                                                 />
-                                <InputError message={errors.email} />
+                                                <InputError
+                                                    message={errors.email}
+                                                />
                                             </div>
                                             <div className="grid gap-2">
                                                 <div className="flex items-center">
-                                    <Label htmlFor="password">Password</Label>
+                                                    <Label htmlFor="password">
+                                                        Kata Sandi
+                                                    </Label>
                                                     <Link
-                                        href={route("password.request")}
+                                                        href={route(
+                                                            "password.request"
+                                                        )}
                                                         className="ml-auto inline-block text-sm underline"
                                                     >
-                                        Forgot your password?
+                                                        Lupa Kata Sandi?
                                                     </Link>
                                                 </div>
                                                 <Input
@@ -87,25 +107,47 @@ export default function Login({
                                                     type="password"
                                                     value={data.password}
                                                     onChange={(e) =>
-                                        setData("password", e.target.value)
+                                                        setData(
+                                                            "password",
+                                                            e.target.value
+                                                        )
                                                     }
                                                     required
                                                 />
-                                <InputError message={errors.password} />
+                                                <InputError
+                                                    message={errors.password}
+                                                />
                                             </div>
-                            <Button type="submit" className="w-full">
+                                            <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 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>
+                        </div>
+
+                        {/* 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>
+        </>
     );
 }

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
+        <AuthenticatedLayout header="Dashboard">
-            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">
+                <DatePickerWithRange />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="grid gap-4 md:grid-cols-5 items-center w-full">
-                    <div className="aspect-video rounded-xl bg-muted/50" />
+                    <StatsCard
-                    <div className="aspect-video rounded-xl bg-muted/50" />
+                        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>
     );

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

resources/js/pages/welcome.tsx

@@ -1,14 +1,27 @@
-import Navbar from "@/components/Home/Navbar";
+import Navbar from "@/components/Partials/Navbar";
-import HeroSection from "@/components/Home/Hero";
+import HeroSection from "@/components/Partials/Hero";
-import Tentang from "@/components/Home/Tentang";
+import Tentang from "@/components/Partials/Tentang";
-import Pengumuman from "@/components/Home/Pengumuman";
+import Pengumuman from "@/components/Partials/Pengumuman";
-import Peraturan from "@/components/Home/Peraturan";
+import Peraturan from "@/components/Partials/Peraturan";
-import Undangan from "@/components/Home/Undangan";
+import Undangan from "@/components/Partials/Undangan";
-import Footer from "@/components/Home/Footer";
+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 (
         <>
+            {showPopup && <PopupModal onClose={handleClosePopup} />}
+            <Guest>
+                <Head title="Home" />
                 <Navbar />
                 <HeroSection />
                 <Tentang />
@@ -16,6 +29,7 @@ export default function Home() {
                 <Peraturan />
                 <Undangan />
                 <Footer />
+            </Guest>
         </>
     );
 }

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;

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

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']);

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

tailwind.config.js

@@ -5,100 +5,90 @@ module.exports = {
     prefix: "",
     theme: {
     	container: {
-            center: "true",
+    		center: 'true',
-            padding: "2rem",
+    		padding: '2rem',
     		screens: {
-                "2xl": "1400px",
+    			'2xl': '1400px'
-            },
+    		}
     	},
     	extend: {
     		colors: {
-                border: "hsl(var(--border))",
+    			border: 'hsl(var(--border))',
-                input: "hsl(var(--input))",
+    			input: 'hsl(var(--input))',
-                ring: "hsl(var(--ring))",
+    			ring: 'hsl(var(--ring))',
-                background: "hsl(var(--background))",
+    			background: 'hsl(var(--background))',
-                foreground: "hsl(var(--foreground))",
+    			foreground: 'hsl(var(--foreground))',
     			primary: {
-                    DEFAULT: "hsl(var(--primary))",
+    				DEFAULT: 'hsl(var(--primary))',
-                    foreground: "hsl(var(--primary-foreground))",
+    				foreground: 'hsl(var(--primary-foreground))'
     			},
     			secondary: {
-                    DEFAULT: "hsl(var(--secondary))",
+    				DEFAULT: 'hsl(var(--secondary))',
-                    foreground: "hsl(var(--secondary-foreground))",
+    				foreground: 'hsl(var(--secondary-foreground))'
     			},
     			destructive: {
-                    DEFAULT: "hsl(var(--destructive))",
+    				DEFAULT: 'hsl(var(--destructive))',
-                    foreground: "hsl(var(--destructive-foreground))",
+    				foreground: 'hsl(var(--destructive-foreground))'
     			},
     			muted: {
-                    DEFAULT: "hsl(var(--muted))",
+    				DEFAULT: 'hsl(var(--muted))',
-                    foreground: "hsl(var(--muted-foreground))",
+    				foreground: 'hsl(var(--muted-foreground))'
     			},
     			accent: {
-                    DEFAULT: "hsl(var(--accent))",
+    				DEFAULT: 'hsl(var(--accent))',
-                    foreground: "hsl(var(--accent-foreground))",
+    				foreground: 'hsl(var(--accent-foreground))'
     			},
     			popover: {
-                    DEFAULT: "hsl(var(--popover))",
+    				DEFAULT: 'hsl(var(--popover))',
-                    foreground: "hsl(var(--popover-foreground))",
+    				foreground: 'hsl(var(--popover-foreground))'
     			},
     			card: {
-                    DEFAULT: "hsl(var(--card))",
+    				DEFAULT: 'hsl(var(--card))',
-                    foreground: "hsl(var(--card-foreground))",
+    				foreground: 'hsl(var(--card-foreground))'
     			},
     			sidebar: {
-                    DEFAULT: "hsl(var(--sidebar-background))",
+    				DEFAULT: 'hsl(var(--sidebar-background))',
-                    foreground: "hsl(var(--sidebar-foreground))",
+    				foreground: 'hsl(var(--sidebar-foreground))',
-                    primary: "hsl(var(--sidebar-primary))",
+    				primary: 'hsl(var(--sidebar-primary))',
-                    "primary-foreground":
+    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-                        "hsl(var(--sidebar-primary-foreground))",
+    				accent: 'hsl(var(--sidebar-accent))',
-                    accent: "hsl(var(--sidebar-accent))",
+    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-                    "accent-foreground":
+    				border: 'hsl(var(--sidebar-border))',
-                        "hsl(var(--sidebar-accent-foreground))",
+    				ring: 'hsl(var(--sidebar-ring))'
-                    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)",
+    			lg: 'var(--radius)',
-                md: "calc(var(--radius) - 2px)",
+    			md: 'calc(var(--radius) - 2px)',
-                sm: "calc(var(--radius) - 4px)",
+    			sm: 'calc(var(--radius) - 4px)'
     		},
     		keyframes: {
-                "accordion-down": {
+    			'fade-in': {
-                    from: {
+    				'0%': {
-                        height: "0",
+    					opacity: '0'
-                    },
-                    to: {
-                        height: "var(--radix-accordion-content-height)",
-                    },
-                },
-                "accordion-up": {
-                    from: {
-                        height: "var(--radix-accordion-content-height)",
-                    },
-                    to: {
-                        height: "0",
-                    },
     				},
+    				'100%': {
+    					opacity: '1'
+    				}
+    			}
     		},
     		animation: {
-                "accordion-down": "accordion-down 0.2s ease-out",
+    			'fade-in': 'fade-in 1s ease-in-out'
-                "accordion-up": "accordion-up 0.2s ease-out",
     		},
     		fontFamily: {
-                sans: ["Inter Tight", "sans-serif"], // Set default font
+    			sans: [
-            },
+    				'Inter Tight',
-            keyframes: {
+    				'sans-serif'
-                "fade-in": {
+    			]
-                    "0%": { opacity: "0" },
+    		}
-                    "100%": { opacity: "1" },
+    	}
-                },
-            },
-            animation: {
-                "fade-in": "fade-in 1s ease-in-out",
-            },
-        },
     },
     plugins: [require("tailwindcss-animate")],
 };