diff --git a/src/components/XRHud.tsx b/src/components/XRHud.tsx index 83ea382..cd8326e 100644 --- a/src/components/XRHud.tsx +++ b/src/components/XRHud.tsx @@ -2,23 +2,26 @@ import { useState } from 'react'; import { Eye, LayoutGrid, Grid3X3, Box, Ruler, Trash2, Camera, Move, RotateCw, RefreshCw, ChevronUp, ChevronDown, Grip, + ClipboardCheck, X, } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Slider } from '@/components/ui/slider'; +import { ScrollArea } from '@/components/ui/scroll-area'; import { useModelStore } from '@/stores/useModelStore'; +import { InspectionChecklist } from '@/components/InspectionChecklist'; import { toast } from 'sonner'; const POSITION_STEP = 0.001; const ROTATION_STEP = 0.1; interface XRHudProps { - /** Whether joystick moves model freely (without grip) */ freeMove: boolean; onToggleFreeMove: () => void; } export function XRHud({ freeMove, onToggleFreeMove }: XRHudProps) { const [expanded, setExpanded] = useState(false); + const [checklistOpen, setChecklistOpen] = useState(false); const { opacity, setOpacity, @@ -28,8 +31,13 @@ export function XRHud({ freeMove, onToggleFreeMove }: XRHudProps) { measurements, clearMeasurements, measurePoints, fineTuning, setFineTuning, resetFineTuning, addScreenshot, + checklist, } = useModelStore(); + const approved = checklist.filter(i => i.status === 'approved').length; + const rejected = checklist.filter(i => i.status === 'rejected').length; + const total = checklist.length; + const handleScreenshot = () => { const canvas = document.querySelector('canvas'); if (!canvas) return; @@ -39,133 +47,175 @@ export function XRHud({ freeMove, onToggleFreeMove }: XRHudProps) { }; return ( -
-
- {/* Expanded panel */} - {expanded && ( -
- {/* Opacity */} -
-
-
- - Opacidade -
- {Math.round(opacity * 100)}% -
- setOpacity(v / 100)} - /> + <> + {/* ── Slide-out checklist panel ── */} +
+
+
+
+ + Inspeção
- - {/* Fine Tuning */} -
-
-
- - Posição (mm) -
- -
-
- {(['posX', 'posY', 'posZ'] as const).map((axis) => ( -
- {axis.slice(-1).toUpperCase()} - - - {(fineTuning[axis] * 1000).toFixed(1)} - - -
- ))} -
-
- - - - - {fineTuning.rotY.toFixed(1)} - - -
+
+ {/* Progress badge */} + + {approved + rejected}/{total} + +
- )} + +
+ +
+
+
+
- {/* Main toolbar */} -
-
- {/* Expand/collapse */} - + {/* ── Bottom HUD ── */} +
+
+ {/* Expanded panel */} + {expanded && ( +
+ {/* Opacity */} +
+
+
+ + Opacidade +
+ {Math.round(opacity * 100)}% +
+ setOpacity(v / 100)} + /> +
- {/* Free move toggle */} - + {/* Fine Tuning */} +
+
+
+ + Posição (mm) +
+ +
+
+ {(['posX', 'posY', 'posZ'] as const).map((axis) => ( +
+ {axis.slice(-1).toUpperCase()} + + + {(fineTuning[axis] * 1000).toFixed(1)} + + +
+ ))} +
+
+ + + + + {fineTuning.rotY.toFixed(1)} + + +
+
+
+ )} - {/* Grid */} - - - {/* Render mode */} - - - {/* Measure */} - - - {measurements.length > 0 && ( - - )} - {/* Screenshot */} - + + + + + + + + + {measurements.length > 0 && ( + + )} + + + + {/* Checklist toggle */} + +
-
+ ); }