240 lines
13 KiB
TypeScript
240 lines
13 KiB
TypeScript
import { useState } from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../ui/dialog';
|
|
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 { layoutApi } from '../../lib/layoutApi';
|
|
import { Loader2, Wand2, Box, Layers, Grid } from 'lucide-react';
|
|
|
|
interface RoomLayoutWizardProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
floorId: string;
|
|
}
|
|
|
|
export function RoomLayoutWizard({ isOpen, onClose, onSuccess, floorId }: RoomLayoutWizardProps) {
|
|
const [step, setStep] = useState(1); // 1: Basics, 2: Layout, 3: Capacity
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
type: 'FLOWER',
|
|
setupType: 'RACK', // RACK, TABLE
|
|
racksCount: 4,
|
|
tiers: 2,
|
|
rowsPerRack: 4,
|
|
colsPerRack: 2
|
|
});
|
|
|
|
// Estimates
|
|
const totalPlants = formData.racksCount * formData.rowsPerRack * formData.colsPerRack * formData.tiers;
|
|
|
|
const handleGenerate = async () => {
|
|
setLoading(true);
|
|
try {
|
|
await layoutApi.generateRoom({
|
|
floorId,
|
|
code: formData.name.toUpperCase().substring(0, 4), // Auto-code
|
|
...formData
|
|
});
|
|
onSuccess();
|
|
onClose();
|
|
} catch (error) {
|
|
console.error('Failed to generate room:', error);
|
|
// In a real app, show toast
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-2xl bg-zinc-950 border-zinc-800 text-zinc-100">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl flex items-center gap-2">
|
|
<Wand2 className="w-5 h-5 text-emerald-400" />
|
|
Parametric Room Generator
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="py-6">
|
|
<Tabs value={String(step)} className="w-full">
|
|
<TabsList className="grid w-full grid-cols-3 bg-zinc-900">
|
|
<TabsTrigger value="1" disabled={step < 1} onClick={() => setStep(1)}>1. Basics</TabsTrigger>
|
|
<TabsTrigger value="2" disabled={step < 2} onClick={() => setStep(2)}>2. Layout</TabsTrigger>
|
|
<TabsTrigger value="3" disabled={step < 3} onClick={() => setStep(3)}>3. Review</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* STEP 1: BASICS */}
|
|
<TabsContent value="1" className="space-y-4 pt-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Room Name</Label>
|
|
<Input
|
|
placeholder="e.g. Flower Room 1"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="bg-zinc-900 border-zinc-700"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Room Type</Label>
|
|
<Select
|
|
value={formData.type}
|
|
onValueChange={(val) => setFormData({ ...formData, type: val })}
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Setup Type</Label>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<button
|
|
className={`p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${formData.setupType === 'RACK' ? 'bg-emerald-900/20 border-emerald-500 text-emerald-400' : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800'}`}
|
|
onClick={() => setFormData({ ...formData, setupType: 'RACK' })}
|
|
>
|
|
<Layers className="w-8 h-8" />
|
|
<span className="font-medium">Vertical Racks</span>
|
|
</button>
|
|
<button
|
|
className={`p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${formData.setupType === 'TABLE' ? 'bg-emerald-900/20 border-emerald-500 text-emerald-400' : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800'}`}
|
|
onClick={() => setFormData({ ...formData, setupType: 'TABLE' })}
|
|
>
|
|
<Grid className="w-8 h-8" />
|
|
<span className="font-medium">Rolling Tables</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* STEP 2: LAYOUT */}
|
|
<TabsContent value="2" className="space-y-6 pt-4">
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<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"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<Label>Tiers per Rack</Label>
|
|
<span className="text-2xl font-mono text-emerald-400">{formData.tiers}</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{[1, 2, 3, 4, 5].map(t => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setFormData({ ...formData, tiers: t })}
|
|
className={`flex-1 h-12 rounded-lg border font-bold transition-all ${formData.tiers === t ? 'bg-emerald-500 text-black border-emerald-500' : 'bg-zinc-900 border-zinc-700 text-zinc-400'}`}
|
|
>
|
|
{t}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-zinc-800">
|
|
<div className="space-y-2">
|
|
<Label>Rows (Length)</Label>
|
|
<Input
|
|
type="number"
|
|
value={formData.rowsPerRack}
|
|
onChange={(e) => setFormData({ ...formData, rowsPerRack: parseInt(e.target.value) || 4 })}
|
|
className="bg-zinc-900 border-zinc-700"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Columns (Example: 2 trays wide)</Label>
|
|
<Input
|
|
type="number"
|
|
value={formData.colsPerRack}
|
|
onChange={(e) => setFormData({ ...formData, colsPerRack: parseInt(e.target.value) || 2 })}
|
|
className="bg-zinc-900 border-zinc-700"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* STEP 3: REVIEW */}
|
|
<TabsContent value="3" className="space-y-6 pt-4">
|
|
<div className="bg-zinc-900/50 rounded-xl p-6 border border-zinc-800 space-y-4">
|
|
<h3 className="text-lg font-medium text-emerald-400">Total Capacity Estimate</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div>
|
|
<p className="text-sm text-zinc-400">Total Plant Sites</p>
|
|
<p className="text-4xl font-bold text-white">{totalPlants}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-zinc-400">Canopy Sq. Ft (Est)</p>
|
|
<p className="text-4xl font-bold text-white">
|
|
{totalPlants * 1.5} <span className="text-sm font-normal text-zinc-500">sq ft</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-zinc-800 pt-4 mt-4 grid grid-cols-2 gap-4 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-zinc-500">Units:</span>
|
|
<span className="text-zinc-200">{formData.racksCount} {formData.setupType}s</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-zinc-500">Tiers:</span>
|
|
<span className="text-zinc-200">{formData.tiers}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-zinc-500">Grid:</span>
|
|
<span className="text-zinc-200">{formData.rowsPerRack} x {formData.colsPerRack}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<DialogFooter className="flex justify-between sm:justify-between w-full">
|
|
{step > 1 ? (
|
|
<Button variant="outline" onClick={() => setStep(step - 1)} className="border-zinc-700 text-zinc-300">
|
|
Back
|
|
</Button>
|
|
) : (
|
|
<div /> // Spacer
|
|
)}
|
|
|
|
{step < 3 ? (
|
|
<Button onClick={() => setStep(step + 1)} className="bg-emerald-500 hover:bg-emerald-600 text-black">
|
|
Next
|
|
</Button>
|
|
) : (
|
|
<Button onClick={handleGenerate} disabled={loading} className="bg-emerald-500 hover:bg-emerald-600 text-black w-full sm:w-auto">
|
|
{loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wand2 className="w-4 h-4 mr-2" />}
|
|
Generate Room
|
|
</Button>
|
|
)}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|