fe dan dashboard
marszayn
parent
d8125911a7
commit
a9edde2fbd
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "default",
|
||||
"rsc": true,
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "resources/css/app.css",
|
||||
"baseColor": "slate",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
|
|
@ -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')
|
||||
]);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
24
package.json
24
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",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 0 B After Width: | Height: | Size: 200 KiB |
|
|
@ -4,6 +4,42 @@
|
|||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
}
|
||||
/*
|
||||
.light {
|
||||
--background: 210 17% 98%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
|
|
@ -32,28 +68,29 @@
|
|||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
} */
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card: 0 0% 3.9%;
|
||||
/* --card: 0 0% 100%; */
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
|
|
@ -62,6 +99,11 @@
|
|||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import "./bootstrap";
|
||||
import "../css/app.css";
|
||||
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { createInertiaApp } from "@inertiajs/react";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
@ -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">
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Search, LogIn, Menu, X } from "lucide-react";
|
||||
import { Search, LogIn, Menu, X, Moon, Sun } from "lucide-react";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "@inertiajs/react";
|
||||
import { Link, router } from "@inertiajs/react";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
|
|
@ -16,6 +16,7 @@ import {
|
|||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer";
|
||||
import RunningText from "./RunningText";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
interface NavItemsProps {
|
||||
mobile?: boolean;
|
||||
|
|
@ -25,6 +26,8 @@ interface NavItemsProps {
|
|||
const Navbar = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
// Handle scroll effect
|
||||
useEffect(() => {
|
||||
|
|
@ -37,6 +40,18 @@ const Navbar = () => {
|
|||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === "light" ? "dark" : "light");
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (searchQuery) {
|
||||
router.push(`/search/${searchQuery}`);
|
||||
setSearchQuery(""); // Clear input setelah search
|
||||
}
|
||||
};
|
||||
|
||||
const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
|
||||
<>
|
||||
<NavigationMenuItem>
|
||||
|
|
@ -68,17 +83,24 @@ const Navbar = () => {
|
|||
</NavigationMenuItem>
|
||||
))}
|
||||
<NavigationMenuItem>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={mobile && onClose ? onClose : undefined}
|
||||
className={`transition-all duration-200 text-white hover:text-white ${
|
||||
mobile
|
||||
? "w-full justify-start rounded-lg hover:bg-green-700"
|
||||
: "rounded-full hover:bg-green-800"
|
||||
<form onSubmit={handleSearch} className="flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className={`bg-white text-black px-3 py-2 rounded-l-full focus:outline-none w-full ${
|
||||
mobile ? "w-32" : "w-40"
|
||||
}`}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
className="bg-green-700 hover:bg-green-600 text-white rounded-r-full p-2"
|
||||
>
|
||||
<Search className="h-4 w-4 text-white" />
|
||||
</Button>
|
||||
</form>
|
||||
</NavigationMenuItem>
|
||||
</>
|
||||
);
|
||||
|
|
@ -138,7 +160,7 @@ const Navbar = () => {
|
|||
</DrawerTrigger>
|
||||
<DrawerContent className="bg-green-800/95 backdrop-blur-lg border-none">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="text-white text-2xl font-bold">
|
||||
<DrawerTitle className="text-white text-2xl text-center font-bold">
|
||||
Menu
|
||||
</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
|
|
@ -166,6 +188,18 @@ const Navbar = () => {
|
|||
</Drawer>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={toggleTheme}
|
||||
className="p-3 bg-[#2d7448] hover:bg-[#16a34a] rounded-full text-white "
|
||||
>
|
||||
{theme === "light" ? (
|
||||
<Moon className="h-6 w-6" />
|
||||
) : (
|
||||
<Sun className="h-6 w-6" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<Link
|
||||
href="/login"
|
||||
|
|
@ -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 { NavSecondary } from "@/components/nav-secondary"
|
||||
import { NavUser } from "@/components/nav-user"
|
||||
import { NavMain } from "@/components/nav-main";
|
||||
import { NavSecondary } from "@/components/nav-secondary";
|
||||
import { NavUser } from "@/components/nav-user";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
|
|
@ -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')}>
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
<Command className="size-4" />
|
||||
<Link href={route("dashboard")}>
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-lg text-sidebar-primary-foreground">
|
||||
{/* <Command className="size-4" /> */}
|
||||
<img
|
||||
src="/assets/logo_skl.svg"
|
||||
alt="Logo"
|
||||
className="w-12 h-12 md:w-16 md:h-16"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">Acme Inc</span>
|
||||
<span className="truncate text-xs">Enterprise</span>
|
||||
<span className="truncate font-semibold">
|
||||
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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
url: string
|
||||
icon: LucideIcon
|
||||
isActive?: boolean
|
||||
title: string;
|
||||
url: string;
|
||||
icon: LucideIcon;
|
||||
isActive?: boolean;
|
||||
items?: {
|
||||
title: string
|
||||
url: string
|
||||
}[]
|
||||
}[]
|
||||
title: 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}>
|
||||
<SidebarMenuSubButton asChild>
|
||||
<Link href={subItem.url}>
|
||||
<span>{subItem.title}</span>
|
||||
<SidebarMenuSubItem
|
||||
key={subItem.title}
|
||||
>
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href={subItem.url}
|
||||
>
|
||||
<span>
|
||||
{subItem.title}
|
||||
</span>
|
||||
</Link>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
|
|
@ -75,5 +89,5 @@ export function NavMain({
|
|||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from "react"
|
||||
import { type LucideIcon } from "lucide-react"
|
||||
import * as React from "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
|
||||
url: string
|
||||
icon: LucideIcon
|
||||
}[]
|
||||
title: string;
|
||||
url: string;
|
||||
icon: LucideIcon;
|
||||
}[];
|
||||
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
|
||||
return (
|
||||
<SidebarGroup {...props}>
|
||||
|
|
@ -36,5 +36,5 @@ export function NavSecondary({
|
|||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
@ -9,7 +9,7 @@ const Card = React.forwardRef<
|
|||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||
"rounded-xl border bg-card text-card-foreground shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
@ -30,25 +30,22 @@ const CardHeader = React.forwardRef<
|
|||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Popover = PopoverPrimitive.Root
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import { GripVertical } from "lucide-react"
|
||||
import * as ResizablePrimitive from "react-resizable-panels"
|
||||
import { GripVertical } from "lucide-react";
|
||||
import * as ResizablePrimitive from "react-resizable-panels";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ResizablePanelGroup = ({
|
||||
className,
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
import * as React from "react";
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ScrollArea = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
import * as React from "react";
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
const Sheet = SheetPrimitive.Root;
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
const SheetTrigger = SheetPrimitive.Trigger;
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
const SheetClose = SheetPrimitive.Close;
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
const SheetPortal = SheetPrimitive.Portal;
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
|
|
@ -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:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
|
|
@ -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,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,58 +1,58 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { VariantProps, cva } from "class-variance-authority"
|
||||
import { PanelLeft } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { VariantProps, cva } from "class-variance-authority";
|
||||
import { PanelLeft } from "lucide-react";
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
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_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar:state";
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
||||
const SIDEBAR_WIDTH = "16rem";
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
||||
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
||||
|
||||
type SidebarContext = {
|
||||
state: "expanded" | "collapsed"
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
openMobile: boolean
|
||||
setOpenMobile: (open: boolean) => void
|
||||
isMobile: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
state: "expanded" | "collapsed";
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
openMobile: boolean;
|
||||
setOpenMobile: (open: boolean) => void;
|
||||
isMobile: boolean;
|
||||
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
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
defaultOpen?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
>(
|
||||
(
|
||||
|
|
@ -67,35 +67,35 @@ const SidebarProvider = React.forwardRef<
|
|||
},
|
||||
ref
|
||||
) => {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
const isMobile = useIsMobile();
|
||||
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 = openProp ?? _open
|
||||
const [_open, _setOpen] = React.useState(defaultOpen);
|
||||
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)
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
: setOpen((open) => !open);
|
||||
}, [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()
|
||||
toggleSidebar()
|
||||
}
|
||||
event.preventDefault();
|
||||
toggleSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [toggleSidebar])
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [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"
|
||||
variant?: "sidebar" | "floating" | "inset"
|
||||
collapsible?: "offcanvas" | "icon" | "none"
|
||||
side?: "left" | "right";
|
||||
variant?: "sidebar" | "floating" | "inset";
|
||||
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)
|
||||
toggleSidebar()
|
||||
onClick?.(event);
|
||||
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
|
||||
isActive?: boolean
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||
asChild?: boolean;
|
||||
isActive?: boolean;
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>
|
||||
>(
|
||||
(
|
||||
|
|
@ -554,8 +572,8 @@ const SidebarMenuButton = React.forwardRef<
|
|||
},
|
||||
ref
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const { isMobile, state } = useSidebar()
|
||||
const Comp = asChild ? Slot : "button";
|
||||
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
|
||||
showOnHover?: boolean
|
||||
asChild?: 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} />)
|
||||
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
|
||||
>(({ ...props }, ref) => <li ref={ref} {...props} />);
|
||||
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
||||
|
||||
const SidebarMenuSubButton = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentProps<"a"> & {
|
||||
asChild?: boolean
|
||||
size?: "sm" | "md"
|
||||
isActive?: boolean
|
||||
asChild?: boolean;
|
||||
size?: "sm" | "md";
|
||||
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,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
import * as React from "react";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{children}
|
||||
</main>
|
||||
<main className="p-4 md:pt-0 h-full">{children}</main>
|
||||
<footer className="text-sm p-4">
|
||||
© Copyright {new Date().getFullYear()} Bidang Tata
|
||||
Lingkungan dan Kebersihan - Dinas Lingkungan Hidup Provinsi
|
||||
DKI Jakarta
|
||||
</footer>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,8 @@
|
|||
import ApplicationLogo from "@/components/application-logo";
|
||||
import { Link } from "@inertiajs/react";
|
||||
import { PropsWithChildren } from "react";
|
||||
import "../../css/app.css";
|
||||
|
||||
export default function Guest({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-background">
|
||||
<div>
|
||||
<Link href="/">
|
||||
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:max-w-md mt-6 px-6 py-4">{children}</div>
|
||||
</div>
|
||||
);
|
||||
return <div className="">{children}</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
import React from "react";
|
||||
import Navbar from "@/components/Home/Navbar";
|
||||
import Footer from "@/components/Home/Footer";
|
||||
import HeroSecond from "@/components/Pengumuman/HeroSecond";
|
||||
import CardPengumuman from "@/components/Pengumuman/CardPengumuman";
|
||||
import Navbar from "@/components/Partials/Navbar";
|
||||
import Footer from "@/components/Partials/Footer";
|
||||
import HeroSecond from "@/components/Card/HeroSecond";
|
||||
import CardPengumuman from "@/components/Card/CardPengumuman";
|
||||
import { Head } from "@inertiajs/react";
|
||||
|
||||
export default function Pengumuman() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Pengumuman" />
|
||||
<Navbar />
|
||||
<HeroSecond title="Pengumuman" />
|
||||
<CardPengumuman />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
import React from "react";
|
||||
import Navbar from "@/components/Home/Navbar";
|
||||
import Footer from "@/components/Home/Footer";
|
||||
import HeroSecond from "@/components/Pengumuman/HeroSecond";
|
||||
import CardUndangan from "@/components/Pengumuman/CardUndangan";
|
||||
import Navbar from "@/components/Partials/Navbar";
|
||||
import Footer from "@/components/Partials/Footer";
|
||||
import HeroSecond from "@/components/Card/HeroSecond";
|
||||
import CardUndangan from "@/components/Card/CardUndangan";
|
||||
import { Head } from "@inertiajs/react";
|
||||
|
||||
export default function Undangan() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Undangan" />
|
||||
<Navbar />
|
||||
<HeroSecond title="Undangan" />
|
||||
<CardUndangan />
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
import GuestLayout from "@/layouts/guest-layout";
|
||||
import { Head, useForm } from "@inertiajs/react";
|
||||
import { FormEventHandler } from "react";
|
||||
import { Head, Link, useForm } from "@inertiajs/react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { InputError } from "@/components/ui/input-error";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
} from "@/components/ui/card";
|
||||
import { InputError } from "@/components/ui/input-error";
|
||||
|
||||
export default function ForgotPassword({ status }: { status?: string }) {
|
||||
const { data, setData, post, processing, errors } = useForm({
|
||||
|
|
@ -19,48 +13,110 @@ export default function ForgotPassword({ status }: { status?: string }) {
|
|||
|
||||
const submit: FormEventHandler = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
post(route("password.email"));
|
||||
};
|
||||
|
||||
return (
|
||||
<GuestLayout>
|
||||
<>
|
||||
<Head title="Forgot Password" />
|
||||
|
||||
<form onSubmit={submit}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardDescription>
|
||||
Forgot your password? No problem. Just let us know
|
||||
your email address and we will email you a password
|
||||
reset link that will allow you to choose a new one.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col lg:flex-row min-h-screen">
|
||||
{/* Left Section - Form */}
|
||||
<div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
|
||||
<div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
|
||||
<Link href="/" className="mb-4">
|
||||
<img
|
||||
src="/assets/logo_skl.svg"
|
||||
alt="Logo SKL"
|
||||
className="w-20 h-20 lg:w-24 lg:h-24"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-xl lg:text-2xl font-bold mt-2 text-center">
|
||||
Status Ketaatan Lingkungan
|
||||
</h1>
|
||||
|
||||
<h2 className="text-base lg:text-lg font-bold mt-6 lg:mt-8 text-[#0DAB19] text-center">
|
||||
LUPA KATA SANDI?
|
||||
</h2>
|
||||
<p className="text-sm mb-6 lg:mb-8 text-center px-4">
|
||||
Masukkan email terdaftar untuk <br />
|
||||
kami kirimkan link atur ulang kata sandi
|
||||
</p>
|
||||
|
||||
<Card className="w-full mx-4 lg:mx-auto lg:max-w-sm">
|
||||
<CardContent className="pt-4">
|
||||
{status && (
|
||||
<div className="mb-4 font-medium text-sm text-green-600">
|
||||
{status}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 mt-6">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="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" />
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button disabled={processing}>
|
||||
Email Password Reset Link
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={processing}
|
||||
className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
|
||||
>
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'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'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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +1,6 @@
|
|||
import { FormEventHandler, useEffect } from "react";
|
||||
import GuestLayout from "@/layouts/guest-layout";
|
||||
import { Head, Link, useForm } from "@inertiajs/react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -34,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">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Login</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to login to your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col lg:flex-row min-h-screen">
|
||||
{/* Left Section - Form */}
|
||||
<div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
|
||||
<div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
|
||||
<Link href="/" className="mb-4">
|
||||
<img
|
||||
src="/assets/logo_skl.svg"
|
||||
alt="Logo SKL"
|
||||
className="w-20 h-20 lg:w-24 lg:h-24"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-xl lg:text-2xl font-bold mt-2 text-center">
|
||||
Status Ketaatan Lingkungan
|
||||
</h1>
|
||||
|
||||
<h2 className="text-base lg:text-lg font-bold mt-6 lg:mt-8 text-[#0DAB19] text-center">
|
||||
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'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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,124 @@
|
|||
import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
|
||||
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
||||
import { Head } from "@inertiajs/react";
|
||||
import {
|
||||
Building,
|
||||
School,
|
||||
Skull,
|
||||
TestTubeDiagonalIcon,
|
||||
UsersRound,
|
||||
Waves,
|
||||
} from "lucide-react";
|
||||
import StatsCard from "@/components/Dashboard/DashCard";
|
||||
import CerobongCard from "@/components/Dashboard/CerobongCard";
|
||||
import { ChartCard } from "@/components/Dashboard/ChartCard";
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<AuthenticatedLayout
|
||||
header="Dashboard"
|
||||
>
|
||||
<AuthenticatedLayout header="Dashboard">
|
||||
<Head title="Dashboard" />
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 h-full">
|
||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
||||
<DatePickerWithRange />
|
||||
<div className="grid gap-4 md:grid-cols-5 items-center w-full">
|
||||
<StatsCard
|
||||
title="Total Laporan Perusahaan"
|
||||
icon={<School size={24} />}
|
||||
value={1305}
|
||||
fromColor="from-[#E6F9FF]"
|
||||
toColor=""
|
||||
/>
|
||||
<StatsCard
|
||||
title="Jumlah Perusahaan"
|
||||
icon={<Building size={24} />}
|
||||
value={1305}
|
||||
fromColor="from-[#F7E9FF]"
|
||||
toColor=""
|
||||
/>
|
||||
<StatsCard
|
||||
title="Jumlah Verifikator"
|
||||
icon={<UsersRound size={24} />}
|
||||
value={1305}
|
||||
fromColor="from-[#F7E9FF]"
|
||||
toColor=""
|
||||
/>
|
||||
<StatsCard
|
||||
title="Air Limbah"
|
||||
icon={<Waves size={24} />}
|
||||
value={1305}
|
||||
fromColor="from-[#F7E9FF]"
|
||||
toColor="#fffff"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Limbah B3"
|
||||
icon={<Skull size={24} />}
|
||||
value={1305}
|
||||
fromColor="from-[#F7E9FF]"
|
||||
toColor="#fffff"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 rounded-xl bg-muted/50 h-full" />
|
||||
|
||||
<div className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row mt-8">
|
||||
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
|
||||
<div className="font-semibold leading-none tracking-tight">
|
||||
Total Cerobong per hari ini
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Senin, 03 Feb 2025
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<button
|
||||
data-active="true"
|
||||
className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
|
||||
>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Seluruh Perusahaan
|
||||
</span>
|
||||
<span className="text-lg font-bold leading-none sm:text-3xl">
|
||||
2336
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<ChartCard />
|
||||
</div>
|
||||
|
||||
{/* <div className="flex flex-1 flex-col gap-4 h-full mt-4">
|
||||
<div>
|
||||
<h2>Total Cerobong per hari ini</h2>
|
||||
<span>Senin, 03 Feb 2025</span>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-4 items-center w-full">
|
||||
<CerobongCard
|
||||
title="Seluruh Perusahaan"
|
||||
value={1305}
|
||||
fromColor="from-[#F7E9FF]"
|
||||
toColor="#fffff"
|
||||
/>
|
||||
<CardChart />
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <div className="flex-row mt-5">
|
||||
<div className="w-1/3 gap-4 md:grid-cols-3 items-center">
|
||||
<div className="flex flex-row gap-4 h-full">
|
||||
<div className="flex flex-col">
|
||||
<h2>Total Cerobong per hari ini</h2>
|
||||
<span>Senin, 03 Feb 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2/3 gap-4 md:grid-cols-3 items-center mt-3 ">
|
||||
<CerobongCard
|
||||
title="Jumlah Perusahaan"
|
||||
value={1305}
|
||||
fromColor="from-[#F7E9FF]"
|
||||
toColor=""
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,14 +1,27 @@
|
|||
import Navbar from "@/components/Home/Navbar";
|
||||
import HeroSection from "@/components/Home/Hero";
|
||||
import Tentang from "@/components/Home/Tentang";
|
||||
import Pengumuman from "@/components/Home/Pengumuman";
|
||||
import Peraturan from "@/components/Home/Peraturan";
|
||||
import Undangan from "@/components/Home/Undangan";
|
||||
import Footer from "@/components/Home/Footer";
|
||||
import Navbar from "@/components/Partials/Navbar";
|
||||
import HeroSection from "@/components/Partials/Hero";
|
||||
import Tentang from "@/components/Partials/Tentang";
|
||||
import Pengumuman from "@/components/Partials/Pengumuman";
|
||||
import Peraturan from "@/components/Partials/Peraturan";
|
||||
import Undangan from "@/components/Partials/Undangan";
|
||||
import Footer from "@/components/Partials/Footer";
|
||||
import { Head } from "@inertiajs/react";
|
||||
import Guest from "@/layouts/guest-layout";
|
||||
import PopupModal from "@/components/Partials/PopupModal";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const [showPopup, setShowPopup] = useState(true);
|
||||
|
||||
const handleClosePopup = () => {
|
||||
setShowPopup(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showPopup && <PopupModal onClose={handleClosePopup} />}
|
||||
<Guest>
|
||||
<Head title="Home" />
|
||||
<Navbar />
|
||||
<HeroSection />
|
||||
<Tentang />
|
||||
|
|
@ -16,6 +29,7 @@ export default function Home() {
|
|||
<Peraturan />
|
||||
<Undangan />
|
||||
<Footer />
|
||||
</Guest>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -5,100 +5,90 @@ module.exports = {
|
|||
prefix: "",
|
||||
theme: {
|
||||
container: {
|
||||
center: "true",
|
||||
padding: "2rem",
|
||||
center: 'true',
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
'2xl': '1400px'
|
||||
}
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: "hsl(var(--sidebar-background))",
|
||||
foreground: "hsl(var(--sidebar-foreground))",
|
||||
primary: "hsl(var(--sidebar-primary))",
|
||||
"primary-foreground":
|
||||
"hsl(var(--sidebar-primary-foreground))",
|
||||
accent: "hsl(var(--sidebar-accent))",
|
||||
"accent-foreground":
|
||||
"hsl(var(--sidebar-accent-foreground))",
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||
foreground: 'hsl(var(--sidebar-foreground))',
|
||||
primary: 'hsl(var(--sidebar-primary))',
|
||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
||||
accent: 'hsl(var(--sidebar-accent))',
|
||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||
border: 'hsl(var(--sidebar-border))',
|
||||
ring: 'hsl(var(--sidebar-ring))'
|
||||
},
|
||||
chart: {
|
||||
'1': 'hsl(var(--chart-1))',
|
||||
'2': 'hsl(var(--chart-2))',
|
||||
'3': 'hsl(var(--chart-3))',
|
||||
'4': 'hsl(var(--chart-4))',
|
||||
'5': 'hsl(var(--chart-5))'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {
|
||||
height: "0",
|
||||
},
|
||||
to: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
to: {
|
||||
height: "0",
|
||||
},
|
||||
'fade-in': {
|
||||
'0%': {
|
||||
opacity: '0'
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
'fade-in': 'fade-in 1s ease-in-out'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Inter Tight", "sans-serif"], // Set default font
|
||||
},
|
||||
keyframes: {
|
||||
"fade-in": {
|
||||
"0%": { opacity: "0" },
|
||||
"100%": { opacity: "1" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"fade-in": "fade-in 1s ease-in-out",
|
||||
},
|
||||
},
|
||||
sans: [
|
||||
'Inter Tight',
|
||||
'sans-serif'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue