From 36f3cbab5e5aa873197adf65c4c552542f8dece8 Mon Sep 17 00:00:00 2001 From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com> Date: Wed, 17 Dec 2025 22:40:24 -0800 Subject: [PATCH] feat: add deep linking to 3D map from metrc dashboard and show plant history --- frontend/src/pages/Facility3DViewerPage.tsx | 55 ++++++++++ frontend/src/pages/MetrcDashboardPage.tsx | 106 ++++++++++++++++++-- 2 files changed, 155 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/Facility3DViewerPage.tsx b/frontend/src/pages/Facility3DViewerPage.tsx index 907f79d..1445e1c 100644 --- a/frontend/src/pages/Facility3DViewerPage.tsx +++ b/frontend/src/pages/Facility3DViewerPage.tsx @@ -275,6 +275,8 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls }: { ); } +import { useSearchParams } from 'react-router-dom'; + export default function Facility3DViewerPage() { const [status, setStatus] = useState('Initializing...'); const [floorData, setFloorData] = useState(null); @@ -282,10 +284,63 @@ export default function Facility3DViewerPage() { const [targetView, setTargetView] = useState<{ x: number, y: number, z: number, zoom?: boolean } | null>(null); const [controls, setControls] = useState(null); + // URL Params for deep linking + const [searchParams] = useSearchParams(); + const targetedPlantTag = searchParams.get('plant'); + useEffect(() => { loadData(); }, []); + // Effect to handle deep linking once data is loaded + useEffect(() => { + if (floorData && targetedPlantTag) { + // Find the plant in the data + let foundPlant: any = null; + let foundRoom: any = null; + + // Search through all rooms and sections + for (const room of floorData.rooms) { + for (const section of room.sections) { + const match = section.positions.find(p => p.plant?.tagNumber === targetedPlantTag); + if (match) { + foundPlant = match; + foundRoom = room; + break; + } + } + if (foundPlant) break; + } + + if (foundPlant && foundRoom) { + // Focus on the room first + const offsetX = -floorData.floor.width / 2; + const offsetZ = -floorData.floor.height / 2; + + // Calculate exact plant position + // section pos + relative plant pos + // But foundPlant is just the raw position data from the API, it doesn't have the calculated x/y/z from the render loop unless we process it. + + // We need to re-calculate the absolute coordinates here to be safe, or move this logic to a helper + // Current simplistic approach: Focus the Room + + // Select the plant to show the overlay + setSelectedPlant(foundPlant); + + // Animate camera to the room + const roomCenterX = foundRoom.posX + (foundRoom.width / 2) + offsetX; + const roomCenterZ = foundRoom.posY + (foundRoom.height / 2) + offsetZ; + + setTargetView({ x: roomCenterX, y: 0, z: roomCenterZ, zoom: true }); + + // Optional: slight delay then zoom closer? + console.log(`Deep link found plant: ${targetedPlantTag} in ${foundRoom.name}`); + } else { + console.warn(`Plant ${targetedPlantTag} not found in 3D data.`); + } + } + }, [floorData, targetedPlantTag]); + async function loadData() { setStatus('Loading layout...'); try { diff --git a/frontend/src/pages/MetrcDashboardPage.tsx b/frontend/src/pages/MetrcDashboardPage.tsx index 1bf1999..05f57a2 100644 --- a/frontend/src/pages/MetrcDashboardPage.tsx +++ b/frontend/src/pages/MetrcDashboardPage.tsx @@ -1,8 +1,8 @@ -import { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; import { Cloud, CloudOff, RefreshCw, Download, AlertTriangle, CheckCircle, XCircle, Clock, MapPin, ArrowUpDown, - FileText, Loader2, ExternalLink, Filter + FileText, Loader2, ExternalLink, Filter, Box } from 'lucide-react'; import { metrcApi, MetrcLocation, MetrcDiscrepancy, MetrcReportResponse, MetrcAuditResponse } from '../lib/metrcApi'; import { PageHeader, EmptyState, CardSkeleton } from '../components/ui/LinearPrimitives'; @@ -29,6 +29,7 @@ export default function MetrcDashboardPage() { const [activeTab, setActiveTab] = useState<'overview' | 'plants' | 'audit'>('overview'); const [searchTerm, setSearchTerm] = useState(''); const [lastSync, setLastSync] = useState(null); + const [selectedHistoryPlant, setSelectedHistoryPlant] = useState(null); useEffect(() => { loadData(); @@ -163,8 +164,8 @@ export default function MetrcDashboardPage() { key={tab.id} onClick={() => setActiveTab(tab.id as any)} className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${activeTab === tab.id - ? 'bg-primary text-primary shadow-sm' - : 'text-secondary hover:text-primary' + ? 'bg-primary text-primary shadow-sm' + : 'text-secondary hover:text-primary' }`} > {tab.label} @@ -343,13 +344,14 @@ export default function MetrcDashboardPage() { Section Position Status + Actions {filteredPlants.slice(0, 50).map((plant) => ( - {plant.tagNumber} - {plant.location} + {plant.tagNumber} + {plant.location || '-'} {plant.room} {plant.section || '-'} {plant.position || '-'} @@ -359,6 +361,24 @@ export default function MetrcDashboardPage() { Synced + +
+ + + + +
+ ))} @@ -451,6 +471,80 @@ export default function MetrcDashboardPage() { )} )} + {/* Plant History Modal */} + {selectedHistoryPlant && ( +
+
+
+
+

Plant History

+

{selectedHistoryPlant.tagNumber}

+
+ +
+ +
+ {/* Current Status */} +
+
+

Current Room

+

{selectedHistoryPlant.room}

+
+
+

Current Section

+

{selectedHistoryPlant.section || 'N/A'}

+
+
+ + {/* Timeline */} +
+

Movement Log

+ {audit?.recentMoves.filter((m: any) => m.plantTag === selectedHistoryPlant.tagNumber).length === 0 ? ( +
+ +

No recorded movements found for this plant.

+
+ ) : ( +
    + {audit?.recentMoves + .filter((m: any) => m.plantTag === selectedHistoryPlant.tagNumber) + .sort((a: any, b: any) => new Date(b.movedAt).getTime() - new Date(a.movedAt).getTime()) + .map((move: any, i: number) => ( +
  1. +
    + +

    + Moved to {move.to} +

    +

    + From {move.from} • Reason: {move.reason || 'Routine Maintenance'} +

    +
    2. + ))} +
+ )} +
+
+ +
+ + + Locate in 3D + +
+
+
+ )} ); }