create-solostack 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-solostack",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "The complete SaaS boilerplate for indie hackers - Next.js 15 with auth, payments, database, and email",
   "type": "module",
   "bin": {

package/src/generators/base.js

@@ -398,20 +398,21 @@ export default function Home() {
              icon={<Database className="w-5 h-5 text-emerald-400" />}
              status={status?.database?.connected}
              loading={loading}
-             description="PostgreSQL + Prisma"
+             description="${config?.database === 'Supabase' ? 'Supabase' : 'PostgreSQL + Prisma'}"
              details={status?.database?.connected ? \`User count: \${status.database.userCount}\` : status?.database?.error || "Not connected"}
-             actionLabel="Open Studio"
-             actionCommand="npm run db:studio"
+             actionLabel="${config?.database === 'Supabase' ? 'Dashboard' : 'Open Studio'}"
+             actionCommand="${config?.database === 'Supabase' ? '' : 'npm run db:studio'}"
+             actionUrl="${config?.database === 'Supabase' ? 'https://supabase.com/dashboard' : ''}"
            />
            <StatusCard 
              title="Authentication" 
              icon={<Shield className="w-5 h-5 text-blue-400" />}
              status={status?.auth?.configured}
              loading={loading}
-             description={status?.auth?.providers?.map((p: any) => p.name).join(', ') || "No providers"}
+             description={status?.auth?.type || status?.auth?.providers?.map((p: any) => p.name).join(', ') || "Not configured"}
              details={status?.auth?.configured ? "Ready to authenticate users" : "Missing secrets"}
              actionLabel="Read Docs"
-             actionUrl="https://next-auth.js.org"
+             actionUrl="${config?.auth === 'Supabase Auth' ? 'https://supabase.com/docs/guides/auth' : 'https://next-auth.js.org'}"
            />
            <StatusCard 
              title="Payments" 

package/src/generators/pro/admin.js

@@ -0,0 +1,344 @@
+/**
+ * Admin Panel Generator - Pro Feature
+ * Generates admin dashboard with user management and analytics
+ */
+
+import path from 'path';
+import { writeFile, ensureDir } from '../../utils/files.js';
+
+export async function generateAdmin(projectPath) {
+    await ensureDir(path.join(projectPath, 'src/app/admin'));
+    await ensureDir(path.join(projectPath, 'src/app/admin/users'));
+    await ensureDir(path.join(projectPath, 'src/app/admin/subscriptions'));
+    await ensureDir(path.join(projectPath, 'src/components/admin'));
+
+    // Generate admin layout
+    const adminLayout = `import { redirect } from 'next/navigation';
+import { auth } from '@/lib/auth';
+import Link from 'next/link';
+import { LayoutDashboard, Users, CreditCard, BarChart3, ArrowLeft } from 'lucide-react';
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+  
+  if (!session || session.user.role !== 'ADMIN') {
+    redirect('/login');
+  }
+
+  const navItems = [
+    { href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
+    { href: '/admin/users', label: 'Users', icon: Users },
+    { href: '/admin/subscriptions', label: 'Subscriptions', icon: CreditCard },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Sidebar */}
+      <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-white">
+        <div className="flex h-full flex-col">
+          <div className="flex h-16 items-center border-b px-6">
+            <span className="text-lg font-bold text-gray-900">Admin Panel</span>
+          </div>
+          
+          <nav className="flex-1 space-y-1 px-3 py-4">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+              >
+                <item.icon className="h-5 w-5" />
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+
+          <div className="border-t p-4">
+            <Link
+              href="/dashboard"
+              className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-900"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to App
+            </Link>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <main className="ml-64 min-h-screen p-8">
+        {children}
+      </main>
+    </div>
+  );
+}
+`;
+
+    await writeFile(
+        path.join(projectPath, 'src/app/admin/layout.tsx'),
+        adminLayout
+    );
+
+    // Generate admin dashboard
+    const adminDashboard = `import { db } from '@/lib/db';
+import { Users, CreditCard, DollarSign, TrendingUp } from 'lucide-react';
+
+async function getStats() {
+  const [totalUsers, activeSubscriptions, totalRevenue] = await Promise.all([
+    db.user.count(),
+    db.subscription.count({ where: { status: 'ACTIVE' } }),
+    db.payment.aggregate({
+      _sum: { amount: true },
+      where: { status: 'succeeded' },
+    }),
+  ]);
+
+  return {
+    totalUsers,
+    activeSubscriptions,
+    totalRevenue: (totalRevenue._sum.amount || 0) / 100, // Convert cents to dollars
+    mrr: activeSubscriptions * 29, // Simplified MRR calculation
+  };
+}
+
+export default async function AdminDashboard() {
+  const stats = await getStats();
+
+  const cards = [
+    {
+      title: 'Total Users',
+      value: stats.totalUsers.toLocaleString(),
+      icon: Users,
+      color: 'bg-blue-500',
+    },
+    {
+      title: 'Active Subscriptions',
+      value: stats.activeSubscriptions.toLocaleString(),
+      icon: CreditCard,
+      color: 'bg-green-500',
+    },
+    {
+      title: 'Total Revenue',
+      value: \`$\${stats.totalRevenue.toLocaleString()}\`,
+      icon: DollarSign,
+      color: 'bg-purple-500',
+    },
+    {
+      title: 'Monthly Recurring Revenue',
+      value: \`$\${stats.mrr.toLocaleString()}\`,
+      icon: TrendingUp,
+      color: 'bg-amber-500',
+    },
+  ];
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-900 mb-8">Dashboard</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {cards.map((card) => (
+          <div
+            key={card.title}
+            className="bg-white rounded-xl border p-6 shadow-sm"
+          >
+            <div className="flex items-center justify-between mb-4">
+              <span className="text-sm font-medium text-gray-500">{card.title}</span>
+              <div className={\`p-2 rounded-lg \${card.color}\`}>
+                <card.icon className="h-5 w-5 text-white" />
+              </div>
+            </div>
+            <p className="text-3xl font-bold text-gray-900">{card.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="bg-white rounded-xl border p-6 shadow-sm">
+        <h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
+        <div className="grid grid-cols-2 gap-4">
+          <a
+            href="/admin/users"
+            className="p-4 border rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            <Users className="h-6 w-6 mb-2 text-gray-600" />
+            <span className="font-medium">Manage Users</span>
+          </a>
+          <a
+            href="/admin/subscriptions"
+            className="p-4 border rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            <CreditCard className="h-6 w-6 mb-2 text-gray-600" />
+            <span className="font-medium">View Subscriptions</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+
+    await writeFile(
+        path.join(projectPath, 'src/app/admin/page.tsx'),
+        adminDashboard
+    );
+
+    // Generate users management page
+    const usersPage = `import { db } from '@/lib/db';
+import { formatDistanceToNow } from 'date-fns';
+
+async function getUsers() {
+  return db.user.findMany({
+    include: {
+      subscription: true,
+    },
+    orderBy: { createdAt: 'desc' },
+    take: 100,
+  });
+}
+
+export default async function UsersPage() {
+  const users = await getUsers();
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">Users</h1>
+        <span className="text-sm text-gray-500">{users.length} total users</span>
+      </div>
+
+      <div className="bg-white rounded-xl border shadow-sm overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b bg-gray-50">
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Subscription</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Joined</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {users.map((user) => (
+              <tr key={user.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4">
+                  <div>
+                    <p className="font-medium text-gray-900">{user.name || 'No name'}</p>
+                    <p className="text-sm text-gray-500">{user.email}</p>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <span className={\`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium \${
+                    user.role === 'ADMIN' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800'
+                  }\`}>
+                    {user.role}
+                  </span>
+                </td>
+                <td className="px-6 py-4">
+                  {user.subscription ? (
+                    <span className={\`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium \${
+                      user.subscription.status === 'ACTIVE' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                    }\`}>
+                      {user.subscription.status}
+                    </span>
+                  ) : (
+                    <span className="text-sm text-gray-400">Free</span>
+                  )}
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-500">
+                  {formatDistanceToNow(new Date(user.createdAt), { addSuffix: true })}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+`;
+
+    await writeFile(
+        path.join(projectPath, 'src/app/admin/users/page.tsx'),
+        usersPage
+    );
+
+    // Generate subscriptions page
+    const subscriptionsPage = `import { db } from '@/lib/db';
+import { formatDistanceToNow } from 'date-fns';
+
+async function getSubscriptions() {
+  return db.subscription.findMany({
+    include: {
+      user: {
+        select: { email: true, name: true },
+      },
+    },
+    orderBy: { createdAt: 'desc' },
+  });
+}
+
+export default async function SubscriptionsPage() {
+  const subscriptions = await getSubscriptions();
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">Subscriptions</h1>
+        <span className="text-sm text-gray-500">{subscriptions.length} total</span>
+      </div>
+
+      <div className="bg-white rounded-xl border shadow-sm overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b bg-gray-50">
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plan</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Renews</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {subscriptions.map((sub) => (
+              <tr key={sub.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4">
+                  <div>
+                    <p className="font-medium text-gray-900">{sub.user.name || 'No name'}</p>
+                    <p className="text-sm text-gray-500">{sub.user.email}</p>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <span className={\`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium \${
+                    sub.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
+                    sub.status === 'CANCELED' ? 'bg-red-100 text-red-800' :
+                    'bg-gray-100 text-gray-800'
+                  }\`}>
+                    {sub.status}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-600">
+                  {sub.stripePriceId.includes('enterprise') ? 'Enterprise' : 'Pro'}
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-500">
+                  {sub.cancelAtPeriodEnd ? (
+                    <span className="text-amber-600">Canceling</span>
+                  ) : (
+                    formatDistanceToNow(new Date(sub.currentPeriodEnd), { addSuffix: true })
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+`;
+
+    await writeFile(
+        path.join(projectPath, 'src/app/admin/subscriptions/page.tsx'),
+        subscriptionsPage
+    );
+}