From c0bf263cfb3bcdda88aea54a51f2381de1452e70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Hortob=C3=A1gyi?= <hortobagyigergely001@gmail.com>
Date: Fri, 28 Nov 2025 20:47:40 +0100
Subject: [PATCH] feat: add UI component library and type definitions

---
 .../shared/action-confirmation-dialog.tsx     | 225 ++++++
 .../components/shared/error-boundary.tsx      |  97 +++
 .../components/shared/feature-flag.tsx        |  46 ++
 .../components/shared/global-search.tsx       |  95 +++
 .../components/shared/inventory-sync.tsx      |  54 ++
 .../shared/keyboard-shortcuts-dialog.tsx      |  84 ++
 .../components/shared/loading-skeleton.tsx    |  49 ++
 .../components/shared/mobile-nav.tsx          |  30 +
 .../components/shared/notification-center.tsx | 162 ++++
 .../components/shared/tooltip-help.tsx        |  27 +
 .../components/ui/accordion.tsx               |  66 ++
 .../components/ui/alert-dialog.tsx            | 157 ++++
 apps/fabrikanabytok/components/ui/alert.tsx   |  66 ++
 .../components/ui/aspect-ratio.tsx            |  11 +
 apps/fabrikanabytok/components/ui/avatar.tsx  |  53 ++
 apps/fabrikanabytok/components/ui/badge.tsx   |  46 ++
 .../components/ui/breadcrumb.tsx              | 109 +++
 .../components/ui/button-group.tsx            |  83 ++
 apps/fabrikanabytok/components/ui/button.tsx  |  60 ++
 .../fabrikanabytok/components/ui/calendar.tsx | 213 +++++
 apps/fabrikanabytok/components/ui/card.tsx    |  92 +++
 .../fabrikanabytok/components/ui/carousel.tsx | 241 ++++++
 apps/fabrikanabytok/components/ui/chart.tsx   | 353 +++++++++
 .../fabrikanabytok/components/ui/checkbox.tsx |  32 +
 .../components/ui/collapsible.tsx             |  33 +
 apps/fabrikanabytok/components/ui/command.tsx | 184 +++++
 .../components/ui/context-menu.tsx            | 252 ++++++
 apps/fabrikanabytok/components/ui/dialog.tsx  | 143 ++++
 apps/fabrikanabytok/components/ui/drawer.tsx  | 135 ++++
 .../components/ui/dropdown-menu.tsx           | 257 +++++++
 apps/fabrikanabytok/components/ui/empty.tsx   | 104 +++
 apps/fabrikanabytok/components/ui/field.tsx   | 244 ++++++
 apps/fabrikanabytok/components/ui/form.tsx    | 167 ++++
 .../components/ui/hover-card.tsx              |  44 ++
 .../components/ui/input-group.tsx             | 169 ++++
 .../components/ui/input-otp.tsx               |  77 ++
 apps/fabrikanabytok/components/ui/input.tsx   |  21 +
 apps/fabrikanabytok/components/ui/item.tsx    | 193 +++++
 apps/fabrikanabytok/components/ui/kbd.tsx     |  28 +
 apps/fabrikanabytok/components/ui/label.tsx   |  24 +
 apps/fabrikanabytok/components/ui/menubar.tsx | 276 +++++++
 .../components/ui/navigation-menu.tsx         | 166 ++++
 .../components/ui/pagination.tsx              | 127 +++
 apps/fabrikanabytok/components/ui/popover.tsx |  48 ++
 .../fabrikanabytok/components/ui/progress.tsx |  31 +
 .../components/ui/radio-group.tsx             |  45 ++
 .../components/ui/resizable.tsx               |  56 ++
 .../components/ui/scroll-area.tsx             |  58 ++
 apps/fabrikanabytok/components/ui/select.tsx  | 185 +++++
 .../components/ui/separator.tsx               |  28 +
 apps/fabrikanabytok/components/ui/sheet.tsx   | 139 ++++
 apps/fabrikanabytok/components/ui/sidebar.tsx | 726 ++++++++++++++++++
 .../fabrikanabytok/components/ui/skeleton.tsx |  13 +
 apps/fabrikanabytok/components/ui/slider.tsx  |  63 ++
 apps/fabrikanabytok/components/ui/sonner.tsx  |  25 +
 apps/fabrikanabytok/components/ui/spinner.tsx |  16 +
 apps/fabrikanabytok/components/ui/switch.tsx  |  31 +
 apps/fabrikanabytok/components/ui/table.tsx   | 116 +++
 apps/fabrikanabytok/components/ui/tabs.tsx    |  66 ++
 .../fabrikanabytok/components/ui/textarea.tsx |  18 +
 apps/fabrikanabytok/components/ui/toast.tsx   | 129 ++++
 apps/fabrikanabytok/components/ui/toaster.tsx |  35 +
 .../components/ui/toggle-group.tsx            |  73 ++
 apps/fabrikanabytok/components/ui/toggle.tsx  |  47 ++
 apps/fabrikanabytok/components/ui/tooltip.tsx |  61 ++
 .../components/ui/use-mobile.tsx              |  19 +
 .../fabrikanabytok/components/ui/use-toast.ts | 191 +++++
 apps/fabrikanabytok/hooks/index.ts            |  29 +
 .../hooks/use-advanced-three.ts               | 353 +++++++++
 .../hooks/use-ai-chat-drawer.ts               |  22 +
 apps/fabrikanabytok/hooks/use-autosave.ts     |  93 +++
 apps/fabrikanabytok/hooks/use-design-sync.ts  |  49 ++
 .../hooks/use-kitchen-designer.ts             |  74 ++
 apps/fabrikanabytok/hooks/use-mobile.ts       |  19 +
 .../hooks/use-planner-collaboration.ts        | 208 +++++
 .../hooks/use-planner-export.ts               | 183 +++++
 apps/fabrikanabytok/hooks/use-toast.ts        | 191 +++++
 .../lib/schemas/accessory.schemas.ts          |  84 ++
 .../lib/schemas/coupon.schemas.ts             |  63 ++
 .../lib/schemas/customer.schemas.ts           |  84 ++
 .../lib/schemas/invoice.schemas.ts            |  24 +
 .../schemas/manufacturing-order.schemas.ts    |  91 +++
 .../lib/schemas/worktop.schemas.ts            |  63 ++
 .../lib/types/accessory.types.ts              | 398 ++++++++++
 apps/fabrikanabytok/lib/types/admin.types.ts  |  96 +++
 apps/fabrikanabytok/lib/types/ai.types.ts     |  68 ++
 apps/fabrikanabytok/lib/types/chat.types.ts   |  43 ++
 .../lib/types/customer.types.ts               | 179 +++++
 .../lib/types/discount-coupon.types.ts        | 410 ++++++++++
 .../lib/types/email-template.types.ts         | 175 +++++
 .../lib/types/employee-portal.types.ts        | 254 ++++++
 .../lib/types/employee.types.ts               | 236 ++++++
 .../lib/types/excel-import.types.ts           | 420 ++++++++++
 .../lib/types/file-manager.types.ts           | 154 ++++
 .../lib/types/import-log.types.ts             |  54 ++
 apps/fabrikanabytok/lib/types/import.types.ts |  81 ++
 .../lib/types/inventory.types.ts              | 218 ++++++
 .../fabrikanabytok/lib/types/invoice.types.ts | 428 +++++++++++
 .../lib/types/location.types.ts               |  76 ++
 .../lib/types/manufacturing-order.types.ts    | 296 +++++++
 .../lib/types/microservice.types.ts           | 155 ++++
 apps/fabrikanabytok/lib/types/model.types.ts  |  98 +++
 apps/fabrikanabytok/lib/types/next-auth.d.ts  |  61 ++
 .../lib/types/order-picking.types.ts          | 128 +++
 apps/fabrikanabytok/lib/types/order.types.ts  |  74 ++
 .../lib/types/outsource.types.ts              |  40 +
 .../fabrikanabytok/lib/types/planner.types.ts | 234 ++++++
 .../fabrikanabytok/lib/types/product.types.ts | 203 +++++
 .../lib/types/progress.types.ts               |  63 ++
 .../lib/types/role-management.types.ts        | 126 +++
 .../lib/types/settings.types.ts               | 361 +++++++++
 .../lib/types/shipping.types.ts               | 149 ++++
 apps/fabrikanabytok/lib/types/socket.types.ts | 192 +++++
 .../lib/types/subscription.types.ts           |  66 ++
 apps/fabrikanabytok/lib/types/user.types.ts   |  94 +++
 .../fabrikanabytok/lib/types/worktop.types.ts | 292 +++++++
 .../lib/utils/activity-tracker.ts             | 293 +++++++
 .../fabrikanabytok/lib/utils/cache-manager.ts | 164 ++++
 .../fabrikanabytok/lib/utils/canvas-export.ts | 134 ++++
 apps/fabrikanabytok/lib/utils/csv-parser.ts   | 122 +++
 apps/fabrikanabytok/lib/utils/data-export.ts  |  76 ++
 .../lib/utils/employee-logger.ts              | 351 +++++++++
 apps/fabrikanabytok/lib/utils/glb-export.ts   | 170 ++++
 .../fabrikanabytok/lib/utils/glb-validator.ts | 334 ++++++++
 .../lib/utils/image-downloader.ts             | 123 +++
 .../fabrikanabytok/lib/utils/import-parser.ts | 435 +++++++++++
 apps/fabrikanabytok/lib/utils/jwt.ts          |  13 +
 apps/fabrikanabytok/lib/utils/logger.ts       |  58 ++
 .../fabrikanabytok/lib/utils/pdf-generator.ts | 231 ++++++
 apps/fabrikanabytok/lib/utils/performance.ts  | 144 ++++
 apps/fabrikanabytok/lib/utils/permissions.ts  | 192 +++++
 .../lib/utils/physics-system.ts               | 403 ++++++++++
 .../lib/utils/product-to-planner.ts           | 175 +++++
 .../fabrikanabytok/lib/utils/serialization.ts | 131 ++++
 apps/fabrikanabytok/lib/utils/snap-helpers.ts | 423 ++++++++++
 .../lib/utils/testing-helpers.ts              | 169 ++++
 136 files changed, 19007 insertions(+)
 create mode 100644 apps/fabrikanabytok/components/shared/action-confirmation-dialog.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/error-boundary.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/feature-flag.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/global-search.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/inventory-sync.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/keyboard-shortcuts-dialog.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/loading-skeleton.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/mobile-nav.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/notification-center.tsx
 create mode 100644 apps/fabrikanabytok/components/shared/tooltip-help.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/accordion.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/alert-dialog.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/alert.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/aspect-ratio.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/avatar.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/badge.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/breadcrumb.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/button-group.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/button.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/calendar.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/card.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/carousel.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/chart.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/checkbox.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/collapsible.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/command.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/context-menu.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/dialog.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/drawer.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/dropdown-menu.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/empty.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/field.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/form.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/hover-card.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/input-group.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/input-otp.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/input.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/item.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/kbd.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/label.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/menubar.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/navigation-menu.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/pagination.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/popover.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/progress.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/radio-group.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/resizable.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/scroll-area.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/select.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/separator.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/sheet.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/sidebar.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/skeleton.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/slider.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/sonner.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/spinner.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/switch.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/table.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/tabs.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/textarea.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/toast.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/toaster.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/toggle-group.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/toggle.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/tooltip.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/use-mobile.tsx
 create mode 100644 apps/fabrikanabytok/components/ui/use-toast.ts
 create mode 100644 apps/fabrikanabytok/hooks/index.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-advanced-three.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-ai-chat-drawer.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-autosave.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-design-sync.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-kitchen-designer.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-mobile.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-planner-collaboration.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-planner-export.ts
 create mode 100644 apps/fabrikanabytok/hooks/use-toast.ts
 create mode 100644 apps/fabrikanabytok/lib/schemas/accessory.schemas.ts
 create mode 100644 apps/fabrikanabytok/lib/schemas/coupon.schemas.ts
 create mode 100644 apps/fabrikanabytok/lib/schemas/customer.schemas.ts
 create mode 100644 apps/fabrikanabytok/lib/schemas/invoice.schemas.ts
 create mode 100644 apps/fabrikanabytok/lib/schemas/manufacturing-order.schemas.ts
 create mode 100644 apps/fabrikanabytok/lib/schemas/worktop.schemas.ts
 create mode 100644 apps/fabrikanabytok/lib/types/accessory.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/admin.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/ai.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/chat.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/customer.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/discount-coupon.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/email-template.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/employee-portal.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/employee.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/excel-import.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/file-manager.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/import-log.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/import.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/inventory.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/invoice.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/location.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/manufacturing-order.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/microservice.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/model.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/next-auth.d.ts
 create mode 100644 apps/fabrikanabytok/lib/types/order-picking.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/order.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/outsource.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/planner.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/product.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/progress.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/role-management.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/settings.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/shipping.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/socket.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/subscription.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/user.types.ts
 create mode 100644 apps/fabrikanabytok/lib/types/worktop.types.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/activity-tracker.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/cache-manager.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/canvas-export.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/csv-parser.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/data-export.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/employee-logger.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/glb-export.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/glb-validator.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/image-downloader.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/import-parser.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/jwt.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/logger.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/pdf-generator.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/performance.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/permissions.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/physics-system.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/product-to-planner.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/serialization.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/snap-helpers.ts
 create mode 100644 apps/fabrikanabytok/lib/utils/testing-helpers.ts

diff --git a/apps/fabrikanabytok/components/shared/action-confirmation-dialog.tsx b/apps/fabrikanabytok/components/shared/action-confirmation-dialog.tsx
new file mode 100644
index 0000000..2ca3883
--- /dev/null
+++ b/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 }
+}
+
diff --git a/apps/fabrikanabytok/components/shared/error-boundary.tsx b/apps/fabrikanabytok/components/shared/error-boundary.tsx
new file mode 100644
index 0000000..ea30071
--- /dev/null
+++ b/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>
+    )
+  }
+}
+
diff --git a/apps/fabrikanabytok/components/shared/feature-flag.tsx b/apps/fabrikanabytok/components/shared/feature-flag.tsx
new file mode 100644
index 0000000..fc0bab8
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/components/shared/global-search.tsx b/apps/fabrikanabytok/components/shared/global-search.tsx
new file mode 100644
index 0000000..adf9337
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/apps/fabrikanabytok/components/shared/inventory-sync.tsx b/apps/fabrikanabytok/components/shared/inventory-sync.tsx
new file mode 100644
index 0000000..651db07
--- /dev/null
+++ b/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
+}
diff --git a/apps/fabrikanabytok/components/shared/keyboard-shortcuts-dialog.tsx b/apps/fabrikanabytok/components/shared/keyboard-shortcuts-dialog.tsx
new file mode 100644
index 0000000..151328b
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/apps/fabrikanabytok/components/shared/loading-skeleton.tsx b/apps/fabrikanabytok/components/shared/loading-skeleton.tsx
new file mode 100644
index 0000000..8a490e9
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/apps/fabrikanabytok/components/shared/mobile-nav.tsx b/apps/fabrikanabytok/components/shared/mobile-nav.tsx
new file mode 100644
index 0000000..233f3ac
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/apps/fabrikanabytok/components/shared/notification-center.tsx b/apps/fabrikanabytok/components/shared/notification-center.tsx
new file mode 100644
index 0000000..da89026
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/apps/fabrikanabytok/components/shared/tooltip-help.tsx b/apps/fabrikanabytok/components/shared/tooltip-help.tsx
new file mode 100644
index 0000000..74db371
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/apps/fabrikanabytok/components/ui/accordion.tsx b/apps/fabrikanabytok/components/ui/accordion.tsx
new file mode 100644
index 0000000..e538a33
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/alert-dialog.tsx b/apps/fabrikanabytok/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..9704452
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/alert.tsx b/apps/fabrikanabytok/components/ui/alert.tsx
new file mode 100644
index 0000000..e6751ab
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/aspect-ratio.tsx b/apps/fabrikanabytok/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..40bb120
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/avatar.tsx b/apps/fabrikanabytok/components/ui/avatar.tsx
new file mode 100644
index 0000000..aa98465
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/badge.tsx b/apps/fabrikanabytok/components/ui/badge.tsx
new file mode 100644
index 0000000..fc4126b
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/breadcrumb.tsx b/apps/fabrikanabytok/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..1750ff2
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/button-group.tsx b/apps/fabrikanabytok/components/ui/button-group.tsx
new file mode 100644
index 0000000..09d4430
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/button.tsx b/apps/fabrikanabytok/components/ui/button.tsx
new file mode 100644
index 0000000..f64632d
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/calendar.tsx b/apps/fabrikanabytok/components/ui/calendar.tsx
new file mode 100644
index 0000000..eaa373e
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/card.tsx b/apps/fabrikanabytok/components/ui/card.tsx
new file mode 100644
index 0000000..db7dd3c
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/carousel.tsx b/apps/fabrikanabytok/components/ui/carousel.tsx
new file mode 100644
index 0000000..d4a768e
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/chart.tsx b/apps/fabrikanabytok/components/ui/chart.tsx
new file mode 100644
index 0000000..421fe58
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/checkbox.tsx b/apps/fabrikanabytok/components/ui/checkbox.tsx
new file mode 100644
index 0000000..37d340f
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/collapsible.tsx b/apps/fabrikanabytok/components/ui/collapsible.tsx
new file mode 100644
index 0000000..3cbdff6
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/command.tsx b/apps/fabrikanabytok/components/ui/command.tsx
new file mode 100644
index 0000000..4833ca8
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/context-menu.tsx b/apps/fabrikanabytok/components/ui/context-menu.tsx
new file mode 100644
index 0000000..9e536f2
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/dialog.tsx b/apps/fabrikanabytok/components/ui/dialog.tsx
new file mode 100644
index 0000000..243fb19
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/drawer.tsx b/apps/fabrikanabytok/components/ui/drawer.tsx
new file mode 100644
index 0000000..307bdce
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/dropdown-menu.tsx b/apps/fabrikanabytok/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..a2096fa
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/empty.tsx b/apps/fabrikanabytok/components/ui/empty.tsx
new file mode 100644
index 0000000..2c57e94
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/field.tsx b/apps/fabrikanabytok/components/ui/field.tsx
new file mode 100644
index 0000000..f4c2f21
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/form.tsx b/apps/fabrikanabytok/components/ui/form.tsx
new file mode 100644
index 0000000..6233f94
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/hover-card.tsx b/apps/fabrikanabytok/components/ui/hover-card.tsx
new file mode 100644
index 0000000..55d6f76
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/input-group.tsx b/apps/fabrikanabytok/components/ui/input-group.tsx
new file mode 100644
index 0000000..183d297
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/input-otp.tsx b/apps/fabrikanabytok/components/ui/input-otp.tsx
new file mode 100644
index 0000000..3f6c477
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/input.tsx b/apps/fabrikanabytok/components/ui/input.tsx
new file mode 100644
index 0000000..f199a06
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/item.tsx b/apps/fabrikanabytok/components/ui/item.tsx
new file mode 100644
index 0000000..efdf58c
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/kbd.tsx b/apps/fabrikanabytok/components/ui/kbd.tsx
new file mode 100644
index 0000000..9897f35
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/label.tsx b/apps/fabrikanabytok/components/ui/label.tsx
new file mode 100644
index 0000000..5d66da2
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/menubar.tsx b/apps/fabrikanabytok/components/ui/menubar.tsx
new file mode 100644
index 0000000..791360c
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/navigation-menu.tsx b/apps/fabrikanabytok/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..53e7543
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/pagination.tsx b/apps/fabrikanabytok/components/ui/pagination.tsx
new file mode 100644
index 0000000..ce8f25d
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/popover.tsx b/apps/fabrikanabytok/components/ui/popover.tsx
new file mode 100644
index 0000000..b4fc827
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/progress.tsx b/apps/fabrikanabytok/components/ui/progress.tsx
new file mode 100644
index 0000000..ab38305
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/radio-group.tsx b/apps/fabrikanabytok/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e9af867
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/resizable.tsx b/apps/fabrikanabytok/components/ui/resizable.tsx
new file mode 100644
index 0000000..5c2f91d
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/scroll-area.tsx b/apps/fabrikanabytok/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..dc98eb0
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/select.tsx b/apps/fabrikanabytok/components/ui/select.tsx
new file mode 100644
index 0000000..5db0bca
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/separator.tsx b/apps/fabrikanabytok/components/ui/separator.tsx
new file mode 100644
index 0000000..f43aaf5
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/sheet.tsx b/apps/fabrikanabytok/components/ui/sheet.tsx
new file mode 100644
index 0000000..51041fa
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/sidebar.tsx b/apps/fabrikanabytok/components/ui/sidebar.tsx
new file mode 100644
index 0000000..ee74343
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/skeleton.tsx b/apps/fabrikanabytok/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e3beb90
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/slider.tsx b/apps/fabrikanabytok/components/ui/slider.tsx
new file mode 100644
index 0000000..773e064
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/sonner.tsx b/apps/fabrikanabytok/components/ui/sonner.tsx
new file mode 100644
index 0000000..0626caf
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/spinner.tsx b/apps/fabrikanabytok/components/ui/spinner.tsx
new file mode 100644
index 0000000..e51fc6d
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/switch.tsx b/apps/fabrikanabytok/components/ui/switch.tsx
new file mode 100644
index 0000000..3c4cfa3
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/table.tsx b/apps/fabrikanabytok/components/ui/table.tsx
new file mode 100644
index 0000000..fcdd10c
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/tabs.tsx b/apps/fabrikanabytok/components/ui/tabs.tsx
new file mode 100644
index 0000000..ff67104
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/textarea.tsx b/apps/fabrikanabytok/components/ui/textarea.tsx
new file mode 100644
index 0000000..3809775
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/toast.tsx b/apps/fabrikanabytok/components/ui/toast.tsx
new file mode 100644
index 0000000..40eedf5
--- /dev/null
+++ b/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,
+}
diff --git a/apps/fabrikanabytok/components/ui/toaster.tsx b/apps/fabrikanabytok/components/ui/toaster.tsx
new file mode 100644
index 0000000..3b91885
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/fabrikanabytok/components/ui/toggle-group.tsx b/apps/fabrikanabytok/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..0ab9971
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/toggle.tsx b/apps/fabrikanabytok/components/ui/toggle.tsx
new file mode 100644
index 0000000..ad6b286
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/tooltip.tsx b/apps/fabrikanabytok/components/ui/tooltip.tsx
new file mode 100644
index 0000000..877239c
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/components/ui/use-mobile.tsx b/apps/fabrikanabytok/components/ui/use-mobile.tsx
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/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
+}
diff --git a/apps/fabrikanabytok/components/ui/use-toast.ts b/apps/fabrikanabytok/components/ui/use-toast.ts
new file mode 100644
index 0000000..8932bc5
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/hooks/index.ts b/apps/fabrikanabytok/hooks/index.ts
new file mode 100644
index 0000000..069480f
--- /dev/null
+++ b/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'
+
diff --git a/apps/fabrikanabytok/hooks/use-advanced-three.ts b/apps/fabrikanabytok/hooks/use-advanced-three.ts
new file mode 100644
index 0000000..39a61cd
--- /dev/null
+++ b/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),
+  }
+}
+
diff --git a/apps/fabrikanabytok/hooks/use-ai-chat-drawer.ts b/apps/fabrikanabytok/hooks/use-ai-chat-drawer.ts
new file mode 100644
index 0000000..100c696
--- /dev/null
+++ b/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 }),
+}))
+
diff --git a/apps/fabrikanabytok/hooks/use-autosave.ts b/apps/fabrikanabytok/hooks/use-autosave.ts
new file mode 100644
index 0000000..532c3f3
--- /dev/null
+++ b/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
+  }
+}
+
diff --git a/apps/fabrikanabytok/hooks/use-design-sync.ts b/apps/fabrikanabytok/hooks/use-design-sync.ts
new file mode 100644
index 0000000..7b93fb4
--- /dev/null
+++ b/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 }
+}
+
diff --git a/apps/fabrikanabytok/hooks/use-kitchen-designer.ts b/apps/fabrikanabytok/hooks/use-kitchen-designer.ts
new file mode 100644
index 0000000..92b3eaf
--- /dev/null
+++ b/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
+  }
+}
diff --git a/apps/fabrikanabytok/hooks/use-mobile.ts b/apps/fabrikanabytok/hooks/use-mobile.ts
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/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
+}
diff --git a/apps/fabrikanabytok/hooks/use-planner-collaboration.ts b/apps/fabrikanabytok/hooks/use-planner-collaboration.ts
new file mode 100644
index 0000000..e27c7a6
--- /dev/null
+++ b/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,
+  }
+}
+
diff --git a/apps/fabrikanabytok/hooks/use-planner-export.ts b/apps/fabrikanabytok/hooks/use-planner-export.ts
new file mode 100644
index 0000000..f6a4987
--- /dev/null
+++ b/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,
+  }
+}
+
diff --git a/apps/fabrikanabytok/hooks/use-toast.ts b/apps/fabrikanabytok/hooks/use-toast.ts
new file mode 100644
index 0000000..a495ffb
--- /dev/null
+++ b/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 }
diff --git a/apps/fabrikanabytok/lib/schemas/accessory.schemas.ts b/apps/fabrikanabytok/lib/schemas/accessory.schemas.ts
new file mode 100644
index 0000000..b3349b2
--- /dev/null
+++ b/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>
+
diff --git a/apps/fabrikanabytok/lib/schemas/coupon.schemas.ts b/apps/fabrikanabytok/lib/schemas/coupon.schemas.ts
new file mode 100644
index 0000000..6ba6ef2
--- /dev/null
+++ b/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>
+
diff --git a/apps/fabrikanabytok/lib/schemas/customer.schemas.ts b/apps/fabrikanabytok/lib/schemas/customer.schemas.ts
new file mode 100644
index 0000000..171e08e
--- /dev/null
+++ b/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>
+
diff --git a/apps/fabrikanabytok/lib/schemas/invoice.schemas.ts b/apps/fabrikanabytok/lib/schemas/invoice.schemas.ts
new file mode 100644
index 0000000..b41a924
--- /dev/null
+++ b/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>
+
diff --git a/apps/fabrikanabytok/lib/schemas/manufacturing-order.schemas.ts b/apps/fabrikanabytok/lib/schemas/manufacturing-order.schemas.ts
new file mode 100644
index 0000000..1b1346b
--- /dev/null
+++ b/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>
+
diff --git a/apps/fabrikanabytok/lib/schemas/worktop.schemas.ts b/apps/fabrikanabytok/lib/schemas/worktop.schemas.ts
new file mode 100644
index 0000000..4cb8e97
--- /dev/null
+++ b/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>
+
diff --git a/apps/fabrikanabytok/lib/types/accessory.types.ts b/apps/fabrikanabytok/lib/types/accessory.types.ts
new file mode 100644
index 0000000..4968654
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/admin.types.ts b/apps/fabrikanabytok/lib/types/admin.types.ts
new file mode 100644
index 0000000..8068ea7
--- /dev/null
+++ b/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
+}
diff --git a/apps/fabrikanabytok/lib/types/ai.types.ts b/apps/fabrikanabytok/lib/types/ai.types.ts
new file mode 100644
index 0000000..959e9de
--- /dev/null
+++ b/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
+}
diff --git a/apps/fabrikanabytok/lib/types/chat.types.ts b/apps/fabrikanabytok/lib/types/chat.types.ts
new file mode 100644
index 0000000..42260f7
--- /dev/null
+++ b/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[]
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/types/customer.types.ts b/apps/fabrikanabytok/lib/types/customer.types.ts
new file mode 100644
index 0000000..e28ca27
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/discount-coupon.types.ts b/apps/fabrikanabytok/lib/types/discount-coupon.types.ts
new file mode 100644
index 0000000..2a5eec0
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/email-template.types.ts b/apps/fabrikanabytok/lib/types/email-template.types.ts
new file mode 100644
index 0000000..b4b7cde
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/employee-portal.types.ts b/apps/fabrikanabytok/lib/types/employee-portal.types.ts
new file mode 100644
index 0000000..8c37b1a
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/employee.types.ts b/apps/fabrikanabytok/lib/types/employee.types.ts
new file mode 100644
index 0000000..2d5b40c
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/excel-import.types.ts b/apps/fabrikanabytok/lib/types/excel-import.types.ts
new file mode 100644
index 0000000..647d044
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/file-manager.types.ts b/apps/fabrikanabytok/lib/types/file-manager.types.ts
new file mode 100644
index 0000000..7b62c47
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/import-log.types.ts b/apps/fabrikanabytok/lib/types/import-log.types.ts
new file mode 100644
index 0000000..9bfdaed
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/import.types.ts b/apps/fabrikanabytok/lib/types/import.types.ts
new file mode 100644
index 0000000..5601fb7
--- /dev/null
+++ b/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
+
diff --git a/apps/fabrikanabytok/lib/types/inventory.types.ts b/apps/fabrikanabytok/lib/types/inventory.types.ts
new file mode 100644
index 0000000..d4045ec
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/invoice.types.ts b/apps/fabrikanabytok/lib/types/invoice.types.ts
new file mode 100644
index 0000000..709ac3f
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/location.types.ts b/apps/fabrikanabytok/lib/types/location.types.ts
new file mode 100644
index 0000000..5c7cc58
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/manufacturing-order.types.ts b/apps/fabrikanabytok/lib/types/manufacturing-order.types.ts
new file mode 100644
index 0000000..1967e2d
--- /dev/null
+++ b/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
+}
+
diff --git a/apps/fabrikanabytok/lib/types/microservice.types.ts b/apps/fabrikanabytok/lib/types/microservice.types.ts
new file mode 100644
index 0000000..7860a19
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/microservice.types.ts
@@ -0,0 +1,155 @@
+/**
+ * Microservice Management Types
+ * For automation, scheduling, and AI-driven workflows
+ */
+
+export type ServiceStatus = "running" | "stopped" | "error" | "starting" | "stopping"
+export type ServiceType = "scheduler" | "processor" | "ai_agent" | "webhook" | "worker" | "cron"
+export type ScheduleFrequency = "once" | "minute" | "hourly" | "daily" | "weekly" | "monthly" | "custom"
+
+export interface Microservice {
+  id: string // Custom UUID
+  name: string
+  description: string
+  type: ServiceType
+  status: ServiceStatus
+  
+  // Configuration
+  enabled: boolean
+  autoStart: boolean
+  restartOnFailure: boolean
+  maxRetries: number
+  
+  // Execution
+  schedule?: ScheduleConfig
+  workflow?: WorkflowConfig
+  
+  // Endpoints
+  webhookUrl?: string
+  healthCheckUrl?: string
+  
+  // Resources
+  resources: {
+    cpu?: number // Percentage
+    memory?: number // MB
+    timeout?: number // Seconds
+  }
+  
+  // Monitoring
+  lastRun?: Date
+  lastStatus?: "success" | "failure"
+  lastError?: string
+  runCount: number
+  successCount: number
+  failureCount: number
+  avgExecutionTime: number // ms
+  
+  // Logs
+  logs: ServiceLog[]
+  
+  // Metadata
+  createdBy: string
+  createdAt: Date
+  updatedAt: Date
+  tags: string[]
+}
+
+export interface ScheduleConfig {
+  frequency: ScheduleFrequency
+  cronExpression?: string // For custom schedules
+  timezone: string
+  startDate?: Date
+  endDate?: Date
+  runOnDays?: number[] // 0-6 (Sunday-Saturday)
+  runAtTime?: string // "HH:MM"
+  enabled: boolean
+}
+
+export interface WorkflowConfig {
+  steps: WorkflowStep[]
+  onSuccess?: WorkflowAction[]
+  onFailure?: WorkflowAction[]
+  variables: Record<string, any>
+}
+
+export interface WorkflowStep {
+  id: string
+  name: string
+  type: "http_request" | "database_query" | "ai_task" | "email" | "file_operation" | "custom"
+  config: any
+  retry: boolean
+  continueOnError: boolean
+  timeout: number
+}
+
+export interface WorkflowAction {
+  type: "notify" | "email" | "webhook" | "log"
+  config: any
+}
+
+export interface ServiceLog {
+  id: string
+  timestamp: Date
+  level: "info" | "warn" | "error"
+  message: string
+  metadata?: any
+  executionTime?: number
+}
+
+export interface AIAgent {
+  id: string
+  name: string
+  description: string
+  type: "assistant" | "analyzer" | "optimizer" | "monitor"
+  
+  // AI Configuration
+  model: string // GPT-4, Claude, etc.
+  systemPrompt: string
+  temperature: number
+  maxTokens: number
+  
+  // Triggers
+  triggers: AgentTrigger[]
+  
+  // Actions
+  actions: AgentAction[]
+  
+  // State
+  status: ServiceStatus
+  lastTriggered?: Date
+  triggerCount: number
+  
+  // Monitoring
+  successRate: number
+  avgResponseTime: number
+  costPerRun: number
+  
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface AgentTrigger {
+  id: string
+  type: "schedule" | "event" | "webhook" | "manual"
+  config: any
+  enabled: boolean
+}
+
+export interface AgentAction {
+  id: string
+  type: "generate_design" | "optimize_layout" | "send_email" | "update_database" | "api_call"
+  config: any
+  enabled: boolean
+}
+
+export interface ScheduledTask {
+  id: string
+  serviceId: string
+  scheduledFor: Date
+  status: "pending" | "running" | "completed" | "failed" | "cancelled"
+  result?: any
+  error?: string
+  executionTime?: number
+  createdAt: Date
+}
+
diff --git a/apps/fabrikanabytok/lib/types/model.types.ts b/apps/fabrikanabytok/lib/types/model.types.ts
new file mode 100644
index 0000000..6ee8ab5
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/model.types.ts
@@ -0,0 +1,98 @@
+export interface Model3D {
+  _id?: string
+  name: string
+  slug: string
+  description?: string
+  category: string // Reference to category
+  tags: string[]
+
+  // File information
+  glbUrl: string
+  thumbnailUrl?: string
+  fileSize: number // in bytes
+
+  // 3D specifications
+  dimensions: {
+    width: number // in cm
+    height: number
+    depth: number
+  }
+
+  // Snap points for planner
+  snapPoints: Array<{
+    x: number
+    y: number
+    z: number
+    type: "wall" | "corner" | "floor" | "ceiling"
+  }>
+
+  // Material variants
+  materials: Array<{
+    id: string
+    name: string
+    textureUrl?: string
+    color?: string
+  }>
+
+  // Pricing per material
+  pricing: Array<{
+    materialId: string
+    price: number
+    compareAtPrice?: number
+  }>
+
+  // Product linking
+  linkedProducts: string[] // Product IDs
+
+  // Access control
+  accessTier: "free" | "basic" | "premium" | "enterprise"
+
+  // Version control
+  version: number
+  previousVersions?: Array<{
+    version: number
+    glbUrl: string
+    updatedAt: Date
+  }>
+
+  // Metadata
+  status: "active" | "inactive"
+  featured: boolean
+  downloads: number
+  createdAt: Date
+  updatedAt: Date
+  createdBy: string // User ID
+}
+
+export interface ModelCategory {
+  _id?: string
+  name: string
+  slug: string
+  description?: string
+  icon?: string
+  parentId?: string // For hierarchical categories
+  order: number
+  status: "active" | "inactive"
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface MaterialLibrary {
+  _id?: string
+  name: string
+  type: "wood" | "metal" | "stone" | "glass" | "fabric" | "other"
+  color?: string
+  textureUrl?: string
+  normalMapUrl?: string
+  roughnessMapUrl?: string
+  metallicMapUrl?: string
+  properties: {
+    roughness: number
+    metallic: number
+    reflectivity: number
+  }
+  tags: string[]
+  status: "active" | "inactive"
+  createdAt: Date
+  updatedAt: Date
+}
diff --git a/apps/fabrikanabytok/lib/types/next-auth.d.ts b/apps/fabrikanabytok/lib/types/next-auth.d.ts
new file mode 100644
index 0000000..06ce01e
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/next-auth.d.ts
@@ -0,0 +1,61 @@
+import "next-auth"
+import "next-auth/jwt"
+import type { UserRole } from "./user.types"
+import type { Permission } from "./employee.types"
+
+declare module "next-auth" {
+  interface User {
+    id: string
+    email: string
+    name?: string
+    firstName: string
+    lastName: string
+    role: UserRole
+    avatar: string | null
+    emailVerified: boolean
+    // Employee-specific fields
+    isEmployee?: boolean
+    employeeId?: string
+    employeeNumber?: string
+    department?: string
+    position?: string
+    permissions?: Permission[]
+  }
+
+  interface Session {
+    user: {
+      id: string
+      email: string
+      firstName: string
+      lastName: string
+      role: UserRole
+      avatar: string | null
+      emailVerified?: boolean | Date
+      // Employee-specific fields
+      isEmployee?: boolean
+      employeeId?: string
+      employeeNumber?: string
+      department?: string
+      position?: string
+      permissions?: Permission[]
+    }
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    id: string
+    role: UserRole
+    firstName: string
+    lastName: string
+    avatar: string | null
+    emailVerified?: boolean | Date
+    // Employee-specific fields
+    isEmployee?: boolean
+    employeeId?: string
+    employeeNumber?: string
+    department?: string
+    position?: string
+    permissions?: Permission[]
+  }
+}
diff --git a/apps/fabrikanabytok/lib/types/order-picking.types.ts b/apps/fabrikanabytok/lib/types/order-picking.types.ts
new file mode 100644
index 0000000..c24ef75
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/order-picking.types.ts
@@ -0,0 +1,128 @@
+/**
+ * Order Picking & Fulfillment Types
+ * Warehouse picking operations
+ */
+
+export type PickStatus = "pending" | "assigned" | "in_progress" | "picked" | "verified" | "cancelled"
+export type PickPriority = "low" | "normal" | "high" | "urgent"
+
+export interface PickList {
+  id: string
+  pickListNumber: string // e.g., "PICK-2024-001"
+  
+  // Orders
+  orderIds: string[]
+  orderNumbers: string[]
+  
+  // Items
+  items: PickItem[]
+  totalItems: number
+  totalQuantity: number
+  
+  // Status
+  status: PickStatus
+  priority: PickPriority
+  
+  // Assignment
+  assignedTo?: string
+  assignedToName?: string
+  assignedAt?: Date | string
+  
+  // Timing
+  createdAt: Date | string
+  startedAt?: Date | string
+  completedAt?: Date | string
+  estimatedTime?: number // minutes
+  actualTime?: number // minutes
+  
+  // Location
+  pickingRoute?: string[]
+  currentLocation?: string
+  
+  // Progress
+  pickedItems: number
+  progress: number // 0-100
+  
+  // Notes
+  notes?: string
+  specialInstructions?: string
+}
+
+export interface PickItem {
+  id: string
+  productId: string
+  productName: string
+  sku: string
+  
+  // Quantity
+  quantityOrdered: number
+  quantityPicked: number
+  quantityShort: number // If not enough stock
+  
+  // Location
+  locationId: string
+  locationName: string
+  binNumber?: string
+  
+  // Status
+  status: "pending" | "picked" | "short" | "cancelled"
+  pickedAt?: Date | string
+  pickedBy?: string
+  
+  // Verification
+  verified: boolean
+  verifiedBy?: string
+  verifiedAt?: Date | string
+  
+  // Notes
+  notes?: string
+}
+
+export interface PickingBatch {
+  id: string
+  batchNumber: string
+  
+  // Pick Lists
+  pickListIds: string[]
+  totalPickLists: number
+  
+  // Assignment
+  pickerIds: string[]
+  pickerNames: string[]
+  
+  // Status
+  status: "pending" | "in_progress" | "completed"
+  
+  // Timing
+  createdAt: Date | string
+  completedAt?: Date | string
+  
+  // Performance
+  totalItems: number
+  pickedItems: number
+  averagePickTime: number // seconds per item
+}
+
+export interface PickerPerformance {
+  pickerId: string
+  pickerName: string
+  
+  // Today
+  todayPicks: number
+  todayItems: number
+  todayTime: number // minutes
+  
+  // Averages
+  avgPicksPerHour: number
+  avgItemsPerHour: number
+  avgTimePerPick: number // minutes
+  
+  // Quality
+  accuracy: number // percentage
+  errorCount: number
+  
+  // Ranking
+  rank: number
+  percentile: number
+}
+
diff --git a/apps/fabrikanabytok/lib/types/order.types.ts b/apps/fabrikanabytok/lib/types/order.types.ts
new file mode 100644
index 0000000..e9eb174
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/order.types.ts
@@ -0,0 +1,74 @@
+export type OrderStatus = "pending" | "processing" | "shipped" | "delivered" | "cancelled" | "refunded"
+export type PaymentStatus = "pending" | "paid" | "failed" | "refunded"
+
+export interface Order {
+  id: string
+  orderNumber: string
+  userId: string
+  items: OrderItem[]
+  subtotal: number
+  tax: number
+  shipping: number
+  discount: number
+  total: number
+  currency: string
+  status: OrderStatus
+  paymentStatus: PaymentStatus
+  shippingAddress: Address
+  billingAddress: Address
+  paymentMethod: string
+  stripePaymentIntentId?: string
+  designId?: string
+  notes?: string
+  trackingNumber?: string
+  createdAt: Date
+  updatedAt: Date
+  paidAt?: Date
+  shippedAt?: Date
+  deliveredAt?: Date
+}
+
+export interface OrderItem {
+  id: string
+  productId: string
+  variantId?: string
+  name: string
+  sku: string
+  quantity: number
+  price: number
+  total: number
+  imageUrl?: string
+  specifications?: Record<string, string>
+}
+
+export interface Address {
+  firstName: string
+  lastName: string
+  company?: string
+  address1: string
+  address2?: string
+  city: string
+  postalCode: string
+  country: string
+  phone: string
+}
+
+export interface Cart {
+  id: string
+  userId?: string
+  sessionId: string
+  items: CartItem[]
+  subtotal: number
+  updatedAt: Date
+  expiresAt: Date
+}
+
+export interface CartItem {
+  id: string
+  productId: string
+  variantId?: string
+  quantity: number
+  price: number
+  imageUrl?: string
+  name: string
+}
diff --git a/apps/fabrikanabytok/lib/types/outsource.types.ts b/apps/fabrikanabytok/lib/types/outsource.types.ts
new file mode 100644
index 0000000..8890d67
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/outsource.types.ts
@@ -0,0 +1,40 @@
+/**
+ * Outsource & Vendor Management Types
+ */
+
+export interface Vendor {
+  id: string
+  code: string
+  name: string
+  contactPerson: string
+  email: string
+  phone: string
+  address: any
+  rating: number
+  isActive: boolean
+  paymentTerms: string
+  currency: string
+  createdAt: Date | string
+}
+
+export interface PurchaseOrder {
+  id: string
+  poNumber: string
+  vendorId: string
+  vendorName: string
+  items: POItem[]
+  totalAmount: number
+  status: "draft" | "sent" | "confirmed" | "receiving" | "completed" | "cancelled"
+  expectedDelivery?: Date | string
+  createdBy: string
+  createdAt: Date | string
+}
+
+export interface POItem {
+  productId: string
+  productName: string
+  quantity: number
+  unitCost: number
+  totalCost: number
+}
+
diff --git a/apps/fabrikanabytok/lib/types/planner.types.ts b/apps/fabrikanabytok/lib/types/planner.types.ts
new file mode 100644
index 0000000..2340665
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/planner.types.ts
@@ -0,0 +1,234 @@
+export interface Design {
+  id: string
+  userId: string
+  name: string
+  description?: string
+  roomDimensions: RoomDimensions
+  components: DesignComponent[]
+  placedObjects: PlacedObject[] // New property for advanced planner
+  materials: Record<string, string>
+  thumbnailUrl?: string
+  totalPrice: number
+  isPublic: boolean
+  sharedWith: string[]
+  createdAt: Date | string // Support both Date objects and ISO strings for server/client compatibility
+  updatedAt: Date | string
+  lastEditedAt: Date | string
+  
+  // Advanced design features
+  layers: DesignLayer[] // Layer organization
+  snapSettings: SnapSettings // Snap configuration
+  renderSettings: RenderSettings // Rendering preferences
+  cameraPresets: CameraPreset[] // Saved camera positions
+}
+
+export interface DesignLayer {
+  id: string
+  name: string
+  visible: boolean
+  locked: boolean
+  color: string // Layer color for identification
+  order: number
+  objectIds: string[] // Objects in this layer
+}
+
+export interface SnapSettings {
+  enabled: boolean
+  gridSize: number
+  snapToObjects: boolean
+  snapToWalls: boolean
+  snapAngle: number // Angle snapping in degrees
+  snapDistance: number // Distance threshold for snapping
+  showGuides: boolean // Show alignment guides
+}
+
+export interface RenderSettings {
+  quality: "draft" | "preview" | "high" | "ultra"
+  shadows: boolean
+  shadowQuality: "low" | "medium" | "high"
+  ambientOcclusion: boolean
+  antialiasing: boolean
+  postProcessing: boolean | undefined
+  environmentMap?: string // HDRI map URL
+  lightingPreset: "day" | "night" | "studio" | "outdoor" | "custom"
+}
+
+export interface CameraPreset {
+  id: string
+  name: string
+  position: [number, number, number]
+  target: [number, number, number]
+  fov: number
+  isOrthographic: boolean
+}
+
+export interface RoomDimensions {
+  width: number
+  length: number
+  height: number
+  unit: "cm" | "m"
+}
+
+export interface DesignComponent {
+  id: string
+  modelId: string
+  name: string
+  position: Vector3D
+  rotation: Vector3D
+  scale: Vector3D
+  materialOverrides: Record<string, string>
+  productId?: string
+  price: number
+}
+
+export interface Vector3D {
+  x: number
+  y: number
+  z: number
+}
+
+export interface Model3D {
+  id: string
+  name: string
+  description?: string
+  fileUrl: string
+  thumbnailUrl: string
+  categoryId: string
+  tags: string[]
+  dimensions: ModelDimensions
+  snapPoints: SnapPoint[]
+  materialSlots: MaterialSlot[]
+  productId?: string
+  basePrice: number
+  isPremium: boolean
+  isActive: boolean
+  downloads: number
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface ModelDimensions {
+  width: number
+  height: number
+  depth: number
+  unit: "cm" | "m"
+}
+
+export interface SnapPoint {
+  id: string
+  type: "corner" | "edge" | "surface"
+  position: Vector3D
+  normal: Vector3D
+}
+
+export interface MaterialSlot {
+  id: string
+  name: string
+  defaultMaterialId: string
+  allowedMaterials: string[]
+}
+
+export interface Material {
+  id: string
+  name: string
+  type: "wood" | "metal" | "stone" | "glass" | "plastic"
+  textureUrl?: string
+  normalMapUrl?: string
+  roughnessMapUrl?: string
+  color: string
+  price: number
+  isActive: boolean
+}
+
+export interface CollaborationSession {
+  id: string
+  designId: string
+  participants: SessionParticipant[]
+  createdAt: Date
+  expiresAt: Date
+}
+
+export interface SessionParticipant {
+  userId: string
+  userName: string
+  cursorPosition?: Vector3D
+  isActive: boolean
+  joinedAt: Date
+}
+
+export interface PlacedObject {
+  id: string
+  name: string
+  modelUrl: string
+  position: [number, number, number]
+  rotation: [number, number, number]
+  scale: [number, number, number]
+  dimensions?: {
+    width: number
+    height: number
+    depth: number
+  }
+  productId?: string
+  elementId?: string
+  partId?: string
+  price: number
+  materials: Record<string, string>
+  colors: Record<string, string>
+  
+  // Hierarchical structure
+  parentId?: string // Reference to parent object
+  children: string[] // Array of child object IDs
+  isGroup: boolean // Whether this is a group/compound object
+  locked: boolean // Lock transformations
+  visible: boolean // Show/hide object
+  
+  // Element composition
+  elements: PlacedElement[] // Product elements that compose this object
+  
+  // Metadata
+  tags: string[] // User-defined tags for organization
+  layer: string // Layer name for organization
+  opacity: number // Object opacity (0-1)
+  castShadow: boolean // Whether object casts shadows
+  receiveShadow: boolean // Whether object receives shadows
+}
+
+export interface PlacedElement {
+  id: string
+  elementId: string // Reference to ProductElement
+  name: string
+  modelUrl?: string
+  localPosition: [number, number, number] // Position relative to parent
+  localRotation: [number, number, number]
+  localScale: [number, number, number]
+  visible: boolean
+  locked: boolean
+  
+  // Material customization per element
+  selectedMaterial?: string // MaterialOption ID
+  selectedColor?: string // ColorOption ID
+  customTextures: Record<string, string> // Texture overrides
+  
+  // Parts of this element
+  parts: PlacedPart[]
+}
+
+export interface PlacedPart {
+  id: string
+  partId: string // Reference to ProductPart
+  name: string
+  modelUrl?: string
+  localPosition: [number, number, number]
+  localRotation: [number, number, number]
+  localScale: [number, number, number]
+  visible: boolean
+  locked: boolean
+  
+  // Material customization per part
+  selectedMaterial?: string
+  selectedColor?: string
+  customTextures: Record<string, string>
+  
+  type: "accessory" | "component" | "optional"
+  required: boolean
+}
\ No newline at end of file
diff --git a/apps/fabrikanabytok/lib/types/product.types.ts b/apps/fabrikanabytok/lib/types/product.types.ts
new file mode 100644
index 0000000..e190d33
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/product.types.ts
@@ -0,0 +1,203 @@
+export interface Product {
+  id: string // Custom UUID - primary identifier (NOT MongoDB _id)
+  name: string
+  slug: string
+  description: string
+  shortDescription?: string
+  price: number
+  compareAtPrice?: number
+  cost?: number
+  currency: string
+  dimensions?: {
+    width: number
+    height: number
+    depth: number // Fixed: was 'density', should be 'depth'
+  }
+
+  // Images
+  images: ProductImage[]
+
+  // Hierarchical structure
+  elements: ProductElement[] // Product contains multiple elements
+  isKit: boolean // If true, this is a kit/bundle
+  kitProducts?: string[] // IDs of products included in kit
+
+  // Category and organization
+  categoryIds: string[]
+  tags: string[]
+
+  // Specifications
+  specifications: ProductSpecification[]
+
+  // 3D Model
+  model3DId?: string // Reference to 3D model
+  glbFile?: GLBFile // Direct GLB file assignment
+
+  // Corvux multi-selector feature
+  corvuxEnabled: boolean // Enable color/material selection for all elements
+  availableColors: ColorOption[]
+  availableMaterials: MaterialOption[]
+
+  // Stock and pricing
+  stock: number
+  lowStockThreshold: number
+  sku: string
+
+  // Status
+  status: "draft" | "published" | "archived"
+  isFeatured: boolean
+
+  // SEO
+  seo: ProductSEO
+
+  // Timestamps
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface ProductElement {
+  id: string
+  name: string
+  description?: string
+  model3DId?: string // Each element can have its own 3D model
+  glbFile?: GLBFile
+  parts: ProductPart[] // Elements contain parts/accessories
+
+  // Element-specific customization
+  availableColors: ColorOption[]
+  availableMaterials: MaterialOption[]
+  defaultColor?: string
+  defaultMaterial?: string
+
+  // Pricing (if different from base)
+  priceModifier?: number // Added to base price
+
+  order: number
+}
+
+export interface ProductPart {
+  id: string
+  name: string
+  description?: string
+  model3DId?: string // Parts can also have 3D models
+  glbFile?: GLBFile
+
+  // Part-specific customization
+  availableColors: ColorOption[]
+  availableMaterials: MaterialOption[]
+  defaultColor?: string
+  defaultMaterial?: string
+
+  // Pricing
+  priceModifier?: number
+
+  // Type of part
+  type: "accessory" | "component" | "optional"
+  required: boolean
+
+  order: number
+}
+
+export interface GLBFile {
+  url: string // Uploaded file URL or blob URL
+  filename: string
+  fileSize: number
+  uploadedAt: Date
+  thumbnailUrl?: string
+}
+
+export interface ColorOption {
+  id: string
+  name: string
+  hexCode: string
+  textureUrl?: string
+}
+
+export interface MaterialOption {
+  id: string
+  name: string
+  type: "wood" | "metal" | "stone" | "glass" | "fabric" | "other"
+  textureUrl?: string
+  normalMapUrl?: string
+  roughnessMapUrl?: string
+  metallicMapUrl?: string
+  priceModifier?: number // Additional cost for premium materials
+}
+
+export interface ProductImage {
+  id: string
+  url: string
+  alt: string
+  order: number
+  isThumbnail: boolean
+}
+
+export interface ProductSpecification {
+  id: string
+  label: string
+  value: string
+  type: "text" | "number" | "select" | "multiselect"
+  unit?: string
+  order: number
+}
+
+export interface ProductVariant {
+  id: string
+  name: string
+  sku: string
+  price?: number
+  stockQuantity: number
+  attributes: Record<string, string>
+  image?: string
+}
+
+export interface ProductSEO {
+  metaTitle: string
+  metaDescription: string
+  keywords: string[]
+  ogImage?: string
+}
+
+export interface Category {
+  id: string // Custom UUID - primary identifier
+  name: string
+  slug: string
+  description?: string
+  image?: string
+  icon?: string
+  parentId?: string // Reference to parent category ID (custom UUID)
+  children?: Category[] // Nested categories
+  order: number
+  isActive: boolean
+  productCount: number
+
+  // Advanced category features
+  attributes: CategoryAttribute[] // Category-specific attributes
+  filters: CategoryFilter[] // Available filters for this category
+
+  seo: CategorySEO
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface CategoryAttribute {
+  id: string
+  name: string
+  type: "text" | "number" | "select" | "multiselect" | "color" | "dimension"
+  options?: string[]
+  required: boolean
+  order: number
+}
+
+export interface CategoryFilter {
+  id: string
+  name: string
+  type: "range" | "checkbox" | "color" | "rating"
+  values?: string[]
+}
+
+export interface CategorySEO {
+  metaTitle: string
+  metaDescription: string
+  keywords: string[]
+}
diff --git a/apps/fabrikanabytok/lib/types/progress.types.ts b/apps/fabrikanabytok/lib/types/progress.types.ts
new file mode 100644
index 0000000..83b78f4
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/progress.types.ts
@@ -0,0 +1,63 @@
+export type TaskStatus = "pending" | "in-progress" | "completed" | "blocked"
+export type PhaseCategory = "foundation" | "admin" | "planner" | "commerce" | "advanced"
+
+export interface BuildTask {
+  id: string
+  name: string
+  description: string
+  phase: number
+  category: PhaseCategory
+  status: TaskStatus
+  dependencies: string[]
+  completedAt?: Date
+  estimatedHours: number
+  actualHours?: number
+}
+
+export interface BuildPhase {
+  id: string
+  number: number
+  name: string
+  category: PhaseCategory
+  description: string
+  tasks: BuildTask[]
+  status: TaskStatus
+  startedAt?: Date
+  completedAt?: Date
+  estimatedHours: number
+}
+
+export interface BuildProgress {
+  totalPhases: number
+  completedPhases: number
+  currentPhase: number
+  totalTasks: number
+  completedTasks: number
+  percentage: number
+  phases: BuildPhase[]
+  lastUpdated: Date
+  estimatedCompletion?: Date
+}
+
+export interface SystemHealth {
+  database: {
+    status: "healthy" | "degraded" | "down"
+    responseTime: number
+    connections: number
+  }
+  socket: {
+    status: "healthy" | "degraded" | "down"
+    connections: number
+    rooms: number
+  }
+  cache: {
+    status: "healthy" | "degraded" | "down"
+    hitRate: number
+    memoryUsage: number
+  }
+  api: {
+    status: "healthy" | "degraded" | "down"
+    avgResponseTime: number
+    errorRate: number
+  }
+}
diff --git a/apps/fabrikanabytok/lib/types/role-management.types.ts b/apps/fabrikanabytok/lib/types/role-management.types.ts
new file mode 100644
index 0000000..678a65a
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/role-management.types.ts
@@ -0,0 +1,126 @@
+/**
+ * Advanced Role & Permission Management Types
+ */
+
+import type { UserRole, AdminPermission } from "./user.types"
+
+export interface Role {
+  id: string
+  name: string
+  slug: string
+  type: "system" | "custom" // System roles can't be deleted
+  description: string
+  
+  // Permissions
+  permissions: AdminPermission[]
+  
+  // Hierarchy
+  level: number // Higher number = more access
+  inheritsFrom?: string[] // Role IDs to inherit permissions from
+  
+  // Users
+  userCount: number
+  
+  // Status
+  isActive: boolean
+  
+  // Metadata
+  createdBy: string
+  updatedBy: string
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface PermissionGroup {
+  id: string
+  name: string
+  description: string
+  permissions: AdminPermission[]
+  icon?: string
+  color?: string
+}
+
+export interface RoleAssignment {
+  id: string
+  userId: string
+  userName: string
+  userEmail: string
+  
+  // Role
+  roleId: string
+  roleName: string
+  
+  // Assignment
+  assignedBy: string
+  assignedByName: string
+  assignedAt: Date | string
+  
+  // Temporary
+  expiresAt?: Date | string
+  
+  // Reason
+  reason?: string
+  notes?: string
+}
+
+export interface PermissionChange {
+  id: string
+  userId: string
+  userName: string
+  
+  // Change
+  action: "grant" | "revoke"
+  permission: AdminPermission
+  
+  // Actor
+  changedBy: string
+  changedByName: string
+  changedAt: Date | string
+  
+  // Reason
+  reason: string
+}
+
+export const PERMISSION_GROUPS: PermissionGroup[] = [
+  {
+    id: "users",
+    name: "User Management",
+    description: "Manage users, roles, and permissions",
+    permissions: ["users.view", "users.create", "users.edit", "users.delete", "users.roles"],
+    icon: "Users",
+    color: "#3b82f6",
+  },
+  {
+    id: "products",
+    name: "Product Management",
+    description: "Manage products, categories, and inventory",
+    permissions: ["products.view", "products.create", "products.edit", "products.delete"],
+    icon: "Package",
+    color: "#22c55e",
+  },
+  {
+    id: "orders",
+    name: "Order Management",
+    description: "View and manage customer orders",
+    permissions: ["orders.view", "orders.edit", "orders.cancel"],
+    icon: "ShoppingCart",
+    color: "#f59e0b",
+  },
+  {
+    id: "analytics",
+    name: "Analytics & Reports",
+    description: "Access analytics and generate reports",
+    permissions: ["analytics.view"],
+    icon: "BarChart3",
+    color: "#8b5cf6",
+  },
+  {
+    id: "system",
+    name: "System Administration",
+    description: "System settings and configurations",
+    permissions: ["settings.view", "settings.edit", "files.manage", "emails.manage", "microservices.manage"],
+    icon: "Settings",
+    color: "#ef4444",
+  },
+]
+
diff --git a/apps/fabrikanabytok/lib/types/settings.types.ts b/apps/fabrikanabytok/lib/types/settings.types.ts
new file mode 100644
index 0000000..620dd63
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/settings.types.ts
@@ -0,0 +1,361 @@
+/**
+ * Global Settings & Configuration Types
+ * Comprehensive system configuration interface
+ */
+
+export interface GlobalSettings {
+  id: string
+  
+  // General Settings
+  general: GeneralSettings
+  
+  // AI Integrations
+  ai: AISettings
+  
+  // Storage Providers
+  storage: StorageSettings
+  
+  // Email Configuration
+  email: EmailSettings
+  
+  // Social Media
+  social: SocialMediaSettings
+  
+  // Feature Toggles
+  features: FeatureToggles
+  
+  // Export Configuration
+  export: ExportSettings
+  
+  // Legal & Compliance
+  legal: LegalSettings
+  
+  // Analytics & Tracking
+  analytics: AnalyticsSettings
+  
+  // Security
+  security: SecuritySettings
+  
+  // Metadata
+  updatedBy: string
+  updatedAt: Date
+}
+
+export interface GeneralSettings {
+  siteName: string | unknown
+  siteUrl: string | unknown
+  supportEmail: string | unknown
+  defaultLanguage: string
+  timezone: string | unknown
+  currency: string | unknown
+  maintenanceMode: boolean
+}
+
+export interface AISettings {
+  // OpenAI
+  openai: {
+    enabled: boolean
+    apiKey: string
+    model: string
+    maxTokens: number
+    temperature: number
+  }
+  
+  // HuggingFace
+  huggingface: {
+    enabled: boolean
+    apiKey: string
+    models: {
+      textGeneration?: string
+      imageGeneration?: string
+      embedding?: string
+    }
+  }
+  
+  // Google AI
+  google: {
+    enabled: boolean
+    apiKey: string
+    projectId?: string
+    models: {
+      gemini?: string
+      vision?: string
+    }
+  }
+}
+
+export interface StorageSettings {
+  // Primary Storage Provider
+  provider: "vercel" | "minio" | "s3" | "local"
+  
+  // Vercel Blob
+  vercel: {
+    enabled: boolean
+    token: string
+    region?: string
+  }
+  
+  // Minio S3
+  minio: {
+    enabled: boolean
+    endpoint: string
+    port: number
+    useSSL: boolean
+    accessKey: string
+    secretKey: string
+    bucket: string
+    region?: string
+  }
+  
+  // AWS S3
+  s3: {
+    enabled: boolean
+    region: string
+    bucket: string
+    accessKeyId: string
+    secretAccessKey: string
+  }
+  
+  // FTP
+  ftp: {
+    enabled: boolean
+    host: string
+    port: number
+    user: string
+    password: string
+    secure: boolean // FTPS
+    basePath: string
+  }
+  
+  // Storage Limits
+  maxFileSize: number // bytes
+  maxStoragePerUser: number // bytes
+  allowedFileTypes: string[]
+}
+
+export interface EmailSettings {
+  // SMTP Configuration
+  smtp: {
+    enabled: boolean
+    host: string
+    port: number
+    secure: boolean // TLS
+    user: string
+    password: string
+    from: {
+      name: string
+      email: string
+    }
+  }
+  
+  // Email Templates
+  templates: {
+    orderConfirmation: boolean
+    designShared: boolean
+    passwordReset: boolean
+    welcome: boolean
+    newsletter: boolean
+  }
+  
+  // SendGrid (Alternative)
+  sendgrid: {
+    enabled: boolean
+    apiKey: string
+  }
+}
+
+export interface SocialMediaSettings {
+  // Links
+  facebook?: string
+  instagram?: string
+  youtube?: string
+  linkedin?: string
+  pinterest?: string
+  tiktok?: string
+  twitter?: string
+  
+  // OAuth Login
+  oauth: {
+    google: {
+      enabled: boolean
+      clientId: string
+      clientSecret: string
+    }
+    facebook: {
+      enabled: boolean
+      appId: string
+      appSecret: string
+    }
+    github: {
+      enabled: boolean
+      clientId: string
+      clientSecret: string
+    }
+  }
+  
+  // Share Buttons
+  enableShareButtons: boolean
+  shareOnSocial: string[] // Which platforms to show share buttons for
+}
+
+export interface FeatureToggles {
+  // Planner Features
+  aiAssistant: boolean
+  realTimeCollaboration: boolean
+  advancedExport: boolean
+  measurementTools: boolean
+  
+  // Shop Features
+  product3DViewer: boolean
+  productConfigurator: boolean
+  advancedSearch: boolean
+  wishlist: boolean
+  
+  // General Features
+  fileManager: boolean
+  analytics: boolean
+  notifications: boolean
+  chatSupport: boolean
+}
+
+export interface LegalSettings {
+  // Privacy Policy
+  privacyPolicy: {
+    enabled: boolean
+    content: string // HTML content
+    lastUpdated: Date
+    version: string
+  }
+  
+  // Terms of Service
+  termsOfService: {
+    enabled: boolean
+    content: string
+    lastUpdated: Date
+    version: string
+  }
+  
+  // GDPR Compliance
+  gdpr: {
+    enabled: boolean
+    dataRetentionDays: number
+    allowDataExport: boolean
+    allowDataDeletion: boolean
+    requireConsent: boolean
+  }
+  
+  // Cookie Consent
+  cookieConsent: {
+    enabled: boolean
+    mode: "banner" | "modal" | "popup"
+    position: "top" | "bottom"
+    categories: {
+      essential: boolean // Always true
+      analytics: boolean
+      marketing: boolean
+      preferences: boolean
+    }
+  }
+}
+
+export interface AnalyticsSettings {
+  // Google Analytics
+  googleAnalytics: {
+    enabled: boolean
+    measurementId: string
+    trackPageViews: boolean
+    trackEvents: boolean
+  }
+  
+  // Facebook Pixel
+  facebookPixel: {
+    enabled: boolean
+    pixelId: string
+  }
+  
+  // Custom Analytics
+  customAnalytics: {
+    enabled: boolean
+    endpoint?: string
+  }
+  
+  // Internal Tracking
+  internalTracking: {
+    trackUserBehavior: boolean
+    trackFeatureUsage: boolean
+    trackPerformance: boolean
+    dataRetentionDays: number
+  }
+}
+
+export interface ExportSettings {
+  // Image Export
+  image: {
+    defaultResolution: "hd" | "fhd" | "4k" | "8k"
+    defaultFormat: "png" | "jpg" | "webp"
+    quality: number // 0-1
+    maxResolution: "hd" | "fhd" | "4k" | "8k" // Premium limit
+    watermark: boolean
+    watermarkText?: string
+    watermarkOpacity: number
+  }
+  
+  // PDF Export
+  pdf: {
+    includeImages: boolean
+    includeShoppingList: boolean
+    includeDimensions: boolean
+    includeMaterials: boolean
+    includeQRCode: boolean
+    brandingLogo?: string
+    watermark: boolean
+    pageSize: "a4" | "letter" | "a3"
+    orientation: "portrait" | "landscape"
+  }
+  
+  // 3D Model Export
+  model3D: {
+    defaultFormat: "glb" | "obj" | "fbx"
+    includeTextures: boolean
+    includeMaterials: boolean
+    includeAnimations: boolean
+    optimizeOnExport: boolean
+    maxFileSize: number // MB
+    requireSubscription: boolean // Require premium subscription
+  }
+}
+
+export interface SecuritySettings {
+  // Rate Limiting
+  rateLimit: {
+    enabled: boolean
+    requestsPerMinute: number
+    requestsPerHour: number
+  }
+  
+  // Session Management
+  session: {
+    maxConcurrentSessions: number
+    sessionTimeout: number // minutes
+    requireReauth: boolean
+  }
+  
+  // Subscription Enforcement
+  subscriptionEnforcement: {
+    strictMode: boolean // Block or warn
+    checkInterval: number // seconds
+    gracePeriod: number // days after expiry
+  }
+  
+  // IP Restrictions
+  ipWhitelist: string[]
+  ipBlacklist: string[]
+  
+  // Two-Factor Auth
+  twoFactor: {
+    enabled: boolean
+    required: boolean // Force for all users
+    methods: ("email" | "sms" | "authenticator")[]
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/types/shipping.types.ts b/apps/fabrikanabytok/lib/types/shipping.types.ts
new file mode 100644
index 0000000..2f668f8
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/shipping.types.ts
@@ -0,0 +1,149 @@
+/**
+ * Shipping & Logistics Types
+ */
+
+export type ShippingStatus = 
+  | "draft"
+  | "ready"
+  | "picked_up"
+  | "in_transit"
+  | "out_for_delivery"
+  | "delivered"
+  | "failed"
+  | "returned"
+
+export type CarrierType = "ups" | "fedex" | "dhl" | "usps" | "local" | "custom"
+
+export interface Shipment {
+  id: string
+  shipmentNumber: string
+  
+  // Order
+  orderId: string
+  orderNumber: string
+  
+  // Carrier
+  carrier: CarrierType
+  carrierName: string
+  service: string // e.g., "Ground", "Express", "Overnight"
+  trackingNumber?: string
+  
+  // Status
+  status: ShippingStatus
+  
+  // Package
+  packages: Package[]
+  totalWeight: number // kg
+  totalVolume: number // m³
+  
+  // Addresses
+  from: Address
+  to: Address
+  
+  // Costs
+  shippingCost: number
+  insuranceAmount?: number
+  
+  // Timing
+  estimatedDelivery?: Date | string
+  actualDelivery?: Date | string
+  
+  // Employees
+  packedBy?: string
+  packedByName?: string
+  shippedBy?: string
+  shippedByName?: string
+  
+  // Timestamps
+  createdAt: Date | string
+  pickedUpAt?: Date | string
+  deliveredAt?: Date | string
+  
+  // Documents
+  labelUrl?: string
+  invoiceUrl?: string
+  packingSlipUrl?: string
+  
+  // Notes
+  specialInstructions?: string
+  notes?: string
+}
+
+export interface Package {
+  id: string
+  packageNumber: number
+  
+  // Dimensions
+  length: number // cm
+  width: number
+  height: number
+  weight: number // kg
+  
+  // Contents
+  items: PackageItem[]
+  
+  // Box type
+  boxType?: string
+  
+  // Status
+  packed: boolean
+  packedAt?: Date | string
+  packedBy?: string
+}
+
+export interface PackageItem {
+  productId: string
+  productName: string
+  sku: string
+  quantity: number
+}
+
+export interface Address {
+  name: string
+  company?: string
+  street: string
+  street2?: string
+  city: string
+  state: string
+  zip: string
+  country: string
+  phone?: string
+  email?: string
+}
+
+export interface ShippingRoute {
+  id: string
+  routeNumber: string
+  
+  // Driver
+  driverId?: string
+  driverName?: string
+  vehicleId?: string
+  
+  // Shipments
+  shipmentIds: string[]
+  totalShipments: number
+  
+  // Status
+  status: "planned" | "in_progress" | "completed"
+  
+  // Optimization
+  totalDistance: number // km
+  estimatedTime: number // minutes
+  stops: RouteStop[]
+  
+  // Timing
+  plannedDate: Date | string
+  startedAt?: Date | string
+  completedAt?: Date | string
+}
+
+export interface RouteStop {
+  sequence: number
+  shipmentId: string
+  address: Address
+  estimatedArrival: Date | string
+  actualArrival?: Date | string
+  status: "pending" | "completed" | "failed"
+}
+
diff --git a/apps/fabrikanabytok/lib/types/socket.types.ts b/apps/fabrikanabytok/lib/types/socket.types.ts
new file mode 100644
index 0000000..e73a107
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/socket.types.ts
@@ -0,0 +1,192 @@
+/**
+ * Enhanced Socket.IO Type Definitions
+ * Comprehensive event system for real-time features
+ */
+
+export interface SocketUser {
+  id: string
+  name: string
+  role: string
+  socketId: string
+  connectionType: "websocket" | "polling" // Track connection type
+  connectedAt: Date
+  lastActivity: Date
+}
+
+export interface SocketMessage {
+  type: string
+  payload: any
+  timestamp: number
+  userId?: string
+  eventId?: string // Unique event ID for tracking
+}
+
+export interface InventoryUpdateEvent {
+  productId: string
+  stockQuantity: number
+  isAvailable: boolean
+  updatedBy?: string
+}
+
+export interface OrderNotification {
+  orderId: string
+  orderNumber: string
+  customerName: string
+  total: number
+  timestamp: Date
+  eventType: "created" | "updated" | "cancelled" | "completed"
+}
+
+export interface ManufacturingOrderEvent {
+  orderId: string
+  orderNumber: string
+  customerName: string
+  status: string
+  previousStatus?: string
+  changedBy: string
+  changedByName: string
+  timestamp: Date
+  eventType: "status_changed" | "item_assigned" | "production_started" | "production_completed"
+}
+
+export interface ProductionAssignmentEvent {
+  orderId: string
+  orderNumber: string
+  itemId: string
+  itemName: string
+  employeeId: string
+  employeeName: string
+  action: "assigned" | "clock_in" | "clock_out" | "stage_changed"
+  stage?: string
+  timestamp: Date
+}
+
+export interface InvoiceEvent {
+  invoiceId: string
+  invoiceNumber: string
+  customerId: string
+  customerName: string
+  totalAmount: number
+  status: string
+  eventType: "created" | "sent" | "payment_received" | "cancelled"
+  timestamp: Date
+}
+
+export interface ImportProgressEvent {
+  batchId: string
+  fileName: string
+  status: "processing" | "validating" | "importing" | "completed" | "failed"
+  progress: number
+  current: number
+  total: number
+  errors?: string[]
+  timestamp: Date
+}
+
+export interface DesignCollaborationEvent {
+  designId: string
+  userId: string
+  userName: string
+  action: "join" | "leave" | "update" | "cursor_move"
+  data?: any
+  timestamp: number
+}
+
+export interface ChatMessageEvent {
+  sessionId: string
+  message: {
+    id: string
+    userId: string
+    userName: string
+    content: string
+    timestamp: Date
+  }
+}
+
+/**
+ * User Activity Tracking Events
+ */
+export interface UserActivityEvent {
+  userId: string
+  sessionId: string
+  eventType: ActivityEventType
+  eventData: any
+  timestamp: Date
+  page?: string
+  referrer?: string
+  userAgent?: string
+  ipAddress?: string
+}
+
+export type ActivityEventType =
+  | "page_view"
+  | "product_view"
+  | "product_search"
+  | "add_to_cart"
+  | "remove_from_cart"
+  | "checkout_start"
+  | "checkout_complete"
+  | "design_create"
+  | "design_update"
+  | "design_delete"
+  | "design_export"
+  | "ai_query"
+  | "file_upload"
+  | "file_download"
+  | "feature_usage"
+  | "subscription_view"
+  | "subscription_upgrade"
+  | "error_occurred"
+
+/**
+ * Subscription Enforcement Events
+ */
+export interface SubscriptionEvent {
+  userId: string
+  subscriptionId?: string
+  eventType: "limit_reached" | "feature_blocked" | "usage_warning" | "subscription_expired"
+  feature?: string
+  currentUsage?: number
+  limit?: number
+  timestamp: Date
+}
+
+/**
+ * Security Events
+ */
+export interface SecurityEvent {
+  userId?: string
+  sessionId: string
+  eventType: "suspicious_activity" | "rate_limit_exceeded" | "unauthorized_access" | "token_expired"
+  severity: "low" | "medium" | "high" | "critical"
+  details: any
+  ipAddress?: string
+  timestamp: Date
+}
+
+/**
+ * Real-time Metrics
+ */
+export interface MetricsSnapshot {
+  timestamp: Date
+  activeUsers: number
+  activeDesigns: number
+  websocketConnections: number
+  pollingConnections: number
+  cpuUsage?: number
+  memoryUsage?: number
+  responseTime?: number
+}
+
+/**
+ * Feature Usage Tracking
+ */
+export interface FeatureUsageEvent {
+  userId: string
+  feature: string
+  action: string
+  duration?: number // ms
+  metadata?: any
+  subscriptionTier?: string
+  timestamp: Date
+}
diff --git a/apps/fabrikanabytok/lib/types/subscription.types.ts b/apps/fabrikanabytok/lib/types/subscription.types.ts
new file mode 100644
index 0000000..b211764
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/subscription.types.ts
@@ -0,0 +1,66 @@
+export type BillingCycle = "monthly" | "yearly"
+export type SubscriptionStatus = "active" | "cancelled" | "expired" | "trialing" | "past_due"
+
+export interface SubscriptionPlan {
+  id: string
+  name: string
+  description: string
+  price: number
+  currency: string
+  billingCycle: BillingCycle
+  trialDays: number
+  features: SubscriptionFeature[]
+  monthlyCredits: number
+  isPopular: boolean
+  isActive: boolean
+  stripePriceId?: string
+  order: number
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface SubscriptionFeature {
+  id: string
+  label: string
+  value: string | number | boolean
+  category: "planner" | "ai" | "ecommerce" | "support"
+  isHighlight: boolean
+}
+
+export interface UserSubscription {
+  id: string
+  userId: string
+  planId: string
+  status: SubscriptionStatus
+  currentPeriodStart: Date
+  currentPeriodEnd: Date
+  cancelAtPeriodEnd: boolean
+  stripeSubscriptionId?: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface CreditPackage {
+  id: string
+  name: string
+  credits: number
+  price: number
+  currency: string
+  bonus: number
+  isPopular: boolean
+  stripePriceId?: string
+  createdAt: Date
+}
+
+export interface CreditTransaction {
+  id: string
+  userId: string
+  amount: number
+  type: "purchase" | "usage" | "refund" | "bonus" | "subscription"
+  description: string
+  balanceBefore: number
+  balanceAfter: number
+  relatedEntityId?: string
+  relatedEntityType?: string
+  createdAt: Date
+}
diff --git a/apps/fabrikanabytok/lib/types/user.types.ts b/apps/fabrikanabytok/lib/types/user.types.ts
new file mode 100644
index 0000000..b95f43c
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/user.types.ts
@@ -0,0 +1,94 @@
+export type UserRole = 
+  | "visitor" 
+  | "customer" 
+  | "distributor" 
+  | "admin" 
+  | "superadmin"
+  // Employee roles
+  | "warehouse_manager"
+  | "inventory_clerk"
+  | "picker"
+  | "packer"
+  | "shipper"
+  | "location_manager"
+  | "outsource_coordinator"
+  | "quality_controller"
+  | "assistant"
+
+export type AdminPermission =
+  | "users.view"
+  | "users.create"
+  | "users.edit"
+  | "users.delete"
+  | "users.roles"
+  | "products.view"
+  | "products.create"
+  | "products.edit"
+  | "products.delete"
+  | "orders.view"
+  | "orders.edit"
+  | "orders.cancel"
+  | "analytics.view"
+  | "settings.view"
+  | "settings.edit"
+  | "files.manage"
+  | "emails.manage"
+  | "microservices.manage"
+
+export interface User {
+  id: string
+  email: string
+  name: string
+  firstName?: string
+  lastName?: string
+  role: UserRole
+  customPermissions?: AdminPermission[] // Additional permissions beyond role
+  avatar?: string
+  phone?: string
+  company?: string
+  subscriptionId?: string
+  creditBalance: number
+  isActive: boolean
+  emailVerified: boolean
+  createdAt: Date | string
+  updatedAt: Date | string
+  lastLoginAt?: Date | string
+  
+  // Extended fields for admin users
+  department?: string
+  position?: string
+  notes?: string
+}
+
+export interface UserPermissions {
+  canAccessAdmin: boolean
+  permissions: AdminPermission[]
+  canManageProducts: boolean
+  canManageOrders: boolean
+  canManageUsers: boolean
+  canManage3DModels: boolean
+  canAccessPlanner: boolean
+  canUseAI: boolean
+  canExportDesigns: boolean
+  canCollaborate: boolean
+  maxProjects: number
+  maxAIRequests: number
+}
+
+export interface UserSession {
+  user: User
+  permissions: UserPermissions
+  token: string
+  expiresAt: Date
+}
+
+export interface UserInvitation {
+  id: string
+  email: string
+  role: UserRole
+  invitedBy: string
+  token: string
+  expiresAt: Date
+  createdAt: Date
+  acceptedAt?: Date
+}
diff --git a/apps/fabrikanabytok/lib/types/worktop.types.ts b/apps/fabrikanabytok/lib/types/worktop.types.ts
new file mode 100644
index 0000000..af30acb
--- /dev/null
+++ b/apps/fabrikanabytok/lib/types/worktop.types.ts
@@ -0,0 +1,292 @@
+/**
+ * Worktop (Munkalap) Management Types
+ * Advanced worktop catalog and configuration
+ */
+
+export type WorktopMaterial = 
+  | "laminate"        // Laminált
+  | "stone"           // Kő
+  | "quartz"          // Kvarc
+  | "granite"         // Gránit
+  | "marble"          // Márvány
+  | "wood"            // Fa
+  | "solid_surface"   // Műkő
+  | "stainless_steel" // Rozsdamentes acél
+  | "ceramic"         // Kerámia
+  | "composite"       // Kompozit
+
+export type WorktopEdgeType =
+  | "square"          // Egyenes
+  | "beveled"         // Ferde
+  | "bullnose"        // Lekerekített
+  | "ogee"            // Klasszikus
+  | "waterfall"       // Vízesés
+  | "custom"          // Egyedi
+
+export type WorktopFinish =
+  | "matte"           // Matt
+  | "glossy"          // Fényes
+  | "textured"        // Texturált
+  | "brushed"         // Csiszolt
+  | "polished"        // Polírozott
+
+export interface WorktopDimensions {
+  length: number      // Hossz
+  width: number       // Szélesség
+  thickness: number   // Vastagság
+  unit: "mm" | "cm" | "m"
+}
+
+export interface WorktopCutout {
+  id: string
+  type: "sink" | "cooktop" | "tap" | "custom"
+  name: string
+  dimensions: {
+    width: number
+    depth: number
+  }
+  position?: {
+    fromLeft: number
+    fromFront: number
+  }
+  additionalCost: number
+}
+
+export interface WorktopConfiguration {
+  // Shape
+  isCustomShape: boolean
+  shapeDescription?: string
+  hasCorner: boolean
+  cornerType?: "L" | "U" | "curved"
+  
+  // Edges
+  frontEdge: WorktopEdgeType
+  backEdge: WorktopEdgeType
+  leftEdge: WorktopEdgeType
+  rightEdge: WorktopEdgeType
+  
+  // Features
+  hasSplashback: boolean
+  splashbackHeight?: number
+  hasUnderMount: boolean
+  hasOverhang: boolean
+  overhangDepth?: number
+  
+  // Cutouts
+  cutouts: WorktopCutout[]
+  
+  // Additional processing
+  hasWaterproofing: boolean
+  hasSealing: boolean
+  requiresPolishing: boolean
+}
+
+export interface WorktopPricing {
+  basePrice: number
+  pricePerMeter: number
+  
+  // Additional costs
+  edgeFinishingCost: number
+  cutoutCost: number
+  installationCost: number
+  deliveryCost: number
+  
+  // Discounts
+  discountPercent: number
+  discountAmount: number
+  
+  // Total
+  subtotal: number
+  total: number
+}
+
+export interface Worktop {
+  id: string
+  
+  // Identification
+  code: string            // Unique code (e.g., WTP-001)
+  name: string
+  description?: string
+  
+  // Material & Finish
+  material: WorktopMaterial
+  materialBrand?: string
+  materialSeries?: string
+  colorCode?: string
+  colorName: string
+  finish: WorktopFinish
+  texture?: string
+  
+  // Specifications
+  standardThickness: number[]  // Available thicknesses
+  maxLength: number
+  maxWidth: number
+  weight: number              // kg per m²
+  
+  // Appearance
+  pattern?: string
+  veining?: string
+  imageUrl?: string
+  thumbnailUrl?: string
+  colorSwatchUrl?: string
+  
+  // Properties
+  properties: {
+    isHeatResistant: boolean
+    maxHeatTemp?: number      // °C
+    isWaterproof: boolean
+    isStainResistant: boolean
+    isScratchResistant: boolean
+    isUVResistant: boolean
+    isAntiMicrobial: boolean
+    hardnessRating?: number   // Mohs scale
+    absorptionRate?: number   // percentage
+  }
+  
+  // Maintenance
+  maintenanceInstructions?: string
+  cleaningInstructions?: string
+  warrantyYears?: number
+  
+  // Pricing
+  pricePerMeter: number
+  pricePerPiece?: number
+  currency: string
+  
+  // Availability
+  inStock: boolean
+  stockQuantity: number
+  stockUnit: "m²" | "piece"
+  leadTimeDays: number
+  minimumOrder?: number
+  
+  // Supplier
+  supplierId?: string
+  supplierName?: string
+  supplierCode?: string
+  supplierPrice?: number
+  
+  // Categories & Tags
+  categories: string[]
+  tags: string[]
+  
+  // Usage
+  recommendedFor: string[]   // kitchen, bathroom, office, etc.
+  notRecommendedFor?: string[]
+  
+  // Installation
+  requiresProfessionalInstallation: boolean
+  installationDifficulty: "easy" | "medium" | "hard"
+  installationInstructions?: string
+  
+  // Compatibility
+  compatibleEdgeTypes: WorktopEdgeType[]
+  compatibleSinks?: string[]
+  compatibleCooktops?: string[]
+  
+  // Statistics
+  totalOrders: number
+  totalSold: number          // m²
+  averageRating?: number
+  reviewCount: number
+  
+  // Status
+  status: "active" | "inactive" | "discontinued"
+  isCustomOrder: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  createdBy: string
+  updatedAt: Date | string
+  updatedBy: string
+  
+  // Custom fields
+  customFields?: Record<string, any>
+}
+
+export interface WorktopOrder {
+  id: string
+  worktopId: string
+  
+  // Reference
+  orderId: string
+  orderItemId: string
+  
+  // Dimensions
+  dimensions: WorktopDimensions
+  
+  // Configuration
+  configuration: WorktopConfiguration
+  
+  // Pricing
+  pricing: WorktopPricing
+  
+  // Production
+  productionStatus: "pending" | "cutting" | "edge_finishing" | "polishing" | "quality_check" | "ready"
+  assignedTo?: string
+  productionNotes?: string
+  
+  // Technical drawing
+  drawingUrl?: string
+  templateUrl?: string
+  
+  // Files
+  attachments: Array<{
+    id: string
+    name: string
+    url: string
+    type: string
+  }>
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
+export interface WorktopSupplier {
+  id: string
+  
+  // Company Info
+  companyName: string
+  contactPerson: string
+  email: string
+  phone: string
+  
+  // Address
+  address: {
+    country: string
+    city: string
+    zipCode: string
+    address: string
+  }
+  
+  // Business
+  taxNumber?: string
+  bankAccount?: string
+  
+  // Materials
+  materials: WorktopMaterial[]
+  brands: string[]
+  
+  // Terms
+  minimumOrderValue?: number
+  paymentTermsDays: number
+  defaultLeadTimeDays: number
+  
+  // Pricing
+  discountPercent: number
+  shippingCostPerOrder: number
+  
+  // Stats
+  totalOrders: number
+  totalSpent: number
+  averageRating?: number
+  
+  // Status
+  isActive: boolean
+  
+  // Metadata
+  createdAt: Date | string
+  updatedAt: Date | string
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/activity-tracker.ts b/apps/fabrikanabytok/lib/utils/activity-tracker.ts
new file mode 100644
index 0000000..643379a
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/activity-tracker.ts
@@ -0,0 +1,293 @@
+/**
+ * Activity Tracking System
+ * Comprehensive user behavior monitoring for security & analytics
+ */
+
+import { getDb } from "@/lib/db/mongodb"
+import type { 
+  UserActivityEvent, 
+  FeatureUsageEvent, 
+  SubscriptionEvent,
+  SecurityEvent,
+  ActivityEventType 
+} from "@/lib/types/socket.types"
+
+/**
+ * Track user activity event
+ */
+export async function trackActivity(event: UserActivityEvent) {
+  try {
+    const db = await getDb()
+    
+    await db.collection("user_activities").insertOne({
+      ...event,
+      timestamp: new Date(),
+    })
+    
+    // Also update user's last activity
+    await db.collection("users").updateOne(
+      { id: event.userId },
+      { $set: { lastActivity: new Date() } }
+    )
+  } catch (error) {
+    console.error("[ActivityTracker] Failed to track activity:", error)
+    // Don't throw - tracking should be non-blocking
+  }
+}
+
+/**
+ * Track feature usage
+ */
+export async function trackFeatureUsage(event: FeatureUsageEvent) {
+  try {
+    const db = await getDb()
+    
+    await db.collection("feature_usage").insertOne({
+      ...event,
+      timestamp: new Date(),
+    })
+    
+    // Update user's feature usage counters
+    await db.collection("user_stats").updateOne(
+      { userId: event.userId, date: getTodayString() },
+      {
+        $inc: {
+          [`features.${event.feature}`]: 1,
+          totalActions: 1,
+        },
+        $set: { lastUpdated: new Date() },
+      },
+      { upsert: true }
+    )
+  } catch (error) {
+    console.error("[ActivityTracker] Failed to track feature usage:", error)
+  }
+}
+
+/**
+ * Track subscription events (limits, blocks, warnings)
+ */
+export async function trackSubscriptionEvent(event: SubscriptionEvent) {
+  try {
+    const db = await getDb()
+    
+    await db.collection("subscription_events").insertOne({
+      ...event,
+      timestamp: new Date(),
+    })
+    
+    // If limit reached, emit notification to user
+    if (event.eventType === "limit_reached" || event.eventType === "feature_blocked") {
+      // This will be handled by Socket.IO
+      return { shouldNotify: true, event }
+    }
+  } catch (error) {
+    console.error("[ActivityTracker] Failed to track subscription event:", error)
+  }
+}
+
+/**
+ * Track security events
+ */
+export async function trackSecurityEvent(event: SecurityEvent) {
+  try {
+    const db = await getDb()
+    
+    await db.collection("security_events").insertOne({
+      ...event,
+      timestamp: new Date(),
+    })
+    
+    // If high severity, alert admins immediately
+    if (event.severity === "high" || event.severity === "critical") {
+      return { shouldAlert: true, event }
+    }
+  } catch (error) {
+    console.error("[ActivityTracker] Failed to track security event:", error)
+  }
+}
+
+/**
+ * Check user subscription limits
+ */
+export async function checkSubscriptionLimit(
+  userId: string,
+  feature: string
+): Promise<{
+  allowed: boolean
+  currentUsage: number
+  limit: number
+  percentage: number
+}> {
+  try {
+    const db = await getDb()
+    
+    // Get user's subscription
+    const user = await db.collection("users").findOne({ id: userId })
+    
+    if (!user) {
+      return { allowed: false, currentUsage: 0, limit: 0, percentage: 0 }
+    }
+    
+    const subscription = user.subscription || { tier: "free" }
+    const limits = getFeatureLimits(subscription.tier)
+    
+    // Get current usage for today
+    const stats = await db.collection("user_stats").findOne({
+      userId,
+      date: getTodayString(),
+    })
+    
+    const currentUsage = stats?.features?.[feature] || 0
+    const limit = limits[feature] || Infinity
+    const percentage = (currentUsage / limit) * 100
+    
+    const allowed = currentUsage < limit
+    
+    // Track if limit reached
+    if (!allowed) {
+      await trackSubscriptionEvent({
+        userId,
+        subscriptionId: subscription.id,
+        eventType: "limit_reached",
+        feature,
+        currentUsage,
+        limit,
+        timestamp: new Date(),
+      })
+    } else if (percentage >= 80) {
+      // Warn when at 80% of limit
+      await trackSubscriptionEvent({
+        userId,
+        subscriptionId: subscription.id,
+        eventType: "usage_warning",
+        feature,
+        currentUsage,
+        limit,
+        timestamp: new Date(),
+      })
+    }
+    
+    return { allowed, currentUsage, limit, percentage }
+  } catch (error) {
+    console.error("[ActivityTracker] Failed to check limit:", error)
+    return { allowed: true, currentUsage: 0, limit: Infinity, percentage: 0 }
+  }
+}
+
+/**
+ * Get feature limits by subscription tier
+ */
+function getFeatureLimits(tier: string): Record<string, number> {
+  const limits: Record<string, Record<string, number>> = {
+    free: {
+      designs: 3,
+      exports: 5,
+      aiQueries: 10,
+      collaboration: 0,
+      highResExport: 0,
+    },
+    basic: {
+      designs: 10,
+      exports: 20,
+      aiQueries: 50,
+      collaboration: 2,
+      highResExport: 5,
+    },
+    premium: {
+      designs: 50,
+      exports: 100,
+      aiQueries: 200,
+      collaboration: 10,
+      highResExport: 50,
+    },
+    enterprise: {
+      designs: Infinity,
+      exports: Infinity,
+      aiQueries: Infinity,
+      collaboration: Infinity,
+      highResExport: Infinity,
+    },
+  }
+  
+  return limits[tier] || limits.free
+}
+
+/**
+ * Get today's date string (YYYY-MM-DD)
+ */
+function getTodayString(): string {
+  return new Date().toISOString().split("T")[0]
+}
+
+/**
+ * Detect suspicious activity patterns
+ */
+export async function detectSuspiciousActivity(
+  userId: string,
+  sessionId: string
+): Promise<{ suspicious: boolean; reasons: string[] }> {
+  try {
+    const db = await getDb()
+    const reasons: string[] = []
+    
+    // Get recent activities (last hour)
+    const oneHourAgo = new Date(Date.now() - 60 * 60 * 1000)
+    const recentActivities = await db
+      .collection("user_activities")
+      .find({
+        userId,
+        timestamp: { $gte: oneHourAgo },
+      })
+      .toArray()
+    
+    // Check 1: Too many requests
+    if (recentActivities.length > 1000) {
+      reasons.push("Excessive requests (>1000/hour)")
+    }
+    
+    // Check 2: Rapid feature usage (potential automation)
+    const featureEvents = recentActivities.filter(a => a.eventType === "feature_usage")
+    if (featureEvents.length > 500) {
+      reasons.push("Rapid feature usage (potential bot)")
+    }
+    
+    // Check 3: Failed authentication attempts
+    const failedAttempts = await db
+      .collection("security_events")
+      .countDocuments({
+        userId,
+        eventType: "unauthorized_access",
+        timestamp: { $gte: oneHourAgo },
+      })
+    
+    if (failedAttempts > 10) {
+      reasons.push(`Multiple failed access attempts (${failedAttempts})`)
+    }
+    
+    // Check 4: Unusual export pattern
+    const exportEvents = recentActivities.filter(a => a.eventType === "design_export")
+    if (exportEvents.length > 50) {
+      reasons.push("Excessive exports (>50/hour)")
+    }
+    
+    const suspicious = reasons.length > 0
+    
+    if (suspicious) {
+      await trackSecurityEvent({
+        userId,
+        sessionId,
+        eventType: "suspicious_activity",
+        severity: reasons.length > 2 ? "high" : "medium",
+        details: { reasons, activityCount: recentActivities.length },
+        timestamp: new Date(),
+      })
+    }
+    
+    return { suspicious, reasons }
+  } catch (error) {
+    console.error("[ActivityTracker] Failed to detect suspicious activity:", error)
+    return { suspicious: false, reasons: [] }
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/cache-manager.ts b/apps/fabrikanabytok/lib/utils/cache-manager.ts
new file mode 100644
index 0000000..a06ab8e
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/cache-manager.ts
@@ -0,0 +1,164 @@
+/**
+ * Cache Management Utilities
+ * Client-side caching for better performance
+ */
+
+interface CacheEntry<T> {
+  data: T
+  timestamp: number
+  expiresAt: number
+}
+
+class CacheManager {
+  private cache = new Map<string, CacheEntry<any>>()
+  private readonly defaultTTL = 5 * 60 * 1000 // 5 minutes
+  
+  /**
+   * Set cache entry
+   */
+  set<T>(key: string, data: T, ttl?: number): void {
+    const now = Date.now()
+    const expiresAt = now + (ttl || this.defaultTTL)
+    
+    this.cache.set(key, {
+      data,
+      timestamp: now,
+      expiresAt,
+    })
+  }
+  
+  /**
+   * Get cache entry
+   */
+  get<T>(key: string): T | null {
+    const entry = this.cache.get(key)
+    
+    if (!entry) return null
+    
+    // Check if expired
+    if (Date.now() > entry.expiresAt) {
+      this.cache.delete(key)
+      return null
+    }
+    
+    return entry.data as T
+  }
+  
+  /**
+   * Check if key exists and is valid
+   */
+  has(key: string): boolean {
+    return this.get(key) !== null
+  }
+  
+  /**
+   * Invalidate cache entry
+   */
+  invalidate(key: string): void {
+    this.cache.delete(key)
+  }
+  
+  /**
+   * Invalidate by pattern
+   */
+  invalidatePattern(pattern: string): void {
+    const regex = new RegExp(pattern)
+    for (const key of this.cache.keys()) {
+      if (regex.test(key)) {
+        this.cache.delete(key)
+      }
+    }
+  }
+  
+  /**
+   * Clear all cache
+   */
+  clear(): void {
+    this.cache.clear()
+  }
+  
+  /**
+   * Get or set (fetch if not cached)
+   */
+  async getOrFetch<T>(
+    key: string,
+    fetchFn: () => Promise<T>,
+    ttl?: number
+  ): Promise<T> {
+    const cached = this.get<T>(key)
+    if (cached !== null) return cached
+    
+    const data = await fetchFn()
+    this.set(key, data, ttl)
+    return data
+  }
+  
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    let validEntries = 0
+    let expiredEntries = 0
+    
+    const now = Date.now()
+    for (const entry of this.cache.values()) {
+      if (now > entry.expiresAt) {
+        expiredEntries++
+      } else {
+        validEntries++
+      }
+    }
+    
+    return {
+      totalEntries: this.cache.size,
+      validEntries,
+      expiredEntries,
+      hitRate: 0, // Would track in production
+    }
+  }
+}
+
+export const cacheManager = new CacheManager()
+
+/**
+ * React hook for cached data
+ */
+export function useCachedData<T>(
+  key: string,
+  fetchFn: () => Promise<T>,
+  dependencies: any[] = []
+) {
+  const [data, setData] = React.useState<T | null>(null)
+  const [loading, setLoading] = React.useState(true)
+  
+  React.useEffect(() => {
+    let mounted = true
+    
+    async function load() {
+      setLoading(true)
+      try {
+        const result = await cacheManager.getOrFetch(key, fetchFn)
+        if (mounted) {
+          setData(result)
+        }
+      } catch (error) {
+        console.error("Cache fetch error:", error)
+      } finally {
+        if (mounted) {
+          setLoading(false)
+        }
+      }
+    }
+    
+    load()
+    
+    return () => {
+      mounted = false
+    }
+  }, [key, ...dependencies])
+  
+  return { data, loading }
+}
+
+import * as React from "react"
+
diff --git a/apps/fabrikanabytok/lib/utils/canvas-export.ts b/apps/fabrikanabytok/lib/utils/canvas-export.ts
new file mode 100644
index 0000000..49bbb3a
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/canvas-export.ts
@@ -0,0 +1,134 @@
+/**
+ * Canvas Export Utilities
+ * Capture screenshots from THREE.js canvas for image exports
+ */
+
+import * as THREE from "three"
+
+export interface ScreenshotOptions {
+  width?: number
+  height?: number
+  format?: "png" | "jpg" | "webp"
+  quality?: number // 0-1 for jpg/webp
+  backgroundColor?: string
+}
+
+/**
+ * Capture screenshot from THREE.js canvas
+ */
+export async function captureCanvasScreenshot(
+  canvas: HTMLCanvasElement,
+  options: ScreenshotOptions = {}
+): Promise<string> {
+  const {
+    width = canvas.width,
+    height = canvas.height,
+    format = "png",
+    quality = 0.95,
+    backgroundColor = "#ffffff",
+  } = options
+
+  // Create temporary canvas for export
+  const exportCanvas = document.createElement("canvas")
+  exportCanvas.width = width
+  exportCanvas.height = height
+
+  const ctx = exportCanvas.getContext("2d")
+  if (!ctx) {
+    throw new Error("Failed to get canvas context")
+  }
+
+  // Fill background
+  ctx.fillStyle = backgroundColor
+  ctx.fillRect(0, 0, width, height)
+
+  // Draw the source canvas
+  ctx.drawImage(canvas, 0, 0, width, height)
+
+  // Convert to data URL
+  const mimeType = format === "png" ? "image/png" : format === "jpg" ? "image/jpeg" : "image/webp"
+  const dataUrl = exportCanvas.toDataURL(mimeType, quality)
+
+  return dataUrl
+}
+
+/**
+ * Download data URL as file
+ */
+export function downloadDataUrl(dataUrl: string, filename: string) {
+  const link = document.createElement("a")
+  link.href = dataUrl
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+/**
+ * Convert data URL to Blob
+ */
+export async function dataUrlToBlob(dataUrl: string): Promise<Blob> {
+  const response = await fetch(dataUrl)
+  return response.blob()
+}
+
+/**
+ * Capture multiple views from camera positions
+ */
+export async function captureMultipleViews(
+  canvas: HTMLCanvasElement,
+  camera: THREE.Camera,
+  scene: THREE.Scene,
+  renderer: THREE.WebGLRenderer,
+  views: Array<{
+    name: string
+    position: THREE.Vector3
+    lookAt: THREE.Vector3
+  }>,
+  options: ScreenshotOptions = {}
+): Promise<Array<{ name: string; dataUrl: string }>> {
+  const originalPosition = camera.position.clone()
+  const originalRotation = camera.rotation.clone()
+
+  const screenshots: Array<{ name: string; dataUrl: string }> = []
+
+  for (const view of views) {
+    // Set camera position
+    camera.position.copy(view.position)
+    camera.lookAt(view.lookAt)
+
+    // Render
+    renderer.render(scene, camera)
+
+    // Capture
+    const dataUrl = await captureCanvasScreenshot(canvas, options)
+    screenshots.push({ name: view.name, dataUrl })
+
+    // Small delay to ensure render completes
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+
+  // Restore camera
+  camera.position.copy(originalPosition)
+  camera.rotation.copy(originalRotation)
+
+  return screenshots
+}
+
+/**
+ * Get resolution dimensions
+ */
+export function getResolutionDimensions(resolution: "hd" | "fhd" | "4k" | "8k"): {
+  width: number
+  height: number
+} {
+  const resolutions = {
+    hd: { width: 1280, height: 720 },
+    fhd: { width: 1920, height: 1080 },
+    "4k": { width: 3840, height: 2160 },
+    "8k": { width: 7680, height: 4320 },
+  }
+
+  return resolutions[resolution] || resolutions.fhd
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/csv-parser.ts b/apps/fabrikanabytok/lib/utils/csv-parser.ts
new file mode 100644
index 0000000..f78ef4e
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/csv-parser.ts
@@ -0,0 +1,122 @@
+/**
+ * Advanced CSV parser that handles complex CSVs with:
+ * - Quoted fields with commas inside
+ * - Escaped quotes
+ * - Multiline fields
+ * - Large files
+ */
+
+export function parseCSVLine(line: string, delimiter: string = ","): string[] {
+  const result: string[] = []
+  let current = ""
+  let inQuotes = false
+  let i = 0
+
+  while (i < line.length) {
+    const char = line[i]
+    const nextChar = line[i + 1]
+
+    if (char === '"') {
+      if (inQuotes && nextChar === '"') {
+        // Escaped quote
+        current += '"'
+        i += 2
+        continue
+      }
+      // Toggle quote mode
+      inQuotes = !inQuotes
+      i++
+      continue
+    }
+
+    if (char === delimiter && !inQuotes) {
+      // End of field
+      result.push(current.trim())
+      current = ""
+      i++
+      continue
+    }
+
+    current += char
+    i++
+  }
+
+  // Add last field
+  result.push(current.trim())
+
+  return result
+}
+
+export function parseCSVContent(content: string): any[] {
+  const lines: string[] = []
+  let currentLine = ""
+  let inQuotes = false
+
+  // Split content into lines, respecting quoted multiline fields
+  for (let i = 0; i < content.length; i++) {
+    const char = content[i]
+    const nextChar = content[i + 1]
+
+    if (char === '"') {
+      if (inQuotes && nextChar === '"') {
+        currentLine += '""'
+        i++
+        continue
+      }
+      inQuotes = !inQuotes
+      currentLine += char
+      continue
+    }
+
+    if (char === "\n" && !inQuotes) {
+      if (currentLine.trim()) {
+        lines.push(currentLine)
+      }
+      currentLine = ""
+      continue
+    }
+
+    if (char === "\r") {
+      // Skip carriage return
+      continue
+    }
+
+    currentLine += char
+  }
+
+  if (currentLine.trim()) {
+    lines.push(currentLine)
+  }
+
+  if (lines.length === 0) {
+    return []
+  }
+
+  // Parse header
+  const header = parseCSVLine(lines[0])
+
+  // Parse rows
+  const rows: any[] = []
+  for (let i = 1; i < lines.length; i++) {
+    const values = parseCSVLine(lines[i])
+    const row: any = {}
+
+    header.forEach((key, index) => {
+      row[key] = values[index] || ""
+    })
+
+    rows.push(row)
+  }
+
+  return rows
+}
+
+export function parseCSVFile(filePath: string, content: string): any[] {
+  try {
+    return parseCSVContent(content)
+  } catch (error) {
+    console.error("Error parsing CSV:", error)
+    throw new Error("Failed to parse CSV file")
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/data-export.ts b/apps/fabrikanabytok/lib/utils/data-export.ts
new file mode 100644
index 0000000..e476e21
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/data-export.ts
@@ -0,0 +1,76 @@
+/**
+ * Data Export Utilities
+ * Export tables and data to various formats
+ */
+
+/**
+ * Export data to CSV
+ */
+export function exportToCSV(data: any[], filename: string) {
+  if (data.length === 0) return
+  
+  // Get headers from first object
+  const headers = Object.keys(data[0])
+  
+  // Create CSV content
+  const csvContent = [
+    headers.join(","),
+    ...data.map((row) =>
+      headers.map((header) => {
+        const value = row[header]
+        // Escape quotes and wrap in quotes if contains comma
+        if (typeof value === "string" && (value.includes(",") || value.includes('"'))) {
+          return `"${value.replace(/"/g, '""')}"`
+        }
+        return value
+      }).join(",")
+    ),
+  ].join("\n")
+  
+  // Create blob and download
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename.endsWith(".csv") ? filename : `${filename}.csv`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+/**
+ * Export data to Excel (XLSX)
+ */
+export async function exportToExcel(data: any[], filename: string, sheetName: string = "Sheet1") {
+  try {
+    // Dynamic import to avoid bundling xlsx in main bundle
+    const XLSX = await import("xlsx")
+    
+    const worksheet = XLSX.utils.json_to_sheet(data)
+    const workbook = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+    
+    XLSX.writeFile(workbook, filename.endsWith(".xlsx") ? filename : `${filename}.xlsx`)
+  } catch (error) {
+    console.error("Failed to export to Excel:", error)
+    throw new Error("Excel export failed")
+  }
+}
+
+/**
+ * Export data to JSON
+ */
+export function exportToJSON(data: any, filename: string) {
+  const jsonContent = JSON.stringify(data, null, 2)
+  const blob = new Blob([jsonContent], { type: "application/json" })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename.endsWith(".json") ? filename : `${filename}.json`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/employee-logger.ts b/apps/fabrikanabytok/lib/utils/employee-logger.ts
new file mode 100644
index 0000000..ccf1500
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/employee-logger.ts
@@ -0,0 +1,351 @@
+/**
+ * Employee Activity Logger
+ * Sophisticated logging system for all employee actions
+ */
+
+import { getDb } from "@/lib/db/mongodb"
+import type { EmployeeAction, EmployeeSession } from "@/lib/types/employee.types"
+import { requiresConfirmation } from "./permissions"
+
+/**
+ * Log employee action
+ */
+export async function logEmployeeAction(
+  employeeId: string,
+  employeeName: string,
+  action: string,
+  module: string,
+  options: {
+    description: string
+    before?: any
+    after?: any
+    changes?: any
+    ipAddress: string
+    userAgent: string
+    sessionId: string
+    confirmed?: boolean
+    confirmationNote?: string
+    reason?: string
+    notes?: string
+    metadata?: any
+  }
+): Promise<string> {
+  try {
+    const db = await getDb()
+    
+    const actionLog: EmployeeAction = {
+      id: crypto.randomUUID(),
+      employeeId,
+      employeeName,
+      action,
+      module,
+      description: options.description,
+      before: options.before,
+      after: options.after,
+      changes: options.changes,
+      ipAddress: options.ipAddress,
+      userAgent: options.userAgent,
+      sessionId: options.sessionId,
+      requiresConfirmation: requiresConfirmation(action),
+      confirmed: options.confirmed || false,
+      confirmationNote: options.confirmationNote,
+      status: "completed",
+      reason: options.reason,
+      notes: options.notes,
+      startedAt: new Date(),
+      completedAt: new Date(),
+      duration: 0,
+    }
+    
+    await db.collection("employee_actions").insertOne(actionLog)
+    
+    // Update employee metrics
+    await updateEmployeeMetrics(employeeId, action, true, 0)
+    
+    // Emit Socket.IO event for real-time admin monitoring
+    try {
+      const { emitToAdmin } = await import("@/lib/websocket/socket-server")
+      emitToAdmin("employee:action", {
+        employeeId,
+        employeeName,
+        action,
+        module,
+        timestamp: Date.now(),
+      })
+    } catch (e) {
+      // Socket.IO might not be available
+    }
+    
+    return actionLog.id
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to log action:", error)
+    throw error
+  }
+}
+
+/**
+ * Start tracking an action (for long-running operations)
+ */
+export async function startActionTracking(
+  employeeId: string,
+  employeeName: string,
+  action: string,
+  module: string,
+  options: {
+    description: string
+    ipAddress: string
+    userAgent: string
+    sessionId: string
+  }
+): Promise<string> {
+  try {
+    const db = await getDb()
+    
+    const actionLog: EmployeeAction = {
+      id: crypto.randomUUID(),
+      employeeId,
+      employeeName,
+      action,
+      module,
+      description: options.description,
+      ipAddress: options.ipAddress,
+      userAgent: options.userAgent,
+      sessionId: options.sessionId,
+      requiresConfirmation: requiresConfirmation(action),
+      confirmed: false,
+      status: "pending",
+      startedAt: new Date(),
+    }
+    
+    await db.collection("employee_actions").insertOne(actionLog)
+    
+    return actionLog.id
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to start tracking:", error)
+    throw error
+  }
+}
+
+/**
+ * Complete action tracking
+ */
+export async function completeActionTracking(
+  actionId: string,
+  success: boolean,
+  result?: any,
+  error?: string
+) {
+  try {
+    const db = await getDb()
+    
+    const action = await db.collection("employee_actions").findOne({ id: actionId })
+    
+    if (!action) {
+      throw new Error("Action not found")
+    }
+    
+    const duration = Date.now() - new Date(action.startedAt).getTime()
+    
+    await db.collection("employee_actions").updateOne(
+      { id: actionId },
+      {
+        $set: {
+          status: success ? "completed" : "failed",
+          result,
+          error,
+          completedAt: new Date(),
+          duration,
+        },
+      }
+    )
+    
+    // Update employee metrics
+    await updateEmployeeMetrics(action.employeeId, action.action, success, duration)
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to complete tracking:", error)
+  }
+}
+
+/**
+ * Update employee metrics
+ */
+async function updateEmployeeMetrics(
+  employeeId: string,
+  action: string,
+  success: boolean,
+  duration: number
+) {
+  try {
+    const db = await getDb()
+    
+    const updates: any = {
+      $inc: {
+        "metrics.totalActions": 1,
+        "metrics.actionsToday": 1,
+      },
+      $set: {
+        lastActivity: new Date(),
+      },
+    }
+    
+    if (!success) {
+      updates.$inc["metrics.errorCount"] = 1
+    }
+    
+    // Update average action time
+    const employee = await db.collection("employees").findOne({ id: employeeId })
+    if (employee) {
+      const currentAvg = employee.metrics?.avgActionTime || 0
+      const totalActions = employee.metrics?.totalActions || 0
+      const newAvg = (currentAvg * totalActions + duration) / (totalActions + 1)
+      updates.$set["metrics.avgActionTime"] = newAvg
+    }
+    
+    await db.collection("employees").updateOne({ id: employeeId }, updates)
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to update metrics:", error)
+  }
+}
+
+/**
+ * Create employee session
+ */
+export async function createEmployeeSession(
+  employeeId: string,
+  ipAddress: string,
+  userAgent: string
+): Promise<string> {
+  try {
+    const db = await getDb()
+    
+    // Parse user agent
+    const device = parseUserAgent(userAgent).device
+    const browser = parseUserAgent(userAgent).browser
+    
+    const session: EmployeeSession = {
+      id: crypto.randomUUID(),
+      employeeId,
+      startedAt: new Date(),
+      ipAddress,
+      userAgent,
+      device,
+      browser,
+      actionsCount: 0,
+      pagesVisited: [],
+      status: "active",
+    }
+    
+    await db.collection("employee_sessions").insertOne(session)
+    
+    // Update employee last login
+    await db.collection("employees").updateOne(
+      { id: employeeId },
+      {
+        $set: { lastLogin: new Date() },
+        $addToSet: { ipAddresses: ipAddress },
+      }
+    )
+    
+    return session.id
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to create session:", error)
+    throw error
+  }
+}
+
+/**
+ * End employee session
+ */
+export async function endEmployeeSession(sessionId: string) {
+  try {
+    const db = await getDb()
+    
+    const session = await db.collection("employee_sessions").findOne({ id: sessionId })
+    
+    if (!session) {
+      return
+    }
+    
+    const duration = Date.now() - new Date(session.startedAt).getTime()
+    
+    await db.collection("employee_sessions").updateOne(
+      { id: sessionId },
+      {
+        $set: {
+          endedAt: new Date(),
+          duration,
+          status: "ended",
+        },
+      }
+    )
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to end session:", error)
+  }
+}
+
+/**
+ * Get employee action history
+ */
+export async function getEmployeeActionHistory(
+  employeeId: string,
+  options: {
+    limit?: number
+    skip?: number
+    module?: string
+    dateFrom?: Date
+    dateTo?: Date
+  } = {}
+) {
+  try {
+    const db = await getDb()
+    
+    const query: any = { employeeId }
+    
+    if (options.module) {
+      query.module = options.module
+    }
+    
+    if (options.dateFrom || options.dateTo) {
+      query.startedAt = {}
+      if (options.dateFrom) query.startedAt.$gte = options.dateFrom
+      if (options.dateTo) query.startedAt.$lte = options.dateTo
+    }
+    
+    const actions = await db
+      .collection("employee_actions")
+      .find(query)
+      .sort({ startedAt: -1 })
+      .limit(options.limit || 100)
+      .skip(options.skip || 0)
+      .toArray()
+    
+    return actions.map((a: any) => {
+      const { _id, ...actionData } = a
+      return actionData
+    })
+  } catch (error) {
+    console.error("[EmployeeLogger] Failed to get history:", error)
+    return []
+  }
+}
+
+/**
+ * Simple user agent parser
+ */
+function parseUserAgent(ua: string): { device: string; browser: string } {
+  const isMobile = /Mobile|Android|iPhone|iPad/i.test(ua)
+  const isTablet = /iPad|Android.*Tablet/i.test(ua)
+  
+  let device = "desktop"
+  if (isTablet) device = "tablet"
+  else if (isMobile) device = "mobile"
+  
+  let browser = "unknown"
+  if (/Chrome/i.test(ua)) browser = "Chrome"
+  else if (/Firefox/i.test(ua)) browser = "Firefox"
+  else if (/Safari/i.test(ua)) browser = "Safari"
+  else if (/Edge/i.test(ua)) browser = "Edge"
+  
+  return { device, browser }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/glb-export.ts b/apps/fabrikanabytok/lib/utils/glb-export.ts
new file mode 100644
index 0000000..da7bb53
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/glb-export.ts
@@ -0,0 +1,170 @@
+/**
+ * GLB Export Utilities
+ * Export THREE.js scene as GLB file
+ */
+
+import * as THREE from "three"
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter"
+import type { PlacedObject } from "@/lib/types/planner.types"
+
+export interface GLBExportOptions {
+  binary?: boolean // true for .glb, false for .gltf
+  includeTextures?: boolean
+  includeAnimations?: boolean
+  includeMaterials?: boolean
+  onlySelected?: boolean
+  selectedObjectIds?: string[]
+}
+
+/**
+ * Export THREE.js scene to GLB/GLTF
+ */
+export async function exportSceneToGLB(
+  scene: THREE.Scene,
+  placedObjects: PlacedObject[],
+  options: GLBExportOptions = {}
+): Promise<Blob> {
+  const {
+    binary = true, // Default to .glb
+    includeTextures = true,
+    includeAnimations = false,
+    includeMaterials = true,
+    onlySelected = false,
+    selectedObjectIds = [],
+  } = options
+
+  // Create export scene (clone to avoid modifying original)
+  const exportScene = new THREE.Scene()
+
+  // Add objects to export scene
+  scene.traverse((child) => {
+    if (child instanceof THREE.Mesh || child instanceof THREE.Group) {
+      // Check if should export
+      if (onlySelected && selectedObjectIds.length > 0) {
+        const objectId = (child.userData as any)?.objectId
+        if (!selectedObjectIds.includes(objectId)) {
+          return
+        }
+      }
+
+      const clonedChild = child.clone()
+      exportScene.add(clonedChild)
+    }
+  })
+
+  // Create exporter
+  const exporter = new GLTFExporter()
+
+  // Export options
+  const exportOptions = {
+    binary,
+    includeCustomExtensions: false,
+    onlyVisible: true,
+    truncateDrawRange: true,
+  }
+
+  return new Promise((resolve, reject) => {
+    exporter.parse(
+      exportScene,
+      (result) => {
+        if (binary) {
+          // GLB (binary)
+          const blob = new Blob([result as ArrayBuffer], { type: "model/gltf-binary" })
+          resolve(blob)
+        } else {
+          // GLTF (JSON)
+          const blob = new Blob([JSON.stringify(result)], { type: "model/gltf+json" })
+          resolve(blob)
+        }
+      },
+      (error) => {
+        console.error("GLB export error:", error)
+        reject(new Error("Failed to export GLB"))
+      },
+      exportOptions
+    )
+  })
+}
+
+/**
+ * Export individual object to GLB
+ */
+export async function exportObjectToGLB(
+  object: THREE.Object3D,
+  options: Omit<GLBExportOptions, "onlySelected" | "selectedObjectIds"> = {}
+): Promise<Blob> {
+  const exporter = new GLTFExporter()
+
+  const exportOptions = {
+    binary: options.binary !== false,
+    includeCustomExtensions: false,
+  }
+
+  return new Promise((resolve, reject) => {
+    exporter.parse(
+      object,
+      (result) => {
+        if (exportOptions.binary) {
+          const blob = new Blob([result as ArrayBuffer], { type: "model/gltf-binary" })
+          resolve(blob)
+        } else {
+          const blob = new Blob([JSON.stringify(result)], { type: "model/gltf+json" })
+          resolve(blob)
+        }
+      },
+      (error) => {
+        reject(new Error("Failed to export object"))
+      },
+      exportOptions
+    )
+  })
+}
+
+/**
+ * Download GLB blob as file
+ */
+export function downloadGLB(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename.endsWith(".glb") || filename.endsWith(".gltf") ? filename : `${filename}.glb`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+/**
+ * Combine multiple GLB files into one scene
+ */
+export async function combineGLBFiles(glbBlobs: Blob[]): Promise<Blob> {
+  const scene = new THREE.Scene()
+
+  // Load all GLBs and add to scene
+  const { GLTFLoader } = await import("three/examples/jsm/loaders/GLTFLoader")
+  const loader = new GLTFLoader()
+
+  for (const blob of glbBlobs) {
+    const url = URL.createObjectURL(blob)
+
+    await new Promise<void>((resolve, reject) => {
+      loader.load(
+        url,
+        (gltf) => {
+          scene.add(gltf.scene)
+          URL.revokeObjectURL(url)
+          resolve()
+        },
+        undefined,
+        (error) => {
+          URL.revokeObjectURL(url)
+          reject(error)
+        }
+      )
+    })
+  }
+
+  // Export combined scene
+  return exportSceneToGLB(scene, [], { binary: true })
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/glb-validator.ts b/apps/fabrikanabytok/lib/utils/glb-validator.ts
new file mode 100644
index 0000000..1feac8e
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/glb-validator.ts
@@ -0,0 +1,334 @@
+/**
+ * GLB Model Validator and Optimizer
+ * Validates, optimizes, and extracts metadata from GLB/GLTF files
+ */
+
+export interface GLBValidationResult {
+  isValid: boolean
+  errors: string[]
+  warnings: string[]
+  metadata: GLBMetadata
+}
+
+export interface GLBMetadata {
+  vertices: number
+  triangles: number
+  materials: number
+  textures: number
+  animations: number
+  fileSize: number
+  dimensions: {
+    width: number
+    height: number
+    depth: number
+  }
+  boundingBox: {
+    min: [number, number, number]
+    max: [number, number, number]
+  }
+  hasNormals: boolean
+  hasUVs: boolean
+  hasTangents: boolean
+  meshCount: number
+  nodeCount: number
+}
+
+export interface GLBOptimizationOptions {
+  targetTriangleCount?: number
+  compressTextures?: boolean
+  generateLODs?: boolean
+  removeDuplicateVertices?: boolean
+  optimizeMaterials?: boolean
+  maxTextureSize?: number
+}
+
+export interface GLBOptimizationResult {
+  optimizedBuffer: ArrayBuffer
+  originalSize: number
+  optimizedSize: number
+  compressionRatio: number
+  optimizations: string[]
+  lodLevels?: ArrayBuffer[]
+}
+
+/**
+ * Validate a GLB file
+ */
+export async function validateGLB(buffer: ArrayBuffer): Promise<GLBValidationResult> {
+  const errors: string[] = []
+  const warnings: string[] = []
+  
+  try {
+    // Check file signature
+    const view = new DataView(buffer)
+    const magic = view.getUint32(0, true)
+    
+    if (magic !== 0x46546C67) {
+      errors.push("Invalid GLB file signature")
+      return {
+        isValid: false,
+        errors,
+        warnings,
+        metadata: getEmptyMetadata(),
+      }
+    }
+    
+    // Check version
+    const version = view.getUint32(4, true)
+    if (version !== 2) {
+      errors.push(`Unsupported GLB version: ${version}. Only version 2 is supported.`)
+    }
+    
+    // Check file length
+    const length = view.getUint32(8, true)
+    if (length !== buffer.byteLength) {
+      errors.push(`File length mismatch. Header: ${length}, Actual: ${buffer.byteLength}`)
+    }
+    
+    // Parse JSON chunk
+    const jsonChunkLength = view.getUint32(12, true)
+    const jsonChunkType = view.getUint32(16, true)
+    
+    if (jsonChunkType !== 0x4E4F534A) {
+      errors.push("Invalid JSON chunk type")
+    }
+    
+    // Extract JSON
+    const jsonBytes = new Uint8Array(buffer, 20, jsonChunkLength)
+    const jsonText = new TextDecoder().decode(jsonBytes)
+    const gltf = JSON.parse(jsonText)
+    
+    // Extract metadata
+    const metadata = extractMetadata(gltf, buffer)
+    
+    // Validation checks
+    if (!gltf.asset) {
+      errors.push("Missing asset information")
+    }
+    
+    if (!gltf.scenes || gltf.scenes.length === 0) {
+      warnings.push("No scenes defined")
+    }
+    
+    if (!gltf.nodes || gltf.nodes.length === 0) {
+      warnings.push("No nodes defined")
+    }
+    
+    if (!gltf.meshes || gltf.meshes.length === 0) {
+      warnings.push("No meshes defined")
+    }
+    
+    // Check for required attributes
+    if (gltf.meshes) {
+      gltf.meshes.forEach((mesh: any, idx: number) => {
+        mesh.primitives?.forEach((primitive: any, pidx: number) => {
+          if (!primitive.attributes) {
+            errors.push(`Mesh ${idx}, primitive ${pidx}: Missing attributes`)
+          }
+          if (!primitive.attributes.POSITION) {
+            errors.push(`Mesh ${idx}, primitive ${pidx}: Missing POSITION attribute`)
+          }
+          if (!primitive.attributes.NORMAL) {
+            warnings.push(`Mesh ${idx}, primitive ${pidx}: Missing NORMAL attribute - may affect lighting`)
+          }
+          if (!primitive.attributes.TEXCOORD_0) {
+            warnings.push(`Mesh ${idx}, primitive ${pidx}: Missing UV coordinates - textures won't work`)
+          }
+        })
+      })
+    }
+    
+    // Check materials
+    if (gltf.materials) {
+      gltf.materials.forEach((material: any, idx: number) => {
+        if (!material.pbrMetallicRoughness && !material.extensions) {
+          warnings.push(`Material ${idx}: No PBR or extension data defined`)
+        }
+      })
+    }
+    
+    // Check textures
+    if (gltf.textures && gltf.images) {
+      if (gltf.textures.length > 10) {
+        warnings.push(`High texture count (${gltf.textures.length}). May impact performance.`)
+      }
+      
+      gltf.images.forEach((image: any, idx: number) => {
+        if (image.bufferView === undefined && !image.uri) {
+          errors.push(`Image ${idx}: No data source defined`)
+        }
+      })
+    }
+    
+    // Performance warnings
+    if (metadata.triangles > 100000) {
+      warnings.push(`High triangle count (${metadata.triangles}). Consider optimization.`)
+    }
+    
+    if (metadata.fileSize > 10 * 1024 * 1024) {
+      warnings.push(`Large file size (${(metadata.fileSize / 1024 / 1024).toFixed(2)} MB). Consider compression.`)
+    }
+    
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings,
+      metadata,
+    }
+  } catch (error) {
+    errors.push(`Parse error: ${error instanceof Error ? error.message : String(error)}`)
+    return {
+      isValid: false,
+      errors,
+      warnings,
+      metadata: getEmptyMetadata(),
+    }
+  }
+}
+
+/**
+ * Extract metadata from GLTF JSON and buffer
+ */
+function extractMetadata(gltf: any, buffer: ArrayBuffer): GLBMetadata {
+  let vertices = 0
+  let triangles = 0
+  let hasNormals = false
+  let hasUVs = false
+  let hasTangents = false
+  
+  const min = [Infinity, Infinity, Infinity]
+  const max = [-Infinity, -Infinity, -Infinity]
+  
+  // Count meshes and vertices
+  if (gltf.meshes) {
+    gltf.meshes.forEach((mesh: any) => {
+      mesh.primitives?.forEach((primitive: any) => {
+        if (primitive.attributes.POSITION !== undefined) {
+          const accessor = gltf.accessors[primitive.attributes.POSITION]
+          vertices += accessor.count
+          
+          // Update bounding box
+          if (accessor.min && accessor.max) {
+            for (let i = 0; i < 3; i++) {
+              min[i] = Math.min(min[i], accessor.min[i])
+              max[i] = Math.max(max[i], accessor.max[i])
+            }
+          }
+        }
+        
+        if (primitive.attributes.NORMAL !== undefined) hasNormals = true
+        if (primitive.attributes.TEXCOORD_0 !== undefined) hasUVs = true
+        if (primitive.attributes.TANGENT !== undefined) hasTangents = true
+        
+        // Count triangles
+        if (primitive.indices !== undefined) {
+          const accessor = gltf.accessors[primitive.indices]
+          triangles += accessor.count / 3
+        } else {
+          triangles += vertices / 3
+        }
+      })
+    })
+  }
+  
+  const dimensions = {
+    width: max[0] - min[0],
+    height: max[1] - min[1],
+    depth: max[2] - min[2],
+  }
+  
+  return {
+    vertices,
+    triangles: Math.floor(triangles),
+    materials: gltf.materials?.length || 0,
+    textures: gltf.textures?.length || 0,
+    animations: gltf.animations?.length || 0,
+    fileSize: buffer.byteLength,
+    dimensions,
+    boundingBox: {
+      min: min as [number, number, number],
+      max: max as [number, number, number],
+    },
+    hasNormals,
+    hasUVs,
+    hasTangents,
+    meshCount: gltf.meshes?.length || 0,
+    nodeCount: gltf.nodes?.length || 0,
+  }
+}
+
+/**
+ * Optimize a GLB file
+ * Note: This is a simplified version. For production, use libraries like gltf-transform
+ */
+export async function optimizeGLB(
+  buffer: ArrayBuffer,
+  options: GLBOptimizationOptions = {}
+): Promise<GLBOptimizationResult> {
+  const optimizations: string[] = []
+  const originalSize = buffer.byteLength
+  
+  // For now, return the original buffer
+  // In a real implementation, you would use libraries like:
+  // - gltf-transform for mesh optimization
+  // - sharp for texture compression
+  // - draco for geometry compression
+  
+  optimizations.push("Validation completed")
+  
+  if (options.removeDuplicateVertices) {
+    optimizations.push("Duplicate vertices would be removed")
+  }
+  
+  if (options.compressTextures) {
+    optimizations.push("Textures would be compressed")
+  }
+  
+  if (options.generateLODs) {
+    optimizations.push("LOD levels would be generated")
+  }
+  
+  return {
+    optimizedBuffer: buffer,
+    originalSize,
+    optimizedSize: buffer.byteLength,
+    compressionRatio: 1.0,
+    optimizations,
+  }
+}
+
+/**
+ * Generate thumbnail from GLB
+ * This would typically use a headless renderer or canvas
+ */
+export async function generateGLBThumbnail(buffer: ArrayBuffer, size: number = 256): Promise<string> {
+  // In a real implementation, this would:
+  // 1. Load the GLB into THREE.js
+  // 2. Render to an off-screen canvas
+  // 3. Export as PNG/JPEG
+  // 4. Return as data URL or upload to storage
+  
+  return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
+}
+
+function getEmptyMetadata(): GLBMetadata {
+  return {
+    vertices: 0,
+    triangles: 0,
+    materials: 0,
+    textures: 0,
+    animations: 0,
+    fileSize: 0,
+    dimensions: { width: 0, height: 0, depth: 0 },
+    boundingBox: {
+      min: [0, 0, 0],
+      max: [0, 0, 0],
+    },
+    hasNormals: false,
+    hasUVs: false,
+    hasTangents: false,
+    meshCount: 0,
+    nodeCount: 0,
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/image-downloader.ts b/apps/fabrikanabytok/lib/utils/image-downloader.ts
new file mode 100644
index 0000000..7b2816e
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/image-downloader.ts
@@ -0,0 +1,123 @@
+import { writeFile, mkdir } from "fs/promises"
+import path from "path"
+import { existsSync } from "fs"
+
+export interface DownloadImageResult {
+  success: boolean
+  localUrl?: string
+  originalUrl: string
+  error?: string
+}
+
+export async function downloadImage(
+  imageUrl: string,
+  productSlug: string,
+  index: number = 0
+): Promise<DownloadImageResult> {
+  try {
+    // Validate URL
+    if (!imageUrl || !imageUrl.startsWith("http")) {
+      return {
+        success: false,
+        originalUrl: imageUrl,
+        error: "Invalid URL",
+      }
+    }
+
+    // Extract file extension
+    const urlPath = new URL(imageUrl).pathname
+    const ext = path.extname(urlPath) || ".jpg"
+    
+    // Generate filename
+    const filename = `${productSlug}-${index}${ext}`
+    const uploadsDir = path.join(process.cwd(), "temp", "uploads", "products")
+    const filePath = path.join(uploadsDir, filename)
+
+    // Create directory if it doesn't exist
+    if (!existsSync(uploadsDir)) {
+      await mkdir(uploadsDir, { recursive: true })
+    }
+
+    // Download image
+    const response = await fetch(imageUrl)
+    
+    if (!response.ok) {
+      return {
+        success: false,
+        originalUrl: imageUrl,
+        error: `HTTP ${response.status}`,
+      }
+    }
+
+    // Get image buffer
+    const buffer = await response.arrayBuffer()
+    
+    // Save to file
+    await writeFile(filePath, Buffer.from(buffer))
+
+    // Return public URL (served through API route)
+    const localUrl = `/api/uploads/products/${filename}`
+
+    return {
+      success: true,
+      localUrl,
+      originalUrl: imageUrl,
+    }
+  } catch (error: any) {
+    return {
+      success: false,
+      originalUrl: imageUrl,
+      error: error.message || "Download failed",
+    }
+  }
+}
+
+export async function downloadProductImages(
+  imageUrls: string[],
+  productSlug: string,
+  options?: {
+    maxImages?: number
+    timeout?: number
+  }
+): Promise<DownloadImageResult[]> {
+  const maxImages = options?.maxImages || 10
+  const timeout = options?.timeout || 10000
+
+  const results: DownloadImageResult[] = []
+  const urlsToProcess = imageUrls.slice(0, maxImages)
+
+  for (let i = 0; i < urlsToProcess.length; i++) {
+    try {
+      // Add timeout
+      const downloadPromise = downloadImage(urlsToProcess[i], productSlug, i)
+      const timeoutPromise = new Promise<DownloadImageResult>((_, reject) =>
+        setTimeout(() => reject(new Error("Timeout")), timeout)
+      )
+
+      const result = await Promise.race([downloadPromise, timeoutPromise])
+      results.push(result)
+    } catch (error: any) {
+      results.push({
+        success: false,
+        originalUrl: urlsToProcess[i],
+        error: error.message || "Download failed",
+      })
+    }
+  }
+
+  return results
+}
+
+export function getImageStats(results: DownloadImageResult[]) {
+  const success = results.filter((r) => r.success).length
+  const failed = results.filter((r) => !r.success).length
+  const total = results.length
+
+  return {
+    success,
+    failed,
+    total,
+    successRate: total > 0 ? (success / total) * 100 : 0,
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/import-parser.ts b/apps/fabrikanabytok/lib/utils/import-parser.ts
new file mode 100644
index 0000000..5a6d6d8
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/import-parser.ts
@@ -0,0 +1,435 @@
+import type { Product, ColorOption } from "@/lib/types/product.types"
+
+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"
+  isFeatured?: boolean
+  swatchColors?: Array<{
+    name: string
+    imageUrl?: string
+  }>
+}
+
+function slugify(text: string): string {
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-")
+    .replace(/[^\w\-]+/g, "")
+    .replace(/\-\-+/g, "-")
+}
+
+function extractCategories(categoryString: string): string[] {
+  if (!categoryString) return []
+  
+  // Split by comma or ">" for hierarchical categories
+  const categories = categoryString
+    .split(/[,>]/)
+    .map((cat) => cat.trim())
+    .filter((cat) => cat.length > 0)
+  
+  return [...new Set(categories)] // Remove duplicates
+}
+
+function extractTags(tagString: string): string[] {
+  if (!tagString) return []
+  
+  const tags = tagString
+    .split(",")
+    .map((tag) => tag.trim())
+    .filter((tag) => tag.length > 0)
+  
+  return [...new Set(tags)] // Remove duplicates
+}
+
+function extractImages(imageString: string): string[] {
+  if (!imageString) return []
+  
+  // Split by comma or newline
+  const images = imageString
+    .split(/[,\n]/)
+    .map((img) => img.trim())
+    .filter((img) => img.length > 0 && img.startsWith("http"))
+  
+  return images
+}
+
+function parsePrice(priceString: string | number): number {
+  if (typeof priceString === "number") return priceString
+  
+  // Remove currency symbols and spaces
+  const cleaned = priceString
+    .toString()
+    .replace(/[^\d.,]/g, "")
+    .replace(",", ".")
+  
+  return parseFloat(cleaned) || 0
+}
+
+function parseStock(stockString: string | number): number {
+  if (typeof stockString === "number") return stockString
+  
+  const cleaned = stockString.toString().replace(/[^\d]/g, "")
+  return parseInt(cleaned) || 0
+}
+
+function extractDimensions(row: any): { width: number; height: number; depth: number } | undefined {
+  const width = row["Szélesség (cm)"] || row["width"] || row["Szélesség"]
+  const height = row["Magasság (cm)"] || row["height"] || row["Magasság"]
+  const depth = row["Hosszúság (cm)"] || row["depth"] || row["Mélység"] || row["Hosszúság"]
+  
+  if (width || height || depth) {
+    return {
+      width: parseFloat(width) || 0,
+      height: parseFloat(height) || 0,
+      depth: parseFloat(depth) || 0,
+    }
+  }
+  
+  return undefined
+}
+
+function extractSpecifications(row: any): Array<{
+  label: string
+  value: string
+  type: "text" | "number" | "select" | "multiselect"
+}> {
+  const specifications: Array<{
+    label: string
+    value: string
+    type: "text" | "number" | "select" | "multiselect"
+  }> = []
+  
+  // Look for attribute fields (Tulajdonság)
+  for (let i = 1; i <= 10; i++) {
+    const attrName = row[`Tulajdonság neve ${i}`] || row[`attribute_name_${i}`]
+    const attrValue = row[`Tulajdonság (${i}) értéke(i)`] || row[`attribute_value_${i}`]
+    
+    if (attrName && attrValue) {
+      specifications.push({
+        label: attrName,
+        value: attrValue,
+        type: "text",
+      })
+    }
+  }
+  
+  // Add weight if available
+  const weight = row["Tömeg (kg)"] || row["weight"]
+  if (weight) {
+    specifications.push({
+      label: "Súly",
+      value: weight.toString(),
+      type: "number",
+    })
+  }
+  
+  // Add product type
+  const productType = row["Típus"] || row["type"]
+  if (productType) {
+    specifications.push({
+      label: "Terméktípus",
+      value: productType,
+      type: "text",
+    })
+  }
+  
+  return specifications
+}
+
+function extractSwatchColors(swatchesJson: string): Array<{
+  name: string
+  imageUrl?: string
+}> {
+  if (!swatchesJson) return []
+  
+  try {
+    const swatches = JSON.parse(swatchesJson)
+    const colors: Array<{ name: string; imageUrl?: string }> = []
+    
+    // Parse WooCommerce swatches structure
+    for (const [key, swatch] of Object.entries(swatches as any)) {
+      if (swatch && swatch.terms) {
+        for (const [colorName, colorData] of Object.entries(swatch.terms as any)) {
+          if (colorData && (colorData as any).name) {
+            colors.push({
+              name: (colorData as any).name,
+              imageUrl: (colorData as any).image || undefined,
+            })
+          }
+        }
+      }
+    }
+    
+    return colors
+  } catch (error) {
+    console.error("Error parsing swatches:", error)
+    return []
+  }
+}
+
+function htmlToText(html: string): string {
+  if (!html) return ""
+  
+  // Remove HTML tags
+  return html
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .trim()
+}
+
+export function parseCSVRow(row: any): ParsedProductData | null {
+  try {
+    // Extract name
+    const name = row["Név"] || row["name"] || row["Termék neve"]
+    if (!name || name.trim() === "") {
+      return null
+    }
+    
+    // Skip variation rows (they have parent ID)
+    const parentId = row["Szülő"] || row["parent"] || row["parent_id"]
+    if (parentId && parentId !== "" && parentId !== "0") {
+      // This is a variation, skip it (we'll handle variations later if needed)
+      return null
+    }
+    
+    // Extract prices
+    const normalPrice = row["Normál ár"] || row["price"] || row["Ár"] || "0"
+    const salePrice = row["Akciós ár"] || row["sale_price"]
+    
+    const price = parsePrice(normalPrice)
+    const compareAtPrice = salePrice ? parsePrice(salePrice) : undefined
+    
+    // Extract description
+    const description = htmlToText(row["Leírás"] || row["description"] || "")
+    const shortDescription = htmlToText(row["Rövid leírás"] || row["short_description"] || "")
+    
+    // Extract SKU
+    const sku = row["Cikkszám"] || row["sku"] || row["Azonosító"] || crypto.randomUUID().substring(0, 8)
+    
+    // Extract stock
+    const stockValue = row["Készlet"] || row["stock"] || "0"
+    const stock = parseStock(stockValue)
+    
+    // Extract categories
+    const categoryString = row["Kategória"] || row["category"] || row["categories"] || ""
+    const categories = extractCategories(categoryString)
+    
+    // Extract tags
+    const tagString = row["Címkék"] || row["tags"] || ""
+    let tags = extractTags(tagString)
+    
+    // Add brand as tag if available
+    const brand = row["Márkák"] || row["brand"] || row["brands"]
+    if (brand && brand.trim() !== "") {
+      tags.push(brand.trim())
+    }
+    
+    // Extract images
+    const imageString = row["Képek"] || row["images"] || ""
+    const images = extractImages(imageString)
+    
+    // Extract dimensions
+    const dimensions = extractDimensions(row)
+    
+    // Extract specifications
+    const specifications = extractSpecifications(row)
+    
+    // Extract color swatches
+    const swatchesString = row["Swatches Attributes"] || row["swatches_attributes"]
+    const swatchColors = extractSwatchColors(swatchesString)
+    
+    // Add swatches to specifications if available
+    if (swatchColors.length > 0) {
+      specifications.push({
+        label: "Elérhető színek",
+        value: swatchColors.map((c) => c.name).join(", "),
+        type: "multiselect",
+      })
+    }
+    
+    // Determine status
+    const published = row["Közzétéve"] || row["published"] || "1"
+    const featured = row["Kiemelt?"] || row["featured"] || "0"
+    
+    const status: "draft" | "published" | "archived" = 
+      published === "1" || published === "true" || published === true ? "published" : "draft"
+    
+    const isFeatured = featured === "1" || featured === "true" || featured === true
+    
+    return {
+      name: name.trim(),
+      description,
+      shortDescription: shortDescription || undefined,
+      price,
+      compareAtPrice,
+      sku,
+      stock,
+      categories,
+      tags,
+      images,
+      dimensions,
+      specifications,
+      status,
+      isFeatured,
+      swatchColors,
+    }
+  } catch (error) {
+    console.error("Error parsing CSV row:", error)
+    return null
+  }
+}
+
+export function transformToProduct(
+  parsedData: ParsedProductData,
+  categoryIds: string[]
+): Omit<Product, "id" | "createdAt" | "updatedAt"> {
+  // Extract colors from swatch data
+  const availableColors: ColorOption[] = (parsedData.swatchColors || []).map((swatch) => ({
+    id: crypto.randomUUID(),
+    name: swatch.name,
+    hexCode: "#000000", // Default, would need color mapping
+    textureUrl: swatch.imageUrl,
+  }))
+  
+  return {
+    name: parsedData.name,
+    slug: slugify(parsedData.name),
+    description: parsedData.description,
+    shortDescription: parsedData.shortDescription,
+    price: parsedData.price,
+    compareAtPrice: parsedData.compareAtPrice,
+    currency: "HUF",
+    dimensions: parsedData.dimensions,
+    images: parsedData.images.map((url, index) => ({
+      id: crypto.randomUUID(),
+      url,
+      alt: parsedData.name,
+      order: index,
+      isThumbnail: index === 0,
+    })),
+    elements: [],
+    isKit: false,
+    categoryIds,
+    tags: parsedData.tags,
+    specifications: parsedData.specifications.map((spec, index) => ({
+      id: crypto.randomUUID(),
+      label: spec.label,
+      value: spec.value,
+      type: spec.type,
+      order: index,
+    })),
+    corvuxEnabled: availableColors.length > 0,
+    availableColors,
+    availableMaterials: [],
+    stock: parsedData.stock,
+    lowStockThreshold: 5,
+    sku: parsedData.sku,
+    status: parsedData.status,
+    isFeatured: parsedData.isFeatured || false,
+    seo: {
+      metaTitle: parsedData.name,
+      metaDescription: parsedData.shortDescription || parsedData.description.substring(0, 160),
+      keywords: parsedData.tags,
+    },
+  }
+}
+
+export async function parseCSVFile(file: File): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    
+    reader.onload = (e) => {
+      try {
+        const text = e.target?.result as string
+        const lines = text.split("\n")
+        
+        if (lines.length === 0) {
+          reject(new Error("Üres fájl"))
+          return
+        }
+        
+        // Parse header
+        const header = lines[0].split(",").map((h) => h.trim().replace(/^"|"$/g, ""))
+        
+        // Parse rows
+        const rows: any[] = []
+        for (let i = 1; i < lines.length; i++) {
+          if (lines[i].trim() === "") continue
+          
+          const values = lines[i].split(",")
+          const row: any = {}
+          
+          header.forEach((key, index) => {
+            row[key] = values[index]?.trim().replace(/^"|"$/g, "") || ""
+          })
+          
+          rows.push(row)
+        }
+        
+        resolve(rows)
+      } catch (error) {
+        reject(error)
+      }
+    }
+    
+    reader.onerror = () => reject(new Error("Fájl olvasási hiba"))
+    reader.readAsText(file)
+  })
+}
+
+export async function parseXLSXFile(file: File): Promise<any[]> {
+  // This would require a library like xlsx/sheetjs
+  // For now, return a promise that rejects
+  throw new Error("XLSX importálás még nem támogatott. Kérjük, használjon CSV formátumot.")
+}
+
+export async function parseJSONFile(file: File): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    
+    reader.onload = (e) => {
+      try {
+        const text = e.target?.result as string
+        const data = JSON.parse(text)
+        
+        if (Array.isArray(data)) {
+          resolve(data)
+        } else {
+          reject(new Error("A JSON fájlnak tömböt kell tartalmaznia"))
+        }
+      } catch (error) {
+        reject(new Error("Érvénytelen JSON fájl"))
+      }
+    }
+    
+    reader.onerror = () => reject(new Error("Fájl olvasási hiba"))
+    reader.readAsText(file)
+  })
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/jwt.ts b/apps/fabrikanabytok/lib/utils/jwt.ts
new file mode 100644
index 0000000..5af4171
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/jwt.ts
@@ -0,0 +1,13 @@
+import { logger } from "./logger"
+
+export async function verifyToken(token: string): Promise<any> {
+  try {
+    // TODO: Implement JWT verification with next-auth
+    // This is a placeholder for socket authentication
+    logger.debug("Verifying token", { token: token.substring(0, 10) + "..." })
+    return null
+  } catch (error) {
+    logger.error("Token verification failed", error)
+    throw new Error("Invalid token")
+  }
+}
diff --git a/apps/fabrikanabytok/lib/utils/logger.ts b/apps/fabrikanabytok/lib/utils/logger.ts
new file mode 100644
index 0000000..57f2e59
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/logger.ts
@@ -0,0 +1,58 @@
+type LogLevel = "info" | "warn" | "error" | "debug"
+
+interface LogEntry {
+  level: LogLevel
+  message: string
+  timestamp: Date
+  data?: any
+}
+
+class Logger {
+  private isDevelopment = process.env.NODE_ENV === "development"
+
+  private log(level: LogLevel, message: string, data?: any) {
+    const entry: LogEntry = {
+      level,
+      message,
+      timestamp: new Date(),
+      data,
+    }
+
+    const timestamp = entry.timestamp.toISOString()
+    const prefix = `[${timestamp}] [${level.toUpperCase()}]`
+
+    switch (level) {
+      case "error":
+        console.error(prefix, message, data || "")
+        break
+      case "warn":
+        console.warn(prefix, message, data || "")
+        break
+      case "debug":
+        if (this.isDevelopment) {
+          console.debug(prefix, message, data || "")
+        }
+        break
+      default:
+        console.log(prefix, message, data || "")
+    }
+  }
+
+  info(message: string, data?: any) {
+    this.log("info", message, data)
+  }
+
+  warn(message: string, data?: any) {
+    this.log("warn", message, data)
+  }
+
+  error(message: string, data?: any) {
+    this.log("error", message, data)
+  }
+
+  debug(message: string, data?: any) {
+    this.log("debug", message, data)
+  }
+}
+
+export const logger = new Logger()
diff --git a/apps/fabrikanabytok/lib/utils/pdf-generator.ts b/apps/fabrikanabytok/lib/utils/pdf-generator.ts
new file mode 100644
index 0000000..25ce6df
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/pdf-generator.ts
@@ -0,0 +1,231 @@
+/**
+ * PDF Generation Utilities
+ * Generate comprehensive PDF reports for designs
+ */
+
+import type { Design } from "@/lib/types/planner.types"
+
+export interface PDFGenerationOptions {
+  includeImages?: boolean
+  includeShoppingList?: boolean
+  includeDimensions?: boolean
+  includeMaterials?: boolean
+  includeQRCode?: boolean
+  watermark?: boolean
+  brandingLogo?: string
+}
+
+/**
+ * Generate PDF report for design
+ * Using jsPDF library
+ */
+export async function generateDesignPDF(
+  design: Design,
+  screenshots: Array<{ name: string; dataUrl: string }>,
+  shoppingList: any,
+  options: PDFGenerationOptions = {}
+): Promise<Blob> {
+  // Dynamic import to avoid bundling jsPDF in main bundle
+  const { jsPDF } = await import("jspdf")
+
+  const doc = new jsPDF({
+    orientation: "portrait",
+    unit: "mm",
+    format: "a4",
+  })
+
+  let yPos = 20
+
+  // Add branding header
+  if (options.brandingLogo) {
+    try {
+      doc.addImage(options.brandingLogo, "PNG", 10, 10, 40, 15)
+      yPos = 30
+    } catch (e) {
+      console.warn("Failed to add logo to PDF")
+    }
+  }
+
+  // Title
+  doc.setFontSize(24)
+  doc.setFont("helvetica", "bold")
+  doc.text(design.name, 10, yPos)
+  yPos += 10
+
+  // Description
+  if (design.description) {
+    doc.setFontSize(12)
+    doc.setFont("helvetica", "normal")
+    doc.text(design.description, 10, yPos)
+    yPos += 10
+  }
+
+  // Divider
+  doc.setDrawColor(200, 200, 200)
+  doc.line(10, yPos, 200, yPos)
+  yPos += 10
+
+  // Room Dimensions
+  if (options.includeDimensions) {
+    doc.setFontSize(16)
+    doc.setFont("helvetica", "bold")
+    doc.text("Szoba méretek", 10, yPos)
+    yPos += 8
+
+    doc.setFontSize(11)
+    doc.setFont("helvetica", "normal")
+    doc.text(
+      `Szélesség: ${design.roomDimensions.width} ${design.roomDimensions.unit}`,
+      10,
+      yPos
+    )
+    yPos += 6
+    doc.text(
+      `Hosszúság: ${design.roomDimensions.length} ${design.roomDimensions.unit}`,
+      10,
+      yPos
+    )
+    yPos += 6
+    doc.text(
+      `Magasság: ${design.roomDimensions.height} ${design.roomDimensions.unit}`,
+      10,
+      yPos
+    )
+    yPos += 10
+  }
+
+  // Screenshots
+  if (options.includeImages && screenshots.length > 0) {
+    doc.addPage()
+    yPos = 20
+
+    doc.setFontSize(16)
+    doc.setFont("helvetica", "bold")
+    doc.text("Tervezési nézetek", 10, yPos)
+    yPos += 10
+
+    for (const screenshot of screenshots) {
+      if (yPos > 250) {
+        doc.addPage()
+        yPos = 20
+      }
+
+      try {
+        // Add image (fit to page width with aspect ratio)
+        const imgWidth = 190
+        const imgHeight = (imgWidth * 9) / 16 // 16:9 aspect ratio
+
+        doc.addImage(screenshot.dataUrl, "PNG", 10, yPos, imgWidth, imgHeight)
+
+        // Add caption
+        doc.setFontSize(10)
+        doc.setFont("helvetica", "italic")
+        doc.text(screenshot.name, 10, yPos + imgHeight + 5)
+
+        yPos += imgHeight + 15
+      } catch (e) {
+        console.warn(`Failed to add screenshot ${screenshot.name} to PDF`)
+      }
+    }
+  }
+
+  // Shopping List
+  if (options.includeShoppingList && shoppingList?.items?.length > 0) {
+    doc.addPage()
+    yPos = 20
+
+    doc.setFontSize(16)
+    doc.setFont("helvetica", "bold")
+    doc.text("Bevásárlólista", 10, yPos)
+    yPos += 10
+
+    // Table headers
+    doc.setFontSize(10)
+    doc.setFont("helvetica", "bold")
+    doc.text("Termék", 10, yPos)
+    doc.text("Mennyiség", 100, yPos)
+    doc.text("Ár", 140, yPos)
+    doc.text("Összesen", 170, yPos)
+    yPos += 6
+
+    // Divider
+    doc.setDrawColor(200, 200, 200)
+    doc.line(10, yPos, 200, yPos)
+    yPos += 6
+
+    // Items
+    doc.setFont("helvetica", "normal")
+    shoppingList.items.forEach((item: any) => {
+      if (yPos > 280) {
+        doc.addPage()
+        yPos = 20
+      }
+
+      doc.text(item.name.substring(0, 40), 10, yPos)
+      doc.text("1", 100, yPos)
+      doc.text(`${item.price.toLocaleString()} Ft`, 140, yPos)
+      doc.text(`${item.price.toLocaleString()} Ft`, 170, yPos)
+      yPos += 6
+    })
+
+    // Total
+    yPos += 4
+    doc.setDrawColor(200, 200, 200)
+    doc.line(10, yPos, 200, yPos)
+    yPos += 8
+
+    doc.setFont("helvetica", "bold")
+    doc.text("Összesen:", 140, yPos)
+    doc.text(`${shoppingList.totalPrice.toLocaleString()} Ft`, 170, yPos)
+  }
+
+  // QR Code for sharing
+  if (options.includeQRCode) {
+    doc.addPage()
+    yPos = 20
+
+    doc.setFontSize(16)
+    doc.setFont("helvetica", "bold")
+    doc.text("Terv megosztása", 10, yPos)
+    yPos += 10
+
+    doc.setFontSize(11)
+    doc.setFont("helvetica", "normal")
+    doc.text("Ossza meg ezt a tervet:", 10, yPos)
+    yPos += 8
+
+    // QR code would be generated here
+    doc.text(`${process.env.NEXT_PUBLIC_SITE_URL}/planner/${design.id}`, 10, yPos)
+  }
+
+  // Watermark (if enabled)
+  if (options.watermark) {
+    const pageCount = doc.getNumberOfPages()
+    for (let i = 1; i <= pageCount; i++) {
+      doc.setPage(i)
+      doc.setFontSize(8)
+      doc.setTextColor(150, 150, 150)
+      doc.text("Generated by FABRYKA NABYTOK", 10, 290)
+      doc.text(new Date().toLocaleDateString("hu-HU"), 170, 290)
+    }
+  }
+
+  // Convert to Blob
+  const pdfBlob = doc.output("blob")
+  return pdfBlob
+}
+
+/**
+ * Download PDF blob as file
+ */
+export function downloadPDF(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename.endsWith(".pdf") ? filename : `${filename}.pdf`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/performance.ts b/apps/fabrikanabytok/lib/utils/performance.ts
new file mode 100644
index 0000000..ec4ed69
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/performance.ts
@@ -0,0 +1,144 @@
+/**
+ * Performance Optimization Utilities
+ */
+
+/**
+ * Debounce function calls
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null
+  
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+/**
+ * Throttle function calls
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean
+  
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
+    }
+  }
+}
+
+/**
+ * Memoize expensive computations
+ */
+export function memoize<T extends (...args: any[]) => any>(fn: T): T {
+  const cache = new Map()
+  
+  return ((...args: Parameters<T>) => {
+    const key = JSON.stringify(args)
+    if (cache.has(key)) {
+      return cache.get(key)
+    }
+    const result = fn(...args)
+    cache.set(key, result)
+    return result
+  }) as T
+}
+
+/**
+ * Lazy load component
+ */
+export async function lazyLoad<T>(
+  importFn: () => Promise<{ default: T }>,
+  fallback?: React.ComponentType
+): Promise<T> {
+  try {
+    const module = await importFn()
+    return module.default
+  } catch (error) {
+    console.error("Lazy load error:", error)
+    throw error
+  }
+}
+
+/**
+ * Batch multiple operations
+ */
+export class BatchProcessor<T> {
+  private queue: T[] = []
+  private processing = false
+  private readonly batchSize: number
+  private readonly processFn: (items: T[]) => Promise<void>
+  
+  constructor(batchSize: number, processFn: (items: T[]) => Promise<void>) {
+    this.batchSize = batchSize
+    this.processFn = processFn
+  }
+  
+  add(item: T) {
+    this.queue.push(item)
+    this.process()
+  }
+  
+  private async process() {
+    if (this.processing || this.queue.length === 0) return
+    
+    this.processing = true
+    
+    while (this.queue.length > 0) {
+      const batch = this.queue.splice(0, this.batchSize)
+      await this.processFn(batch)
+    }
+    
+    this.processing = false
+  }
+}
+
+/**
+ * Monitor performance
+ */
+export class PerformanceMonitor {
+  private marks: Map<string, number> = new Map()
+  
+  start(label: string) {
+    this.marks.set(label, performance.now())
+  }
+  
+  end(label: string): number {
+    const start = this.marks.get(label)
+    if (!start) return 0
+    
+    const duration = performance.now() - start
+    this.marks.delete(label)
+    
+    if (duration > 1000) {
+      console.warn(`Slow operation: ${label} took ${duration.toFixed(2)}ms`)
+    }
+    
+    return duration
+  }
+  
+  measure(label: string, fn: () => any) {
+    this.start(label)
+    const result = fn()
+    this.end(label)
+    return result
+  }
+  
+  async measureAsync(label: string, fn: () => Promise<any>) {
+    this.start(label)
+    const result = await fn()
+    this.end(label)
+    return result
+  }
+}
+
+export const perfMonitor = new PerformanceMonitor()
+
diff --git a/apps/fabrikanabytok/lib/utils/permissions.ts b/apps/fabrikanabytok/lib/utils/permissions.ts
new file mode 100644
index 0000000..2dfa4ed
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/permissions.ts
@@ -0,0 +1,192 @@
+/**
+ * Permission System
+ * Role-based access control for employee actions
+ */
+
+import type { EmployeeRole, Permission } from "@/lib/types/employee.types"
+
+/**
+ * Role to Permissions Mapping
+ */
+export const ROLE_PERMISSIONS: Record<EmployeeRole, Permission[]> = {
+  warehouse_manager: [
+    // Full warehouse access
+    "inventory.view",
+    "inventory.edit",
+    "inventory.adjust",
+    "inventory.transfer",
+    "inventory.count",
+    "orders.view",
+    "orders.pick",
+    "orders.pack",
+    "orders.ship",
+    "location.view",
+    "location.edit",
+    "location.assign",
+    "shipping.plan",
+    "shipping.track",
+    "shipping.label",
+    "reports.view",
+    "reports.generate",
+    "reports.export",
+  ],
+  
+  inventory_clerk: [
+    "inventory.view",
+    "inventory.edit",
+    "inventory.adjust",
+    "inventory.count",
+    "location.view",
+    "reports.view",
+  ],
+  
+  picker: [
+    "inventory.view",
+    "orders.view",
+    "orders.pick",
+    "location.view",
+  ],
+  
+  packer: [
+    "orders.view",
+    "orders.pack",
+    "shipping.label",
+  ],
+  
+  shipper: [
+    "orders.view",
+    "orders.ship",
+    "shipping.plan",
+    "shipping.track",
+    "shipping.label",
+    "location.view",
+  ],
+  
+  location_manager: [
+    "inventory.view",
+    "location.view",
+    "location.edit",
+    "location.assign",
+    "reports.view",
+  ],
+  
+  outsource_coordinator: [
+    "inventory.view",
+    "outsource.view",
+    "outsource.manage",
+    "outsource.receive",
+    "reports.view",
+  ],
+  
+  quality_controller: [
+    "inventory.view",
+    "orders.view",
+    "outsource.view",
+    "outsource.receive",
+    "reports.view",
+    "reports.generate",
+  ],
+  
+  assistant: [
+    // Limited access for general assistance
+    "inventory.view",
+    "orders.view",
+    "location.view",
+    "reports.view",
+  ],
+}
+
+/**
+ * Check if employee has permission
+ */
+export function hasPermission(
+  employeeRole: EmployeeRole,
+  requiredPermission: Permission,
+  customPermissions?: Permission[]
+): boolean {
+  // Get base permissions for role
+  const rolePermissions = ROLE_PERMISSIONS[employeeRole] || []
+  
+  // Combine with custom permissions
+  const allPermissions = [...rolePermissions, ...(customPermissions || [])]
+  
+  return allPermissions.includes(requiredPermission)
+}
+
+/**
+ * Check if employee has any of the permissions
+ */
+export function hasAnyPermission(
+  employeeRole: EmployeeRole,
+  requiredPermissions: Permission[],
+  customPermissions?: Permission[]
+): boolean {
+  return requiredPermissions.some((perm) => hasPermission(employeeRole, perm, customPermissions))
+}
+
+/**
+ * Check if employee has all permissions
+ */
+export function hasAllPermissions(
+  employeeRole: EmployeeRole,
+  requiredPermissions: Permission[],
+  customPermissions?: Permission[]
+): boolean {
+  return requiredPermissions.every((perm) => hasPermission(employeeRole, perm, customPermissions))
+}
+
+/**
+ * Get all permissions for a role
+ */
+export function getRolePermissions(role: EmployeeRole): Permission[] {
+  return ROLE_PERMISSIONS[role] || []
+}
+
+/**
+ * Actions that require confirmation
+ */
+export const ACTIONS_REQUIRING_CONFIRMATION = [
+  "inventory.adjust",
+  "inventory.transfer",
+  "orders.cancel",
+  "shipping.plan",
+]
+
+/**
+ * Check if action requires confirmation
+ */
+export function requiresConfirmation(action: string): boolean {
+  return ACTIONS_REQUIRING_CONFIRMATION.includes(action)
+}
+
+/**
+ * Validate employee can perform action
+ */
+export function canPerformAction(
+  employeeRole: EmployeeRole,
+  action: string,
+  customPermissions?: Permission[]
+): {
+  allowed: boolean
+  requiresConfirmation: boolean
+  reason?: string
+} {
+  // Extract permission from action (e.g., "inventory.adjust" → "inventory.adjust")
+  const permission = action as Permission
+  
+  const allowed = hasPermission(employeeRole, permission, customPermissions)
+  
+  if (!allowed) {
+    return {
+      allowed: false,
+      requiresConfirmation: false,
+      reason: `Missing permission: ${permission}`,
+    }
+  }
+  
+  return {
+    allowed: true,
+    requiresConfirmation: requiresConfirmation(action),
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/physics-system.ts b/apps/fabrikanabytok/lib/utils/physics-system.ts
new file mode 100644
index 0000000..72e7152
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/physics-system.ts
@@ -0,0 +1,403 @@
+/**
+ * Physics System for 3D Planner
+ * Handles collision detection, physics constraints, and realistic placement
+ */
+
+import * as THREE from "three"
+import type { PlacedObject } from "@/lib/types/planner.types"
+
+export interface CollisionResult {
+  collides: boolean
+  penetrationDepth?: number
+  normal?: THREE.Vector3
+  collidingObject?: PlacedObject
+}
+
+export interface PhysicsConstraints {
+  preventOverlap: boolean
+  snapToFloor: boolean
+  preventWallPenetration: boolean
+  allowStacking: boolean
+  minimumClearance: number
+}
+
+/**
+ * Check collision between two objects using AABB (Axis-Aligned Bounding Box)
+ */
+export function checkAABBCollision(
+  obj1: {
+    position: THREE.Vector3
+    dimensions: { width: number; height: number; depth: number }
+    rotation?: THREE.Euler
+  },
+  obj2: {
+    position: THREE.Vector3
+    dimensions: { width: number; height: number; depth: number }
+    rotation?: THREE.Euler
+  },
+  tolerance: number = 0.01
+): CollisionResult {
+  // Create bounding boxes
+  const box1 = createBoundingBox(obj1.position, obj1.dimensions, tolerance)
+  const box2 = createBoundingBox(obj2.position, obj2.dimensions, tolerance)
+
+  const intersects = box1.intersectsBox(box2)
+
+  if (intersects) {
+    // Calculate penetration depth
+    const center1 = new THREE.Vector3()
+    const center2 = new THREE.Vector3()
+    box1.getCenter(center1)
+    box2.getCenter(center2)
+
+    const delta = center1.sub(center2)
+    const penetration = Math.min(
+      Math.abs(box1.max.x - box2.min.x),
+      Math.abs(box2.max.x - box1.min.x),
+      Math.abs(box1.max.z - box2.min.z),
+      Math.abs(box2.max.z - box1.min.z)
+    )
+
+    return {
+      collides: true,
+      penetrationDepth: penetration,
+      normal: delta.normalize(),
+    }
+  }
+
+  return { collides: false }
+}
+
+/**
+ * Check collision with all objects in scene
+ */
+export function checkSceneCollisions(
+  targetObject: PlacedObject,
+  allObjects: PlacedObject[],
+  constraints: PhysicsConstraints
+): CollisionResult[] {
+  const collisions: CollisionResult[] = []
+
+  for (const obj of allObjects) {
+    if (obj.id === targetObject.id || !obj.visible) continue
+
+    const result = checkAABBCollision(
+      {
+        position: new THREE.Vector3(...targetObject.position),
+        dimensions: targetObject.dimensions,
+      },
+      {
+        position: new THREE.Vector3(...obj.position),
+        dimensions: obj.dimensions,
+      },
+      constraints.minimumClearance
+    )
+
+    if (result.collides) {
+      collisions.push({
+        ...result,
+        collidingObject: obj,
+      })
+    }
+  }
+
+  return collisions
+}
+
+/**
+ * Check if object penetrates walls
+ */
+export function checkWallCollision(
+  position: THREE.Vector3,
+  dimensions: { width: number; height: number; depth: number },
+  roomDimensions: { width: number; length: number; height: number },
+  tolerance: number = 0.01
+): CollisionResult {
+  const halfWidth = dimensions.width / 2
+  const halfDepth = dimensions.depth / 2
+
+  const roomHalfWidth = roomDimensions.width / 2
+  const roomHalfLength = roomDimensions.length / 2
+
+  // Check each wall
+  const penetrations = {
+    left: (position.x - halfWidth + roomHalfWidth) < -tolerance,
+    right: (position.x + halfWidth - roomHalfWidth) > tolerance,
+    back: (position.z - halfDepth + roomHalfLength) < -tolerance,
+    front: (position.z + halfDepth - roomHalfLength) > tolerance,
+  }
+
+  if (Object.values(penetrations).some(Boolean)) {
+    return {
+      collides: true,
+      normal: new THREE.Vector3(
+        penetrations.left ? 1 : penetrations.right ? -1 : 0,
+        0,
+        penetrations.back ? 1 : penetrations.front ? -1 : 0
+      ),
+    }
+  }
+
+  return { collides: false }
+}
+
+/**
+ * Apply physics constraints and return corrected position
+ */
+export function applyPhysicsConstraints(
+  position: THREE.Vector3,
+  dimensions: { width: number; height: number; depth: number },
+  allObjects: PlacedObject[],
+  roomDimensions: { width: number; length: number; height: number },
+  constraints: PhysicsConstraints
+): THREE.Vector3 {
+  let correctedPosition = position.clone()
+
+  // 1. Snap to floor
+  if (constraints.snapToFloor) {
+    correctedPosition.y = 0
+  }
+
+  // 2. Prevent wall penetration
+  if (constraints.preventWallPenetration) {
+    const halfWidth = dimensions.width / 2
+    const halfDepth = dimensions.depth / 2
+    const roomHalfWidth = roomDimensions.width / 2
+    const roomHalfLength = roomDimensions.length / 2
+
+    // Clamp X position
+    correctedPosition.x = Math.max(
+      -roomHalfWidth + halfWidth,
+      Math.min(roomHalfWidth - halfWidth, correctedPosition.x)
+    )
+
+    // Clamp Z position
+    correctedPosition.z = Math.max(
+      -roomHalfLength + halfDepth,
+      Math.min(roomHalfLength - halfDepth, correctedPosition.z)
+    )
+  }
+
+  // 3. Prevent overlap with other objects
+  if (constraints.preventOverlap) {
+    const collisions = checkSceneCollisions(
+      {
+        id: "temp",
+        position: [correctedPosition.x, correctedPosition.y, correctedPosition.z],
+        dimensions,
+      } as PlacedObject,
+      allObjects,
+      constraints
+    )
+
+    if (collisions.length > 0) {
+      // Push object away from collision
+      for (const collision of collisions) {
+        if (collision.normal && collision.penetrationDepth) {
+          const pushDistance = collision.penetrationDepth + constraints.minimumClearance
+          correctedPosition.add(collision.normal.multiplyScalar(pushDistance))
+        }
+      }
+    }
+  }
+
+  return correctedPosition
+}
+
+/**
+ * Check if object can be stacked on top of another
+ */
+export function canStackOn(
+  topObject: PlacedObject,
+  bottomObject: PlacedObject,
+  tolerance: number = 0.1
+): boolean {
+  const topPos = new THREE.Vector3(...topObject.position)
+  const bottomPos = new THREE.Vector3(...bottomObject.position)
+
+  // Check horizontal alignment
+  const horizontalDistance = new THREE.Vector2(topPos.x, topPos.z).distanceTo(
+    new THREE.Vector2(bottomPos.x, bottomPos.z)
+  )
+
+  if (horizontalDistance > tolerance) return false
+
+  // Check vertical alignment (top object should be on top of bottom object)
+  const expectedY = bottomPos.y + bottomObject.dimensions.height
+  const actualY = topPos.y
+
+  return Math.abs(actualY - expectedY) < tolerance
+}
+
+/**
+ * Find surface to place object on
+ */
+export function findPlacementSurface(
+  position: THREE.Vector3,
+  allObjects: PlacedObject[],
+  allowStacking: boolean
+): { position: THREE.Vector3; onObject?: PlacedObject } {
+  let placementY = 0
+  let supportObject: PlacedObject | undefined
+
+  if (allowStacking) {
+    // Find highest object below the position
+    let highestY = 0
+
+    for (const obj of allObjects) {
+      if (!obj.visible) continue
+
+      const objPos = new THREE.Vector3(...obj.position)
+      const topY = objPos.y + obj.dimensions.height
+
+      // Check if position is roughly above this object
+      const horizontalDistance = new THREE.Vector2(position.x, position.z).distanceTo(
+        new THREE.Vector2(objPos.x, objPos.z)
+      )
+
+      if (horizontalDistance < obj.dimensions.width / 2 && topY > highestY && topY <= position.y) {
+        highestY = topY
+        supportObject = obj
+      }
+    }
+
+    if (supportObject) {
+      placementY = highestY
+    }
+  }
+
+  return {
+    position: new THREE.Vector3(position.x, placementY, position.z),
+    onObject: supportObject,
+  }
+}
+
+/**
+ * Calculate clearance zones (for doors, appliances, etc.)
+ */
+export function calculateClearanceZone(
+  object: PlacedObject,
+  clearanceDistance: number
+): THREE.Box3 {
+  const pos = new THREE.Vector3(...object.position)
+  const { width, height, depth } = object.dimensions
+
+  return new THREE.Box3(
+    new THREE.Vector3(
+      pos.x - width / 2 - clearanceDistance,
+      pos.y,
+      pos.z - depth / 2 - clearanceDistance
+    ),
+    new THREE.Vector3(
+      pos.x + width / 2 + clearanceDistance,
+      pos.y + height,
+      pos.z + depth / 2 + clearanceDistance
+    )
+  )
+}
+
+/**
+ * Check accessibility compliance (wheelchair clearance, etc.)
+ */
+export function checkAccessibility(
+  position: THREE.Vector3,
+  dimensions: { width: number; height: number; depth: number },
+  allObjects: PlacedObject[],
+  minClearance: number = 1.5 // 1.5m for wheelchair
+): { compliant: boolean; blockedBy?: PlacedObject[] } {
+  // Create clearance zone around object
+  const clearanceBox = new THREE.Box3(
+    new THREE.Vector3(
+      position.x - dimensions.width / 2 - minClearance,
+      0,
+      position.z - dimensions.depth / 2 - minClearance
+    ),
+    new THREE.Vector3(
+      position.x + dimensions.width / 2 + minClearance,
+      0.1,
+      position.z + dimensions.depth / 2 + minClearance
+    )
+  )
+
+  const blockedBy: PlacedObject[] = []
+
+  for (const obj of allObjects) {
+    if (!obj.visible) continue
+
+    const objBox = createBoundingBox(
+      new THREE.Vector3(...obj.position),
+      obj.dimensions,
+      0
+    )
+
+    if (clearanceBox.intersectsBox(objBox)) {
+      blockedBy.push(obj)
+    }
+  }
+
+  return {
+    compliant: blockedBy.length === 0,
+    blockedBy: blockedBy.length > 0 ? blockedBy : undefined,
+  }
+}
+
+/**
+ * Helper: Create bounding box from position and dimensions
+ */
+function createBoundingBox(
+  position: THREE.Vector3,
+  dimensions: { width: number; height: number; depth: number },
+  tolerance: number
+): THREE.Box3 {
+  const { width, height, depth } = dimensions
+
+  return new THREE.Box3(
+    new THREE.Vector3(
+      position.x - width / 2 - tolerance,
+      position.y - tolerance,
+      position.z - depth / 2 - tolerance
+    ),
+    new THREE.Vector3(
+      position.x + width / 2 + tolerance,
+      position.y + height + tolerance,
+      position.z + depth / 2 + tolerance
+    )
+  )
+}
+
+/**
+ * Simulate gravity/drop object to nearest surface
+ */
+export function simulateGravity(
+  object: PlacedObject,
+  allObjects: PlacedObject[],
+  floorY: number = 0
+): number {
+  let targetY = floorY
+
+  // Find all objects below current position
+  const objectsBelow = allObjects.filter((obj) => {
+    if (obj.id === object.id || !obj.visible) return false
+
+    const objPos = new THREE.Vector3(...obj.position)
+    const objTopY = objPos.y + obj.dimensions.height
+
+    // Check if object is below and horizontally aligned
+    const horizontalDistance = new THREE.Vector2(object.position[0], object.position[2]).distanceTo(
+      new THREE.Vector2(objPos.x, objPos.z)
+    )
+
+    return objTopY < object.position[1] && horizontalDistance < obj.dimensions.width / 2
+  })
+
+  // Find highest surface
+  for (const obj of objectsBelow) {
+    const surfaceY = obj.position[1] + obj.dimensions.height
+    if (surfaceY > targetY) {
+      targetY = surfaceY
+    }
+  }
+
+  return targetY
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/product-to-planner.ts b/apps/fabrikanabytok/lib/utils/product-to-planner.ts
new file mode 100644
index 0000000..543106f
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/product-to-planner.ts
@@ -0,0 +1,175 @@
+/**
+ * Utilities to convert Product data to Planner PlacedObject
+ */
+
+import type { Product, ProductElement, ProductPart } from "@/lib/types/product.types"
+import type { PlacedObject, PlacedElement, PlacedPart } from "@/lib/types/planner.types"
+
+/**
+ * Convert a Product (from shop) to a PlacedObject (for planner)
+ */
+export function productToPlacedObject(
+  product: Product,
+  position: [number, number, number] = [0, 0, 0],
+  layer: string = "default"
+): PlacedObject {
+  const placedObject: PlacedObject = {
+    id: `obj-${Date.now()}-${Math.random()}`,
+    name: product.name,
+    modelUrl: product.glbFile?.url || "",
+    position,
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+    dimensions: product.dimensions || { width: 0.6, height: 0.9, depth: 0.6 },
+    productId: product.id, // Use custom UUID, not _id
+    price: product.price,
+    materials: {},
+    colors: {},
+    
+    // Hierarchical structure
+    parentId: undefined,
+    children: [],
+    isGroup: false,
+    locked: false,
+    visible: true,
+    
+    // Convert product elements to placed elements
+    elements: product.elements ? product.elements.map((element) => productElementToPlacedElement(element)) : [],
+    
+    // Metadata
+    tags: product.tags || [],
+    layer,
+    opacity: 1,
+    castShadow: true,
+    receiveShadow: true,
+  }
+  
+  return placedObject
+}
+
+/**
+ * Convert ProductElement to PlacedElement
+ */
+function productElementToPlacedElement(element: ProductElement): PlacedElement {
+  return {
+    id: `placed-element-${Date.now()}-${Math.random()}`,
+    elementId: element.id,
+    name: element.name,
+    modelUrl: element.glbFile?.url,
+    localPosition: [0, 0, 0],
+    localRotation: [0, 0, 0],
+    localScale: [1, 1, 1],
+    visible: true,
+    locked: false,
+    
+    // Material customization
+    selectedMaterial: element.defaultMaterial,
+    selectedColor: element.defaultColor,
+    customTextures: {},
+    
+    // Convert parts
+    parts: element.parts ? element.parts.map((part) => productPartToPlacedPart(part)) : [],
+  }
+}
+
+/**
+ * Convert ProductPart to PlacedPart
+ */
+function productPartToPlacedPart(part: ProductPart): PlacedPart {
+  return {
+    id: `placed-part-${Date.now()}-${Math.random()}`,
+    partId: part.id,
+    name: part.name,
+    modelUrl: part.glbFile?.url,
+    localPosition: [0, 0, 0],
+    localRotation: [0, 0, 0],
+    localScale: [1, 1, 1],
+    visible: true,
+    locked: false,
+    
+    // Material customization
+    selectedMaterial: part.defaultMaterial,
+    selectedColor: part.defaultColor,
+    customTextures: {},
+    
+    type: part.type,
+    required: part.required,
+  }
+}
+
+/**
+ * Calculate total price including all modifiers
+ */
+export function calculateConfiguredPrice(
+  basePrice: number,
+  elements: PlacedElement[],
+  product: Product
+): number {
+  let total = basePrice
+  
+  elements.forEach((element) => {
+    const productElement = product.elements?.find((e) => e.id === element.elementId)
+    
+    if (productElement?.priceModifier) {
+      total += productElement.priceModifier
+    }
+    
+    if (element.selectedMaterial && productElement) {
+      const material = productElement.availableMaterials?.find((m) => m.id === element.selectedMaterial)
+      if (material?.priceModifier) {
+        total += material.priceModifier
+      }
+    }
+    
+    element.parts.forEach((part) => {
+      const productPart = productElement?.parts?.find((p) => p.id === part.partId)
+      
+      if (productPart?.priceModifier) {
+        total += productPart.priceModifier
+      }
+      
+      if (part.selectedMaterial && productPart) {
+        const material = productPart.availableMaterials?.find((m) => m.id === part.selectedMaterial)
+        if (material?.priceModifier) {
+          total += material.priceModifier
+        }
+      }
+    })
+  })
+  
+  return total
+}
+
+/**
+ * Validate that all required parts are selected
+ */
+export function validateConfiguration(elements: PlacedElement[], product: Product): {
+  isValid: boolean
+  missingRequirements: string[]
+} {
+  const missingRequirements: string[] = []
+  
+  product.elements?.forEach((element) => {
+    const placedElement = elements.find((e) => e.elementId === element.id)
+    
+    if (!placedElement) {
+      missingRequirements.push(`Missing element: ${element.name}`)
+      return
+    }
+    
+    element.parts?.forEach((part) => {
+      if (part.required) {
+        const placedPart = placedElement.parts.find((p) => p.partId === part.id)
+        if (!placedPart) {
+          missingRequirements.push(`Missing required part: ${part.name} in ${element.name}`)
+        }
+      }
+    })
+  })
+  
+  return {
+    isValid: missingRequirements.length === 0,
+    missingRequirements,
+  }
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/serialization.ts b/apps/fabrikanabytok/lib/utils/serialization.ts
new file mode 100644
index 0000000..8c60b6b
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/serialization.ts
@@ -0,0 +1,131 @@
+/**
+ * Serialization Utilities
+ * Convert MongoDB documents to plain objects safe for Client Components
+ */
+
+/**
+ * Serialize MongoDB document for client components
+ * - Removes _id field
+ * - Converts Date objects to ISO strings
+ * - Recursively handles nested objects and arrays
+ */
+export function serializeForClient<T = any>(data: any): T {
+  if (data === null || data === undefined) {
+    return data
+  }
+
+  // Handle arrays
+  if (Array.isArray(data)) {
+    return data.map((item) => serializeForClient(item)) as any
+  }
+
+  // Handle Date objects
+  if (data instanceof Date) {
+    return data.toISOString() as any
+  }
+
+  // Handle plain objects
+  if (typeof data === "object") {
+    const serialized: any = {}
+
+    for (const key in data) {
+      // Skip MongoDB _id field
+      if (key === "_id") continue
+
+      const value = data[key]
+
+      // Recursively serialize nested values
+      if (value instanceof Date) {
+        serialized[key] = value.toISOString()
+      } else if (Array.isArray(value)) {
+        serialized[key] = value.map((item) => serializeForClient(item))
+      } else if (value && typeof value === "object") {
+        // Check if it's a MongoDB ObjectId
+        if (value.constructor.name === "ObjectId") {
+          serialized[key] = value.toString()
+        } else {
+          serialized[key] = serializeForClient(value)
+        }
+      } else {
+        serialized[key] = value
+      }
+    }
+
+    return serialized
+  }
+
+  // Return primitive values as-is
+  return data
+}
+
+/**
+ * Serialize multiple documents
+ */
+export function serializeManyForClient<T = any>(data: any[]): T[] {
+  return data.map((item) => serializeForClient<T>(item))
+}
+
+/**
+ * Serialize design object specifically
+ */
+export function serializeDesign(design: any) {
+  const serialized = serializeForClient(design)
+
+  // Ensure required fields with defaults
+  return {
+    ...serialized,
+    _id: design._id?.toString(),
+    placedObjects: serialized.placedObjects || [],
+    components: serialized.components || [],
+    layers: serialized.layers || [
+      { id: "default", name: "Default", visible: true, locked: false, color: "#3b82f6", order: 0, objectIds: [] },
+    ],
+    cameraPresets: serialized.cameraPresets || [],
+    materials: serialized.materials || {},
+    sharedWith: serialized.sharedWith || [],
+    snapSettings: serialized.snapSettings || {
+      enabled: true,
+      gridSize: 0.5,
+      snapToObjects: true,
+      snapToWalls: true,
+      snapAngle: 15,
+      snapDistance: 0.2,
+      showGuides: true,
+    },
+    renderSettings: serialized.renderSettings || {
+      quality: "preview",
+      shadows: true,
+      shadowQuality: "medium",
+      ambientOcclusion: false,
+      antialiasing: true,
+      postProcessing: false,
+      lightingPreset: "day",
+    },
+  }
+}
+
+/**
+ * Serialize product object
+ */
+export function serializeProduct(product: any) {
+  const serialized = serializeForClient(product)
+
+  return {
+    ...serialized,
+    images: serialized.images || [],
+    elements: serialized.elements || [],
+    specifications: serialized.specifications || [],
+    tags: serialized.tags || [],
+    categoryIds: serialized.categoryIds || [],
+    availableColors: serialized.availableColors || [],
+    availableMaterials: serialized.availableMaterials || [],
+  }
+}
+
+/**
+ * Serialize category object
+ */
+export function serializeCategory(category: any) {
+  return serializeForClient(category)
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/snap-helpers.ts b/apps/fabrikanabytok/lib/utils/snap-helpers.ts
new file mode 100644
index 0000000..b0daf25
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/snap-helpers.ts
@@ -0,0 +1,423 @@
+/**
+ * Smart Snap System
+ * Provides intelligent snapping for objects, walls, and alignment
+ */
+
+import * as THREE from "three"
+import type { PlacedObject, SnapSettings } from "@/lib/types/planner.types"
+
+export interface SnapResult {
+  position: [number, number, number]
+  rotation?: [number, number, number]
+  snapped: boolean
+  snapType?: "grid" | "object" | "wall" | "corner" | "center"
+  snapTarget?: string // ID of object snapped to
+  guides?: SnapGuide[]
+}
+
+export interface SnapGuide {
+  type: "line" | "point" | "distance"
+  from: [number, number, number]
+  to?: [number, number, number]
+  color: string
+  label?: string
+}
+
+/**
+ * Calculate snap position for an object
+ */
+export function calculateSnapPosition(
+  position: THREE.Vector3,
+  objectDimensions: { width: number; height: number; depth: number },
+  rotation: THREE.Euler,
+  allObjects: PlacedObject[],
+  roomDimensions: { width: number; length: number; height: number },
+  snapSettings: SnapSettings
+): SnapResult {
+  const result: SnapResult = {
+    position: [position.x, position.y, position.z],
+    snapped: false,
+    guides: [],
+  }
+
+  if (!snapSettings.enabled) {
+    return result
+  }
+
+  // Priority order: Object snap > Wall snap > Grid snap
+  
+  // 1. Try object-to-object snapping
+  if (snapSettings.snapToObjects) {
+    const objectSnap = snapToNearbyObjects(
+      position,
+      objectDimensions,
+      rotation,
+      allObjects,
+      snapSettings.snapDistance
+    )
+    
+    if (objectSnap.snapped) {
+      return objectSnap
+    }
+  }
+
+  // 2. Try wall snapping
+  if (snapSettings.snapToWalls) {
+    const wallSnap = snapToWalls(
+      position,
+      objectDimensions,
+      roomDimensions,
+      snapSettings.snapDistance
+    )
+    
+    if (wallSnap.snapped) {
+      return wallSnap
+    }
+  }
+
+  // 3. Grid snapping (always available if enabled)
+  const gridSnap = snapToGrid(position, snapSettings.gridSize)
+  return gridSnap
+}
+
+/**
+ * Snap to nearby objects (magnetic snapping)
+ */
+function snapToNearbyObjects(
+  position: THREE.Vector3,
+  dimensions: { width: number; height: number; depth: number },
+  rotation: THREE.Euler,
+  allObjects: PlacedObject[],
+  snapDistance: number
+): SnapResult {
+  const result: SnapResult = {
+    position: [position.x, position.y, position.z],
+    snapped: false,
+    guides: [],
+  }
+
+  // Get bounding box of current object
+  const halfWidth = dimensions.width / 2
+  const halfDepth = dimensions.depth / 2
+
+  let bestSnap: SnapResult | null = null
+  let bestDistance = snapDistance
+
+  for (const obj of allObjects) {
+    if (!obj.visible || obj.locked) continue
+
+    const objPos = new THREE.Vector3(...obj.position)
+    const distance = position.distanceTo(objPos)
+
+    // Only consider nearby objects
+    if (distance > snapDistance * 10) continue
+
+    const objHalfWidth = obj.dimensions.width / 2
+    const objHalfDepth = obj.dimensions.depth / 2
+
+    // Check for side-by-side snapping (X-axis)
+    const sideSnapX = Math.abs(position.x - (objPos.x + obj.dimensions.width))
+    const sideSnapXNeg = Math.abs(position.x - (objPos.x - dimensions.width))
+
+    if (sideSnapX < snapDistance && Math.abs(position.z - objPos.z) < dimensions.depth) {
+      const snapPos: [number, number, number] = [
+        objPos.x + obj.dimensions.width,
+        position.y,
+        objPos.z,
+      ]
+      
+      bestSnap = {
+        position: snapPos,
+        snapped: true,
+        snapType: "object",
+        snapTarget: obj.id,
+        guides: [
+          {
+            type: "line",
+            from: snapPos,
+            to: [objPos.x, objPos.y, objPos.z],
+            color: "#22c55e",
+          },
+        ],
+      }
+      break
+    }
+
+    if (sideSnapXNeg < snapDistance && Math.abs(position.z - objPos.z) < dimensions.depth) {
+      const snapPos: [number, number, number] = [
+        objPos.x - dimensions.width,
+        position.y,
+        objPos.z,
+      ]
+      
+      bestSnap = {
+        position: snapPos,
+        snapped: true,
+        snapType: "object",
+        snapTarget: obj.id,
+        guides: [
+          {
+            type: "line",
+            from: snapPos,
+            to: [objPos.x, objPos.y, objPos.z],
+            color: "#22c55e",
+          },
+        ],
+      }
+      break
+    }
+
+    // Check for front/back snapping (Z-axis)
+    const sideSnapZ = Math.abs(position.z - (objPos.z + obj.dimensions.depth))
+    const sideSnapZNeg = Math.abs(position.z - (objPos.z - dimensions.depth))
+
+    if (sideSnapZ < snapDistance && Math.abs(position.x - objPos.x) < dimensions.width) {
+      const snapPos: [number, number, number] = [
+        objPos.x,
+        position.y,
+        objPos.z + obj.dimensions.depth,
+      ]
+      
+      bestSnap = {
+        position: snapPos,
+        snapped: true,
+        snapType: "object",
+        snapTarget: obj.id,
+        guides: [
+          {
+            type: "line",
+            from: snapPos,
+            to: [objPos.x, objPos.y, objPos.z],
+            color: "#22c55e",
+          },
+        ],
+      }
+      break
+    }
+
+    if (sideSnapZNeg < snapDistance && Math.abs(position.x - objPos.x) < dimensions.width) {
+      const snapPos: [number, number, number] = [
+        objPos.x,
+        position.y,
+        objPos.z - dimensions.depth,
+      ]
+      
+      bestSnap = {
+        position: snapPos,
+        snapped: true,
+        snapType: "object",
+        snapTarget: obj.id,
+        guides: [
+          {
+            type: "line",
+            from: snapPos,
+            to: [objPos.x, objPos.y, objPos.z],
+            color: "#22c55e",
+          },
+        ],
+      }
+      break
+    }
+
+    // Check for center alignment
+    if (Math.abs(position.x - objPos.x) < snapDistance / 2) {
+      bestSnap = {
+        position: [objPos.x, position.y, position.z],
+        snapped: true,
+        snapType: "center",
+        snapTarget: obj.id,
+        guides: [
+          {
+            type: "line",
+            from: [objPos.x, 0, position.z],
+            to: [objPos.x, 3, position.z],
+            color: "#3b82f6",
+            label: "Center",
+          },
+        ],
+      }
+    }
+  }
+
+  return bestSnap || result
+}
+
+/**
+ * Snap to room walls
+ */
+function snapToWalls(
+  position: THREE.Vector3,
+  dimensions: { width: number; height: number; depth: number },
+  roomDimensions: { width: number; length: number; height: number },
+  snapDistance: number
+): SnapResult {
+  const result: SnapResult = {
+    position: [position.x, position.y, position.z],
+    snapped: false,
+    guides: [],
+  }
+
+  const halfWidth = dimensions.width / 2
+  const halfDepth = dimensions.depth / 2
+
+  const roomHalfWidth = roomDimensions.width / 2
+  const roomHalfLength = roomDimensions.length / 2
+
+  // Check distance to each wall
+  const distToLeftWall = Math.abs(position.x + halfWidth + roomHalfWidth)
+  const distToRightWall = Math.abs(position.x - halfWidth - roomHalfWidth)
+  const distToBackWall = Math.abs(position.z + halfDepth + roomHalfLength)
+  const distToFrontWall = Math.abs(position.z - halfDepth - roomHalfLength)
+
+  // Snap to nearest wall if within snap distance
+  if (distToLeftWall < snapDistance) {
+    result.position = [-roomHalfWidth + halfWidth, position.y, position.z]
+    result.snapped = true
+    result.snapType = "wall"
+    result.guides = [
+      {
+        type: "line",
+        from: result.position,
+        to: [-roomHalfWidth, result.position[1], result.position[2]],
+        color: "#ef4444",
+      },
+    ]
+    return result
+  }
+
+  if (distToRightWall < snapDistance) {
+    result.position = [roomHalfWidth - halfWidth, position.y, position.z]
+    result.snapped = true
+    result.snapType = "wall"
+    result.guides = [
+      {
+        type: "line",
+        from: result.position,
+        to: [roomHalfWidth, result.position[1], result.position[2]],
+        color: "#ef4444",
+      },
+    ]
+    return result
+  }
+
+  if (distToBackWall < snapDistance) {
+    result.position = [position.x, position.y, -roomHalfLength + halfDepth]
+    result.snapped = true
+    result.snapType = "wall"
+    result.guides = [
+      {
+        type: "line",
+        from: result.position,
+        to: [result.position[0], result.position[1], -roomHalfLength],
+        color: "#ef4444",
+      },
+    ]
+    return result
+  }
+
+  if (distToFrontWall < snapDistance) {
+    result.position = [position.x, position.y, roomHalfLength - halfDepth]
+    result.snapped = true
+    result.snapType = "wall"
+    result.guides = [
+      {
+        type: "line",
+        from: result.position,
+        to: [result.position[0], result.position[1], roomHalfLength],
+        color: "#ef4444",
+      },
+    ]
+    return result
+  }
+
+  // Check corners
+  const corners: Array<[number, number]> = [
+    [-roomHalfWidth, -roomHalfLength],
+    [roomHalfWidth, -roomHalfLength],
+    [-roomHalfWidth, roomHalfLength],
+    [roomHalfWidth, roomHalfLength],
+  ]
+
+  for (const [cornerX, cornerZ] of corners) {
+    const distToCorner = Math.sqrt(
+      Math.pow(position.x - cornerX, 2) + Math.pow(position.z - cornerZ, 2)
+    )
+
+    if (distToCorner < snapDistance * 2) {
+      result.position = [cornerX + halfWidth, position.y, cornerZ + halfDepth]
+      result.snapped = true
+      result.snapType = "corner"
+      result.guides = [
+        {
+          type: "point",
+          from: [cornerX, position.y, cornerZ],
+          color: "#f59e0b",
+          label: "Corner",
+        },
+      ]
+      return result
+    }
+  }
+
+  return result
+}
+
+/**
+ * Snap to grid
+ */
+function snapToGrid(position: THREE.Vector3, gridSize: number): SnapResult {
+  const snappedX = Math.round(position.x / gridSize) * gridSize
+  const snappedZ = Math.round(position.z / gridSize) * gridSize
+
+  return {
+    position: [snappedX, position.y, snappedZ],
+    snapped: true,
+    snapType: "grid",
+    guides: [],
+  }
+}
+
+/**
+ * Calculate snap angle (for rotation)
+ */
+export function calculateSnapAngle(angle: number, snapAngle: number): number {
+  return Math.round(angle / snapAngle) * snapAngle
+}
+
+/**
+ * Check if two objects would collide
+ */
+export function checkCollision(
+  obj1: { position: THREE.Vector3; dimensions: { width: number; depth: number; height: number } },
+  obj2: { position: THREE.Vector3; dimensions: { width: number; depth: number; height: number } },
+  tolerance: number = 0.1
+): boolean {
+  const box1 = new THREE.Box3(
+    new THREE.Vector3(
+      obj1.position.x - obj1.dimensions.width / 2 - tolerance,
+      obj1.position.y,
+      obj1.position.z - obj1.dimensions.depth / 2 - tolerance
+    ),
+    new THREE.Vector3(
+      obj1.position.x + obj1.dimensions.width / 2 + tolerance,
+      obj1.position.y + obj1.dimensions.height,
+      obj1.position.z + obj1.dimensions.depth / 2 + tolerance
+    )
+  )
+
+  const box2 = new THREE.Box3(
+    new THREE.Vector3(
+      obj2.position.x - obj2.dimensions.width / 2 - tolerance,
+      obj2.position.y,
+      obj2.position.z - obj2.dimensions.depth / 2 - tolerance
+    ),
+    new THREE.Vector3(
+      obj2.position.x + obj2.dimensions.width / 2 + tolerance,
+      obj2.position.y + obj2.dimensions.height,
+      obj2.position.z + obj2.dimensions.depth / 2 + tolerance
+    )
+  )
+
+  return box1.intersectsBox(box2)
+}
+
diff --git a/apps/fabrikanabytok/lib/utils/testing-helpers.ts b/apps/fabrikanabytok/lib/utils/testing-helpers.ts
new file mode 100644
index 0000000..5216f1d
--- /dev/null
+++ b/apps/fabrikanabytok/lib/utils/testing-helpers.ts
@@ -0,0 +1,169 @@
+/**
+ * Testing & Validation Utilities
+ * For development and production monitoring
+ */
+
+/**
+ * Test database connection
+ */
+export async function testDatabaseConnection(): Promise<{
+  success: boolean
+  latency: number
+  collections: number
+  message: string
+}> {
+  try {
+    const start = performance.now()
+    const { getDb } = await import("@/lib/db/mongodb")
+    const db = await getDb()
+    
+    const collections = await db.listCollections().toArray()
+    const latency = performance.now() - start
+    
+    return {
+      success: true,
+      latency,
+      collections: collections.length,
+      message: `Connected with ${latency.toFixed(2)}ms latency`,
+    }
+  } catch (error: any) {
+    return {
+      success: false,
+      latency: 0,
+      collections: 0,
+      message: error.message,
+    }
+  }
+}
+
+/**
+ * Test Socket.IO connection
+ */
+export async function testSocketConnection(): Promise<{
+  success: boolean
+  transport: string
+  latency: number
+  message: string
+}> {
+  try {
+    const { getSocket } = await import("@/lib/websocket/socket-client")
+    const socket = getSocket()
+    
+    if (!socket || !socket.connected) {
+      return {
+        success: false,
+        transport: "none",
+        latency: 0,
+        message: "Not connected",
+      }
+    }
+    
+    const start = performance.now()
+    
+    return new Promise((resolve) => {
+      socket.emit("ping", (response: any) => {
+        const latency = performance.now() - start
+        resolve({
+          success: true,
+          transport: socket.io.engine.transport.name,
+          latency,
+          message: `Connected via ${socket.io.engine.transport.name}`,
+        })
+      })
+      
+      // Timeout after 5 seconds
+      setTimeout(() => {
+        resolve({
+          success: false,
+          transport: "timeout",
+          latency: 0,
+          message: "Connection timeout",
+        })
+      }, 5000)
+    })
+  } catch (error: any) {
+    return {
+      success: false,
+      transport: "error",
+      latency: 0,
+      message: error.message,
+    }
+  }
+}
+
+/**
+ * Validate platform health
+ */
+export async function validatePlatformHealth(): Promise<{
+  overall: "healthy" | "degraded" | "down"
+  checks: Array<{
+    name: string
+    status: boolean
+    message: string
+  }>
+}> {
+  const checks: Array<{ name: string; status: boolean; message: string }> = []
+  
+  // Database
+  const dbTest = await testDatabaseConnection()
+  checks.push({
+    name: "Database",
+    status: dbTest.success,
+    message: dbTest.message,
+  })
+  
+  // Socket.IO
+  const socketTest = await testSocketConnection()
+  checks.push({
+    name: "Socket.IO",
+    status: socketTest.success,
+    message: socketTest.message,
+  })
+  
+  // Check critical collections exist
+  try {
+    const { getDb } = await import("@/lib/db/mongodb")
+    const db = await getDb()
+    
+    const criticalCollections = ["products", "users", "designs", "employees"]
+    for (const collName of criticalCollections) {
+      const exists = await db.listCollections({ name: collName }).hasNext()
+      checks.push({
+        name: `Collection: ${collName}`,
+        status: exists,
+        message: exists ? "Exists" : "Missing",
+      })
+    }
+  } catch (error) {
+    checks.push({
+      name: "Collections Check",
+      status: false,
+      message: "Failed to verify",
+    })
+  }
+  
+  // Determine overall health
+  const failedChecks = checks.filter((c) => !c.status).length
+  let overall: "healthy" | "degraded" | "down"
+  
+  if (failedChecks === 0) overall = "healthy"
+  else if (failedChecks <= 2) overall = "degraded"
+  else overall = "down"
+  
+  return { overall, checks }
+}
+
+/**
+ * Generate test data for development
+ */
+export async function generateTestData() {
+  // This would generate sample data for testing
+  return {
+    products: 10,
+    users: 5,
+    employees: 3,
+    designs: 5,
+    message: "Test data generated",
+  }
+}
+