feat: add deep linking to 3D map from metrc dashboard and show plant history

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<Floor3DData | null>(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<CameraControls | null>(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 {

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<Date | null>(null);
+    const [selectedHistoryPlant, setSelectedHistoryPlant] = useState<any | null>(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'
+                            ? 'bg-primary text-primary shadow-sm'
-                                : 'text-secondary hover:text-primary'
+                            : 'text-secondary hover:text-primary'
                             }`}
                     >
                         {tab.label}
@@ -343,13 +344,14 @@ export default function MetrcDashboardPage() {
                                                     <th className="text-left p-3 font-medium text-secondary">Section</th>
                                                     <th className="text-left p-3 font-medium text-secondary">Position</th>
                                                     <th className="text-center p-3 font-medium text-secondary">Status</th>
+                                                    <th className="text-right p-3 font-medium text-secondary">Actions</th>
                                                 </tr>
                                             </thead>
                                             <tbody className="divide-y divide-subtle">
                                                 {filteredPlants.slice(0, 50).map((plant) => (
                                                     <tr key={plant.plantId} className="hover:bg-secondary/50">
-                                                        <td className="p-3 font-mono text-xs">{plant.tagNumber}</td>
+                                                        <td className="p-3 font-mono text-xs font-bold">{plant.tagNumber}</td>
-                                                        <td className="p-3 font-mono text-xs text-accent">{plant.location}</td>
+                                                        <td className="p-3 font-mono text-xs text-accent">{plant.location || '-'}</td>
                                                         <td className="p-3">{plant.room}</td>
                                                         <td className="p-3">{plant.section || '-'}</td>
                                                         <td className="p-3">{plant.position || '-'}</td>
@@ -359,6 +361,24 @@ export default function MetrcDashboardPage() {
                                                                 Synced
                                                             </span>
                                                         </td>
+                                                        <td className="p-3 text-right">
+                                                            <div className="flex items-center justify-end gap-2">
+                                                                <button
+                                                                    onClick={() => setSelectedHistoryPlant(plant)}
+                                                                    className="btn btn-ghost btn-sm btn-square"
+                                                                    title="View History"
+                                                                >
+                                                                    <Clock size={16} className="text-tertiary" />
+                                                                </button>
+                                                                <Link
+                                                                    to={`/facility/3d?plant=${plant.tagNumber}`}
+                                                                    className="btn btn-ghost btn-sm btn-square text-accent"
+                                                                    title="View in 3D"
+                                                                >
+                                                                    <Box size={16} />
+                                                                </Link>
+                                                            </div>
+                                                        </td>
                                                     </tr>
                                                 ))}
                                             </tbody>
@@ -451,6 +471,80 @@ export default function MetrcDashboardPage() {
                     )}
                 </>
             )}
+            {/* Plant History Modal */}
+            {selectedHistoryPlant && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in">
+                    <div className="card w-full max-w-2xl max-h-[80vh] flex flex-col shadow-2xl animate-in zoom-in-95">
+                        <div className="p-4 border-b border-subtle flex justify-between items-center">
+                            <div>
+                                <h3 className="text-lg font-bold text-primary">Plant History</h3>
+                                <p className="text-sm text-accent font-mono">{selectedHistoryPlant.tagNumber}</p>
+                            </div>
+                            <button
+                                onClick={() => setSelectedHistoryPlant(null)}
+                                className="btn btn-ghost btn-sm btn-square"
+                            >
+                                <XCircle size={20} />
+                            </button>
+                        </div>
+
+                        <div className="p-0 overflow-y-auto flex-1">
+                            {/* Current Status */}
+                            <div className="p-4 bg-secondary border-b border-subtle grid grid-cols-2 gap-4 text-sm">
+                                <div>
+                                    <p className="text-tertiary text-xs uppercase tracking-wider">Current Room</p>
+                                    <p className="font-medium text-primary">{selectedHistoryPlant.room}</p>
+                                </div>
+                                <div>
+                                    <p className="text-tertiary text-xs uppercase tracking-wider">Current Section</p>
+                                    <p className="font-medium text-primary">{selectedHistoryPlant.section || 'N/A'}</p>
+                                </div>
+                            </div>
+
+                            {/* Timeline */}
+                            <div className="p-4">
+                                <h4 className="text-sm font-medium text-tertiary mb-4 uppercase tracking-wider">Movement Log</h4>
+                                {audit?.recentMoves.filter((m: any) => m.plantTag === selectedHistoryPlant.tagNumber).length === 0 ? (
+                                    <div className="text-center py-8 text-tertiary bg-secondary/30 rounded-lg">
+                                        <Clock className="mx-auto mb-2 opacity-30" />
+                                        <p>No recorded movements found for this plant.</p>
+                                    </div>
+                                ) : (
+                                    <ol className="relative border-s border-gray-200 dark:border-gray-700 ms-3 space-y-6">
+                                        {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) => (
+                                                <li key={i} className="mb-10 ms-4">
+                                                    <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
+                                                    <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+                                                        {new Date(move.movedAt).toLocaleString()}
+                                                    </time>
+                                                    <h3 className="text-sm font-semibold text-gray-900 dark:text-white mt-1">
+                                                        Moved to <span className="text-accent">{move.to}</span>
+                                                    </h3>
+                                                    <p className="mb-4 text-sm font-normal text-gray-500 dark:text-gray-400">
+                                                        From {move.from} • Reason: {move.reason || 'Routine Maintenance'}
+                                                    </p>
+                                                </li>
+                                            ))}
+                                    </ol>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="p-4 border-t border-subtle bg-secondary/50 flex justify-end">
+                            <Link
+                                to={`/facility/3d?plant=${selectedHistoryPlant.tagNumber}`}
+                                className="btn btn-primary btn-sm"
+                            >
+                                <Box size={16} className="mr-2" />
+                                Locate in 3D
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }