From 96b7d7eac20e579052fab15bd9c031334224c324 Mon Sep 17 00:00:00 2001
From: nutcas3 <mauricee423@gmail.com>
Date: Sun, 19 Apr 2026 04:39:19 +0300
Subject: [PATCH] feat: Add web dashboard UI components with Alert, Input,
 Label, Select, and loading/error state utilities

- Add alert.tsx with Alert, AlertTitle, AlertDescription, AlertAction components using class-variance-authority with default/destructive variants
- Add error-alert.tsx with ErrorAlert component featuring AlertCircle icon, retry/dismiss actions, and customizable text
- Add input.tsx with Input component supporting file uploads, focus-visible states, aria-invalid styling, and dark mode
- Add label.tsx with Label component
---
 .../web-dashboard/src/components/ui/alert.tsx |  76 +++++++
 .../src/components/ui/error-alert.tsx         |  55 +++++
 .../web-dashboard/src/components/ui/input.tsx |  19 ++
 .../web-dashboard/src/components/ui/label.tsx |  24 +++
 .../src/components/ui/loading-state.tsx       |  98 +++++++++
 .../src/components/ui/select.tsx              | 192 ++++++++++++++++++
 .../src/components/ui/switch.tsx              |  33 +++
 .../src/components/ui/textarea.tsx            |  18 ++
 .../src/components/ui/websocket-status.tsx    |  46 +++++
 9 files changed, 561 insertions(+)
 create mode 100644 apps/web-dashboard/src/components/ui/alert.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/error-alert.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/input.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/label.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/loading-state.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/select.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/switch.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/textarea.tsx
 create mode 100644 apps/web-dashboard/src/components/ui/websocket-status.tsx

diff --git a/apps/web-dashboard/src/components/ui/alert.tsx b/apps/web-dashboard/src/components/ui/alert.tsx
new file mode 100644
index 0000000..2d8ecac
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/apps/web-dashboard/src/components/ui/error-alert.tsx b/apps/web-dashboard/src/components/ui/error-alert.tsx
new file mode 100644
index 0000000..84b3f63
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/error-alert.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { AlertCircle, RefreshCw, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+interface ErrorAlertProps {
+  error: string | null;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  retryText?: string;
+  className?: string;
+}
+
+export function ErrorAlert({ 
+  error, 
+  onRetry, 
+  onDismiss, 
+  retryText = "Retry",
+  className = ""
+}: ErrorAlertProps) {
+  if (!error) return null;
+
+  return (
+    <Alert variant="destructive" className={`relative ${className}`}>
+      <AlertCircle className="h-4 w-4" />
+      <AlertDescription className="flex items-center justify-between">
+        <span className="flex-1">{error}</span>
+        <div className="flex items-center gap-2 ml-4">
+          {onRetry && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRetry}
+              className="h-6 px-2 text-xs"
+            >
+              <RefreshCw className="h-3 w-3 mr-1" />
+              {retryText}
+            </Button>
+          )}
+          {onDismiss && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDismiss}
+              className="h-6 w-6 p-0"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}
diff --git a/apps/web-dashboard/src/components/ui/input.tsx b/apps/web-dashboard/src/components/ui/input.tsx
new file mode 100644
index 0000000..17beb1e
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/web-dashboard/src/components/ui/label.tsx b/apps/web-dashboard/src/components/ui/label.tsx
new file mode 100644
index 0000000..1ac80f7
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/web-dashboard/src/components/ui/loading-state.tsx b/apps/web-dashboard/src/components/ui/loading-state.tsx
new file mode 100644
index 0000000..d159541
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/loading-state.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { Loader2, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface LoadingStateProps {
+  loading: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  retryText?: string;
+  loadingText?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function LoadingState({ 
+  loading, 
+  error, 
+  onRetry, 
+  retryText = "Retry",
+  loadingText = "Loading...",
+  children,
+  className = ""
+}: LoadingStateProps) {
+  if (loading) {
+    return (
+      <Card className={className}>
+        <CardContent className="flex flex-col items-center justify-center p-8">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600 mb-4" />
+          <p className="text-gray-600 text-center">{loadingText}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className={className}>
+        <CardContent className="flex flex-col items-center justify-center p-8">
+          <div className="text-center">
+            <p className="text-red-600 mb-4">{error}</p>
+            {onRetry && (
+              <Button
+                variant="outline"
+                onClick={onRetry}
+                className="flex items-center gap-2"
+              >
+                <RefreshCw className="h-4 w-4" />
+                {retryText}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+interface InlineLoadingProps {
+  loading: boolean;
+  text?: string;
+  children: React.ReactNode;
+}
+
+export function InlineLoading({ loading, text = "Loading...", children }: InlineLoadingProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 text-gray-600">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span>{text}</span>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+interface ActionLoadingProps {
+  loading: boolean;
+  action?: string;
+  children: React.ReactNode;
+}
+
+export function ActionLoading({ loading, action = "processing", children }: ActionLoadingProps) {
+  if (loading) {
+    return (
+      <Button disabled className="flex items-center gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        {action}...
+      </Button>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/apps/web-dashboard/src/components/ui/select.tsx b/apps/web-dashboard/src/components/ui/select.tsx
new file mode 100644
index 0000000..d6f8fce
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/select.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/web-dashboard/src/components/ui/switch.tsx b/apps/web-dashboard/src/components/ui/switch.tsx
new file mode 100644
index 0000000..c7bf02a
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/switch.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/apps/web-dashboard/src/components/ui/textarea.tsx b/apps/web-dashboard/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..95ed1c4
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/web-dashboard/src/components/ui/websocket-status.tsx b/apps/web-dashboard/src/components/ui/websocket-status.tsx
new file mode 100644
index 0000000..8b34d2d
--- /dev/null
+++ b/apps/web-dashboard/src/components/ui/websocket-status.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { Wifi, WifiOff, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { useWebSocketConnection } from "@/hooks/use-websocket";
+
+export function WebSocketStatus() {
+  const { isConnected, reconnect, reconnectAttempts } = useWebSocketConnection();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Badge variant={isConnected ? "success" : "destructive"} className="flex items-center gap-1">
+        {isConnected ? (
+          <>
+            <Wifi className="h-3 w-3" />
+            Live
+          </>
+        ) : (
+          <>
+            <WifiOff className="h-3 w-3" />
+            Offline
+          </>
+        )}
+      </Badge>
+      
+      {!isConnected && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={reconnect}
+          className="flex items-center gap-1"
+        >
+          <RefreshCw className="h-3 w-3" />
+          Reconnect
+        </Button>
+      )}
+      
+      {reconnectAttempts > 0 && (
+        <span className="text-xs text-muted-foreground">
+          Attempts: {reconnectAttempts}
+        </span>
+      )}
+    </div>
+  );
+}