vibecarbon 0.1.0

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

@@ -0,0 +1,174 @@
+import { useMutation } from '@tanstack/react-query';
+import { CheckCircle, Loader2, Send } from 'lucide-react';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Wordmark } from '@/components/Logo';
+import { Nav } from '@/components/Nav';
+import { SEO } from '@/components/SEO';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+
+export default function Contact() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+
+  const submitMutation = useMutation({
+    mutationFn: async () => {
+      const response = await fetch('/api/v1/contact/submit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email, subject, message }),
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error || 'Failed to submit');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      setName('');
+      setEmail('');
+      setSubject('');
+      setMessage('');
+    },
+  });
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title="Contact" description="Get in touch with us." />
+
+      <div className="mx-auto max-w-xl px-6 pt-28 pb-24">
+        {submitMutation.isSuccess ? (
+          <Card>
+            <CardContent className="flex flex-col items-center py-12 text-center">
+              <CheckCircle className="size-12 text-primary mb-4" />
+              <h2 className="text-2xl font-bold mb-2">Message Sent</h2>
+              <p className="text-muted-foreground mb-6">
+                Thank you for reaching out. We'll get back to you as soon as possible.
+              </p>
+              <Button variant="outline" onClick={() => submitMutation.reset()}>
+                Send Another Message
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-2xl">Contact Us</CardTitle>
+              <CardDescription>
+                Have a question or feedback? Fill out the form below and we'll get back to you.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  submitMutation.mutate();
+                }}
+                className="space-y-4"
+              >
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Name</Label>
+                    <Input
+                      id="name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Your name"
+                      required
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="you@example.com"
+                      required
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="subject">Subject</Label>
+                  <Input
+                    id="subject"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                    placeholder="How can we help?"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="message">Message</Label>
+                  <Textarea
+                    id="message"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder="Your message..."
+                    rows={6}
+                    required
+                    minLength={10}
+                  />
+                </div>
+
+                {/* Honeypot - hidden from users, filled by bots */}
+                <div className="hidden" aria-hidden="true">
+                  <input type="text" name="website" tabIndex={-1} autoComplete="off" />
+                </div>
+
+                {submitMutation.error && (
+                  <p className="text-sm text-destructive">{submitMutation.error.message}</p>
+                )}
+
+                <Button type="submit" className="w-full" disabled={submitMutation.isPending}>
+                  {submitMutation.isPending ? (
+                    <Loader2 className="size-4 mr-2 animate-spin" />
+                  ) : (
+                    <Send className="size-4 mr-2" />
+                  )}
+                  Send Message
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      <footer className="border-t border-border py-8">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 sm:flex-row">
+          <Wordmark size="sm" />
+          <div className="flex items-center gap-6">
+            <Link
+              to="/"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Home
+            </Link>
+            <Link
+              to="/privacy"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Privacy
+            </Link>
+            <Link
+              to="/terms"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Terms
+            </Link>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

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

@@ -0,0 +1,368 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  Activity,
+  CreditCard,
+  Database,
+  ExternalLink,
+  Globe,
+  Rocket,
+  TrendingDown,
+  TrendingUp,
+  UserPlus,
+  Users,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Area, AreaChart } from 'recharts';
+import { useAuth } from '../components/auth/AuthProvider';
+import { ContentPanel } from '../components/ContentPanel';
+import { PageHeader } from '../components/PageHeader';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
+import { ChartContainer } from '../components/ui/chart';
+import { Skeleton } from '../components/ui/skeleton';
+import { adminServices, getServiceUrl } from '../lib/admin-services';
+import { getAuthHeaders } from '../lib/api';
+import { getUserInitials } from '../lib/utils';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || 'http://localhost:8000';
+
+interface StatsResponse {
+  users: {
+    total: number;
+    newThisMonth: number;
+    newLastMonth: number;
+    activeThisMonth: number;
+    activeLastMonth: number;
+    weeklySignups: Array<{ week: string; count: number }>;
+  };
+  orgs: {
+    total: number;
+    newThisMonth: number;
+    newLastMonth: number;
+  };
+}
+
+function getGreetingKey() {
+  const hour = new Date().getHours();
+  if (hour < 12) return 'dashboard.greeting.morning';
+  if (hour < 17) return 'dashboard.greeting.afternoon';
+  return 'dashboard.greeting.evening';
+}
+
+function MiniSparkline({ data }: { data: Array<{ week: string; count: number }> }) {
+  return (
+    <ChartContainer
+      config={{ count: { label: 'Signups', color: 'rgba(255,255,255,0.5)' } }}
+      className="h-16 w-full aspect-auto"
+    >
+      <AreaChart data={data} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
+        <defs>
+          <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="rgba(255,255,255,0.3)" />
+            <stop offset="100%" stopColor="rgba(255,255,255,0.05)" />
+          </linearGradient>
+        </defs>
+        <Area
+          dataKey="count"
+          type="monotone"
+          stroke="rgba(255,255,255,0.6)"
+          strokeWidth={2}
+          fill="url(#sparkFill)"
+        />
+      </AreaChart>
+    </ChartContainer>
+  );
+}
+
+interface KpiCardProps {
+  label: string;
+  value: string;
+  change: string;
+  positive: boolean;
+  icon: React.ComponentType<{ className?: string }>;
+  accentColor: string;
+  accentVar: string;
+  sparklineData?: Array<{ week: string; count: number }>;
+  loading: boolean;
+}
+
+function KpiCard({
+  label,
+  value,
+  change,
+  positive,
+  icon: Icon,
+  accentColor: _accentColor,
+  accentVar,
+  sparklineData,
+  loading,
+}: KpiCardProps) {
+  return (
+    <Card
+      className="relative overflow-hidden ring-0 text-white backdrop-blur-md"
+      style={{
+        border: '2px solid transparent',
+        background: `linear-gradient(315deg, color-mix(in oklab, ${accentVar} 70%, transparent), color-mix(in oklab, ${accentVar} 40%, transparent)) padding-box, linear-gradient(oklch(0.18 0.02 260),oklch(0.18 0.02 260)) padding-box, linear-gradient(315deg, white, ${accentVar}) border-box`,
+      }}
+    >
+      <CardHeader className="relative z-10 pb-1">
+        <div className="flex items-center justify-between">
+          <CardDescription className="text-sm font-semibold uppercase tracking-wide text-white drop-shadow-sm">
+            {label}
+          </CardDescription>
+          <div className="flex size-8 items-center justify-center rounded-md bg-white/20 backdrop-blur-sm">
+            <Icon className="size-4 drop-shadow-sm" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="relative z-10 pb-3">
+        {loading ? (
+          <Skeleton className="h-9 w-24 rounded-md" />
+        ) : (
+          <p className="text-4xl font-extrabold tabular-nums drop-shadow-sm">{value}</p>
+        )}
+        <div className="mt-1.5">
+          {loading ? (
+            <Skeleton className="h-5 w-32 rounded-md" />
+          ) : (
+            <span className="inline-flex items-center gap-1 text-xs font-medium text-white/90 drop-shadow-sm">
+              {positive ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
+              {change}
+            </span>
+          )}
+        </div>
+      </CardContent>
+      {/* Sparkline pinned to bottom */}
+      {sparklineData && !loading && (
+        <div className="absolute inset-x-0 bottom-0">
+          <MiniSparkline data={sparklineData} />
+        </div>
+      )}
+    </Card>
+  );
+}
+
+function StepCard({
+  icon: Icon,
+  title,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex gap-4">
+      <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+        <Icon className="size-4" />
+      </div>
+      <div className="space-y-1.5">
+        <p className="font-medium text-foreground">{title}</p>
+        <div className="text-sm text-muted-foreground">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function ExtLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-1 text-primary hover:underline font-medium"
+    >
+      {children}
+      <ExternalLink className="size-3" />
+    </a>
+  );
+}
+
+function Code({ children }: { children: React.ReactNode }) {
+  return <code className="bg-muted px-1.5 py-0.5 rounded text-xs">{children}</code>;
+}
+
+export default function Dashboard() {
+  const { t } = useTranslation();
+  const { user, isSuperAdmin } = useAuth();
+
+  const { data: stats } = useQuery({
+    queryKey: ['admin', 'stats'],
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const res = await fetch('/api/v1/admin/stats', { headers });
+      if (!res.ok) return null;
+      return res.json() as Promise<StatsResponse>;
+    },
+    enabled: isSuperAdmin,
+  });
+
+  const studioUrl =
+    getServiceUrl(adminServices.find((s) => s.id === 'database') ?? adminServices[0]) ??
+    '/admin/studio';
+
+  const greeting = t(getGreetingKey());
+  const initials = getUserInitials(user);
+  const firstName =
+    user?.user_metadata?.full_name?.split(' ')[0] || user?.email?.split('@')[0] || 'there';
+  const formattedDate = new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <>
+      <PageHeader title={t('dashboard.title')} />
+
+      <ContentPanel variant="full">
+        {/* Welcome banner */}
+        <Card className="relative overflow-hidden">
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent" />
+          <CardHeader className="relative">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-4">
+                <div className="flex size-14 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xl font-semibold text-primary">
+                  {initials}
+                </div>
+                <div>
+                  <CardTitle className="text-xl">
+                    {greeting}, {firstName}!
+                  </CardTitle>
+                  <CardDescription className="mt-0.5">{user?.email}</CardDescription>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 sm:flex-col sm:items-end">
+                <p className="text-xs text-muted-foreground">{formattedDate}</p>
+              </div>
+            </div>
+          </CardHeader>
+        </Card>
+
+        {/* KPI metrics */}
+        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+          <KpiCard
+            label={t('dashboard.totalUsers')}
+            value={stats ? stats.users.total.toLocaleString() : '\u2014'}
+            change={
+              stats
+                ? `${(((stats.users.newThisMonth - stats.users.newLastMonth) / Math.max(stats.users.newLastMonth, 1)) * 100) >= 0 ? '+' : ''}${(((stats.users.newThisMonth - stats.users.newLastMonth) / Math.max(stats.users.newLastMonth, 1)) * 100).toFixed(1)}%`
+                : '\u2014'
+            }
+            positive={stats ? stats.users.newThisMonth >= stats.users.newLastMonth : true}
+            icon={Users}
+            accentColor="bg-primary/10 text-primary"
+            accentVar="var(--primary)"
+            sparklineData={stats?.users.weeklySignups}
+            loading={!stats}
+          />
+          <KpiCard
+            label={t('dashboard.newSignups')}
+            value={stats ? stats.users.newThisMonth.toLocaleString() : '\u2014'}
+            change={
+              stats
+                ? t('dashboard.vsLastMonth', {
+                    diff: `${stats.users.newThisMonth - stats.users.newLastMonth >= 0 ? '+' : ''}${stats.users.newThisMonth - stats.users.newLastMonth}`,
+                  })
+                : '\u2014'
+            }
+            positive={stats ? stats.users.newThisMonth >= stats.users.newLastMonth : true}
+            icon={UserPlus}
+            accentColor="bg-blue-500/10 text-blue-600 dark:text-blue-400"
+            accentVar="#3b82f6"
+            sparklineData={stats?.users.weeklySignups}
+            loading={!stats}
+          />
+          <KpiCard
+            label={t('dashboard.activeUsers')}
+            value={stats ? stats.users.activeThisMonth.toLocaleString() : '\u2014'}
+            change={
+              stats
+                ? t('dashboard.vsLastMonth', {
+                    diff: `${stats.users.activeThisMonth - stats.users.activeLastMonth >= 0 ? '+' : ''}${stats.users.activeThisMonth - stats.users.activeLastMonth}`,
+                  })
+                : '\u2014'
+            }
+            positive={stats ? stats.users.activeThisMonth >= stats.users.activeLastMonth : true}
+            icon={Activity}
+            accentColor="bg-amber-500/10 text-amber-600 dark:text-amber-400"
+            accentVar="var(--warning)"
+            loading={!stats}
+          />
+          <KpiCard
+            label={t('dashboard.organizations')}
+            value={stats ? stats.orgs.total.toLocaleString() : '\u2014'}
+            change={
+              stats ? t('dashboard.newThisMonth', { count: stats.orgs.newThisMonth }) : '\u2014'
+            }
+            positive={true}
+            icon={Globe}
+            accentColor="bg-destructive/10 text-destructive"
+            accentVar="var(--destructive)"
+            loading={!stats}
+          />
+        </div>
+
+        {/* Getting started */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('dashboard.nextSteps')}</CardTitle>
+            <CardDescription>{t('dashboard.nextStepsDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <StepCard icon={Database} title={t('dashboard.exploreStudio')}>
+                <p>
+                  Open <ExtLink href={studioUrl}>Supabase Studio</ExtLink> to manage tables, run
+                  queries, and configure auth providers.
+                </p>
+              </StepCard>
+
+              <StepCard icon={Globe} title={t('dashboard.configureOAuth')}>
+                <p>Register OAuth apps with any of these providers:</p>
+                <ul className="mt-1.5 space-y-1">
+                  <li>
+                    <ExtLink href="https://console.cloud.google.com/apis/credentials">
+                      Google Cloud Console
+                    </ExtLink>
+                  </li>
+                  <li>
+                    <ExtLink href="https://github.com/settings/developers">
+                      GitHub Developer Settings
+                    </ExtLink>
+                  </li>
+                  <li>
+                    <ExtLink href="https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade">
+                      Azure Portal
+                    </ExtLink>
+                  </li>
+                </ul>
+                <p className="mt-1.5">
+                  Set the callback URL to <Code>{supabaseUrl}/auth/v1/callback</Code>, then enable
+                  the provider in{' '}
+                  <ExtLink href={studioUrl}>Studio → Authentication → Providers</ExtLink>.
+                </p>
+              </StepCard>
+
+              <StepCard icon={CreditCard} title={t('dashboard.setupStripe')}>
+                <p>
+                  Get your API keys from the{' '}
+                  <ExtLink href="https://dashboard.stripe.com/apikeys">Stripe Dashboard</ExtLink>{' '}
+                  and add <Code>STRIPE_SECRET_KEY</Code> and <Code>STRIPE_WEBHOOK_SECRET</Code> to
+                  your <Code>.env.local</Code> file. Point the webhook to{' '}
+                  <Code>/api/webhooks/stripe</Code>.
+                </p>
+              </StepCard>
+
+              <StepCard icon={Rocket} title={t('dashboard.deployProduction')}>
+                <p>
+                  Run <Code>npx vibecarbon deploy -e prod</Code> to deploy with automatic SSL,
+                  backups, and infrastructure management.
+                </p>
+              </StepCard>
+            </div>
+          </CardContent>
+        </Card>
+      </ContentPanel>
+    </>
+  );
+}