openship 0.1.1 → 0.1.7

package/apps/dashboard/src/components/overview/ActivityChart.tsx

@@ -1,247 +0,0 @@
-import React, { useState } from "react";
-import { Project } from "@/constants/mock";
-import { TrendingUp, BarChart3, Activity, Rocket, CheckCircle2, Clock, Zap } from "lucide-react";
-import { generateIcon } from "@/utils/icons";
-import { SlidingToggle } from "@/components/ui/SlidingToggle";
-
-interface ActivityChartProps {
-  projects: Project[];
-  numbers: any;
-}
-
-interface DayData {
-  date: Date;
-  label: string;
-  count: number;
-}
-
-type ChartType = 'bar' | 'line' | 'area';
-
-const ActivityChart: React.FC<ActivityChartProps> = ({ projects, numbers }) => {
-  const [chartType, setChartType] = useState<ChartType>('area');
-
-  // Generate last 7 days data using actual deployment analytics
-  const getLast7DaysData = (): DayData[] => {
-    const days: DayData[] = [];
-    const today = new Date();
-    
-    // Create array for last 7 days
-    for (let i = 6; i >= 0; i--) {
-      const date = new Date(today);
-      date.setDate(date.getDate() - i);
-      days.push({
-        date: date,
-        label: date.toLocaleDateString('en-US', { weekday: 'short' }),
-        count: 0
-      });
-    }
-    
-    // Map actual deployment data from numbers.daily_deployments
-    if (numbers?.daily_deployments && Array.isArray(numbers.daily_deployments)) {
-      numbers.daily_deployments.forEach((deployment: any) => {
-        if (deployment?.date && typeof deployment.count !== 'undefined') {
-          const deployDate = new Date(deployment.date);
-          const dayIndex = days.findIndex(day => 
-            day.date.toDateString() === deployDate.toDateString()
-          );
-          if (dayIndex !== -1) {
-            days[dayIndex].count = parseInt(deployment.count) || 0;
-          }
-        }
-      });
-    }
-    
-    // Debug log
-    console.log('Daily deployments data:', numbers?.daily_deployments);
-    console.log('Processed days:', days);
-    
-    return days;
-  };
-
-  const data = getLast7DaysData();
-  const maxCount = Math.max(...data.map(d => d.count), 1);
-  const totalDeployments = numbers.total_deployments;
-  const liveProjects = numbers.total_active_projects;
-  
-  // Calculate trend
-  const recentDays = data.slice(-3).reduce((sum, d) => sum + d.count, 0);
-  const olderDays = data.slice(0, 3).reduce((sum, d) => sum + d.count, 0);
-  const trend = recentDays > olderDays ? 'up' : recentDays < olderDays ? 'down' : 'stable';
-  const trendPercentage = olderDays > 0 ? Math.round(((recentDays - olderDays) / olderDays) * 100) : 0;
-
-  const renderChart = () => {
-    if (chartType === 'line') {
-      const points = data.map((day, index) => {
-        const height = maxCount > 0 ? (day.count / maxCount) * 100 : 0;
-        const x = (index / (data.length - 1)) * 100;
-        const y = 100 - (height || 0);
-        return `${x},${y}`;
-      }).join(' ');
-
-      return (
-        <svg className="w-full h-24" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <polyline
-            points={points}
-            fill="none"
-            stroke="var(--th-on-50)"
-            strokeWidth="2.5"
-            vectorEffect="non-scaling-stroke"
-          />
-          {data.map((day, index) => {
-            const height = maxCount > 0 ? (day.count / maxCount) * 100 : 0;
-            const x = (index / (data.length - 1)) * 100;
-            const y = 100 - (height || 0);
-            const isToday = index === data.length - 1;
-            
-            return (
-              <circle
-                key={index}
-                cx={x}
-                cy={y}
-                r="4"
-                fill={isToday ? 'var(--th-btn-bg)' : day.count > 0 ? 'var(--th-on-30)' : 'var(--th-sf-06)'}
-                stroke="var(--th-card-bg)"
-                strokeWidth="2"
-                vectorEffect="non-scaling-stroke"
-              />
-            );
-          })}
-        </svg>
-      );
-    }
-
-    if (chartType === 'area') {
-      const points = data.map((day, index) => {
-        const height = maxCount > 0 ? (day.count / maxCount) * 100 : 0;
-        const x = (index / (data.length - 1)) * 100;
-        const y = 100 - (height || 0);
-        return `${x},${y}`;
-      }).join(' ');
-
-      return (
-        <svg className="w-full h-24" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <defs>
-            <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-              <stop offset="0%" stopColor="var(--th-on-30)" stopOpacity="0.3" />
-              <stop offset="100%" stopColor="var(--th-on-30)" stopOpacity="0.05" />
-            </linearGradient>
-          </defs>
-          <polygon
-            points={`0,100 ${points} 100,100`}
-            fill="url(#areaGradient)"
-          />
-          <polyline
-            points={points}
-            fill="none"
-            stroke="var(--th-on-50)"
-            strokeWidth="2.5"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
-      );
-    }
-
-    // Default bar chart
-    return (
-      <div className="flex items-end justify-between gap-3 h-24">
-        {data.map((day, index) => {
-          const height = maxCount > 0 ? (day.count / maxCount) * 100 : 0;
-          const isToday = index === data.length - 1;
-          
-          return (
-            <div key={index} className="flex-1 flex flex-col items-center gap-2">
-              <div className="w-full relative group h-24 flex items-end">
-                {/* Tooltip */}
-                {day.count > 0 && (
-                  <div className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-primary text-primary-foreground text-xs px-3 py-1.5 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap font-medium z-10">
-                    {day.count} {day.count === 1 ? 'deployment' : 'deployments'}
-                  </div>
-                )}
-                
-                {/* Bar */}
-                <div
-                  className={`w-full rounded-t-xl transition-all duration-300 ${
-                    isToday 
-                      ? 'bg-primary shadow-lg shadow-primary/30' 
-                      : day.count > 0 
-                        ? 'bg-muted-foreground/40 group-hover:bg-muted-foreground/60' 
-                        : 'bg-muted/60'
-                  }`}
-                  style={{ height: height > 5 ? `${height}%` : height > 0 ? '8%' : '0%' }}
-                ></div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  return (
-    <div className="bg-card rounded-xl border border-border/50 flex flex-col overflow-hidden">
-      {/* Compact Header */}
-      <div className="relative bg-muted/40 px-5 py-4 border-b border-border/50">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-9 h-9 rounded-lg bg-muted flex items-center justify-center">
-              {generateIcon('space%20rocket-85-1687505546.png', 20, 'var(--th-text-muted)')}
-            </div>
-            <div>
-              <h3 className="text-sm font-medium text-foreground/80">Activity</h3>
-              <div className="flex items-baseline gap-2 mt-0.5">
-                <p className="text-xl font-semibold text-foreground">{totalDeployments}</p>
-                <span className="text-xs text-muted-foreground">this week</span>
-              </div>
-            </div>
-          </div>
-          
-          {/* Chart Type Selector */}
-          <SlidingToggle
-            options={[
-              {
-                value: 'bar',
-                icon: <BarChart3 className="w-4 h-4" />,
-              },
-              {
-                value: 'area',
-                icon: <TrendingUp className="w-4 h-4" />,
-              },
-            ]}
-            value={chartType}
-            onChange={(value) => setChartType(value as ChartType)}
-            variant="rounded"
-            selectedBg="bg-primary"
-            selectedTextColor="text-primary-foreground"
-            unselectedTextColor="text-muted-foreground"
-            backgroundColor="bg-card"
-            size="md"
-          />
-        </div>
-      </div>
-
-      {/* Chart Area - Compact */}
-      <div className="px-5 py-4">
-        <div className="mb-3">
-          {renderChart()}
-        </div>
-
-        {/* Day Labels */}
-        <div className="flex items-center justify-between gap-2">
-          {data.map((day, index) => {
-            const isToday = index === data.length - 1;
-            return (
-              <div key={index} className="flex-1 text-center">
-                <span className={`text-xs font-medium ${isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
-                  {day.label}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ActivityChart;
-

package/apps/dashboard/src/components/overview/ApiRequestsCard.tsx

@@ -1,111 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Cpu, ArrowUpRight, TrendingUp, TrendingDown } from 'lucide-react';
-import { ApiRequestData, DailyMetric } from './types';
-
-interface ApiRequestsCardProps {
-  data: ApiRequestData;
-  isLoading?: boolean;
-}
-
-const ApiRequestsCard: React.FC<ApiRequestsCardProps> = ({ data, isLoading = false }) => {
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-[20px] border border-black/5 p-6 h-full">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 bg-black/5 rounded-xl animate-pulse" />
-          <div className="space-y-2">
-            <div className="h-5 w-24 bg-black/5 rounded animate-pulse" />
-            <div className="h-4 w-16 bg-black/5 rounded animate-pulse" />
-          </div>
-        </div>
-        <div className="h-20 bg-black/5 rounded-xl animate-pulse" />
-      </div>
-    );
-  }
-
-  const formatNumber = (num: number): string => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num.toLocaleString();
-  };
-
-  // Mini bar chart
-  const renderMiniChart = (dailyData: DailyMetric[]) => {
-    if (!dailyData || dailyData.length === 0) return null;
-    
-    const maxValue = Math.max(...dailyData.map(d => d.value), 1);
-    
-    return (
-      <div className="flex items-end gap-1 h-16">
-        {dailyData.slice(-7).map((day, index) => {
-          const height = maxValue > 0 ? (day.value / maxValue) * 100 : 0;
-          const isToday = index === dailyData.slice(-7).length - 1;
-          
-          return (
-            <div
-              key={index}
-              className={`flex-1 rounded-t transition-all ${
-                isToday 
-                  ? 'bg-blue-500' 
-                  : 'bg-blue-200 hover:bg-blue-300'
-              }`}
-              style={{ height: `${Math.max(height, 4)}%` }}
-              title={`${formatNumber(day.value)} requests`}
-            />
-          );
-        })}
-      </div>
-    );
-  };
-
-  return (
-    <div className="bg-gradient-to-br from-blue-50/80 to-white rounded-[20px] border border-blue-100 p-6 h-full flex flex-col">
-      {/* Header */}
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
-            <Cpu className="w-5 h-5 text-blue-600" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-black">API Requests</h3>
-            <p className="text-xs text-black/40">Last 7 days</p>
-          </div>
-        </div>
-        
-        <Link 
-          href="/settings"
-          className="p-2 hover:bg-blue-100 rounded-lg transition-colors group"
-        >
-          <ArrowUpRight className="w-4 h-4 text-blue-600 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
-        </Link>
-      </div>
-
-      {/* Total */}
-      <div className="mb-4">
-        <div className="flex items-baseline gap-2">
-          <span className="text-3xl font-bold text-blue-600">{formatNumber(data.total)}</span>
-          {data.trend !== 0 && (
-            <span className={`flex items-center gap-0.5 text-xs font-medium ${
-              data.trend > 0 ? 'text-emerald-600' : 'text-rose-600'
-            }`}>
-              {data.trend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
-              {Math.abs(data.trend)}%
-            </span>
-          )}
-        </div>
-        <p className="text-xs text-black/40">Total requests</p>
-      </div>
-
-      {/* Mini chart */}
-      <div className="flex-1 mb-4 mt-6">
-        {renderMiniChart(data.daily)}
-      </div>
-    </div>
-  );
-};
-
-export default ApiRequestsCard;
-

package/apps/dashboard/src/components/overview/CreditsCard.tsx

@@ -1,137 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Coins, ArrowUpRight, TrendingUp, TrendingDown, Plus } from 'lucide-react';
-import { CreditData, DailyMetric } from './types';
-
-interface CreditsCardProps {
-  data: CreditData;
-  isLoading?: boolean;
-}
-
-const CreditsCard: React.FC<CreditsCardProps> = ({ data, isLoading = false }) => {
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-[20px] border border-black/5 p-6 h-full">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 bg-black/5 rounded-xl animate-pulse" />
-          <div className="space-y-2">
-            <div className="h-5 w-24 bg-black/5 rounded animate-pulse" />
-            <div className="h-4 w-16 bg-black/5 rounded animate-pulse" />
-          </div>
-        </div>
-        <div className="h-20 bg-black/5 rounded-xl animate-pulse" />
-      </div>
-    );
-  }
-
-  const formatCredits = (value: string | number): string => {
-    // If already formatted string (with K/M), return as is
-    if (typeof value === 'string') {
-      return value;
-    }
-    // If number, format with 2 decimals
-    return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-  };
-
-  // Mini sparkline chart
-  const renderSparkline = (dailyData: DailyMetric[]) => {
-    if (!dailyData || dailyData.length === 0) return null;
-    
-    const maxValue = Math.max(...dailyData.map(d => d.value), 1);
-    const points = dailyData.map((day, index) => {
-      const height = maxValue > 0 ? (day.value / maxValue) * 100 : 0;
-      const x = dailyData.length > 1 ? (index / (dailyData.length - 1)) * 100 : 50;
-      const y = 100 - (height || 0);
-      return `${x},${y}`;
-    }).join(' ');
-
-    return (
-      <svg className="w-full h-12" viewBox="0 0 100 100" preserveAspectRatio="none">
-        <defs>
-          <linearGradient id="creditSparkline" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="rgb(5, 150, 105)" stopOpacity="0.2" />
-            <stop offset="100%" stopColor="rgb(5, 150, 105)" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        <polygon
-          points={`0,100 ${points} 100,100`}
-          fill="url(#creditSparkline)"
-        />
-        <polyline
-          points={points}
-          fill="none"
-          stroke="rgb(5, 150, 105)"
-          strokeWidth="2"
-          vectorEffect="non-scaling-stroke"
-        />
-      </svg>
-    );
-  };
-
-  return (
-    <div className="bg-gradient-to-br from-emerald-50/80 to-white rounded-[20px] border border-emerald-100 p-6 h-full flex flex-col">
-      {/* Header */}
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
-            <Coins className="w-5 h-5 text-emerald-600" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-black">Credits Balance</h3>
-            <p className="text-xs text-black/40">Available to use</p>
-          </div>
-        </div>
-        
-        <Link 
-          href="/billing"
-          className="p-2 hover:bg-emerald-100 rounded-lg transition-colors group"
-        >
-          <ArrowUpRight className="w-4 h-4 text-emerald-600 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
-        </Link>
-      </div>
-
-      {/* Balance */}
-      <div className="mb-4">
-        <div className="flex items-baseline gap-2">
-          <span className="text-3xl font-bold text-emerald-600">
-            ${formatCredits(data.balance)}
-          </span>
-          {data.trend !== 0 && (
-            <span className={`flex items-center gap-0.5 text-xs font-medium ${
-              data.trend > 0 ? 'text-emerald-600' : 'text-rose-600'
-            }`}>
-              {data.trend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
-              {Math.abs(data.trend)}%
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Sparkline */}
-      <div className="flex-1 mb-4">
-        {renderSparkline(data.daily)}
-      </div>
-
-      {/* Spent this period */}
-      <div className="flex items-center justify-between pt-4 border-t border-emerald-100">
-        <div>
-          <p className="text-xs text-black/40 mb-0.5">Spent this month</p>
-          <p className="text-sm font-semibold text-black">${formatCredits(data.spent)}</p>
-        </div>
-        
-        <Link
-          href="/billing"
-          className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-600 text-white text-xs font-medium rounded-full hover:bg-emerald-700 transition-colors"
-        >
-          <Plus className="w-3.5 h-3.5" />
-          Add
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default CreditsCard;
-

package/apps/dashboard/src/components/overview/DeploymentsChart.tsx

@@ -1,195 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { TrendingUp, BarChart3 } from 'lucide-react';
-import { SlidingToggle } from '@/components/ui/SlidingToggle';
-import { DeploymentData, ChartType, TimePeriod } from './types';
-
-interface DeploymentsChartProps {
-  data: DeploymentData;
-  isLoading?: boolean;
-  period?: TimePeriod;
-  onPeriodChange?: (period: TimePeriod) => void;
-}
-
-const DeploymentsChart: React.FC<DeploymentsChartProps> = ({
-  data,
-  isLoading = false,
-  period = 7,
-  onPeriodChange,
-}) => {
-  const [chartType, setChartType] = useState<ChartType>('area');
-
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-[20px] border border-black/5 p-6 h-[280px]">
-        <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 bg-black/5 rounded-xl animate-pulse" />
-          <div className="space-y-2">
-            <div className="h-5 w-32 bg-black/5 rounded animate-pulse" />
-            <div className="h-4 w-20 bg-black/5 rounded animate-pulse" />
-          </div>
-        </div>
-        <div className="h-36 bg-black/5 rounded-xl animate-pulse" />
-      </div>
-    );
-  }
-
-  const hasData = data.daily.length > 0 && data.daily.some(d => d.value > 0);
-  const maxValue = Math.max(...data.daily.map(d => d.value), 1);
-
-  const formatDate = (dateStr: string) => {
-    const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', { weekday: 'short' });
-  };
-
-  const renderAreaChart = () => {
-    if (data.daily.length === 0) return null;
-
-    const points = data.daily.map((day, index) => {
-      const height = hasData && maxValue > 0 ? (day.value / maxValue) * 85 : 0;
-      const x = data.daily.length > 1 ? (index / (data.daily.length - 1)) * 100 : 50;
-      const y = hasData ? (95 - height) : 92;
-      return `${x},${y}`;
-    }).join(' ');
-
-    return (
-      <svg className="w-full h-36" viewBox="0 0 100 100" preserveAspectRatio="none">
-        <defs>
-          <linearGradient id="deployGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="#0d9488" stopOpacity={hasData ? "0.15" : "0.03"} />
-            <stop offset="100%" stopColor="#0d9488" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        <polygon
-          points={`0,100 ${points} 100,100`}
-          fill="url(#deployGradient)"
-        />
-        <polyline
-          points={points}
-          fill="none"
-          stroke="#0d9488"
-          strokeOpacity={hasData ? "1" : "0.2"}
-          strokeWidth="2"
-          vectorEffect="non-scaling-stroke"
-        />
-      </svg>
-    );
-  };
-
-  const renderBarChart = () => {
-    return (
-      <div className="flex items-end justify-between gap-2 h-36">
-        {data.daily.map((day, index) => {
-          const height = hasData && maxValue > 0 ? (day.value / maxValue) * 100 : 0;
-          const isToday = index === data.daily.length - 1;
-          const minHeight = hasData ? (height > 5 ? height : (height > 0 ? 8 : 3)) : 3;
-          
-          return (
-            <div key={index} className="flex-1 flex flex-col items-center group">
-              <div className="w-full relative h-36 flex items-end">
-                {day.value > 0 && (
-                  <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-teal-600 text-white text-xs px-2.5 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">
-                    {day.value} deployment{day.value !== 1 ? 's' : ''}
-                  </div>
-                )}
-                
-                <div
-                  className={`w-full rounded-t-lg transition-all duration-300 ${
-                    isToday
-                      ? 'bg-teal-600'
-                      : day.value > 0
-                      ? 'bg-teal-400 group-hover:bg-teal-500'
-                      : 'bg-teal-100'
-                  }`}
-                  style={{ height: `${minHeight}%` }}
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  const periodOptions: { value: TimePeriod; label: string }[] = [
-    { value: 7, label: '7d' },
-    { value: 14, label: '14d' },
-    { value: 30, label: '30d' },
-  ];
-
-  return (
-    <div className="bg-white rounded-[20px] border border-black/5 overflow-hidden">
-      {/* Header */}
-      <div className="px-6 py-4 border-b border-black/5">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="font-semibold text-black">Deployments</h3>
-            <div className="flex items-baseline gap-2 mt-0.5">
-              <p className="text-xl font-bold text-teal-600">{data.total}</p>
-              <span className="text-xs text-black/40">last {period} days</span>
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-3">
-            {onPeriodChange && (
-              <div className="flex items-center gap-1 bg-black/[0.03] rounded-full p-1">
-                {periodOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    onClick={() => onPeriodChange(option.value)}
-                    className={`px-3 py-1.5 text-xs font-medium rounded-full transition-all ${
-                      period === option.value
-                        ? 'bg-white text-black shadow-sm'
-                        : 'text-black/50 hover:text-black'
-                    }`}
-                  >
-                    {option.label}
-                  </button>
-                ))}
-              </div>
-            )}
-            
-            <SlidingToggle
-              options={[
-                { value: 'bar', icon: <BarChart3 className="w-4 h-4" /> },
-                { value: 'area', icon: <TrendingUp className="w-4 h-4" /> },
-              ]}
-              value={chartType}
-              onChange={(value) => setChartType(value as ChartType)}
-              variant="rounded"
-              selectedBg="bg-teal-600"
-              selectedTextColor="text-white"
-              unselectedTextColor="text-black/50"
-              backgroundColor="bg-black/[0.03]"
-              size="sm"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Chart */}
-      <div className="px-6 py-5">
-        <div className="mb-3">
-          {chartType === 'area' ? renderAreaChart() : renderBarChart()}
-        </div>
-
-        {/* Labels */}
-        <div className="flex items-center justify-between gap-2 mt-3">
-          {data.daily.map((day, index) => {
-            const isToday = index === data.daily.length - 1;
-            return (
-              <div key={index} className="flex-1 text-center">
-                <span className={`text-xs font-medium ${isToday ? 'text-teal-600' : 'text-black/40'}`}>
-                  {formatDate(day.date)}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DeploymentsChart;