feat: Add door feature to FloorPlanEditor with related room connections

- Updated DrawnFeature type to include 'door' and relatedRoomIds.
- Modified fetchFloorFeatures to load door features and handle geometry.
- Enhanced EditorCanvas to render door markers and icons.
- Updated EditorSidebar to display features and manage door connections.
- Added door properties management in PropertyPanel.
- Introduced new button in EditorToolbar for placing doors.
- Improved CalibrationModal with copy URL functionality.
- Enhanced styles for better UI/UX.

Author: marcebd

apps/admin/src/pages/Calibration.tsx

@@ -21,12 +21,13 @@ type FeatureType = 'room' | 'office' | 'hallway' | 'bathroom' | 'stairs' | 'elev
 
 interface DrawnFeature {
   id: string;
-  type: 'polygon';
+  type: 'polygon' | 'door';
   featureType: FeatureType;
-  points: number[]; // [x1, y1, x2, y2, ...]
+  points: number[]; // [x1, y1, x2, y2, ...] for polygon or [x, y] for door
   name: string;
   accessible: boolean;
   calibrated: boolean;
+  relatedRoomIds?: string[]; // For doors: which rooms they connect to
 }
 
 export default function FloorPlanEditor() {
@@ -85,26 +86,36 @@ export default function FloorPlanEditor() {
       return;
     }
 
-    fetchFloorFeatures(selectedFloor.id, ['space'])
+    fetchFloorFeatures(selectedFloor.id, ['space', 'door'])
       .then((collection: any) => {
         const loadedFeatures: DrawnFeature[] = collection.features.map((feature: any) => {
           const props = feature.properties as any;
           let points: number[] = [];
+          let featureType = (props.featureType || props.category || 'room') as FeatureType;
+          let type: 'polygon' | 'door' = 'polygon';
 
-          if (feature.geometry.type === 'Polygon' && feature.geometry.coordinates.length > 0) {
+          // Handle door features (Point geometry) - loaded globally
+          if (feature.geometry.type === 'Point') {
+            points = [feature.geometry.coordinates[0], feature.geometry.coordinates[1]];
+            featureType = 'door';
+            type = 'door';
+          }
+          // Handle polygon features (rooms)
+          else if (feature.geometry.type === 'Polygon' && feature.geometry.coordinates.length > 0) {
             const ring = feature.geometry.coordinates[0];
             const coords = ring.slice(0, -1);
             points = coords.flatMap((coord: any) => [coord[0], coord[1]]);
           }
 
           return {
             id: props.id || crypto.randomUUID(),
-            type: 'polygon' as const,
-            featureType: (props.featureType || props.category || 'room') as FeatureType,
+            type,
+            featureType,
             points,
             name: props.name || props.roomName || '',
             accessible: props.accessible || false,
             calibrated: props.calibrated || false,
+            relatedRoomIds: props.relatedRoomIds || [], // Doors can reference rooms
           };
         });
         setFeatures(loadedFeatures);
@@ -120,12 +131,31 @@ export default function FloorPlanEditor() {
       const featureCollection = {
         type: 'FeatureCollection' as const,
         features: features.map((feature) => {
-          // Convert points array to polygon coordinates
+          // Handle door features (Point geometry)
+          if (feature.type === 'door') {
+            return {
+              type: 'Feature' as const,
+              geometry: {
+                type: 'Point' as const,
+                coordinates: [feature.points[0], feature.points[1]] as [number, number],
+              },
+              properties: {
+                id: feature.id,
+                layer: 'door' as const,
+                name: feature.name,
+                featureType: 'door' as const,
+                accessible: feature.accessible,
+                calibrated: feature.calibrated,
+                relatedRoomIds: feature.relatedRoomIds || [], // Reference to connected rooms
+              },
+            };
+          }
+          
+          // Handle polygon features
           const coordinates: [number, number][] = [];
           for (let i = 0; i < feature.points.length; i += 2) {
-            coordinates.push([feature.points[i], feature.points[i + 1]]);
+            coordinates.push([feature.points[i], feature.points[i + 1]] as [number, number]);
           }
-          // Close the polygon by adding first point at the end
           if (coordinates.length > 0) {
             coordinates.push(coordinates[0]);
           }
@@ -146,7 +176,7 @@ export default function FloorPlanEditor() {
             },
           };
         }),
-      };
+      } as any;
 
       saveFloorFeatures(selectedFloor.id, featureCollection)
         .then(() => console.log('Features auto-saved'))
@@ -222,6 +252,23 @@ export default function FloorPlanEditor() {
     if (drawMode === 'polygon') {
       setCurrentPoints([...currentPoints, x, y]);
       setIsDrawing(true);
+    } else if (drawMode === 'door') {
+      // Place a door at the clicked location
+      const newDoor: DrawnFeature = {
+        id: crypto.randomUUID(),
+        type: 'door',
+        featureType: 'door',
+        points: [x, y],
+        name: `Door ${features.filter(f => f.featureType === 'door').length + 1}`,
+        accessible: false,
+        calibrated: false,
+      };
+      
+      setFeatures([...features, newDoor]);
+      setDrawMode('select');
+      setSelectedFeatureId(newDoor.id);
+      setFeatureName(newDoor.name);
+      setFeatureType('door');
     }
   };
 
@@ -308,6 +355,13 @@ export default function FloorPlanEditor() {
   const handleVertexDrag = (featureId: string, vertexIndex: number, x: number, y: number) => {
     setFeatures(features.map(f => {
       if (f.id !== featureId) return f;
+      
+      // Handle door features (single point)
+      if (f.type === 'door') {
+        return { ...f, points: [x, y] };
+      }
+      
+      // Handle polygon features
       const newPoints = [...f.points];
       newPoints[vertexIndex * 2] = x;
       newPoints[vertexIndex * 2 + 1] = y;

apps/admin/src/pages/FloorPlanEditor.tsx

@@ -16,6 +16,15 @@ const CalibrationModal: React.FC<CalibrationModalProps> = ({
 }) => {
   if (!isOpen) return null;
 
+  const handleOpenCalibration = () => {
+    window.open(calibrationUrl, '_blank');
+  };
+
+  const handleCopyUrl = () => {
+    navigator.clipboard.writeText(calibrationUrl);
+    alert('Calibration URL copied to clipboard!');
+  };
+
   return (
     <div className="modal-overlay">
       <div className="modal-content" style={{ maxWidth: '500px', textAlign: 'center' }}>
@@ -25,23 +34,65 @@ const CalibrationModal: React.FC<CalibrationModalProps> = ({
           Walk to each corner of the room and capture the GPS coordinates.
         </p>
 
-        <div style={{ background: 'white', padding: '20px', display: 'inline-block', borderRadius: '10px', marginBottom: '20px' }}>
-          <QRCode value={calibrationUrl} size={200} />
+        <div style={{ background: '#f8f9fa', padding: '20px', display: 'inline-block', borderRadius: '10px', marginBottom: '20px', border: '2px solid #e9ecef' }}>
+          <QRCode value={calibrationUrl} size={200} level="H" includeMargin={true} />
         </div>
 
-        <div className="input-group" style={{ marginBottom: '20px' }}>
-          <input 
-            type="text" 
-            readOnly 
-            value={calibrationUrl} 
-            onClick={(e) => e.currentTarget.select()}
-            style={{ textAlign: 'center', width: '100%' }}
-          />
+        <div style={{ marginBottom: '20px' }}>
+          <p style={{ fontSize: '0.85rem', color: '#7f8c8d', marginBottom: '10px' }}>Or use this link:</p>
+          <div className="input-group" style={{ marginBottom: '10px' }}>
+            <input 
+              type="text" 
+              readOnly 
+              value={calibrationUrl} 
+              onClick={(e) => e.currentTarget.select()}
+              style={{ textAlign: 'center', flex: 1 }}
+            />
+            <button 
+              onClick={handleCopyUrl}
+              style={{
+                padding: '0.75rem 1rem',
+                backgroundColor: '#95a5a6',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
+            >
+              Copy
+            </button>
+          </div>
         </div>
 
-        <div className="flex justify-end">
-          <button className="btn btn-primary" onClick={onClose}>
-            Done
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <button 
+            onClick={handleOpenCalibration}
+            style={{
+              flex: 1,
+              padding: '0.75rem 1.5rem',
+              backgroundColor: '#3498db',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              fontWeight: 'bold'
+            }}
+          >
+            Open Calibration
+          </button>
+          <button 
+            onClick={onClose}
+            style={{
+              flex: 1,
+              padding: '0.75rem 1.5rem',
+              backgroundColor: '#95a5a6',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer'
+            }}
+          >
+            Close
           </button>
         </div>
       </div>

apps/admin/src/pages/FloorPlanEditor/CalibrationModal.tsx

@@ -1,4 +1,4 @@
-import { Stage, Layer, Image as KonvaImage, Line, Circle, Group } from 'react-konva';
+import { Stage, Layer, Image as KonvaImage, Line, Circle, Group, Rect, Text } from 'react-konva';
 
 type DrawMode = 'select' | 'polygon' | 'door';
 
@@ -56,6 +56,63 @@ const EditorCanvas: React.FC<EditorCanvasProps> = ({
         {/* Drawn Features */}
         {features.map((feature) => {
           const isSelected = feature.id === selectedFeatureId;
+          
+          // Handle door features (single point)
+          if (feature.type === 'door') {
+            const [x, y] = feature.points;
+            return (
+              <Group
+                key={feature.id}
+                onClick={(e) => {
+                  if (drawMode === 'select') {
+                    e.cancelBubble = true;
+                    onFeatureClick(feature.id);
+                  }
+                }}
+              >
+                {/* Door marker */}
+                <Rect
+                  x={x - 8 / scale}
+                  y={y - 8 / scale}
+                  width={16 / scale}
+                  height={16 / scale}
+                  fill={isSelected ? '#dc2626' : '#ef4444'}
+                  stroke="white"
+                  strokeWidth={2 / scale}
+                  cornerRadius={3 / scale}
+                />
+                
+                {/* Door icon/label */}
+                <Text
+                  x={x - 4 / scale}
+                  y={y - 4 / scale}
+                  text="🚪"
+                  fontSize={12 / scale}
+                  width={8 / scale}
+                  height={8 / scale}
+                />
+                
+                {/* Draggable handle when selected */}
+                {isSelected && drawMode === 'select' && (
+                  <Circle
+                    x={x}
+                    y={y}
+                    radius={6 / scale}
+                    fill="#fff"
+                    stroke="#dc2626"
+                    strokeWidth={2 / scale}
+                    draggable
+                    onDragMove={(e) => {
+                      const node = e.target;
+                      onVertexDrag(feature.id, 0, node.x(), node.y());
+                    }}
+                  />
+                )}
+              </Group>
+            );
+          }
+          
+          // Handle polygon features
           return (
             <Group
               key={feature.id}
@@ -102,7 +159,7 @@ const EditorCanvas: React.FC<EditorCanvasProps> = ({
         })}
 
         {/* Current Drawing */}
-        {currentPoints.length > 0 && (
+        {currentPoints.length > 0 && drawMode !== 'door' && (
           <>
             <Line
               points={currentPoints}