openship 0.1.0 → 0.1.1

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

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

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

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

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