shipd 0.1.0

package/template/app/dashboard/_components/subscribe-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
+import { Zap } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface SubscribeButtonProps {
+  productId?: string;
+  slug?: string;
+}
+
+export function SubscribeButton({
+  productId = process.env.NEXT_PUBLIC_STARTER_TIER!,
+  slug = process.env.NEXT_PUBLIC_STARTER_SLUG!
+}: SubscribeButtonProps = {}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubscribe = async () => {
+    setIsLoading(true);
+    try {
+      console.log("Starting checkout with:", { productId, slug });
+
+      await authClient.checkout({
+        products: [productId],
+        slug: slug,
+      });
+
+      // If we reach here, checkout was initiated
+      console.log("Checkout initiated successfully");
+    } catch (error) {
+      console.error("Checkout error:", error);
+      toast.error("Failed to start checkout. Please try again.");
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleSubscribe}
+      disabled={isLoading}
+      className="bg-[#ff5722] hover:bg-[#d84315] text-white w-full"
+    >
+      <Zap className="w-4 h-4 mr-2" />
+      {isLoading ? "Loading..." : "Subscribe Now"}
+    </Button>
+  );
+}

package/template/app/dashboard/billing/page.tsx

@@ -0,0 +1,277 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { CreditCard, Calendar, AlertCircle, CheckCircle2, ExternalLink } from "lucide-react";
+import { getSubscriptionDetails } from "@/lib/subscription";
+import Link from "next/link";
+
+export default async function BillingPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.session?.userId) {
+    redirect("/sign-in");
+  }
+
+  const subscription = await getSubscriptionDetails();
+  const sub = subscription.subscription;
+
+  return (
+    <section className="flex flex-col items-start justify-start p-6 w-full max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="w-full mb-8">
+        <h1 className="text-3xl font-bold tracking-tight text-white">Billing & Subscription</h1>
+        <p className="text-gray-400 mt-2">
+          Manage your subscription, payment methods, and billing history
+        </p>
+      </div>
+
+      {/* No Subscription State */}
+      {!subscription.hasActiveSubscription ? (
+        <div className="w-full">
+          <Card className="bg-[#1a1a1a] border-[#2a2a2a]">
+            <CardContent className="p-12 text-center">
+              <div className="max-w-md mx-auto">
+                <div className="w-16 h-16 bg-[#ff5722]/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <CreditCard className="w-8 h-8 text-[#ff5722]" />
+                </div>
+                <h3 className="text-2xl font-semibold text-white mb-2">
+                  No Active Subscription
+                </h3>
+                <p className="text-gray-400 mb-6">
+                  Subscribe to SaaS Scaffold to access the CLI and start building your SaaS application.
+                </p>
+                <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                  <Link href="/pricing">
+                    <Button className="bg-[#ff5722] hover:bg-[#d84315] text-white w-full sm:w-auto">
+                      View Pricing Plans
+                    </Button>
+                  </Link>
+                  <Link href="/docs">
+                    <Button variant="outline" className="border-[#2a2a2a] hover:bg-[#0a0a0a] w-full sm:w-auto">
+                      Learn More
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      ) : (
+        <div className="w-full space-y-6">
+          {/* Current Plan Card */}
+          <Card className="bg-gradient-to-br from-[#1a1a1a] to-[#0a0a0a] border-[#2a2a2a]">
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle className="text-white">Current Plan</CardTitle>
+                  <CardDescription>Your active subscription details</CardDescription>
+                </div>
+                <Badge className="bg-green-500/20 text-green-400 border-green-500/30">
+                  <CheckCircle2 className="w-3 h-3 mr-1" />
+                  Active
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div>
+                  <p className="text-sm text-gray-400 mb-1">Plan</p>
+                  <p className="text-2xl font-bold text-white">
+                    {sub?.productId || 'Premium'}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-400 mb-1">Price</p>
+                  <p className="text-2xl font-bold text-white">
+                    ${(sub?.amount || 0) / 100}
+                    <span className="text-base font-normal text-gray-400">
+                      /{sub?.recurringInterval || 'month'}
+                    </span>
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-400 mb-1">Status</p>
+                  <p className="text-2xl font-bold text-white capitalize">
+                    {sub?.status || 'Active'}
+                  </p>
+                </div>
+              </div>
+
+              {sub?.cancelAtPeriodEnd && (
+                <div className="mt-6 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg flex items-start gap-3">
+                  <AlertCircle className="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-semibold text-yellow-400 mb-1">
+                      Subscription Ending
+                    </p>
+                    <p className="text-sm text-gray-400">
+                      Your subscription will end on{' '}
+                      <span className="text-white font-medium">
+                        {sub.currentPeriodEnd && new Date(sub.currentPeriodEnd).toLocaleDateString('en-US', {
+                          month: 'long',
+                          day: 'numeric',
+                          year: 'numeric'
+                        })}
+                      </span>
+                      . You can reactivate it anytime before then.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Billing Details Card */}
+          <Card className="bg-[#0a0a0a] border-[#2a2a2a]">
+            <CardHeader>
+              <CardTitle className="text-white flex items-center">
+                <Calendar className="w-5 h-5 mr-2 text-[#ff5722]" />
+                Billing Cycle
+              </CardTitle>
+              <CardDescription>Your current billing period and renewal date</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <p className="text-sm text-gray-400 mb-2">Current Period</p>
+                  <div className="flex items-center gap-2">
+                    <p className="text-white">
+                      {sub?.currentPeriodStart && new Date(sub.currentPeriodStart).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric'
+                      })}
+                    </p>
+                    <span className="text-gray-500">→</span>
+                    <p className="text-white">
+                      {sub?.currentPeriodEnd && new Date(sub.currentPeriodEnd).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric'
+                      })}
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-400 mb-2">Next Billing Date</p>
+                  <p className="text-white font-semibold">
+                    {sub?.currentPeriodEnd && !sub?.cancelAtPeriodEnd &&
+                      new Date(sub.currentPeriodEnd).toLocaleDateString('en-US', {
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric'
+                      })
+                    }
+                    {sub?.cancelAtPeriodEnd && (
+                      <span className="text-yellow-400">Subscription Ending</span>
+                    )}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Manage Subscription Card */}
+          <Card className="bg-[#0a0a0a] border-[#2a2a2a]">
+            <CardHeader>
+              <CardTitle className="text-white">Manage Subscription</CardTitle>
+              <CardDescription>Update your plan, payment method, or cancel your subscription</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {/* Polar Customer Portal */}
+                <form action="/api/subscription/portal" method="POST" className="w-full">
+                  <Button
+                    type="submit"
+                    variant="outline"
+                    className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a] justify-between"
+                  >
+                    <span className="flex items-center">
+                      <CreditCard className="w-4 h-4 mr-2" />
+                      Manage Payment
+                    </span>
+                    <ExternalLink className="w-4 h-4" />
+                  </Button>
+                </form>
+
+                {/* Change Plan */}
+                <Link href="/pricing" className="w-full">
+                  <Button
+                    variant="outline"
+                    className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a] justify-between"
+                  >
+                    <span>Change Plan</span>
+                    <ExternalLink className="w-4 h-4" />
+                  </Button>
+                </Link>
+              </div>
+
+              <div className="pt-4 border-t border-[#2a2a2a]">
+                <p className="text-sm text-gray-400 mb-3">
+                  Need to cancel? You can cancel your subscription anytime. You&apos;ll retain access until the end of your billing period.
+                </p>
+                {!sub?.cancelAtPeriodEnd ? (
+                  <form action="/api/subscription/cancel" method="POST">
+                    <Button
+                      type="submit"
+                      variant="outline"
+                      className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+                    >
+                      Cancel Subscription
+                    </Button>
+                  </form>
+                ) : (
+                  <form action="/api/subscription/reactivate" method="POST">
+                    <Button
+                      type="submit"
+                      className="bg-[#ff5722] hover:bg-[#d84315]"
+                    >
+                      Reactivate Subscription
+                    </Button>
+                  </form>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Billing Information */}
+          <Card className="bg-[#0a0a0a] border-[#2a2a2a]">
+            <CardHeader>
+              <CardTitle className="text-white">Billing Information</CardTitle>
+              <CardDescription>Your billing details and invoice history</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <p className="text-sm text-gray-400 mb-2">Payment Method</p>
+                <div className="flex items-center gap-2">
+                  <CreditCard className="w-4 h-4 text-gray-400" />
+                  <p className="text-white">Managed via Polar.sh</p>
+                </div>
+              </div>
+              <div>
+                <p className="text-sm text-gray-400 mb-2">Invoices</p>
+                <p className="text-white text-sm">
+                  Access your invoice history through the{' '}
+                  <form action="/api/subscription/portal" method="POST" className="inline">
+                    <Button
+                      type="submit"
+                      variant="link"
+                      className="text-[#ff5722] hover:text-[#d84315] p-0 h-auto"
+                    >
+                      customer portal
+                    </Button>
+                  </form>
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </section>
+  );
+}

package/template/app/dashboard/chat/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { useChat } from "@ai-sdk/react";
+import Markdown from "react-markdown";
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat({
+    maxSteps: 10,
+  });
+
+  return (
+    <div className="flex flex-col w-full py-24 justify-center items-center">
+      <div className="w-full max-w-xl space-y-4 mb-20">
+        {messages.map((message, i) => (
+          <div
+            key={message.id}
+            className={cn(
+              "flex",
+              message.role === "user" ? "justify-end" : "justify-start",
+            )}
+          >
+            <div
+              className={cn(
+                "max-w-[65%] px-3 py-1.5 text-sm shadow-sm",
+                message.role === "user"
+                  ? "bg-[#0B93F6] text-white rounded-2xl rounded-br-sm"
+                  : "bg-[#E9E9EB] text-black rounded-2xl rounded-bl-sm",
+              )}
+            >
+              {message.parts.map((part) => {
+                switch (part.type) {
+                  case "text":
+                    return (
+                      <div
+                        key={`${message.id}-${i}`}
+                        className="prose-sm prose-p:my-0.5 prose-li:my-0.5 prose-ul:my-1 prose-ol:my-1"
+                      >
+                        <Markdown>{part.text}</Markdown>
+                      </div>
+                    );
+                  default:
+                    return null;
+                }
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form
+        className="flex gap-2 justify-center w-full items-center fixed bottom-0"
+        onSubmit={handleSubmit}
+      >
+        <div className="flex flex-col gap-2 justify-center items-start mb-8 max-w-xl w-full border p-2 rounded-lg bg-white ">
+          <Input
+            className="w-full border-0 shadow-none !ring-transparent "
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+          <div className="flex justify-end gap-3 items-center w-full">
+            <Button size="sm" className="text-xs">
+              Send
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

package/template/app/dashboard/cli/page.tsx

@@ -0,0 +1,260 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Terminal, Copy, CheckCircle2, Download, BookOpen, Github } from "lucide-react";
+import { getSubscriptionDetails } from "@/lib/subscription";
+import Link from "next/link";
+
+export default async function CLIPage() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.session?.userId) {
+    redirect("/sign-in");
+  }
+
+  const subscription = await getSubscriptionDetails();
+  const user = session.user;
+
+  return (
+    <section className="flex flex-col items-start justify-start p-6 w-full max-w-7xl mx-auto">
+      {/* Header */}
+      <div className="w-full mb-8">
+        <h1 className="text-3xl font-bold tracking-tight text-white">CLI Access</h1>
+        <p className="text-gray-400 mt-2">
+          Everything you need to get started with the SaaS Scaffold CLI
+        </p>
+      </div>
+
+      {/* Subscription Check */}
+      {!subscription.hasActiveSubscription && (
+        <div className="w-full mb-6">
+          <Card className="bg-red-500/10 border-red-500/30">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-4">
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-red-400 mb-1">
+                    Active Subscription Required
+                  </h3>
+                  <p className="text-gray-400 text-sm">
+                    You need an active subscription to use the SaaS Scaffold CLI.
+                  </p>
+                </div>
+                <Link href="/pricing">
+                  <Button className="bg-[#ff5722] hover:bg-[#d84315]">
+                    View Pricing
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Installation */}
+      <div className="w-full mb-6">
+        <Card className="bg-[#0a0a0a] border-[#2a2a2a]">
+          <CardHeader>
+            <CardTitle className="text-white flex items-center">
+              <Download className="w-5 h-5 mr-2 text-[#ff5722]" />
+              Installation
+            </CardTitle>
+            <CardDescription>Install the SaaS Scaffold CLI globally via npm</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <p className="text-sm text-gray-400 mb-2">npm (recommended)</p>
+              <div className="bg-black/50 p-4 rounded-lg border border-[#2a2a2a] flex items-center justify-between">
+                <code className="text-[#ff5722] font-mono text-sm">
+                  npx saas-scaffold init my-project
+                </code>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-gray-400 hover:text-white"
+                  onClick={() => navigator.clipboard.writeText('npx saas-scaffold init my-project')}
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="text-sm text-gray-400">
+              <p>No installation required! Use <code className="text-[#ff5722] bg-black/50 px-2 py-1 rounded">npx</code> to run the latest version directly.</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Authentication */}
+      <div className="w-full mb-6">
+        <Card className="bg-[#0a0a0a] border-[#2a2a2a]">
+          <CardHeader>
+            <CardTitle className="text-white flex items-center">
+              <Terminal className="w-5 h-5 mr-2 text-[#ff5722]" />
+              Authentication
+            </CardTitle>
+            <CardDescription>Authenticate your CLI to access premium features</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Step 1 */}
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <div className="w-6 h-6 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold">
+                  1
+                </div>
+                <h4 className="text-white font-semibold">Run the login command</h4>
+              </div>
+              <div className="ml-8 space-y-2">
+                <p className="text-sm text-gray-400">Execute the following command in your terminal:</p>
+                <div className="bg-black/50 p-4 rounded-lg border border-[#2a2a2a] flex items-center justify-between">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx saas-scaffold login
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-400 hover:text-white"
+                    onClick={() => navigator.clipboard.writeText('npx saas-scaffold login')}
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2 */}
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <div className="w-6 h-6 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold">
+                  2
+                </div>
+                <h4 className="text-white font-semibold">Complete browser authentication</h4>
+              </div>
+              <div className="ml-8 space-y-2">
+                <p className="text-sm text-gray-400">
+                  Your browser will open automatically. Sign in with your account (you&apos;re already signed in as <span className="text-white">{user?.email}</span>).
+                </p>
+              </div>
+            </div>
+
+            {/* Step 3 */}
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <div className="w-6 h-6 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold">
+                  3
+                </div>
+                <h4 className="text-white font-semibold">Start building</h4>
+              </div>
+              <div className="ml-8 space-y-2">
+                <p className="text-sm text-gray-400">You&apos;re now authenticated! Create your first project:</p>
+                <div className="bg-black/50 p-4 rounded-lg border border-[#2a2a2a] flex items-center justify-between">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx saas-scaffold init my-saas-app
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-400 hover:text-white"
+                    onClick={() => navigator.clipboard.writeText('npx saas-scaffold init my-saas-app')}
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {subscription.hasActiveSubscription && (
+              <div className="pt-4 border-t border-[#2a2a2a]">
+                <div className="flex items-center gap-2 text-green-400">
+                  <CheckCircle2 className="w-5 h-5" />
+                  <p className="text-sm font-medium">Active subscription detected - CLI access enabled</p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Available Commands */}
+      <div className="w-full mb-6">
+        <Card className="bg-[#0a0a0a] border-[#2a2a2a]">
+          <CardHeader>
+            <CardTitle className="text-white">Available Commands</CardTitle>
+            <CardDescription>All commands available in the SaaS Scaffold CLI</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4">
+              {/* Init Command */}
+              <div className="p-4 bg-black/30 rounded-lg border border-[#2a2a2a]">
+                <div className="flex items-start justify-between mb-2">
+                  <code className="text-[#ff5722] font-mono">saas-scaffold init [project-name]</code>
+                  <Badge variant="outline" className="border-green-500/30 text-green-400">
+                    Primary
+                  </Badge>
+                </div>
+                <p className="text-sm text-gray-400">
+                  Generate a new SaaS project with authentication, billing, and premium features pre-configured.
+                </p>
+                <div className="mt-2 text-xs text-gray-500">
+                  Options: <code>--mock</code> (skip authentication for testing)
+                </div>
+              </div>
+
+              {/* Login Command */}
+              <div className="p-4 bg-black/30 rounded-lg border border-[#2a2a2a]">
+                <code className="text-[#ff5722] font-mono mb-2 block">saas-scaffold login</code>
+                <p className="text-sm text-gray-400">
+                  Authenticate your CLI with your SaaS Scaffold account. Opens browser for OAuth flow.
+                </p>
+              </div>
+
+              {/* Logout Command */}
+              <div className="p-4 bg-black/30 rounded-lg border border-[#2a2a2a]">
+                <code className="text-[#ff5722] font-mono mb-2 block">saas-scaffold logout</code>
+                <p className="text-sm text-gray-400">
+                  Remove authentication token and log out of the CLI.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Resources */}
+      <div className="w-full">
+        <h2 className="text-xl font-semibold text-white mb-4">Resources</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* Documentation */}
+          <Link href="/docs">
+            <Card className="bg-[#0a0a0a] border-[#2a2a2a] hover:border-[#ff5722]/50 transition-colors cursor-pointer h-full">
+              <CardHeader>
+                <BookOpen className="w-8 h-8 text-[#ff5722] mb-2" />
+                <CardTitle className="text-white">Documentation</CardTitle>
+                <CardDescription>
+                  Complete guides, API reference, and tutorials
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+
+          {/* GitHub */}
+          <a href="https://github.com/saas-scaffold/cli" target="_blank" rel="noopener noreferrer">
+            <Card className="bg-[#0a0a0a] border-[#2a2a2a] hover:border-[#ff5722]/50 transition-colors cursor-pointer h-full">
+              <CardHeader>
+                <Github className="w-8 h-8 text-[#ff5722] mb-2" />
+                <CardTitle className="text-white">GitHub Repository</CardTitle>
+                <CardDescription>
+                  Source code, issues, and contributions
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}