Improve backend

frontend/src/pages/app/DashboardPage.tsx

@@ -37,6 +37,7 @@ import { OrchestrationSummaryCard } from '../../components/dashboard/Orchestrati
 import { ProductionTimelineCard } from '../../components/dashboard/ProductionTimelineCard';
 import { InsightsGrid } from '../../components/dashboard/InsightsGrid';
 import { PurchaseOrderDetailsModal } from '../../components/dashboard/PurchaseOrderDetailsModal';
+import { ModifyPurchaseOrderModal } from '../../components/domain/procurement/ModifyPurchaseOrderModal';
 import { UnifiedAddWizard } from '../../components/domain/unified-wizard';
 import type { ItemType } from '../../components/domain/unified-wizard';
 import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
@@ -57,6 +58,10 @@ export function NewDashboardPage() {
   const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
   const [isPOModalOpen, setIsPOModalOpen] = useState(false);
 
+  // PO Modify Modal state
+  const [modifyPOId, setModifyPOId] = useState<string | null>(null);
+  const [isModifyPOModalOpen, setIsModifyPOModalOpen] = useState(false);
+
   // Data fetching
   const {
     data: healthStatus,
@@ -124,8 +129,9 @@ export function NewDashboardPage() {
   };
 
   const handleModify = (actionId: string) => {
-    // Navigate to procurement page for modification
-    navigate(`/app/operations/procurement`);
+    // Open modal to modify PO
+    setModifyPOId(actionId);
+    setIsModifyPOModalOpen(true);
   };
 
   const handleStartBatch = async (batchId: string) => {
@@ -209,7 +215,7 @@ export function NewDashboardPage() {
   }, [isDemoMode, startTour]);
 
   return (
-    <div className="min-h-screen pb-20 md:pb-8" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+    <div className="min-h-screen pb-20 md:pb-8">
       {/* Mobile-optimized container */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         {/* Header */}
@@ -307,7 +313,7 @@ export function NewDashboardPage() {
           </div>
 
           {/* SECTION 6: Quick Action Links */}
-          <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
+          <div className="rounded-xl shadow-lg p-6 border" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
             <h2 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>{t('dashboard:sections.quick_actions')}</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
               <button
@@ -374,6 +380,23 @@ export function NewDashboardPage() {
           onModify={handleModify}
         />
       )}
+
+      {/* Modify Purchase Order Modal */}
+      {modifyPOId && (
+        <ModifyPurchaseOrderModal
+          poId={modifyPOId}
+          isOpen={isModifyPOModalOpen}
+          onClose={() => {
+            setIsModifyPOModalOpen(false);
+            setModifyPOId(null);
+          }}
+          onSuccess={() => {
+            setIsModifyPOModalOpen(false);
+            setModifyPOId(null);
+            handleRefreshAll();
+          }}
+        />
+      )}
     </div>
   );
 }