@mars-stack/cli 3.0.1 → 4.0.0

package/template/src/app/pricing/page.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, Badge, Button, LinkButton } from '@mars-stack/ui';
+import { appConfig } from '@/config/app.config';
+import { routes } from '@/config/routes';
+import { useAuth } from '@/features/auth/context/AuthContext';
+
+interface PlanTier {
+  name: string;
+  description: string;
+  monthlyPrice: number;
+  annualPrice: number;
+  priceId?: string;
+  annualPriceId?: string;
+  features: string[];
+  highlighted?: boolean;
+  cta: string;
+}
+
+const PLACEHOLDER_PLANS: PlanTier[] = [
+  {
+    name: 'Starter',
+    description: 'For individuals getting started.',
+    monthlyPrice: 0,
+    annualPrice: 0,
+    features: [
+      'Up to 1,000 requests/month',
+      'Basic analytics',
+      'Community support',
+      'Single user',
+    ],
+    cta: 'Get started free',
+  },
+  {
+    name: 'Pro',
+    description: 'For growing teams and businesses.',
+    monthlyPrice: 29,
+    annualPrice: 290,
+    features: [
+      'Unlimited requests',
+      'Advanced analytics',
+      'Priority support',
+      'Up to 10 team members',
+      'Custom integrations',
+      'API access',
+    ],
+    highlighted: true,
+    cta: 'Start free trial',
+  },
+  {
+    name: 'Enterprise',
+    description: 'For large-scale operations.',
+    monthlyPrice: 99,
+    annualPrice: 990,
+    features: [
+      'Everything in Pro',
+      'Unlimited team members',
+      'SSO & SAML',
+      'Dedicated support',
+      'Custom SLA',
+      'Audit logs',
+      'On-premise option',
+    ],
+    cta: 'Contact sales',
+  },
+];
+
+function formatPrice(amount: number): string {
+  if (amount === 0) return 'Free';
+  return `$${amount}`;
+}
+
+function CheckIcon() {
+  return (
+    <svg className="h-4 w-4 shrink-0 text-text-success" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+    </svg>
+  );
+}
+
+function PlanCard({
+  plan,
+  annual,
+  onSubscribe,
+  isAuthenticated,
+  isLoading,
+}: {
+  plan: PlanTier;
+  annual: boolean;
+  onSubscribe: (priceId: string) => void;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}) {
+  const price = annual ? plan.annualPrice : plan.monthlyPrice;
+  const period = annual ? '/year' : '/month';
+  const priceId = annual ? plan.annualPriceId : plan.priceId;
+  const hasStripe = (appConfig.services.payments.provider as string) === 'stripe';
+
+  return (
+    <Card
+      className={
+        plan.highlighted
+          ? 'relative ring-2 ring-brand-primary'
+          : 'relative'
+      }
+    >
+      {plan.highlighted && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge variant="info">Most popular</Badge>
+        </div>
+      )}
+
+      <div className="flex flex-col h-full">
+        <div>
+          <h3 className="text-lg font-semibold text-text-primary">{plan.name}</h3>
+          <p className="mt-1 text-sm text-text-secondary">{plan.description}</p>
+        </div>
+
+        <div className="mt-4">
+          <span className="text-4xl font-bold text-text-primary">{formatPrice(price)}</span>
+          {price > 0 && (
+            <span className="ml-1 text-sm text-text-muted">{period}</span>
+          )}
+        </div>
+
+        <ul className="mt-6 space-y-3 flex-1">
+          {plan.features.map((feature) => (
+            <li key={feature} className="flex items-start gap-2">
+              <CheckIcon />
+              <span className="text-sm text-text-secondary">{feature}</span>
+            </li>
+          ))}
+        </ul>
+
+        <div className="mt-6">
+          {price === 0 ? (
+            isAuthenticated ? (
+              <LinkButton href={routes.dashboard} variant="secondary" size="md" className="w-full justify-center">
+                Go to Dashboard
+              </LinkButton>
+            ) : (
+              <LinkButton href={routes.signUp} variant="secondary" size="md" className="w-full justify-center">
+                {plan.cta}
+              </LinkButton>
+            )
+          ) : hasStripe && priceId ? (
+            <Button
+              variant={plan.highlighted ? 'primary' : 'secondary'}
+              size="md"
+              className="w-full justify-center"
+              onClick={() => onSubscribe(priceId)}
+              disabled={isLoading}
+            >
+              {isLoading ? 'Redirecting...' : plan.cta}
+            </Button>
+          ) : isAuthenticated ? (
+            <Button variant={plan.highlighted ? 'primary' : 'secondary'} size="md" className="w-full justify-center" disabled>
+              {plan.cta}
+            </Button>
+          ) : (
+            <LinkButton
+              href={`${routes.signIn}?callbackUrl=${encodeURIComponent(routes.pricing)}`}
+              variant={plan.highlighted ? 'primary' : 'secondary'}
+              size="md"
+              className="w-full justify-center"
+            >
+              Sign in to subscribe
+            </LinkButton>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default function PricingPage() {
+  const [annual, setAnnual] = useState(false);
+  const [loadingPriceId, setLoadingPriceId] = useState<string | null>(null);
+  const { user } = useAuth();
+  const isAuthenticated = !!user;
+  const hasStripe = (appConfig.services.payments.provider as string) === 'stripe';
+
+  const handleSubscribe = async (priceId: string) => {
+    if (!isAuthenticated) {
+      window.location.href = `${routes.signIn}?callbackUrl=${encodeURIComponent(routes.pricing)}`;
+      return;
+    }
+
+    setLoadingPriceId(priceId);
+
+    try {
+      const response = await fetch('/api/protected/billing/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ priceId }),
+      });
+
+      if (!response.ok) {
+        const data: { error?: string } = await response.json();
+        throw new Error(data.error ?? 'Failed to create checkout session');
+      }
+
+      const { url } = (await response.json()) as { url: string };
+      window.location.href = url;
+    } catch (error) {
+      console.error('Checkout error:', error);
+      setLoadingPriceId(null);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-surface-background">
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold tracking-tight text-text-primary sm:text-5xl">
+            Simple, transparent pricing
+          </h1>
+          <p className="mx-auto mt-4 max-w-2xl text-lg text-text-secondary">
+            Choose the plan that fits your needs. All plans include a 14-day free trial.
+          </p>
+        </div>
+
+        <div className="mt-8 flex items-center justify-center gap-3">
+          <span className={`text-sm font-medium ${!annual ? 'text-text-primary' : 'text-text-muted'}`}>
+            Monthly
+          </span>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={annual}
+            onClick={() => setAnnual((prev) => !prev)}
+            className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ${
+              annual ? 'bg-brand-primary' : 'bg-surface-hover'
+            }`}
+          >
+            <span
+              className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-surface-card shadow-sm transition-transform duration-200 ${
+                annual ? 'translate-x-5' : 'translate-x-0'
+              }`}
+            />
+          </button>
+          <span className={`text-sm font-medium ${annual ? 'text-text-primary' : 'text-text-muted'}`}>
+            Annual
+          </span>
+          {annual && (
+            <Badge variant="success">Save ~17%</Badge>
+          )}
+        </div>
+
+        {!hasStripe && (
+          <div className="mx-auto mt-6 max-w-md rounded-lg border border-border-default bg-surface-card p-4 text-center">
+            <p className="text-sm text-text-muted">
+              Stripe is not configured. Showing placeholder plans. Configure your payments
+              provider to enable subscriptions.
+            </p>
+          </div>
+        )}
+
+        <div className="mt-12 grid gap-8 lg:grid-cols-3">
+          {PLACEHOLDER_PLANS.map((plan) => (
+            <PlanCard
+              key={plan.name}
+              plan={plan}
+              annual={annual}
+              onSubscribe={handleSubscribe}
+              isAuthenticated={isAuthenticated}
+              isLoading={loadingPriceId !== null}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/config/routes.ts

@@ -7,6 +7,9 @@ export const routes = {
   verifyEmail: '/verify',
   dashboard: '/dashboard',
   settings: '/settings',
+  billing: '/settings/billing',
+  pricing: '/pricing',
+  files: '/files',
   admin: '/admin',
   onboarding: '/onboarding',
   comingSoon: '/coming-soon',

package/template/src/features/uploads/components/FileList.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Badge, Spinner } from '@mars-stack/ui';
+import type { FileRecord } from '../types';
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatDate(date: Date | string): string {
+  return new Date(date).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+function FileTypeIcon({ contentType }: { contentType: string }) {
+  const iconClass = 'h-5 w-5 text-text-muted';
+
+  if (contentType.startsWith('image/')) {
+    return (
+      <svg className={iconClass} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" />
+      </svg>
+    );
+  }
+
+  if (contentType.startsWith('video/')) {
+    return (
+      <svg className={iconClass} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg className={iconClass} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+    </svg>
+  );
+}
+
+interface FileListProps {
+  refreshKey?: number;
+}
+
+export function FileList({ refreshKey }: FileListProps) {
+  const [files, setFiles] = useState<FileRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
+
+  const fetchFiles = useCallback(async () => {
+    try {
+      const response = await fetch('/api/protected/files/list', {
+        credentials: 'include',
+      });
+
+      if (response.ok) {
+        const data = (await response.json()) as { files: FileRecord[] };
+        setFiles(data.files);
+      }
+    } catch (error) {
+      console.error('Failed to fetch files:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchFiles();
+  }, [fetchFiles, refreshKey]);
+
+  const handleDelete = useCallback(async (fileId: string) => {
+    setDeletingIds((prev) => new Set(prev).add(fileId));
+    setFiles((prev) => prev.filter((f) => f.id !== fileId));
+
+    try {
+      const response = await fetch(`/api/protected/files/${fileId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        const restored = files.find((f) => f.id === fileId);
+        if (restored) {
+          setFiles((prev) => [...prev, restored]);
+        }
+      }
+    } catch {
+      const restored = files.find((f) => f.id === fileId);
+      if (restored) {
+        setFiles((prev) => [...prev, restored]);
+      }
+    } finally {
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(fileId);
+        return next;
+      });
+    }
+  }, [files]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (files.length === 0) {
+    return (
+      <div className="rounded-xl border border-border-default bg-surface-card p-8 text-center">
+        <svg
+          className="mx-auto h-10 w-10 text-text-muted"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1}
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+        </svg>
+        <p className="mt-3 text-sm text-text-secondary">No files uploaded yet.</p>
+        <p className="mt-1 text-xs text-text-muted">Drop a file above to get started.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-border-default">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b border-border-default bg-surface-card">
+            <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-muted">
+              File
+            </th>
+            <th className="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-muted sm:table-cell">
+              Size
+            </th>
+            <th className="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-muted md:table-cell">
+              Date
+            </th>
+            <th className="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-muted sm:table-cell">
+              Access
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-text-muted">
+              Actions
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-border-default bg-surface-background">
+          {files.map((file) => (
+            <tr key={file.id} className="hover:bg-surface-hover transition-colors">
+              <td className="px-4 py-3">
+                <div className="flex items-center gap-2.5">
+                  <FileTypeIcon contentType={file.contentType} />
+                  <span className="truncate text-sm font-medium text-text-primary max-w-[200px]">
+                    {file.filename}
+                  </span>
+                </div>
+              </td>
+              <td className="hidden px-4 py-3 text-sm text-text-secondary sm:table-cell">
+                {formatFileSize(file.size)}
+              </td>
+              <td className="hidden px-4 py-3 text-sm text-text-secondary md:table-cell">
+                {formatDate(file.createdAt)}
+              </td>
+              <td className="hidden px-4 py-3 sm:table-cell">
+                <Badge variant={file.access === 'public' ? 'info' : 'neutral'}>
+                  {file.access}
+                </Badge>
+              </td>
+              <td className="px-4 py-3">
+                <div className="flex items-center justify-end gap-2">
+                  <a
+                    href={`/api/protected/files/${file.id}`}
+                    download
+                    className="text-sm font-medium text-text-link hover:text-text-link-hover"
+                  >
+                    Download
+                  </a>
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    onClick={() => handleDelete(file.id)}
+                    disabled={deletingIds.has(file.id)}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}