feat: add UI component library and type definitions

apps/fabrikanabytok/components/shared/action-confirmation-dialog.tsx

@@ -0,0 +1,225 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { AlertTriangle, Info, CheckCircle, Loader2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface ActionConfirmationDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: string
+  actionType: "info" | "warning" | "danger"
+  requireReason?: boolean
+  currentState?: any
+  newState?: any
+  onConfirm: (reason?: string) => Promise<void>
+}
+
+export function ActionConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  actionType = "warning",
+  requireReason = false,
+  currentState,
+  newState,
+  onConfirm,
+}: ActionConfirmationDialogProps) {
+  const [reason, setReason] = useState("")
+  const [loading, setLoading] = useState(false)
+  
+  const handleConfirm = async () => {
+    if (requireReason && !reason.trim()) {
+      return
+    }
+    
+    setLoading(true)
+    try {
+      await onConfirm(reason.trim() || undefined)
+      onOpenChange(false)
+      setReason("")
+    } catch (error) {
+      // Error will be handled by parent
+    } finally {
+      setLoading(false)
+    }
+  }
+  
+  const getIcon = () => {
+    if (actionType === "danger") return <AlertTriangle className="w-6 h-6 text-destructive" />
+    if (actionType === "warning") return <AlertTriangle className="w-6 h-6 text-amber-500" />
+    return <Info className="w-6 h-6 text-blue-500" />
+  }
+  
+  const getButtonVariant = () => {
+    if (actionType === "danger") return "destructive"
+    if (actionType === "warning") return "default"
+    return "default"
+  }
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <div className="flex items-start gap-3">
+            {getIcon()}
+            <div className="flex-1">
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription className="mt-1">{description}</DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          {/* Current vs New State Comparison */}
+          {(currentState || newState) && (
+            <div className="grid md:grid-cols-2 gap-4">
+              {currentState && (
+                <div>
+                  <Label className="mb-2 block">Current State:</Label>
+                  <div className="bg-muted rounded-lg p-3 text-sm">
+                    <pre className="whitespace-pre-wrap font-mono text-xs">
+                      {JSON.stringify(currentState, null, 2)}
+                    </pre>
+                  </div>
+                </div>
+              )}
+              
+              {newState && (
+                <div>
+                  <Label className="mb-2 block">New State:</Label>
+                  <div className="bg-brand-50 border border-brand-200 rounded-lg p-3 text-sm">
+                    <pre className="whitespace-pre-wrap font-mono text-xs">
+                      {JSON.stringify(newState, null, 2)}
+                    </pre>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          
+          {/* Reason Input */}
+          {requireReason && (
+            <div>
+              <Label className="mb-2 block">
+                Reason {requireReason && <span className="text-destructive">*</span>}
+              </Label>
+              <Textarea
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                placeholder="Explain why you're performing this action..."
+                rows={3}
+                className="resize-none"
+              />
+              {requireReason && !reason.trim() && (
+                <p className="text-xs text-destructive mt-1">Reason is required</p>
+              )}
+            </div>
+          )}
+          
+          {/* Warning Notice */}
+          {actionType === "danger" && (
+            <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
+              <div className="flex items-start gap-2">
+                <AlertTriangle className="w-5 h-5 text-destructive mt-0.5" />
+                <div>
+                  <h4 className="font-semibold text-destructive">Warning</h4>
+                  <p className="text-sm text-destructive/80 mt-1">
+                    This action cannot be undone. All changes will be logged and reviewed.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => {
+              onOpenChange(false)
+              setReason("")
+            }}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant={getButtonVariant()}
+            onClick={handleConfirm}
+            disabled={loading || (requireReason && !reason.trim())}
+            className="gap-2"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              <>
+                <CheckCircle className="w-4 h-4" />
+                Confirm Action
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/**
+ * Quick confirmation hook
+ */
+export function useActionConfirmation() {
+  const [confirmState, setConfirmState] = useState<{
+    open: boolean
+    title: string
+    description: string
+    actionType: "info" | "warning" | "danger"
+    requireReason: boolean
+    onConfirm: (reason?: string) => Promise<void>
+    currentState?: any
+    newState?: any
+  } | null>(null)
+  
+  const confirm = (config: {
+    title: string
+    description: string
+    actionType?: "info" | "warning" | "danger"
+    requireReason?: boolean
+    currentState?: any
+    newState?: any
+    onConfirm: (reason?: string) => Promise<void>
+  }) => {
+    setConfirmState({
+      open: true,
+      title: config.title,
+      description: config.description,
+      actionType: config.actionType || "warning",
+      requireReason: config.requireReason || false,
+      currentState: config.currentState,
+      newState: config.newState,
+      onConfirm: config.onConfirm,
+    })
+  }
+  
+  const ConfirmationDialog = confirmState ? (
+    <ActionConfirmationDialog
+      {...confirmState}
+      onOpenChange={(open) => {
+        if (!open) setConfirmState(null)
+      }}
+    />
+  ) : null
+  
+  return { confirm, ConfirmationDialog }
+}
+

apps/fabrikanabytok/components/shared/error-boundary.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import React from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { AlertTriangle, RefreshCw } from "lucide-react"
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+  
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+  
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Error boundary caught:", error, errorInfo)
+    
+    // Log to monitoring service in production
+    if (typeof window !== "undefined") {
+      (window as any).__errorLog = (window as any).__errorLog || []
+      ;(window as any).__errorLog.push({
+        error: error.message,
+        stack: error.stack,
+        info: errorInfo,
+        timestamp: new Date(),
+      })
+    }
+  }
+  
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+      
+      return (
+        <div className="flex items-center justify-center min-h-[400px] p-6">
+          <Card className="max-w-md w-full p-6">
+            <div className="flex flex-col items-center text-center space-y-4">
+              <div className="p-3 bg-destructive/10 rounded-full">
+                <AlertTriangle className="w-8 h-8 text-destructive" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold mb-2">Something went wrong</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  {this.state.error?.message || "An unexpected error occurred"}
+                </p>
+              </div>
+              <Button
+                onClick={() => {
+                  this.setState({ hasError: false, error: undefined })
+                  window.location.reload()
+                }}
+                className="gap-2"
+              >
+                <RefreshCw className="w-4 h-4" />
+                Reload Page
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )
+    }
+    
+    return this.props.children
+  }
+}
+
+/**
+ * Function component wrapper
+ */
+export function withErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  fallback?: React.ReactNode
+) {
+  return function WithErrorBoundary(props: P) {
+    return (
+      <ErrorBoundary fallback={fallback}>
+        <Component {...props} />
+      </ErrorBoundary>
+    )
+  }
+}
+

apps/fabrikanabytok/components/shared/feature-flag.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+/**
+ * Feature Flag Component
+ * Show/hide features based on settings
+ */
+export function FeatureFlag({ 
+  feature, 
+  fallback, 
+  children 
+}: { 
+  feature: string
+  fallback?: React.ReactNode
+  children: React.ReactNode 
+}) {
+  const [enabled, setEnabled] = useState(true)
+  
+  useEffect(() => {
+    // In production, this would fetch from settings
+    // For now, all features are enabled
+    setEnabled(true)
+  }, [feature])
+  
+  if (!enabled) {
+    return fallback || null
+  }
+  
+  return <>{children}</>
+}
+
+/**
+ * Hook to check if feature is enabled
+ */
+export function useFeatureFlag(feature: string): boolean {
+  const [enabled, setEnabled] = useState(true)
+  
+  useEffect(() => {
+    // Check if feature is enabled in settings
+    setEnabled(true)
+  }, [feature])
+  
+  return enabled
+}
+

apps/fabrikanabytok/components/shared/global-search.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Badge } from "@/components/ui/badge"
+import { Search, Package, Users, Settings } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+export function GlobalSearch() {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const [results, setResults] = useState<any[]>([])
+  
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+  
+  useEffect(() => {
+    if (!query) {
+      setResults([])
+      return
+    }
+    
+    // Simulated search - would integrate with actual search API
+    const mockResults = [
+      { type: "product", title: "Base Cabinet 60cm", href: "/admin/products/1", icon: Package },
+      { type: "user", title: "John Doe", href: "/admin/users/1", icon: Users },
+      { type: "page", title: "Settings", href: "/admin/settings", icon: Settings },
+    ].filter((r) => r.title.toLowerCase().includes(query.toLowerCase()))
+    
+    setResults(mockResults)
+  }, [query])
+  
+  const handleSelect = (href: string) => {
+    setOpen(false)
+    setQuery("")
+    router.push(href)
+  }
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-2xl p-0">
+        <div className="flex items-center border-b px-4 py-3">
+          <Search className="w-5 h-5 text-muted-foreground mr-2" />
+          <Input
+            placeholder="Search anything... (Ctrl+K)"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+          />
+          <Badge variant="outline" className="ml-2">
+            ⌘K
+          </Badge>
+        </div>
+        
+        <ScrollArea className="max-h-96">
+          {results.length === 0 && query && (
+            <div className="p-8 text-center text-muted-foreground">
+              No results found
+            </div>
+          )}
+          
+          {results.map((result, index) => {
+            const Icon = result.icon
+            return (
+              <button
+                key={index}
+                onClick={() => handleSelect(result.href)}
+                className="w-full flex items-center gap-3 px-4 py-3 hover:bg-muted transition-colors text-left"
+              >
+                <Icon className="w-5 h-5 text-muted-foreground" />
+                <div className="flex-1">
+                  <div className="font-medium">{result.title}</div>
+                  <div className="text-xs text-muted-foreground">{result.type}</div>
+                </div>
+              </button>
+            )
+          })}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

apps/fabrikanabytok/components/shared/inventory-sync.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { useEffect } from "react"
+import { useSocket } from "@/components/providers/socket-provider"
+import { toast } from "sonner"
+
+export function InventorySync() {
+  const { socket } = useSocket()
+
+  useEffect(() => {
+    if (!socket) return
+
+    socket.emit("subscribe", "inventory")
+
+    socket.on("inventory:updated", (data: any) => {
+      // Trigger UI refresh for inventory-related components
+      window.dispatchEvent(
+        new CustomEvent("inventory-updated", {
+          detail: {
+            productId: data.productId,
+            quantity: data.quantity,
+            isAvailable: data.isAvailable,
+          },
+        }),
+      )
+
+      if (!data.isAvailable) {
+        toast.warning("Készlet frissítés", {
+          description: `${data.productName} már nem elérhető`,
+        })
+      }
+    })
+
+    socket.on("inventory:price-changed", (data: any) => {
+      window.dispatchEvent(
+        new CustomEvent("price-changed", {
+          detail: {
+            productId: data.productId,
+            oldPrice: data.oldPrice,
+            newPrice: data.newPrice,
+          },
+        }),
+      )
+    })
+
+    return () => {
+      socket.off("inventory:updated")
+      socket.off("inventory:price-changed")
+      socket.emit("unsubscribe", "inventory")
+    }
+  }, [socket])
+
+  return null
+}

apps/fabrikanabytok/components/shared/keyboard-shortcuts-dialog.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Keyboard } from "lucide-react"
+
+interface Shortcut {
+  keys: string[]
+  description: string
+  category: string
+}
+
+const SHORTCUTS: Shortcut[] = [
+  // Tools
+  { keys: ["V"], description: "Select tool", category: "Tools" },
+  { keys: ["M"], description: "Move tool", category: "Tools" },
+  { keys: ["R"], description: "Rotate tool", category: "Tools" },
+  { keys: ["S"], description: "Scale tool", category: "Tools" },
+  { keys: ["E"], description: "Measure tool", category: "Tools" },
+  
+  // Actions
+  { keys: ["Ctrl", "Z"], description: "Undo", category: "Actions" },
+  { keys: ["Ctrl", "Y"], description: "Redo", category: "Actions" },
+  { keys: ["Ctrl", "D"], description: "Duplicate", category: "Actions" },
+  { keys: ["Ctrl", "S"], description: "Save", category: "Actions" },
+  { keys: ["Delete"], description: "Delete selected", category: "Actions" },
+  { keys: ["Escape"], description: "Deselect", category: "Actions" },
+  
+  // View
+  { keys: ["G"], description: "Toggle grid", category: "View" },
+  { keys: ["H"], description: "Toggle dimensions", category: "View" },
+  { keys: ["1"], description: "Front view", category: "View" },
+  { keys: ["2"], description: "Back view", category: "View" },
+  { keys: ["3"], description: "Left view", category: "View" },
+  { keys: ["4"], description: "Right view", category: "View" },
+  { keys: ["5"], description: "Top view", category: "View" },
+  { keys: ["6"], description: "Isometric view", category: "View" },
+]
+
+export function KeyboardShortcutsDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const categories = [...new Set(SHORTCUTS.map((s) => s.category))]
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="w-5 h-5" />
+            Keyboard Shortcuts
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          {categories.map((category) => (
+            <div key={category}>
+              <h3 className="font-semibold mb-2">{category}</h3>
+              <div className="space-y-2">
+                {SHORTCUTS.filter((s) => s.category === category).map((shortcut, index) => (
+                  <div key={index} className="flex items-center justify-between py-2">
+                    <span className="text-sm">{shortcut.description}</span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.map((key) => (
+                        <Badge key={key} variant="secondary" className="font-mono">
+                          {key}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <Separator className="mt-2" />
+            </div>
+          ))}
+        </div>
+        
+        <div className="text-xs text-muted-foreground text-center">
+          Press <Badge variant="secondary" className="font-mono">?</Badge> anytime to show this dialog
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

apps/fabrikanabytok/components/shared/loading-skeleton.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export function ProductGridSkeleton({ count = 9 }: { count?: number }) {
+  return (
+    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      {Array.from({ length: count }).map((_, i) => (
+        <Card key={i} className="overflow-hidden">
+          <Skeleton className="aspect-square w-full" />
+          <div className="p-4 space-y-3">
+            <Skeleton className="h-6 w-3/4" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-8 w-1/2" />
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function TableSkeleton({ rows = 10 }: { rows?: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className="h-12 w-full" />
+      ))}
+    </div>
+  )
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="grid md:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i} className="p-6">
+            <Skeleton className="h-20 w-full" />
+          </Card>
+        ))}
+      </div>
+      <Card className="p-6">
+        <Skeleton className="h-64 w-full" />
+      </Card>
+    </div>
+  )
+}
+

apps/fabrikanabytok/components/shared/mobile-nav.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { useState } from "react"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Menu } from "lucide-react"
+import { AdminSidebar } from "@/components/admin/admin-sidebar"
+import { EmployeeSidebar } from "@/components/employee/employee-sidebar"
+
+export function MobileNav({ type, user, employee }: { type: "admin" | "employee"; user: any; employee?: any }) {
+  const [open, setOpen] = useState(false)
+  
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="md:hidden">
+          <Menu className="w-5 h-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="p-0 w-64">
+        {type === "admin" ? (
+          <AdminSidebar user={user} />
+        ) : (
+          <EmployeeSidebar user={user} employee={employee} />
+        )}
+      </SheetContent>
+    </Sheet>
+  )
+}
+

apps/fabrikanabytok/components/shared/notification-center.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Bell, Check, Trash2 } from "lucide-react"
+import { useSocket } from "@/components/providers/socket-provider"
+import { formatDistanceToNow } from "date-fns"
+import { cn } from "@/lib/utils"
+
+interface Notification {
+  id: string
+  type: "info" | "success" | "warning" | "error"
+  title: string
+  message: string
+  timestamp: Date
+  read: boolean
+}
+
+export function NotificationCenter() {
+  const { socket } = useSocket()
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [open, setOpen] = useState(false)
+  
+  useEffect(() => {
+    if (!socket) return
+    
+    // Listen for notifications
+    socket.on("notification:new", (data: any) => {
+      setNotifications((prev) => [
+        {
+          id: crypto.randomUUID(),
+          type: data.type || "info",
+          title: data.title,
+          message: data.message,
+          timestamp: new Date(),
+          read: false,
+        },
+        ...prev,
+      ])
+    })
+    
+    return () => {
+      socket.off("notification:new")
+    }
+  }, [socket])
+  
+  const unreadCount = notifications.filter((n) => !n.read).length
+  
+  const markAsRead = (id: string) => {
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, read: true } : n))
+    )
+  }
+  
+  const markAllRead = () => {
+    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
+  }
+  
+  const removeNotification = (id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id))
+  }
+  
+  const getTypeColor = (type: string) => {
+    const colors = {
+      info: "bg-blue-100 text-blue-600",
+      success: "bg-green-100 text-green-600",
+      warning: "bg-amber-100 text-amber-600",
+      error: "bg-red-100 text-red-600",
+    }
+    return colors[type as keyof typeof colors] || colors.info
+  }
+  
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon" className="relative">
+          <Bell className="w-5 h-5" />
+          {unreadCount > 0 && (
+            <Badge
+              variant="destructive"
+              className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
+            >
+              {unreadCount}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-96 p-0" align="end">
+        <div className="p-4 border-b flex items-center justify-between">
+          <div>
+            <h3 className="font-semibold">Notifications</h3>
+            <p className="text-xs text-muted-foreground">
+              {unreadCount} unread
+            </p>
+          </div>
+          {unreadCount > 0 && (
+            <Button size="sm" variant="ghost" onClick={markAllRead}>
+              <Check className="w-3 h-3 mr-1" />
+              Mark all read
+            </Button>
+          )}
+        </div>
+        
+        <ScrollArea className="h-96">
+          {notifications.length === 0 ? (
+            <div className="flex flex-col items-center justify-center p-8 text-center text-muted-foreground">
+              <Bell className="w-12 h-12 mb-2 opacity-50" />
+              <p className="text-sm">No notifications</p>
+            </div>
+          ) : (
+            <div className="p-2 space-y-2">
+              {notifications.map((notification) => (
+                <div
+                  key={notification.id}
+                  className={cn(
+                    "p-3 rounded-lg border transition-colors cursor-pointer",
+                    !notification.read && "bg-brand-50"
+                  )}
+                  onClick={() => markAsRead(notification.id)}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className={`w-2 h-2 rounded-full ${getTypeColor(notification.type)}`} />
+                        <h4 className="font-medium text-sm">{notification.title}</h4>
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {notification.message}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {formatDistanceToNow(notification.timestamp, { addSuffix: true })}
+                      </p>
+                    </div>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="h-6 w-6"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        removeNotification(notification.id)
+                      }}
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  )
+}
+

apps/fabrikanabytok/components/shared/tooltip-help.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { HelpCircle } from "lucide-react"
+
+export function TooltipHelp({ content }: { content: string }) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="inline-flex items-center justify-center">
+            <HelpCircle className="w-4 h-4 text-muted-foreground hover:text-foreground transition-colors" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">
+          <p className="text-sm">{content}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+

apps/fabrikanabytok/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

apps/fabrikanabytok/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

apps/fabrikanabytok/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    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(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

apps/fabrikanabytok/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

apps/fabrikanabytok/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

apps/fabrikanabytok/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

apps/fabrikanabytok/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

apps/fabrikanabytok/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+        vertical:
+          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

apps/fabrikanabytok/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+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 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

apps/fabrikanabytok/components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            )
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

apps/fabrikanabytok/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

apps/fabrikanabytok/components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext],
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on('reInit', onSelect)
+    api.on('select', onSelect)
+
+    return () => {
+      api?.off('select', onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

apps/fabrikanabytok/components/ui/chart.tsx

@@ -0,0 +1,353 @@
+'use client'
+
+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
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children']
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+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
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+  }) {
+  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
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border 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(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                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="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      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={
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
+            }
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// 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,
+}

apps/fabrikanabytok/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

apps/fabrikanabytok/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

apps/fabrikanabytok/components/ui/command.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

apps/fabrikanabytok/components/ui/context-menu.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import * as React from 'react'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

apps/fabrikanabytok/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

apps/fabrikanabytok/components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/lib/utils'
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

apps/fabrikanabytok/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

apps/fabrikanabytok/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        'flex max-w-sm flex-col items-center gap-2 text-center',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function EmptyMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn('text-lg font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

apps/fabrikanabytok/components/ui/field.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+import { useMemo } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'mb-3 font-medium',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+        horizontal: [
+          'flex-row items-center',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+        responsive: [
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+)
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors) {
+      return null
+    }
+
+    if (errors.length === 1 && errors[0]?.message) {
+      return errors[0].message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-destructive text-sm font-normal', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

apps/fabrikanabytok/components/ui/form.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

apps/fabrikanabytok/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

apps/fabrikanabytok/components/ui/input-group.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+        'h-9 has-[>textarea]:h-auto',
+
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+        // Focus state.
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end':
+          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+        'block-end':
+          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  'text-sm shadow-none flex gap-2 items-center',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+)
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

apps/fabrikanabytok/components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { MinusIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

apps/fabrikanabytok/components/ui/input.tsx

@@ -0,0 +1,21 @@
+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(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 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 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

apps/fabrikanabytok/components/ui/item.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('group/item-group flex flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('my-0', className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4 ',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

apps/fabrikanabytok/components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+        "[&_svg:not([class*='size-'])]:size-3",
+        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

apps/fabrikanabytok/components/ui/label.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+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 }

apps/fabrikanabytok/components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

apps/fabrikanabytok/components/ui/navigation-menu.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+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 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={'absolute top-full left-0 isolate z-50 flex justify-center'}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

apps/fabrikanabytok/components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

apps/fabrikanabytok/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

apps/fabrikanabytok/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

apps/fabrikanabytok/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

apps/fabrikanabytok/components/ui/resizable.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '@/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

apps/fabrikanabytok/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

apps/fabrikanabytok/components/ui/select.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...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(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 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-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          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}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {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('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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 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="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </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('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

apps/fabrikanabytok/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

apps/fabrikanabytok/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

apps/fabrikanabytok/components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+import { PanelLeftIcon } 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,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} 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'
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(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
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  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: boolean | ((value: boolean) => boolean)) => {
+      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: KeyboardEvent) => {
+      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<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden 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',
+        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))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : 'button'
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+  size?: 'sm' | 'md'
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        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,
+}

apps/fabrikanabytok/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

apps/fabrikanabytok/components/ui/slider.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+        }
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={
+            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+          }
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

apps/fabrikanabytok/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

apps/fabrikanabytok/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

apps/fabrikanabytok/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        }
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

apps/fabrikanabytok/components/ui/table.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

apps/fabrikanabytok/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

apps/fabrikanabytok/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(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

apps/fabrikanabytok/components/ui/toast.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

apps/fabrikanabytok/components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useToast } from '@/hooks/use-toast'
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

apps/fabrikanabytok/components/ui/toggle-group.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

apps/fabrikanabytok/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

apps/fabrikanabytok/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

apps/fabrikanabytok/components/ui/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(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
+}

apps/fabrikanabytok/components/ui/use-toast.ts

@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }

apps/fabrikanabytok/hooks/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Custom Hooks - Main Export
+ * Export all custom React hooks
+ */
+
+// Existing hooks
+export { useToast } from './use-toast'
+export { useIsMobile } from './use-mobile'
+export { useKitchenDesigner } from './use-kitchen-designer'
+export { useDesignSync } from './use-design-sync'
+export { useAutosave } from './use-autosave'
+export { usePlannerCollaboration } from './use-planner-collaboration'
+export { usePlannerExport } from './use-planner-export'
+
+// Advanced Three.js hooks
+export {
+  useMaterialManager,
+  usePhysicsEngine,
+  usePerformanceMonitor,
+  useModelLoader,
+  useParticleSystem,
+  useCinematicCamera,
+  useVolumetricLighting,
+  useWeatherSystem,
+  useKitchenComponents,
+  useAdvancedSelection,
+  useAdvancedSnapping
+} from './use-advanced-three'
+

apps/fabrikanabytok/hooks/use-advanced-three.ts

@@ -0,0 +1,353 @@
+/**
+ * React Hooks for Advanced Three.js Features
+ * Easy-to-use hooks for all advanced systems
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { useThree, useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+// Import all systems
+import { MaterialManager } from '@/lib/three/materials'
+import { PhysicsEngine } from '@/lib/three/physics'
+import { PerformanceMonitor, type PerformanceMetrics } from '@/lib/three/performance'
+import { ModelLoader } from '@/lib/three/loaders'
+import { GPUParticleSystem, ParticleEffects } from '@/lib/three/particle-system'
+import { CinematicCamera } from '@/lib/three/cinematic-camera'
+import { VolumetricLightManager } from '@/lib/three/volumetric-lighting'
+import { WeatherSystem } from '@/lib/three/weather-system'
+import { ShaderManager } from '@/lib/three/shaders'
+import { DecalManager } from '@/lib/three/decal-system'
+import { KitchenComponentManager } from '@/lib/three/kitchen-component-system'
+import { AdvancedSelectionManager } from '@/lib/three/advanced-selection'
+import { AdvancedSnappingManager } from '@/lib/three/advanced-snapping'
+
+/**
+ * Use Material Manager
+ */
+export function useMaterialManager() {
+  const manager = useRef(MaterialManager.getInstance())
+  
+  return {
+    createMaterial: manager.current.createPBRMaterial.bind(manager.current),
+    createWoodMaterial: manager.current.createWoodMaterial.bind(manager.current),
+    createMetalMaterial: manager.current.createMetalMaterial.bind(manager.current),
+    createGlassMaterial: manager.current.createGlassMaterial.bind(manager.current),
+    updateMaterial: manager.current.updateMaterial.bind(manager.current),
+    getMaterial: manager.current.getMaterial.bind(manager.current),
+  }
+}
+
+/**
+ * Use Physics Engine
+ */
+export function usePhysicsEngine(enabled: boolean = true) {
+  const engine = useRef(PhysicsEngine.getInstance())
+  
+  useEffect(() => {
+    engine.current.setEnabled(enabled)
+    engine.current.setGravity(0, -9.81, 0)
+  }, [enabled])
+  
+  useFrame((state, delta) => {
+    if (enabled) {
+      engine.current.update(delta)
+    }
+  })
+  
+  return {
+    addBody: engine.current.addBody.bind(engine.current),
+    removeBody: engine.current.removeBody.bind(engine.current),
+    onCollision: engine.current.onCollision.bind(engine.current),
+    raycast: engine.current.raycast.bind(engine.current),
+    setGravity: engine.current.setGravity.bind(engine.current),
+  }
+}
+
+/**
+ * Use Performance Monitor
+ */
+export function usePerformanceMonitor() {
+  const { gl } = useThree()
+  const monitor = useRef(PerformanceMonitor.getInstance())
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps: 60,
+    frameTime: 16.67,
+    drawCalls: 0,
+    triangles: 0,
+    geometries: 0,
+    textures: 0,
+    programs: 0,
+    memory: { geometries: 0, textures: 0, total: 0 },
+    renderTime: 0,
+    gpuTime: 0
+  })
+  
+  useEffect(() => {
+    const unsubscribe = monitor.current.subscribe((newMetrics) => {
+      setMetrics(newMetrics)
+    })
+    
+    return unsubscribe
+  }, [])
+  
+  useFrame(() => {
+    monitor.current.updateRendererMetrics(gl)
+  })
+  
+  return {
+    metrics,
+    averageFPS: monitor.current.getAverageFPS(),
+    variance: monitor.current.getFPSVariance(),
+    grade: monitor.current.getPerformanceGrade(),
+    report: monitor.current.generateReport(),
+    reset: monitor.current.reset.bind(monitor.current),
+  }
+}
+
+/**
+ * Use Model Loader
+ */
+export function useModelLoader() {
+  const loader = useRef(ModelLoader.getInstance())
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  
+  const loadModel = async (url: string, options?: any) => {
+    setLoading(true)
+    setProgress(0)
+    
+    try {
+      const model = await loader.current.loadModel(url, {
+        ...options,
+        onProgress: (p: number) => setProgress(p)
+      })
+      setLoading(false)
+      return model
+    } catch (error) {
+      setLoading(false)
+      throw error
+    }
+  }
+  
+  return {
+    loadModel,
+    preloadModels: loader.current.preloadModels.bind(loader.current),
+    loading,
+    progress,
+    cacheStats: loader.current.getCacheStats(),
+  }
+}
+
+/**
+ * Use Particle System
+ */
+export function useParticleSystem(type: 'fire' | 'smoke' | 'sparkles' | 'rain' | 'snow' | 'custom', position: THREE.Vector3) {
+  const { scene } = useThree()
+  const systemRef = useRef<GPUParticleSystem>()
+  
+  useEffect(() => {
+    let system: GPUParticleSystem
+    
+    switch (type) {
+      case 'fire':
+        system = ParticleEffects.createFire(position)
+        break
+      case 'smoke':
+        system = ParticleEffects.createSmoke(position)
+        break
+      case 'sparkles':
+        system = ParticleEffects.createSparkles(position)
+        break
+      case 'rain':
+        system = ParticleEffects.createRain(position, new THREE.Vector3(10, 0, 10))
+        break
+      case 'snow':
+        system = ParticleEffects.createSnow(position, new THREE.Vector3(10, 0, 10))
+        break
+      default:
+        return
+    }
+    
+    systemRef.current = system
+    scene.add(system.getMesh())
+    
+    return () => {
+      if (systemRef.current) {
+        scene.remove(systemRef.current.getMesh())
+        systemRef.current.dispose()
+      }
+    }
+  }, [type, position, scene])
+  
+  useFrame((state, delta) => {
+    if (systemRef.current) {
+      systemRef.current.update(delta)
+    }
+  })
+  
+  return {
+    burst: (count: number) => systemRef.current?.burst(count),
+    setEmissionRate: (rate: number) => systemRef.current?.setEmissionRate(rate),
+    clear: () => systemRef.current?.clear(),
+  }
+}
+
+/**
+ * Use Cinematic Camera
+ */
+export function useCinematicCamera(enabled: boolean = false) {
+  const { camera } = useThree()
+  const cinematicCameraRef = useRef<CinematicCamera>()
+  
+  useEffect(() => {
+    if (camera instanceof THREE.PerspectiveCamera) {
+      cinematicCameraRef.current = new CinematicCamera(camera)
+    }
+  }, [camera])
+  
+  useFrame((state, delta) => {
+    if (enabled && cinematicCameraRef.current) {
+      cinematicCameraRef.current.update(delta)
+    }
+  })
+  
+  return {
+    addKeyframe: (kf: any) => cinematicCameraRef.current?.addKeyframe(kf),
+    play: () => cinematicCameraRef.current?.play(),
+    pause: () => cinematicCameraRef.current?.pause(),
+    stop: () => cinematicCameraRef.current?.stop(),
+    setLoop: (loop: boolean) => cinematicCameraRef.current?.setLoop(loop),
+    shake: (intensity: number, duration: number) => cinematicCameraRef.current?.shake(intensity, duration),
+    isPlaying: cinematicCameraRef.current?.getIsPlaying() ?? false,
+  }
+}
+
+/**
+ * Use Volumetric Lighting
+ */
+export function useVolumetricLighting(enabled: boolean = true) {
+  const { scene, camera, gl } = useThree()
+  const managerRef = useRef<VolumetricLightManager>()
+  
+  useEffect(() => {
+    if (enabled) {
+      managerRef.current = new VolumetricLightManager(scene, camera, gl)
+    }
+    
+    return () => {
+      managerRef.current?.dispose()
+    }
+  }, [scene, camera, gl, enabled])
+  
+  useFrame((state, delta) => {
+    if (managerRef.current && enabled) {
+      managerRef.current.update(delta)
+    }
+  })
+  
+  return {
+    addGodRays: (light: THREE.Light, settings?: any) => managerRef.current?.addGodRays(light, settings),
+    addVolumetricFog: (settings?: any) => managerRef.current?.addVolumetricFog(settings),
+    updateGodRaysPosition: (pos: THREE.Vector3) => managerRef.current?.updateGodRaysPosition(pos),
+  }
+}
+
+/**
+ * Use Weather System
+ */
+export function useWeatherSystem(enabled: boolean = true) {
+  const { scene } = useThree()
+  const weatherRef = useRef<WeatherSystem>()
+  
+  useEffect(() => {
+    if (enabled) {
+      weatherRef.current = new WeatherSystem(scene)
+    }
+    
+    return () => {
+      weatherRef.current?.dispose()
+    }
+  }, [scene, enabled])
+  
+  useFrame((state, delta) => {
+    if (weatherRef.current && enabled) {
+      weatherRef.current.update(delta)
+    }
+  })
+  
+  return {
+    setWeather: (weather: any, duration?: number) => weatherRef.current?.setWeather(weather, duration),
+    getCurrentWeather: () => weatherRef.current?.getCurrentWeather(),
+    createLightning: (duration?: number) => weatherRef.current?.createLightning(duration),
+  }
+}
+
+/**
+ * Use Kitchen Component System
+ */
+export function useKitchenComponents() {
+  const manager = useRef(new KitchenComponentManager())
+  
+  return {
+    addComponent: manager.current.addComponent.bind(manager.current),
+    removeComponent: manager.current.removeComponent.bind(manager.current),
+    validatePlacement: manager.current.validatePlacement.bind(manager.current),
+    connect: manager.current.connect.bind(manager.current),
+    autoArrange: manager.current.autoArrange.bind(manager.current),
+    findBestPlacement: manager.current.findBestPlacement.bind(manager.current),
+    getAllComponents: manager.current.getAllComponents.bind(manager.current),
+  }
+}
+
+/**
+ * Use Advanced Selection
+ */
+export function useAdvancedSelection() {
+  const manager = useRef(new AdvancedSelectionManager())
+  const [selectedObjects, setSelectedObjects] = useState<THREE.Object3D[]>([])
+  
+  useEffect(() => {
+    setSelectedObjects(manager.current.getSelection())
+  }, [])
+  
+  return {
+    startLasso: manager.current.startLasso.bind(manager.current),
+    continueLasso: manager.current.continueLasso.bind(manager.current),
+    endLasso: (objects: THREE.Object3D[], camera: THREE.Camera, viewport: any) => {
+      const selected = manager.current.endLasso(objects, camera, viewport)
+      setSelectedObjects(selected)
+      return selected
+    },
+    selectSimilar: (target: THREE.Object3D, objects: THREE.Object3D[], criteria?: any) => {
+      const selected = manager.current.selectSimilar(target, objects, criteria)
+      setSelectedObjects(selected)
+      return selected
+    },
+    setMode: manager.current.setMode.bind(manager.current),
+    getSelection: () => selectedObjects,
+    clearSelection: () => {
+      manager.current.clearSelection()
+      setSelectedObjects([])
+    },
+  }
+}
+
+/**
+ * Use Advanced Snapping
+ */
+export function useAdvancedSnapping() {
+  const manager = useRef(new AdvancedSnappingManager())
+  
+  return {
+    snapPosition: manager.current.snapPosition.bind(manager.current),
+    snapRotation: manager.current.snapRotation.bind(manager.current),
+    alignObjects: manager.current.alignObjects.bind(manager.current),
+    distributeObjects: manager.current.distributeObjects.bind(manager.current),
+    setGridSize: manager.current.setGridSize.bind(manager.current),
+    setSnapDistance: manager.current.setSnapDistance.bind(manager.current),
+    setAngleStep: manager.current.setAngleStep.bind(manager.current),
+    getGuides: manager.current.getGuides.bind(manager.current),
+  }
+}
+

apps/fabrikanabytok/hooks/use-ai-chat-drawer.ts

@@ -0,0 +1,22 @@
+"use client"
+
+import { create } from "zustand"
+
+interface AIChatDrawerStore {
+  isOpen: boolean
+  currentSessionId: string | null
+  open: () => void
+  close: () => void
+  toggle: () => void
+  setSessionId: (id: string | null) => void
+}
+
+export const useAIChatDrawer = create<AIChatDrawerStore>((set) => ({
+  isOpen: false,
+  currentSessionId: null,
+  open: () => set({ isOpen: true }),
+  close: () => set({ isOpen: false }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+  setSessionId: (id) => set({ currentSessionId: id }),
+}))
+

apps/fabrikanabytok/hooks/use-autosave.ts

@@ -0,0 +1,93 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { usePlannerStore } from "@/lib/store/planner-store"
+import { updateDesign } from "@/lib/actions/design.actions"
+import { toast } from "sonner"
+
+/**
+ * Auto-save hook for planner designs
+ * Automatically saves changes every N seconds
+ */
+export function useAutosave(designId: string, intervalMs: number = 30000) {
+  const lastSaveRef = useRef<number>(Date.now())
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const { placedObjects, layers, snapSettings, renderSettings, history } = usePlannerStore()
+  
+  useEffect(() => {
+    // Clear existing timeout
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+    }
+    
+    // Set up auto-save
+    saveTimeoutRef.current = setTimeout(async () => {
+      const now = Date.now()
+      
+      // Only save if there were changes since last save
+      if (now - lastSaveRef.current >= intervalMs && placedObjects.length > 0) {
+        try {
+          await updateDesign(designId, {
+            placedObjects,
+            layers,
+            snapSettings,
+            renderSettings,
+            totalPrice: placedObjects.reduce((sum, obj) => sum + obj.price, 0),
+          })
+          
+          lastSaveRef.current = now
+          
+          // Silent save notification (no toast spam)
+          console.log(`[Autosave] Design ${designId} saved at ${new Date().toLocaleTimeString()}`)
+        } catch (error) {
+          console.error("[Autosave] Failed:", error)
+          // Only show toast on error
+          toast.error("Auto-save failed. Please save manually.")
+        }
+      }
+    }, intervalMs)
+    
+    // Cleanup
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
+  }, [designId, placedObjects, layers, snapSettings, renderSettings, intervalMs, history.length])
+  
+  // Also save on page unload
+  useEffect(() => {
+    const handleBeforeUnload = async (e: BeforeUnloadEvent) => {
+      if (placedObjects.length > 0 && Date.now() - lastSaveRef.current > 5000) {
+        // Has unsaved changes
+        e.preventDefault()
+        e.returnValue = ""
+        
+        // Attempt to save
+        try {
+          await updateDesign(designId, {
+            placedObjects,
+            layers,
+            snapSettings,
+            renderSettings,
+            totalPrice: placedObjects.reduce((sum, obj) => sum + obj.price, 0),
+          })
+        } catch (error) {
+          console.error("[Autosave] Exit save failed:", error)
+        }
+      }
+    }
+    
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload)
+    }
+  }, [designId, placedObjects, layers, snapSettings, renderSettings])
+  
+  return {
+    lastSave: lastSaveRef.current,
+    isSaving: false, // Could add this to track save state
+  }
+}
+

apps/fabrikanabytok/hooks/use-design-sync.ts

@@ -0,0 +1,49 @@
+"use client"
+
+import { useEffect } from "react"
+import { usePlannerStore } from "@/lib/store/planner-store"
+import type { Design } from "@/lib/types/planner.types"
+
+/**
+ * Hook to sync design data with planner store on mount
+ * This initializes the store with the loaded design data
+ */
+export function useDesignSync(design: Design) {
+  const { 
+    updateSnapSettings,
+    updateRenderSettings,
+  } = usePlannerStore()
+  
+  useEffect(() => {
+    // Initialize store from design on mount
+    if (design.placedObjects && design.placedObjects.length > 0) {
+      // Set placed objects
+      usePlannerStore.setState({
+        placedObjects: design.placedObjects,
+      })
+    }
+    
+    // Set layers if available
+    if (design.layers && design.layers.length > 0) {
+      usePlannerStore.setState({
+        layers: design.layers,
+      })
+    }
+    
+    // Set snap settings if available
+    if (design.snapSettings) {
+      updateSnapSettings(design.snapSettings)
+    }
+    
+    // Set render settings if available
+    if (design.renderSettings) {
+      updateRenderSettings(design.renderSettings)
+    }
+    
+    // Initialize history with current state
+    usePlannerStore.getState().saveToHistory("Design loaded")
+  }, [design.id]) // Only run when design ID changes
+  
+  return { design }
+}
+

apps/fabrikanabytok/hooks/use-kitchen-designer.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react'
+import { useSocket } from '@/components/providers/socket-provider'
+import { updateDesign } from '@/lib/actions/design.actions'
+import { autoSaveDesign, getPlannerProducts } from '@/lib/actions/planner-advanced.actions'
+import { toast } from '@/hooks/use-toast'
+import type { Design } from '@/lib/types/planner.types'
+import { usePlannerStore } from '@/lib/store/planner-store'
+
+export function useKitchenDesigner(design: Design) {
+  const { socket, isConnected } = useSocket()
+
+  const handleSave = useCallback(
+    async () => {
+      try {
+        const state = usePlannerStore.getState()
+        await updateDesign(design.id, {
+          placedObjects: state.placedObjects,
+          layers: state.layers,
+          snapSettings: state.snapSettings,
+          renderSettings: state.renderSettings,
+          totalPrice: state.placedObjects.reduce((sum, obj) => sum + obj.price, 0)
+        })
+        toast({ title: 'Terv sikeresen mentve', variant: 'default' })
+      } catch (error) {
+        toast({ title: 'Hiba történt a mentés során', variant: 'error' })
+        console.error(error)
+      }
+    },
+    [design.id]
+  )
+
+  const handleShare = useCallback(
+    async (shareConfig: any) => {
+      try {
+        toast({ title: 'Megosztási link létrehozva', variant: 'default' })
+        return shareConfig.url
+      } catch (error) {
+        toast({ title: 'Hiba történt a megosztás során', variant: 'error' })
+        throw error
+      }
+    },
+    []
+  )
+
+  const handleExport = useCallback(
+    async (format: string) => {
+      try {
+        toast({ title: `Exportálva ${format.toUpperCase()} formátumban`, variant: 'default' })
+      } catch (error) {
+        toast({ title: 'Hiba történt az exportálás során', variant: 'error' })
+        console.error(error)
+      }
+    },
+    []
+  )
+
+  const getProducts = useCallback(async () => {
+    try {
+      return await getPlannerProducts()
+    } catch (error) {
+      console.error('Failed to load products:', error)
+      return []
+    }
+  }, [])
+
+  return {
+    socket,
+    isConnected,
+    handleSave,
+    handleShare,
+    handleExport,
+    getProducts
+  }
+}

apps/fabrikanabytok/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(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
+}

apps/fabrikanabytok/hooks/use-planner-collaboration.ts

@@ -0,0 +1,208 @@
+"use client"
+
+import { useEffect, useCallback, useState } from "react"
+import { initializeSocket, getSocket } from "@/lib/websocket/socket-client"
+import { usePlannerStore } from "@/lib/store/planner-store"
+import type { PlacedObject } from "@/lib/types/planner.types"
+import type { Socket } from "socket.io-client"
+
+export interface CollaboratorCursor {
+  userId: string
+  userName: string
+  position: [number, number, number]
+  color: string
+  timestamp: number
+}
+
+export interface CollaboratorSelection {
+  userId: string
+  userName: string
+  objectId: string
+  color: string
+}
+
+export interface CollaborationState {
+  collaborators: Map<string, CollaboratorCursor>
+  selections: Map<string, CollaboratorSelection>
+  isConnected: boolean
+  currentUsers: Array<{ userId: string; userName: string; isActive: boolean }>
+}
+
+export function usePlannerCollaboration(designId: string, userId: string, userName: string) {
+  const [state, setState] = useState<CollaborationState>({
+    collaborators: new Map(),
+    selections: new Map(),
+    isConnected: false,
+    currentUsers: [],
+  })
+  
+  const { updateObject, placedObjects } = usePlannerStore()
+  const [socket, setSocket] = useState<Socket | null>(null)
+  
+  useEffect(() => {
+    // Initialize socket connection
+    const socketInstance = initializeSocket({ clientId: userId })
+    setSocket(socketInstance)
+    
+    // Join design room
+    socketInstance.emit("design:join", { designId, userId, userName })
+    
+    // Listen for other users joining
+    socketInstance.on("design:user-joined", (data: { userId: string; userName: string }) => {
+      console.log(`User joined: ${data.userName}`)
+      setState((prev) => ({
+        ...prev,
+        currentUsers: [...prev.currentUsers, { ...data, isActive: true }],
+      }))
+    })
+    
+    // Listen for users leaving
+    socketInstance.on("design:user-left", (data: { userId: string }) => {
+      setState((prev) => ({
+        ...prev,
+        currentUsers: prev.currentUsers.filter((u) => u.userId !== data.userId),
+        collaborators: new Map([...prev.collaborators].filter(([id]) => id !== data.userId)),
+        selections: new Map([...prev.selections].filter(([id]) => id !== data.userId)),
+      }))
+    })
+    
+    // Listen for current users list
+    socketInstance.on("design:users", (data: { users: Array<{ userId: string; userName: string }> }) => {
+      setState((prev) => ({
+        ...prev,
+        currentUsers: data.users.map((u) => ({ ...u, isActive: true })),
+        isConnected: true,
+      }))
+    })
+    
+    // Listen for cursor movements
+    socketInstance.on("design:cursor-moved", (data: CollaboratorCursor) => {
+      setState((prev) => {
+        const newCollaborators = new Map(prev.collaborators)
+        newCollaborators.set(data.userId, data)
+        return { ...prev, collaborators: newCollaborators }
+      })
+    })
+    
+    // Listen for object updates
+    socketInstance.on("design:object-updated", (data: { 
+      objectId: string
+      updates: Partial<PlacedObject>
+      userId: string
+      userName: string
+    }) => {
+      // Don't apply our own updates
+      if (data.userId !== userId) {
+        updateObject(data.objectId, data.updates)
+      }
+    })
+    
+    // Listen for object additions
+    socketInstance.on("design:object-added", (data: {
+      object: PlacedObject
+      userId: string
+    }) => {
+      if (data.userId !== userId) {
+        usePlannerStore.getState().addObject(data.object)
+      }
+    })
+    
+    // Listen for object deletions
+    socketInstance.on("design:object-removed", (data: {
+      objectId: string
+      userId: string
+    }) => {
+      if (data.userId !== userId) {
+        usePlannerStore.getState().removeObject(data.objectId)
+      }
+    })
+    
+    // Listen for selection changes
+    socketInstance.on("design:selection-changed", (data: CollaboratorSelection) => {
+      if (data.userId !== userId) {
+        setState((prev) => {
+          const newSelections = new Map(prev.selections)
+          if (data.objectId) {
+            newSelections.set(data.userId, data)
+          } else {
+            newSelections.delete(data.userId)
+          }
+          return { ...prev, selections: newSelections }
+        })
+      }
+    })
+    
+    // Cleanup on unmount
+    return () => {
+      socketInstance.emit("design:leave", { designId, userId })
+      socketInstance.off("design:user-joined")
+      socketInstance.off("design:user-left")
+      socketInstance.off("design:users")
+      socketInstance.off("design:cursor-moved")
+      socketInstance.off("design:object-updated")
+      socketInstance.off("design:object-added")
+      socketInstance.off("design:object-removed")
+      socketInstance.off("design:selection-changed")
+    }
+  }, [designId, userId, userName])
+  
+  // Broadcast cursor movement
+  const broadcastCursorMove = useCallback((position: [number, number, number]) => {
+    socket?.emit("design:cursor-move", {
+      designId,
+      position,
+      userId,
+      userName,
+      timestamp: Date.now(),
+    })
+  }, [socket, designId, userId, userName])
+  
+  // Broadcast object update
+  const broadcastObjectUpdate = useCallback((objectId: string, updates: Partial<PlacedObject>) => {
+    socket?.emit("design:object-update", {
+      designId,
+      objectId,
+      updates,
+      userId,
+      userName,
+    })
+  }, [socket, designId, userId, userName])
+  
+  // Broadcast object addition
+  const broadcastObjectAdd = useCallback((object: PlacedObject) => {
+    socket?.emit("design:object-add", {
+      designId,
+      object,
+      userId,
+    })
+  }, [socket, designId, userId])
+  
+  // Broadcast object removal
+  const broadcastObjectRemove = useCallback((objectId: string) => {
+    socket?.emit("design:object-remove", {
+      designId,
+      objectId,
+      userId,
+    })
+  }, [socket, designId, userId])
+  
+  // Broadcast selection change
+  const broadcastSelection = useCallback((objectId: string | null) => {
+    socket?.emit("design:selection-change", {
+      designId,
+      objectId,
+      userId,
+      userName,
+    })
+  }, [socket, designId, userId, userName])
+  
+  return {
+    ...state,
+    broadcastCursorMove,
+    broadcastObjectUpdate,
+    broadcastObjectAdd,
+    broadcastObjectRemove,
+    broadcastSelection,
+  }
+}
+

apps/fabrikanabytok/hooks/use-planner-export.ts

@@ -0,0 +1,183 @@
+"use client"
+
+import { useThree } from "@react-three/fiber"
+import { useCallback } from "react"
+import { captureCanvasScreenshot, captureMultipleViews, downloadDataUrl, getResolutionDimensions } from "@/lib/utils/canvas-export"
+import { generateDesignPDF, downloadPDF } from "@/lib/utils/pdf-generator"
+import { exportSceneToGLB, downloadGLB } from "@/lib/utils/glb-export"
+import { usePlannerStore } from "@/lib/store/planner-store"
+import type { Design } from "@/lib/types/planner.types"
+import type { ScreenshotOptions } from "@/lib/utils/canvas-export"
+import type { PDFGenerationOptions } from "@/lib/utils/pdf-generator"
+import type { GLBExportOptions } from "@/lib/utils/glb-export"
+import * as THREE from "three"
+
+/**
+ * Hook for exporting planner designs
+ * Provides functions to capture screenshots, generate PDFs, and export 3D models
+ */
+export function usePlannerExport(design: Design) {
+  const { gl, scene, camera } = useThree()
+  const { placedObjects } = usePlannerStore()
+
+  /**
+   * Capture current view as image
+   */
+  const captureImage = useCallback(
+    async (options: ScreenshotOptions = {}) => {
+      try {
+        const canvas = gl.domElement
+        const dataUrl = await captureCanvasScreenshot(canvas, options)
+        return dataUrl
+      } catch (error) {
+        console.error("Failed to capture image:", error)
+        throw new Error("Screenshot capture failed")
+      }
+    },
+    [gl]
+  )
+
+  /**
+   * Export images from multiple views
+   */
+  const exportImages = useCallback(
+    async (
+      views: Array<"front" | "back" | "left" | "right" | "top" | "iso">,
+      resolution: "hd" | "fhd" | "4k" | "8k" = "fhd"
+    ) => {
+      try {
+        const dimensions = getResolutionDimensions(resolution)
+
+        // Define view positions
+        const roomWidth = design.roomDimensions.width * (design.roomDimensions.unit === "cm" ? 0.01 : 1)
+        const roomLength = design.roomDimensions.length * (design.roomDimensions.unit === "cm" ? 0.01 : 1)
+        const roomHeight = design.roomDimensions.height * (design.roomDimensions.unit === "cm" ? 0.01 : 1)
+
+        const viewPositions = {
+          front: {
+            name: "Front View",
+            position: new THREE.Vector3(0, roomHeight / 2, roomLength * 2),
+            lookAt: new THREE.Vector3(0, roomHeight / 2, 0),
+          },
+          back: {
+            name: "Back View",
+            position: new THREE.Vector3(0, roomHeight / 2, -roomLength * 2),
+            lookAt: new THREE.Vector3(0, roomHeight / 2, 0),
+          },
+          left: {
+            name: "Left View",
+            position: new THREE.Vector3(-roomWidth * 2, roomHeight / 2, 0),
+            lookAt: new THREE.Vector3(0, roomHeight / 2, 0),
+          },
+          right: {
+            name: "Right View",
+            position: new THREE.Vector3(roomWidth * 2, roomHeight / 2, 0),
+            lookAt: new THREE.Vector3(0, roomHeight / 2, 0),
+          },
+          top: {
+            name: "Top View",
+            position: new THREE.Vector3(0, roomHeight * 3, 0),
+            lookAt: new THREE.Vector3(0, 0, 0),
+          },
+          iso: {
+            name: "Isometric View",
+            position: new THREE.Vector3(roomWidth * 1.5, roomHeight * 1.5, roomLength * 1.5),
+            lookAt: new THREE.Vector3(0, roomHeight / 2, 0),
+          },
+        }
+
+        const selectedViews = views.map((v) => viewPositions[v]).filter(Boolean)
+
+        const screenshots = await captureMultipleViews(
+          gl.domElement,
+          camera,
+          scene,
+          gl,
+          selectedViews,
+          { ...dimensions, format: "png" }
+        )
+
+        // Download all screenshots
+        screenshots.forEach((screenshot, index) => {
+          const filename = `${design.name}-${screenshot.name.replace(" ", "-")}.png`
+          downloadDataUrl(screenshot.dataUrl, filename)
+        })
+
+        return screenshots
+      } catch (error) {
+        console.error("Failed to export images:", error)
+        throw new Error("Image export failed")
+      }
+    },
+    [gl, scene, camera, design]
+  )
+
+  /**
+   * Export design as PDF
+   */
+  const exportPDF = useCallback(
+    async (shoppingList: any, pdfOptions: PDFGenerationOptions = {}) => {
+      try {
+        // Capture screenshots for PDF
+        const screenshots = await captureMultipleViews(
+          gl.domElement,
+          camera,
+          scene,
+          gl,
+          [
+            {
+              name: "3D View",
+              position: new THREE.Vector3(5, 3, 5),
+              lookAt: new THREE.Vector3(0, 1, 0),
+            },
+            {
+              name: "Top View",
+              position: new THREE.Vector3(0, 10, 0),
+              lookAt: new THREE.Vector3(0, 0, 0),
+            },
+          ],
+          { width: 1920, height: 1080, format: "png" }
+        )
+
+        const pdfBlob = await generateDesignPDF(design, screenshots, shoppingList, pdfOptions)
+
+        const filename = `${design.name}-Report.pdf`
+        downloadPDF(pdfBlob, filename)
+
+        return pdfBlob
+      } catch (error) {
+        console.error("Failed to export PDF:", error)
+        throw new Error("PDF export failed")
+      }
+    },
+    [gl, scene, camera, design]
+  )
+
+  /**
+   * Export scene as GLB
+   */
+  const export3DModel = useCallback(
+    async (glbOptions: GLBExportOptions = {}) => {
+      try {
+        const glbBlob = await exportSceneToGLB(scene, placedObjects, glbOptions)
+
+        const filename = `${design.name}.glb`
+        downloadGLB(glbBlob, filename)
+
+        return glbBlob
+      } catch (error) {
+        console.error("Failed to export GLB:", error)
+        throw new Error("3D model export failed")
+      }
+    },
+    [scene, placedObjects, design.name]
+  )
+
+  return {
+    captureImage,
+    exportImages,
+    exportPDF,
+    export3DModel,
+  }
+}
+

apps/fabrikanabytok/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import { useState, useEffect } from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: string
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = useState<State>(memoryState)
+
+  useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }

apps/fabrikanabytok/lib/schemas/accessory.schemas.ts

@@ -0,0 +1,84 @@
+import { z } from "zod"
+
+export const accessoryFormSchema = z.object({
+  code: z.string().min(1, "Kód megadása kötelező"),
+  name: z.string().min(1, "Név megadása kötelező"),
+  description: z.string().optional(),
+  shortDescription: z.string().optional(),
+  
+  category: z.enum([
+    "drawer",
+    "handle",
+    "hinge",
+    "rail",
+    "organizer",
+    "lighting",
+    "leg",
+    "plinth",
+    "corner",
+    "shelf",
+    "basket",
+    "hook",
+    "mechanism",
+    "other",
+  ]),
+  
+  type: z.string().min(1, "Típus megadása kötelező"),
+  subType: z.string().optional(),
+  
+  material: z.enum([
+    "stainless_steel",
+    "plastic",
+    "wood",
+    "aluminum",
+    "brass",
+    "chrome",
+    "zinc",
+    "glass",
+    "leather",
+    "composite",
+  ]),
+  
+  finish: z.enum([
+    "matte",
+    "glossy",
+    "brushed",
+    "polished",
+    "powder_coated",
+    "chrome_plated",
+    "nickel_plated",
+    "antique",
+    "raw",
+  ]),
+  
+  color: z.string().optional(),
+  
+  basePrice: z.number().min(0, "Ár nem lehet negatív"),
+  currency: z.string().default("HUF"),
+  
+  hasVariants: z.boolean().default(false),
+  
+  inStock: z.boolean().default(true),
+  totalStockQuantity: z.number().min(0).default(0),
+  minimumOrderQuantity: z.number().min(1).default(1),
+  
+  requiresInstallation: z.boolean().default(false),
+  installationDifficulty: z.enum(["easy", "medium", "hard"]).default("medium"),
+  installationTime: z.number().min(0).optional(),
+  
+  weight: z.number().min(0).optional(),
+  leadTimeDays: z.number().min(0).default(0),
+  
+  status: z.enum(["active", "inactive", "discontinued", "coming_soon"]).default("active"),
+  canBeOrderedSeparately: z.boolean().default(true),
+  
+  supplierName: z.string().optional(),
+  supplierCode: z.string().optional(),
+  supplierPrice: z.number().min(0).optional(),
+  
+  mainImage: z.string().url().optional().or(z.literal("")),
+  technicalDrawing: z.string().url().optional().or(z.literal("")),
+})
+
+export type AccessoryFormData = z.infer<typeof accessoryFormSchema>
+

apps/fabrikanabytok/lib/schemas/coupon.schemas.ts

@@ -0,0 +1,63 @@
+import { z } from "zod"
+
+export const couponFormSchema = z.object({
+  code: z.string()
+    .min(3, "Kuponkód minimum 3 karakter")
+    .max(20, "Kuponkód maximum 20 karakter")
+    .regex(/^[A-Z0-9-_]+$/, "Csak nagybetűk, számok, kötőjel és aláhúzás használható"),
+  
+  name: z.string().min(1, "Név megadása kötelező"),
+  description: z.string().optional(),
+  
+  type: z.enum(["percentage", "fixed_amount", "free_shipping", "buy_x_get_y", "bundle"]),
+  
+  discountPercent: z.number().min(0).max(100).optional(),
+  discountAmount: z.number().min(0).optional(),
+  
+  target: z.enum(["order", "product", "category", "customer", "customer_group"]).default("order"),
+  
+  // Conditions
+  minimumOrderAmount: z.number().min(0).optional(),
+  minimumOrderItems: z.number().min(0).optional(),
+  applicableProductIds: z.array(z.string()).optional(),
+  applicableCategoryIds: z.array(z.string()).optional(),
+  
+  // Limits
+  maxUsesTotal: z.number().min(0).optional(),
+  maxUsesPerCustomer: z.number().min(0).optional(),
+  maxDiscountAmount: z.number().min(0).optional(),
+  startDate: z.date().optional(),
+  endDate: z.date().optional(),
+  
+  // Settings
+  canCombineWithOthers: z.boolean().default(false),
+  canCombineWithCustomerPricing: z.boolean().default(true),
+  isVisible: z.boolean().default(true),
+  priority: z.number().min(0).default(0),
+  
+  // Display
+  badge: z.string().optional(),
+  badgeColor: z.string().optional(),
+  displayMessage: z.string().optional(),
+  
+  // Internal
+  internalNotes: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+}).refine(
+  (data) => {
+    if (data.type === "percentage") {
+      return data.discountPercent != null && data.discountPercent > 0
+    }
+    if (data.type === "fixed_amount") {
+      return data.discountAmount != null && data.discountAmount > 0
+    }
+    return true
+  },
+  {
+    message: "Kedvezmény érték megadása kötelező",
+    path: ["discountPercent"],
+  }
+)
+
+export type CouponFormData = z.infer<typeof couponFormSchema>
+

apps/fabrikanabytok/lib/schemas/customer.schemas.ts

@@ -0,0 +1,84 @@
+import { z } from "zod"
+
+export const customerAddressSchema = z.object({
+  id: z.string().optional(),
+  type: z.enum(["billing", "shipping", "both"]),
+  country: z.string().min(1, "Ország megadása kötelező"),
+  zipCode: z.string().min(1, "Irányítószám kötelező"),
+  city: z.string().min(1, "Város megadása kötelező"),
+  address: z.string().min(1, "Cím megadása kötelező"),
+  isPrimary: z.boolean().default(false),
+})
+
+export const contactPersonSchema = z.object({
+  id: z.string().optional(),
+  userId: z.string().optional(),
+  firstName: z.string().min(1, "Keresztnév kötelező"),
+  lastName: z.string().min(1, "Vezetéknév kötelező"),
+  email: z.string().email("Érvényes email cím szükséges"),
+  phone: z.string().optional(),
+  position: z.string().optional(),
+  isPrimary: z.boolean().default(false),
+  canPlaceOrders: z.boolean().default(false),
+  canViewInvoices: z.boolean().default(false),
+  notes: z.string().optional(),
+})
+
+export const customerFormSchema = z.object({
+  type: z.enum(["individual", "company"]),
+  category: z.enum(["retail", "wholesale", "vip", "distributor", "manufacturer", "regular"]),
+  status: z.enum(["active", "inactive", "suspended", "pending"]).default("active"),
+  
+  // Company fields
+  companyName: z.string().optional(),
+  taxNumber: z.string().optional(),
+  euTaxNumber: z.string().optional(),
+  registrationNumber: z.string().optional(),
+  
+  // Individual fields
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
+  
+  // Contact
+  email: z.string().email("Érvényes email cím szükséges"),
+  phone: z.string().optional(),
+  mobile: z.string().optional(),
+  website: z.string().url().optional().or(z.literal("")),
+  
+  // Addresses
+  addresses: z.array(customerAddressSchema).min(1, "Legalább egy cím szükséges"),
+  
+  // Contact persons (for companies)
+  contactPersons: z.array(contactPersonSchema).optional(),
+  
+  // Payment terms
+  paymentMethod: z.enum(["transfer", "cash", "card", "credit"]).default("transfer"),
+  creditLimit: z.number().min(0).default(0),
+  paymentDeadlineDays: z.number().min(0).default(30),
+  defaultCurrency: z.string().default("HUF"),
+  
+  // Preferences
+  preferredDeliveryMethod: z.string().optional(),
+  preferredCommunication: z.enum(["email", "phone", "both"]).default("email"),
+  language: z.string().default("hu"),
+  
+  // Internal
+  notes: z.string().optional(),
+  assignedSalesRep: z.string().optional(),
+  assignedAccountManager: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+}).refine(
+  (data) => {
+    if (data.type === "company") {
+      return !!data.companyName
+    }
+    return !!data.firstName && !!data.lastName
+  },
+  {
+    message: "Cég esetén a cégnév, magánszemély esetén a név kötelező",
+    path: ["companyName"],
+  }
+)
+
+export type CustomerFormData = z.infer<typeof customerFormSchema>
+

apps/fabrikanabytok/lib/schemas/invoice.schemas.ts

@@ -0,0 +1,24 @@
+import { z } from "zod"
+
+export const invoiceFormSchema = z.object({
+  customerId: z.string().min(1, "Ügyfél kiválasztása kötelező"),
+  invoiceType: z.enum(["invoice", "proforma", "advance", "final", "credit_note", "correction"]).default("invoice"),
+  
+  orderIds: z.array(z.string()).min(1, "Legalább egy rendelés kiválasztása szükséges"),
+  selectedItems: z.record(z.array(z.string())).optional(), // orderID -> itemIds
+  
+  dueDate: z.date().optional(),
+  publicNotes: z.string().optional(),
+  privateNotes: z.string().optional(),
+  
+  // Discounts
+  additionalDiscountPercent: z.number().min(0).max(100).default(0),
+  additionalDiscountAmount: z.number().min(0).default(0),
+  
+  // Shipping
+  includeShipping: z.boolean().default(true),
+  shippingCost: z.number().min(0).default(0),
+})
+
+export type InvoiceFormData = z.infer<typeof invoiceFormSchema>
+

apps/fabrikanabytok/lib/schemas/manufacturing-order.schemas.ts

@@ -0,0 +1,91 @@
+import { z } from "zod"
+
+export const orderItemMeasurementsSchema = z.object({
+  width: z.number().optional(),
+  height: z.number().optional(),
+  depth: z.number().optional(),
+  thickness: z.number().optional(),
+  unit: z.enum(["mm", "cm", "m"]).default("mm"),
+})
+
+export const orderItemMaterialSchema = z.object({
+  corpColor: z.string().optional(),
+  front1Color: z.string().optional(),
+  front2Color: z.string().optional(),
+  worktopType: z.string().optional(),
+  worktopColor: z.string().optional(),
+  worktopThickness: z.number().optional(),
+  drawerType: z.string().optional(),
+  handleType: z.string().optional(),
+  edgeBanding: z.string().optional(),
+})
+
+export const orderItemSchema = z.object({
+  productId: z.string().optional(),
+  productName: z.string().min(1, "Terméknév kötelező"),
+  model: z.string().min(1, "Modell megadása kötelező"),
+  sku: z.string().optional(),
+  itemType: z.enum(["elem", "garnitura"]).default("elem"),
+  elementCode: z.string().optional(),
+  measurements: orderItemMeasurementsSchema,
+  sizeCode: z.string().optional(),
+  materials: orderItemMaterialSchema,
+  quantity: z.number().min(1, "Mennyiség minimum 1"),
+  unitPrice: z.number().min(0, "Egységár nem lehet negatív"),
+  discount: z.number().min(0).default(0),
+  notes: z.string().optional(),
+  specialInstructions: z.string().optional(),
+})
+
+export const manufacturingOrderFormSchema = z.object({
+  customerId: z.string().min(1, "Ügyfél kiválasztása kötelező"),
+  customerName: z.string().min(1, "Ügyfél neve kötelező"),
+  customerType: z.enum(["individual", "company"]).default("individual"),
+  
+  status: z.enum([
+    "draft",
+    "confirmed",
+    "in_production",
+    "quality_check",
+    "ready",
+    "shipped",
+    "delivered",
+    "cancelled",
+    "on_hold",
+  ]).default("draft"),
+  
+  priority: z.enum(["low", "normal", "high", "urgent"]).default("normal"),
+  
+  items: z.array(orderItemSchema).min(1, "Legalább egy tétel szükséges"),
+  
+  deliveryWeek: z.number().min(1).max(52).optional(),
+  deliveryYear: z.number().optional(),
+  deliveryDate: z.date().optional(),
+  deliveryAddress: z.object({
+    country: z.string(),
+    zipCode: z.string(),
+    city: z.string(),
+    address: z.string(),
+  }).optional(),
+  deliveryMethod: z.string().optional(),
+  deliveryNotes: z.string().optional(),
+  
+  externalOrderNumber: z.string().optional(),
+  
+  assignedSalesRep: z.string().optional(),
+  assignedProductionManager: z.string().optional(),
+  
+  customerNotes: z.string().optional(),
+  internalNotes: z.string().optional(),
+  specialRequirements: z.string().optional(),
+  
+  discountPercent: z.number().min(0).max(100).default(0),
+  shippingCost: z.number().min(0).default(0),
+  taxPercent: z.number().min(0).max(100).default(27),
+  
+  tags: z.array(z.string()).optional(),
+})
+
+export type ManufacturingOrderFormData = z.infer<typeof manufacturingOrderFormSchema>
+export type OrderItemFormData = z.infer<typeof orderItemSchema>
+

apps/fabrikanabytok/lib/schemas/worktop.schemas.ts

@@ -0,0 +1,63 @@
+import { z } from "zod"
+
+export const worktopFormSchema = z.object({
+  code: z.string().min(1, "Kód megadása kötelező"),
+  name: z.string().min(1, "Név megadása kötelező"),
+  description: z.string().optional(),
+  
+  material: z.enum([
+    "laminate",
+    "stone",
+    "quartz",
+    "granite",
+    "marble",
+    "wood",
+    "solid_surface",
+    "stainless_steel",
+    "ceramic",
+    "composite",
+  ]),
+  
+  materialBrand: z.string().optional(),
+  materialSeries: z.string().optional(),
+  colorCode: z.string().optional(),
+  colorName: z.string().min(1, "Szín név kötelező"),
+  
+  finish: z.enum(["matte", "glossy", "textured", "brushed", "polished"]),
+  texture: z.string().optional(),
+  
+  pricePerMeter: z.number().min(0, "Ár nem lehet negatív"),
+  pricePerPiece: z.number().min(0).optional(),
+  currency: z.string().default("HUF"),
+  
+  maxLength: z.number().min(0).default(0),
+  maxWidth: z.number().min(0).default(0),
+  weight: z.number().min(0).default(0),
+  
+  inStock: z.boolean().default(true),
+  stockQuantity: z.number().min(0).default(0),
+  stockUnit: z.enum(["m²", "piece"]).default("m²"),
+  leadTimeDays: z.number().min(0).default(0),
+  
+  isHeatResistant: z.boolean().default(false),
+  maxHeatTemp: z.number().optional(),
+  isWaterproof: z.boolean().default(false),
+  isStainResistant: z.boolean().default(false),
+  isScratchResistant: z.boolean().default(false),
+  
+  requiresProfessionalInstallation: z.boolean().default(false),
+  installationDifficulty: z.enum(["easy", "medium", "hard"]).default("medium"),
+  
+  status: z.enum(["active", "inactive", "discontinued", "coming_soon"]).default("active"),
+  
+  supplierName: z.string().optional(),
+  supplierCode: z.string().optional(),
+  supplierPrice: z.number().min(0).optional(),
+  
+  imageUrl: z.string().url().optional().or(z.literal("")),
+  thumbnailUrl: z.string().url().optional().or(z.literal("")),
+  colorSwatchUrl: z.string().url().optional().or(z.literal("")),
+})
+
+export type WorktopFormData = z.infer<typeof worktopFormSchema>
+

apps/fabrikanabytok/lib/types/accessory.types.ts

@@ -0,0 +1,398 @@
+/**
+ * Accessory Management Types
+ * Comprehensive accessory catalog (Tálca, Fogantyú, etc.)
+ */
+
+export type AccessoryCategory =
+  | "drawer"          // Tálca/Fiók
+  | "handle"          // Fogantyú
+  | "hinge"           // Zsanér
+  | "rail"            // Sín
+  | "organizer"       // Rendszerező
+  | "lighting"        // Világítás
+  | "leg"             // Láb
+  | "plinth"          // Lábazat
+  | "corner"          // Sarokelem
+  | "shelf"           // Polc
+  | "basket"          // Kosár
+  | "hook"            // Akasztó
+  | "mechanism"       // Mechanizmus
+  | "other"           // Egyéb
+
+export type AccessoryType = {
+  // Drawer types
+  drawer: "cutlery_tray" | "deep_drawer" | "spice_drawer" | "bottle_drawer" | "bread_box" | "waste_bin"
+  
+  // Handle types
+  handle: "knob" | "pull" | "bar" | "edge" | "recessed" | "integrated"
+  
+  // Hinge types
+  hinge: "concealed" | "soft_close" | "heavy_duty" | "glass" | "corner"
+  
+  // Rail types
+  rail: "undermount" | "side_mount" | "ball_bearing" | "soft_close" | "full_extension"
+  
+  // Organizer types
+  organizer: "cutlery_insert" | "spice_rack" | "plate_holder" | "pan_organizer" | "corner_unit"
+  
+  // Lighting types
+  lighting: "led_strip" | "spotlight" | "under_cabinet" | "in_cabinet" | "sensor"
+  
+  // Other
+  other: string
+}
+
+export type AccessoryMaterial =
+  | "stainless_steel" // Rozsdamentes acél
+  | "plastic"         // Műanyag
+  | "wood"           // Fa
+  | "aluminum"       // Alumínium
+  | "brass"          // Sárgaréz
+  | "chrome"         // Króm
+  | "zinc"           // Cink
+  | "glass"          // Üveg
+  | "leather"        // Bőr
+  | "composite"      // Kompozit
+
+export type AccessoryFinish =
+  | "matte"          // Matt
+  | "glossy"         // Fényes
+  | "brushed"        // Csiszolt
+  | "polished"       // Polírozott
+  | "powder_coated"  // Porszórt
+  | "chrome_plated"  // Krómozott
+  | "nickel_plated"  // Nikkelezett
+  | "antique"        // Antikolt
+  | "raw"            // Nyers
+
+export interface AccessoryDimensions {
+  length?: number
+  width?: number
+  height?: number
+  depth?: number
+  diameter?: number
+  thickness?: number
+  unit: "mm" | "cm"
+}
+
+export interface AccessoryVariant {
+  id: string
+  accessoryId: string
+  
+  // Variant Info
+  sku: string
+  name: string
+  
+  // Attributes
+  color?: string
+  colorCode?: string
+  size?: string
+  material?: AccessoryMaterial
+  finish?: AccessoryFinish
+  
+  // Dimensions
+  dimensions: AccessoryDimensions
+  
+  // Pricing
+  price: number
+  compareAtPrice?: number
+  wholesalePrice?: number
+  
+  // Stock
+  inStock: boolean
+  stockQuantity: number
+  lowStockThreshold: number
+  
+  // Images
+  imageUrl?: string
+  thumbnailUrl?: string
+  
+  // Supplier
+  supplierCode?: string
+  supplierPrice?: number
+  
+  // Weight & Packaging
+  weight: number           // grams
+  packageWeight?: number
+  packageDimensions?: AccessoryDimensions
+  
+  // Status
+  isActive: boolean
+  isDefault: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface Accessory {
+  id: string
+  
+  // Identification
+  code: string           // Unique code (e.g., ACC-DR-001)
+  name: string
+  description?: string
+  shortDescription?: string
+  
+  // Classification
+  category: AccessoryCategory
+  type: string
+  subType?: string
+  
+  // Brand
+  brand?: string
+  brandSeries?: string
+  manufacturer?: string
+  
+  // Specifications
+  material: AccessoryMaterial
+  finish: AccessoryFinish
+  color?: string
+  
+  // Dimensions (base)
+  dimensions: AccessoryDimensions
+  weight?: number        // grams
+  
+  // Variants
+  hasVariants: boolean
+  variants: AccessoryVariant[]
+  
+  // Pricing (base)
+  basePrice: number
+  priceRange?: {
+    min: number
+    max: number
+  }
+  currency: string
+  
+  // Images
+  mainImage?: string
+  images: string[]
+  technicalDrawing?: string
+  installationDiagram?: string
+  
+  // Features & Properties
+  features: string[]
+  properties: {
+    isSoftClose?: boolean
+    isAdjustable?: boolean
+    maxWeight?: number     // kg
+    maxWidth?: number      // mm
+    isWaterproof?: boolean
+    isAntiSlip?: boolean
+    isLockable?: boolean
+    hasLED?: boolean
+    voltage?: string
+    powerConsumption?: number  // watts
+  }
+  
+  // Compatibility
+  compatibleWith: {
+    productCategories?: string[]
+    productModels?: string[]
+    cabinetTypes?: string[]
+    minimumCabinetWidth?: number
+    maximumCabinetWidth?: number
+  }
+  
+  // Installation
+  requiresInstallation: boolean
+  installationDifficulty: "easy" | "medium" | "hard"
+  installationTime?: number  // minutes
+  installationInstructions?: string
+  videoUrl?: string
+  
+  // Included Items
+  includedItems?: Array<{
+    name: string
+    quantity: number
+  }>
+  
+  // Required Accessories
+  requiredAccessories?: Array<{
+    accessoryId: string
+    accessoryName: string
+    quantity: number
+  }>
+  
+  // Optional Add-ons
+  optionalAddons?: Array<{
+    accessoryId: string
+    accessoryName: string
+    description: string
+  }>
+  
+  // Supplier Info
+  supplierId?: string
+  supplierName?: string
+  supplierCode?: string
+  supplierPrice?: number
+  leadTimeDays: number
+  
+  // Stock & Availability
+  inStock: boolean
+  totalStockQuantity: number
+  stockLocation?: string
+  minimumOrderQuantity: number
+  orderMultiple?: number   // Must order in multiples of this number
+  
+  // Warranty & Maintenance
+  warrantyYears?: number
+  warrantyDescription?: string
+  maintenanceInstructions?: string
+  cleaningInstructions?: string
+  
+  // Categories & Tags
+  tags: string[]
+  
+  // SEO
+  metaTitle?: string
+  metaDescription?: string
+  keywords?: string[]
+  
+  // Statistics
+  viewCount: number
+  orderCount: number
+  totalSold: number
+  averageRating?: number
+  reviewCount: number
+  
+  // Pricing Rules
+  bulkPricing?: Array<{
+    minQuantity: number
+    maxQuantity?: number
+    price: number
+    discountPercent: number
+  }>
+  
+  // Status
+  status: "active" | "inactive" | "discontinued" | "coming_soon"
+  isNew: boolean
+  isFeatured: boolean
+  isBestseller: boolean
+  
+  // Product Assignment
+  assignedToProducts: string[]  // Product IDs
+  canBeOrderedSeparately: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  updatedAt: Date | string
+  updatedBy: string
+  
+  // Custom fields
+  customFields?: Record<string, any>
+}
+
+export interface AccessoryKit {
+  id: string
+  
+  // Kit Info
+  code: string
+  name: string
+  description?: string
+  
+  // Items in kit
+  items: Array<{
+    accessoryId: string
+    accessoryName: string
+    variantId?: string
+    quantity: number
+    unitPrice: number
+  }>
+  
+  // Pricing
+  totalPrice: number
+  kitPrice: number
+  savings: number
+  savingsPercent: number
+  
+  // Images
+  imageUrl?: string
+  
+  // For which products
+  recommendedFor: string[]  // Product IDs
+  
+  // Status
+  isActive: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface AccessoryOrder {
+  id: string
+  accessoryId: string
+  variantId?: string
+  
+  // Reference
+  orderId: string
+  orderItemId?: string
+  
+  // Quantity & Pricing
+  quantity: number
+  unitPrice: number
+  discount: number
+  total: number
+  
+  // Installation
+  requiresInstallation: boolean
+  installationAssignedTo?: string
+  installationStatus?: "pending" | "scheduled" | "completed"
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface AccessorySupplier {
+  id: string
+  
+  // Company Info
+  companyName: string
+  contactPerson: string
+  email: string
+  phone: string
+  website?: string
+  
+  // Address
+  address: {
+    country: string
+    city: string
+    zipCode: string
+    address: string
+  }
+  
+  // Business
+  taxNumber?: string
+  
+  // Specialization
+  categories: AccessoryCategory[]
+  brands: string[]
+  
+  // Terms
+  minimumOrderValue?: number
+  paymentTermsDays: number
+  defaultLeadTimeDays: number
+  shippingCost: number
+  freeShippingThreshold?: number
+  
+  // Pricing
+  defaultDiscountPercent: number
+  
+  // Stats
+  totalOrders: number
+  totalSpent: number
+  averageRating?: number
+  
+  // Status
+  isActive: boolean
+  isPreferred: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+

apps/fabrikanabytok/lib/types/admin.types.ts

@@ -0,0 +1,96 @@
+export interface DashboardStats {
+  revenue: RevenueStats
+  orders: OrderStats
+  users: UserStats
+  planner: PlannerStats
+  products: ProductStats
+}
+
+export interface RevenueStats {
+  total: number
+  today: number
+  thisWeek: number
+  thisMonth: number
+  growth: number
+  chartData: ChartDataPoint[]
+}
+
+export interface OrderStats {
+  total: number
+  pending: number
+  processing: number
+  shipped: number
+  delivered: number
+  cancelled: number
+  averageOrderValue: number
+  chartData: ChartDataPoint[]
+}
+
+export interface UserStats {
+  total: number
+  newToday: number
+  newThisWeek: number
+  newThisMonth: number
+  active: number
+  subscriptionDistribution: Record<string, number>
+  roleDistribution: Record<string, number>
+}
+
+export interface PlannerStats {
+  totalDesigns: number
+  designsToday: number
+  designsThisWeek: number
+  designsThisMonth: number
+  conversionRate: number
+  mostUsedFeatures: FeatureUsage[]
+  aiUsage: AIUsageStats
+}
+
+export interface ProductStats {
+  total: number
+  active: number
+  outOfStock: number
+  lowStock: number
+  topProducts: ProductPerformance[]
+}
+
+export interface ChartDataPoint {
+  date: string
+  value: number
+  label?: string
+}
+
+export interface FeatureUsage {
+  feature: string
+  count: number
+  growth: number
+}
+
+export interface AIUsageStats {
+  totalRequests: number
+  suggestions: number
+  randomGenerations: number
+  imageScanning: number
+  chat: number
+}
+
+export interface ProductPerformance {
+  productId: string
+  name: string
+  sales: number
+  revenue: number
+  views: number
+  conversionRate: number
+}
+
+export interface ActivityLog {
+  id: string
+  userId?: string
+  action: string
+  description: string
+  type: string
+  metadata?: Record<string, any>
+  ipAddress?: string
+  userAgent?: string
+  createdAt: Date
+}

apps/fabrikanabytok/lib/types/ai.types.ts

@@ -0,0 +1,68 @@
+export interface AIDesignRequest {
+  roomDimensions: {
+    width: number
+    length: number
+    height: number
+  }
+  style?: "modern" | "classic" | "minimal" | "industrial" | "rustic"
+  budget?: number
+  preferences?: string[]
+}
+
+export interface AIDesignSuggestion {
+  id: string
+  components: any[] // DesignComponent[]
+  estimatedPrice: number
+  reasoning: string
+  styleScore: number
+}
+
+export interface AIChatMessage {
+  id: string
+  role: "user" | "assistant" | "system"
+  content: string
+  timestamp: Date
+  metadata?: {
+    suggestedProducts?: string[]
+    suggestedDesigns?: string[]
+    actions?: AIAction[]
+  }
+}
+
+export interface AIAction {
+  type: "add_to_cart" | "open_product" | "open_planner" | "apply_design"
+  label: string
+  data: any
+}
+
+export interface AIImageAnalysis {
+  roomDimensions: {
+    width: number
+    length: number
+    height: number
+    confidence: number
+  }
+  detectedFurniture: DetectedFurniture[]
+  suggestedStyle: string
+  suggestedProducts: string[]
+}
+
+export interface DetectedFurniture {
+  type: string
+  position: {
+    x: number
+    y: number
+  }
+  dimensions: {
+    width: number
+    height: number
+  }
+  confidence: number
+}
+
+export interface AIFeatureUsage {
+  userId: string
+  feature: "suggestion" | "random" | "chat" | "image_scan"
+  creditsUsed: number
+  timestamp: Date
+}

apps/fabrikanabytok/lib/types/chat.types.ts

@@ -0,0 +1,43 @@
+export interface ChatMessage {
+  id: string
+  role: "user" | "assistant" | "system"
+  content: string
+  toolInvocations?: any[]
+  timestamp: Date
+  metadata?: {
+    tokens?: number
+    model?: string
+    context?: any
+  }
+}
+
+export interface ChatSession {
+  id: string
+  userId: string
+  title: string
+  messages: ChatMessage[]
+  context: {
+    currentDesignId?: string
+    recentProducts?: string[]
+    userPreferences?: Record<string, any>
+    sessionGoal?: string
+  }
+  createdAt: Date
+  updatedAt: Date
+  isActive: boolean
+}
+
+export interface ChatMemory {
+  shortTerm: {
+    recentMessages: ChatMessage[]
+    currentTopic: string
+    entities: Record<string, any>
+  }
+  longTerm: {
+    userPreferences: Record<string, any>
+    frequentQueries: string[]
+    productInterests: string[]
+    designStyles: string[]
+  }
+}
+

apps/fabrikanabytok/lib/types/customer.types.ts

@@ -0,0 +1,179 @@
+/**
+ * Customer & Partner Management Types
+ * Comprehensive customer relationship management
+ */
+
+export type CustomerType = "individual" | "company"
+
+export type CustomerCategory = 
+  | "retail"           // Kisker
+  | "wholesale"        // Nagyker
+  | "vip"             // VIP
+  | "distributor"     // Viszonteladó
+  | "manufacturer"    // Gyártó partner
+  | "regular"         // Normál
+
+export type CustomerStatus = "active" | "inactive" | "suspended" | "pending"
+
+export interface CustomerAddress {
+  id: string
+  type: "billing" | "shipping" | "both"
+  country: string
+  zipCode: string
+  city: string
+  address: string
+  isPrimary: boolean
+}
+
+export interface CustomerContactPerson {
+  id: string
+  userId?: string // Link to user account if they have login
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+  position?: string
+  isPrimary: boolean
+  canPlaceOrders: boolean
+  canViewInvoices: boolean
+  notes?: string
+}
+
+export interface CustomerPricingRule {
+  id: string
+  productId?: string
+  categoryId?: string
+  discountPercent?: number
+  fixedPrice?: number
+  validFrom?: Date | string
+  validTo?: Date | string
+  minQuantity?: number
+}
+
+export interface CustomerPaymentTerms {
+  paymentMethod: "transfer" | "cash" | "card" | "credit"
+  creditLimit?: number
+  creditUsed: number
+  paymentDeadlineDays: number // Fizetési határidő napokban
+  defaultCurrency: string
+}
+
+export interface Customer {
+  id: string
+  
+  // Basic Info
+  customerNumber: string // Auto-generated: CUST-00001
+  type: CustomerType
+  category: CustomerCategory
+  status: CustomerStatus
+  
+  // Company Info (for type: company)
+  companyName?: string
+  taxNumber?: string // Adószám
+  euTaxNumber?: string // EU adószám
+  registrationNumber?: string // Cégjegyzékszám
+  
+  // Individual Info (for type: individual)
+  firstName?: string
+  lastName?: string
+  
+  // Contact Details
+  email: string
+  phone?: string
+  mobile?: string
+  website?: string
+  
+  // Addresses
+  addresses: CustomerAddress[]
+  
+  // Contact Persons (for companies)
+  contactPersons: CustomerContactPerson[]
+  
+  // Business Details
+  pricingRules: CustomerPricingRule[]
+  paymentTerms: CustomerPaymentTerms
+  
+  // Preferences
+  preferredDeliveryMethod?: string
+  preferredCommunication?: "email" | "phone" | "both"
+  language: string
+  
+  // Statistics
+  totalOrders: number
+  totalRevenue: number
+  averageOrderValue: number
+  lastOrderDate?: Date | string
+  
+  // Internal Notes
+  notes?: string
+  tags: string[]
+  
+  // Assigned Staff
+  assignedSalesRep?: string // Employee ID
+  assignedAccountManager?: string // Employee ID
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  updatedAt: Date | string
+  updatedBy: string
+  
+  // System Fields
+  isActive: boolean
+  customFields?: Record<string, any>
+}
+
+export interface CustomerActivity {
+  id: string
+  customerId: string
+  
+  type: "order" | "invoice" | "payment" | "note" | "email" | "call" | "meeting"
+  title: string
+  description: string
+  
+  // Related entities
+  relatedOrderId?: string
+  relatedInvoiceId?: string
+  
+  // Activity details
+  performedBy: string // Employee ID
+  performedByName: string
+  
+  timestamp: Date | string
+  
+  // Additional data
+  metadata?: Record<string, any>
+}
+
+export interface CustomerStats {
+  customerId: string
+  period: {
+    start: Date | string
+    end: Date | string
+  }
+  
+  // Order stats
+  totalOrders: number
+  completedOrders: number
+  cancelledOrders: number
+  pendingOrders: number
+  
+  // Financial stats
+  totalRevenue: number
+  totalPaid: number
+  totalOutstanding: number
+  averageOrderValue: number
+  
+  // Product stats
+  topProducts: Array<{
+    productId: string
+    productName: string
+    quantity: number
+    revenue: number
+  }>
+  
+  // Timing stats
+  averageDeliveryTime: number // days
+  onTimeDeliveryRate: number // percentage
+}
+

apps/fabrikanabytok/lib/types/discount-coupon.types.ts

@@ -0,0 +1,410 @@
+/**
+ * Discount & Coupon Management Types
+ * Advanced pricing rules and promotional campaigns
+ */
+
+export type DiscountType =
+  | "percentage"        // Százalékos kedvezmény
+  | "fixed_amount"      // Fix összeg
+  | "free_shipping"     // Ingyenes szállítás
+  | "buy_x_get_y"      // X vásárlása esetén Y ingyen
+  | "bundle"           // Csomag kedvezmény
+
+export type DiscountTarget =
+  | "order"            // Teljes rendelés
+  | "product"          // Adott termék
+  | "category"         // Kategória
+  | "customer"         // Adott ügyfél
+  | "customer_group"   // Ügyfélcsoport
+
+export type CouponStatus = "active" | "inactive" | "expired" | "depleted"
+
+export interface DiscountConditions {
+  // Minimum requirements
+  minimumOrderAmount?: number
+  minimumOrderItems?: number
+  minimumQuantity?: number
+  
+  // Product conditions
+  applicableProductIds?: string[]
+  applicableCategoryIds?: string[]
+  excludedProductIds?: string[]
+  excludedCategoryIds?: string[]
+  
+  // Customer conditions
+  applicableCustomerIds?: string[]
+  applicableCustomerCategories?: string[]
+  excludedCustomerIds?: string[]
+  
+  // First purchase
+  firstPurchaseOnly?: boolean
+  
+  // Location
+  applicableCountries?: string[]
+  applicableZipCodes?: string[]
+  
+  // Other products in cart
+  requiresProducts?: string[]
+  requiresCategories?: string[]
+  
+  // Previous purchases
+  minimumPreviousPurchases?: number
+  minimumPreviousSpend?: number
+}
+
+export interface DiscountLimits {
+  // Usage limits
+  maxUsesTotal?: number
+  maxUsesPerCustomer?: number
+  maxUsesPerDay?: number
+  
+  // Discount limits
+  maxDiscountAmount?: number
+  
+  // Time limits
+  startDate?: Date | string
+  endDate?: Date | string
+  activeHoursStart?: string  // HH:MM
+  activeHoursEnd?: string    // HH:MM
+  activeDaysOfWeek?: number[] // 0-6 (Sunday-Saturday)
+}
+
+export interface BuyXGetYRule {
+  buyQuantity: number
+  buyProductIds?: string[]
+  buyCategoryIds?: string[]
+  
+  getQuantity: number
+  getProductIds?: string[]
+  getCategoryIds?: string[]
+  getDiscount: number    // percentage
+  
+  maxApplications?: number
+}
+
+export interface BundleDiscountRule {
+  productIds: string[]
+  requiredQuantities?: Record<string, number>
+  discountPercent: number
+  fixedPrice?: number
+}
+
+export interface Coupon {
+  id: string
+  
+  // Code
+  code: string              // Unique coupon code
+  name: string
+  description?: string
+  
+  // Type & Value
+  type: DiscountType
+  discountPercent?: number
+  discountAmount?: number
+  
+  // Special rules
+  buyXGetYRule?: BuyXGetYRule
+  bundleRule?: BundleDiscountRule
+  
+  // Target
+  target: DiscountTarget
+  
+  // Conditions
+  conditions: DiscountConditions
+  
+  // Limits
+  limits: DiscountLimits
+  
+  // Stacking
+  canCombineWithOthers: boolean
+  canCombineWithCustomerPricing: boolean
+  priority: number      // Higher priority applies first
+  
+  // Usage tracking
+  usageCount: number
+  usagesByCustomer: Record<string, number>
+  
+  // Revenue impact
+  totalDiscountGiven: number
+  totalRevenueGenerated: number
+  averageOrderValue: number
+  
+  // Status
+  status: CouponStatus
+  isActive: boolean
+  isVisible: boolean    // Show in promotions
+  
+  // Display
+  badge?: string        // e.g., "SUMMER SALE"
+  badgeColor?: string
+  displayMessage?: string
+  
+  // Internal
+  internalNotes?: string
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  createdByName: string
+  updatedAt: Date | string
+  updatedBy: string
+  
+  // Tags
+  tags: string[]
+}
+
+export interface CustomerPricingRule {
+  id: string
+  
+  // Customer
+  customerId: string
+  customerName: string
+  
+  // Rule Info
+  name: string
+  description?: string
+  
+  // Type
+  type: "percentage" | "fixed_price" | "tiered"
+  
+  // Simple discount
+  discountPercent?: number
+  
+  // Product specific
+  productRules: Array<{
+    productId: string
+    productName: string
+    categoryId?: string
+    
+    // Pricing
+    discountPercent?: number
+    fixedPrice?: number
+    
+    // Tiered pricing
+    tiers?: Array<{
+      minQuantity: number
+      maxQuantity?: number
+      price: number
+      discountPercent?: number
+    }>
+  }>
+  
+  // Category specific
+  categoryRules: Array<{
+    categoryId: string
+    categoryName: string
+    discountPercent: number
+  }>
+  
+  // Global discount
+  globalDiscountPercent?: number
+  
+  // Validity
+  validFrom?: Date | string
+  validTo?: Date | string
+  
+  // Status
+  isActive: boolean
+  
+  // Approval
+  requiresApproval: boolean
+  approvedBy?: string
+  approvedAt?: Date | string
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  updatedAt: Date | string
+}
+
+export interface PromotionalCampaign {
+  id: string
+  
+  // Campaign Info
+  name: string
+  description?: string
+  slogan?: string
+  
+  // Timing
+  startDate: Date | string
+  endDate: Date | string
+  timezone: string
+  
+  // Coupons in campaign
+  couponIds: string[]
+  
+  // Featured products
+  featuredProductIds?: string[]
+  featuredCategoryIds?: string[]
+  
+  // Target audience
+  targetCustomerCategories?: string[]
+  targetCustomerIds?: string[]
+  targetNewCustomers: boolean
+  targetExistingCustomers: boolean
+  
+  // Marketing
+  bannerImageUrl?: string
+  emailTemplateId?: string
+  landingPageUrl?: string
+  
+  // Goals
+  goalType: "revenue" | "orders" | "new_customers" | "product_sales"
+  goalValue: number
+  
+  // Performance
+  performance: {
+    ordersCount: number
+    revenue: number
+    discountGiven: number
+    newCustomers: number
+    productsSold: number
+    conversionRate: number
+  }
+  
+  // Status
+  status: "draft" | "scheduled" | "active" | "paused" | "completed" | "cancelled"
+  
+  // Budget
+  maxBudget?: number
+  spentBudget: number
+  
+  // Notifications
+  notifyCustomers: boolean
+  notificationChannels: ("email" | "sms" | "push")[]
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  updatedAt: Date | string
+  
+  // Tags
+  tags: string[]
+}
+
+export interface DiscountApplication {
+  id: string
+  
+  // What discount
+  couponId?: string
+  couponCode?: string
+  pricingRuleId?: string
+  
+  // Where applied
+  orderId: string
+  orderItemId?: string
+  
+  // Discount details
+  type: DiscountType
+  discountPercent: number
+  discountAmount: number
+  
+  // Original vs discounted
+  originalAmount: number
+  discountedAmount: number
+  savings: number
+  
+  // Applied at
+  appliedAt: Date | string
+  appliedBy?: string
+}
+
+export interface DiscountValidationResult {
+  valid: boolean
+  errors: string[]
+  warnings: string[]
+  
+  // If valid
+  discountAmount?: number
+  discountPercent?: number
+  finalAmount?: number
+  
+  // Conditions met
+  conditionsMet: Record<string, boolean>
+  
+  // Usage check
+  canBeUsed: boolean
+  usesRemaining?: number
+}
+
+export interface DiscountStats {
+  period: {
+    start: Date | string
+    end: Date | string
+  }
+  
+  // Coupons
+  totalCoupons: number
+  activeCoupons: number
+  usedCoupons: number
+  
+  // Usage
+  totalApplications: number
+  uniqueCustomers: number
+  
+  // Financial
+  totalDiscountGiven: number
+  totalRevenueGenerated: number
+  averageDiscountPercent: number
+  averageOrderValue: number
+  
+  // Top performers
+  topCoupons: Array<{
+    couponId: string
+    code: string
+    usageCount: number
+    revenue: number
+    discountGiven: number
+  }>
+  
+  // ROI
+  returnOnInvestment: number
+  
+  // Calculated at
+  calculatedAt: Date | string
+}
+
+export interface LoyaltyProgram {
+  id: string
+  
+  // Program Info
+  name: string
+  description?: string
+  
+  // Points system
+  pointsPerCurrency: number  // e.g., 1 point per 100 Ft
+  pointsValue: number        // 1 point = X Ft
+  
+  // Earning rules
+  earningRules: Array<{
+    action: "purchase" | "referral" | "review" | "birthday" | "signup"
+    points: number
+    multiplier?: number
+  }>
+  
+  // Redemption rules
+  minimumPointsToRedeem: number
+  pointsToDiscount: number   // X points = Y Ft discount
+  maxPointsPerOrder?: number
+  
+  // Tiers
+  tiers: Array<{
+    name: string
+    minPoints: number
+    maxPoints?: number
+    benefits: {
+      discountPercent: number
+      freeShipping: boolean
+      prioritySupport: boolean
+      exclusiveDeals: boolean
+    }
+  }>
+  
+  // Status
+  isActive: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+

apps/fabrikanabytok/lib/types/email-template.types.ts

@@ -0,0 +1,175 @@
+/**
+ * Email Template Manager Types
+ * Advanced email template system with WYSIWYG, variables, and tracking
+ */
+
+export type TemplateCategory = 
+  | "transactional" // Order confirmations, receipts
+  | "marketing" // Newsletters, promotions
+  | "system" // Password reset, verification
+  | "notification" // Activity notifications
+  | "custom" // User-defined
+
+export interface EmailTemplate {
+  id: string // Custom UUID
+  name: string
+  slug: string // URL-friendly identifier
+  category: TemplateCategory
+  description: string
+  
+  // Content
+  subject: string
+  htmlContent: string
+  textContent: string // Plain text fallback
+  
+  // Variables
+  variables: TemplateVariable[]
+  
+  // Design
+  design: {
+    layout: "single-column" | "two-column" | "newsletter"
+    theme: "light" | "dark" | "brand"
+    primaryColor: string
+    backgroundColor: string
+    fontFamily: string
+  }
+  
+  // Status
+  status: "draft" | "active" | "archived"
+  isDefault: boolean // Default template for this type
+  
+  // Versioning
+  version: number
+  previousVersions: TemplateVersion[]
+  
+  // Statistics
+  stats: {
+    sent: number
+    opened: number
+    clicked: number
+    bounced: number
+    openRate: number
+    clickRate: number
+  }
+  
+  // Metadata
+  createdBy: string
+  updatedBy: string
+  createdAt: Date
+  updatedAt: Date
+  lastUsed?: Date
+}
+
+export interface TemplateVariable {
+  id: string
+  name: string // e.g., "userName"
+  label: string // e.g., "User Name"
+  type: "text" | "number" | "date" | "boolean" | "image" | "url"
+  defaultValue?: any
+  required: boolean
+  description?: string
+  example?: string
+}
+
+export interface TemplateVersion {
+  version: number
+  htmlContent: string
+  textContent: string
+  changedBy: string
+  changedAt: Date
+  changeNote?: string
+}
+
+export interface EmailSendLog {
+  id: string
+  templateId: string
+  templateVersion: number
+  
+  // Recipient
+  to: string
+  cc?: string[]
+  bcc?: string[]
+  
+  // Content (rendered)
+  subject: string
+  htmlContent: string
+  textContent: string
+  
+  // Tracking
+  status: "pending" | "sent" | "delivered" | "opened" | "clicked" | "bounced" | "failed"
+  sentAt?: Date
+  deliveredAt?: Date
+  openedAt?: Date
+  clickedAt?: Date
+  bouncedAt?: Date
+  
+  // Tracking Data
+  opens: EmailOpen[]
+  clicks: EmailClick[]
+  
+  // Errors
+  error?: string
+  
+  // Metadata
+  userId?: string
+  metadata?: Record<string, any>
+  createdAt: Date
+}
+
+export interface EmailOpen {
+  timestamp: Date
+  userAgent: string
+  ipAddress: string
+  location?: string
+}
+
+export interface EmailClick {
+  timestamp: Date
+  url: string
+  userAgent: string
+  ipAddress: string
+}
+
+export interface EmailTemplatePreview {
+  subject: string
+  html: string
+  text: string
+  variables: Record<string, any>
+}
+
+export interface BulkEmailJob {
+  id: string
+  templateId: string
+  name: string
+  
+  // Recipients
+  recipients: EmailRecipient[]
+  totalRecipients: number
+  
+  // Progress
+  status: "preparing" | "sending" | "completed" | "failed" | "paused"
+  sentCount: number
+  failedCount: number
+  progress: number // 0-100
+  
+  // Schedule
+  scheduledFor?: Date
+  startedAt?: Date
+  completedAt?: Date
+  
+  // Settings
+  batchSize: number
+  delayBetweenBatches: number // ms
+  
+  createdBy: string
+  createdAt: Date
+}
+
+export interface EmailRecipient {
+  email: string
+  variables?: Record<string, any>
+  status: "pending" | "sent" | "failed"
+  sentAt?: Date
+  error?: string
+}
+

apps/fabrikanabytok/lib/types/employee-portal.types.ts

@@ -0,0 +1,254 @@
+/**
+ * Employee Portal Types
+ * Self-service features for employees
+ */
+
+export interface EmployeeProfile {
+  id: string
+  userId: string
+  employeeNumber: string
+  
+  // Personal
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+  avatar?: string
+  
+  // Employment
+  role: string
+  department: string
+  position: string
+  hireDate: Date | string
+  
+  // Current Status
+  clockedIn: boolean
+  currentShift?: ShiftInfo
+  onBreak: boolean
+  breakStartTime?: Date | string
+  
+  // Today's Summary
+  todayHours: number
+  todayTasks: number
+  todayEfficiency: number
+}
+
+export interface ShiftInfo {
+  id: string
+  date: Date | string
+  startTime: string
+  endTime: string
+  breakDuration: number // minutes
+  actualStart?: Date | string
+  actualEnd?: Date | string
+  status: "scheduled" | "in_progress" | "completed" | "missed"
+}
+
+export interface TimeEntry {
+  id: string
+  employeeId: string
+  date: Date | string
+  clockIn: Date | string
+  clockOut?: Date | string
+  breakTime: number // minutes
+  totalHours: number
+  overtime: number
+  status: "draft" | "submitted" | "approved" | "rejected"
+  approvedBy?: string
+  notes?: string
+}
+
+export interface HolidayRequest {
+  id: string
+  employeeId: string
+  employeeName: string
+  
+  // Request
+  startDate: Date | string
+  endDate: Date | string
+  totalDays: number
+  type: "vacation" | "sick" | "personal" | "unpaid"
+  reason?: string
+  
+  // Status
+  status: "pending" | "approved" | "rejected" | "cancelled"
+  reviewedBy?: string
+  reviewedByName?: string
+  reviewedAt?: Date | string
+  reviewNotes?: string
+  
+  // Documents
+  documentUrl?: string // For sick leave proof
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface IncidentReport {
+  id: string
+  reportNumber: string
+  
+  // Reporter
+  employeeId: string
+  employeeName: string
+  
+  // Incident
+  type: "safety" | "equipment" | "quality" | "customer" | "other"
+  severity: "low" | "medium" | "high" | "critical"
+  title: string
+  description: string
+  location: string
+  occurredAt: Date | string
+  
+  // Involved
+  involvedEmployees?: string[]
+  witnesses?: string[]
+  
+  // Status
+  status: "reported" | "investigating" | "resolved" | "closed"
+  assignedTo?: string
+  resolution?: string
+  
+  // Evidence
+  photos?: string[]
+  documents?: string[]
+  
+  // Follow-up
+  followUpRequired: boolean
+  followUpDate?: Date | string
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface EmployeeMessage {
+  id: string
+  
+  // Participants
+  from: string
+  fromName: string
+  to: string
+  toName: string
+  
+  // Message
+  subject?: string
+  body: string
+  
+  // Status
+  read: boolean
+  readAt?: Date | string
+  archived: boolean
+  
+  // Thread
+  threadId?: string
+  replyTo?: string
+  
+  // Attachments
+  attachments?: MessageAttachment[]
+  
+  // Metadata
+  sentAt: Date | string
+}
+
+export interface MessageAttachment {
+  id: string
+  name: string
+  size: number
+  url: string
+  type: string
+}
+
+export interface HelpRequest {
+  id: string
+  requestNumber: string
+  
+  // Employee
+  employeeId: string
+  employeeName: string
+  
+  // Request
+  category: "technical" | "hr" | "operational" | "other"
+  subject: string
+  description: string
+  priority: "low" | "normal" | "high" | "urgent"
+  
+  // Status
+  status: "open" | "assigned" | "in_progress" | "resolved" | "closed"
+  assignedTo?: string
+  assignedToName?: string
+  
+  // Resolution
+  resolution?: string
+  resolvedAt?: Date | string
+  
+  // Communication
+  messages: HelpMessage[]
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface HelpMessage {
+  id: string
+  from: string
+  fromName: string
+  body: string
+  timestamp: Date | string
+}
+
+export interface DocumentSignature {
+  id: string
+  documentId: string
+  documentName: string
+  documentUrl: string
+  
+  // Employee
+  employeeId: string
+  employeeName: string
+  
+  // Signature
+  signed: boolean
+  signedAt?: Date | string
+  signatureData?: string // Base64 signature image
+  
+  // Document Type
+  type: "policy" | "contract" | "form" | "acknowledgment" | "other"
+  
+  // Status
+  required: boolean
+  deadline?: Date | string
+  
+  // Metadata
+  sentAt: Date | string
+  sentBy: string
+}
+
+export interface EmployeeAnnouncement {
+  id: string
+  title: string
+  content: string
+  priority: "info" | "important" | "urgent"
+  category: "general" | "hr" | "safety" | "policy"
+  
+  // Targeting
+  targetRoles?: string[]
+  targetDepartments?: string[]
+  
+  // Status
+  published: boolean
+  publishedAt?: Date | string
+  expiresAt?: Date | string
+  
+  // Engagement
+  viewCount: number
+  acknowledgedBy: string[] // Employee IDs
+  
+  // Author
+  createdBy: string
+  createdByName: string
+  createdAt: Date | string
+}
+

apps/fabrikanabytok/lib/types/employee.types.ts

@@ -0,0 +1,236 @@
+/**
+ * Employee Management Types
+ * Comprehensive role-based access control for internal operations
+ */
+
+export type EmployeeRole =
+  | "warehouse_manager"
+  | "inventory_clerk"
+  | "picker"
+  | "packer"
+  | "shipper"
+  | "location_manager"
+  | "outsource_coordinator"
+  | "quality_controller"
+  | "assistant"
+
+export type Permission =
+  // Inventory Permissions
+  | "inventory.view"
+  | "inventory.edit"
+  | "inventory.adjust"
+  | "inventory.transfer"
+  | "inventory.count"
+  // Order Permissions
+  | "orders.view"
+  | "orders.pick"
+  | "orders.pack"
+  | "orders.ship"
+  | "orders.cancel"
+  // Location Permissions
+  | "location.view"
+  | "location.edit"
+  | "location.assign"
+  // Shipping Permissions
+  | "shipping.plan"
+  | "shipping.track"
+  | "shipping.label"
+  // Outsource Permissions
+  | "outsource.view"
+  | "outsource.manage"
+  | "outsource.receive"
+  // Reports Permissions
+  | "reports.view"
+  | "reports.generate"
+  | "reports.export"
+
+export interface Employee {
+  id: string // Custom UUID
+  userId: string // Reference to User account
+  employeeNumber: string // e.g., "EMP-001"
+  
+  // Personal Info
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+  
+  // Employment
+  role: EmployeeRole
+  permissions: Permission[]
+  department: string
+  position: string
+  supervisorId?: string
+  
+  // Status
+  status: "active" | "inactive" | "suspended"
+  hireDate: Date | string
+  terminationDate?: Date | string
+  
+  // Work Schedule
+  schedule: {
+    monday?: { start: string; end: string }
+    tuesday?: { start: string; end: string }
+    wednesday?: { start: string; end: string }
+    thursday?: { start: string; end: string }
+    friday?: { start: string; end: string }
+    saturday?: { start: string; end: string }
+    sunday?: { start: string; end: string }
+  }
+  
+  // Performance
+  metrics: EmployeeMetrics
+  
+  // Security
+  lastLogin?: Date | string
+  lastActivity?: Date | string
+  loginAttempts: number
+  ipAddresses: string[]
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface EmployeeMetrics {
+  // Productivity
+  totalActions: number
+  actionsToday: number
+  actionsThisWeek: number
+  actionsThisMonth: number
+  
+  // Quality
+  errorCount: number
+  errorRate: number // Percentage
+  accuracyRate: number // Percentage
+  
+  // Speed
+  avgActionTime: number // milliseconds
+  pickingSpeed?: number // items per hour
+  packingSpeed?: number // orders per hour
+  
+  // Efficiency
+  efficiencyScore: number // 0-100
+  productivityRank?: number // Among peers
+}
+
+export interface EmployeeAction {
+  id: string
+  employeeId: string
+  employeeName: string
+  
+  // Action Details
+  action: string // e.g., "inventory.adjust", "order.pick"
+  module: string // e.g., "inventory", "orders"
+  description: string
+  
+  // Data
+  before?: any // State before action
+  after?: any // State after action
+  changes?: any // What changed
+  
+  // Context
+  ipAddress: string
+  userAgent: string
+  sessionId: string
+  
+  // Confirmation
+  requiresConfirmation: boolean
+  confirmed: boolean
+  confirmationNote?: string
+  
+  // Result
+  status: "pending" | "completed" | "failed" | "cancelled"
+  result?: any
+  error?: string
+  
+  // Timing
+  startedAt: Date | string
+  completedAt?: Date | string
+  duration?: number // milliseconds
+  
+  // Metadata
+  reason?: string // Why action was taken
+  notes?: string // Additional notes
+  relatedActions?: string[] // IDs of related actions
+}
+
+export interface EmployeeSession {
+  id: string
+  employeeId: string
+  
+  // Session Info
+  startedAt: Date | string
+  endedAt?: Date | string
+  duration?: number
+  
+  // Device
+  ipAddress: string
+  userAgent: string
+  device: string
+  browser: string
+  
+  // Activity
+  actionsCount: number
+  pagesVisited: string[]
+  
+  // Status
+  status: "active" | "idle" | "ended"
+}
+
+export interface EmployeeAlert {
+  id: string
+  employeeId: string
+  
+  // Alert
+  type: "info" | "warning" | "error" | "critical"
+  title: string
+  message: string
+  
+  // Action Required
+  requiresAction: boolean
+  actionType?: string
+  actionData?: any
+  
+  // Status
+  read: boolean
+  readAt?: Date | string
+  dismissed: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  expiresAt?: Date | string
+}
+
+export interface EmployeePerformanceReport {
+  employeeId: string
+  period: {
+    start: Date | string
+    end: Date | string
+  }
+  
+  // Summary
+  totalActions: number
+  successfulActions: number
+  failedActions: number
+  averageActionTime: number
+  
+  // By Module
+  actionsByModule: Record<string, number>
+  
+  // Quality
+  errorRate: number
+  accuracyRate: number
+  
+  // Comparison
+  rankAmongPeers: number
+  percentile: number
+  
+  // Recommendations
+  strengths: string[]
+  improvements: string[]
+  
+  generatedAt: Date | string
+  generatedBy: string
+}
+

apps/fabrikanabytok/lib/types/excel-import.types.ts

@@ -0,0 +1,420 @@
+/**
+ * Excel Import Types
+ * AI-powered multi-sheet Excel file processing
+ */
+
+export type ExcelSheetType =
+  | "materials"         // Színminta (color/material catalog)
+  | "orders"           // Order data
+  | "production"       // Production planning
+  | "customers"        // Customer data
+  | "inventory"        // Inventory data
+  | "unknown"          // Not recognized
+
+export type ImportStatus =
+  | "pending"          // Várakozik
+  | "processing"       // Feldolgozás alatt
+  | "validating"       // Ellenőrzés
+  | "importing"        // Importálás
+  | "completed"        // Befejezve
+  | "failed"           // Sikertelen
+  | "partially_completed" // Részben sikeres
+
+export type ValidationSeverity = "error" | "warning" | "info"
+
+export interface ExcelFileMetadata {
+  fileName: string
+  fileSize: number
+  uploadedAt: Date | string
+  uploadedBy: string
+  uploadedByName: string
+  
+  // File details
+  sheetCount: number
+  totalRows: number
+  encoding?: string
+  
+  // Processing
+  processedAt?: Date | string
+  processingTime?: number  // milliseconds
+}
+
+export interface ExcelSheetInfo {
+  sheetName: string
+  sheetIndex: number
+  detectedType: ExcelSheetType
+  confidence: number       // AI confidence 0-1
+  
+  rowCount: number
+  columnCount: number
+  
+  // Detected structure
+  hasHeaders: boolean
+  headerRow?: number
+  dataStartRow: number
+  
+  // Column mapping
+  columns: Array<{
+    index: number
+    header: string
+    detectedField?: string
+    dataType: "string" | "number" | "date" | "boolean" | "mixed"
+    sampleValues: any[]
+  }>
+}
+
+export interface ValidationIssue {
+  severity: ValidationSeverity
+  row: number
+  column?: string
+  field?: string
+  message: string
+  suggestedFix?: string
+  autoFixable: boolean
+}
+
+export interface ImportPreviewItem {
+  rowNumber: number
+  action: "create" | "update" | "skip" | "error"
+  entity: "customer" | "order" | "product" | "material" | "accessory" | "worktop"
+  
+  // Parsed data
+  data: Record<string, any>
+  
+  // Matching
+  existingId?: string
+  existingData?: Record<string, any>
+  matchConfidence?: number
+  matchedBy?: string[]
+  
+  // Issues
+  issues: ValidationIssue[]
+  
+  // Status
+  canImport: boolean
+  requiresManualReview: boolean
+}
+
+export interface MaterialImportData {
+  code: string
+  colorName: string
+  materialType?: string
+  notes?: string
+  
+  // Matching
+  existingMaterialId?: string
+}
+
+export interface CustomerImportData {
+  // Identification
+  name: string
+  type: "individual" | "company"
+  
+  // Contact
+  email?: string
+  phone?: string
+  
+  // Address
+  city?: string
+  address?: string
+  zipCode?: string
+  
+  // Business
+  taxNumber?: string
+  
+  // Matching
+  existingCustomerId?: string
+  matchedBy?: "email" | "taxNumber" | "name"
+}
+
+export interface OrderItemImportData {
+  model: string
+  elementCode?: string
+  sizeCode?: string
+  
+  // Materials
+  corpColor?: string
+  front1?: string
+  front2?: string
+  worktopType?: string
+  drawerType?: string
+  
+  // Quantity
+  quantity: number
+  
+  // Type
+  itemType?: "elem" | "garnitura"
+  
+  // Matching
+  matchedProductId?: string
+  matchedMaterialIds?: Record<string, string>
+}
+
+export interface OrderImportData {
+  orderNumber?: string
+  orderDate?: Date | string
+  
+  // Customer
+  customerName: string
+  customerData?: CustomerImportData
+  
+  // Delivery
+  deliveryWeek?: number
+  deliveryYear?: number
+  deliveryDate?: Date | string
+  
+  // Items
+  items: OrderItemImportData[]
+  
+  // Financial
+  totalAmount?: number
+  
+  // Notes
+  notes?: string
+  
+  // Matching
+  existingOrderId?: string
+}
+
+export interface ExcelImportBatch {
+  id: string
+  
+  // File info
+  fileMetadata: ExcelFileMetadata
+  
+  // Sheets
+  sheets: ExcelSheetInfo[]
+  
+  // Preview
+  preview: ImportPreviewItem[]
+  previewLimit: number
+  
+  // Statistics
+  stats: {
+    totalRows: number
+    validRows: number
+    invalidRows: number
+    duplicateRows: number
+    
+    toCreate: number
+    toUpdate: number
+    toSkip: number
+    errors: number
+    warnings: number
+  }
+  
+  // AI Analysis
+  aiAnalysis: {
+    overallConfidence: number
+    recommendedActions: string[]
+    potentialIssues: string[]
+    suggestions: string[]
+  }
+  
+  // Validation
+  validationIssues: ValidationIssue[]
+  
+  // Configuration
+  importConfig: {
+    // Options
+    skipDuplicates: boolean
+    updateExisting: boolean
+    createMissing: boolean
+    
+    // Auto-fixes
+    autoFixEnabled: boolean
+    autoFixTypes: string[]
+    
+    // Matching strategy
+    matchStrategy: "strict" | "fuzzy" | "ai"
+    matchThreshold: number  // 0-1
+    
+    // What to import
+    importCustomers: boolean
+    importOrders: boolean
+    importProducts: boolean
+    importMaterials: boolean
+    importAccessories: boolean
+    
+    // Relationships
+    autoLinkCustomers: boolean
+    autoLinkProducts: boolean
+    autoLinkMaterials: boolean
+  }
+  
+  // Status
+  status: ImportStatus
+  
+  // Progress
+  progress: {
+    current: number
+    total: number
+    percent: number
+    estimatedTimeRemaining?: number
+  }
+  
+  // Results (after import)
+  results?: {
+    created: {
+      customers: number
+      orders: number
+      orderItems: number
+      materials: number
+      products: number
+      accessories: number
+    }
+    updated: {
+      customers: number
+      orders: number
+      products: number
+    }
+    skipped: number
+    failed: number
+    
+    // IDs of created entities
+    createdCustomerIds: string[]
+    createdOrderIds: string[]
+    createdMaterialIds: string[]
+    
+    // Errors
+    errors: Array<{
+      row: number
+      entity: string
+      error: string
+    }>
+  }
+  
+  // Processing
+  startedAt?: Date | string
+  completedAt?: Date | string
+  processingTime?: number
+  
+  // Rollback
+  canRollback: boolean
+  rollbackData?: {
+    createdIds: Record<string, string[]>
+    updatedEntities: Record<string, any[]>
+  }
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  createdByName: string
+}
+
+export interface ColumnMapping {
+  excelColumn: string
+  excelColumnIndex: number
+  targetField: string
+  dataType: string
+  
+  // Transformation
+  transform?: "uppercase" | "lowercase" | "trim" | "parse_date" | "parse_number" | "custom"
+  customTransform?: string
+  
+  // Validation
+  required: boolean
+  defaultValue?: any
+  
+  // AI suggestions
+  aiSuggestedField?: string
+  aiConfidence?: number
+}
+
+export interface ImportTemplate {
+  id: string
+  
+  // Template info
+  name: string
+  description?: string
+  
+  // For which sheet type
+  sheetType: ExcelSheetType
+  
+  // Column mappings
+  mappings: ColumnMapping[]
+  
+  // Expected structure
+  expectedHeaders: string[]
+  expectedColumns: number
+  
+  // Validation rules
+  validationRules: Array<{
+    field: string
+    rule: "required" | "unique" | "format" | "range" | "custom"
+    params?: any
+    message: string
+  }>
+  
+  // Usage
+  usageCount: number
+  lastUsedAt?: Date | string
+  
+  // Status
+  isDefault: boolean
+  isActive: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  updatedAt: Date | string
+}
+
+export interface AIImportSuggestion {
+  type: "fix" | "match" | "create" | "merge"
+  confidence: number
+  
+  description: string
+  reasoning: string
+  
+  // What to do
+  action: {
+    entity: string
+    operation: "create" | "update" | "link" | "skip"
+    data: Record<string, any>
+  }
+  
+  // Alternative suggestions
+  alternatives?: Array<{
+    description: string
+    confidence: number
+    data: Record<string, any>
+  }>
+  
+  // User decision
+  accepted?: boolean
+  acceptedAt?: Date | string
+  acceptedBy?: string
+}
+
+export interface ImportHistory {
+  id: string
+  batchId: string
+  
+  // Summary
+  fileName: string
+  importedBy: string
+  importedByName: string
+  importedAt: Date | string
+  
+  // Results
+  totalRows: number
+  successfulRows: number
+  failedRows: number
+  
+  created: Record<string, number>
+  updated: Record<string, number>
+  
+  // Status
+  status: ImportStatus
+  
+  // Duration
+  processingTime: number
+  
+  // Can rollback
+  canRollback: boolean
+  rolledBack: boolean
+  rolledBackAt?: Date | string
+  rolledBackBy?: string
+}
+

apps/fabrikanabytok/lib/types/file-manager.types.ts

@@ -0,0 +1,154 @@
+/**
+ * File Manager Type Definitions
+ * Comprehensive file management system types
+ */
+
+export type FileType = 
+  | "model" // .glb, .gltf, .obj, .fbx
+  | "image" // .jpg, .png, .webp, .svg
+  | "document" // .pdf, .doc, .docx
+  | "data" // .json, .csv, .xml
+  | "config" // .env, .config
+  | "template" // Email templates
+  | "translation" // i18n files
+  | "archive" // .zip, .tar, .gz
+  | "other"
+
+export type FileCategory = 
+  | "models" // 3D models for products
+  | "images" // Product images, assets
+  | "translations" // i18n JSON files
+  | "templates" // Email templates
+  | "config" // Configuration files
+  | "uploads" // User uploads
+  | "exports" // Exported designs
+  | "backups" // Database backups
+  | "documents" // PDFs, docs
+
+export interface FileItem {
+  id: string // Custom UUID
+  name: string
+  path: string // Full path from root
+  relativePath: string // Relative to storage root
+  type: FileType
+  category: FileCategory
+  extension: string
+  size: number // Bytes
+  mimeType: string
+  
+  // Metadata
+  uploadedBy: string // User ID
+  uploadedAt: Date
+  modifiedAt: Date
+  accessedAt?: Date
+  
+  // Status
+  isPublic: boolean
+  isSystemFile: boolean // Protected system files
+  
+  // 3D Model specific (if type === "model")
+  modelMetadata?: {
+    vertices: number
+    triangles: number
+    materials: number
+    textures: number
+    dimensions?: {
+      width: number
+      height: number
+      depth: number
+    }
+  }
+  
+  // Image specific
+  imageMetadata?: {
+    width: number
+    height: number
+    format: string
+  }
+  
+  // Relations
+  linkedTo?: string[] // IDs of products/designs using this file
+  tags: string[]
+  
+  // Storage
+  storageUrl: string // Actual file URL (Vercel Blob, S3, etc.)
+  thumbnailUrl?: string
+  
+  // Permissions
+  permissions: FilePermissions
+}
+
+export interface FolderItem {
+  id: string
+  name: string
+  path: string
+  parentId: string | null
+  category: FileCategory
+  
+  // Stats
+  fileCount: number
+  totalSize: number
+  
+  // Metadata
+  createdBy: string
+  createdAt: Date
+  modifiedAt: Date
+  
+  // Settings
+  isPublic: boolean
+  permissions: FilePermissions
+}
+
+export interface FilePermissions {
+  canRead: string[] // User IDs or roles
+  canWrite: string[] // User IDs or roles
+  canDelete: string[] // User IDs or roles
+  isPublic: boolean
+}
+
+export interface FileOperation {
+  type: "upload" | "download" | "delete" | "rename" | "move" | "copy"
+  fileId: string
+  userId: string
+  timestamp: Date
+  details?: any
+}
+
+export interface FileUploadProgress {
+  fileId: string
+  fileName: string
+  progress: number // 0-100
+  status: "pending" | "uploading" | "processing" | "complete" | "error"
+  error?: string
+}
+
+export interface BulkOperation {
+  operation: "delete" | "move" | "copy" | "tag"
+  fileIds: string[]
+  targetFolder?: string
+  tags?: string[]
+}
+
+export interface FileSearchFilters {
+  query?: string
+  type?: FileType[]
+  category?: FileCategory[]
+  uploadedBy?: string[]
+  dateFrom?: Date
+  dateTo?: Date
+  sizeMin?: number
+  sizeMax?: number
+  tags?: string[]
+  isPublic?: boolean
+}
+
+export interface FileStats {
+  totalFiles: number
+  totalSize: number
+  filesByType: Record<FileType, number>
+  filesByCategory: Record<FileCategory, number>
+  storageUsed: number
+  storageLimit: number
+  storagePercentage: number
+}
+

apps/fabrikanabytok/lib/types/import-log.types.ts

@@ -0,0 +1,54 @@
+export interface ImportLog {
+  id: string
+  type: "woocommerce" | "manual" | "csv" | "json"
+  status: "pending" | "running" | "completed" | "failed"
+  startedAt: Date
+  completedAt?: Date
+  startedBy: string // User ID
+  
+  // Configuration
+  options: {
+    mode?: "skip" | "update" | "replace"
+    checkBy?: "sku" | "slug" | "both"
+    downloadImages?: boolean
+    filePath?: string
+  }
+  
+  // Results
+  results?: {
+    success: number
+    updated: number
+    skipped: number
+    failed: number
+    categoriesCreated: number
+    variationsSkipped?: number
+    totalRows: number
+    imagesDownloaded?: number
+    imagesFailed?: number
+  }
+  
+  // Errors
+  errors?: Array<{
+    product: string
+    error: string
+  }>
+  
+  // Progress (for running imports)
+  progress?: number
+  currentStatus?: string
+  
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface ImportLogSummary {
+  totalImports: number
+  successfulImports: number
+  failedImports: number
+  runningImports: number
+  totalProductsImported: number
+  totalProductsUpdated: number
+  totalProductsSkipped: number
+  lastImportAt?: Date
+}
+

apps/fabrikanabytok/lib/types/import.types.ts

@@ -0,0 +1,81 @@
+/**
+ * Type definitions for the Product Import System
+ */
+
+// Import format types
+export type ImportFormat = "csv" | "xlsx" | "sql" | "json"
+
+// Parsed product data from CSV/JSON
+export interface ParsedProductData {
+  name: string
+  description: string
+  shortDescription?: string
+  price: number
+  compareAtPrice?: number
+  sku: string
+  stock: number
+  categories: string[]
+  tags: string[]
+  images: string[]
+  dimensions?: {
+    width: number
+    height: number
+    depth: number
+  }
+  specifications: Array<{
+    label: string
+    value: string
+    type: "text" | "number" | "select" | "multiselect"
+  }>
+  status: "draft" | "published" | "archived"
+}
+
+// Import result from server
+export interface ImportResult {
+  success: boolean
+  message: string
+  results: {
+    success: number
+    failed: number
+    errors: Array<{
+      product: string
+      error: string
+    }>
+  }
+  categoriesCreated?: string[]
+  tagsCreated?: string[]
+}
+
+// Validation result
+export interface ValidationResult {
+  valid: boolean
+  errors: string[]
+  warnings: string[]
+}
+
+// Import options
+export interface ImportOptions {
+  format?: ImportFormat
+  autoCategories?: boolean
+  autoTags?: boolean
+  validateBeforeImport?: boolean
+}
+
+// Import step types
+export type ImportStep = "upload" | "preview" | "importing" | "complete"
+
+// Category mapping
+export type CategoryMap = Record<string, string>
+
+// File parser function types
+export type FileParser = (file: File) => Promise<any[]>
+
+// Row parser function type
+export type RowParser = (row: any) => ParsedProductData | null
+
+// Data transformer function type
+export type DataTransformer = (
+  parsedData: ParsedProductData,
+  categoryIds: string[]
+) => any
+

apps/fabrikanabytok/lib/types/inventory.types.ts

@@ -0,0 +1,218 @@
+/**
+ * Inventory Management Types
+ * For warehouse and stock management
+ */
+
+export type AdjustmentReason =
+  | "received" // New stock received
+  | "sold" // Product sold
+  | "damaged" // Damaged goods
+  | "returned" // Customer return
+  | "lost" // Lost/stolen
+  | "correction" // Count correction
+  | "transfer" // Transferred to another location
+  | "other" // Other reason
+
+export interface InventoryAdjustment {
+  id: string
+  productId: string
+  productName: string
+  sku: string
+  
+  // Adjustment Details
+  previousQuantity: number
+  adjustmentQuantity: number // Can be negative
+  newQuantity: number
+  reason: AdjustmentReason
+  reasonNote?: string
+  
+  // Location
+  locationId?: string
+  locationName?: string
+  
+  // Employee
+  employeeId: string
+  employeeName: string
+  
+  // Confirmation
+  confirmed: boolean
+  confirmationNote?: string
+  approvedBy?: string
+  
+  // Cost Impact
+  unitCost?: number
+  totalCostImpact?: number
+  
+  // Metadata
+  timestamp: Date | string
+  ipAddress: string
+  sessionId: string
+}
+
+export interface StockTransfer {
+  id: string
+  transferNumber: string // e.g., "TRF-2024-001"
+  
+  // Product
+  productId: string
+  productName: string
+  sku: string
+  quantity: number
+  
+  // Locations
+  fromLocationId: string
+  fromLocationName: string
+  toLocationId: string
+  toLocationName: string
+  
+  // Status
+  status: "pending" | "in_transit" | "received" | "cancelled"
+  
+  // Employees
+  requestedBy: string
+  requestedByName: string
+  approvedBy?: string
+  approvedByName?: string
+  receivedBy?: string
+  receivedByName?: string
+  
+  // Timestamps
+  requestedAt: Date | string
+  approvedAt?: Date | string
+  shippedAt?: Date | string
+  receivedAt?: Date | string
+  
+  // Notes
+  reason: string
+  notes?: string
+}
+
+export interface StockCount {
+  id: string
+  countNumber: string // e.g., "CNT-2024-001"
+  
+  // Scope
+  locationId?: string
+  locationName?: string
+  productIds?: string[] // Specific products or all in location
+  
+  // Status
+  status: "scheduled" | "in_progress" | "completed" | "cancelled"
+  
+  // Results
+  items: StockCountItem[]
+  discrepanciesFound: number
+  totalVariance: number // Total difference in quantity
+  valueVariance?: number // Total cost difference
+  
+  // Employees
+  assignedTo: string[]
+  assignedToNames: string[]
+  completedBy?: string
+  completedByName?: string
+  
+  // Timestamps
+  scheduledFor: Date | string
+  startedAt?: Date | string
+  completedAt?: Date | string
+  
+  // Notes
+  notes?: string
+}
+
+export interface StockCountItem {
+  productId: string
+  productName: string
+  sku: string
+  
+  // Expected vs Actual
+  expectedQuantity: number
+  countedQuantity: number
+  variance: number
+  
+  // Location
+  locationId?: string
+  binNumber?: string
+  
+  // Status
+  counted: boolean
+  countedBy?: string
+  countedAt?: Date | string
+  
+  // Notes
+  notes?: string
+}
+
+export interface LocationStock {
+  locationId: string
+  locationName: string
+  productId: string
+  productName: string
+  sku: string
+  
+  // Quantity
+  quantity: number
+  reserved: number // Allocated to orders
+  available: number // quantity - reserved
+  
+  // Thresholds
+  minQuantity?: number
+  maxQuantity?: number
+  reorderPoint?: number
+  
+  // Metadata
+  lastUpdated: Date | string
+  lastCountedAt?: Date | string
+}
+
+export interface InventoryAlert {
+  id: string
+  type: "low_stock" | "out_of_stock" | "overstock" | "discrepancy" | "expiring"
+  severity: "low" | "medium" | "high" | "critical"
+  
+  // Product
+  productId: string
+  productName: string
+  sku: string
+  
+  // Details
+  currentQuantity: number
+  threshold?: number
+  message: string
+  
+  // Status
+  acknowledged: boolean
+  acknowledgedBy?: string
+  acknowledgedAt?: Date | string
+  resolved: boolean
+  resolvedAt?: Date | string
+  
+  // Metadata
+  createdAt: Date | string
+  locationId?: string
+}
+
+export interface InventoryStats {
+  totalProducts: number
+  totalQuantity: number
+  totalValue: number
+  
+  // By Status
+  inStock: number
+  lowStock: number
+  outOfStock: number
+  
+  // Movement
+  todayReceived: number
+  todaySold: number
+  todayAdjusted: number
+  
+  // Alerts
+  activeAlerts: number
+  criticalAlerts: number
+  
+  // Locations
+  totalLocations: number
+  capacityUsed: number // Percentage
+}
+

apps/fabrikanabytok/lib/types/invoice.types.ts

@@ -0,0 +1,428 @@
+/**
+ * Invoice Management Types
+ * Advanced invoicing system with PDF export and API integration
+ */
+
+export type InvoiceType =
+  | "invoice"           // Számla
+  | "proforma"          // Proforma számla
+  | "advance"           // Előlegszámla
+  | "final"             // Végszámla
+  | "credit_note"       // Jóváírás
+  | "correction"        // Helyesbítő számla
+
+export type InvoiceStatus =
+  | "draft"             // Piszkozat
+  | "pending"           // Függőben
+  | "sent"              // Kiküldve
+  | "viewed"            // Megtekintve
+  | "partially_paid"    // Részben fizetve
+  | "paid"              // Fizetve
+  | "overdue"           // Lejárt
+  | "cancelled"         // Törölve
+  | "refunded"          // Visszatérítve
+
+export type PaymentMethod =
+  | "bank_transfer"     // Banki átutalás
+  | "cash"              // Készpénz
+  | "card"              // Bankkártya
+  | "credit"            // Hitel
+  | "online"            // Online fizetés
+  | "installment"       // Részlet
+
+export type PaymentStatus =
+  | "unpaid"            // Nem fizetve
+  | "partially_paid"    // Részben fizetve
+  | "paid"              // Fizetve
+  | "overdue"           // Lejárt
+  | "refunded"          // Visszatérítve
+
+export interface InvoiceAddress {
+  // Company or Individual
+  isCompany: boolean
+  companyName?: string
+  taxNumber?: string
+  euTaxNumber?: string
+  
+  // Individual
+  name?: string
+  
+  // Address
+  country: string
+  zipCode: string
+  city: string
+  address: string
+  
+  // Contact
+  email?: string
+  phone?: string
+}
+
+export interface InvoiceItem {
+  id: string
+  
+  // Product/Service
+  type: "product" | "service" | "shipping" | "fee" | "discount"
+  name: string
+  description?: string
+  sku?: string
+  
+  // Reference to order
+  orderId?: string
+  orderItemId?: string
+  
+  // Quantity & Unit
+  quantity: number
+  unit: string            // db, m, m², óra, etc.
+  
+  // Pricing
+  unitPrice: number
+  unitPriceNet: number
+  
+  // Discounts
+  discountPercent: number
+  discountAmount: number
+  
+  // Subtotal
+  subtotal: number
+  subtotalNet: number
+  
+  // Tax
+  taxPercent: number
+  taxAmount: number
+  
+  // Total
+  total: number
+  totalNet: number
+  
+  // Notes
+  notes?: string
+}
+
+export interface Invoice {
+  id: string
+  
+  // Invoice Number
+  invoiceNumber: string         // Unique, auto-generated
+  invoiceType: InvoiceType
+  
+  // Reference
+  externalInvoiceNumber?: string // From external system
+  orderIds: string[]            // Related orders
+  orderNumbers: string[]
+  
+  // Related Invoices
+  parentInvoiceId?: string      // For credit notes, corrections
+  relatedInvoiceIds: string[]
+  
+  // Dates
+  invoiceDate: Date | string
+  dueDate: Date | string
+  paymentDeadlineDays: number
+  deliveryDate?: Date | string
+  fulfillmentDate?: Date | string
+  
+  // Customer/Buyer
+  customerId: string
+  customerName: string
+  billingAddress: InvoiceAddress
+  shippingAddress?: InvoiceAddress
+  
+  // Seller (Company)
+  sellerInfo: {
+    companyName: string
+    taxNumber: string
+    euTaxNumber?: string
+    address: InvoiceAddress
+    bankAccount: string
+    bankName: string
+    email: string
+    phone: string
+    website?: string
+    logo?: string
+  }
+  
+  // Items
+  items: InvoiceItem[]
+  
+  // Financial Summary
+  subtotal: number
+  subtotalNet: number
+  
+  // Discounts
+  totalDiscountAmount: number
+  totalDiscountPercent: number
+  
+  // Shipping
+  shippingCost: number
+  shippingCostNet: number
+  
+  // Tax Breakdown
+  taxBreakdown: Array<{
+    taxPercent: number
+    taxableAmount: number
+    taxAmount: number
+  }>
+  totalTaxAmount: number
+  
+  // Totals
+  totalNet: number              // Nettó összesen
+  totalGross: number            // Bruttó összesen
+  
+  // Payment
+  paymentMethod?: PaymentMethod
+  paymentStatus: PaymentStatus
+  paidAmount: number
+  remainingAmount: number
+  
+  // Payment History
+  payments: Array<{
+    id: string
+    date: Date | string
+    amount: number
+    method: PaymentMethod
+    reference?: string
+    notes?: string
+    recordedBy: string
+    recordedByName: string
+  }>
+  
+  // Currency
+  currency: string
+  exchangeRate: number
+  
+  // Status
+  status: InvoiceStatus
+  
+  // Status History
+  statusHistory: Array<{
+    status: InvoiceStatus
+    changedAt: Date | string
+    changedBy: string
+    changedByName: string
+    notes?: string
+  }>
+  
+  // Notes
+  publicNotes?: string          // Visible to customer
+  privateNotes?: string         // Internal only
+  paymentInstructions?: string
+  
+  // Legal & Compliance
+  taxType: "normal" | "reverse_charge" | "exempt" | "zero_rated"
+  reverseCharge: boolean
+  reverseChargeReason?: string
+  
+  // Documents
+  pdfUrl?: string
+  pdfGeneratedAt?: Date | string
+  
+  // Attachments
+  attachments: Array<{
+    id: string
+    name: string
+    url: string
+    type: string
+    uploadedBy: string
+    uploadedAt: Date | string
+  }>
+  
+  // Communication
+  sentTo: string[]              // Email addresses
+  sentAt?: Date | string
+  viewedAt?: Date | string
+  viewCount: number
+  
+  // Reminders
+  remindersSent: Array<{
+    sentAt: Date | string
+    sentTo: string[]
+    type: "reminder" | "overdue" | "final_notice"
+  }>
+  
+  // API Integration (Számlázz.hu)
+  externalApiSync: {
+    provider: "szamlazz.hu" | "billingo" | "nav" | "other"
+    synced: boolean
+    syncedAt?: Date | string
+    externalId?: string
+    lastSyncError?: string
+  }
+  
+  // Cancellation
+  cancelled: boolean
+  cancelledAt?: Date | string
+  cancelledBy?: string
+  cancellationReason?: string
+  
+  // Refund
+  refunded: boolean
+  refundedAmount: number
+  refundedAt?: Date | string
+  refundReason?: string
+  
+  // Analytics
+  profitMargin: number
+  profitAmount: number
+  
+  // Permissions
+  canEdit: boolean
+  canDelete: boolean
+  editableUntil?: Date | string
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  createdByName: string
+  updatedAt: Date | string
+  updatedBy: string
+  
+  // System
+  isLocked: boolean
+  lockedAt?: Date | string
+  lockedBy?: string
+  
+  // Custom fields
+  customFields?: Record<string, any>
+  
+  // Tags
+  tags: string[]
+}
+
+export interface InvoiceTemplate {
+  id: string
+  
+  // Template Info
+  name: string
+  description?: string
+  
+  // Design
+  layout: "classic" | "modern" | "minimal" | "professional"
+  primaryColor: string
+  accentColor: string
+  fontFamily: string
+  fontSize: number
+  
+  // Logo
+  showLogo: boolean
+  logoPosition: "left" | "center" | "right"
+  logoUrl?: string
+  
+  // Header
+  showCompanyInfo: boolean
+  headerText?: string
+  
+  // Footer
+  footerText?: string
+  showPageNumbers: boolean
+  
+  // Content Sections
+  sections: {
+    showItemImages: boolean
+    showItemSKU: boolean
+    showItemNotes: boolean
+    showSubtotals: boolean
+    showTaxBreakdown: boolean
+    showPaymentInstructions: boolean
+    showBankDetails: boolean
+    showQRCode: boolean
+  }
+  
+  // Language
+  language: string
+  
+  // Terms & Conditions
+  termsAndConditions?: string
+  
+  // Status
+  isDefault: boolean
+  isActive: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface InvoiceSettings {
+  id: string
+  
+  // Numbering
+  invoicePrefix: string
+  invoiceStartNumber: number
+  invoiceNumberFormat: string  // e.g., "INV-{YEAR}-{NUMBER}"
+  
+  // Different prefixes for types
+  proformaPrefix: string
+  creditNotePrefix: string
+  
+  // Default values
+  defaultTaxPercent: number
+  defaultPaymentDeadlineDays: number
+  defaultCurrency: string
+  
+  // Company details (seller)
+  companyName: string
+  taxNumber: string
+  euTaxNumber?: string
+  bankAccount: string
+  bankName: string
+  address: InvoiceAddress
+  email: string
+  phone: string
+  website?: string
+  logoUrl?: string
+  
+  // Terms
+  defaultTermsAndConditions?: string
+  defaultPaymentInstructions?: string
+  
+  // Reminders
+  enableAutomaticReminders: boolean
+  reminderDaysBefore: number[]
+  overdueReminderDays: number[]
+  
+  // PDF
+  defaultTemplateId: string
+  
+  // API Integration
+  szamlazzHuEnabled: boolean
+  szamlazzHuApiKey?: string
+  szamlazzHuUsername?: string
+  
+  // Metadata
+  updatedAt: Date | string
+  updatedBy: string
+}
+
+export interface InvoiceStats {
+  period: {
+    start: Date | string
+    end: Date | string
+  }
+  
+  // Count
+  totalInvoices: number
+  paidInvoices: number
+  unpaidInvoices: number
+  overdueInvoices: number
+  
+  // Financial
+  totalRevenue: number
+  totalPaid: number
+  totalOutstanding: number
+  totalOverdue: number
+  
+  // Average
+  averageInvoiceValue: number
+  averagePaymentTime: number  // days
+  
+  // By Status
+  byStatus: Record<InvoiceStatus, number>
+  
+  // By Payment Method
+  byPaymentMethod: Record<PaymentMethod, number>
+  
+  // Calculated at
+  calculatedAt: Date | string
+}
+

apps/fabrikanabytok/lib/types/location.types.ts

@@ -0,0 +1,76 @@
+/**
+ * Location & Warehouse Management Types
+ */
+
+export type LocationType = "warehouse" | "store" | "virtual" | "dropship"
+
+export interface Location {
+  id: string
+  code: string // e.g., "WH-001", "BIN-A-12"
+  name: string
+  type: LocationType
+  
+  // Hierarchy
+  parentId?: string // For nested locations (warehouse > zone > aisle > bin)
+  path: string // Full path: "WH-001/ZONE-A/AISLE-1/BIN-12"
+  level: number // 0=warehouse, 1=zone, 2=aisle, 3=bin
+  
+  // Physical
+  address?: {
+    street: string
+    city: string
+    state: string
+    zip: string
+    country: string
+  }
+  
+  // Capacity
+  capacity: {
+    maxItems?: number
+    maxWeight?: number // kg
+    maxVolume?: number // m³
+    currentItems: number
+    currentWeight: number
+    currentVolume: number
+    utilizationRate: number // percentage
+  }
+  
+  // Properties
+  isPickable: boolean // Can pick from this location
+  isReceivable: boolean // Can receive to this location
+  isActive: boolean
+  
+  // Climate
+  climateControlled?: boolean
+  temperatureRange?: { min: number; max: number }
+  
+  // Stock
+  stockCount: number // Number of SKUs in location
+  totalQuantity: number // Total units in location
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+  lastCountedAt?: Date | string
+}
+
+export interface LocationStock {
+  id: string
+  locationId: string
+  productId: string
+  
+  // Quantity
+  quantity: number
+  reserved: number // Allocated to orders
+  available: number // quantity - reserved
+  
+  // Position
+  binNumber?: string
+  shelfLevel?: number
+  position?: { x: number; y: number; z: number }
+  
+  // Metadata
+  lastUpdated: Date | string
+  lastCountedAt?: Date | string
+}
+

apps/fabrikanabytok/lib/types/manufacturing-order.types.ts

@@ -0,0 +1,296 @@
+/**
+ * Manufacturing Order Management Types
+ * Complete order lifecycle for custom furniture manufacturing
+ */
+
+export type OrderStatus = 
+  | "draft"           // Piszkozat
+  | "confirmed"       // Megerősítve
+  | "in_production"   // Gyártásban
+  | "quality_check"   // Minőségellenőrzés
+  | "ready"           // Kész
+  | "shipped"         // Kiszállítva
+  | "delivered"       // Átadva
+  | "cancelled"       // Törölve
+  | "on_hold"         // Várakozik
+
+export type OrderPriority = "low" | "normal" | "high" | "urgent"
+
+export type OrderItemType = "elem" | "garnitura"
+
+export interface OrderItemMeasurements {
+  width?: number      // Szélesség
+  height?: number     // Magasság
+  depth?: number      // Mélység
+  thickness?: number  // Vastagság
+  unit: "mm" | "cm" | "m"
+}
+
+export interface OrderItemMaterial {
+  // Corvux materials
+  corpColor?: string        // Korpusz szín
+  front1Color?: string      // Front 1 szín
+  front2Color?: string      // Front 2 szín
+  
+  // Worktop
+  worktopType?: string      // Munkalap típus
+  worktopColor?: string     // Munkalap szín
+  worktopThickness?: number // Munkalap vastagság
+  
+  // Other materials
+  drawerType?: string       // Tálca típus
+  handleType?: string       // Fogantyú típus
+  edgeBanding?: string      // Élzárás típus
+}
+
+export interface OrderItemProduction {
+  assignedTo?: string       // Employee ID
+  assignedToName?: string
+  assignedAt?: Date | string
+  
+  startedAt?: Date | string
+  completedAt?: Date | string
+  
+  stage: "pending" | "cutting" | "assembly" | "finishing" | "quality_check" | "packaging" | "completed"
+  
+  clockInTime?: Date | string
+  clockOutTime?: Date | string
+  actualProductionTime?: number // minutes
+  
+  notes?: string
+  issues?: string[]
+  
+  qualityCheckPassed?: boolean
+  qualityCheckBy?: string
+  qualityCheckAt?: Date | string
+  qualityCheckNotes?: string
+}
+
+export interface ManufacturingOrderItem {
+  id: string
+  orderId: string
+  
+  // Product Info
+  productId?: string        // Link to product if exists
+  productName: string
+  model: string            // Csenge, Milano, Fanni, etc.
+  sku?: string
+  
+  // Item Details
+  itemType: OrderItemType  // elem or garnitura
+  elementCode?: string     // ELEMKÓD (e.g., 200/60, F2A60/80)
+  
+  // Measurements
+  measurements: OrderItemMeasurements
+  sizeCode?: string        // SZÉL-MÉRET from Excel
+  
+  // Materials
+  materials: OrderItemMaterial
+  
+  // Quantity & Pricing
+  quantity: number         // DB
+  unitPrice: number
+  discount: number         // percentage or fixed
+  subtotal: number
+  
+  // Production
+  production: OrderItemProduction
+  
+  // Garnitura specific
+  isPartOfSet: boolean
+  setId?: string          // If part of garnitura
+  setItems?: string[]     // IDs of other items in the set
+  
+  // Notes
+  notes?: string
+  specialInstructions?: string
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface ManufacturingOrder {
+  id: string
+  
+  // Order Identification
+  orderNumber: string      // Unique auto-incremental
+  externalOrderNumber?: string // From customer/Excel
+  
+  // Customer Info
+  customerId: string
+  customerName: string
+  customerType: "individual" | "company"
+  
+  // Order Details
+  status: OrderStatus
+  priority: OrderPriority
+  
+  // Items
+  items: ManufacturingOrderItem[]
+  totalItems: number
+  
+  // Financial
+  subtotal: number
+  discountAmount: number
+  discountPercent: number
+  taxAmount: number
+  taxPercent: number
+  shippingCost: number
+  totalAmount: number
+  
+  // Applied Discounts/Coupons
+  appliedCoupons: Array<{
+    couponId: string
+    couponCode: string
+    discountAmount: number
+  }>
+  
+  // Delivery
+  deliveryWeek?: number    // Week number (1-52)
+  deliveryYear?: number
+  deliveryDate?: Date | string
+  deliveryAddress?: {
+    country: string
+    zipCode: string
+    city: string
+    address: string
+  }
+  deliveryMethod?: string
+  deliveryNotes?: string
+  
+  // Production
+  productionStartDate?: Date | string
+  productionEndDate?: Date | string
+  estimatedCompletionDate?: Date | string
+  actualCompletionDate?: Date | string
+  
+  // Assigned Staff
+  assignedSalesRep?: string
+  assignedProductionManager?: string
+  assignedQualityController?: string
+  
+  // Invoice
+  invoiceId?: string
+  invoiceNumber?: string
+  invoiceStatus?: "not_invoiced" | "partially_invoiced" | "fully_invoiced"
+  
+  // Payment
+  paymentStatus: "unpaid" | "partially_paid" | "paid" | "refunded"
+  paymentMethod?: string
+  paidAmount: number
+  
+  // Notes & Communication
+  customerNotes?: string
+  internalNotes?: string
+  specialRequirements?: string
+  
+  // Tracking
+  statusHistory: Array<{
+    status: OrderStatus
+    changedAt: Date | string
+    changedBy: string
+    changedByName: string
+    notes?: string
+  }>
+  
+  // Files & Documents
+  attachments: Array<{
+    id: string
+    name: string
+    url: string
+    type: string
+    uploadedBy: string
+    uploadedAt: Date | string
+  }>
+  
+  // Excel Import Metadata
+  importedFromExcel: boolean
+  importBatchId?: string
+  excelSheetName?: string
+  excelRowNumber?: number
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  createdByName: string
+  updatedAt: Date | string
+  updatedBy: string
+  
+  // System
+  isActive: boolean
+  tags: string[]
+  customFields?: Record<string, any>
+}
+
+export interface ProductionSchedule {
+  id: string
+  
+  // Time Period
+  weekNumber: number
+  year: number
+  startDate: Date | string
+  endDate: Date | string
+  
+  // Orders scheduled
+  orders: Array<{
+    orderId: string
+    orderNumber: string
+    priority: OrderPriority
+    estimatedHours: number
+  }>
+  
+  // Capacity
+  totalCapacityHours: number
+  scheduledHours: number
+  availableHours: number
+  utilizationPercent: number
+  
+  // Employee assignments
+  employeeAssignments: Array<{
+    employeeId: string
+    employeeName: string
+    assignedOrders: string[]
+    estimatedHours: number
+  }>
+  
+  // Status
+  status: "planning" | "active" | "completed"
+  
+  // Notes
+  notes?: string
+  
+  // Metadata
+  createdAt: Date | string
+  updatedBy: string
+  updatedAt: Date | string
+}
+
+export interface OrderProductionMetrics {
+  orderId: string
+  orderNumber: string
+  
+  // Timing
+  totalEstimatedTime: number // minutes
+  totalActualTime: number    // minutes
+  efficiency: number         // percentage
+  
+  // Progress
+  totalItems: number
+  completedItems: number
+  inProgressItems: number
+  pendingItems: number
+  progressPercent: number
+  
+  // Quality
+  qualityIssues: number
+  reworkRequired: number
+  
+  // Employees
+  employeesAssigned: number
+  totalManHours: number
+  
+  // Calculated at
+  calculatedAt: Date | string
+}
+