New alert service

frontend/src/components/charts/PerformanceChart.tsx

@@ -1,32 +1,33 @@
 /*
  * Performance Chart Component for Enterprise Dashboard
- * Shows anonymized performance ranking of child outlets
+ * Shows performance ranking of child outlets with clickable names
  */
 
 import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/Card';
 import { Badge } from '../ui/Badge';
-import { BarChart3, TrendingUp, TrendingDown, ArrowUp, ArrowDown } from 'lucide-react';
+import { BarChart3, TrendingUp, TrendingDown, ArrowUp, ArrowDown, ExternalLink, Package, ShoppingCart } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 interface PerformanceDataPoint {
   rank: number;
   tenant_id: string;
-  anonymized_name: string;  // "Outlet 1", "Outlet 2", etc.
+  outlet_name: string;
   metric_value: number;
-  original_name?: string;  // Only for internal use, not displayed
 }
 
 interface PerformanceChartProps {
   data: PerformanceDataPoint[];
   metric: string;
   period: number;
+  onOutletClick?: (tenantId: string, outletName: string) => void;
 }
 
-const PerformanceChart: React.FC<PerformanceChartProps> = ({ 
-  data = [], 
-  metric, 
-  period 
+const PerformanceChart: React.FC<PerformanceChartProps> = ({
+  data = [],
+  metric,
+  period,
+  onOutletClick
 }) => {
   const { t } = useTranslation('dashboard');
 
@@ -94,14 +95,31 @@ const PerformanceChart: React.FC<PerformanceChartProps> = ({
                 <div key={item.tenant_id} className="space-y-2">
                   <div className="flex justify-between items-center">
                     <div className="flex items-center gap-3">
-                      <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
-                        isTopPerformer
-                          ? 'bg-yellow-100 text-yellow-800 border border-yellow-300'
-                          : 'bg-gray-100 text-gray-700'
-                      }`}>
+                      <div
+                        className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium"
+                        style={isTopPerformer ? {
+                          backgroundColor: 'var(--color-warning-light, #fef3c7)',
+                          color: 'var(--color-warning-dark, #92400e)',
+                          borderColor: 'var(--color-warning, #fbbf24)',
+                          borderWidth: '1px',
+                          borderStyle: 'solid'
+                        } : {
+                          backgroundColor: 'var(--bg-tertiary, #f1f5f9)',
+                          color: 'var(--text-secondary, #475569)'
+                        }}>
                         {item.rank}
                       </div>
-                      <span className="font-medium">{item.anonymized_name}</span>
+                      {onOutletClick ? (
+                        <button
+                          onClick={() => onOutletClick(item.tenant_id, item.outlet_name)}
+                          className="font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] hover:underline flex items-center gap-1.5 transition-colors"
+                        >
+                          {item.outlet_name}
+                          <ExternalLink className="w-3.5 h-3.5" />
+                        </button>
+                      ) : (
+                        <span className="font-medium">{item.outlet_name}</span>
+                      )}
                     </div>
                     <div className="flex items-center gap-2">
                       <span className="font-semibold">
@@ -114,15 +132,27 @@ const PerformanceChart: React.FC<PerformanceChartProps> = ({
                       )}
                     </div>
                   </div>
-                  <div className="w-full bg-gray-200 rounded-full h-3">
+                  <div className="w-full rounded-full h-3" style={{ backgroundColor: 'var(--bg-quaternary)' }}>
                     <div
-                      className={`h-3 rounded-full transition-all duration-500 ${
-                        isTopPerformer
-                          ? 'bg-gradient-to-r from-blue-500 to-purple-500'
-                          : 'bg-blue-400'
-                      }`}
-                      style={{ width: `${percentage}%` }}
-                    ></div>
+                      className="h-3 rounded-full transition-all duration-500 relative overflow-hidden"
+                      style={{
+                        width: `${percentage}%`,
+                        background: isTopPerformer
+                          ? 'linear-gradient(90deg, var(--chart-secondary) 0%, var(--chart-primary) 100%)'
+                          : 'var(--chart-secondary)'
+                      }}
+                    >
+                      {/* Shimmer effect for top performer */}
+                      {isTopPerformer && (
+                        <div
+                          className="absolute inset-0 animate-shimmer"
+                          style={{
+                            background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
+                            backgroundSize: '200% 100%',
+                          }}
+                        />
+                      )}
+                    </div>
                   </div>
                 </div>
               );