From 2f67ad2fe33db63eda87898445d6612386e146be Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:06:47 -0800
Subject: [PATCH] fix: Restore RoomLayoutWizard with native select/slider and
 add Tabs component

---
 .../components/layout/RoomLayoutWizard.tsx    | 37 ++++-----
 frontend/src/components/ui/tabs.tsx           | 81 +++++++++++++++++++
 2 files changed, 98 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/ui/tabs.tsx

diff --git a/frontend/src/components/layout/RoomLayoutWizard.tsx b/frontend/src/components/layout/RoomLayoutWizard.tsx
index 29f4e61..cf30aea 100644
--- a/frontend/src/components/layout/RoomLayoutWizard.tsx
+++ b/frontend/src/components/layout/RoomLayoutWizard.tsx
@@ -3,10 +3,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
-import { Slider } from '../ui/slider';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-import { api } from '../../lib/api';
+import api from '../../lib/api';
 import { layoutApi } from '../../lib/layoutApi';
 import { Loader2, Wand2, Box, Layers, Grid } from 'lucide-react';
 
@@ -84,20 +82,16 @@ export function RoomLayoutWizard({ isOpen, onClose, onSuccess, floorId }: RoomLa
                                 </div>
                                 <div className="space-y-2">
                                     <Label>Room Type</Label>
-                                    <Select
+                                    <select
                                         value={formData.type}
-                                        onValueChange={(val) => setFormData({ ...formData, type: val })}
+                                        onChange={(e) => setFormData({ ...formData, type: e.target.value })}
+                                        className="w-full h-10 px-3 rounded-md border border-zinc-700 bg-zinc-900 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                     >
-                                        <SelectTrigger className="bg-zinc-900 border-zinc-700">
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent className="bg-zinc-900 border-zinc-700">
-                                            <SelectItem value="VEGETATIVE">Vegetative</SelectItem>
-                                            <SelectItem value="FLOWER">Flower</SelectItem>
-                                            <SelectItem value="DRYING">Drying</SelectItem>
-                                            <SelectItem value="CURING">Curing</SelectItem>
-                                        </SelectContent>
-                                    </Select>
+                                        <option value="VEGETATIVE">Vegetative</option>
+                                        <option value="FLOWER">Flower</option>
+                                        <option value="DRYING">Drying</option>
+                                        <option value="CURING">Curing</option>
+                                    </select>
                                 </div>
                             </div>
 
@@ -129,11 +123,14 @@ export function RoomLayoutWizard({ isOpen, onClose, onSuccess, floorId }: RoomLa
                                     <Label>Number of {formData.setupType === 'RACK' ? 'Racks' : 'Tables'}</Label>
                                     <span className="text-xl font-mono text-emerald-400">{formData.racksCount}</span>
                                 </div>
-                                <Slider
-                                    value={[formData.racksCount]}
-                                    onValueChange={([val]) => setFormData({ ...formData, racksCount: val })}
-                                    min={1} max={20} step={1}
-                                    className="py-4"
+                                <input
+                                    type="range"
+                                    min="1"
+                                    max="20"
+                                    step="1"
+                                    value={formData.racksCount}
+                                    onChange={(e) => setFormData({ ...formData, racksCount: parseInt(e.target.value) })}
+                                    className="w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-emerald-500"
                                 />
                             </div>
 
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..ca21711
--- /dev/null
+++ b/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,81 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const TabsContext = React.createContext<{ value: string; onValueChange?: (v: string) => void } | null>(null)
+
+const Tabs = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { value: string; onValueChange?: (value: string) => void }
+>(({ className, value, onValueChange, ...props }, ref) => (
+    <TabsContext.Provider value={{ value, onValueChange }}>
+        <div ref={ref} className={cn("", className)} {...props} />
+    </TabsContext.Provider>
+))
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+TabsList.displayName = "TabsList"
+
+const TabsTrigger = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string }
+>(({ className, value, onClick, ...props }, ref) => {
+    const context = React.useContext(TabsContext)
+    const isActive = context?.value === value
+
+    return (
+        <button
+            ref={ref}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            data-state={isActive ? "active" : "inactive"}
+            onClick={(e) => {
+                onClick?.(e)
+                context?.onValueChange?.(value)
+            }}
+            className={cn(
+                "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+                isActive ? "bg-background text-foreground shadow-sm" : "",
+                className
+            )}
+            {...props}
+        />
+    )
+})
+TabsTrigger.displayName = "TabsTrigger"
+
+const TabsContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { value: string }
+>(({ className, value, ...props }, ref) => {
+    const context = React.useContext(TabsContext)
+    if (context?.value !== value) return null
+
+    return (
+        <div
+            ref={ref}
+            role="tabpanel"
+            className={cn(
+                "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                className
+            )}
+            {...props}
+        />
+    )
+})
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }