Improve the UI and tests

frontend/src/pages/app/DashboardPage.tsx

@@ -36,6 +36,7 @@ import { ActionQueueCard } from '../../components/dashboard/ActionQueueCard';
 import { OrchestrationSummaryCard } from '../../components/dashboard/OrchestrationSummaryCard';
 import { ProductionTimelineCard } from '../../components/dashboard/ProductionTimelineCard';
 import { InsightsGrid } from '../../components/dashboard/InsightsGrid';
+import { PurchaseOrderDetailsModal } from '../../components/dashboard/PurchaseOrderDetailsModal';
 import { UnifiedAddWizard } from '../../components/domain/unified-wizard';
 import type { ItemType } from '../../components/domain/unified-wizard';
 import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
@@ -52,6 +53,10 @@ export function NewDashboardPage() {
   const [isAddWizardOpen, setIsAddWizardOpen] = useState(false);
   const [addWizardError, setAddWizardError] = useState<string | null>(null);
 
+  // PO Details Modal state
+  const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
+  const [isPOModalOpen, setIsPOModalOpen] = useState(false);
+
   // Data fetching
   const {
     data: healthStatus,
@@ -113,11 +118,13 @@ export function NewDashboardPage() {
   };
 
   const handleViewDetails = (actionId: string) => {
-    // Navigate to appropriate detail page based on action type
-    navigate(`/app/operations/procurement`);
+    // Open modal to show PO details
+    setSelectedPOId(actionId);
+    setIsPOModalOpen(true);
   };
 
   const handleModify = (actionId: string) => {
+    // Navigate to procurement page for modification
     navigate(`/app/operations/procurement`);
   };
 
@@ -327,6 +334,21 @@ export function NewDashboardPage() {
         onClose={() => setIsAddWizardOpen(false)}
         onComplete={handleAddWizardComplete}
       />
+
+      {/* Purchase Order Details Modal */}
+      {selectedPOId && (
+        <PurchaseOrderDetailsModal
+          poId={selectedPOId}
+          tenantId={tenantId}
+          isOpen={isPOModalOpen}
+          onClose={() => {
+            setIsPOModalOpen(false);
+            setSelectedPOId(null);
+          }}
+          onApprove={handleApprove}
+          onModify={handleModify}
+        />
+      )}
     </div>
   );
 }