openship 0.1.1 → 0.1.7

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

@@ -1,134 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { FolderKanban, ArrowUpRight, CheckCircle2, Loader2, XCircle, Pause } from 'lucide-react';
-import { generateIcon } from '@/utils/icons';
-import { ProjectData } from './types';
-
-interface ProjectsCardProps {
-  data: ProjectData;
-  isLoading?: boolean;
-}
-
-const ProjectsCard: React.FC<ProjectsCardProps> = ({ 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="space-y-3">
-          {[1, 2, 3].map(i => (
-            <div key={i} className="h-12 bg-black/5 rounded-xl animate-pulse" />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  const getStatusIcon = (status: 'live' | 'building' | 'failed' | 'paused') => {
-    switch (status) {
-      case 'live':
-        return <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />;
-      case 'building':
-        return <Loader2 className="w-3.5 h-3.5 text-blue-500 animate-spin" />;
-      case 'failed':
-        return <XCircle className="w-3.5 h-3.5 text-rose-500" />;
-      case 'paused':
-        return <Pause className="w-3.5 h-3.5 text-amber-500" />;
-    }
-  };
-
-  const getStatusBadge = (status: 'live' | 'building' | 'failed' | 'paused') => {
-    const styles = {
-      live: 'bg-emerald-50 text-emerald-700 border-emerald-100',
-      building: 'bg-blue-50 text-blue-700 border-blue-100',
-      failed: 'bg-rose-50 text-rose-700 border-rose-100',
-      paused: 'bg-amber-50 text-amber-700 border-amber-100',
-    };
-    return styles[status];
-  };
-
-  const formatTime = (dateStr: string) => {
-    const date = new Date(dateStr);
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    const hours = Math.floor(diff / (1000 * 60 * 60));
-    const days = Math.floor(hours / 24);
-    
-    if (days > 0) return `${days}d ago`;
-    if (hours > 0) return `${hours}h ago`;
-    return 'Just now';
-  };
-
-  const getFrameworkIcon = (framework: string) => {
-    const iconMap: Record<string, string> = {
-      'Next.js': 'nextjs-91-1662289277.png',
-      'React': 'react-51-1662290199.png',
-      'Vue.js': 'vuejs-31-1662290199.png',
-      'Nuxt.js': 'nuxtjs-11-1662289277.png',
-      'Astro': 'astro-31-1662289277.png',
-    };
-    return generateIcon(iconMap[framework] || 'code-45-1658433844.png', 16, 'rgba(0,0,0,0.6)');
-  };
-
-  return (
-    <div className="bg-gradient-to-br from-pink-50/80 to-white rounded-[20px] border border-pink-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-pink-100 rounded-xl flex items-center justify-center">
-            <FolderKanban className="w-5 h-5 text-pink-600" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-black">Projects</h3>
-            <p className="text-xs text-black/40">Active deployments</p>
-          </div>
-        </div>
-        
-        <Link 
-          href="/projects"
-          className="p-2 hover:bg-pink-100 rounded-lg transition-colors group"
-        >
-          <ArrowUpRight className="w-4 h-4 text-pink-600 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
-        </Link>
-      </div>
-
-      {/* Stats row */}
-      <div className="flex items-center gap-3 mb-4 pb-4 border-b border-pink-100">
-        <div className="flex-1 text-center">
-          <p className="text-2xl font-bold text-pink-600">{data.total}</p>
-          <p className="text-xs text-black/40">Total</p>
-        </div>
-        <div className="w-px h-8 bg-pink-100" />
-        <div className="flex-1 text-center">
-          <p className="text-2xl font-bold text-emerald-600">{data.live}</p>
-          <p className="text-xs text-black/40">Live</p>
-        </div>
-        <div className="w-px h-8 bg-pink-100" />
-        <div className="flex-1 text-center">
-          <p className="text-2xl font-bold text-blue-600">{data.building}</p>
-          <p className="text-xs text-black/40">Building</p>
-        </div>
-      </div>
-
-      {/* Footer */}
-      {data.failed > 0 && (
-        <div className="pt-4 mt-auto border-t border-pink-100">
-          <div className="flex items-center gap-2 text-rose-600 bg-rose-50 px-3 py-2 rounded-lg">
-            <XCircle className="w-4 h-4" />
-            <span className="text-xs font-medium">{data.failed} project{data.failed > 1 ? 's' : ''} need attention</span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProjectsCard;
-

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

@@ -1,119 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { 
-  Rocket, 
-  Bot, 
-  CreditCard, 
-  Key, 
-  Box, 
-  Search,
-  FolderPlus,
-  ChevronRight,
-  Sparkles
-} from 'lucide-react';
-import { useI18n } from '@/components/i18n-provider';
-
-interface QuickLinkItem {
-  title: string;
-  description: string;
-  href: string;
-  icon: React.ReactNode;
-  color: string;
-  bgColor: string;
-}
-
-const QuickLinks: React.FC = () => {
-  const { t } = useI18n();
-  const quickLinks = t.dashboard.quickLinks;
-
-  const links: QuickLinkItem[] = [
-    {
-      title: quickLinks.deployProject.title,
-      description: quickLinks.deployProject.description,
-      href: '/library',
-      icon: <Rocket className="w-5 h-5" />,
-      color: '#f59e0b',
-      bgColor: 'rgba(245, 158, 11, 0.1)',
-    },
-    {
-      title: quickLinks.projects.title,
-      description: quickLinks.projects.description,
-      href: '/projects',
-      icon: <FolderPlus className="w-5 h-5" />,
-      color: '#8b5cf6',
-      bgColor: 'rgba(139, 92, 246, 0.1)',
-    },
-    {
-      title: quickLinks.deployments.title,
-      description: quickLinks.deployments.description,
-      href: '/deployments',
-      icon: <Box className="w-5 h-5" />,
-      color: '#06b6d4',
-      bgColor: 'rgba(6, 182, 212, 0.1)',
-    },
-    {
-      title: quickLinks.settings.title,
-      description: quickLinks.settings.description,
-      href: '/settings',
-      icon: <Key className="w-5 h-5" />,
-      color: '#3b82f6',
-      bgColor: 'rgba(59, 130, 246, 0.1)',
-    },
-    {
-      title: quickLinks.domains.title,
-      description: quickLinks.domains.description,
-      href: '/domains',
-      icon: <Search className="w-5 h-5" />,
-      color: '#ec4899',
-      bgColor: 'rgba(236, 72, 153, 0.1)',
-    },
-    {
-      title: quickLinks.billing.title,
-      description: quickLinks.billing.description,
-      href: '/billing',
-      icon: <CreditCard className="w-5 h-5" />,
-      color: '#059669',
-      bgColor: 'rgba(5, 150, 105, 0.1)',
-    },
-  ];
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 p-6">
-      <div className="flex items-center justify-between mb-5">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center">
-            <Sparkles className="w-5 h-5 text-primary" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-foreground">{quickLinks.title}</h3>
-            <p className="text-xs text-muted-foreground">{quickLinks.subtitle}</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
-        {links.map((link, index) => (
-          <Link
-            key={index}
-            href={link.href}
-            className="group flex flex-col items-center p-4 rounded-xl border border-border/50 hover:border-border hover:shadow-sm transition-all duration-300 bg-card"
-          >
-            <div 
-              className="w-11 h-11 rounded-xl flex items-center justify-center mb-3 transition-transform group-hover:scale-110"
-              style={{ backgroundColor: link.bgColor }}
-            >
-              <div style={{ color: link.color }}>{link.icon}</div>
-            </div>
-            <span className="text-sm font-medium text-foreground text-center mb-0.5">{link.title}</span>
-            <span className="text-xs text-muted-foreground text-center">{link.description}</span>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default QuickLinks;
-

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

@@ -1,150 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Box, ArrowUpRight, Play, Square, AlertCircle } from 'lucide-react';
-import { SandboxData } from './types';
-
-interface SandboxesCardProps {
-  data: SandboxData;
-  isLoading?: boolean;
-}
-
-const SandboxesCard: React.FC<SandboxesCardProps> = ({ 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="space-y-3">
-          {[1, 2, 3].map(i => (
-            <div key={i} className="h-10 bg-black/5 rounded-xl animate-pulse" />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  const getStatusIcon = (status: 'running' | 'stopped' | 'error') => {
-    switch (status) {
-      case 'running':
-        return <Play className="w-3 h-3 text-emerald-500 fill-emerald-500" />;
-      case 'stopped':
-        return <Square className="w-3 h-3 text-gray-400" />;
-      case 'error':
-        return <AlertCircle className="w-3 h-3 text-rose-500" />;
-    }
-  };
-
-  const getStatusColor = (status: 'running' | 'stopped' | 'error') => {
-    switch (status) {
-      case 'running':
-        return 'bg-emerald-50 text-emerald-700';
-      case 'stopped':
-        return 'bg-gray-50 text-gray-600';
-      case 'error':
-        return 'bg-rose-50 text-rose-700';
-    }
-  };
-
-  const formatTime = (dateStr: string) => {
-    const date = new Date(dateStr);
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    const hours = Math.floor(diff / (1000 * 60 * 60));
-    const days = Math.floor(hours / 24);
-    
-    if (days > 0) return `${days}d ago`;
-    if (hours > 0) return `${hours}h ago`;
-    return 'Just now';
-  };
-
-  const activePercent = data.total > 0 ? Math.round((data.active / data.total) * 100) : 0;
-
-  return (
-    <div className="bg-gradient-to-br from-cyan-50/80 to-white rounded-[20px] border border-cyan-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-cyan-100 rounded-xl flex items-center justify-center">
-            <Box className="w-5 h-5 text-cyan-600" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-black">Sandboxes</h3>
-            <p className="text-xs text-black/40">Development environments</p>
-          </div>
-        </div>
-        
-        <Link 
-          href="/projects"
-          className="p-2 hover:bg-cyan-100 rounded-lg transition-colors group"
-        >
-          <ArrowUpRight className="w-4 h-4 text-cyan-600 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
-        </Link>
-      </div>
-
-      {/* Stats */}
-      <div className="flex items-center gap-4 mb-4">
-        <div className="flex-1">
-          <p className="text-3xl font-bold text-cyan-600">{data.total}</p>
-          <p className="text-xs text-black/40">Total sandboxes</p>
-        </div>
-        
-        {/* Active indicator */}
-        <div className="flex items-center gap-2">
-          <div className="relative w-12 h-12">
-            <svg className="w-12 h-12 -rotate-90" viewBox="0 0 36 36">
-              <circle
-                cx="18"
-                cy="18"
-                r="15"
-                fill="none"
-                stroke="rgb(224, 231, 235)"
-                strokeWidth="3"
-              />
-              <circle
-                cx="18"
-                cy="18"
-                r="15"
-                fill="none"
-                stroke="rgb(6, 182, 212)"
-                strokeWidth="3"
-                strokeDasharray={`${activePercent} 100`}
-                strokeLinecap="round"
-              />
-            </svg>
-            <div className="absolute inset-0 flex items-center justify-center">
-              <span className="text-xs font-bold text-cyan-600">{data.active}</span>
-            </div>
-          </div>
-          <div>
-            <p className="text-sm font-semibold text-black">{activePercent}%</p>
-            <p className="text-xs text-black/40">Active</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="flex items-center justify-between pt-4 mt-auto border-t border-cyan-100">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1.5">
-            <div className="w-2 h-2 rounded-full bg-emerald-500" />
-            <span className="text-xs text-black/60">{data.active} running</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <div className="w-2 h-2 rounded-full bg-gray-300" />
-            <span className="text-xs text-black/60">{data.inactive} stopped</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SandboxesCard;
-

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

@@ -1,166 +0,0 @@
-'use client';
-
-import React from 'react';
-import { 
-  Coins, 
-  Rocket, 
-  Cpu, 
-  Box, 
-  Activity,
-  Bot,
-  TrendingUp,
-  TrendingDown
-} from 'lucide-react';
-import { OverviewStats } from './types';
-
-interface StatsGridProps {
-  stats: OverviewStats;
-  isLoading?: boolean;
-}
-
-interface StatCardProps {
-  title: string;
-  value: string | number;
-  subtitle?: string;
-  icon: React.ReactNode;
-  trend?: number;
-  color: string;
-  bgColor: string;
-}
-
-const StatCard: React.FC<StatCardProps> = ({
-  title,
-  value,
-  subtitle,
-  icon,
-  trend,
-  color,
-  bgColor,
-}) => {
-  return (
-    <div className="bg-white rounded-[20px] border border-black/5 p-5 hover:shadow-lg hover:border-black/10 transition-all duration-300 group">
-      <div className="flex items-start justify-between mb-4">
-        <div 
-          className="w-11 h-11 rounded-xl flex items-center justify-center transition-transform group-hover:scale-105"
-          style={{ backgroundColor: bgColor }}
-        >
-          <div style={{ color }}>{icon}</div>
-        </div>
-        
-        {trend !== undefined && trend !== 0 && (
-          <div className={`flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full ${
-            trend > 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'
-          }`}>
-            {trend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
-            <span>{Math.abs(trend)}%</span>
-          </div>
-        )}
-      </div>
-      
-      <div>
-        <p className="text-2xl font-bold text-black mb-1">{value}</p>
-        <p className="text-sm text-black/50">{title}</p>
-        {subtitle && (
-          <p className="text-xs text-black/40 mt-1">{subtitle}</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const StatCardSkeleton: React.FC = () => (
-  <div className="bg-white rounded-[20px] border border-black/5 p-5">
-    <div className="flex items-start justify-between mb-4">
-      <div className="w-11 h-11 rounded-xl bg-black/5 animate-pulse" />
-    </div>
-    <div className="space-y-2">
-      <div className="h-7 w-20 bg-black/5 rounded animate-pulse" />
-      <div className="h-4 w-28 bg-black/5 rounded animate-pulse" />
-    </div>
-  </div>
-);
-
-const StatsGrid: React.FC<StatsGridProps> = ({ stats, isLoading = false }) => {
-  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 formatCredits = (value: string | number): string => {
-    // If already formatted string (with K/M), just add $
-    if (typeof value === 'string') {
-      return `$${value}`;
-    }
-    // If number, format with 2 decimals
-    return `$${value.toFixed(2)}`;
-  };
-
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-        {Array(6).fill(0).map((_, i) => <StatCardSkeleton key={i} />)}
-      </div>
-    );
-  }
-
-  const statCards = [
-    {
-      title: 'Credits Balance',
-      value: formatCredits(stats.creditsBalance),
-      icon: <Coins className="w-5 h-5" />,
-      color: '#059669',
-      bgColor: 'rgba(5, 150, 105, 0.1)',
-    },
-    {
-      title: 'Token Usage',
-      value: formatNumber(stats.totalTokenUsage),
-      subtitle: 'This month',
-      icon: <Activity className="w-5 h-5" />,
-      color: '#8b5cf6',
-      bgColor: 'rgba(139, 92, 246, 0.1)',
-    },
-    {
-      title: 'API Requests',
-      value: formatNumber(stats.totalApiRequests),
-      subtitle: 'Last 7 days',
-      icon: <Cpu className="w-5 h-5" />,
-      color: '#3b82f6',
-      bgColor: 'rgba(59, 130, 246, 0.1)',
-    },
-    {
-      title: 'Deployments',
-      value: stats.totalDeployments,
-      subtitle: `${stats.successfulDeployments} successful`,
-      icon: <Rocket className="w-5 h-5" />,
-      color: '#f59e0b',
-      bgColor: 'rgba(245, 158, 11, 0.1)',
-    },
-    {
-      title: 'Active Projects',
-      value: stats.activeProjects,
-      icon: <Box className="w-5 h-5" />,
-      color: '#ec4899',
-      bgColor: 'rgba(236, 72, 153, 0.1)',
-    },
-    {
-      title: 'Sandboxes',
-      value: stats.totalSandboxes,
-      subtitle: `${stats.activeSandboxes} active`,
-      icon: <Bot className="w-5 h-5" />,
-      color: '#06b6d4',
-      bgColor: 'rgba(6, 182, 212, 0.1)',
-    },
-  ];
-
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-      {statCards.map((stat, index) => (
-        <StatCard key={index} {...stat} />
-      ))}
-    </div>
-  );
-};
-
-export default StatsGrid;
-