diff --git a/apps/fabrikanabytok/app/(platform)/planner/[id]/page.tsx b/apps/fabrikanabytok/app/(platform)/planner/[id]/page.tsx new file mode 100644 index 0000000..b135488 --- /dev/null +++ b/apps/fabrikanabytok/app/(platform)/planner/[id]/page.tsx @@ -0,0 +1,39 @@ +import { auth } from "@/lib/auth/auth" +import { redirect } from "next/navigation" +import { getDesignById } from "@/lib/actions/design.actions" +import { PlannerEditor3D } from "@/components/planner/planner-editor-3d" +import { UltraPlannerEditor } from "@/components/planner/ultra-planner-editor" +import { ProfessionalPlanner } from "@/components/planner/professional-planner" +import { serializeDesign } from "@/lib/utils/serialization" + +export default async function PlannerEditorPage({ params, searchParams }: { params: Promise<{ id: string }>, searchParams: Promise<{ mode: string }> }) { + const { mode = "basic" } = await searchParams + if (!mode) { + redirect("/planner") + } + + const session = await auth() + if (!session?.user) { + redirect("/login") + } + + const { id } = await params + if (!id) { + redirect("/planner") + } + + const designData = await getDesignById(id) + const serializedDesign = serializeDesign(designData) + + const userName = `${session.user.firstName || ""} ${session.user.lastName || ""}`.trim() || "User" + + switch (mode) { + case "basic": + return + case "ultra": + return + case "professional": + return + } + +} diff --git a/apps/fabrikanabytok/app/(platform)/planner/new/page.tsx b/apps/fabrikanabytok/app/(platform)/planner/new/page.tsx new file mode 100644 index 0000000..b8bf6dd --- /dev/null +++ b/apps/fabrikanabytok/app/(platform)/planner/new/page.tsx @@ -0,0 +1,12 @@ +import { auth } from "@/lib/auth/auth" +import { redirect } from "next/navigation" +import { DesignWizard } from "@/components/planner/design-wizard" + +export default async function NewDesignPage() { + const session = await auth() + if (!session?.user) { + redirect("/login") + } + + return +} diff --git a/apps/fabrikanabytok/app/(platform)/planner/page.tsx b/apps/fabrikanabytok/app/(platform)/planner/page.tsx new file mode 100644 index 0000000..cb703d1 --- /dev/null +++ b/apps/fabrikanabytok/app/(platform)/planner/page.tsx @@ -0,0 +1,43 @@ +import { auth } from "@/lib/auth/auth" +import { redirect } from "next/navigation" +import { getDesigns } from "@/lib/actions/design.actions" +import { DesignsList } from "@/components/planner/designs-list" +import { Button } from "@/components/ui/button" +import { Plus } from "lucide-react" +import Link from "next/link" +import { serializeDesign } from '@/lib/utils/serialization' + + +export default async function PlannerPage() { + const session = await auth() + if (!session?.user) { + redirect("/login") + } + + const designs = await getDesigns() + + return ( +
+
+
+
+
+

3D Konyhatervező

+

Tervezd meg álmaid konyháját valós idejű 3D nézetben

+
+ + + +
+
+
+ +
+ +
+
+ ) +} diff --git a/apps/fabrikanabytok/components/planner/3d-ui-system.tsx b/apps/fabrikanabytok/components/planner/3d-ui-system.tsx new file mode 100644 index 0000000..29e89ae --- /dev/null +++ b/apps/fabrikanabytok/components/planner/3d-ui-system.tsx @@ -0,0 +1,735 @@ +"use client" + +/** + * Advanced 3D UI System + * Interactive UI elements in 3D space + */ + +import { useRef, useState, useEffect } from "react" +import { useThree, useFrame, ThreeEvent } from "@react-three/fiber" +import { Html, Text, Plane, RoundedBox, Line, MeshLineGeometry } from "@react-three/drei" +import { BufferGeometry, LineBasicMaterial } from "three" +import * as THREE from "three" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" + +export interface UI3DElement { + id: string + type: '3d-text' | 'panel' | 'button' | 'label' | 'tooltip' | 'menu' + position: THREE.Vector3 + rotation?: THREE.Euler + scale?: THREE.Vector3 + content?: React.ReactNode | string + onClick?: () => void + onHover?: (hovering: boolean) => void + alwaysFaceCamera?: boolean + distanceFade?: boolean + maxDistance?: number +} + +/** + * 3D Text Label + */ +export function Text3D({ + text, + position, + size = 0.5, + color = "#ffffff", + onClick, + alwaysFaceCamera = true +}: { + text: string + position: THREE.Vector3 + size?: number + color?: string + onClick?: () => void + alwaysFaceCamera?: boolean +}) { + const meshRef = useRef(null) + const { camera } = useThree() + const [hovered, setHovered] = useState(false) + + useFrame(() => { + if (meshRef.current && alwaysFaceCamera) { + meshRef.current.lookAt(camera.position) + } + }) + + return ( + + setHovered(true)} + onPointerOut={() => setHovered(false)} + > + {text} + + + ) +} + +/** + * 3D Panel with HTML content + */ +export function Panel3D({ + position, + rotation = new THREE.Euler(0, 0, 0), + size = [2, 1.5], + children, + distanceScale = true +}: { + position: THREE.Vector3 + rotation?: THREE.Euler + size?: [number, number] + children?: React.ReactNode + distanceScale?: boolean +}) { + const groupRef = useRef(null) + const { camera } = useThree() + + useFrame(() => { + if (groupRef.current && distanceScale) { + const distance = groupRef.current.position.distanceTo(camera.position) + const scale = Math.max(0.5, Math.min(2, distance / 5)) + groupRef.current.scale.setScalar(scale) + } + }) + + return ( + + {/* Background panel */} + + + + + {/* Border */} + + + + + + {/* HTML content */} + +
+ {children} +
+ + + ) +} + +/** + * 3D Button + */ +export function Button3D({ + position, + text, + onClick, + size = [1, 0.3, 0.1], + color = "#4488ff" +}: { + position: THREE.Vector3 + text: string + onClick?: () => void + size?: [number, number, number] + color?: string +}) { + const [hovered, setHovered] = useState(false) + const [pressed, setPressed] = useState(false) + const meshRef = useRef(null) + + const handleClick = (e: ThreeEvent) => { + e.stopPropagation() + setPressed(true) + setTimeout(() => setPressed(false), 100) + onClick?.() + } + + return ( + + setHovered(true)} + onPointerOut={() => setHovered(false)} + > + + + + + {text} + + + ) +} + +/** + * 3D Tooltip + */ +export function Tooltip3D({ + target, + content, + offset = new THREE.Vector3(0, 1, 0), + visible = true +}: { + target: THREE.Object3D + content: string + offset?: THREE.Vector3 + visible?: boolean +}) { + const groupRef = useRef(null) + const { camera } = useThree() + + useFrame(() => { + if (groupRef.current && visible) { + const position = target.position.clone().add(offset) + groupRef.current.position.copy(position) + groupRef.current.lookAt(camera.position) + } + }) + + if (!visible) return null + + return ( + + + + + + + {content} + + + ) +} + +/** + * 3D Context Menu + */ +export function ContextMenu3D({ + position, + items, + visible = true, + onClose +}: { + position: THREE.Vector3 + items: Array<{ label: string; onClick: () => void; icon?: string }> + visible?: boolean + onClose?: () => void +}) { + const groupRef = useRef(null) + const { camera } = useThree() + + useFrame(() => { + if (groupRef.current && visible) { + groupRef.current.lookAt(camera.position) + } + }) + + if (!visible) return null + + const itemHeight = 0.3 + const menuHeight = items.length * itemHeight + + return ( + + {/* Background */} + + + + + {/* Menu items */} + {items.map((item, index) => { + const yPos = menuHeight / 2 - itemHeight / 2 - index * itemHeight + + return ( + { + item.onClick() + onClose?.() + }} + size={[1.8, itemHeight * 0.8, 0.05]} + color="#333333" + /> + ) + })} + + ) +} + +/** + * 3D Progress Bar + */ +export function ProgressBar3D({ + position, + progress, + width = 2, + height = 0.2, + color = "#00ff00" +}: { + position: THREE.Vector3 + progress: number + width?: number + height?: number + color?: string +}) { + const clampedProgress = Math.max(0, Math.min(1, progress)) + + return ( + + {/* Background */} + + + + + {/* Progress fill */} + + + + + {/* Border */} + + + + + + {/* Percentage text */} + + {`${Math.round(clampedProgress * 100)}%`} + + + ) +} + +/** + * 3D Slider + */ +export function Slider3D({ + position, + value, + onChange, + min = 0, + max = 1, + width = 2, + label +}: { + position: THREE.Vector3 + value: number + onChange: (value: number) => void + min?: number + max?: number + width?: number + label?: string +}) { + const [isDragging, setIsDragging] = useState(false) + const { camera, gl } = useThree() + + const normalizedValue = (value - min) / (max - min) + const knobPosition = -width / 2 + normalizedValue * width + + const handlePointerDown = () => { + setIsDragging(true) + } + + const handlePointerUp = () => { + setIsDragging(false) + } + + const handlePointerMove = (e: ThreeEvent) => { + if (!isDragging) return + + // Calculate new value based on pointer position + const localPoint = e.point.clone() + const x = localPoint.x - position.x + const newNormalizedValue = Math.max(0, Math.min(1, (x + width / 2) / width)) + const newValue = min + newNormalizedValue * (max - min) + + onChange(newValue) + } + + return ( + + {/* Label */} + {label && ( + + {label} + + )} + + {/* Track */} + + + + + {/* Fill */} + + + + + {/* Knob */} + + + + + + + + {/* Value text */} + + {value.toFixed(2)} + + + ) +} + +/** + * 3D Info Card + */ +export function InfoCard3D({ + position, + title, + data, + visible = true +}: { + position: THREE.Vector3 + title: string + data: Array<{ label: string; value: string | number }> + visible?: boolean +}) { + const groupRef = useRef(null) + const { camera } = useThree() + + useFrame(() => { + if (groupRef.current && visible) { + groupRef.current.lookAt(camera.position) + } + }) + + if (!visible) return null + + return ( + + + +
+

+ {title} +

+
+ {data.map((item, index) => ( +
+ {item.label}: + {item.value} +
+ ))} +
+
+ + + + ) +} + +/** + * 3D Measurement Display + */ +export function MeasurementDisplay3D({ + start, + end, + unit = "m", + color = "#00ff00" +}: { + start: THREE.Vector3 + end: THREE.Vector3 + unit?: string + color?: string +}) { + const distance = start.distanceTo(end) + const midpoint = new THREE.Vector3().addVectors(start, end).multiplyScalar(0.5) + const lineGeometry = new THREE.BufferGeometry().setFromPoints([start, end]) + + // Create line geometry + + return ( + + {/* Measurement line */} + {/* + + */} + + ) +} + +/** + * 3D Notification + */ +export function Notification3D({ + position, + message, + type = "info", + duration = 3000, + onDismiss +}: { + position: THREE.Vector3 + message: string + type?: "info" | "success" | "warning" | "error" + duration?: number + onDismiss?: () => void +}) { + const [visible, setVisible] = useState(true) + const [opacity, setOpacity] = useState(1) + + useEffect(() => { + const timer = setTimeout(() => { + // Fade out + let fadeTime = 0 + const fadeInterval = setInterval(() => { + fadeTime += 50 + setOpacity(1 - (fadeTime / 500)) + + if (fadeTime >= 500) { + clearInterval(fadeInterval) + setVisible(false) + onDismiss?.() + } + }, 50) + }, duration) + + return () => clearTimeout(timer) + }, [duration, onDismiss]) + + if (!visible) return null + + const colors = { + info: "#3b82f6", + success: "#22c55e", + warning: "#f59e0b", + error: "#ef4444" + } + + const icons = { + info: "ℹ️", + success: "✓", + warning: "⚠️", + error: "✕" + } + + return ( + + + + + + + {icons[type]} + + + + {message} + + + ) +} + +/** + * 3D Loading Indicator + */ +export function LoadingIndicator3D({ + position, + size = 0.5, + color = "#00ff00" +}: { + position: THREE.Vector3 + size?: number + color?: string +}) { + const groupRef = useRef(null) + + useFrame((state) => { + if (groupRef.current) { + groupRef.current.rotation.z = state.clock.getElapsedTime() * 2 + } + }) + + const segments = 8 + const segmentAngle = (Math.PI * 2) / segments + + return ( + + {Array.from({ length: segments }, (_, i) => { + const angle = i * segmentAngle + const x = Math.cos(angle) * size + const y = Math.sin(angle) * size + const opacity = 0.3 + (i / segments) * 0.7 + + return ( + + + + + ) + })} + + ) +} + +/** + * 3D UI Manager + */ +export class UI3DManager { + private elements: Map = new Map() + private scene: THREE.Scene + + constructor(scene: THREE.Scene) { + this.scene = scene + } + + /** + * Add UI element + */ + addElement(element: UI3DElement): void { + this.elements.set(element.id, element) + } + + /** + * Remove UI element + */ + removeElement(id: string): void { + this.elements.delete(id) + } + + /** + * Get element + */ + getElement(id: string): UI3DElement | undefined { + return this.elements.get(id) + } + + /** + * Update all elements + */ + update(camera: THREE.Camera): void { + this.elements.forEach((element) => { + // Update distance fade + if (element.distanceFade && element.maxDistance) { + const distance = element.position.distanceTo(camera.position) + const opacity = 1 - Math.min(distance / (element.maxDistance ?? 1000000000), 1) as number + // Apply opacity to element + (element as any).material.opacity = opacity as number + (element as any).material.transparent = opacity < 1 as boolean + (element as any).material.color.setRGB(1, 1, 1) + (element as any).material.color.multiplyScalar(opacity as number) + (element as any).material.needsUpdate = true as boolean + } + }) + } + + /** + * Clear all elements + */ + clear(): void { + this.elements.clear() + } +} + diff --git a/apps/fabrikanabytok/components/planner/advanced-effects-showcase.tsx b/apps/fabrikanabytok/components/planner/advanced-effects-showcase.tsx new file mode 100644 index 0000000..92355dc --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-effects-showcase.tsx @@ -0,0 +1,454 @@ +"use client" + +/** + * Advanced Effects Showcase + * Demonstrates all Phase 2 advanced features in action + */ + +import { useEffect, useRef, useState } from "react" +import { Canvas, useThree, useFrame } from "@react-three/fiber" +import { OrbitControls, Environment, Sky } from "@react-three/drei" +import * as THREE from "three" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { Slider } from "@/components/ui/slider" +import { Label } from "@/components/ui/label" +import { Badge } from "@/components/ui/badge" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { + Play, + Pause, + RotateCw, + Sparkles, + Sun, + Camera, + Zap +} from "lucide-react" + +import { VolumetricLightManager } from "@/lib/three/volumetric-lighting" +import { GPUParticleSystem, ParticleEffects } from "@/lib/three/particle-system" +import { CinematicCamera, CameraPathGenerator, Easing } from "@/lib/three/cinematic-camera" + +/** + * Scene with all advanced effects + */ +function AdvancedEffectsScene() { + const { scene, camera, gl } = useThree() + const volumetricManagerRef = useRef(new VolumetricLightManager(scene, camera, gl) as VolumetricLightManager as unknown as VolumetricLightManager) + const particleSystemsRef = useRef([]) + const cinematicCameraRef = useRef(new CinematicCamera(camera as unknown as THREE.PerspectiveCamera) as CinematicCamera) + const sunLightRef = useRef(new THREE.DirectionalLight(0xffeedd, 1.5) as THREE.DirectionalLight) + const spotLightRef = useRef(new THREE.SpotLight(0xffffff, 2, 20, Math.PI / 6, 0.5, 1) as THREE.SpotLight) + const lightBeamRef = useRef(new THREE.Object3D() as THREE.Object3D) + + // Add god rays + volumetricManagerRef.current.addGodRays(sunLightRef.current as unknown as THREE.DirectionalLight, { + intensity: 0.6, + samples: 40, + decay: 0.95, + density: 0.5, + rayColor: new THREE.Color(0xffeedd) + }) + + // Add volumetric fog + volumetricManagerRef.current.addVolumetricFog({ + color: new THREE.Color(0xccddff), + near: 1.0, + far: 50.0, + density: 0.0005, + animated: true + }) + + // Create spot light with beam + spotLightRef.current = new THREE.SpotLight(0xffffff, 2, 20, Math.PI / 6, 0.5, 1) + spotLightRef.current.position.set(0, 5, 0) + spotLightRef.current.target.position.set(0, 0, 0) + scene.add(spotLightRef.current) + scene.add(spotLightRef.current.target) + + lightBeamRef.current = new THREE.Object3D() as THREE.Object3D + lightBeamRef.current.add(spotLightRef.current as unknown as THREE.Object3D) + lightBeamRef.current.add(new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 1, 32), new THREE.MeshBasicMaterial({ color: 0xffffff }))) + scene.add(lightBeamRef.current as unknown as THREE.Object3D) + + // Create particle effects + const fire = ParticleEffects.createFire(new THREE.Vector3(3, 0, 0)) + const smoke = ParticleEffects.createSmoke(new THREE.Vector3(-3, 0, 0)) + const sparkles = ParticleEffects.createSparkles(new THREE.Vector3(0, 2, 3)) + + particleSystemsRef.current = [fire, smoke, sparkles] + scene.add(fire.getMesh()) + scene.add(smoke.getMesh()) + scene.add(sparkles.getMesh()) + + // Setup cinematic camera + if (camera instanceof THREE.PerspectiveCamera) { + cinematicCameraRef.current = new CinematicCamera(camera) + + // Create orbit path + const pathPoints = [ + { position: new THREE.Vector3(15, 8, 0), target: new THREE.Vector3(0, 0, 0), fov: 50 }, + { position: new THREE.Vector3(0, 8, 15), target: new THREE.Vector3(0, 0, 0), fov: 55 }, + { position: new THREE.Vector3(-15, 8, 0), target: new THREE.Vector3(0, 0, 0), fov: 50 }, + { position: new THREE.Vector3(0, 8, -15), target: new THREE.Vector3(0, 0, 0), fov: 55 } + ] + + const path = CameraPathGenerator.createOrbitPath( + new THREE.Vector3(0, 0, 0), + 15, + 8, + 100 + ) + + const keyframes = CameraPathGenerator.generateKeyframes( + path, + pathPoints, + 30, + 100 + ) + + keyframes.forEach(kf => { + kf.easing = Easing.easeInOutCubic + cinematicCameraRef.current!.addKeyframe(kf) + }) + + cinematicCameraRef.current.setLoop(true) + } + + // Add ground plane + const groundGeometry = new THREE.PlaneGeometry(50, 50) + const groundMaterial = new THREE.MeshStandardMaterial({ + color: 0x333333, + roughness: 0.9, + metalness: 0.1 + }) + const ground = new THREE.Mesh(groundGeometry, groundMaterial) + ground.rotation.x = -Math.PI / 2 + ground.receiveShadow = true + scene.add(ground) + + // Add some demo objects + const boxGeometry = new THREE.BoxGeometry(2, 2, 2) + const boxMaterial = new THREE.MeshStandardMaterial({ + color: 0x4488ff, + roughness: 0.3, + metalness: 0.7 + }) + + for (let i = 0; i < 5; i++) { + const box = new THREE.Mesh(boxGeometry, boxMaterial) + box.position.set( + (Math.random() - 0.5) * 10, + 1, + (Math.random() - 0.5) * 10 + ) + box.castShadow = true + box.receiveShadow = true + scene.add(box) + } + + return () => { + volumetricManagerRef.current?.dispose() + particleSystemsRef.current.forEach(p => p.dispose()) + } + + useFrame((state, delta) => { + // Update volumetric effects + volumetricManagerRef.current?.update(delta) + + // Update cinematic camera + if (cinematicCameraRef.current && cinematicCameraRef.current.getIsPlaying()) { + cinematicCameraRef.current?.update(delta) + } + + // Rotate spotlight + if (spotLightRef.current && lightBeamRef.current) { + const time = state.clock.getElapsedTime() + spotLightRef.current.position.x = Math.cos(time * 0.5) * 5 + spotLightRef.current.position.z = Math.sin(time * 0.5) * 5 + spotLightRef.current.target.position.set(0, 0, 0) + + lightBeamRef.current.position.copy(spotLightRef.current.position) + lightBeamRef.current.quaternion.copy(spotLightRef.current.quaternion) + } + }) + + return ( + <> + + + + + + + ) +} + +/** + * Main showcase component + */ +export function AdvancedEffectsShowcase() { + const [activeTab, setActiveTab] = useState("overview") + const [godRaysIntensity, setGodRaysIntensity] = useState(0.6) + const [fogDensity, setFogDensity] = useState(0.5) + const [particleEmissionRate, setParticleEmissionRate] = useState(100) + const [cameraSpeed, setCameraSpeed] = useState(1.0) + + return ( +
+ {/* Header */} +
+
+
+

+ + Advanced Effects Showcase +

+

+ Phase 2: Volumetric Lighting, GPU Particles & Cinematic Camera +

+
+
+ + + 19 Features + + Phase 2 +
+
+
+ + {/* Main Content */} +
+ {/* 3D Canvas */} +
+ + + + + + + + {/* Info Overlay */} +
+ +

Active Effects

+
+
+ + God Rays & Volumetric Fog +
+
+ + GPU Particles (Fire, Smoke, Sparkles) +
+
+ + Cinematic Camera System +
+
+ + Volumetric Light Beam +
+
+ +
+
+ + {/* Controls Panel */} +
+ + + Overview + Settings + Info + + + +
+

Quick Actions

+
+ + + +
+
+ +
+

Features Demonstrated

+
+
+
Volumetric Lighting
+
+ God rays from sun with atmospheric scattering +
+
+
+
GPU Particles
+
+ 10,000+ particles with physics simulation +
+
+
+
Cinematic Camera
+
+ Smooth keyframe animation with easing +
+
+
+
Light Beams
+
+ Volumetric spotlight with visible rays +
+
+
+
+ + + +
+ + setGodRaysIntensity(v)} + min={0} + max={2} + step={0.1} + /> +
+ Current: {godRaysIntensity.toFixed(1)} +
+
+ +
+ + setFogDensity(v)} + min={0} + max={2} + step={0.1} + /> +
+ Current: {fogDensity.toFixed(1)} +
+
+ +
+ + setParticleEmissionRate(v)} + min={0} + max={500} + step={10} + /> +
+ Current: {particleEmissionRate} particles/s +
+
+ +
+ + setCameraSpeed(v)} + min={0.1} + max={3} + step={0.1} + /> +
+ Current: {cameraSpeed.toFixed(1)}x +
+
+ + + +
+

Performance Stats

+
+
+ GPU Usage: + Medium +
+
+ Active Particles: + ~5,000 +
+
+ Draw Calls: + ~15 +
+
+ Shader Passes: + 3 +
+
+
+ +
+

Browser Support

+
+
+
+ Chrome 90+ +
+
+
+ Firefox 88+ +
+
+
+ Safari 15+ (reduced quality) +
+
+
+ Edge 90+ +
+
+
+ +
+

Documentation

+
+ + + +
+
+ + +
+
+
+ ) +} + diff --git a/apps/fabrikanabytok/components/planner/advanced-export-dialog.tsx b/apps/fabrikanabytok/components/planner/advanced-export-dialog.tsx new file mode 100644 index 0000000..7f7b130 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-export-dialog.tsx @@ -0,0 +1,374 @@ +"use client" + +import { useState } from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Checkbox } from "@/components/ui/checkbox" +import { Label } from "@/components/ui/label" +import { Badge } from "@/components/ui/badge" +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" +import { Card } from "@/components/ui/card" +import { + Download, + Image as ImageIcon, + FileText, + Box, + Loader2, + FileCode, + Zap, + Crown, +} from "lucide-react" +import { toast } from "sonner" +import type { ExportOptions } from "@/lib/actions/export.actions" + +interface AdvancedExportDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + designId: string + onExport: (format: string, options: ExportOptions) => Promise +} + +export function AdvancedExportDialog({ + open, + onOpenChange, + designId, + onExport, +}: AdvancedExportDialogProps) { + const [loading, setLoading] = useState(false) + const [selectedFormat, setSelectedFormat] = useState("png") + const [resolution, setResolution] = useState("fhd") + const [selectedViews, setSelectedViews] = useState(["iso", "front", "back", "left", "right", "top"]) + const [includeShoppingList, setIncludeShoppingList] = useState(true) + const [includeDimensions, setIncludeDimensions] = useState(true) + const [includeMaterials, setIncludeMaterials] = useState(true) + + const handleExport = async () => { + setLoading(true) + try { + await onExport(selectedFormat, { + format: selectedFormat, + resolution, + views: selectedViews, + includeShoppingList, + includeDimensions, + includeMaterials, + }) + toast.success(`${selectedFormat.toUpperCase()} export completed!`) + onOpenChange(false) + } catch (error: any) { + toast.error(error.message || "Export failed") + } finally { + setLoading(false) + } + } + + return ( + + + + Advanced Export Options + + + + + + + Images + + + + PDF + + + + 3D Models + + + + CAD + + + + {/* Images Tab */} + +
+ {/* Format Selection */} +
+ + setSelectedFormat(v as any)}> +
+ +
+ + +
+ + +
+ + +
+ +
+ +
+ + {/* Resolution */} +
+ + setResolution(v as any)}> +
+ {[ + { value: "hd", label: "HD", size: "1280×720", free: true }, + { value: "fhd", label: "Full HD", size: "1920×1080", free: true }, + { value: "4k", label: "4K", size: "3840×2160", free: false }, + { value: "8k", label: "8K", size: "7680×4320", free: false }, + ].map((res) => ( + +
+ + +
+ + ))} +
+ +
+ + {/* Views */} +
+ +
+ {[ + { value: "front", label: "Front", icon: "⬅️" }, + { value: "back", label: "Back", icon: "➡️" }, + { value: "left", label: "Left", icon: "⬆️" }, + { value: "right", label: "Right", icon: "⬇️" }, + { value: "top", label: "Top", icon: "🔼" }, + { value: "iso", label: "3D", icon: "📐" }, + ].map((view) => ( +
+ { + setSelectedViews( + checked + ? [...(selectedViews || []), view.value as any] + : selectedViews?.filter((v) => v !== view.value) + ) + }} + /> + +
+ ))} +
+
+
+ + + {/* PDF Tab */} + +
+
+

Professional PDF Report

+

+ Generate a comprehensive design report with images, specifications, and shopping list +

+
+ + {/* Include Options */} +
+ +
+
+ + +
+
+ setIncludeShoppingList(c as boolean)} + /> + +
+
+ setIncludeDimensions(c as boolean)} + /> + +
+
+ setIncludeMaterials(c as boolean)} + /> + +
+
+ + +
+
+
+
+ + + {/* 3D Models Tab */} + +
+
+
+ +

Premium Feature

+
+

+ Export your design as a 3D model for use in professional software +

+
+ + {/* Format Selection */} +
+ + setSelectedFormat(v as any)}> +
+ {[ + { value: "glb", label: "GLB", desc: "Binary GLTF - Web optimized", premium: false }, + { value: "obj", label: "OBJ", desc: "Universal 3D format", premium: false }, + { value: "fbx", label: "FBX", desc: "Autodesk format", premium: true }, + ].map((format) => ( + +
+ + +
+ + ))} +
+ +
+ +
+

Compatible with:

+
    +
  • Blender
    • +
  • SketchUp
    • +
  • 3ds Max
    • +
  • Cinema 4D
    • +
  • Unity / Unreal Engine
    • +
+
+
+ + + {/* CAD Tab */} + +
+
+
+ +

Enterprise Feature

+
+

+ Export to professional CAD formats for architects and contractors +

+
+ + {/* Format Selection */} +
+ + setSelectedFormat(v as any)}> +
+ {[ + { value: "dwg", label: "DWG", desc: "AutoCAD Drawing", premium: true }, + { value: "dxf", label: "DXF", desc: "Drawing Exchange Format", premium: true }, + ].map((format) => ( + +
+ + +
+ + ))} +
+ +
+ +
+

Includes:

+
    +
  • Precise dimensions and measurements
    • +
  • Floor plans and elevations
    • +
  • Material specifications
    • +
  • Layer organization
    • +
  • Bill of materials (BOM)
    • +
+
+
+ + + + {/* Export Button */} +
+
+ Format: {selectedFormat.toUpperCase()} +
+ + +
+ + + ) +} + diff --git a/apps/fabrikanabytok/components/planner/advanced-lighting.tsx b/apps/fabrikanabytok/components/planner/advanced-lighting.tsx new file mode 100644 index 0000000..739a049 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-lighting.tsx @@ -0,0 +1,272 @@ +"use client" + +import { useRef, useMemo } from "react" +import * as THREE from "three" +import { useFrame } from "@react-three/fiber" +import { + EffectComposer, + Bloom, + SSAO, + ChromaticAberration, + Vignette, + ToneMapping +} from "@react-three/postprocessing" +import { BlendFunction, ToneMappingMode } from "postprocessing" +import type { RenderSettings } from "@/lib/types/planner.types" + +interface AdvancedLightingProps { + roomDimensions?: { width: number; length: number; height: number } + renderSettings: RenderSettings +} + +export function AdvancedLighting({ roomDimensions, renderSettings }: AdvancedLightingProps) { + const { width, length, height } = roomDimensions ?? { width: 0, length: 0, height: 0 } + const spotLightRef = useRef(null) + const areaLightRef = useRef(null) + + // Animate lights based on preset + useFrame((state) => { + if (renderSettings.lightingPreset === "day" && spotLightRef.current) { + // Subtle sun movement + const time = state.clock.getElapsedTime() + spotLightRef.current.position.x = Math.sin(time * 0.1) * width * 0.5 + } + }) + + const lightIntensities = useMemo(() => { + switch (renderSettings.lightingPreset) { + case "day": + return { ambient: 0.6, directional: 1.2, spot: 0.8, area: 0.5 } + case "night": + return { ambient: 0.2, directional: 0.3, spot: 1.5, area: 1.2 } + case "studio": + return { ambient: 0.4, directional: 1.5, spot: 1.0, area: 0.8 } + case "outdoor": + return { ambient: 0.8, directional: 2.0, spot: 0.3, area: 0.2 } + default: + return { ambient: 0.5, directional: 1.0, spot: 0.8, area: 0.6 } + } + }, [renderSettings.lightingPreset]) + + return ( + <> + {/* Ambient Light */} + + + {/* Main Directional Light (Sun) */} + + + {/* Fill Light */} + + + {/* Spot Light (Ceiling) */} + + + {/* Point Lights (for accent lighting) */} + {renderSettings.lightingPreset !== "outdoor" && ( + <> + + + + )} + + {/* Hemisphere Light (Sky simulation) */} + {renderSettings.lightingPreset === "outdoor" && ( + + )} + + ) +} + +/** + * Post-Processing Effects + */ +export function PostProcessingEffects({ renderSettings }: { renderSettings?: RenderSettings }) { + // Resolve error can't access property "length", children2 is undefined + if (!renderSettings || !renderSettings?.postProcessing || renderSettings?.quality === "draft") { + return null + } + + // Ensure renderSettings exists and post-processing is enabled + return ( + + {/* Wrap all children in fragment to ensure valid children structure */} + <> + {/* Ambient Occlusion */} + {renderSettings?.ambientOcclusion && renderSettings?.quality !== "preview" && ( + + )} + + {/* Bloom (for glow effects) */} + {(renderSettings?.quality === "high" || renderSettings?.quality === "ultra") && ( + + )} + + {/* Tone Mapping - always include at least one effect */} + + + {/* Vignette */} + {renderSettings?.quality === "ultra" && ( + + )} + + + ) +} + +/** + * Lighting Control Panel Component + */ +export function LightingControlPanel() { + const { renderSettings, updateRenderSettings } = usePlannerStore() + + return ( +
+
+ +
+ {[ + { value: "day", label: "☀️ Day", desc: "Natural daylight" }, + { value: "night", label: "🌙 Night", desc: "Evening ambiance" }, + { value: "studio", label: "💡 Studio", desc: "Professional lighting" }, + { value: "outdoor", label: "🌤️ Outdoor", desc: "Natural outdoor" }, + ].map((preset) => ( + + ))} +
+
+ +
+ +
+ {[ + { value: "draft", label: "Draft", desc: "Fast preview" }, + { value: "preview", label: "Preview", desc: "Balanced" }, + { value: "high", label: "High", desc: "High quality" }, + { value: "ultra", label: "Ultra", desc: "Maximum quality" }, + ].map((quality) => ( + + ))} +
+
+ +
+
+ + updateRenderSettings({ shadows: e.target.checked })} + className="rounded" + /> +
+ +
+ + updateRenderSettings({ ambientOcclusion: e.target.checked })} + className="rounded" + /> +
+ +
+ + updateRenderSettings({ postProcessing: e.target.checked })} + className="rounded" + /> +
+
+
+ ) +} + +// Import this in planner store +import { usePlannerStore } from "@/lib/store/planner-store" +import { Button } from "../ui/button" + diff --git a/apps/fabrikanabytok/components/planner/advanced-material-picker.tsx b/apps/fabrikanabytok/components/planner/advanced-material-picker.tsx new file mode 100644 index 0000000..3a5ed03 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-material-picker.tsx @@ -0,0 +1,496 @@ +"use client" + +/** + * Advanced Material Picker with Real-time PBR Preview + * Interactive material selection with live 3D preview + */ + +import { useState, useRef, useEffect } from "react" +import { Canvas, useFrame } from "@react-three/fiber" +import { OrbitControls, Environment, Stage } from "@react-three/drei" +import * as THREE from "three" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Slider } from "@/components/ui/slider" +import { Label } from "@/components/ui/label" +import { Input } from "@/components/ui/input" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { + Palette, + Sparkles, + Eye, + Download, + Upload, + Save, + Grid3x3, + Droplet, + Zap, + Sun +} from "lucide-react" +import { usePlannerStore } from "@/lib/store/planner-store" +import { MaterialManager } from "@/lib/three/materials" +import { ShaderManager } from "@/lib/three/shaders" + +interface MaterialPreset { + id: string + name: string + category: 'wood' | 'metal' | 'glass' | 'stone' | 'fabric' | 'plastic' | 'custom' + thumbnail: string + config: { + color?: string + roughness?: number + metalness?: number + normalScale?: number + emissive?: string + emissiveIntensity?: number + transmission?: number + clearcoat?: number + } +} + +/** + * 3D Preview Sphere + */ +function MaterialPreviewSphere({ material }: { material: THREE.Material }) { + const meshRef = useRef(null) + + useFrame((state) => { + if (meshRef.current) { + meshRef.current.rotation.y += 0.005 + } + }) + + return ( + + + + + ) +} + +/** + * Main Material Picker Component + */ +export function AdvancedMaterialPicker({ + onSelect +}: { + onSelect?: (material: THREE.Material) => void +}) { + const [activeTab, setActiveTab] = useState<'presets' | 'custom' | 'procedural' | 'shaders'>('presets') + const [selectedPreset, setSelectedPreset] = useState(null) + const [previewMaterial, setPreviewMaterial] = useState(new THREE.MeshStandardMaterial()) + + // PBR Parameters + const [color, setColor] = useState('#ffffff') + const [roughness, setRoughness] = useState(0.5) + const [metalness, setMetalness] = useState(0.0) + const [normalScale, setNormalScale] = useState(1.0) + const [emissive, setEmissive] = useState('#000000') + const [emissiveIntensity, setEmissiveIntensity] = useState(0) + const [transmission, setTransmission] = useState(0) + const [clearcoat, setClearcoat] = useState(0) + const [clearcoatRoughness, setClearcoatRoughness] = useState(0) + + const materialManager = MaterialManager.getInstance() + const shaderManager = ShaderManager.getInstance() + + // Material presets + const presets: MaterialPreset[] = [ + { + id: 'oak-wood', + name: 'Oak Wood', + category: 'wood', + thumbnail: '/materials/oak.jpg', + config: { color: '#C9A076', roughness: 0.7, metalness: 0.0 } + }, + { + id: 'walnut-wood', + name: 'Walnut', + category: 'wood', + thumbnail: '/materials/walnut.jpg', + config: { color: '#4A3728', roughness: 0.6, metalness: 0.0 } + }, + { + id: 'brushed-steel', + name: 'Brushed Steel', + category: 'metal', + thumbnail: '/materials/steel.jpg', + config: { color: '#C0C0C0', roughness: 0.3, metalness: 0.9 } + }, + { + id: 'copper', + name: 'Copper', + category: 'metal', + thumbnail: '/materials/copper.jpg', + config: { color: '#B87333', roughness: 0.2, metalness: 1.0 } + }, + { + id: 'clear-glass', + name: 'Clear Glass', + category: 'glass', + thumbnail: '/materials/glass.jpg', + config: { color: '#ffffff', roughness: 0.0, metalness: 0.0, transmission: 1.0 } + }, + { + id: 'frosted-glass', + name: 'Frosted Glass', + category: 'glass', + thumbnail: '/materials/frosted.jpg', + config: { color: '#f0f0f0', roughness: 0.3, metalness: 0.0, transmission: 0.7 } + }, + { + id: 'marble', + name: 'Marble', + category: 'stone', + thumbnail: '/materials/marble.jpg', + config: { color: '#ffffff', roughness: 0.2, metalness: 0.1 } + }, + { + id: 'granite', + name: 'Granite', + category: 'stone', + thumbnail: '/materials/granite.jpg', + config: { color: '#555555', roughness: 0.6, metalness: 0.0 } + }, + { + id: 'glossy-paint', + name: 'Glossy Paint', + category: 'plastic', + thumbnail: '/materials/glossy.jpg', + config: { color: '#ff0000', roughness: 0.1, metalness: 0.0, clearcoat: 1.0 } + }, + { + id: 'matte-paint', + name: 'Matte Paint', + category: 'plastic', + thumbnail: '/materials/matte.jpg', + config: { color: '#ffffff', roughness: 0.9, metalness: 0.0 } + } + ] + + // Update preview material when parameters change + useEffect(() => { + const material = new THREE.MeshPhysicalMaterial({ + color: new THREE.Color(color), + roughness, + metalness, + emissive: new THREE.Color(emissive), + emissiveIntensity, + transmission, + clearcoat, + clearcoatRoughness + }) + + setPreviewMaterial(material) + + return () => material.dispose() + }, [color, roughness, metalness, emissive, emissiveIntensity, transmission, clearcoat, clearcoatRoughness]) + + const handlePresetSelect = (preset: MaterialPreset) => { + setSelectedPreset(preset) + if (preset.config.color) setColor(preset.config.color) + if (preset.config.roughness !== undefined) setRoughness(preset.config.roughness) + if (preset.config.metalness !== undefined) setMetalness(preset.config.metalness) + if (preset.config.transmission !== undefined) setTransmission(preset.config.transmission) + if (preset.config.clearcoat !== undefined) setClearcoat(preset.config.clearcoat) + } + + const handleApply = () => { + if (onSelect) { + onSelect(previewMaterial) + } + } + + return ( +
+ {/* Header */} +
+
+
+ +

Advanced Material Picker

+
+ + + PBR Materials + +
+
+ + {/* 3D Preview */} +
+ + + + + + + + + {/* Preview Info Overlay */} +
+ + Real-time Preview +
+
+ + {/* Material Controls */} + setActiveTab(v)} className="flex-1 flex flex-col"> + + + + Presets + + + + Custom + + + + Procedural + + + + Shaders + + + + {/* Presets Tab */} + + +
+ {['wood', 'metal', 'glass', 'stone', 'plastic'].map((category) => ( +
+

{category}

+
+ {presets + .filter((p) => p.category === category) + .map((preset) => ( + handlePresetSelect(preset)} + > +
+
+
+
+

{preset.name}

+
+ + ))} +
+
+ ))} +
+ + + + {/* Custom Tab */} + +
+ {/* Base Color */} +
+ +
+ setColor(e.target.value)} + className="w-16 h-10 p-1" + /> + setColor(e.target.value)} + className="flex-1 font-mono text-xs" + /> +
+
+ + {/* Roughness */} +
+
+ + {roughness.toFixed(2)} +
+ setRoughness(v)} + min={0} + max={1} + step={0.01} + /> +
+ + {/* Metalness */} +
+
+ + {metalness.toFixed(2)} +
+ setMetalness(v)} + min={0} + max={1} + step={0.01} + /> +
+ + {/* Emissive */} +
+ +
+ setEmissive(e.target.value)} + className="w-16 h-8 p-1" + /> + setEmissiveIntensity(v)} + min={0} + max={2} + step={0.1} + className="flex-1" + /> + {emissiveIntensity.toFixed(1)} +
+
+ + {/* Transmission (Glass) */} +
+
+ + {transmission.toFixed(2)} +
+ setTransmission(v)} + min={0} + max={1} + step={0.01} + /> +
+ + {/* Clearcoat */} +
+
+ + {clearcoat.toFixed(2)} +
+ setClearcoat(v)} + min={0} + max={1} + step={0.01} + /> +
+ + {clearcoat > 0 && ( +
+
+ + {clearcoatRoughness.toFixed(2)} +
+ setClearcoatRoughness(v)} + min={0} + max={1} + step={0.01} + /> +
+ )} +
+ + + {/* Procedural Tab */} + +
+

+ Generate materials procedurally using noise and algorithms +

+ + + + + + +
+ + + {/* Shaders Tab */} + +
+

+ Advanced shader-based materials with custom effects +

+ + + + + + + + +
+ + + + {/* Footer Actions */} +
+ + + +
+
+ ) +} + diff --git a/apps/fabrikanabytok/components/planner/advanced-model-viewer.tsx b/apps/fabrikanabytok/components/planner/advanced-model-viewer.tsx new file mode 100644 index 0000000..59c8715 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-model-viewer.tsx @@ -0,0 +1,461 @@ +"use client" + +/** + * Advanced 3D Model Viewer + * Complete showcase of all advanced features + */ + +import { useRef, useState, useEffect } from "react" +import { Canvas, useFrame, useThree } from "@react-three/fiber" +import { + OrbitControls, + Environment, + ContactShadows, + Stage, + PresentationControls, + Float, + MeshReflectorMaterial, + useGLTF +} from "@react-three/drei" +import * as THREE from "three" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Slider } from "@/components/ui/slider" +import { Label } from "@/components/ui/label" +import { + Play, + Pause, + RotateCw, + Zap, + Sparkles, + Eye, + Box, + Palette +} from "lucide-react" +import { AdvancedPostProcessing } from "./advanced-post-processing" +import { PostProcessingEffects } from "./advanced-lighting" +import { MaterialManager } from "@/lib/three/materials" +import { PhysicsEngine } from "@/lib/three/physics" +import { GPUParticleSystem, ParticleEffects } from "@/lib/three/particle-system" +import { CinematicCamera, CameraPathGenerator, Easing } from "@/lib/three/cinematic-camera" +import { ShaderManager } from "@/lib/three/shaders" +import { DecalManager } from "@/lib/three/decal-system" + +interface AdvancedModelViewerProps { + modelUrl: string + enablePhysics?: boolean + enableParticles?: boolean + enableCinematicCamera?: boolean + enableAdvancedMaterials?: boolean + initialQuality?: 'draft' | 'preview' | 'high' | 'ultra' +} + +function ModelWithEffects({ modelUrl }: { modelUrl: string }) { + const gltf = useGLTF(modelUrl) + const modelRef = useRef(null) + const [rotation, setRotation] = useState(0) + + useFrame((state, delta) => { + if (modelRef.current) { + modelRef.current.rotation.y = rotation + } + }) + + // Enhance model materials + useEffect(() => { + if (gltf.scene) { + gltf.scene.traverse((child: any) => { + if (child.isMesh) { + child.castShadow = true + child.receiveShadow = true + + if (child.material) { + if (child.material instanceof THREE.MeshStandardMaterial) { + child.material.envMapIntensity = 1.5 + child.material.roughness = 0.3 + child.material.metalness = 0.1 + child.material.needsUpdate = true + } + } + } + }) + } + }, [gltf]) + + return ( + + + + ) +} + +function ViewerScene({ modelUrl, settings }: { modelUrl: string; settings: any }) { + const { scene, camera, gl } = useThree() + const particleSystemsRef = useRef([]) + const cinematicCameraRef = useRef(null) + + useEffect(() => { + // Setup cinematic camera if enabled + if (settings.enableCinematicCamera && camera instanceof THREE.PerspectiveCamera) { + cinematicCameraRef.current = new CinematicCamera(camera) + + // Create orbit path + const path = CameraPathGenerator.createOrbitPath( + new THREE.Vector3(0, 0, 0), + 5, + 2, + 100 + ) + + const keyframes = CameraPathGenerator.generateKeyframes( + path, + [ + { position: new THREE.Vector3(5, 2, 0), target: new THREE.Vector3(0, 0, 0), fov: 50 }, + { position: new THREE.Vector3(0, 2, 5), target: new THREE.Vector3(0, 0, 0), fov: 55 }, + { position: new THREE.Vector3(-5, 2, 0), target: new THREE.Vector3(0, 0, 0), fov: 50 }, + { position: new THREE.Vector3(0, 2, -5), target: new THREE.Vector3(0, 0, 0), fov: 55 } + ], + 20, + 100 + ) + + keyframes.forEach(kf => cinematicCameraRef.current!.addKeyframe(kf)) + cinematicCameraRef.current.setLoop(true) + + if (settings.cameraPlaying) { + cinematicCameraRef.current.play() + } + } + + // Add sparkle particles if enabled + if (settings.enableParticles) { + const sparkles = ParticleEffects.createSparkles(new THREE.Vector3(0, 1, 0)) + particleSystemsRef.current.push(sparkles) + scene.add(sparkles.getMesh()) + } + + return () => { + particleSystemsRef.current.forEach(p => { + scene.remove(p.getMesh()) + p.dispose() + }) + particleSystemsRef.current = [] + } + }, [scene, camera, settings]) + + useFrame((state, delta) => { + // Update particles + particleSystemsRef.current.forEach(p => p.update(delta)) + + // Update cinematic camera + if (cinematicCameraRef.current && settings.cameraPlaying) { + cinematicCameraRef.current.update(delta) + } + }) + + return ( + <> + + + + + ) +} + +export function AdvancedModelViewer({ + modelUrl, + enablePhysics = false, + enableParticles = false, + enableCinematicCamera = false, + enableAdvancedMaterials = true, + initialQuality = 'high' +}: AdvancedModelViewerProps) { + const [quality, setQuality] = useState(initialQuality) + const [cameraPlaying, setCameraPlaying] = useState(false) + const [particlesEnabled, setParticlesEnabled] = useState(enableParticles) + const [exposure, setExposure] = useState(1.0) + const [blur, setBlur] = useState(0.5) + + const [renderSettings, setRenderSettings] = useState({ + quality, + shadows: quality !== 'draft', + shadowQuality: 'medium' as const, + ambientOcclusion: quality === 'high' || quality === 'ultra', + antialiasing: quality !== 'draft', + postProcessing: quality === 'high' || quality === 'ultra', + lightingPreset: 'studio' as const + }) + + useEffect(() => { + setRenderSettings({ + quality, + shadows: quality !== 'draft', + shadowQuality: 'medium' as const, + ambientOcclusion: quality === 'high' || quality === 'ultra', + antialiasing: quality !== 'draft', + postProcessing: quality === 'high' || quality === 'ultra', + lightingPreset: 'studio' + }) + }, [quality]) + + return ( +
+ {/* 3D Viewer */} +
+ + + + + + + + + {/* Info Overlay */} +
+ + + {quality.toUpperCase()} + + {cameraPlaying && ( + + + Cinematic + + )} + {particlesEnabled && ( + + + Particles + + )} +
+
+ + {/* Control Panel */} +
+
+

+ + Advanced Viewer +

+

+ Professional 3D model visualization +

+
+ + + + Quality + Camera + Effects + + + +
+ +
+ {(['draft', 'preview', 'high', 'ultra'] as const).map((q) => ( + + ))} +
+
+ +
+
+ + {exposure.toFixed(2)} +
+ setExposure(v)} + min={0.1} + max={3} + step={0.1} + /> +
+ +
+
+ + {blur.toFixed(2)} +
+ setBlur(v)} + min={0} + max={1} + step={0.1} + /> +
+ +
+ +
+
+ Shadows: + {renderSettings.shadows ? 'On' : 'Off'} +
+
+ AO: + {renderSettings.ambientOcclusion ? 'On' : 'Off'} +
+
+ Post-FX: + {renderSettings.postProcessing ? 'On' : 'Off'} +
+
+
+ + + + {enableCinematicCamera && ( + <> +
+ + +
+ +
+ Smooth orbital camera animation around the model +
+ + )} + +
+ +
+ + + + + + +
+
+ + + +
+
+ + setParticlesEnabled(e.target.checked)} + className="rounded" + /> +
+
+ +
+ +
+
+
+ PBR Materials +
+ {renderSettings.shadows && ( +
+
+ Dynamic Shadows +
+ )} + {renderSettings.ambientOcclusion && ( +
+
+ Ambient Occlusion +
+ )} + {renderSettings.postProcessing && ( +
+
+ Post-Processing +
+ )} + {particlesEnabled && ( +
+
+ GPU Particles +
+ )} + {cameraPlaying && ( +
+
+ Camera Animation +
+ )} +
+
+ + +
+
+ ) +} + diff --git a/apps/fabrikanabytok/components/planner/advanced-object-inspector.tsx b/apps/fabrikanabytok/components/planner/advanced-object-inspector.tsx new file mode 100644 index 0000000..5905515 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-object-inspector.tsx @@ -0,0 +1,378 @@ +"use client" + +/** + * Advanced Object Inspector + * Detailed object properties and advanced editing tools + */ + +import { useState, useEffect } from "react" +import { Card } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Slider } from "@/components/ui/slider" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Separator } from "@/components/ui/separator" +import { + Box, + Move, + Rotate3D, + Scale, + Palette, + Layers, + Zap, + Eye, + EyeOff, + Lock, + Unlock, + Copy, + Trash2, + Link, + Unlink +} from "lucide-react" +import { usePlannerStore } from "@/lib/store/planner-store" +import type { PlacedObject } from "@/lib/types/planner.types" + +interface AdvancedObjectInspectorProps { + objectId: string | null +} + +export function AdvancedObjectInspector({ objectId }: AdvancedObjectInspectorProps) { + const { + placedObjects, + updateObject, + removeObject, + duplicateObject, + lockObject, + toggleVisibility, + getObjectById, + getChildObjects, + } = usePlannerStore() + + const [activeTab, setActiveTab] = useState("transform") + const object = objectId ? getObjectById(objectId) : null + + if (!object) { + return ( +
+ +

Select an object to inspect

+
+ ) + } + + const children = getChildObjects(object.id) + + return ( +
+ {/* Header */} +
+
+

{object.name}

+
+ + +
+
+ +
+ {object.isGroup && Group} + {object.locked && Locked} + {object.layer} +
+
+ + {/* Quick Actions */} +
+ + +
+ + {/* Tabs */} + + + + + Transform + + + + Material + + + + Physics + + + + Hierarchy + + + + {/* Transform Tab */} + + +
+ {/* Position */} +
+ +
+ {['x', 'y', 'z'].map((axis, i) => ( +
+ + { + const newPos = [...object.position] as [number, number, number] + newPos[i] = parseFloat(e.target.value) || 0 + updateObject(object.id, { position: newPos }) + }} + className="h-8 text-xs" + step="0.1" + /> +
+ ))} +
+
+ + {/* Rotation */} +
+ +
+ {['x', 'y', 'z'].map((axis, i) => ( +
+ + { + const newRot = [...object.rotation] as [number, number, number] + newRot[i] = (parseFloat(e.target.value) || 0) * Math.PI / 180 + updateObject(object.id, { rotation: newRot }) + }} + className="h-8 text-xs" + step="15" + /> +
+ ))} +
+
+ + {/* Scale */} +
+ +
+ {['x', 'y', 'z'].map((axis, i) => ( +
+ + { + const newScale = [...object.scale] as [number, number, number] + newScale[i] = parseFloat(e.target.value) || 1 + updateObject(object.id, { scale: newScale }) + }} + className="h-8 text-xs" + step="0.1" + min="0.1" + /> +
+ ))} +
+
+ + {/* Dimensions */} + {object.dimensions && ( +
+ +
+
+
Width
+
{object.dimensions.width.toFixed(2)}m
+
+
+
Height
+
{object.dimensions.height.toFixed(2)}m
+
+
+
Depth
+
{object.dimensions.depth.toFixed(2)}m
+
+
+
+ )} +
+ + + + {/* Material Tab */} + + +
+
+ + updateObject(object.id, { opacity: v })} + min={0} + max={1} + step={0.01} + /> +
+ {((object.opacity || 1) * 100).toFixed(0)}% +
+
+ +
+ + updateObject(object.id, { castShadow: e.target.checked })} + className="rounded" + /> +
+ +
+ + updateObject(object.id, { receiveShadow: e.target.checked })} + className="rounded" + /> +
+
+ + + + {/* Physics Tab */} + + +
+
+ Physics properties and collision settings +
+ + + +
+ Physics simulation for realistic interactions +
+
+ + + + {/* Hierarchy Tab */} + + +
+ {object.isGroup && ( +
+ +
+ {children.map((child) => ( +
+ {child.name} + +
+ ))} +
+
+ )} + + {object.elements && object.elements.length > 0 && ( +
+ +
+ {object.elements.map((element) => ( +
+
{element.name}
+ {element.parts.length > 0 && ( +
+ {element.parts.length} parts +
+ )} +
+ ))} +
+
+ )} + + + +
+ +
+ {object.tags && object.tags.length > 0 ? ( + object.tags.map((tag, i) => ( + + {tag} + + )) + ) : ( +
No tags
+ )} +
+
+
+ + + + + {/* Footer Info */} +
+
+ Price: + {object.price.toLocaleString()} Ft +
+ {object.productId && ( +
+ Product ID: + {object.productId.slice(0, 8)}... +
+ )} +
+
+ ) +} + diff --git a/apps/fabrikanabytok/components/planner/advanced-post-processing.tsx b/apps/fabrikanabytok/components/planner/advanced-post-processing.tsx new file mode 100644 index 0000000..21f6e10 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-post-processing.tsx @@ -0,0 +1,38 @@ +"use client" + +/** + * Advanced Post-Processing Effects System + * Optimized for production use + */ + +import { Bloom, Vignette, ToneMapping, EffectComposer } from "@react-three/postprocessing" +import { ToneMappingMode } from "postprocessing" +import type { RenderSettings } from "@/lib/types/planner.types" + +interface AdvancedPostProcessingProps { + renderSettings: RenderSettings + enabled?: boolean + children?: React.ReactNode | undefined + children2?: {length: number} | undefined +} + +export function AdvancedPostProcessing({ renderSettings, enabled = true, children, children2 }: AdvancedPostProcessingProps) { + // Only enable post-processing for preview and above + const shouldRender = enabled && renderSettings?.postProcessing && renderSettings?.quality !== "draft" + + if (!shouldRender) { + return null + } + + const multisampling = renderSettings?.quality === "ultra" ? 8 : renderSettings?.quality === "high" ? 4 : 2 + + return ( + + + {renderSettings?.quality !== "preview" && ( + + )} + + + ) +} \ No newline at end of file diff --git a/apps/fabrikanabytok/components/planner/advanced-shopping-list.tsx b/apps/fabrikanabytok/components/planner/advanced-shopping-list.tsx new file mode 100644 index 0000000..3dc0699 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-shopping-list.tsx @@ -0,0 +1,568 @@ +"use client" + +import { useState, useMemo } from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { Checkbox } from "@/components/ui/checkbox" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Separator } from "@/components/ui/separator" +import { + ShoppingCart, + Package, + Truck, + Calendar, + DollarSign, + AlertTriangle, + CheckCircle, + RefreshCw, + Download, + Mail, + Printer, + TrendingDown, + Wrench, + Loader2, +} from "lucide-react" +import { toast } from "sonner" +import { cn } from "@/lib/utils" + +interface ShoppingListItem { + id: string + productId: string + productName: string + sku: string + category: string + quantity: number + unitPrice: number + totalPrice: number + inStock: boolean + stockQuantity: number + leadTime?: string + image?: string + selectedColor?: string + selectedMaterial?: string + alternatives?: AlternativeProduct[] +} + +interface AlternativeProduct { + id: string + name: string + price: number + inStock: boolean + similarity: number + savings?: number +} + +interface AdvancedShoppingListProps { + designId: string + items: ShoppingListItem[] + open: boolean + onOpenChange: (open: boolean) => void +} + +export function AdvancedShoppingList({ designId, items, open, onOpenChange }: AdvancedShoppingListProps) { + const [selectedItems, setSelectedItems] = useState(items.map((i) => i.id)) + const [groupBy, setGroupBy] = useState<"category" | "supplier" | "availability">("category") + const [showAlternatives, setShowAlternatives] = useState(false) + const [deliveryDate, setDeliveryDate] = useState(null) + const [includeInstallation, setIncludeInstallation] = useState(false) + const [applyBulkDiscount, setApplyBulkDiscount] = useState(true) + + // Calculate totals + const summary = useMemo(() => { + const selectedItemsData = items.filter((item) => selectedItems.includes(item.id)) + + const subtotal = selectedItemsData.reduce((sum, item) => sum + item.totalPrice, 0) + const bulkDiscount = applyBulkDiscount && subtotal > 500000 ? subtotal * 0.05 : 0 + const shipping = subtotal > 100000 ? 0 : 5000 + const installation = includeInstallation ? 25000 : 0 + const tax = (subtotal - bulkDiscount + shipping + installation) * 0.27 // 27% ÁFA + const total = subtotal - bulkDiscount + shipping + installation + tax + + return { + itemCount: selectedItemsData.length, + subtotal, + bulkDiscount, + shipping, + installation, + tax, + total, + inStock: selectedItemsData.filter((i) => i.inStock).length, + outOfStock: selectedItemsData.filter((i) => !i.inStock).length, + } + }, [items, selectedItems, applyBulkDiscount, includeInstallation]) + + // Group items + const groupedItems = useMemo(() => { + const groups = new Map() + + items.forEach((item) => { + const key = groupBy === "category" + ? item.category + : groupBy === "availability" + ? item.inStock ? "In Stock" : "Out of Stock" + : "Default Supplier" + + if (!groups.has(key)) { + groups.set(key, []) + } + groups.get(key)!.push(item) + }) + + return groups + }, [items, groupBy]) + + const handleAddAllToCart = async () => { + toast.success(`${selectedItems.length} items added to cart!`) + onOpenChange(false) + } + + const handleFindAlternatives = () => { + setShowAlternatives(true) + toast.info("Searching for alternatives...") + } + + const handleOptimizeForBudget = () => { + toast.info("Optimizing for budget...") + } + + const handleExportList = (format: "pdf" | "csv" | "email") => { + toast.success(`Shopping list exported as ${format.toUpperCase()}`) + } + + return ( + + + + + + Shopping List + +
+ {items.length} items + 0 ? "destructive" : "default"}> + {summary.inStock} in stock + + {summary.outOfStock > 0 && ( + {summary.outOfStock} out of stock + )} +
+ + + + + Items ({items.length}) + Delivery & Services + Summary + + + {/* Items Tab */} + + {/* Actions */} +
+
+ + +
+ +
+ + +
+
+ + {/* Items List */} + +
+ {Array.from(groupedItems.entries()).map(([group, groupItems]) => ( +
+

{group}

+
+ {groupItems.map((item) => ( + { + setSelectedItems( + selected + ? [...selectedItems, id] + : selectedItems.filter((i) => i !== id) + ) + }} + showAlternatives={showAlternatives} + /> + ))} +
+
+ ))} +
+ + + + {/* Delivery Tab */} + +
+ {/* Delivery Options */} + +

+ + Delivery Options +

+ +
+
+
+
Standard Delivery
+
3-5 business days
+
+
+
{summary.shipping.toLocaleString()} Ft
+ {summary.shipping === 0 && ( + + Free + + )} +
+
+ +
+
+
Express Delivery
+
1-2 business days
+
+
15,000 Ft
+
+
+ + + {/* Installation Service */} + +
+

+ + Professional Installation +

+ setIncludeInstallation(c as boolean)} + /> +
+ +

+ Expert installation by certified professionals +

+ + {includeInstallation && ( +
+
+ Installation fee: + 25,000 Ft +
+
+ Estimated time: + 1-2 days +
+
+ )} + + + {/* Delivery Schedule */} + +

+ + Schedule Delivery +

+

+ Choose your preferred delivery date +

+ {/* Date picker would go here */} + +
+ + + {/* Summary Tab */} + + +

Order Summary

+ +
+
+ Subtotal ({summary.itemCount} items): + {summary.subtotal.toLocaleString("hu-HU")} Ft +
+ + {summary.bulkDiscount > 0 && ( +
+ + + Bulk Discount (5%): + + -{summary.bulkDiscount.toLocaleString("hu-HU")} Ft +
+ )} + +
+ Shipping: + {summary.shipping > 0 ? `${summary.shipping.toLocaleString("hu-HU")} Ft` : "Free"} +
+ + {includeInstallation && ( +
+ Installation: + 25,000 Ft +
+ )} + +
+ ÁFA (27%): + {summary.tax.toLocaleString("hu-HU")} Ft +
+ + + +
+ Total: + {summary.total.toLocaleString("hu-HU")} Ft +
+
+ + {/* Financing Options */} + {summary.total > 100000 && ( +
+
Financing Available
+

+ Pay in 12 monthly installments of{" "} + {(summary.total / 12).toLocaleString("hu-HU")} Ft +

+
+ )} + + + {/* Stock Warnings */} + {summary.outOfStock > 0 && ( + +
+ +
+
Stock Warning
+

+ {summary.outOfStock} item{summary.outOfStock > 1 ? "s are" : " is"} currently out of stock. + Estimated restock: 2-3 weeks. +

+ +
+
+ + )} + + + + {/* Footer Actions */} +
+
+ + + +
+ +
+ + +
+
+ + + ) +} + +function ShoppingListItemCard({ + item, + isSelected, + onToggle, + showAlternatives, +}: { + item: ShoppingListItem + isSelected: boolean + onToggle: (id: string, selected: boolean) => void + showAlternatives: boolean +}) { + const [showAlt, setShowAlt] = useState(false) + + return ( + +
+ onToggle(item.id, checked as boolean)} + /> + + {/* Image */} +
+ {item.image ? ( + {item.productName} + ) : ( + + )} +
+ + {/* Info */} +
+
+
+

{item.productName}

+

SKU: {item.sku}

+ +
+ + {item.category} + + + {item.selectedColor && ( + + + {item.selectedColor} + + )} + + {item.selectedMaterial && ( + + {item.selectedMaterial} + + )} +
+
+ +
+
{item.totalPrice.toLocaleString("hu-HU")} Ft
+
Qty: {item.quantity}
+
+
+ + {/* Stock Status */} +
+ {item.inStock ? ( + <> + + + In stock ({item.stockQuantity} available) + + + ) : ( + <> + + + Out of stock{item.leadTime && ` - ${item.leadTime}`} + + + )} +
+ + {/* Alternatives */} + {(!item.inStock || showAlternatives) && item.alternatives && item.alternatives.length > 0 && ( +
+ + + {showAlt && ( +
+ {item.alternatives.map((alt) => ( +
+
+
{alt.name}
+
+ {alt.inStock ? ( + + In Stock + + ) : ( + + Out of Stock + + )} + + {(alt.similarity * 100).toFixed(0)}% match + +
+
+
+
{alt.price.toLocaleString("hu-HU")} Ft
+ {alt.savings && alt.savings > 0 && ( +
+ Save {alt.savings.toLocaleString("hu-HU")} Ft +
+ )} + +
+
+ ))} +
+ )} +
+ )} +
+
+ + ) +} + +function handleFindAlternatives() { + toast.info("Searching for alternatives...") +} + +function handleAddAllToCart() { + toast.success("Items added to cart!") +} + +function handleExportList(format: string) { + toast.success(`Exported as ${format}`) +} + +function Palette({ className }: { className?: string }) { + return
🎨
+} + diff --git a/apps/fabrikanabytok/components/planner/advanced-tools-panel.tsx b/apps/fabrikanabytok/components/planner/advanced-tools-panel.tsx new file mode 100644 index 0000000..6372f44 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/advanced-tools-panel.tsx @@ -0,0 +1,181 @@ +"use client" + +/** + * Advanced Tools Panel + * Access to all advanced 3D editing tools + */ + +import { useState } from "react" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Label } from "@/components/ui/label" +import { Slider } from "@/components/ui/slider" +import { + MousePointer2, + Lasso, + Wand2, + BoxSelect, + Magnet, + Grid3x3, + AlignLeft, + AlignRight, + AlignCenter, + Paintbrush, + Sparkles, + Sun, + Cloud, + CloudRain, + CloudSnow, + Zap, + Camera, + Eye, + Box, + Layers, + Move, + RotateCw, + Scale3D, + Scissors, + Copy, + Link, + LayoutGrid +} from "lucide-react" +import { usePlannerStore } from "@/lib/store/planner-store" + +export function AdvancedToolsPanel() { + const [activeCategory, setActiveCategory] = useState<'selection' | 'transform' | 'modeling' | 'effects' | 'camera'>('selection') + const { toolMode, setToolMode } = usePlannerStore() + + const tools = { + selection: [ + { id: 'select', icon: MousePointer2, name: 'Select', hotkey: 'V' }, + { id: 'lasso', icon: Lasso, name: 'Lasso', hotkey: 'L' }, + { id: 'magic-wand', icon: Wand2, name: 'Magic Wand', hotkey: 'W' }, + { id: 'box-select', icon: BoxSelect, name: 'Box Select', hotkey: 'B' }, + ], + transform: [ + { id: 'move', icon: Move, name: 'Move', hotkey: 'G' }, + { id: 'rotate', icon: RotateCw, name: 'Rotate', hotkey: 'R' }, + { id: 'scale', icon: Scale3D, name: 'Scale', hotkey: 'S' }, + { id: 'magnet', icon: Magnet, name: 'Magnetic Snap', hotkey: 'M' }, + ], + modeling: [ + { id: 'extrude', icon: Box, name: 'Extrude', hotkey: 'E' }, + { id: 'bevel', icon: Scissors, name: 'Bevel', hotkey: 'B' }, + { id: 'subdivide', icon: Grid3x3, name: 'Subdivide', hotkey: 'D' }, + { id: 'paint', icon: Paintbrush, name: 'Texture Paint', hotkey: 'P' }, + ], + effects: [ + { id: 'particles', icon: Sparkles, name: 'Particles', hotkey: '' }, + { id: 'weather-clear', icon: Sun, name: 'Clear', hotkey: '' }, + { id: 'weather-cloudy', icon: Cloud, name: 'Cloudy', hotkey: '' }, + { id: 'weather-rain', icon: CloudRain, name: 'Rain', hotkey: '' }, + { id: 'weather-snow', icon: CloudSnow, name: 'Snow', hotkey: '' }, + { id: 'lightning', icon: Zap, name: 'Lightning', hotkey: '' }, + ], + camera: [ + { id: 'camera-orbit', icon: RotateCw, name: 'Orbit', hotkey: '' }, + { id: 'camera-pan', icon: Move, name: 'Pan', hotkey: '' }, + { id: 'camera-fly', icon: Eye, name: 'Fly', hotkey: '' }, + { id: 'camera-animate', icon: Camera, name: 'Animate', hotkey: '' }, + ] + } + + return ( +
+ {/* Header */} +
+

+ + Advanced Tools +

+
+ + {/* Tool Categories */} + setActiveCategory(v)} className="flex-1 flex flex-col"> + + + + Select + + + + Transform + + + + Model + + + + Effects + + + + Camera + + + + {/* Tool Buttons */} + {Object.entries(tools).map(([category, categoryTools]) => ( + +
+ {categoryTools.map((tool) => ( + + ))} +
+ + ))} + + + {/* Alignment Tools */} +
+ +
+ + + +
+
+ + {/* Quick Actions */} +
+ + + +
+
+ ) +} + diff --git a/apps/fabrikanabytok/components/planner/ai-assistant.tsx b/apps/fabrikanabytok/components/planner/ai-assistant.tsx new file mode 100644 index 0000000..c309a31 --- /dev/null +++ b/apps/fabrikanabytok/components/planner/ai-assistant.tsx @@ -0,0 +1,333 @@ +"use client" + +import { useState } from "react" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" +import { Textarea } from "@/components/ui/textarea" +import { + Sparkles, + Wand2, + Lightbulb, + TrendingUp, + AlertTriangle, + Info, + CheckCircle, + Loader2, + MessageSquare, + Layout, + ShoppingBag, +} from "lucide-react" +import { generateKitchenLayout, analyzeDesign, type DesignRecommendation } from "@/lib/actions/ai-planner.actions" +import { usePlannerStore } from "@/lib/store/planner-store" +import { toast } from "sonner" +import type { RoomDimensions } from "@/lib/types/planner.types" +import { cn } from "@/lib/utils" + +interface AIAssistantProps { + designId: string + roomDimensions: RoomDimensions +} + +export function AIAssistant({ designId, roomDimensions }: AIAssistantProps) { + const [loading, setLoading] = useState(false) + const [suggestions, setSuggestions] = useState([]) + const [recommendations, setRecommendations] = useState([]) + const [chatMessages, setChatMessages] = useState>([]) + const [userInput, setUserInput] = useState("") + + const { placedObjects, addObject } = usePlannerStore() + + const handleGenerateLayout = async (style?: string) => { + setLoading(true) + try { + const layouts = await generateKitchenLayout(roomDimensions, style) + setSuggestions(layouts) + toast.success(`${layouts.length} layout suggestions generated!`) + } catch (error: any) { + toast.error(error.message || "Failed to generate layouts") + } finally { + setLoading(false) + } + } + + const handleAnalyzeDesign = async () => { + setLoading(true) + try { + const analysis = await analyzeDesign(designId, placedObjects) + setRecommendations(analysis) + toast.success(`${analysis.length} recommendations found`) + } catch (error: any) { + toast.error(error.message || "Failed to analyze design") + } finally { + setLoading(false) + } + } + + const handleApplyLayout = (layout: any) => { + // Apply the suggested layout + layout.objects.forEach((obj: any) => { + // In production, you'd fetch the actual product and create a proper PlacedObject + toast.info(`Would place: ${obj.name}`) + }) + + toast.success("Layout applied!") + } + + const handleSendMessage = async () => { + if (!userInput.trim()) return + + const newMessages = [ + ...chatMessages, + { role: "user" as const, content: userInput }, + ] + + setChatMessages(newMessages) + setUserInput("") + setLoading(true) + + try { + // In production, this would call AI chat endpoint + const response = "I can help you design your kitchen! Try asking me about layout suggestions, style recommendations, or design best practices." + + setChatMessages([ + ...newMessages, + { role: "assistant", content: response }, + ]) + } catch (error: any) { + toast.error("Failed to get response") + } finally { + setLoading(false) + } + } + + return ( +
+ {/* Header */} +
+
+ +

AI Design Assistant

+ + + Powered by AI + +
+

+ Get intelligent suggestions and design analysis +

+
+ + {/* Quick Actions */} +
+ + + +
+ + {/* Recommendations */} + {recommendations.length > 0 && ( +
+

+ + Recommendations ({recommendations.length}) +

+ +
+ {recommendations.map((rec, index) => ( + + ))} +
+ +
+ )} + + {/* Layout Suggestions */} + {suggestions.length > 0 && ( +
+

Layout Suggestions ({suggestions.length})

+
+ {suggestions.map((layout, index) => ( + +
+
+
+
{layout.name}
+

{layout.description}

+
+ {layout.style} +
+ +
+
+
+
+ {(layout.confidence * 100).toFixed(0)}% match +
+ +

+ {layout.reasoning} +

+ +
+ + +
+
+ + ))} +
+
+ )} + + {/* AI Chat */} +
+
+

+ + Ask AI Assistant +

+
+ + +
+ {chatMessages.length === 0 ? ( +
+ +

Ask me anything about kitchen design!

+
+ + +
+
+ ) : ( + chatMessages.map((msg, index) => ( +
+ {msg.content} +
+ )) + )} +
+ + +
+
+