openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,247 @@
+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

@@ -0,0 +1,111 @@
+'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

@@ -0,0 +1,137 @@
+'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

@@ -0,0 +1,195 @@
+'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;