svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+ className
+ )}
+ {...props} />
+ );
+}
+
+function AlertDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function AlertAction({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/frontend/src/components/ui/badge.jsx b/frontend/src/components/ui/badge.jsx
index deae51c..6a07934 100644
--- a/frontend/src/components/ui/badge.jsx
+++ b/frontend/src/components/ui/badge.jsx
@@ -1,20 +1,24 @@
import * as React from "react"
import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
- "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
{
variants: {
variant: {
- default:
- "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary:
- "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
- "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
- outline: "text-foreground",
+ "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+ outline:
+ "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+ ghost:
+ "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+ link: "text-primary underline-offset-4 hover:underline",
},
},
defaultVariants: {
@@ -25,10 +29,19 @@ const badgeVariants = cva(
function Badge({
className,
- variant,
+ variant = "default",
+ asChild = false,
...props
}) {
- return (
+ );
}
export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/bg-pattern.jsx b/frontend/src/components/ui/bg-pattern.jsx
deleted file mode 100644
index dba4271..0000000
--- a/frontend/src/components/ui/bg-pattern.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { cn } from '../../lib/utils';
-
-const maskClasses = {
- 'fade-edges': '[mask-image:radial-gradient(ellipse_at_center,var(--color-background),transparent)]',
- 'fade-center': '[mask-image:radial-gradient(ellipse_at_center,transparent,var(--color-background))]',
- 'fade-top': '[mask-image:linear-gradient(to_bottom,transparent,var(--color-background))]',
- 'fade-bottom': '[mask-image:linear-gradient(to_bottom,var(--color-background),transparent)]',
- 'fade-left': '[mask-image:linear-gradient(to_right,transparent,var(--color-background))]',
- 'fade-right': '[mask-image:linear-gradient(to_right,var(--color-background),transparent)]',
- 'fade-x': '[mask-image:linear-gradient(to_right,transparent,var(--color-background),transparent)]',
- 'fade-y': '[mask-image:linear-gradient(to_bottom,transparent,var(--color-background),transparent)]',
- none: '',
-};
-
-function geBgImage(variant, fill, size) {
- switch (variant) {
- case 'dots':
- return `radial-gradient(${fill} 1px, transparent 1px)`;
- case 'grid':
- return `linear-gradient(to right, ${fill} 1px, transparent 1px), linear-gradient(to bottom, ${fill} 1px, transparent 1px)`;
- case 'diagonal-stripes':
- return `repeating-linear-gradient(45deg, ${fill}, ${fill} 1px, transparent 1px, transparent ${size}px)`;
- case 'horizontal-lines':
- return `linear-gradient(to bottom, ${fill} 1px, transparent 1px)`;
- case 'vertical-lines':
- return `linear-gradient(to right, ${fill} 1px, transparent 1px)`;
- case 'checkerboard':
- return `linear-gradient(45deg, ${fill} 25%, transparent 25%), linear-gradient(-45deg, ${fill} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${fill} 75%), linear-gradient(-45deg, transparent 75%, ${fill} 75%)`;
- default:
- return undefined;
- }
-}
-
-const BGPattern = ({
- variant = 'grid',
- mask = 'none',
- size = 24,
- fill = '#252525',
- className,
- style,
- ...props
-}) => {
- const bgSize = `${size}px ${size}px`;
- const backgroundImage = geBgImage(variant, fill, size);
-
- return (
-
- );
-};
-
-BGPattern.displayName = 'BGPattern';
-export { BGPattern };
diff --git a/frontend/src/components/ui/breadcrumb.jsx b/frontend/src/components/ui/breadcrumb.jsx
new file mode 100644
index 0000000..cb11cfd
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb.jsx
@@ -0,0 +1,121 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbList({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbItem({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbLink({
+ asChild,
+ className,
+ ...props
+}) {
+ const Comp = asChild ? Slot.Root : "a"
+
+ return (
+
+ );
+}
+
+function BreadcrumbPage({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbSeparator({
+ children,
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbEllipsis({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+}
diff --git a/frontend/src/components/ui/button.jsx b/frontend/src/components/ui/button.jsx
index 294af54..32af78d 100644
--- a/frontend/src/components/ui/button.jsx
+++ b/frontend/src/components/ui/button.jsx
@@ -1,29 +1,37 @@
import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
- "inline-flex items-center justify-center 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",
+ "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
- "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
+ "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+ ghost:
+ "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+ destructive:
+ "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+ lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ icon: "size-8",
+ "icon-xs":
+ "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+ "icon-sm":
+ "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+ "icon-lg": "size-9",
},
},
defaultVariants: {
@@ -33,15 +41,23 @@ const buttonVariants = cva(
}
)
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}) {
+ const Comp = asChild ? Slot.Root : "button"
+
return (
);
-})
-Button.displayName = "Button"
+}
export { Button, buttonVariants }
diff --git a/frontend/src/components/ui/card.jsx b/frontend/src/components/ui/card.jsx
index dd79b51..6c66656 100644
--- a/frontend/src/components/ui/card.jsx
+++ b/frontend/src/components/ui/card.jsx
@@ -2,49 +2,113 @@ import * as React from "react"
import { cn } from "@/lib/utils"
-const Card = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-Card.displayName = "Card"
+function Card({
+ className,
+ size = "default",
+ ...props
+}) {
+ return (
+
img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props} />
+ );
+}
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-CardHeader.displayName = "CardHeader"
+function CardHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-CardTitle.displayName = "CardTitle"
+function CardTitle({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-CardDescription.displayName = "CardDescription"
+function CardDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-CardContent.displayName = "CardContent"
+function CardAction({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-CardFooter.displayName = "CardFooter"
+function CardContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+function CardFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/frontend/src/components/ui/checkbox.jsx b/frontend/src/components/ui/checkbox.jsx
index dc639bc..0357339 100644
--- a/frontend/src/components/ui/checkbox.jsx
+++ b/frontend/src/components/ui/checkbox.jsx
@@ -1,24 +1,30 @@
"use client"
import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
-
-
-
-
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+function Checkbox({
+ className,
+ ...props
+}) {
+ return (
+
+
+
+
+ );
+}
export { Checkbox }
diff --git a/frontend/src/components/ui/cpu-architecture.jsx b/frontend/src/components/ui/cpu-architecture.jsx
deleted file mode 100644
index 69f077a..0000000
--- a/frontend/src/components/ui/cpu-architecture.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { cn } from "@/lib/utils";
-import React from "react";
-
-const CpuArchitecture = ({
- className,
- width = "100%",
- height = "100%",
- text = "R-IT",
- showCpuConnections = true,
- animateText = true,
-}) => {
- return (
-
-
- {/* CPU Box */}
-
- {/* Cpu connections (Pins) */}
- {showCpuConnections && (
-
- {/* Top pins */}
-
- )}
- {/* Main CPU Rectangle */}
-
- {text}
-
-
-
-
-
-
- {/* Cpu connection gradient */}
-
-
- {/* Add CPU Text Gradient */}
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export { CpuArchitecture };
diff --git a/frontend/src/components/ui/dialog.jsx b/frontend/src/components/ui/dialog.jsx
deleted file mode 100644
index c65432e..0000000
--- a/frontend/src/components/ui/dialog.jsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
-
-function Dialog({
- ...props
-}) {
- return
;
-}
-
-function DialogTrigger({
- ...props
-}) {
- return
;
-}
-
-function DialogPortal({
- ...props
-}) {
- return
;
-}
-
-function DialogClose({
- ...props
-}) {
- return
;
-}
-
-function DialogOverlay({
- className,
- ...props
-}) {
- return (
-
- );
-}
-
-function DialogContent({
- className,
- children,
- showCloseButton = true,
- ...props
-}) {
- return (
-
-
- {children}
- {showCloseButton && (
-
-
- Close
-
-
- )}
-
-
- );
-}
-
-function DialogHeader({
- className,
- ...props
-}) {
- return (
-
- );
-}
-
-function DialogFooter({
- className,
- showCloseButton = false,
- children,
- ...props
-}) {
- return (
-
- {children}
- {showCloseButton && (
-
- Close
-
- )}
-
- );
-}
-
-function DialogTitle({
- className,
- ...props
-}) {
- return (
-
- );
-}
-
-function DialogDescription({
- className,
- ...props
-}) {
- return (
-
- );
-}
-
-export {
- Dialog,
- DialogClose,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogOverlay,
- DialogPortal,
- DialogTitle,
- DialogTrigger,
-}
diff --git a/frontend/src/components/ui/dropdown-menu.jsx b/frontend/src/components/ui/dropdown-menu.jsx
new file mode 100644
index 0000000..5515abd
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu.jsx
@@ -0,0 +1,235 @@
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+ ...props
+}) {
+ return
;
+}
+
+function DropdownMenuPortal({
+ ...props
+}) {
+ return (
);
+}
+
+function DropdownMenuTrigger({
+ ...props
+}) {
+ return (
);
+}
+
+function DropdownMenuContent({
+ className,
+ align = "start",
+ sideOffset = 4,
+ ...props
+}) {
+ return (
+
+
+ );
+}
+
+function DropdownMenuGroup({
+ ...props
+}) {
+ return (
);
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ inset,
+ ...props
+}) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}) {
+ return (
);
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ inset,
+ ...props
+}) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuSub({
+ ...props
+}) {
+ return
;
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+}
diff --git a/frontend/src/components/ui/input.jsx b/frontend/src/components/ui/input.jsx
index e69f1c7..ae5b90a 100644
--- a/frontend/src/components/ui/input.jsx
+++ b/frontend/src/components/ui/input.jsx
@@ -2,18 +2,21 @@ import * as React from "react"
import { cn } from "@/lib/utils"
-const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+function Input({
+ className,
+ type,
+ ...props
+}) {
return (
);
-})
-Input.displayName = "Input"
+}
export { Input }
diff --git a/frontend/src/components/ui/label.jsx b/frontend/src/components/ui/label.jsx
index a1f4099..056846f 100644
--- a/frontend/src/components/ui/label.jsx
+++ b/frontend/src/components/ui/label.jsx
@@ -1,16 +1,21 @@
import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
-const labelVariants = cva(
- "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-Label.displayName = LabelPrimitive.Root.displayName
+function Label({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
export { Label }
diff --git a/frontend/src/components/ui/navigation-menu.jsx b/frontend/src/components/ui/navigation-menu.jsx
deleted file mode 100644
index 55ddeb8..0000000
--- a/frontend/src/components/ui/navigation-menu.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from "react"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (
-
- {children}
-
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const navigationMenuTriggerStyle = cva(
- "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
-
-const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
-
- {children}{" "}
-
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (
-
-
-))
-NavigationMenuViewport.displayName =
- NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (
-
-
-
-))
-NavigationMenuIndicator.displayName =
- NavigationMenuPrimitive.Indicator.displayName
-
-export {
- navigationMenuTriggerStyle,
- NavigationMenu,
- NavigationMenuList,
- NavigationMenuItem,
- NavigationMenuContent,
- NavigationMenuTrigger,
- NavigationMenuLink,
- NavigationMenuIndicator,
- NavigationMenuViewport,
-}
diff --git a/frontend/src/components/ui/popover.jsx b/frontend/src/components/ui/popover.jsx
deleted file mode 100644
index 98b3c20..0000000
--- a/frontend/src/components/ui/popover.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-
-
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }
diff --git a/frontend/src/components/ui/progress.jsx b/frontend/src/components/ui/progress.jsx
new file mode 100644
index 0000000..ca6bc6d
--- /dev/null
+++ b/frontend/src/components/ui/progress.jsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+ className,
+ value,
+ ...props
+}) {
+ return (
+
+
+ );
+}
+
+export { Progress }
diff --git a/frontend/src/components/ui/radio-group.jsx b/frontend/src/components/ui/radio-group.jsx
deleted file mode 100644
index 84a8cdc..0000000
--- a/frontend/src/components/ui/radio-group.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
- return (
);
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
- return (
-
-
-
-
- );
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }
diff --git a/frontend/src/components/ui/select.jsx b/frontend/src/components/ui/select.jsx
deleted file mode 100644
index 40b28e2..0000000
--- a/frontend/src/components/ui/select.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
-
span]:line-clamp-1",
- className
- )}
- {...props}>
- {children}
-
-
-
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
-
-
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
-
-
-))
-SelectScrollDownButton.displayName =
- SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
-
-
-
- {children}
-
-
-
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
-
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
- Select,
- SelectGroup,
- SelectValue,
- SelectTrigger,
- SelectContent,
- SelectLabel,
- SelectItem,
- SelectSeparator,
- SelectScrollUpButton,
- SelectScrollDownButton,
-}
diff --git a/frontend/src/components/ui/separator.jsx b/frontend/src/components/ui/separator.jsx
index c40b888..3116fdd 100644
--- a/frontend/src/components/ui/separator.jsx
+++ b/frontend/src/components/ui/separator.jsx
@@ -1,23 +1,25 @@
import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { Separator as SeparatorPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
-const Separator = React.forwardRef((
- { className, orientation = "horizontal", decorative = true, ...props },
- ref
-) => (
-
-))
-Separator.displayName = SeparatorPrimitive.Root.displayName
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}) {
+ return (
+
+ );
+}
export { Separator }
diff --git a/frontend/src/components/ui/sheet.jsx b/frontend/src/components/ui/sheet.jsx
new file mode 100644
index 0000000..3816b75
--- /dev/null
+++ b/frontend/src/components/ui/sheet.jsx
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({
+ ...props
+}) {
+ return
;
+}
+
+function SheetTrigger({
+ ...props
+}) {
+ return
;
+}
+
+function SheetClose({
+ ...props
+}) {
+ return
;
+}
+
+function SheetPortal({
+ ...props
+}) {
+ return
;
+}
+
+function SheetOverlay({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ showCloseButton = true,
+ ...props
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+
+ )}
+
+
+ );
+}
+
+function SheetHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetTitle({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+}
diff --git a/frontend/src/components/ui/sidebar.jsx b/frontend/src/components/ui/sidebar.jsx
new file mode 100644
index 0000000..3c0e32d
--- /dev/null
+++ b/frontend/src/components/ui/sidebar.jsx
@@ -0,0 +1,657 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+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,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+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 SidebarContext = React.createContext(null)
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext)
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.")
+ }
+
+ return context
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}) {
+ 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 setOpen = React.useCallback((value) => {
+ const openState = typeof value === "function" ? value(open) : value
+ if (setOpenProp) {
+ setOpenProp(openState)
+ } else {
+ _setOpen(openState)
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; 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])
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event) => {
+ if (
+ event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+ (event.metaKey || event.ctrlKey)
+ ) {
+ event.preventDefault()
+ 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 contextValue = React.useMemo(() => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar])
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ dir,
+ ...props
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+ if (collapsible === "none") {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+ {children}
+
+
+ );
+ }
+
+ return (
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+
+ );
+}
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}) {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+
{
+ onClick?.(event)
+ toggleSidebar()
+ }}
+ {...props}>
+ Toggle Sidebar
+
+ );
+}
+
+function SidebarRail({
+ className,
+ ...props
+}) {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+
+ );
+}
+
+function SidebarInset({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarInput({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarSeparator({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarGroup({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarGroupLabel({
+ className,
+ asChild = false,
+ ...props
+}) {
+ const Comp = asChild ? Slot.Root : "div"
+
+ return (
+
svg]:size-4 [&>svg]:shrink-0",
+ className
+ )}
+ {...props} />
+ );
+}
+
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ className
+ )}
+ {...props} />
+ );
+}
+
+function SidebarGroupContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarMenu({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarMenuItem({
+ className,
+ ...props
+}) {
+ return (
+
+ {button}
+
+ );
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ showOnHover &&
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+ className
+ )}
+ {...props} />
+ );
+}
+
+function SidebarMenuBadge({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}) {
+ // Random width between 50 to 90%.
+ const [width] = React.useState(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ })
+
+ return (
+
+ {showIcon && (
+
+ );
+}
+
+function SidebarMenuSub({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubItem({
+ className,
+ ...props
+}) {
+ return (
+ span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+ className
+ )}
+ {...props} />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+}
diff --git a/frontend/src/components/ui/skeleton.jsx b/frontend/src/components/ui/skeleton.jsx
new file mode 100644
index 0000000..38345a7
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.jsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export { Skeleton }
diff --git a/frontend/src/components/ui/sonner.jsx b/frontend/src/components/ui/sonner.jsx
new file mode 100644
index 0000000..ec11e18
--- /dev/null
+++ b/frontend/src/components/ui/sonner.jsx
@@ -0,0 +1,48 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner";
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({
+ ...props
+}) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/frontend/src/hooks/use-mobile.js b/frontend/src/hooks/use-mobile.js
new file mode 100644
index 0000000..9c47a0d
--- /dev/null
+++ b/frontend/src/hooks/use-mobile.js
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined)
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ }
+ mql.addEventListener("change", onChange)
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ return () => mql.removeEventListener("change", onChange);
+ }, [])
+
+ return !!isMobile
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 681f3a5..83003af 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,140 +5,195 @@
@custom-variant dark (&:is(.dark *));
-@theme {
- --color-brand-light: #60a5fa; /* Blue 400 */
- --color-brand: #3b82f6; /* Blue 500 */
- --color-brand-dark: #2563eb; /* Blue 600 */
- --color-background: #09090b; /* Zinc 950 (Almost Black) */
- --color-surface: #18181b; /* Zinc 900 */
- --color-surface-hover: #27272a;/* Zinc 800 */
- --color-text-main: #f8fafc; /* Slate 50 */
- --color-text-muted: #a1a1aa; /* Zinc 400 */
-}
-
-@layer base {
- body {
- background-color: var(--color-background);
- color: var(--color-text-main);
- font-family: 'Inter', system-ui, -apple-system, sans-serif;
- @apply bg-background text-foreground;
- }
- * {
- @apply border-border outline-ring/50;
- }
- html {
- @apply font-sans;
- }
-}
-
@theme inline {
- --font-heading: var(--font-sans);
- --font-sans: 'Geist Variable', sans-serif;
- --color-sidebar-ring: var(--sidebar-ring);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar: var(--sidebar);
- --color-chart-5: var(--chart-5);
- --color-chart-4: var(--chart-4);
- --color-chart-3: var(--chart-3);
- --color-chart-2: var(--chart-2);
- --color-chart-1: var(--chart-1);
- --color-ring: var(--ring);
- --color-input: var(--input);
- --color-border: var(--border);
- --color-destructive: var(--destructive);
- --color-accent-foreground: var(--accent-foreground);
- --color-accent: var(--accent);
- --color-muted-foreground: var(--muted-foreground);
- --color-muted: var(--muted);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-secondary: var(--secondary);
- --color-primary-foreground: var(--primary-foreground);
- --color-primary: var(--primary);
- --color-popover-foreground: var(--popover-foreground);
- --color-popover: var(--popover);
- --color-card-foreground: var(--card-foreground);
- --color-card: var(--card);
- --color-foreground: var(--foreground);
- --color-background: var(--background);
- --radius-sm: calc(var(--radius) * 0.6);
- --radius-md: calc(var(--radius) * 0.8);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) * 1.4);
- --radius-2xl: calc(var(--radius) * 1.8);
- --radius-3xl: calc(var(--radius) * 2.2);
- --radius-4xl: calc(var(--radius) * 2.6);
+ --font-heading: var(--font-sans);
+ --font-sans: Inter, sans-serif;
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --color-foreground: var(--foreground);
+ --color-background: var(--background);
+ --radius-sm: calc(var(--radius) * 0.6);
+ --radius-md: calc(var(--radius) * 0.8);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) * 1.4);
+ --radius-2xl: calc(var(--radius) * 1.8);
+ --radius-3xl: calc(var(--radius) * 2.2);
+ --radius-4xl: calc(var(--radius) * 2.6);
+ --font-mono: JetBrains Mono, monospace;
+ --font-serif: Source Serif 4, serif;
+ --radius: 1.15rem;
+ --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+ --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+ --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+ --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+ --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+ --tracking-normal: var(--tracking-normal);
+ --shadow-2xl: var(--shadow-2xl);
+ --shadow-xl: var(--shadow-xl);
+ --shadow-lg: var(--shadow-lg);
+ --shadow-md: var(--shadow-md);
+ --shadow: var(--shadow);
+ --shadow-sm: var(--shadow-sm);
+ --shadow-xs: var(--shadow-xs);
+ --shadow-2xs: var(--shadow-2xs);
+ --spacing: var(--spacing);
+ --letter-spacing: var(--letter-spacing);
+ --shadow-offset-y: var(--shadow-offset-y);
+ --shadow-offset-x: var(--shadow-offset-x);
+ --shadow-spread: var(--shadow-spread);
+ --shadow-blur: var(--shadow-blur);
+ --shadow-opacity: var(--shadow-opacity);
+ --color-shadow-color: var(--shadow-color);
+ --color-destructive-foreground: var(--destructive-foreground);
}
:root {
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.145 0 0);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.145 0 0);
- --primary: oklch(0.205 0 0);
- --primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(0.97 0 0);
- --secondary-foreground: oklch(0.205 0 0);
- --muted: oklch(0.97 0 0);
- --muted-foreground: oklch(0.556 0 0);
- --accent: oklch(0.97 0 0);
- --accent-foreground: oklch(0.205 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.922 0 0);
- --input: oklch(0.922 0 0);
- --ring: oklch(0.708 0 0);
- --chart-1: oklch(0.87 0 0);
- --chart-2: oklch(0.556 0 0);
- --chart-3: oklch(0.439 0 0);
- --chart-4: oklch(0.371 0 0);
- --chart-5: oklch(0.269 0 0);
- --radius: 0.625rem;
- --sidebar: oklch(0.985 0 0);
- --sidebar-foreground: oklch(0.145 0 0);
- --sidebar-primary: oklch(0.205 0 0);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.97 0 0);
- --sidebar-accent-foreground: oklch(0.205 0 0);
- --sidebar-border: oklch(0.922 0 0);
- --sidebar-ring: oklch(0.708 0 0);
+ --background: oklch(1.0000 0 0);
+ --foreground: oklch(0.3211 0 0);
+ --card: oklch(1.0000 0 0);
+ --card-foreground: oklch(0.3211 0 0);
+ --popover: oklch(1.0000 0 0);
+ --popover-foreground: oklch(0.3211 0 0);
+ --primary: oklch(0.6225 0.2041 259.9027);
+ --primary-foreground: oklch(1.0000 0 0);
+ --secondary: oklch(0.9665 0.0045 258.3247);
+ --secondary-foreground: oklch(0.4419 0.0375 257.2811);
+ --muted: oklch(0.9846 0.0017 247.8389);
+ --muted-foreground: oklch(0.5471 0.0321 263.2921);
+ --accent: oklch(0.9510 0.0267 237.5723);
+ --accent-foreground: oklch(0.3742 0.1844 263.9420);
+ --destructive: oklch(0.6496 0.2362 26.9032);
+ --border: oklch(0.9271 0.0075 260.7315);
+ --input: oklch(0.9271 0.0075 260.7315);
+ --ring: oklch(0.6225 0.2041 259.9027);
+ --radius: 1.15rem;
+ --sidebar: oklch(0.9846 0.0017 247.8389);
+ --sidebar-foreground: oklch(0.3211 0 0);
+ --sidebar-primary: oklch(0.6225 0.2041 259.9027);
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
+ --sidebar-accent: oklch(0.9510 0.0267 237.5723);
+ --sidebar-accent-foreground: oklch(0.3742 0.1844 263.9420);
+ --sidebar-border: oklch(0.9271 0.0075 260.7315);
+ --sidebar-ring: oklch(0.6225 0.2041 259.9027);
+ --destructive-foreground: oklch(1.0000 0 0);
+ --chart-1: oklch(0.6225 0.2041 259.9027);
+ --chart-2: oklch(0.5469 0.2507 262.8085);
+ --chart-3: oklch(0.4902 0.2693 263.7106);
+ --chart-4: oklch(0.4234 0.2370 263.9162);
+ --chart-5: oklch(0.3742 0.1844 263.9420);
+ --font-sans: Inter, sans-serif;
+ --font-serif: Source Serif 4, serif;
+ --font-mono: JetBrains Mono, monospace;
+ --shadow-color: oklch(0 0 0);
+ --shadow-opacity: 0.1;
+ --shadow-blur: 3px;
+ --shadow-spread: 0px;
+ --shadow-offset-x: 0;
+ --shadow-offset-y: 1px;
+ --letter-spacing: 0em;
+ --spacing: 0.25rem;
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+ --tracking-normal: 0em;
}
.dark {
- --background: oklch(0.145 0 0);
- --foreground: oklch(0.985 0 0);
- --card: oklch(0.205 0 0);
- --card-foreground: oklch(0.985 0 0);
- --popover: oklch(0.205 0 0);
- --popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.922 0 0);
- --primary-foreground: oklch(0.205 0 0);
- --secondary: oklch(0.269 0 0);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.269 0 0);
- --muted-foreground: oklch(0.708 0 0);
- --accent: oklch(0.269 0 0);
- --accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.556 0 0);
- --chart-1: oklch(0.87 0 0);
- --chart-2: oklch(0.556 0 0);
- --chart-3: oklch(0.439 0 0);
- --chart-4: oklch(0.371 0 0);
- --chart-5: oklch(0.269 0 0);
- --sidebar: oklch(0.205 0 0);
- --sidebar-foreground: oklch(0.985 0 0);
- --sidebar-primary: oklch(0.488 0.243 264.376);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.269 0 0);
- --sidebar-accent-foreground: oklch(0.985 0 0);
- --sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.556 0 0);
+ --background: oklch(0.2046 0 0);
+ --foreground: oklch(0.9219 0 0);
+ --card: oklch(0.2686 0 0);
+ --card-foreground: oklch(0.9219 0 0);
+ --popover: oklch(0.2686 0 0);
+ --popover-foreground: oklch(0.9219 0 0);
+ --primary: oklch(0.6225 0.2041 259.9027);
+ --primary-foreground: oklch(1.0000 0 0);
+ --secondary: oklch(0.2686 0 0);
+ --secondary-foreground: oklch(0.9219 0 0);
+ --muted: oklch(0.2393 0 0);
+ --muted-foreground: oklch(0.7155 0 0);
+ --accent: oklch(0.5802 0.1915 259.7416);
+ --accent-foreground: oklch(0.8820 0.0588 253.9688);
+ --destructive: oklch(0.6496 0.2362 26.9032);
+ --destructive-foreground: oklch(1.0000 0 0);
+ --border: oklch(0.3715 0 0);
+ --input: oklch(0.3715 0 0);
+ --ring: oklch(0.6225 0.2041 259.9027);
+ --sidebar: oklch(0.2046 0 0);
+ --sidebar-foreground: oklch(0.9219 0 0);
+ --sidebar-primary: oklch(0.6225 0.2041 259.9027);
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
+ --sidebar-accent: oklch(0.6225 0.2041 259.9027);
+ --sidebar-accent-foreground: oklch(0.8820 0.0588 253.9688);
+ --sidebar-border: oklch(0.3715 0 0);
+ --sidebar-ring: oklch(0.6225 0.2041 259.9027);
+ --chart-1: oklch(0.7122 0.1526 254.9868);
+ --chart-2: oklch(0.6225 0.2041 259.9027);
+ --chart-3: oklch(0.5739 0.2334 262.7735);
+ --chart-4: oklch(0.6225 0.2041 259.9027);
+ --chart-5: oklch(0.6225 0.2041 259.9027);
+ --radius: 1.15rem;
+ --font-sans: Inter, sans-serif;
+ --font-serif: Source Serif 4, serif;
+ --font-mono: JetBrains Mono, monospace;
+ --shadow-color: oklch(0 0 0);
+ --shadow-opacity: 0.1;
+ --shadow-blur: 3px;
+ --shadow-spread: 0px;
+ --shadow-offset-x: 0;
+ --shadow-offset-y: 1px;
+ --letter-spacing: 0em;
+ --spacing: 0.25rem;
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ letter-spacing: var(--tracking-normal);
+ }
+ html {
+ @apply font-sans;
+ }
}
\ No newline at end of file
diff --git a/frontend/src/views/admin/DashboardPage.jsx b/frontend/src/views/admin/DashboardPage.jsx
new file mode 100644
index 0000000..a03e83d
--- /dev/null
+++ b/frontend/src/views/admin/DashboardPage.jsx
@@ -0,0 +1,178 @@
+import { useState, useEffect } from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { AlertCircle, ShieldAlert, PackageCheck, Wrench, ArrowUpRight } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export default function DashboardPage() {
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setLoading(false);
+ }, 1000); // Retraso de 1 segundo para ver el skeleton de carga
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (loading) {
+ return (
+
+
+
+
+ {/* Grid de Skeletons para tarjetas */}
+
+
+
+
+
+
+ {/* Cabecera interna */}
+
+
+ Panel de Control
+
+
+ Resumen operativo del taller y control de stock de insumos técnicos.
+
+
+
+ {/* Grid de Estadísticas Rápidas mediante Cards de shadcn/ui */}
+
+
+ {/* Card 1: Órdenes Activas */}
+
+
+ Órdenes Activas
+
+
+ 12
+ 4 en diagnóstico, 8 en reparación
+
+
+
+ {/* Card 2: Entregados este Mes */}
+
+
+ Entregas del Mes
+
+
+ 45
+ +15% respecto al mes anterior
+
+
+
+ {/* Card 3: Repuestos en Stock */}
+
+
+ Items en Inventario
+
+
+ 84
+ Distribuidos en 14 categorías
+
+
+
+ {/* Card 4: Alertas de Stock */}
+
+
+ Alertas de Stock
+
+
+ 2
+ Requieren compra urgente
+
+
+
+
+
+
+
+ {/* Tabla de Órdenes Recientes mediante Card de shadcn */}
+
+
+
+ Ingresos Recientes
+
+ Actualizado hace 5m
+
+
+
+ Aquí se desplegará el listado interactivo con filtros rápidos de diagnóstico. Ya podés probar la pestaña de Órdenes para dar de alta dispositivos.
+
+
+
+
+
+
+ {/* Alertas de Stock Detalladas mediante Alert de shadcn/ui */}
+
+
+
+ Críticos de Inventario
+
+
+
+
+
+
+
+ Pasta Térmica Arctic MX-6
+ Bajo Stock
+
+
+ Mínimo requerido: 5 jeringas | Actual en stock: 2 jeringas.
+
+
+
+
+
+
+ Alcohol Isopropílico 1L
+ Bajo Stock
+
+
+ Mínimo requerido: 3 botellas | Actual en stock: 1 botella.
+
+
+
+
+
+
+
+
+
+
+
+ Inventario de Insumos
+
+
+ Control de stock y alertas de reposición de componentes técnicos.
+
+
+
+
+
+
+
+
Módulo de Inventario en Desarrollo
+
+ En la siguiente iteración de la Fase I implementaremos el control cuantitativo de insumos, auditoría automática de repuestos y la simulación de alerta de bajo suministro.
+
+
toast.info("Módulo en desarrollo.")}>
+ Simular Escaneo de Stock
+
+
+
+
+
+ {/* Background Glow */}
+
+
+
+
+ {/* Título y descripción */}
+
+
+ Acceso al Panel Técnico
+
+
+ Ingresa tus credenciales autorizadas para gestionar las órdenes y el inventario.
+
+
+
+ {/* Formulario */}
+
+
+
+ navigate("/")}
+ className="text-xs text-muted-foreground hover:text-foreground font-medium transition-colors cursor-pointer select-none"
+ >
+ ← Volver a la consulta pública
+
+
+
+
+
+
+
+ {statusLabel}
+
+
+
+ handleStatusChange(orderId, "ingresado")}
+ className="text-xs font-semibold rounded-md py-1.5 px-2.5 transition-colors cursor-pointer select-none border bg-sky-500/10 text-sky-400 border-sky-500/15 hover:bg-sky-500/20 hover:text-sky-350 focus:bg-sky-500/20 focus:text-sky-350"
+ >
+ Ingresado
+
+ handleStatusChange(orderId, "diagnostico")}
+ className="text-xs font-semibold rounded-md py-1.5 px-2.5 transition-colors cursor-pointer select-none border bg-amber-500/10 text-amber-400 border-amber-500/15 hover:bg-amber-500/20 hover:text-amber-350 focus:bg-amber-500/20 focus:text-amber-350"
+ >
+ En Diagnóstico
+
+ handleStatusChange(orderId, "presupuestado")}
+ className="text-xs font-semibold rounded-md py-1.5 px-2.5 transition-colors cursor-pointer select-none border bg-purple-500/10 text-purple-400 border-purple-500/15 hover:bg-purple-500/20 hover:text-purple-350 focus:bg-purple-500/20 focus:text-purple-350"
+ >
+ Presupuestado
+
+ handleStatusChange(orderId, "reparacion")}
+ className="text-xs font-semibold rounded-md py-1.5 px-2.5 transition-colors cursor-pointer select-none border bg-blue-500/10 text-blue-400 border-blue-500/15 hover:bg-blue-500/20 hover:text-blue-350 focus:bg-blue-500/20 focus:text-blue-350"
+ >
+ En Reparación
+
+ handleStatusChange(orderId, "listo")}
+ className="text-xs font-semibold rounded-md py-1.5 px-2.5 transition-colors cursor-pointer select-none border bg-emerald-500/10 text-emerald-400 border-emerald-500/15 hover:bg-emerald-500/20 hover:text-emerald-350 focus:bg-emerald-500/20 focus:text-emerald-350"
+ >
+ Listo
+
+ handleStatusChange(orderId, "entregado")}
+ className="text-xs font-semibold rounded-md py-1.5 px-2.5 transition-colors cursor-pointer select-none border bg-zinc-800 text-zinc-400 border-zinc-700/60 hover:bg-zinc-800/80 hover:text-zinc-350 focus:bg-zinc-800/80 focus:text-zinc-350"
+ >
+ Entregado
+
+
+
+ );
+ };
+
+ return (
+
+ {/* Cabecera interna */}
+
+
+ Órdenes de Servicio
+
+
+ Alta de dispositivos ingresados y control de trazabilidad técnica del taller.
+
+
+
+ {/* Selector de Pestañas (Tabs) estilo shadcn */}
+
+ setActiveTab("registro")}
+ className={`pb-3 text-sm font-semibold tracking-wide border-b-2 transition-all cursor-pointer relative ${
+ activeTab === "registro"
+ ? "border-primary text-foreground"
+ : "border-transparent text-muted-foreground hover:text-foreground"
+ }`}
+ >
+ Registrar Ingreso
+
+ setActiveTab("control")}
+ className={`pb-3 text-sm font-semibold tracking-wide border-b-2 transition-all cursor-pointer relative ${
+ activeTab === "control"
+ ? "border-primary text-foreground"
+ : "border-transparent text-muted-foreground hover:text-foreground"
+ }`}
+ >
+ Control de Trazabilidad y Estados
+
+
+
+
+ {activeTab === "registro" ? (
+
+ {/* Formulario de Ingreso de Dispositivo (Card shadcn) */}
+
+
+
+
+
+ Registrá los datos del cliente y el dispositivo a reparar.
+
+