New alert service

frontend/src/pages/app/EnterpriseDashboardPage.tsx

@@ -5,57 +5,82 @@
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useQuery, useQueries } from '@tanstack/react-query';
 import {
   useNetworkSummary,
   useChildrenPerformance,
   useDistributionOverview,
   useForecastSummary
-} from '../../api/hooks/enterprise';
+} from '../../api/hooks/useEnterpriseDashboard';
 import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/Card';
-import { Badge } from '../../components/ui/Badge';
 import { Button } from '../../components/ui/Button';
 import {
-  Users,
-  ShoppingCart,
   TrendingUp,
   MapPin,
   Truck,
   Package,
   BarChart3,
   Network,
-  Store,
   Activity,
   Calendar,
   Clock,
-  CheckCircle,
   AlertTriangle,
   PackageCheck,
   Building2,
-  DollarSign
+  ArrowLeft,
+  ChevronRight
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner';
 import { ErrorBoundary } from 'react-error-boundary';
 import { apiClient } from '../../api/client/apiClient';
+import { useEnterprise } from '../../contexts/EnterpriseContext';
+import { useTenant } from '../../stores/tenant.store';
 
 // Components for enterprise dashboard
 const NetworkSummaryCards = React.lazy(() => import('../../components/dashboard/NetworkSummaryCards'));
 const DistributionMap = React.lazy(() => import('../../components/maps/DistributionMap'));
 const PerformanceChart = React.lazy(() => import('../../components/charts/PerformanceChart'));
 
-const EnterpriseDashboardPage = () => {
-  const { tenantId } = useParams();
+interface EnterpriseDashboardPageProps {
+  tenantId?: string;
+}
+
+const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenantId: propTenantId }) => {
+  const { tenantId: urlTenantId } = useParams<{ tenantId: string }>();
+  const tenantId = propTenantId || urlTenantId;
   const navigate = useNavigate();
   const { t } = useTranslation('dashboard');
+  const { state: enterpriseState, drillDownToOutlet, returnToNetworkView, enterNetworkView } = useEnterprise();
+  const { switchTenant } = useTenant();
 
   const [selectedMetric, setSelectedMetric] = useState('sales');
   const [selectedPeriod, setSelectedPeriod] = useState(30);
   const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
 
+  // Check if tenantId is available at the start
+  useEffect(() => {
+    if (!tenantId) {
+      console.error('No tenant ID available for enterprise dashboard');
+      navigate('/unauthorized');
+    }
+  }, [tenantId, navigate]);
+
+  // Initialize enterprise mode on mount
+  useEffect(() => {
+    if (tenantId && !enterpriseState.parentTenantId) {
+      enterNetworkView(tenantId);
+    }
+  }, [tenantId, enterpriseState.parentTenantId, enterNetworkView]);
+
   // Check if user has enterprise tier access
   useEffect(() => {
     const checkAccess = async () => {
+      if (!tenantId) {
+        console.error('No tenant ID available for enterprise dashboard');
+        navigate('/unauthorized');
+        return;
+      }
+
       try {
         const response = await apiClient.get<{ tenant_type: string }>(`/tenants/${tenantId}`);
 
@@ -78,6 +103,7 @@ const EnterpriseDashboardPage = () => {
     error: networkSummaryError
   } = useNetworkSummary(tenantId!, {
     refetchInterval: 60000, // Refetch every minute
+    enabled: !!tenantId, // Only fetch if tenantId is available
   });
 
   // Fetch children performance data
@@ -85,7 +111,9 @@ const EnterpriseDashboardPage = () => {
     data: childrenPerformance,
     isLoading: isChildrenPerformanceLoading,
     error: childrenPerformanceError
-  } = useChildrenPerformance(tenantId!, selectedMetric, selectedPeriod);
+  } = useChildrenPerformance(tenantId!, selectedMetric, selectedPeriod, {
+    enabled: !!tenantId, // Only fetch if tenantId is available
+  });
 
   // Fetch distribution overview data
   const {
@@ -94,6 +122,7 @@ const EnterpriseDashboardPage = () => {
     error: distributionError
   } = useDistributionOverview(tenantId!, selectedDate, {
     refetchInterval: 60000, // Refetch every minute
+    enabled: !!tenantId, // Only fetch if tenantId is available
   });
 
   // Fetch enterprise forecast summary
@@ -101,7 +130,36 @@ const EnterpriseDashboardPage = () => {
     data: forecastSummary,
     isLoading: isForecastLoading,
     error: forecastError
-  } = useForecastSummary(tenantId!);
+  } = useForecastSummary(tenantId!, 7, {
+    enabled: !!tenantId, // Only fetch if tenantId is available
+  });
+
+  // Handle outlet drill-down
+  const handleOutletClick = async (outletId: string, outletName: string) => {
+    // Calculate network metrics if available
+    const networkMetrics = childrenPerformance?.rankings ? {
+      totalSales: childrenPerformance.rankings.reduce((sum, r) => sum + (selectedMetric === 'sales' ? r.metric_value : 0), 0),
+      totalProduction: 0,
+      totalInventoryValue: childrenPerformance.rankings.reduce((sum, r) => sum + (selectedMetric === 'inventory_value' ? r.metric_value : 0), 0),
+      averageSales: childrenPerformance.rankings.reduce((sum, r) => sum + (selectedMetric === 'sales' ? r.metric_value : 0), 0) / childrenPerformance.rankings.length,
+      averageProduction: 0,
+      averageInventoryValue: childrenPerformance.rankings.reduce((sum, r) => sum + (selectedMetric === 'inventory_value' ? r.metric_value : 0), 0) / childrenPerformance.rankings.length,
+      childCount: childrenPerformance.rankings.length
+    } : undefined;
+
+    drillDownToOutlet(outletId, outletName, networkMetrics);
+    await switchTenant(outletId);
+    navigate('/app/dashboard');
+  };
+
+  // Handle return to network view
+  const handleReturnToNetwork = async () => {
+    if (enterpriseState.parentTenantId) {
+      returnToNetworkView();
+      await switchTenant(enterpriseState.parentTenantId);
+      navigate(`/app/enterprise/${enterpriseState.parentTenantId}`);
+    }
+  };
 
   // Error boundary fallback
   const ErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) => (
@@ -142,18 +200,77 @@ const EnterpriseDashboardPage = () => {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <div className="p-6 min-h-screen bg-gray-50">
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-center gap-3 mb-2">
-            <Network className="w-8 h-8 text-blue-600" />
-            <h1 className="text-3xl font-bold text-gray-900">
-              {t('enterprise.network_dashboard')}
-            </h1>
+      <div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+        {/* Breadcrumb / Return to Network Banner */}
+        {enterpriseState.selectedOutletId && !enterpriseState.isNetworkView && (
+          <div className="mb-6 rounded-lg p-4" style={{
+            backgroundColor: 'var(--color-info-light, #dbeafe)',
+            borderColor: 'var(--color-info, #3b82f6)',
+            borderWidth: '1px',
+            borderStyle: 'solid'
+          }}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Network className="w-5 h-5" style={{ color: 'var(--color-info)' }} />
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="font-medium" style={{ color: 'var(--color-info)' }}>Network Overview</span>
+                  <ChevronRight className="w-4 h-4" style={{ color: 'var(--color-info-light, #93c5fd)' }} />
+                  <span className="text-gray-700 font-semibold">{enterpriseState.selectedOutletName}</span>
+                </div>
+              </div>
+              <Button
+                onClick={handleReturnToNetwork}
+                variant="outline"
+                size="sm"
+                className="flex items-center gap-2"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Return to Network View
+              </Button>
+            </div>
+            {enterpriseState.networkMetrics && (
+              <div className="mt-3 pt-3 border-t grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm"
+                   style={{ borderColor: 'var(--color-info-light, #93c5fd)' }}>
+                <div>
+                  <span style={{ color: 'var(--color-info)' }}>Network Average Sales:</span>
+                  <span className="ml-2 font-semibold">€{enterpriseState.networkMetrics.averageSales.toLocaleString()}</span>
+                </div>
+                <div>
+                  <span style={{ color: 'var(--color-info)' }}>Total Outlets:</span>
+                  <span className="ml-2 font-semibold">{enterpriseState.networkMetrics.childCount}</span>
+                </div>
+                <div>
+                  <span style={{ color: 'var(--color-info)' }}>Network Total:</span>
+                  <span className="ml-2 font-semibold">€{enterpriseState.networkMetrics.totalSales.toLocaleString()}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Enhanced Header */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            {/* Title Section with Gradient Icon */}
+            <div className="flex items-center gap-4">
+              <div
+                className="w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg"
+                style={{
+                  background: 'linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%)',
+                }}
+              >
+                <Network className="w-8 h-8 text-white" />
+              </div>
+              <div>
+                <h1 className="text-4xl font-bold" style={{ color: 'var(--text-primary)' }}>
+                  {t('enterprise.network_dashboard')}
+                </h1>
+                <p className="mt-1" style={{ color: 'var(--text-secondary)' }}>
+                  {t('enterprise.network_summary_description')}
+                </p>
+              </div>
+            </div>
           </div>
-          <p className="text-gray-600">
-            {t('enterprise.network_summary_description')}
-          </p>
         </div>
 
         {/* Network Summary Cards */}
@@ -234,6 +351,7 @@ const EnterpriseDashboardPage = () => {
                     data={childrenPerformance.rankings}
                     metric={selectedMetric}
                     period={selectedPeriod}
+                    onOutletClick={handleOutletClick}
                   />
                 ) : (
                   <div className="h-96 flex items-center justify-center text-gray-500">
@@ -254,34 +372,78 @@ const EnterpriseDashboardPage = () => {
             </CardHeader>
             <CardContent>
               {forecastSummary && forecastSummary.aggregated_forecasts ? (
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                  <div className="bg-blue-50 p-4 rounded-lg">
-                    <div className="flex items-center gap-2 mb-1">
-                      <Package className="w-4 h-4 text-blue-600" />
-                      <h3 className="font-semibold text-blue-800">{t('enterprise.total_demand')}</h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                  {/* Total Demand Card */}
+                  <div
+                    className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
+                    style={{
+                      backgroundColor: 'var(--color-info-50)',
+                      borderColor: 'var(--color-info-200)',
+                    }}
+                  >
+                    <div className="flex items-center gap-3 mb-3">
+                      <div
+                        className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
+                        style={{ backgroundColor: 'var(--color-info-100)' }}
+                      >
+                        <Package className="w-5 h-5" style={{ color: 'var(--color-info-600)' }} />
+                      </div>
+                      <h3 className="font-semibold text-sm" style={{ color: 'var(--color-info-800)' }}>
+                        {t('enterprise.total_demand')}
+                      </h3>
                     </div>
-                    <p className="text-2xl font-bold text-blue-900">
+                    <p className="text-3xl font-bold" style={{ color: 'var(--color-info-900)' }}>
                       {Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
                         total + Object.values(day).reduce((dayTotal: number, product: any) =>
                           dayTotal + (product.predicted_demand || 0), 0), 0
                       ).toLocaleString()}
                     </p>
                   </div>
-                  <div className="bg-green-50 p-4 rounded-lg">
-                    <div className="flex items-center gap-2 mb-1">
-                      <Calendar className="w-4 h-4 text-green-600" />
-                      <h3 className="font-semibold text-green-800">{t('enterprise.days_forecast')}</h3>
+
+                  {/* Days Forecast Card */}
+                  <div
+                    className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
+                    style={{
+                      backgroundColor: 'var(--color-success-50)',
+                      borderColor: 'var(--color-success-200)',
+                    }}
+                  >
+                    <div className="flex items-center gap-3 mb-3">
+                      <div
+                        className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
+                        style={{ backgroundColor: 'var(--color-success-100)' }}
+                      >
+                        <Calendar className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
+                      </div>
+                      <h3 className="font-semibold text-sm" style={{ color: 'var(--color-success-800)' }}>
+                        {t('enterprise.days_forecast')}
+                      </h3>
                     </div>
-                    <p className="text-2xl font-bold text-green-900">
+                    <p className="text-3xl font-bold" style={{ color: 'var(--color-success-900)' }}>
                       {forecastSummary.days_forecast || 7}
                     </p>
                   </div>
-                  <div className="bg-purple-50 p-4 rounded-lg">
-                    <div className="flex items-center gap-2 mb-1">
-                      <Activity className="w-4 h-4 text-purple-600" />
-                      <h3 className="font-semibold text-purple-800">{t('enterprise.avg_daily_demand')}</h3>
+
+                  {/* Average Daily Demand Card */}
+                  <div
+                    className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
+                    style={{
+                      backgroundColor: 'var(--color-secondary-50)',
+                      borderColor: 'var(--color-secondary-200)',
+                    }}
+                  >
+                    <div className="flex items-center gap-3 mb-3">
+                      <div
+                        className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
+                        style={{ backgroundColor: 'var(--color-secondary-100)' }}
+                      >
+                        <Activity className="w-5 h-5" style={{ color: 'var(--color-secondary-600)' }} />
+                      </div>
+                      <h3 className="font-semibold text-sm" style={{ color: 'var(--color-secondary-800)' }}>
+                        {t('enterprise.avg_daily_demand')}
+                      </h3>
                     </div>
-                    <p className="text-2xl font-bold text-purple-900">
+                    <p className="text-3xl font-bold" style={{ color: 'var(--color-secondary-900)' }}>
                       {forecastSummary.aggregated_forecasts
                         ? Math.round(Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
                           total + Object.values(day).reduce((dayTotal: number, product: any) =>
@@ -291,12 +453,27 @@ const EnterpriseDashboardPage = () => {
                         : 0}
                     </p>
                   </div>
-                  <div className="bg-yellow-50 p-4 rounded-lg">
-                    <div className="flex items-center gap-2 mb-1">
-                      <Clock className="w-4 h-4 text-yellow-600" />
-                      <h3 className="font-semibold text-yellow-800">{t('enterprise.last_updated')}</h3>
+
+                  {/* Last Updated Card */}
+                  <div
+                    className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
+                    style={{
+                      backgroundColor: 'var(--color-warning-50)',
+                      borderColor: 'var(--color-warning-200)',
+                    }}
+                  >
+                    <div className="flex items-center gap-3 mb-3">
+                      <div
+                        className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
+                        style={{ backgroundColor: 'var(--color-warning-100)' }}
+                      >
+                        <Clock className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
+                      </div>
+                      <h3 className="font-semibold text-sm" style={{ color: 'var(--color-warning-800)' }}>
+                        {t('enterprise.last_updated')}
+                      </h3>
                     </div>
-                    <p className="text-sm text-yellow-900">
+                    <p className="text-lg font-semibold" style={{ color: 'var(--color-warning-900)' }}>
                       {forecastSummary.last_updated ?
                         new Date(forecastSummary.last_updated).toLocaleTimeString() :
                         'N/A'}
@@ -313,7 +490,7 @@ const EnterpriseDashboardPage = () => {
         </div>
 
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card>
             <CardContent className="p-6">
               <div className="flex items-center gap-3 mb-4">