vibecarbon 0.1.0

package/carbon/src/client/pages/Charts.tsx

@@ -0,0 +1,388 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { ContentPanel } from '../components/ContentPanel';
+import { PageHeader } from '../components/PageHeader';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../components/ui/chart';
+
+// --- Data ---
+
+const revenueData = [
+  { month: 'Jan', revenue: 18400 },
+  { month: 'Feb', revenue: 22100 },
+  { month: 'Mar', revenue: 19800 },
+  { month: 'Apr', revenue: 27500 },
+  { month: 'May', revenue: 31200 },
+  { month: 'Jun', revenue: 29800 },
+];
+
+const revenueConfig = {
+  revenue: { label: 'Revenue', color: 'var(--chart-1)' },
+} satisfies ChartConfig;
+
+const usersData = [
+  { week: 'W1', new: 120, returning: 340 },
+  { week: 'W2', new: 180, returning: 390 },
+  { week: 'W3', new: 150, returning: 420 },
+  { week: 'W4', new: 210, returning: 460 },
+  { week: 'W5', new: 190, returning: 510 },
+  { week: 'W6', new: 260, returning: 530 },
+];
+
+const usersConfig = {
+  new: { label: 'New Users', color: 'var(--chart-1)' },
+  returning: { label: 'Returning', color: 'var(--chart-2)' },
+} satisfies ChartConfig;
+
+const mrrData = [
+  { month: 'Jan', mrr: 8200 },
+  { month: 'Feb', mrr: 11400 },
+  { month: 'Mar', mrr: 14800 },
+  { month: 'Apr', mrr: 19200 },
+  { month: 'May', mrr: 24600 },
+  { month: 'Jun', mrr: 31000 },
+];
+
+const mrrConfig = {
+  mrr: { label: 'MRR', color: 'var(--chart-2)' },
+} satisfies ChartConfig;
+
+const planData = [
+  { name: 'Free', value: 58 },
+  { name: 'Startup', value: 31 },
+  { name: 'Pro', value: 11 },
+];
+
+const planConfig = {
+  Free: { label: 'Free', color: 'var(--chart-1)' },
+  Startup: { label: 'Startup', color: 'var(--chart-2)' },
+  Pro: { label: 'Pro', color: 'var(--chart-3)' },
+} satisfies ChartConfig;
+
+const featureData = [
+  { feature: 'API', usage: 88 },
+  { feature: 'Auth', usage: 72 },
+  { feature: 'Storage', usage: 54 },
+  { feature: 'Realtime', usage: 40 },
+  { feature: 'Edge Fn', usage: 65 },
+  { feature: 'Analytics', usage: 30 },
+];
+
+const featureConfig = {
+  usage: { label: 'Usage %', color: 'var(--chart-3)' },
+} satisfies ChartConfig;
+
+const composedData = [
+  { month: 'Jan', revenue: 18400, margin: 42 },
+  { month: 'Feb', revenue: 22100, margin: 45 },
+  { month: 'Mar', revenue: 19800, margin: 38 },
+  { month: 'Apr', revenue: 27500, margin: 51 },
+  { month: 'May', revenue: 31200, margin: 55 },
+  { month: 'Jun', revenue: 29800, margin: 53 },
+];
+
+const composedConfig = {
+  revenue: { label: 'Revenue', color: 'var(--chart-1)' },
+  margin: { label: 'Margin %', color: 'var(--chart-4)' },
+} satisfies ChartConfig;
+
+// --- Sparkline configs ---
+
+const sparkRevenueConfig = {
+  revenue: { label: 'Revenue', color: 'var(--chart-1)' },
+} satisfies ChartConfig;
+
+const sparkUsersConfig = {
+  new: { label: 'New Users', color: 'var(--chart-2)' },
+} satisfies ChartConfig;
+
+const sparkMrrConfig = {
+  mrr: { label: 'MRR', color: 'var(--chart-3)' },
+} satisfies ChartConfig;
+
+const sparkMarginConfig = {
+  margin: { label: 'Gross Margin', color: 'var(--chart-4)' },
+} satisfies ChartConfig;
+
+export default function Charts() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <PageHeader title={t('charts.title')} />
+
+      <ContentPanel variant="full">
+        {/* Sparkline summary cards */}
+        <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+          {/* Revenue Sparkline */}
+          <Card className="pb-0">
+            <CardHeader className="pb-2">
+              <CardDescription>{t('charts.revenue')}</CardDescription>
+              <CardTitle className="text-2xl font-bold">{t('charts.revenueSparkline')}</CardTitle>
+            </CardHeader>
+            <CardContent className="px-0 pb-0">
+              <ChartContainer config={sparkRevenueConfig} className="h-[80px] w-full">
+                <BarChart data={revenueData} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+                  <Bar dataKey="revenue" fill="var(--color-revenue)" radius={2} />
+                </BarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* New Users Sparkline */}
+          <Card className="pb-0">
+            <CardHeader className="pb-2">
+              <CardDescription>{t('charts.newUsers')}</CardDescription>
+              <CardTitle className="text-2xl font-bold">1,110</CardTitle>
+            </CardHeader>
+            <CardContent className="px-0 pb-0">
+              <ChartContainer config={sparkUsersConfig} className="h-[80px] w-full">
+                <LineChart data={usersData} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
+                  <Line dataKey="new" stroke="var(--color-new)" strokeWidth={2} dot={false} />
+                </LineChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* MRR Sparkline */}
+          <Card className="pb-0">
+            <CardHeader className="pb-2">
+              <CardDescription>{t('charts.mrr')}</CardDescription>
+              <CardTitle className="text-2xl font-bold">{t('charts.mrrSparkline')}</CardTitle>
+            </CardHeader>
+            <CardContent className="px-0 pb-0">
+              <ChartContainer config={sparkMrrConfig} className="h-[80px] w-full">
+                <AreaChart data={mrrData} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
+                  <Area
+                    dataKey="mrr"
+                    stroke="var(--color-mrr)"
+                    fill="var(--color-mrr)"
+                    fillOpacity={0.15}
+                    strokeWidth={2}
+                  />
+                </AreaChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* Gross Margin Sparkline */}
+          <Card className="pb-0">
+            <CardHeader className="pb-2">
+              <CardDescription>{t('charts.grossMargin')}</CardDescription>
+              <CardTitle className="text-2xl font-bold">
+                {t('charts.grossMarginSparkline')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-0 pb-0">
+              <ChartContainer config={sparkMarginConfig} className="h-[80px] w-full">
+                <LineChart data={composedData} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
+                  <Line dataKey="margin" stroke="var(--color-margin)" strokeWidth={2} dot={false} />
+                </LineChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {/* 1. Revenue — BarChart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('charts.revenue')}</CardTitle>
+              <CardDescription>{t('charts.revenueDescription')}</CardDescription>
+            </CardHeader>
+            <CardContent className="px-2 pb-2">
+              <ChartContainer config={revenueConfig}>
+                <BarChart data={revenueData} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <YAxis
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+                </BarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* 2. Active Users — LineChart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('charts.activeUsers')}</CardTitle>
+              <CardDescription>{t('charts.activeUsersDescription')}</CardDescription>
+            </CardHeader>
+            <CardContent className="px-2 pb-2">
+              <ChartContainer config={usersConfig}>
+                <LineChart data={usersData} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="week" tickLine={false} axisLine={false} />
+                  <YAxis tickLine={false} axisLine={false} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Line dataKey="new" stroke="var(--color-new)" strokeWidth={2} dot={false} />
+                  <Line
+                    dataKey="returning"
+                    stroke="var(--color-returning)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                </LineChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* 3. MRR Growth — AreaChart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('charts.mrrGrowth')}</CardTitle>
+              <CardDescription>{t('charts.mrrGrowthDescription')}</CardDescription>
+            </CardHeader>
+            <CardContent className="px-2 pb-2">
+              <ChartContainer config={mrrConfig}>
+                <AreaChart data={mrrData} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <YAxis
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Area
+                    dataKey="mrr"
+                    stroke="var(--color-mrr)"
+                    fill="var(--color-mrr)"
+                    fillOpacity={0.15}
+                    strokeWidth={2}
+                  />
+                </AreaChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* 4. Plan Distribution — PieChart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('charts.planDistribution')}</CardTitle>
+              <CardDescription>{t('charts.planDistributionDescription')}</CardDescription>
+            </CardHeader>
+            <CardContent className="flex items-center justify-center px-2 pb-2">
+              <ChartContainer config={planConfig} className="aspect-square max-h-[240px] w-full">
+                <PieChart>
+                  <ChartTooltip content={<ChartTooltipContent nameKey="name" hideLabel />} />
+                  <Legend content={<ChartLegendContent nameKey="name" />} />
+                  <Pie
+                    data={planData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    outerRadius={80}
+                  >
+                    {planData.map((entry) => (
+                      <Cell key={entry.name} fill={`var(--color-${entry.name})`} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* 5. Feature Usage — RadarChart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('charts.featureUsage')}</CardTitle>
+              <CardDescription>{t('charts.featureUsageDescription')}</CardDescription>
+            </CardHeader>
+            <CardContent className="px-2 pb-2">
+              <ChartContainer config={featureConfig}>
+                <RadarChart data={featureData} cx="50%" cy="50%" outerRadius="70%">
+                  <PolarGrid />
+                  <PolarAngleAxis dataKey="feature" tick={{ fontSize: 12 }} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Radar
+                    dataKey="usage"
+                    stroke="var(--color-usage)"
+                    fill="var(--color-usage)"
+                    fillOpacity={0.25}
+                    strokeWidth={2}
+                  />
+                </RadarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          {/* 6. Revenue & Margin — ComposedChart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('charts.revenueAndMargin')}</CardTitle>
+              <CardDescription>{t('charts.revenueAndMarginDescription')}</CardDescription>
+            </CardHeader>
+            <CardContent className="px-2 pb-2">
+              <ChartContainer config={composedConfig}>
+                <ComposedChart
+                  data={composedData}
+                  margin={{ top: 8, right: -12, bottom: 0, left: -12 }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
+                  <YAxis
+                    yAxisId="left"
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
+                  />
+                  <YAxis
+                    yAxisId="right"
+                    orientation="right"
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(v) => `${v}%`}
+                  />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Bar yAxisId="left" dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+                  <Line
+                    yAxisId="right"
+                    dataKey="margin"
+                    stroke="var(--color-margin)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                </ComposedChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+        </div>
+      </ContentPanel>
+    </>
+  );
+}

package/carbon/src/client/pages/Checkout.tsx

@@ -0,0 +1,227 @@
+/**
+ * Public checkout page for one-time license purchases.
+ *
+ * Route: /checkout?tier=diamond or /checkout?tier=fullerene
+ */
+
+import { motion } from 'framer-motion';
+import { Atom, Check, Diamond, type LucideIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { SEO } from '@/components/SEO';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface TierInfo {
+  name: string;
+  tagline: string;
+  price: number;
+  originalPrice: number;
+  icon: LucideIcon;
+  accentClass: string;
+  gradientClass: string;
+  features: string[];
+}
+
+const tierData: Record<string, TierInfo> = {
+  diamond: {
+    name: 'Diamond',
+    tagline: 'Full automation for indie hackers and startups.',
+    price: 149,
+    originalPrice: 299,
+    icon: Diamond,
+    accentClass: 'text-primary',
+    gradientClass: 'from-primary to-primary/70',
+    features: [
+      'All deployment modes (Compose, HA, Kubernetes)',
+      'Single VPS to multi-VPS clusters',
+      'Streaming replication',
+      'Health checks + one-command failover',
+      'Automated S3 backups',
+      'CI/CD via GitHub Actions',
+      'Lifetime access',
+    ],
+  },
+  fullerene: {
+    name: 'Fullerene',
+    tagline: 'Commercial license for Agencies and Enterprise.',
+    price: 499,
+    originalPrice: 999,
+    icon: Atom,
+    accentClass: 'text-secondary-accent',
+    gradientClass: 'from-secondary-accent to-fuchsia-400',
+    features: [
+      'Everything in Diamond',
+      'Commercial use rights (AGPL exception)',
+      'Deploy for clients & organizations',
+      'Agency & enterprise teams',
+      'Priority email support',
+      'Lifetime access',
+    ],
+  },
+};
+
+export default function Checkout() {
+  const [searchParams] = useSearchParams();
+  const tierParam = searchParams.get('tier') || 'diamond';
+  const success = searchParams.get('success') === 'true';
+  const tier = tierData[tierParam] ?? tierData.diamond;
+  const Icon = tier.icon;
+
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleCheckout(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const res = await fetch('/api/v1/billing/license-checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, tier: tierParam }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || 'Something went wrong');
+        setLoading(false);
+        return;
+      }
+
+      window.location.href = data.url;
+    } catch {
+      setError('Network error. Please try again.');
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background px-6">
+        <SEO title={`${tier.name} — Purchase Complete`} />
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mx-auto max-w-md text-center"
+        >
+          <div className="mb-6 inline-flex size-16 items-center justify-center rounded-2xl bg-primary/10">
+            <Check className="size-8 text-primary" />
+          </div>
+          <h1 className="mb-3 text-2xl font-black">Welcome to {tier.name}!</h1>
+          <p className="mb-8 text-muted-foreground">
+            Your license key will be delivered to your email. Activate it with:
+          </p>
+          <pre className="mb-8 rounded-xl bg-muted/50 p-4 text-left text-sm text-muted-foreground">
+            <code>npx vibecarbon activate {'<your-key>'}</code>
+          </pre>
+          <Button variant="outline" asChild>
+            <Link to="/">Back to Home</Link>
+          </Button>
+        </motion.div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-6">
+      <SEO title={`Checkout — Vibecarbon ${tier.name}`} />
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="mx-auto w-full max-w-lg"
+      >
+        {/* Back link */}
+        <Link
+          to="/#pricing"
+          className="mb-8 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; Back to pricing
+        </Link>
+
+        {/* Card */}
+        <div className="rounded-2xl border border-border/50 bg-muted/30 p-8 backdrop-blur-sm dark:bg-background/50">
+          {/* Tier header */}
+          <div className="mb-6 flex items-center gap-3">
+            <div
+              className={cn(
+                'flex size-12 items-center justify-center rounded-xl border',
+                tierParam === 'fullerene'
+                  ? 'border-secondary-accent/20 bg-secondary-accent/10'
+                  : 'border-primary/20 bg-primary/10'
+              )}
+            >
+              <Icon className={cn('size-6', tier.accentClass)} />
+            </div>
+            <div>
+              <h1 className="text-2xl font-black">{tier.name}</h1>
+              <p className="text-sm text-muted-foreground">{tier.tagline}</p>
+            </div>
+          </div>
+
+          {/* Price */}
+          <div className="mb-6">
+            <span className="mr-2 text-base text-muted-foreground/40 line-through">
+              ${tier.originalPrice}
+            </span>
+            <span
+              className={cn(
+                'text-4xl font-black bg-gradient-to-r bg-clip-text text-transparent',
+                tier.gradientClass
+              )}
+            >
+              ${tier.price}
+            </span>
+            <span className="ml-2 inline-flex rounded-full bg-muted/60 px-2.5 py-0.5 text-xs text-muted-foreground">
+              one-time payment
+            </span>
+          </div>
+
+          {/* Features */}
+          <ul className="mb-8 space-y-2.5">
+            {tier.features.map((feature) => (
+              <li key={feature} className="flex items-center gap-2.5">
+                <Check className={cn('size-4 flex-shrink-0', tier.accentClass)} />
+                <span className="text-sm text-muted-foreground">{feature}</span>
+              </li>
+            ))}
+          </ul>
+
+          {/* Divider */}
+          <div className="mb-6 h-px bg-border/50" />
+
+          {/* Checkout form */}
+          <form onSubmit={handleCheckout}>
+            <label htmlFor="checkout-email" className="mb-2 block text-sm font-medium">
+              Email address
+            </label>
+            <input
+              id="checkout-email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              className="mb-4 w-full rounded-lg border border-border/50 bg-background px-4 py-2.5 text-sm placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+
+            {error && <p className="mb-4 text-sm text-destructive">{error}</p>}
+
+            <Button type="submit" size="lg" className="w-full" disabled={loading}>
+              {loading ? 'Redirecting...' : `Purchase ${tier.name} — $${tier.price}`}
+            </Button>
+          </form>
+
+          <p className="mt-4 text-center text-xs text-muted-foreground/60">
+            Your license key will be delivered via email after payment.
+          </p>
+        </div>
+      </motion.div>
+    </div>
+  );
+}