Fix Purchase Order modal and reorganize documentation

Frontend Changes:
- Fix runtime error: Remove undefined handleModify reference from ActionQueueCard in DashboardPage
- Migrate PurchaseOrderDetailsModal to use correct PurchaseOrderItem type from purchase_orders service
- Fix item display: Parse unit_price as string (Decimal) instead of number
- Use correct field names: item_notes instead of notes
- Remove deprecated PurchaseOrder types from suppliers.ts to prevent type conflicts
- Update CreatePurchaseOrderModal to use unified types
- Clean up API exports: Remove old PO hooks re-exported from suppliers
- Add comprehensive translations for PO modal (en, es, eu)

Documentation Reorganization:
- Move WhatsApp implementation docs to docs/03-features/notifications/whatsapp/
- Move forecast validation docs to docs/03-features/forecasting/
- Move specification docs to docs/03-features/specifications/
- Move deployment docs (Colima, K8s, VPS sizing) to docs/05-deployment/
- Archive completed implementation summaries to docs/archive/implementation-summaries/
- Delete obsolete FRONTEND_CHANGES_NEEDED.md
- Standardize filenames to lowercase with hyphens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

docs/FRONTEND_CHANGES_NEEDED.md

@@ -1,131 +0,0 @@
-# Frontend Changes Needed for Notification Settings
-
-## File: frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx
-
-### 1. Update imports (line 3)
-```typescript
-import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader, Bell } from 'lucide-react';
-```
-
-### 2. Add NotificationSettings to type imports (line 17)
-```typescript
-import type {
-  ProcurementSettings,
-  InventorySettings,
-  ProductionSettings,
-  SupplierSettings,
-  POSSettings,
-  OrderSettings,
-  NotificationSettings,  // ADD THIS
-} from '../../../../api/types/settings';
-```
-
-### 3. Import NotificationSettingsCard component (after line 24)
-```typescript
-import NotificationSettingsCard from '../../database/ajustes/cards/NotificationSettingsCard';
-```
-
-### 4. Add notification settings state (after line 100)
-```typescript
-const [notificationSettings, setNotificationSettings] = useState<NotificationSettings | null>(null);
-```
-
-### 5. Load notification settings in useEffect (line 140, add this line)
-```typescript
-setNotificationSettings(settings.notification_settings);
-```
-
-### 6. Add notifications tab trigger (after line 389, before closing </TabsList>)
-```typescript
-<TabsTrigger value="notifications" className="flex-1 sm:flex-none whitespace-nowrap">
-  <Bell className="w-4 h-4 mr-2" />
-  {t('bakery.tabs.notifications')}
-</TabsTrigger>
-```
-
-### 7. Add notifications tab content (after line 691, before </Tabs>)
-```typescript
-{/* Tab 4: Notifications */}
-<TabsContent value="notifications">
-  <div className="space-y-6">
-    {notificationSettings && (
-      <NotificationSettingsCard
-        settings={notificationSettings}
-        onChange={(newSettings) => {
-          setNotificationSettings(newSettings);
-          handleOperationalSettingsChange();
-        }}
-        disabled={isLoading}
-      />
-    )}
-  </div>
-</TabsContent>
-```
-
-### 8. Update handleSaveOperationalSettings function (line 233)
-
-Change from:
-```typescript
-if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
-    !supplierSettings || !posSettings || !orderSettings) {
-  return;
-}
-```
-
-To:
-```typescript
-if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
-    !supplierSettings || !posSettings || !orderSettings || !notificationSettings) {
-  return;
-}
-```
-
-### 9. Add notification_settings to mutation (line 250)
-
-Add this line inside the mutation:
-```typescript
-await updateSettingsMutation.mutateAsync({
-  tenantId,
-  updates: {
-    procurement_settings: procurementSettings,
-    inventory_settings: inventorySettings,
-    production_settings: productionSettings,
-    supplier_settings: supplierSettings,
-    pos_settings: posSettings,
-    order_settings: orderSettings,
-    notification_settings: notificationSettings,  // ADD THIS
-  },
-});
-```
-
-### 10. Update handleDiscard function (line 316)
-
-Add this line:
-```typescript
-setNotificationSettings(settings.notification_settings);
-```
-
-### 11. Update floating save button condition (line 717)
-
-Change:
-```typescript
-onClick={activeTab === 'operations' ? handleSaveOperationalSettings : handleSaveConfig}
-```
-
-To:
-```typescript
-onClick={activeTab === 'operations' || activeTab === 'notifications' ? handleSaveOperationalSettings : handleSaveConfig}
-```
-
-## Summary
-
-All translations have been added to:
-- ✅ `/frontend/src/locales/es/ajustes.json`
-- ✅ `/frontend/src/locales/eu/ajustes.json`
-- ✅ `/frontend/src/locales/es/settings.json`
-- ✅ `/frontend/src/locales/eu/settings.json`
-
-The NotificationSettingsCard component has been created at:
-- ✅ `/frontend/src/pages/app/database/ajustes/cards/NotificationSettingsCard.tsx`
-
-You just need to apply the changes listed above to BakerySettingsPage.tsx to complete the frontend integration.

frontend/src/api/hooks/newDashboard.ts

@@ -49,6 +49,8 @@ export interface ReasoningInputs {
   aiInsights: boolean;
 }
 
+// Note: This is a different interface from PurchaseOrderSummary in purchase_orders.ts
+// This is specifically for OrchestrationSummary dashboard display
 export interface PurchaseOrderSummary {
   supplierName: string;
   itemCategories: string[];

frontend/src/api/hooks/purchase-orders.ts

@@ -10,6 +10,7 @@ import type {
   PurchaseOrderDetail,
   PurchaseOrderSearchParams,
   PurchaseOrderUpdateData,
+  PurchaseOrderCreateData,
   PurchaseOrderStatus,
   CreateDeliveryInput,
   DeliveryResponse
@@ -19,6 +20,7 @@ import {
   getPurchaseOrder,
   getPendingApprovalPurchaseOrders,
   getPurchaseOrdersByStatus,
+  createPurchaseOrder,
   updatePurchaseOrder,
   approvePurchaseOrder,
   rejectPurchaseOrder,
@@ -112,6 +114,37 @@ export const usePurchaseOrder = (
   });
 };
 
+/**
+ * Hook to create a new purchase order
+ */
+export const useCreatePurchaseOrder = (
+  options?: UseMutationOptions<
+    PurchaseOrderDetail,
+    ApiError,
+    { tenantId: string; data: PurchaseOrderCreateData }
+  >
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    PurchaseOrderDetail,
+    ApiError,
+    { tenantId: string; data: PurchaseOrderCreateData }
+  >({
+    mutationFn: ({ tenantId, data }) => createPurchaseOrder(tenantId, data),
+    onSuccess: (data, variables) => {
+      // Invalidate all lists to refresh with new PO
+      queryClient.invalidateQueries({ queryKey: purchaseOrderKeys.lists() });
+      // Add to cache
+      queryClient.setQueryData(
+        purchaseOrderKeys.detail(variables.tenantId, data.id),
+        data
+      );
+    },
+    ...options,
+  });
+};
+
 /**
  * Hook to update a purchase order
  */

frontend/src/api/hooks/suppliers.ts

@@ -15,11 +15,6 @@ import type {
   SupplierSearchParams,
   SupplierStatistics,
   SupplierDeletionSummary,
-  PurchaseOrderCreate,
-  PurchaseOrderUpdate,
-  PurchaseOrderResponse,
-  PurchaseOrderApproval,
-  PurchaseOrderSearchParams,
   DeliveryCreate,
   DeliveryUpdate,
   DeliveryResponse,
@@ -49,15 +44,6 @@ export const suppliersKeys = {
     byType: (tenantId: string, supplierType: string) => 
       [...suppliersKeys.suppliers.all(), 'by-type', tenantId, supplierType] as const,
   },
-  purchaseOrders: {
-    all: () => [...suppliersKeys.all, 'purchase-orders'] as const,
-    lists: () => [...suppliersKeys.purchaseOrders.all(), 'list'] as const,
-    list: (params?: PurchaseOrderSearchParams) => 
-      [...suppliersKeys.purchaseOrders.lists(), params] as const,
-    details: () => [...suppliersKeys.purchaseOrders.all(), 'detail'] as const,
-    detail: (orderId: string) => 
-      [...suppliersKeys.purchaseOrders.details(), orderId] as const,
-  },
   deliveries: {
     all: () => [...suppliersKeys.all, 'deliveries'] as const,
     lists: () => [...suppliersKeys.deliveries.all(), 'list'] as const,
@@ -173,35 +159,6 @@ export const useSuppliersByType = (
   });
 };
 
-// Purchase Order Queries
-export const usePurchaseOrders = (
-  tenantId: string,
-  queryParams?: PurchaseOrderSearchParams,
-  options?: Omit<UseQueryOptions<PurchaseOrderResponse[], ApiError>, 'queryKey' | 'queryFn'>
-) => {
-  return useQuery<PurchaseOrderResponse[], ApiError>({
-    queryKey: suppliersKeys.purchaseOrders.list(queryParams),
-    queryFn: () => suppliersService.getPurchaseOrders(tenantId, queryParams as any),
-    enabled: !!tenantId,
-    staleTime: 1 * 60 * 1000, // 1 minute
-    ...options,
-  });
-};
-
-export const usePurchaseOrder = (
-  tenantId: string,
-  orderId: string,
-  options?: Omit<UseQueryOptions<PurchaseOrderResponse, ApiError>, 'queryKey' | 'queryFn'>
-) => {
-  return useQuery<PurchaseOrderResponse, ApiError>({
-    queryKey: suppliersKeys.purchaseOrders.detail(orderId),
-    queryFn: () => suppliersService.getPurchaseOrder(tenantId, orderId),
-    enabled: !!tenantId && !!orderId,
-    staleTime: 2 * 60 * 1000, // 2 minutes
-    ...options,
-  });
-};
-
 // Delivery Queries
 export const useDeliveries = (
   tenantId: string,
@@ -462,94 +419,6 @@ export const useHardDeleteSupplier = (
   });
 };
 
-// Purchase Order Mutations
-export const useCreatePurchaseOrder = (
-  options?: UseMutationOptions<PurchaseOrderResponse, ApiError, PurchaseOrderCreate>
-) => {
-  const queryClient = useQueryClient();
-
-  return useMutation<PurchaseOrderResponse, ApiError, PurchaseOrderCreate>({
-    mutationFn: (orderData) => suppliersService.createPurchaseOrder(orderData),
-    onSuccess: (data) => {
-      // Add to cache
-      queryClient.setQueryData(
-        suppliersKeys.purchaseOrders.detail(data.id),
-        data
-      );
-      
-      // Invalidate lists
-      queryClient.invalidateQueries({
-        queryKey: suppliersKeys.purchaseOrders.lists()
-      });
-    },
-    ...options,
-  });
-};
-
-export const useUpdatePurchaseOrder = (
-  options?: UseMutationOptions<
-    PurchaseOrderResponse,
-    ApiError,
-    { orderId: string; updateData: PurchaseOrderUpdate }
-  >
-) => {
-  const queryClient = useQueryClient();
-
-  return useMutation<
-    PurchaseOrderResponse,
-    ApiError,
-    { orderId: string; updateData: PurchaseOrderUpdate }
-  >({
-    mutationFn: ({ orderId, updateData }) =>
-      suppliersService.updatePurchaseOrder(orderId, updateData),
-    onSuccess: (data, { orderId }) => {
-      // Update cache
-      queryClient.setQueryData(
-        suppliersKeys.purchaseOrders.detail(orderId),
-        data
-      );
-      
-      // Invalidate lists
-      queryClient.invalidateQueries({
-        queryKey: suppliersKeys.purchaseOrders.lists()
-      });
-    },
-    ...options,
-  });
-};
-
-export const useApprovePurchaseOrder = (
-  options?: UseMutationOptions<
-    PurchaseOrderResponse,
-    ApiError,
-    { orderId: string; approval: PurchaseOrderApproval }
-  >
-) => {
-  const queryClient = useQueryClient();
-
-  return useMutation<
-    PurchaseOrderResponse,
-    ApiError,
-    { orderId: string; approval: PurchaseOrderApproval }
-  >({
-    mutationFn: ({ orderId, approval }) =>
-      suppliersService.approvePurchaseOrder(orderId, approval),
-    onSuccess: (data, { orderId }) => {
-      // Update cache
-      queryClient.setQueryData(
-        suppliersKeys.purchaseOrders.detail(orderId),
-        data
-      );
-      
-      // Invalidate lists
-      queryClient.invalidateQueries({
-        queryKey: suppliersKeys.purchaseOrders.lists()
-      });
-    },
-    ...options,
-  });
-};
-
 // Delivery Mutations
 export const useCreateDelivery = (
   options?: UseMutationOptions<DeliveryResponse, ApiError, DeliveryCreate>

frontend/src/api/index.ts

@@ -593,8 +593,6 @@ export {
   useTopSuppliers,
   usePendingApprovalSuppliers,
   useSuppliersByType,
-  usePurchaseOrders,
-  usePurchaseOrder,
   useDeliveries,
   useDelivery,
   useSupplierPerformanceMetrics,
@@ -603,9 +601,6 @@ export {
   useUpdateSupplier,
   useDeleteSupplier,
   useApproveSupplier,
-  useCreatePurchaseOrder,
-  useUpdatePurchaseOrder,
-  useApprovePurchaseOrder,
   useCreateDelivery,
   useUpdateDelivery,
   useConfirmDeliveryReceipt,

frontend/src/api/services/purchase_orders.ts

@@ -123,6 +123,40 @@ export interface PurchaseOrderUpdateData {
   internal_notes?: string;
 }
 
+export interface PurchaseOrderItemCreate {
+  inventory_product_id: string;
+  ordered_quantity: number;
+  unit_price: string; // Decimal as string
+  unit_of_measure: string;
+  quality_requirements?: string;
+  item_notes?: string;
+}
+
+export interface PurchaseOrderCreateData {
+  supplier_id: string;
+  required_delivery_date?: string;
+  priority?: PurchaseOrderPriority;
+  tax_amount?: number;
+  shipping_cost?: number;
+  discount_amount?: number;
+  notes?: string;
+  procurement_plan_id?: string;
+  items: PurchaseOrderItemCreate[];
+}
+
+/**
+ * Create a new purchase order
+ */
+export async function createPurchaseOrder(
+  tenantId: string,
+  data: PurchaseOrderCreateData
+): Promise<PurchaseOrderDetail> {
+  return apiClient.post<PurchaseOrderDetail>(
+    `/tenants/${tenantId}/procurement/purchase-orders`,
+    data
+  );
+}
+
 /**
  * Get list of purchase orders with optional filters
  */

frontend/src/api/services/suppliers.ts

@@ -24,11 +24,6 @@ import type {
   SupplierStatistics,
   SupplierDeletionSummary,
   SupplierResponse as SupplierResponse_,
-  PurchaseOrderCreate,
-  PurchaseOrderUpdate,
-  PurchaseOrderResponse,
-  PurchaseOrderApproval,
-  PurchaseOrderSearchParams,
   DeliveryCreate,
   DeliveryUpdate,
   DeliveryResponse,

frontend/src/api/types/suppliers.ts

@@ -367,173 +367,6 @@ export interface SupplierSummary {
   created_at: string;
 }
 
-// ===== PURCHASE ORDER SCHEMAS =====
-// Mirror: PurchaseOrderItemCreate from suppliers.py:187
-
-export interface PurchaseOrderItemCreate {
-  inventory_product_id: string;
-  product_code?: string | null;  // max_length=100
-  ordered_quantity: number;  // gt=0
-  unit_of_measure: string;  // max_length=20
-  unit_price: number;  // gt=0
-  quality_requirements?: string | null;
-  item_notes?: string | null;
-}
-
-// Mirror: PurchaseOrderItemUpdate from suppliers.py:198
-export interface PurchaseOrderItemUpdate {
-  ordered_quantity?: number | null;  // gt=0
-  unit_price?: number | null;  // gt=0
-  quality_requirements?: string | null;
-  item_notes?: string | null;
-}
-
-// Mirror: PurchaseOrderItemResponse from suppliers.py (inferred)
-export interface PurchaseOrderItemResponse {
-  id: string;
-  tenant_id: string;
-  purchase_order_id: string;
-  inventory_product_id: string;
-  product_code: string | null;
-  price_list_item_id: string | null;
-  ordered_quantity: number;
-  unit_of_measure: string;
-  unit_price: number;
-  line_total: number;
-  received_quantity: number;
-  remaining_quantity: number;
-  quality_requirements: string | null;
-  item_notes: string | null;
-  created_at: string;
-  updated_at: string;
-}
-
-// Mirror: PurchaseOrderCreate from suppliers.py (inferred)
-export interface PurchaseOrderCreate {
-  supplier_id: string;
- items: PurchaseOrderItemCreate[];  // min_items=1
-
-  // Order details
-  reference_number?: string | null;  // max_length=100
-  priority?: string;  // Default: "normal", max_length=20
- required_delivery_date?: string | null;
-
-  // Delivery info
-  delivery_address?: string | null;
-  delivery_instructions?: string | null;
-  delivery_contact?: string | null;  // max_length=200
-  delivery_phone?: string | null;  // max_length=30
-
-  // Financial (all default=0, ge=0)
- tax_amount?: number;
-  shipping_cost?: number;
-  discount_amount?: number;
-
-  // Additional
- notes?: string | null;
-  internal_notes?: string | null;
-  terms_and_conditions?: string | null;
-}
-
-// Mirror: PurchaseOrderUpdate from suppliers.py (inferred)
-export interface PurchaseOrderUpdate {
-  reference_number?: string | null;
-  priority?: string | null;
-  required_delivery_date?: string | null;
-  estimated_delivery_date?: string | null;
- supplier_reference?: string | null;  // max_length=100
-  delivery_address?: string | null;
-  delivery_instructions?: string | null;
-  delivery_contact?: string | null;
-  delivery_phone?: string | null;
-  tax_amount?: number | null;
-  shipping_cost?: number | null;
-  discount_amount?: number | null;
-  notes?: string | null;
-  internal_notes?: string | null;
-  terms_and_conditions?: string | null;
-}
-
-// Mirror: PurchaseOrderStatusUpdate from suppliers.py (inferred)
-export interface PurchaseOrderStatusUpdate {
-  status: PurchaseOrderStatus;
-  notes?: string | null;
-}
-
-// Mirror: PurchaseOrderApproval from suppliers.py (inferred)
-export interface PurchaseOrderApproval {
-  action: 'approve' | 'reject';
-  notes?: string | null;
-}
-
-// Mirror: PurchaseOrderResponse from suppliers.py (inferred)
-export interface PurchaseOrderResponse {
-  id: string;
-  tenant_id: string;
-  supplier_id: string;
-  po_number: string;
-  status: PurchaseOrderStatus;
-  order_date: string;
-  reference_number: string | null;
-  priority: string;
- required_delivery_date: string | null;
-  estimated_delivery_date: string | null;
-
-  // Financial
-  subtotal: number;
- tax_amount: number;
-  shipping_cost: number;
-  discount_amount: number;
-  total_amount: number;
-  currency: string;
-
-  // Delivery
- delivery_address: string | null;
-  delivery_instructions: string | null;
-  delivery_contact: string | null;
-  delivery_phone: string | null;
-
-  // Approval
- requires_approval: boolean;
-  approved_by: string | null;
-  approved_at: string | null;
-  rejection_reason: string | null;
-
-  // Communication
-  sent_to_supplier_at: string | null;
-  supplier_confirmation_date: string | null;
-  supplier_reference: string | null;
-
-  // Additional
- notes: string | null;
-  internal_notes: string | null;
-  terms_and_conditions: string | null;
-
-  // Audit
- created_at: string;
-  updated_at: string;
-  created_by: string;
-  updated_by: string;
-
-  // Related data
-  supplier?: SupplierSummary | null;
-  items?: PurchaseOrderItemResponse[] | null;
-}
-
-// Mirror: PurchaseOrderSummary from suppliers.py (inferred)
-export interface PurchaseOrderSummary {
-  id: string;
-  po_number: string;
-  supplier_id: string;
-  supplier_name: string | null;
-  status: PurchaseOrderStatus;
-  priority: string;
-  order_date: string;
-  required_delivery_date: string | null;
-  total_amount: number;
-  currency: string;
-  created_at: string;
-}
 
 // ===== DELIVERY SCHEMAS =====
 // Mirror: DeliveryItemCreate from suppliers.py (inferred)
@@ -828,15 +661,6 @@ export interface SupplierStatistics {
   total_spend: number;
 }
 
-export interface PurchaseOrderStatistics {
-  total_orders: number;
-  status_counts: Record<string, number>;
-  this_month_orders: number;
-  this_month_spend: number;
-  avg_order_value: number;
-  overdue_count: number;
-  pending_approval: number;
-}
 
 export interface DeliveryPerformanceStats {
   total_deliveries: number;
@@ -934,16 +758,8 @@ export interface SupplierSearchParams {
   offset?: number;  // Default: 0, ge=0
 }
 
-export interface PurchaseOrderSearchParams {
+// ⚠️ DEPRECATED: Use PurchaseOrderSearchParams from '@/api/services/purchase_orders' instead
-  supplier_id?: string | null;
+// Duplicate definition - use the one from purchase_orders service
-  status?: PurchaseOrderStatus | null;
-  priority?: string | null;
-  date_from?: string | null;
-  date_to?: string | null;
-  search_term?: string | null;
-  limit?: number;
-  offset?: number;
-}
 
 export interface DeliverySearchParams {
   supplier_id?: string | null;

frontend/src/components/dashboard/PurchaseOrderDetailsModal.tsx

@@ -3,26 +3,25 @@
 // ================================================================
 /**
  * Purchase Order Details Modal
- * Quick view of PO details from the Action Queue
+ * Unified view/edit modal for PO details from the Action Queue
+ * Now using EditViewModal with proper API response structure
  */
 
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import {
-  X,
   Package,
   Building2,
   Calendar,
-  Truck,
   Euro,
   FileText,
   CheckCircle,
-  Clock,
+  Edit,
-  AlertCircle,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { usePurchaseOrder } from '../../api/hooks/purchase-orders';
+import { usePurchaseOrder, useUpdatePurchaseOrder } from '../../api/hooks/purchase-orders';
-import { formatDistanceToNow } from 'date-fns';
+import { useUserById } from '../../api/hooks/user';
-import { es, enUS, eu as euLocale } from 'date-fns/locale';
+import { EditViewModal, EditViewModalSection } from '../ui/EditViewModal/EditViewModal';
+import type { PurchaseOrderItem } from '../../api/services/purchase_orders';
 
 interface PurchaseOrderDetailsModalProps {
   poId: string;
@@ -30,380 +29,439 @@ interface PurchaseOrderDetailsModalProps {
   isOpen: boolean;
   onClose: () => void;
   onApprove?: (poId: string) => void;
-  onModify?: (poId: string) => void;
+  initialMode?: 'view' | 'edit';
 }
 
-const localeMap = {
-  es: es,
-  en: enUS,
-  eu: euLocale,
-};
-
 export const PurchaseOrderDetailsModal: React.FC<PurchaseOrderDetailsModalProps> = ({
   poId,
   tenantId,
   isOpen,
   onClose,
   onApprove,
-  onModify,
+  initialMode = 'view',
 }) => {
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslation(['purchase_orders', 'common']);
-  const { data: po, isLoading } = usePurchaseOrder(tenantId, poId);
+  const { data: po, isLoading, refetch } = usePurchaseOrder(tenantId, poId);
+  const [mode, setMode] = useState<'view' | 'edit'>(initialMode);
+  const updatePurchaseOrderMutation = useUpdatePurchaseOrder();
 
-  if (!isOpen) return null;
+  // Component to display user name with data fetching
+  const UserName: React.FC<{ userId: string | undefined | null }> = ({ userId }) => {
+    if (!userId) return <>{t('common:not_available')}</>;
 
-  const dateLocale = localeMap[i18n.language as keyof typeof localeMap] || enUS;
+    if (userId === '00000000-0000-0000-0000-000000000001' || userId === '00000000-0000-0000-0000-000000000000') {
+      return <>{t('common:system')}</>;
+    }
+
+    const { data: user, isLoading } = useUserById(userId, {
+      retry: 1,
+      staleTime: 10 * 60 * 1000,
+    });
+
+    if (isLoading) return <>{t('common:loading')}</>;
+    if (!user) return <>{t('common:unknown_user')}</>;
+
+    return <>{user.full_name || user.email || t('common:user')}</>;
+  };
+
+  // Component to display PO items
+  const PurchaseOrderItemsTable: React.FC<{ items: PurchaseOrderItem[] }> = ({ items }) => {
+    if (!items || items.length === 0) {
+      return (
+        <div className="text-center py-8 text-[var(--text-secondary)] border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
+          <Package className="h-12 w-12 mx-auto mb-2 opacity-50" />
+          <p>{t('no_items')}</p>
+        </div>
+      );
+    }
+
+    const totalAmount = items.reduce((sum, item) => {
+      const price = parseFloat(item.unit_price) || 0;
+      const quantity = item.ordered_quantity || 0;
+      return sum + (price * quantity);
+    }, 0);
+
+    return (
+      <div className="space-y-3">
+        {items.map((item: PurchaseOrderItem, index: number) => {
+          const unitPrice = parseFloat(item.unit_price) || 0;
+          const quantity = item.ordered_quantity || 0;
+          const itemTotal = unitPrice * quantity;
+          const productName = item.product_name || `${t('product')} ${index + 1}`;
+
+          return (
+            <div
+              key={item.id || index}
+              className="p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/50 space-y-3"
+            >
+              <div className="flex justify-between items-start">
+                <div className="flex-1">
+                  <h4 className="font-semibold text-[var(--text-primary)]">{productName}</h4>
+                  {item.product_code && (
+                    <p className="text-sm text-[var(--text-secondary)]">
+                      {t('sku')}: {item.product_code}
+                    </p>
+                  )}
+                </div>
+                <div className="text-right">
+                  <p className="font-bold text-lg text-[var(--color-primary-600)]">
+                    €{itemTotal.toFixed(2)}
+                  </p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <p className="text-[var(--text-secondary)]">{t('quantity')}</p>
+                  <p className="font-medium text-[var(--text-primary)]">
+                    {quantity} {item.unit_of_measure}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-[var(--text-secondary)]">{t('unit_price')}</p>
+                  <p className="font-medium text-[var(--text-primary)]">€{unitPrice.toFixed(2)}</p>
+                </div>
+              </div>
+              {item.quality_requirements && (
+                <div className="pt-2 border-t border-[var(--border-secondary)]">
+                  <p className="text-xs text-[var(--text-secondary)]">{t('quality_requirements')}</p>
+                  <p className="text-sm text-[var(--text-primary)]">{item.quality_requirements}</p>
+                </div>
+              )}
+              {item.item_notes && (
+                <div className="pt-2 border-t border-[var(--border-secondary)]">
+                  <p className="text-xs text-[var(--text-secondary)]">{t('common:notes')}</p>
+                  <p className="text-sm text-[var(--text-primary)]">{item.item_notes}</p>
+                </div>
+              )}
+            </div>
+          );
+        })}
+        <div className="flex justify-between items-center pt-4 border-t-2 border-[var(--border-primary)]">
+          <span className="font-semibold text-lg text-[var(--text-primary)]">{t('total')}</span>
+          <span className="font-bold text-2xl text-[var(--color-primary-600)]">€{totalAmount.toFixed(2)}</span>
+        </div>
+      </div>
+    );
+  };
+
+  // Priority and unit options for edit mode
+  const priorityOptions = [
+    { value: 'urgent', label: t('priority_urgent') },
+    { value: 'high', label: t('priority_high') },
+    { value: 'normal', label: t('priority_normal') },
+    { value: 'low', label: t('priority_low') }
+  ];
+
+  const unitOptions = [
+    { value: 'kg', label: t('unit_kg') },
+    { value: 'g', label: t('unit_g') },
+    { value: 'l', label: t('unit_l') },
+    { value: 'ml', label: t('unit_ml') },
+    { value: 'units', label: t('unit_units') },
+    { value: 'boxes', label: t('unit_boxes') },
+    { value: 'bags', label: t('unit_bags') }
+  ];
+
+  // Build sections for EditViewModal
+  const buildViewSections = (): EditViewModalSection[] => {
+    if (!po) return [];
 
-  // Format currency
     const formatCurrency = (value: any) => {
       const num = Number(value);
       return isNaN(num) ? '0.00' : num.toFixed(2);
     };
 
-  const getStatusBadge = (status: string) => {
+    const sections: EditViewModalSection[] = [
-    const statusConfig = {
+      {
-      draft: {
+        title: t('general_information'),
-        bg: 'var(--color-gray-100)',
+        icon: FileText,
-        text: 'var(--color-gray-700)',
+        fields: [
-        label: t('purchase_orders:status.draft'),
+          {
+            label: t('po_number'),
+            value: po.po_number,
+            type: 'text' as const
           },
-      pending_approval: {
+          {
-        bg: 'var(--color-warning-100)',
+            label: t('status_label'),
-        text: 'var(--color-warning-700)',
+            value: t(`status.${po.status}`),
-        label: t('purchase_orders:status.pending_approval'),
+            type: 'status' as const
           },
-      approved: {
+          {
-        bg: 'var(--color-success-100)',
+            label: t('priority'),
-        text: 'var(--color-success-700)',
+            value: t(`priority_${po.priority}` as any) || po.priority,
-        label: t('purchase_orders:status.approved'),
+            type: 'text' as const
           },
-      sent: {
+          {
-        bg: 'var(--color-info-100)',
+            label: t('created'),
-        text: 'var(--color-info-700)',
+            value: new Date(po.created_at).toLocaleDateString(i18n.language, {
-        label: t('purchase_orders:status.sent'),
+              year: 'numeric',
-      },
+              month: 'long',
-      partially_received: {
+              day: 'numeric',
-        bg: 'var(--color-warning-100)',
+              hour: '2-digit',
-        text: 'var(--color-warning-700)',
+              minute: '2-digit'
-        label: t('purchase_orders:status.partially_received'),
+            }),
-      },
+            type: 'text' as const
-      received: {
-        bg: 'var(--color-success-100)',
-        text: 'var(--color-success-700)',
-        label: t('purchase_orders:status.received'),
-      },
-      cancelled: {
-        bg: 'var(--color-error-100)',
-        text: 'var(--color-error-700)',
-        label: t('purchase_orders:status.cancelled'),
-      },
-    };
-
-    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.draft;
-
-    return (
-      <span
-        className="px-3 py-1 rounded-full text-sm font-medium"
-        style={{ backgroundColor: config.bg, color: config.text }}
-      >
-        {config.label}
-      </span>
-    );
-  };
-
-  return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 animate-fadeIn"
-      onClick={onClose}
-      style={{
-        backdropFilter: 'blur(4px)',
-        animation: 'fadeIn 0.2s ease-out'
-      }}
-    >
-      <div
-        className="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden transform transition-all"
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          backgroundColor: 'var(--bg-primary)',
-          animation: 'slideUp 0.3s ease-out'
-        }}
-      >
-        <style>{`
-          @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
           }
-          @keyframes slideUp {
+        ]
-            from {
+      },
-              opacity: 0;
+      {
-              transform: translateY(20px) scale(0.95);
+        title: t('supplier_info'),
+        icon: Building2,
+        fields: [
+          {
+            label: t('supplier_name'),
+            value: po.supplier?.name || t('common:unknown'),
+            type: 'text' as const
           }
-            to {
+        ]
-              opacity: 1;
+      },
-              transform: translateY(0) scale(1);
+      {
+        title: t('financial_summary'),
+        icon: Euro,
+        fields: [
+          {
+            label: t('total_amount'),
+            value: `€${formatCurrency(po.total_amount)}`,
+            type: 'text' as const,
+            highlight: true
           }
+        ]
+      },
+      {
+        title: t('items'),
+        icon: Package,
+        fields: [
+          {
+            label: '',
+            value: <PurchaseOrderItemsTable items={po.items || []} />,
+            type: 'component' as const,
+            span: 2
           }
-        `}</style>
+        ]
-        {/* Header */}
+      },
-        <div
+      {
-          className="flex items-center justify-between p-6 border-b bg-gradient-to-r from-transparent to-transparent"
+        title: t('dates'),
-          style={{
+        icon: Calendar,
-            borderColor: 'var(--border-primary)',
+        fields: [
-            background: 'linear-gradient(to right, var(--bg-primary), var(--bg-secondary))'
+          {
-          }}
+            label: t('order_date'),
-        >
+            value: new Date(po.order_date).toLocaleDateString(i18n.language, {
-          <div className="flex items-center gap-4">
-            <div
-              className="p-3 rounded-xl"
-              style={{
-                backgroundColor: 'var(--color-primary-100)',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)'
-              }}
-            >
-              <Package className="w-6 h-6" style={{ color: 'var(--color-primary-600)' }} />
-            </div>
-            <div>
-              <h2 className="text-2xl font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
-                {isLoading ? t('common:loading') : po?.po_number || t('purchase_orders:purchase_order')}
-              </h2>
-              {po && (
-                <p className="text-sm flex items-center gap-1" style={{ color: 'var(--text-secondary)' }}>
-                  <Clock className="w-3.5 h-3.5" />
-                  {t('purchase_orders:created')} {formatDistanceToNow(new Date(po.created_at), { addSuffix: true, locale: dateLocale })}
-                </p>
-              )}
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 rounded-lg hover:bg-gray-100 transition-all hover:scale-110"
-            style={{ color: 'var(--text-secondary)' }}
-            aria-label={t('purchase_orders:actions.close')}
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
-          {isLoading ? (
-            <div className="flex items-center justify-center py-12">
-              <div className="animate-spin rounded-full h-10 w-10 border-3 border-primary-200 border-t-primary-600"></div>
-            </div>
-          ) : po ? (
-            <div className="space-y-6">
-              {/* Status and Key Info */}
-              <div className="flex flex-wrap items-center gap-4 p-4 rounded-xl" style={{
-                backgroundColor: 'var(--bg-secondary)',
-                border: '1px solid var(--border-primary)'
-              }}>
-                {getStatusBadge(po.status)}
-                <div className="flex-1 min-w-[200px]">
-                  <p className="text-xs uppercase tracking-wide mb-1" style={{ color: 'var(--text-secondary)' }}>
-                    {t('purchase_orders:total_amount')}
-                  </p>
-                  <div className="flex items-baseline gap-2">
-                    <Euro className="w-5 h-5" style={{ color: 'var(--color-primary-600)' }} />
-                    <span className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
-                      {formatCurrency(po.total_amount)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Supplier Info */}
-              <div className="rounded-xl p-5 border" style={{
-                backgroundColor: 'var(--bg-secondary)',
-                borderColor: 'var(--border-primary)',
-                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)'
-              }}>
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="p-2 rounded-lg" style={{ backgroundColor: 'var(--color-primary-100)' }}>
-                    <Building2 className="w-5 h-5" style={{ color: 'var(--color-primary-600)' }} />
-                  </div>
-                  <h3 className="font-semibold text-sm uppercase tracking-wide" style={{ color: 'var(--text-secondary)' }}>
-                    {t('purchase_orders:supplier')}
-                  </h3>
-                </div>
-                <p className="text-xl font-semibold ml-1" style={{ color: 'var(--text-primary)' }}>
-                  {po.supplier_name || t('common:unknown')}
-                </p>
-              </div>
-
-              {/* Dates */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="rounded-xl p-4 border" style={{
-                  backgroundColor: 'var(--bg-secondary)',
-                  borderColor: 'var(--border-primary)',
-                  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)'
-                }}>
-                  <div className="flex items-center gap-2 mb-3">
-                    <div className="p-1.5 rounded-lg" style={{ backgroundColor: 'var(--color-primary-100)' }}>
-                      <Calendar className="w-4 h-4" style={{ color: 'var(--color-primary-600)' }} />
-                    </div>
-                    <h3 className="font-semibold text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)' }}>
-                      {t('purchase_orders:order_date')}
-                    </h3>
-                  </div>
-                  <p className="text-lg font-semibold ml-1" style={{ color: 'var(--text-primary)' }}>
-                    {new Date(po.order_date).toLocaleDateString(i18n.language, {
               year: 'numeric',
               month: 'short',
               day: 'numeric'
-                    })}
+            }),
-                  </p>
+            type: 'text' as const
-                </div>
+          },
-
+          ...(po.required_delivery_date ? [{
-                {po.expected_delivery_date && (
+            label: t('required_delivery_date'),
-                  <div className="rounded-xl p-4 border" style={{
+            value: new Date(po.required_delivery_date).toLocaleDateString(i18n.language, {
-                    backgroundColor: 'var(--bg-secondary)',
-                    borderColor: 'var(--border-primary)',
-                    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)'
-                  }}>
-                    <div className="flex items-center gap-2 mb-3">
-                      <div className="p-1.5 rounded-lg" style={{ backgroundColor: 'var(--color-success-100)' }}>
-                        <Truck className="w-4 h-4" style={{ color: 'var(--color-success-600)' }} />
-                      </div>
-                      <h3 className="font-semibold text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)' }}>
-                        {t('purchase_orders:expected_delivery')}
-                      </h3>
-                    </div>
-                    <p className="text-lg font-semibold ml-1" style={{ color: 'var(--text-primary)' }}>
-                      {new Date(po.expected_delivery_date).toLocaleDateString(i18n.language, {
               year: 'numeric',
               month: 'short',
               day: 'numeric'
-                      })}
+            }),
-                    </p>
+            type: 'text' as const
-                  </div>
+          }] : []),
-                )}
+          ...(po.estimated_delivery_date ? [{
-              </div>
+            label: t('expected_delivery'),
+            value: new Date(po.estimated_delivery_date).toLocaleDateString(i18n.language, {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric'
+            }),
+            type: 'text' as const
+          }] : [])
+        ]
+      }
+    ];
 
-              {/* Items */}
+    // Add notes section if present
-              <div>
+    if (po.notes) {
-                <div className="flex items-center gap-2 mb-4">
+      sections.push({
-                  <div className="p-2 rounded-lg" style={{ backgroundColor: 'var(--color-primary-100)' }}>
+        title: t('notes'),
-                    <FileText className="w-5 h-5" style={{ color: 'var(--color-primary-600)' }} />
+        icon: FileText,
-                  </div>
+        fields: [
-                  <h3 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>
+          {
-                    {t('purchase_orders:items')}
+            label: t('order_notes'),
-                  </h3>
+            value: po.notes,
-                  {po.items && po.items.length > 0 && (
+            type: 'text' as const
-                    <span
+          }
-                      className="ml-auto px-3 py-1 rounded-full text-sm font-medium"
+        ]
-                      style={{
+      });
-                        backgroundColor: 'var(--color-primary-100)',
+    }
-                        color: 'var(--color-primary-700)'
-                      }}
-                    >
-                      {po.items.length} {po.items.length === 1 ? t('common:item') : t('common:items')}
-                    </span>
-                  )}
-                </div>
-                <div className="space-y-3">
-                  {po.items && po.items.length > 0 ? (
-                    po.items.map((item: any, index: number) => (
-                      <div
-                        key={index}
-                        className="flex justify-between items-center p-4 rounded-xl border transition-all hover:shadow-md"
-                        style={{
-                          backgroundColor: 'var(--bg-secondary)',
-                          borderColor: 'var(--border-primary)'
-                        }}
-                      >
-                        <div className="flex-1">
-                          <p className="font-semibold text-base mb-1" style={{ color: 'var(--text-primary)' }}>
-                            {item.ingredient_name || item.product_name}
-                          </p>
-                          <p className="text-sm flex items-center gap-1.5" style={{ color: 'var(--text-secondary)' }}>
-                            <span className="font-medium">{item.quantity} {item.unit}</span>
-                            <span>×</span>
-                            <span>€{formatCurrency(item.unit_price)}</span>
-                          </p>
-                        </div>
-                        <p className="font-bold text-lg ml-4" style={{ color: 'var(--color-primary-600)' }}>
-                          €{formatCurrency(item.subtotal)}
-                        </p>
-                      </div>
-                    ))
-                  ) : (
-                    <div className="text-center py-8 rounded-xl border-2 border-dashed" style={{
-                      borderColor: 'var(--border-primary)',
-                      color: 'var(--text-secondary)'
-                    }}>
-                      <FileText className="w-12 h-12 mx-auto mb-2 opacity-30" />
-                      <p>{t('purchase_orders:no_items')}</p>
-                    </div>
-                  )}
-                </div>
-              </div>
 
-              {/* Notes */}
+    return sections;
-              {po.notes && (
+  };
-                <div className="rounded-xl p-5 border-l-4" style={{
-                  backgroundColor: 'var(--color-info-50)',
-                  borderLeftColor: 'var(--color-info-500)',
-                  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)'
-                }}>
-                  <div className="flex items-center gap-2 mb-3">
-                    <div className="p-1.5 rounded-lg" style={{ backgroundColor: 'var(--color-info-100)' }}>
-                      <AlertCircle className="w-5 h-5" style={{ color: 'var(--color-info-600)' }} />
-                    </div>
-                    <h3 className="font-semibold text-sm uppercase tracking-wide" style={{ color: 'var(--color-info-700)' }}>
-                      {t('purchase_orders:notes')}
-                    </h3>
-                  </div>
-                  <p className="text-sm leading-relaxed ml-1" style={{ color: 'var(--text-primary)' }}>{po.notes}</p>
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="text-center py-12">
-              <p style={{ color: 'var(--text-secondary)' }}>{t('purchase_orders:not_found')}</p>
-            </div>
-          )}
-        </div>
 
-        {/* Footer Actions */}
+  // Build sections for edit mode
-        {po && po.status === 'pending_approval' && (
+  const buildEditSections = (): EditViewModalSection[] => {
-          <div
+    if (!po) return [];
-            className="flex justify-end gap-3 p-6 border-t bg-gradient-to-r from-transparent to-transparent"
+
-            style={{
+    return [
-              borderColor: 'var(--border-primary)',
+      {
-              background: 'linear-gradient(to right, var(--bg-secondary), var(--bg-primary))'
+        title: t('supplier_info'),
-            }}
+        icon: Building2,
-          >
+        fields: [
-            <button
+          {
-              onClick={() => {
+            label: t('supplier'),
-                onModify?.(poId);
+            value: po.supplier?.name || t('common:unknown'),
-                onClose();
+            type: 'text' as const,
-              }}
+            editable: false,
-              className="px-6 py-2.5 rounded-xl font-semibold transition-all hover:scale-105 hover:shadow-md border"
+            helpText: t('supplier_cannot_modify')
-              style={{
+          }
-                backgroundColor: 'var(--bg-primary)',
+        ]
-                color: 'var(--text-primary)',
+      },
-                borderColor: 'var(--border-primary)'
+      {
-              }}
+        title: t('order_details'),
-            >
+        icon: Calendar,
-              {t('purchase_orders:actions.modify')}
+        fields: [
-            </button>
+          {
-            <button
+            label: t('priority'),
-              onClick={() => {
+            value: po.priority,
+            type: 'select' as const,
+            editable: true,
+            options: priorityOptions,
+            helpText: t('adjust_priority')
+          },
+          {
+            label: t('required_delivery_date'),
+            value: po.required_delivery_date || '',
+            type: 'date' as const,
+            editable: true,
+            helpText: t('delivery_deadline')
+          },
+          {
+            label: t('notes'),
+            value: po.notes || '',
+            type: 'textarea' as const,
+            editable: true,
+            placeholder: t('special_instructions'),
+            span: 2,
+            helpText: t('additional_info')
+          }
+        ]
+      },
+      {
+        title: t('products'),
+        icon: Package,
+        fields: [
+          {
+            label: t('products'),
+            value: (po.items || []).map((item: PurchaseOrderItem) => ({
+              id: item.id,
+              inventory_product_id: item.inventory_product_id,
+              product_code: item.product_code || '',
+              product_name: item.product_name || '',
+              ordered_quantity: item.ordered_quantity,
+              unit_of_measure: item.unit_of_measure,
+              unit_price: parseFloat(item.unit_price),
+            })),
+            type: 'list' as const,
+            editable: true,
+            span: 2,
+            helpText: t('modify_quantities')
+          }
+        ]
+      }
+    ];
+  };
+
+  // Save handler for edit mode
+  const handleSave = async (formData: Record<string, any>) => {
+    try {
+      const items = formData.items || [];
+
+      if (items.length === 0) {
+        throw new Error(t('at_least_one_product'));
+      }
+
+      // Validate quantities
+      const invalidQuantities = items.some((item: any) => item.ordered_quantity <= 0);
+      if (invalidQuantities) {
+        throw new Error(t('quantities_greater_zero'));
+      }
+
+      // Validate required fields
+      const invalidProducts = items.some((item: any) => !item.product_name);
+      if (invalidProducts) {
+        throw new Error(t('products_need_names'));
+      }
+
+      // Prepare the update data
+      const updateData: any = {
+        notes: formData.notes || undefined,
+        priority: formData.priority || undefined,
+      };
+
+      // Add delivery date if changed
+      if (formData.required_delivery_date) {
+        updateData.required_delivery_date = formData.required_delivery_date;
+      }
+
+      // Update purchase order
+      await updatePurchaseOrderMutation.mutateAsync({
+        tenantId,
+        poId,
+        data: updateData
+      });
+
+      // Refetch data and switch back to view mode
+      await refetch();
+      setMode('view');
+    } catch (error) {
+      console.error('Error modifying purchase order:', error);
+      throw error;
+    }
+  };
+
+  // Build actions for modal footer - only Approve button for pending approval POs
+  const buildActions = () => {
+    if (!po) return undefined;
+
+    // Only show Approve button in view mode for pending approval POs
+    if (mode === 'view' && po.status === 'pending_approval') {
+      return [
+        {
+          label: t('actions.approve'),
+          icon: CheckCircle,
+          onClick: () => {
             onApprove?.(poId);
             onClose();
+          },
+          variant: 'primary' as const
+        }
+      ];
+    }
+
+    return undefined;
+  };
+
+  const sections = mode === 'view' ? buildViewSections() : buildEditSections();
+
+  return (
+    <EditViewModal
+      isOpen={isOpen}
+      onClose={() => {
+        setMode('view');
+        onClose();
       }}
-              className="px-6 py-2.5 rounded-xl font-semibold text-white transition-all hover:scale-105 hover:shadow-lg flex items-center gap-2"
+      mode={mode}
-              style={{
+      onModeChange={setMode}
-                backgroundColor: 'var(--color-primary-600)',
+      title={po?.po_number || t('purchase_order')}
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+      subtitle={po ? new Date(po.created_at).toLocaleDateString(i18n.language, {
-              }}
+        year: 'numeric',
-            >
+        month: 'long',
-              <CheckCircle className="w-4 h-4" />
+        day: 'numeric'
-              {t('purchase_orders:actions.approve')}
+      }) : undefined}
-            </button>
+      sections={sections}
-          </div>
+      actions={buildActions()}
-        )}
+      isLoading={isLoading}
-      </div>
+      size="lg"
-    </div>
+      // Enable edit mode via standard Edit button (only for pending approval)
+      onEdit={po?.status === 'pending_approval' ? () => setMode('edit') : undefined}
+      onSave={mode === 'edit' ? handleSave : undefined}
+      onCancel={mode === 'edit' ? () => setMode('view') : undefined}
+      saveLabel={t('actions.save')}
+      cancelLabel={t('actions.cancel')}
+    />
   );
 };

frontend/src/components/domain/procurement/CreatePurchaseOrderModal.tsx

@@ -2,11 +2,12 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { Plus, Package, Calendar, Building2 } from 'lucide-react';
 import { AddModal } from '../../ui/AddModal/AddModal';
 import { useSuppliers } from '../../../api/hooks/suppliers';
-import { useCreatePurchaseOrder } from '../../../api/hooks/suppliers';
+import { useCreatePurchaseOrder } from '../../../api/hooks/purchase-orders';
 import { useIngredients } from '../../../api/hooks/inventory';
 import { useTenantStore } from '../../../stores/tenant.store';
 import { suppliersService } from '../../../api/services/suppliers';
-import type { ProcurementRequirementResponse, PurchaseOrderItem } from '../../../api/types/orders';
+import type { ProcurementRequirementResponse } from '../../../api/types/orders';
+import type { PurchaseOrderItemCreate } from '../../../api/services/purchase_orders';
 import type { SupplierSummary } from '../../../api/types/suppliers';
 import type { IngredientResponse } from '../../../api/types/inventory';
 import { statusColors } from '../../../styles/colors';
@@ -127,7 +128,7 @@ export const CreatePurchaseOrderModal: React.FC<CreatePurchaseOrderModalProps> =
     setLoading(true);
 
     try {
-      let items: PurchaseOrderItem[] = [];
+      let items: PurchaseOrderItemCreate[] = [];
 
       if (requirements && requirements.length > 0) {
         // Create items from requirements list
@@ -149,13 +150,11 @@ export const CreatePurchaseOrderModal: React.FC<CreatePurchaseOrderModalProps> =
           const originalReq = requirements.find(req => req.id === item.id);
           return {
             inventory_product_id: originalReq?.product_id || '',
-            product_code: item.product_sku || '',
-            product_name: item.product_name,
             ordered_quantity: item.quantity,
             unit_of_measure: item.unit_of_measure,
-            unit_price: item.unit_price,
+            unit_price: String(item.unit_price || 0), // ✅ Convert to string for Decimal
             quality_requirements: originalReq?.quality_specifications ? JSON.stringify(originalReq.quality_specifications) : undefined,
-            notes: originalReq?.special_requirements || undefined
+            item_notes: originalReq?.special_requirements || undefined
           };
         });
       } else {
@@ -180,29 +179,27 @@ export const CreatePurchaseOrderModal: React.FC<CreatePurchaseOrderModalProps> =
 
         // Prepare purchase order items from manual entries with ingredient data
         items = manualProducts.map((item: any) => {
-          // Find the selected ingredient data
-          const selectedIngredient = ingredientsData.find(ing => ing.id === item.ingredient_id);
-
           return {
             inventory_product_id: item.ingredient_id,
-            product_code: selectedIngredient?.sku || '',
-            product_name: selectedIngredient?.name || 'Ingrediente desconocido',
             ordered_quantity: item.quantity,
             unit_of_measure: item.unit_of_measure,
-            unit_price: item.unit_price,
+            unit_price: String(item.unit_price || 0), // ✅ Convert to string for Decimal
             quality_requirements: undefined,
-            notes: undefined
+            item_notes: undefined
           };
         });
       }
 
-      // Create purchase order
+      // Create purchase order using procurement service
       await createPurchaseOrderMutation.mutateAsync({
+        tenantId,
+        data: {
           supplier_id: formData.supplier_id,
           priority: 'normal',
           required_delivery_date: formData.delivery_date || undefined,
           notes: formData.notes || undefined,
           items
+        }
       });
 
       // Purchase order created successfully

frontend/src/locales/en/purchase_orders.json

@@ -3,13 +3,57 @@
   "purchase_orders": "Purchase Orders",
   "created": "Created",
   "supplier": "Supplier",
+  "supplier_name": "Supplier Name",
   "order_date": "Order Date",
   "expected_delivery": "Expected Delivery",
   "items": "Items",
   "no_items": "No items in this order",
   "notes": "Notes",
+  "order_notes": "Order Notes",
   "not_found": "Purchase order not found",
   "total_amount": "Total Amount",
+  "general_information": "General Information",
+  "financial_summary": "Financial Summary",
+  "dates": "Dates",
+  "po_number": "PO Number",
+  "status_label": "Status",
+  "quantity": "Quantity",
+  "unit_price": "Unit Price",
+  "quality_requirements": "Quality Requirements",
+  "total": "Total",
+  "priority": "Priority",
+  "required_delivery_date": "Required Delivery Date",
+  "supplier_info": "Supplier Information",
+  "order_details": "Order Details",
+  "products": "Products",
+  "modify_order": "Modify Purchase Order",
+  "modifying_order": "Modifying Order",
+  "supplier_cannot_modify": "Supplier cannot be modified",
+  "adjust_priority": "Adjust the priority of this order",
+  "delivery_deadline": "Delivery deadline",
+  "special_instructions": "Special instructions for supplier...",
+  "additional_info": "Additional information or special instructions",
+  "product": "Product",
+  "sku": "SKU",
+  "ordered_quantity": "Ordered Quantity",
+  "unit": "Unit",
+  "unit_price_euro": "Unit Price (€)",
+  "add_product": "Add Product",
+  "modify_quantities": "Modify quantities, units and prices as needed",
+  "at_least_one_product": "Please add at least one product",
+  "quantities_greater_zero": "All quantities must be greater than 0",
+  "products_need_names": "All products must have a name",
+  "priority_urgent": "Urgent",
+  "priority_high": "High",
+  "priority_normal": "Normal",
+  "priority_low": "Low",
+  "unit_kg": "Kilograms",
+  "unit_g": "Grams",
+  "unit_l": "Liters",
+  "unit_ml": "Milliliters",
+  "unit_units": "Units",
+  "unit_boxes": "Boxes",
+  "unit_bags": "Bags",
   "status": {
     "draft": "Draft",
     "pending_approval": "Pending Approval",
@@ -31,6 +75,8 @@
   "actions": {
     "approve": "Approve Order",
     "modify": "Modify Order",
-    "close": "Close"
+    "close": "Close",
+    "save": "Save Changes",
+    "cancel": "Cancel"
   }
 }

frontend/src/locales/es/purchase_orders.json

@@ -3,13 +3,57 @@
   "purchase_orders": "Órdenes de Compra",
   "created": "Creada",
   "supplier": "Proveedor",
+  "supplier_name": "Nombre del Proveedor",
   "order_date": "Fecha de Pedido",
   "expected_delivery": "Entrega Esperada",
   "items": "Artículos",
   "no_items": "No hay artículos en esta orden",
   "notes": "Notas",
+  "order_notes": "Notas de la Orden",
   "not_found": "Orden de compra no encontrada",
   "total_amount": "Monto Total",
+  "general_information": "Información General",
+  "financial_summary": "Resumen Financiero",
+  "dates": "Fechas",
+  "po_number": "Número de Orden",
+  "status_label": "Estado",
+  "quantity": "Cantidad",
+  "unit_price": "Precio Unitario",
+  "quality_requirements": "Requisitos de Calidad",
+  "total": "Total",
+  "priority": "Prioridad",
+  "required_delivery_date": "Fecha de Entrega Requerida",
+  "supplier_info": "Información del Proveedor",
+  "order_details": "Detalles de la Orden",
+  "products": "Productos",
+  "modify_order": "Modificar Orden de Compra",
+  "modifying_order": "Modificando Orden",
+  "supplier_cannot_modify": "El proveedor no puede ser modificado",
+  "adjust_priority": "Ajusta la prioridad de esta orden",
+  "delivery_deadline": "Fecha límite para la entrega",
+  "special_instructions": "Instrucciones especiales para el proveedor...",
+  "additional_info": "Información adicional o instrucciones especiales",
+  "product": "Producto",
+  "sku": "SKU",
+  "ordered_quantity": "Cantidad Pedida",
+  "unit": "Unidad",
+  "unit_price_euro": "Precio Unitario (€)",
+  "add_product": "Agregar Producto",
+  "modify_quantities": "Modifica las cantidades, unidades y precios según sea necesario",
+  "at_least_one_product": "Por favor, agrega al menos un producto",
+  "quantities_greater_zero": "Todas las cantidades deben ser mayores a 0",
+  "products_need_names": "Todos los productos deben tener un nombre",
+  "priority_urgent": "Urgente",
+  "priority_high": "Alta",
+  "priority_normal": "Normal",
+  "priority_low": "Baja",
+  "unit_kg": "Kilogramos",
+  "unit_g": "Gramos",
+  "unit_l": "Litros",
+  "unit_ml": "Mililitros",
+  "unit_units": "Unidades",
+  "unit_boxes": "Cajas",
+  "unit_bags": "Bolsas",
   "status": {
     "draft": "Borrador",
     "pending_approval": "Pendiente de Aprobación",
@@ -31,6 +75,8 @@
   "actions": {
     "approve": "Aprobar Orden",
     "modify": "Modificar Orden",
-    "close": "Cerrar"
+    "close": "Cerrar",
+    "save": "Guardar Cambios",
+    "cancel": "Cancelar"
   }
 }

frontend/src/locales/eu/purchase_orders.json

@@ -3,13 +3,57 @@
   "purchase_orders": "Erosketa Aginduak",
   "created": "Sortua",
   "supplier": "Hornitzailea",
+  "supplier_name": "Hornitzailearen Izena",
   "order_date": "Eskabidearen Data",
   "expected_delivery": "Espero den Entrega",
   "items": "Produktuak",
   "no_items": "Ez dago produkturik eskaera honetan",
   "notes": "Oharrak",
+  "order_notes": "Eskaeraren Oharrak",
   "not_found": "Erosketa agindua ez da aurkitu",
   "total_amount": "Guztira",
+  "general_information": "Informazio Orokorra",
+  "financial_summary": "Finantza Laburpena",
+  "dates": "Datak",
+  "po_number": "Agindu Zenbakia",
+  "status_label": "Egoera",
+  "quantity": "Kopurua",
+  "unit_price": "Unitate Prezioa",
+  "quality_requirements": "Kalitate Baldintzak",
+  "total": "Guztira",
+  "priority": "Lehentasuna",
+  "required_delivery_date": "Beharrezko Entrega Data",
+  "supplier_info": "Hornitzailearen Informazioa",
+  "order_details": "Eskaeraren Xehetasunak",
+  "products": "Produktuak",
+  "modify_order": "Erosketa Agindua Aldatu",
+  "modifying_order": "Agindua Aldatzen",
+  "supplier_cannot_modify": "Hornitzailea ezin da aldatu",
+  "adjust_priority": "Doitu eskaera honen lehentasuna",
+  "delivery_deadline": "Entregaren muga data",
+  "special_instructions": "Hornitzailearentzako jarraibide bereziak...",
+  "additional_info": "Informazio gehigarria edo jarraibide bereziak",
+  "product": "Produktua",
+  "sku": "SKU",
+  "ordered_quantity": "Eskatutako Kopurua",
+  "unit": "Unitatea",
+  "unit_price_euro": "Unitate Prezioa (€)",
+  "add_product": "Produktua Gehitu",
+  "modify_quantities": "Aldatu kopuruak, unitateak eta prezioak behar den bezala",
+  "at_least_one_product": "Mesedez, gehitu gutxienez produktu bat",
+  "quantities_greater_zero": "Kopuru guztiak 0 baino handiagoak izan behar dira",
+  "products_need_names": "Produktu guztiek izena izan behar dute",
+  "priority_urgent": "Premiazkoa",
+  "priority_high": "Altua",
+  "priority_normal": "Normala",
+  "priority_low": "Baxua",
+  "unit_kg": "Kilogramoak",
+  "unit_g": "Gramoak",
+  "unit_l": "Litroak",
+  "unit_ml": "Mililitroak",
+  "unit_units": "Unitateak",
+  "unit_boxes": "Kutxak",
+  "unit_bags": "Poltsak",
   "status": {
     "draft": "Zirriborroa",
     "pending_approval": "Onarpenaren Zain",
@@ -31,6 +75,8 @@
   "actions": {
     "approve": "Agindua Onartu",
     "modify": "Agindua Aldatu",
-    "close": "Itxi"
+    "close": "Itxi",
+    "save": "Aldaketak Gorde",
+    "cancel": "Ezeztatu"
   }
 }

frontend/src/pages/app/DashboardPage.tsx

@@ -37,7 +37,6 @@ 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,10 +56,7 @@ export function NewDashboardPage() {
   // PO Details Modal state
   const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
   const [isPOModalOpen, setIsPOModalOpen] = useState(false);
-
+  const [poModalMode, setPOModalMode] = useState<'view' | 'edit'>('view');
-  // PO Modify Modal state
-  const [modifyPOId, setModifyPOId] = useState<string | null>(null);
-  const [isModifyPOModalOpen, setIsModifyPOModalOpen] = useState(false);
 
   // Data fetching
   const {
@@ -128,12 +124,6 @@ export function NewDashboardPage() {
     setIsPOModalOpen(true);
   };
 
-  const handleModify = (actionId: string) => {
-    // Open modal to modify PO
-    setModifyPOId(actionId);
-    setIsModifyPOModalOpen(true);
-  };
-
   const handleStartBatch = async (batchId: string) => {
     try {
       await startBatch.mutateAsync({ tenantId, batchId });
@@ -283,7 +273,6 @@ export function NewDashboardPage() {
               onApprove={handleApprove}
               onReject={handleReject}
               onViewDetails={handleViewDetails}
-              onModify={handleModify}
               tenantId={tenantId}
             />
           </div>
@@ -366,35 +355,20 @@ export function NewDashboardPage() {
         onComplete={handleAddWizardComplete}
       />
 
-      {/* Purchase Order Details Modal */}
+      {/* Purchase Order Details Modal - Unified View/Edit */}
       {selectedPOId && (
         <PurchaseOrderDetailsModal
           poId={selectedPOId}
           tenantId={tenantId}
           isOpen={isPOModalOpen}
+          initialMode={poModalMode}
           onClose={() => {
             setIsPOModalOpen(false);
             setSelectedPOId(null);
-          }}
+            setPOModalMode('view');
-          onApprove={handleApprove}
-          onModify={handleModify}
-        />
-      )}
-
-      {/* Modify Purchase Order Modal */}
-      {modifyPOId && (
-        <ModifyPurchaseOrderModal
-          poId={modifyPOId}
-          isOpen={isModifyPOModalOpen}
-          onClose={() => {
-            setIsModifyPOModalOpen(false);
-            setModifyPOId(null);
-          }}
-          onSuccess={() => {
-            setIsModifyPOModalOpen(false);
-            setModifyPOId(null);
             handleRefreshAll();
           }}
+          onApprove={handleApprove}
         />
       )}
     </div>