malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Restore RoomLayoutWizard with native select/slider and add Tabs component
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-27 15:06:47 -08:00
parent e88814afef
commit 2f67ad2fe3
2 changed files with 98 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/components/layout/RoomLayoutWizard.tsx
View file

@ -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>

81
frontend/src/components/ui/tabs.tsx Normal file
View file

@ -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 }