openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,206 @@
+'use client';
+
+import React, { useState } from 'react';
+import { TrendingUp, BarChart3 } from 'lucide-react';
+import { SlidingToggle } from '@/components/ui/SlidingToggle';
+import { TokenUsageData, ChartType, TimePeriod } from './types';
+
+interface TokenUsageChartProps {
+  data: TokenUsageData;
+  isLoading?: boolean;
+  period?: TimePeriod;
+  onPeriodChange?: (period: TimePeriod) => void;
+}
+
+const TokenUsageChart: React.FC<TokenUsageChartProps> = ({
+  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 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();
+  };
+
+  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="tokenGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#2563eb" stopOpacity={hasData ? "0.15" : "0.03"} />
+            <stop offset="100%" stopColor="#2563eb" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <polygon
+          points={`0,100 ${points} 100,100`}
+          fill="url(#tokenGradient)"
+        />
+        <polyline
+          points={points}
+          fill="none"
+          stroke="#2563eb"
+          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-blue-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">
+                    {formatNumber(day.value)} tokens
+                  </div>
+                )}
+                
+                <div
+                  className={`w-full rounded-t-lg transition-all duration-300 ${
+                    isToday
+                      ? 'bg-blue-600'
+                      : day.value > 0
+                      ? 'bg-blue-400 group-hover:bg-blue-500'
+                      : 'bg-blue-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">Token Usage</h3>
+            <div className="flex items-baseline gap-2 mt-0.5">
+              <p className="text-xl font-bold text-blue-600">{formatNumber(data.total)}</p>
+              <span className="text-xs text-black/40">last {period} days</span>
+              {data.trend !== 0 && (
+                <span className={`text-xs font-medium ${data.trend > 0 ? 'text-emerald-600' : 'text-rose-500'}`}>
+                  {data.trend > 0 ? '+' : ''}{data.trend}%
+                </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-blue-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-blue-600' : 'text-black/40'}`}>
+                  {formatDate(day.date)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TokenUsageChart;

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

@@ -0,0 +1,79 @@
+import React from "react";
+import { generateIcon } from "@/utils/icons";
+
+interface UsageStatsProps {
+  timeframe?: string;
+}
+
+const UsageStats: React.FC<UsageStatsProps> = ({ timeframe = "Last 30 days" }) => {
+  return (
+    <div className="bg-white rounded-xl border border-black/10 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-semibold text-black">Usage</h3>
+        <span className="text-xs text-black/50">{timeframe}</span>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              {generateIcon('activity-50-1658433844.png', 16, 'rgba(0,0,0,0.5)')}
+              <span className="text-sm text-black/70">Edge Requests</span>
+            </div>
+            <span className="text-sm  text-black">20K / 1M</span>
+          </div>
+          <div className="w-full bg-black/5 rounded-full h-1.5">
+            <div className="bg-black h-1.5 rounded-full" style={{ width: '2%' }}></div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              {generateIcon('database-20-1658238246.png', 16, 'rgba(0,0,0,0.5)')}
+              <span className="text-sm text-black/70">ISR Reads</span>
+            </div>
+            <span className="text-sm  text-black">12K / 1M</span>
+          </div>
+          <div className="w-full bg-black/5 rounded-full h-1.5">
+            <div className="bg-black h-1.5 rounded-full" style={{ width: '1.2%' }}></div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              {generateIcon('data-transfer-19-1658238246.png', 16, 'rgba(0,0,0,0.5)')}
+              <span className="text-sm text-black/70">Fast Origin Transfer</span>
+            </div>
+            <span className="text-sm  text-black">91 MB / 10 GB</span>
+          </div>
+          <div className="w-full bg-black/5 rounded-full h-1.5">
+            <div className="bg-black h-1.5 rounded-full" style={{ width: '0.9%' }}></div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              {generateIcon('send-30-1687505545.png', 16, 'rgba(0,0,0,0.5)')}
+              <span className="text-sm text-black/70">Fast Data Transfer</span>
+            </div>
+            <span className="text-sm  text-black">312 MB / 100 GB</span>
+          </div>
+          <div className="w-full bg-black/5 rounded-full h-1.5">
+            <div className="bg-black h-1.5 rounded-full" style={{ width: '0.3%' }}></div>
+          </div>
+        </div>
+      </div>
+
+      <button className="w-full mt-4 px-4 py-2 bg-black text-white text-sm font-medium rounded-lg hover:bg-black/90 transition-all">
+        Upgrade
+      </button>
+    </div>
+  );
+};
+
+export default UsageStats;
+
+

package/apps/dashboard/src/components/overview/index.ts

@@ -0,0 +1,30 @@
+// Overview Dashboard Components
+// =============================================================================
+
+// Main components
+export { default as OverviewHeader } from './OverviewHeader';
+export { default as StatsGrid } from './StatsGrid';
+export { default as QuickLinks } from './QuickLinks';
+
+// Chart components
+export { default as OverviewHeroChart } from './OverviewHeroChart';
+export { default as TokenUsageChart } from './TokenUsageChart';
+export { default as DeploymentsChart } from './DeploymentsChart';
+export { default as ActivityChart } from './ActivityChart';
+
+// Card components
+export { default as CreditsCard } from './CreditsCard';
+export { default as SandboxesCard } from './SandboxesCard';
+export { default as ProjectsCard } from './ProjectsCard';
+export { default as ApiRequestsCard } from './ApiRequestsCard';
+
+// Loading skeleton
+export { default as OverviewSkeleton } from './LoadingSkeleton';
+
+// Legacy components (keeping for backwards compatibility)
+export { default as UsageStats } from './UsageStats';
+export { default as EmptyState } from './EmptyState';
+
+// Types
+export * from './types';
+

package/apps/dashboard/src/components/overview/types.ts

@@ -0,0 +1,116 @@
+// =============================================================================
+// Overview Dashboard Types
+// =============================================================================
+
+export interface OverviewStats {
+  totalTokenUsage: number;
+  creditsBalance: string | number; // Can be formatted string (K/M) or number
+  creditsSpent: string | number; // Can be formatted string (K/M) or number
+  totalApiRequests: number;
+  activeProjects: number;
+  totalDeployments: number;
+  successfulDeployments: number;
+  failedDeployments: number;
+  totalSandboxes: number;
+  activeSandboxes: number;
+  totalAgents: number;
+}
+
+export interface DailyMetric {
+  date: string;
+  value: number;
+  label?: string;
+}
+
+export interface TokenUsageData {
+  daily: DailyMetric[];
+  total: number;
+  trend: number;
+  breakdown: TokenBreakdown[];
+}
+
+export interface TokenBreakdown {
+  service: string;
+  tokens: number;
+  percentage: number;
+  color: string;
+}
+
+export interface DeploymentData {
+  daily: DailyMetric[];
+  total: number;
+  success: number;
+  failed: number;
+  building: number;
+}
+
+export interface CreditData {
+  balance: string | number; // Can be formatted string (K/M) or number
+  spent: string | number; // Can be formatted string (K/M) or number
+  daily: DailyMetric[];
+  trend: number;
+}
+
+export interface AgentData {
+  total: number;
+  active: number;
+  production: number;
+  testing: number;
+  daily: DailyMetric[];
+  trend: number;
+}
+
+export interface SandboxData {
+  total: number;
+  active: number;
+  inactive: number;
+  recent: RecentSandbox[];
+}
+
+export interface RecentSandbox {
+  id: string;
+  name: string;
+  status: 'running' | 'stopped' | 'error';
+  createdAt: string;
+}
+
+export interface ProjectData {
+  total: number;
+  live: number;
+  building: number;
+  failed: number;
+  recent: RecentProject[];
+}
+
+export interface RecentProject {
+  id: string;
+  name: string;
+  framework: string;
+  status: 'live' | 'building' | 'failed' | 'paused';
+  lastDeployed: string;
+}
+
+export interface ApiRequestData {
+  total: number;
+  daily: DailyMetric[];
+  trend: number;
+  endpoints: EndpointUsage[];
+}
+
+export interface EndpointUsage {
+  endpoint: string;
+  calls: number;
+  percentage: number;
+}
+
+export interface QuickLink {
+  title: string;
+  description: string;
+  href: string;
+  icon: string;
+  color: string;
+}
+
+export type ChartType = 'bar' | 'area' | 'line';
+export type TimePeriod = 7 | 14 | 30;
+

package/apps/dashboard/src/components/page-header.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useI18n } from "@/components/i18n-provider";
+
+/**
+ * Shared dashboard page header.
+ * Pass the i18n key for a page in `dashboard.pages.*`.
+ */
+export function PageHeader({ pageKey }: { pageKey: string }) {
+  const { t } = useI18n();
+  const page = (t.dashboard.pages as Record<string, { title: string; description: string }>)[pageKey];
+
+  return (
+    <div className="mb-8">
+      <h1 className="text-xl font-semibold tracking-tight text-foreground">
+        {page?.title ?? pageKey}
+      </h1>
+      {page?.description && (
+        <p className="mt-1.5 text-sm text-muted-foreground">
+          {page.description}
+        </p>
+      )}
+    </div>
+  );
+}

package/apps/dashboard/src/components/project-settings/ServerSideSwitch.jsx

@@ -0,0 +1,60 @@
+import { Hammer, Play } from "lucide-react";
+
+const Toggle = ({ checked, onChange }) => (
+  <label className="relative inline-flex items-center cursor-pointer shrink-0">
+    <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} className="sr-only peer" />
+    <div className="w-9 h-5 bg-border rounded-full peer peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/20 peer-checked:after:translate-x-4 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-muted-foreground/80 after:rounded-full after:h-4 after:w-4 after:shadow-sm after:transition-all peer-checked:bg-primary peer-checked:after:bg-primary-foreground peer-checked:after:border-transparent" />
+  </label>
+);
+
+export { Toggle };
+
+export const DeploymentModeSwitch = ({
+  hasBuild,
+  hasServer,
+  onBuildChange,
+  onServerChange,
+  productionPort,
+  className = '',
+}) => {
+  return (
+    <div className={`flex gap-2 ${className}`}>
+      <div className="flex-1 flex items-center justify-between p-2.5 bg-muted/30 rounded-lg border border-border/50">
+        <div className="flex items-center gap-2">
+          <Hammer className="w-3.5 h-3.5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium text-foreground">Build</p>
+            <p className="text-[11px] text-muted-foreground leading-tight">
+              {hasBuild ? 'Install & build commands' : 'Deploy source directly'}
+            </p>
+          </div>
+        </div>
+        <Toggle checked={hasBuild} onChange={onBuildChange} />
+      </div>
+      <div className="flex-1 flex items-center justify-between p-2.5 bg-muted/30 rounded-lg border border-border/50">
+        <div className="flex items-center gap-2">
+          <Play className="w-3.5 h-3.5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium text-foreground">Start</p>
+            <p className="text-[11px] text-muted-foreground leading-tight">
+              {hasServer ? `Server on port ${productionPort || '3000'}` : 'Static from edge'}
+            </p>
+          </div>
+        </div>
+        <Toggle checked={hasServer} onChange={onServerChange} />
+      </div>
+    </div>
+  );
+};
+
+// Backwards compat
+export const ServerSideSwitch = ({ productionPort, hasServer, handleServerToggleChange, hasBuild, handleBuildToggleChange, className = '', style = {} }) => (
+  <DeploymentModeSwitch
+    hasBuild={hasBuild ?? true}
+    hasServer={hasServer}
+    onBuildChange={handleBuildToggleChange || (() => {})}
+    onServerChange={handleServerToggleChange}
+    productionPort={productionPort}
+    className={className}
+  />
+);

package/apps/dashboard/src/components/shared/AlertBox.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface AlertBoxProps {
+  type: 'info' | 'warning' | 'danger';
+  title: string;
+  message: string;
+}
+
+const AlertBox: React.FC<AlertBoxProps> = ({ type, title, message }) => {
+  const styles = {
+    info: {
+      container: 'bg-indigo-50 border-indigo-200',
+      title: 'text-indigo-900',
+      message: 'text-indigo-800',
+    },
+    warning: {
+      container: 'bg-amber-50 border-amber-200',
+      title: 'text-amber-900',
+      message: 'text-amber-800',
+    },
+    danger: {
+      container: 'bg-red-50 border-red-200',
+      title: 'text-red-900',
+      message: 'text-red-800',
+    },
+  };
+
+  const style = styles[type];
+
+  return (
+    <div className={`${style.container} border rounded-xl p-4`}>
+      <p className={`text-sm ${style.title} font-medium mb-1`}>{title}</p>
+      <p className={`text-xs ${style.message}`}>{message}</p>
+    </div>
+  );
+};
+
+export default AlertBox;
+

package/apps/dashboard/src/components/shared/CTASection.tsx

@@ -0,0 +1,45 @@
+interface CTASectionProps {
+  title: string;
+  description: string;
+  primaryButtonText: string;
+  primaryButtonHref: string;
+  secondaryButtonText: string;
+  secondaryButtonHref: string;
+}
+
+export default function CTASection({
+  title,
+  description,
+  primaryButtonText,
+  primaryButtonHref,
+  secondaryButtonText,
+  secondaryButtonHref,
+}: CTASectionProps) {
+  return (
+    <div className="bg-white rounded-[25px] p-8 lg:p-12 text-center">
+      <h2 className="text-3xl lg:text-4xl font-bold text-black mb-6">
+        {title}
+      </h2>
+      <p className="text-lg text-black/70 mb-8 max-w-2xl mx-auto">
+        {description}
+      </p>
+      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+        <a
+          href={primaryButtonHref}
+          className="relative overflow-hidden group px-8 py-4 bg-black text-white font-semibold rounded-full hover:bg-black/90 transition-all duration-300"
+        >
+          <span className="absolute inset-0 -translate-x-full group-hover:translate-x-0 transition-transform duration-200 ease-out bg-white/10 rounded-full"></span>
+          <span className="relative z-10">{primaryButtonText}</span>
+        </a>
+        <a
+          href={secondaryButtonHref}
+          className="relative overflow-hidden group px-8 py-4 bg-black/5 text-black font-semibold rounded-full border-2 border-black/10 hover:border-black/20 transition-all duration-300"
+        >
+          <span className="absolute inset-0 -translate-x-full group-hover:translate-x-0 transition-transform duration-200 ease-out bg-black/10 rounded-full"></span>
+          <span className="relative z-10">{secondaryButtonText}</span>
+        </a>
+      </div>
+    </div>
+  );
+}
+