fix: Restore RoomLayoutWizard with native select/slider and add Tabs component

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">
+                                        <option value="VEGETATIVE">Vegetative</option>
-                                            <SelectValue />
+                                        <option value="FLOWER">Flower</option>
-                                        </SelectTrigger>
+                                        <option value="DRYING">Drying</option>
-                                        <SelectContent className="bg-zinc-900 border-zinc-700">
+                                        <option value="CURING">Curing</option>
-                                            <SelectItem value="VEGETATIVE">Vegetative</SelectItem>
+                                    </select>
-                                            <SelectItem value="FLOWER">Flower</SelectItem>
-                                            <SelectItem value="DRYING">Drying</SelectItem>
-                                            <SelectItem value="CURING">Curing</SelectItem>
-                                        </SelectContent>
-                                    </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
+                                <input
-                                    value={[formData.racksCount]}
+                                    type="range"
-                                    onValueChange={([val]) => setFormData({ ...formData, racksCount: val })}
+                                    min="1"
-                                    min={1} max={20} step={1}
+                                    max="20"
-                                    className="py-4"
+                                    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>
 

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 }