Add alerts ssytems to the frontend

frontend/src/pages/app/operations/production/ProductionPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { Plus, Clock, AlertCircle, CheckCircle, Timer, ChefHat, Eye, Edit, Package } from 'lucide-react';
 import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
+import { statusColors } from '../../../../styles/colors';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { LoadingSpinner } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
@@ -82,13 +83,32 @@ const ProductionPage: React.FC = () => {
     const isUrgent = priority === ProductionPriorityEnum.URGENT;
     const isCritical = status === ProductionStatusEnum.FAILED || (status === ProductionStatusEnum.PENDING && isUrgent);
 
+    // Map production statuses to global status colors
+    const getStatusColorForProduction = (status: ProductionStatusEnum) => {
+      // Handle both uppercase (backend) and lowercase (frontend) status values
+      const normalizedStatus = status.toLowerCase();
+
+      switch (normalizedStatus) {
+        case 'pending':
+          return statusColors.pending.primary;
+        case 'in_progress':
+          return statusColors.inProgress.primary;
+        case 'completed':
+          return statusColors.completed.primary;
+        case 'cancelled':
+        case 'failed':
+          return statusColors.cancelled.primary;
+        case 'on_hold':
+          return statusColors.pending.primary;
+        case 'quality_check':
+          return statusColors.inProgress.primary;
+        default:
+          return statusColors.other.primary;
+      }
+    };
+
     return {
-      color: getStatusColor(
-        status === ProductionStatusEnum.COMPLETED ? 'completed' :
-        status === ProductionStatusEnum.PENDING ? 'pending' :
-        status === ProductionStatusEnum.CANCELLED || status === ProductionStatusEnum.FAILED ? 'cancelled' :
-        'in_progress'
-      ),
+      color: getStatusColorForProduction(status),
       text: productionEnums.getProductionStatusLabel(status),
       icon: Icon,
       isCritical,