shipd 0.1.0

package/template/app/dashboard/layout.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import DashboardTopNav from "./_components/navbar";
+import DashboardSideBar from "./_components/sidebar";
+/*AI_CHAT_START*/
+import Chatbot from "./_components/chatbot";
+/*AI_CHAT_END*/
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex h-screen overflow-hidden w-full">
+      <DashboardSideBar />
+      <main className="flex-1 overflow-y-auto">
+        <DashboardTopNav>{children}</DashboardTopNav>
+      </main>
+      {/*AI_CHAT_START*/}
+      <Chatbot />
+      {/*AI_CHAT_END*/}
+    </div>
+  );
+}

package/template/app/dashboard/page.tsx

@@ -0,0 +1,216 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Terminal, Zap, BookOpen, CreditCard, Download, CheckCircle2, XCircle } from "lucide-react";
+import { getSubscriptionDetails } from "@/lib/subscription";
+import { SubscribeButton } from "./_components/subscribe-button";
+
+export default async function Dashboard() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.session?.userId) {
+    redirect("/sign-in");
+  }
+
+  const subscription = await getSubscriptionDetails();
+  const user = session.user;
+
+  // Check if user has an active subscription
+  const hasActiveSubscription =
+    subscription.hasSubscription &&
+    subscription.subscription?.status === "active";
+
+  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">
+          Welcome back, {user?.name || user?.email}
+        </h1>
+        <p className="text-gray-400 mt-2">
+          Manage your SaaS Scaffold subscription and start building.
+        </p>
+      </div>
+
+      {/* Subscription Status Card */}
+      <div className="w-full mb-6">
+        <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">Subscription Status</CardTitle>
+                <CardDescription>Your current plan and access level</CardDescription>
+              </div>
+              <div>
+                {hasActiveSubscription ? (
+                  <Badge className="bg-green-500/20 text-green-400 border-green-500/30">
+                    <CheckCircle2 className="w-3 h-3 mr-1" />
+                    Active
+                  </Badge>
+                ) : (
+                  <Badge className="bg-red-500/20 text-red-400 border-red-500/30">
+                    <XCircle className="w-3 h-3 mr-1" />
+                    Inactive
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {hasActiveSubscription ? (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-gray-400">Plan</p>
+                    <p className="text-lg font-semibold text-white">
+                      {subscription.subscription?.productId || 'Premium'}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-400">Status</p>
+                    <p className="text-lg font-semibold text-white capitalize">
+                      {subscription.subscription?.status || 'Active'}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-400">Billing</p>
+                    <p className="text-lg font-semibold text-white">
+                      ${(subscription.subscription?.amount || 0) / 100}/{subscription.subscription?.recurringInterval || 'month'}
+                    </p>
+                  </div>
+                </div>
+                <div className="pt-4 border-t border-[#2a2a2a]">
+                  <Link href="/dashboard/billing">
+                    <Button variant="outline" className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a]">
+                      <CreditCard className="w-4 h-4 mr-2" />
+                      Manage Subscription
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-4 text-center py-4">
+                <p className="text-gray-400 mb-4">
+                  You don&apos;t have an active subscription. Subscribe to get started.
+                </p>
+                <SubscribeButton />
+                <Link href="/pricing" className="block mt-2">
+                  <Button variant="ghost" className="text-gray-400 hover:text-white text-sm">
+                    View pricing details
+                  </Button>
+                </Link>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Start Guide */}
+      {hasActiveSubscription && (
+        <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]" />
+                Quick Start
+              </CardTitle>
+              <CardDescription>Get started with SaaS Scaffold CLI in minutes</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <p className="text-sm text-gray-400 mb-2">1. Authenticate the CLI</p>
+                <div className="bg-black/50 p-4 rounded-lg border border-[#2a2a2a]">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx saas-scaffold login
+                  </code>
+                </div>
+              </div>
+              <div>
+                <p className="text-sm text-gray-400 mb-2">2. Create your first project</p>
+                <div className="bg-black/50 p-4 rounded-lg border border-[#2a2a2a]">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx saas-scaffold init my-saas-app
+                  </code>
+                </div>
+              </div>
+              <div className="pt-2">
+                <Link href="/dashboard/cli">
+                  <Button variant="outline" className="border-[#2a2a2a] hover:bg-[#1a1a1a]">
+                    <Download className="w-4 h-4 mr-2" />
+                    View Full CLI Guide
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Quick Actions Grid */}
+      <div className="w-full">
+        <h2 className="text-xl font-semibold text-white mb-4">Quick Actions</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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>
+                  Learn how to use SaaS Scaffold and build your SaaS
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+
+          {/* Billing */}
+          <Link href="/dashboard/billing">
+            <Card className="bg-[#0a0a0a] border-[#2a2a2a] hover:border-[#ff5722]/50 transition-colors cursor-pointer h-full">
+              <CardHeader>
+                <CreditCard className="w-8 h-8 text-[#ff5722] mb-2" />
+                <CardTitle className="text-white">Billing</CardTitle>
+                <CardDescription>
+                  Manage your subscription and payment methods
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        </div>
+      </div>
+
+      {/* Help Section */}
+      <div className="w-full mt-8">
+        <Card className="bg-[#1a1a1a] border-[#2a2a2a]">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-lg font-semibold text-white mb-1">Need Help?</h3>
+                <p className="text-gray-400 text-sm">
+                  Check out our documentation or contact support
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Link href="/docs">
+                  <Button variant="outline" className="border-[#2a2a2a] hover:bg-[#0a0a0a]">
+                    View Docs
+                  </Button>
+                </Link>
+                <Link href="mailto:support@saas-scaffold.com">
+                  <Button className="bg-[#ff5722] hover:bg-[#d84315]">
+                    Contact Support
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+}

package/template/app/dashboard/payment/_components/manage-subscription.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+
+export default function ManageSubscription() {
+  return (
+    <Button
+      variant="outline"
+      onClick={async () => {
+        try {
+          await authClient.customer.portal();
+        } catch (error) {
+          console.error("Failed to open customer portal:", error);
+        }
+      }}
+    >
+      <ExternalLink className="h-4 w-4 mr-2" />
+      Manage Subscription
+    </Button>
+  );
+}

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

@@ -0,0 +1,126 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getSubscriptionDetails } from "@/lib/subscription";
+import Link from "next/link";
+import ManageSubscription from "./_components/manage-subscription";
+
+export default async function PaymentPage() {
+  const subscriptionDetails = await getSubscriptionDetails();
+
+  return (
+    <div>
+      <div className="p-6 space-y-4">
+        <div className="relative min-h-screen">
+          {!subscriptionDetails.hasSubscription ||
+          subscriptionDetails.subscription?.status !== "active" ? (
+            <>
+              <div className="absolute inset-0 z-10 rounded-lg flex items-center justify-center">
+                <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg text-center max-w-md">
+                  <h3 className="text-xl font-semibold mb-2">
+                    Subscription Required
+                  </h3>
+                  <p className="text-muted-foreground mb-4">
+                    You need an active subscription to access payment management
+                    features.
+                  </p>
+                  <Link href="/pricing">
+                    <Button>Subscribe Now</Button>
+                  </Link>
+                </div>
+              </div>
+              <div className="blur-sm pointer-events-none">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Payment Management</CardTitle>
+                    <CardDescription>
+                      Manage your billing and payment methods
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">
+                          Current Plan
+                        </p>
+                        <p className="text-md">Pro Plan</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">
+                          Billing Status
+                        </p>
+                        <p className="text-md">Active</p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle>Subscription Details</CardTitle>
+                <CardDescription>
+                  Your current subscription information
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Status
+                    </p>
+                    <p className="text-md capitalize">
+                      {subscriptionDetails.subscription.status}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Amount
+                    </p>
+                    <p className="text-md">
+                      {subscriptionDetails.subscription.amount / 100}{" "}
+                      {subscriptionDetails.subscription.currency.toUpperCase()}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Billing Interval
+                    </p>
+                    <p className="text-md capitalize">
+                      {subscriptionDetails.subscription.recurringInterval}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Current Period End
+                    </p>
+                    <p className="text-md">
+                      {new Date(
+                        subscriptionDetails.subscription.currentPeriodEnd,
+                      ).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+                {subscriptionDetails.subscription.cancelAtPeriodEnd && (
+                  <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+                    <p className="text-sm text-yellow-800">
+                      Your subscription will cancel at the end of the current
+                      billing period.
+                    </p>
+                  </div>
+                )}
+                <ManageSubscription />
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}