Analytics Dashboard

interface AnalyticsDashboard {
  // KPI Cards
  totalRevenue: number;
  averageTicket: number;
  satisfaction: {
    nps: number;
    food: number;
    service: number;
    ambience: number;
  };
  
  // Charts
  revenueByPeriod: Array<{ period: string; revenue: number; pax: number }>;
  topDishes: Array<{ name: string; sales: number; percent: number }>;
  hourlyOccupancy: Array<{ day: number; hour: string; intensity: number; count: number }>;
  
  // Performance
  satisfaction: {
    waiter_ranking: Array<{ name: string; score: number; reviews: number }>;
    detractors: Array<{ table: string; date: string; comment: string; nps: number }>;
  };
}

<div className="h-64 flex items-end justify-between gap-2">
  {data?.revenueByPeriod?.map((item, i) => {
    const max = Math.max(...data.revenueByPeriod.map(p => p.revenue), 100);
    const height = Math.max((item.revenue / max) * 100, 8);
    
    return (
      <motion.div
        initial={{ height: 0 }}
        animate={{ height: `${height}%` }}
        className="flex-1 bg-gradient-to-t from-[var(--brand-primary)] to-[var(--brand-secondary)]"
      />
    );
  })}
</div>

{data?.topDishes?.map((item, i) => (
  <div key={i}>
    <div className="flex justify-between mb-2">
      <span className="font-semibold">{item.name}</span>
      <span className="font-mono">€{item.sales.toLocaleString()}</span>
    </div>
    <motion.div
      initial={{ width: 0 }}
      animate={{ width: `${item.percent}%` }}
      className="h-2.5 bg-gradient-to-r from-[var(--brand-primary)] to-[var(--brand-secondary)]"
    />
  </div>
))}

<div className="grid grid-cols-8 gap-1.5">
  <div className="h-8"></div>
  {['L', 'M', 'X', 'J', 'V', 'S', 'D'].map(d => (
    <div key={d} className="font-bold">{d}</div>
  ))}
  {[13, 14, 15, 20, 21, 22].map((hour) => (
    <>
      <div className="flex items-center">{hour}h</div>
      {[0, 1, 2, 3, 4, 5, 6].map(day => {
        const point = data?.hourlyOccupancy?.find(
          p => p.day === day && p.hour === `${hour}:00`
        );
        return <HeatmapCell intensity={point?.intensity || 0} count={point?.count || 0} />;
      })}
    </>
  ))}
</div>

interface DemandAnalysis {
  patterns: {
    byDay: Array<{        // Weekly patterns
      dayOfWeek: number;
      dayName: string;
      avgReservations: number;
      avgPax: number;
    }>;
    byHour: Array<{       // Hourly patterns
      hour: number;
      label: string;
      avgReservations: number;
    }>;
  };
  
  predictions: Array<{   // 7-day forecast
    date: string;
    dayName: string;
    predictedReservations: number;
    predictedPax: number;
    predictedRevenue: number;
    staffRecommendation: number;
    peakHours: string[];
    alerts: string[];
    confidence: number;   // 0-100%
  }>;
  
  insights: {
    avgDailyReservations: number;
    avgDailyPax: number;
    bestDay: string;
    worstDay: string;
    peakHour: string;
    weeklyTrend: number;  // % change
  };
  
  recommendations: string[];
}

// Example: Saturday is busiest day
patterns.byDay.find(d => d.dayOfWeek === 6);
// { dayName: "Sábado", avgReservations: 58, avgPax: 142 }

// Example: 21:00 is peak dinner hour
patterns.byHour.find(h => h.hour === 21);
// { hour: 21, label: "21h", avgReservations: 24 }

const [selectedLocation, setSelectedLocation] = useState<string>('all');

<select 
  value={selectedLocation} 
  onChange={(e) => setSelectedLocation(e.target.value)}
>
  <option value="all">Todas las Ubicaciones</option>
  {locations.map(l => (
    <option key={l.id} value={l.id}>{l.name}</option>
  ))}
</select>

interface LocationStats {
  locationId: string;
  locationName: string;
  revenue: number;
  reservations: number;
  averageTicket: number;
  nps: number;
  growth: number;  // % vs previous period
}

interface WaiterPerformance {
  name: string;
  score: number;      // Average rating 0-10
  reviews: number;    // Number of reviews
  rank: number;       // Position in ranking
}

// Display with medals for top 3
const medals = ['🥇', '🥈', '🥉'];

interface DishAnalytics {
  name: string;
  sales: number;      // Total revenue
  orders: number;     // Number of orders
  percent: number;    // % of total sales
}