openship 0.1.1 → 0.1.8

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

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

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

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

@@ -1,116 +0,0 @@
-// =============================================================================
-// 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

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

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

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

@@ -1,45 +0,0 @@
-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>
-  );
-}
-