@lucifer91299/create-portal-app 1.0.0

package/dist/cli/index.js

@@ -0,0 +1,886 @@
+#!/usr/bin/env node
+"use strict";
+
+// src/cli/index.ts
+var import_fs = require("fs");
+var import_path = require("path");
+
+// src/cli/prompt.ts
+var import_readline = require("readline");
+var rl = (0, import_readline.createInterface)({ input: process.stdin, output: process.stderr });
+function ask(question, defaultVal = "") {
+  return new Promise((resolve) => {
+    const display = defaultVal ? `${question} (${defaultVal}): ` : `${question}: `;
+    rl.question(display, (ans) => resolve(ans.trim() || defaultVal));
+  });
+}
+async function select(question, options) {
+  process.stderr.write(`
+${question}
+`);
+  options.forEach((o, i) => {
+    const hint = o.hint ? `  \u2014 ${o.hint}` : "";
+    process.stderr.write(`  ${i + 1}. ${o.label}${hint}
+`);
+  });
+  const raw = await ask(`Enter number (1\u2013${options.length})`, "1");
+  const idx = Math.max(0, Math.min(parseInt(raw, 10) - 1, options.length - 1));
+  const chosen = options[isNaN(idx) ? 0 : idx];
+  process.stderr.write(`   \u2192 ${chosen.label}
+`);
+  return chosen.value;
+}
+function closePrompt() {
+  rl.close();
+}
+
+// src/templates/index.ts
+function genPackageJson(o) {
+  const deps = {
+    "@lucifer91299/ui": o.localUiPath ? `file:${o.localUiPath}` : "^1.0.0",
+    "next": "^15.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "framer-motion": "^12.0.0",
+    "axios": "^1.7.9",
+    "@tanstack/react-query": "^5.64.1",
+    "jose": "^5.9.6",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5",
+    "lucide-react": "^0.469.0"
+  };
+  if (o.stateManagement === "redux-query") {
+    deps["@reduxjs/toolkit"] = "^2.5.0";
+    deps["react-redux"] = "^9.2.0";
+  }
+  if (o.authMode === "laravel") {
+    deps["laravel-session-sdk"] = "^1.4.9";
+  }
+  if (o.includeI18n) {
+    deps["next-intl"] = "^3.26.3";
+  }
+  const devDeps = {
+    "typescript": "^5.7.3",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.20"
+  };
+  return JSON.stringify({
+    name: o.projectName,
+    version: "0.1.0",
+    private: true,
+    description: o.projectDescription,
+    scripts: {
+      dev: "next dev",
+      build: "next build",
+      start: "next start",
+      lint: "next lint",
+      typecheck: "tsc --noEmit"
+    },
+    dependencies: deps,
+    devDependencies: devDeps
+  }, null, 2);
+}
+function genTailwindConfig(_o) {
+  return `import type { Config } from 'tailwindcss'
+import preset from '@lucifer91299/ui/tailwind/preset'
+
+// Brand colors are set via ThemeProvider CSS variables (see src/theme.config.ts).
+// Do NOT override color tokens here \u2014 that would bypass runtime theming.
+const config: Config = {
+  presets: [preset],
+  content: ['./src/**/*.{ts,tsx}'],
+  plugins: [],
+}
+
+export default config
+`;
+}
+function genThemeConfig(o) {
+  return `import { createTheme } from '@lucifer91299/ui'
+
+export default createTheme({
+  primary:          '${o.primaryColor}',
+  accent:           '${o.accentColor}',
+  success:          '${o.successColor}',
+  logoSrc:          '${o.brandLogoPath || "/brand/logo.svg"}',
+  poweredByLogoSrc: '/brand/powered-by-logo.svg',
+  poweredByText:    'Powered by',
+  projectName:      '${o.projectName}',
+  sidebar:          '${o.sidebarStyle}',
+  loginStyle:       '${o.loginStyle}',
+})
+`;
+}
+function genEnvLocal(o) {
+  const lines = [];
+  if (o.authMode === "jwt" || o.authMode === "multi-role") {
+    lines.push(`NEXT_PUBLIC_API_URL=${o.apiUrl ?? "http://localhost:3000"}`);
+    if (o.authMode === "jwt") {
+      lines.push(`JWT_SECRET=${o.jwtSecret ?? "change-me-in-production"}`);
+    }
+  }
+  if (o.authMode === "laravel") {
+    lines.push(`NEXT_PUBLIC_LARAVEL_URL=${o.laravelUrl ?? "http://localhost:8000"}`);
+    lines.push(`SESSION_DB_HOST=${o.dbHost ?? "127.0.0.1"}`);
+    lines.push(`SESSION_DB_PORT=${o.dbPort ?? "3306"}`);
+    lines.push(`SESSION_DB_NAME=${o.dbName ?? "laravel"}`);
+    lines.push(`SESSION_DB_USER=${o.dbUser ?? "root"}`);
+    lines.push(`SESSION_DB_PASS=${o.dbPassword ?? ""}`);
+  }
+  return lines.join("\n") + "\n";
+}
+function genGlobalsCSS() {
+  return `/* Project-specific utilities \u2014 SDK component styles are in @lucifer91299/ui/styles/components.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+}
+function genRootLayout(o) {
+  return `import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import '@lucifer91299/ui/styles/components.css'
+import './globals.css'
+import { Providers } from '@/providers'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })
+
+export const metadata: Metadata = {
+  title: '${o.projectName}',
+  description: '${o.projectDescription}',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+`;
+}
+function genProviders(o) {
+  const imports = [
+    `'use client'`,
+    `import { type ReactNode } from 'react'`,
+    `import { ThemeProvider } from '@lucifer91299/ui'`,
+    `import { QueryClient, QueryClientProvider } from '@tanstack/react-query'`,
+    `import theme from '@/theme.config'`
+  ];
+  const setup = [
+    `const queryClient = new QueryClient()`
+  ];
+  if (o.stateManagement === "redux-query") {
+    imports.push(`import { Provider as ReduxProvider } from 'react-redux'`);
+    imports.push(`import { store } from '@/store'`);
+  }
+  const wrap = (inner) => {
+    let result = inner;
+    result = `<QueryClientProvider client={queryClient}>${result}</QueryClientProvider>`;
+    if (o.stateManagement === "redux-query") {
+      result = `<ReduxProvider store={store}>${result}</ReduxProvider>`;
+    }
+    result = `<ThemeProvider theme={theme}>${result}</ThemeProvider>`;
+    return result;
+  };
+  return `${imports.join("\n")}
+
+${setup.join("\n")}
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    ${wrap("{children}")}
+  )
+}
+`;
+}
+function genLoginPage(o) {
+  const isAnimated = o.loginStyle !== "simple";
+  const component = isAnimated ? "LoginPage" : "LoginPageSimple";
+  const credField = isAnimated ? "identifier" : "email";
+  const poweredByProp = isAnimated ? `      poweredBy={{
+        logoSrc: "/brand/powered-by-logo.svg",
+        text: "Powered by",
+        href: "#",
+      }}` : "";
+  return `'use client'
+
+import { ${component} } from '@lucifer91299/ui'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function Login() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError]         = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleSubmit = async (creds: { ${credField}: string; password: string }) => {
+    setError(null)
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: creds.${credField}, password: creds.password }),
+        credentials: 'include',
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error ?? 'Invalid credentials'); return }
+      router.replace('/dashboard')
+    } catch {
+      setError('Login failed. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <${component}
+      projectName="${o.projectName}"
+      projectSubtitle="Sign in to continue"
+      logoSrc="/brand/logo.svg"
+      onSubmit={handleSubmit}
+      isLoading={isLoading}
+      error={error}
+${poweredByProp}
+    />
+  )
+}
+`;
+}
+function genLoginRoute(o) {
+  const cookieName = o.jwtCookieName ?? "access_token";
+  return `import { SignJWT } from 'jose'
+import { NextResponse } from 'next/server'
+
+// Demo credentials \u2014 replace this block with a real backend call
+const DEMO_EMAIL    = 'admin@demo.com'
+const DEMO_PASSWORD = 'password123'
+const DEMO_USER     = { id: 1, name: 'Admin User', role: 'Admin', email: DEMO_EMAIL }
+
+export async function POST(request: Request) {
+  const { email, password } = (await request.json()) as { email?: string; password?: string }
+
+  if (email !== DEMO_EMAIL || password !== DEMO_PASSWORD) {
+    return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 })
+  }
+
+  const secret = new TextEncoder().encode(process.env.JWT_SECRET ?? 'change-me-in-production')
+  const token  = await new SignJWT({ sub: String(DEMO_USER.id), ...DEMO_USER })
+    .setProtectedHeader({ alg: 'HS256' })
+    .setExpirationTime('7d')
+    .sign(secret)
+
+  const res = NextResponse.json({ ok: true })
+  res.cookies.set('${cookieName}', token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 60 * 60 * 24 * 7,
+    path: '/',
+  })
+  return res
+}
+`;
+}
+function genUserRoute(o) {
+  const cookieName = o.jwtCookieName ?? "access_token";
+  return `import { jwtVerify } from 'jose'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function GET() {
+  const store = await cookies()
+  const token = store.get('${cookieName}')?.value
+  if (!token) return NextResponse.json({ error: 'Not authenticated' }, { status: 401 })
+
+  try {
+    const secret = new TextEncoder().encode(process.env.JWT_SECRET ?? 'change-me-in-production')
+    const { payload } = await jwtVerify(token, secret)
+    return NextResponse.json(payload)
+  } catch {
+    return NextResponse.json({ error: 'Invalid token' }, { status: 401 })
+  }
+}
+`;
+}
+function genMiddleware(o) {
+  if (o.authMode === "multi-role") {
+    const rolesArr = (o.roles ?? ["admin"]).map((r) => `'${r}'`).join(", ");
+    return `import { multiRoleMiddleware } from '@lucifer91299/ui/server'
+
+export default multiRoleMiddleware({
+  roles: [${rolesArr}],
+  cookiePrefix: 'portal_',
+  protectedPaths: ['/dashboard'],
+  loginPath: '/login',
+})
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico|public).*)'],
+}
+`;
+  }
+  if (o.authMode === "laravel") {
+    return `import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+const PROTECTED = ['/dashboard']
+const LOGIN = '/login'
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl
+  const isProtected = PROTECTED.some((p) => pathname === p || pathname.startsWith(p + '/'))
+  if (!isProtected) return NextResponse.next()
+  const session = request.cookies.get('laravel_session')?.value
+  if (!session) return NextResponse.redirect(new URL(\`\${LOGIN}?redirect=\${pathname}\`, request.url))
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico|public).*)'],
+}
+`;
+  }
+  const cookieName = o.jwtCookieName ?? "access_token";
+  return `import { jwtMiddleware } from '@lucifer91299/ui/server'
+
+export default jwtMiddleware({
+  cookieName: '${cookieName}',
+  jwtSecret: process.env.JWT_SECRET!,
+  protectedPaths: ['/dashboard'],
+  loginPath: '/login',
+})
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico|public).*)'],
+}
+`;
+}
+function genSessionRoute(o) {
+  const cookieName = o.jwtCookieName ?? "access_token";
+  return `import { sessionRoute } from '@lucifer91299/ui/server'
+export const { POST, DELETE } = sessionRoute({ cookieName: '${cookieName}' })
+`;
+}
+function genLogoutRoute(o) {
+  const cookieName = o.jwtCookieName ?? "access_token";
+  return `import { logoutRoute } from '@lucifer91299/ui/server'
+export const { POST } = logoutRoute({ cookieName: '${cookieName}' })
+`;
+}
+function genApiClient(o) {
+  return `import axios from 'axios'
+
+const api = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL ?? '',
+  withCredentials: true,
+  timeout: 15000,
+})
+
+api.interceptors.response.use(
+  (r) => r,
+  async (error) => {
+    if (error.response?.status === 401) {
+      await fetch('/api/auth/logout', { method: 'POST' })
+      window.location.href = '/login'
+    }
+    return Promise.reject(error)
+  },
+)
+
+export default api
+`;
+}
+function genNavConfig(o) {
+  return `import { LayoutDashboard, Settings, User } from 'lucide-react'
+import type { NavGroup } from '@lucifer91299/ui'
+
+export const navGroups: NavGroup[] = [
+  {
+    heading: 'Main',
+    groupIcon: <LayoutDashboard className="h-3.5 w-3.5" />,
+    items: [
+      { label: 'Dashboard', href: '/dashboard', icon: <LayoutDashboard className="h-4 w-4" /> },
+    ],
+  },
+  {
+    heading: 'Account',
+    groupIcon: <User className="h-3.5 w-3.5" />,
+    items: [
+      { label: 'Profile', href: '/dashboard/profile', icon: <User className="h-4 w-4" /> },
+      { label: 'Settings', href: '/dashboard/settings', icon: <Settings className="h-4 w-4" /> },
+    ],
+  },
+]
+`;
+}
+function genDashboardLayout(o) {
+  return `'use client'
+
+import { DashboardLayout } from '@lucifer91299/ui'
+import { use${o.authMode === "multi-role" ? "MultiRoleAuth" : "JwtAuth"} } from '@lucifer91299/ui'
+import { usePathname } from 'next/navigation'
+import { navGroups } from '@/components/layout/nav-config'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const { user, logout } = use${o.authMode === "multi-role" ? "MultiRoleAuth({ roles: [] })" : "JwtAuth()"}
+
+  return (
+    <DashboardLayout
+      navGroups={navGroups}
+      sidebar="${o.sidebarStyle}"
+      projectName="${o.projectName}"
+      logoSrc="/brand/logo.svg"
+      user={{ name: (user as any)?.name ?? 'User', role: (user as any)?.role ?? '' }}
+      pathname={pathname}
+      onLogout={logout}
+    >
+      {children}
+    </DashboardLayout>
+  )
+}
+`;
+}
+function genReduxStore() {
+  return `import { configureStore } from '@reduxjs/toolkit'
+import authReducer from './auth.slice'
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+  },
+})
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
+`;
+}
+function genAuthSlice() {
+  return `import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
+
+interface AuthState {
+  token: string | null
+  user: Record<string, unknown> | null
+  authenticated: boolean
+}
+
+const initialState: AuthState = {
+  token: null,
+  user: null,
+  authenticated: false,
+}
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    setCredentials(state, action: PayloadAction<{ token: string; user: Record<string, unknown> }>) {
+      state.token = action.payload.token
+      state.user = action.payload.user
+      state.authenticated = true
+    },
+    logout(state) {
+      state.token = null
+      state.user = null
+      state.authenticated = false
+    },
+  },
+})
+
+export const { setCredentials, logout } = authSlice.actions
+export default authSlice.reducer
+`;
+}
+function genRootPage() {
+  return `import { redirect } from 'next/navigation'
+
+export default function Home() {
+  redirect('/dashboard')
+}
+`;
+}
+function genDashboardHomePage(o) {
+  return `import { TrendingUp, Users, ShoppingCart, Activity } from 'lucide-react'
+
+const stats = [
+  { label: 'Total Users',  value: '2,847',   change: '+12%', icon: Users },
+  { label: 'Revenue',      value: '\u20B948,295', change: '+8.2%', icon: TrendingUp },
+  { label: 'Orders',       value: '1,429',   change: '+5.1%', icon: ShoppingCart },
+  { label: 'Active Now',   value: '94',      change: '+3',    icon: Activity },
+]
+
+const activity = [
+  { id: 'ORD-001', user: 'Rahul Sharma',  action: 'New order placed',   time: '2 min ago',  status: 'Pending' },
+  { id: 'ORD-002', user: 'Priya Mehta',   action: 'Payment received',   time: '14 min ago', status: 'Paid' },
+  { id: 'ORD-003', user: 'Amit Patel',    action: 'Order approved',     time: '1 hr ago',   status: 'Approved' },
+  { id: 'ORD-004', user: 'Sneha Iyer',    action: 'Account registered', time: '3 hr ago',   status: 'Active' },
+  { id: 'ORD-005', user: 'Vikram Singh',  action: 'Order completed',    time: 'Yesterday',  status: 'Completed' },
+]
+
+const statusColors: Record<string, string> = {
+  Pending:   'bg-yellow-100 text-yellow-800',
+  Paid:      'bg-blue-100   text-blue-800',
+  Approved:  'bg-green-100  text-green-800',
+  Active:    'bg-purple-100 text-purple-800',
+  Completed: 'bg-gray-100   text-gray-700',
+}
+
+export default function DashboardHome() {
+  return (
+    <div className="p-6 space-y-6">
+      <div className="page-header">
+        <h1 className="page-title">${o.projectName}</h1>
+        <p className="text-body text-label-secondary">Welcome back, Admin</p>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {stats.map(({ label, value, change, icon: Icon }) => (
+          <div key={label} className="card p-5">
+            <div className="flex items-center justify-between mb-3">
+              <p className="text-subhead text-label-secondary">{label}</p>
+              <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
+                <Icon className="w-4 h-4 text-primary" />
+              </div>
+            </div>
+            <p className="text-title1 font-bold text-label-primary">{value}</p>
+            <p className="text-footnote text-green-600 mt-1 font-medium">{change} this month</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="card overflow-hidden">
+        <div className="px-5 py-4 border-b border-gray-100">
+          <h2 className="text-callout font-semibold text-label-primary">Recent Activity</h2>
+        </div>
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-label-secondary text-subhead">
+            <tr>
+              <th className="px-5 py-3 text-left font-medium">ID</th>
+              <th className="px-5 py-3 text-left font-medium">User</th>
+              <th className="px-5 py-3 text-left font-medium">Action</th>
+              <th className="px-5 py-3 text-left font-medium">Time</th>
+              <th className="px-5 py-3 text-left font-medium">Status</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-50">
+            {activity.map((row) => (
+              <tr key={row.id} className="hover:bg-gray-50 transition-colors">
+                <td className="px-5 py-3.5 font-mono text-xs text-label-secondary">{row.id}</td>
+                <td className="px-5 py-3.5 font-medium text-label-primary">{row.user}</td>
+                <td className="px-5 py-3.5 text-label-secondary">{row.action}</td>
+                <td className="px-5 py-3.5 text-label-tertiary">{row.time}</td>
+                <td className="px-5 py-3.5">
+                  <span className={\`inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold \${statusColors[row.status] ?? ''}\`}>
+                    {row.status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+`;
+}
+
+// src/cli/index.ts
+function write(filePath, content) {
+  const dir = filePath.substring(0, filePath.lastIndexOf("/"));
+  if (dir) (0, import_fs.mkdirSync)(dir, { recursive: true });
+  (0, import_fs.writeFileSync)(filePath, content, "utf-8");
+}
+function log(msg) {
+  process.stdout.write(msg + "\n");
+}
+function parseArgs(argv) {
+  const flags = {};
+  const positional = [];
+  for (const arg of argv) {
+    if (arg.startsWith("--")) {
+      const [key, ...rest] = arg.slice(2).split("=");
+      flags[key] = rest.length ? rest.join("=") : true;
+    } else {
+      positional.push(arg);
+    }
+  }
+  return { flags, positional };
+}
+var DEFAULTS = {
+  projectDescription: "My portal application",
+  authMode: "jwt",
+  loginStyle: "animated",
+  sidebarStyle: "full",
+  primaryColor: "#000080",
+  accentColor: "#FF9933",
+  successColor: "#138808",
+  brandLogoPath: "brand/logo.svg",
+  apiUrl: "http://localhost:3000",
+  jwtCookieName: "access_token",
+  jwtSecret: "change-me-in-production",
+  includeI18n: false,
+  stateManagement: "redux-query",
+  packageManager: "npm"
+};
+async function runPrompts(projectNameArg) {
+  process.stderr.write("\n  create-portal-app \u2014 Next.js authenticated portal scaffolder\n");
+  process.stderr.write("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n");
+  const projectName = projectNameArg?.trim() || await ask("Project name", "my-portal");
+  const projectDescription = await ask("Project description", DEFAULTS.projectDescription);
+  const authMode = await select("Auth mode?", [
+    { value: "jwt", label: "JWT cookie", hint: "NestJS / Express / any backend" },
+    { value: "multi-role", label: "Multi-role JWT", hint: "Separate cookies per role (coach + judge etc.)" },
+    { value: "laravel", label: "Laravel session", hint: "PHP Laravel backend" }
+  ]);
+  let apiUrl = DEFAULTS.apiUrl;
+  let jwtCookieName = DEFAULTS.jwtCookieName;
+  let jwtSecret = DEFAULTS.jwtSecret;
+  let roles;
+  let laravelUrl;
+  let dbHost;
+  let dbPort;
+  let dbName;
+  let dbUser;
+  let dbPassword;
+  if (authMode === "jwt") {
+    apiUrl = await ask("Backend API URL", DEFAULTS.apiUrl);
+    jwtCookieName = await ask("Cookie name", DEFAULTS.jwtCookieName);
+    jwtSecret = await ask("JWT secret", DEFAULTS.jwtSecret);
+  }
+  if (authMode === "multi-role") {
+    const raw = await ask("Role names (comma separated)", "coach, judge");
+    roles = raw.split(",").map((r) => r.trim()).filter(Boolean);
+    if (!roles.length) roles = ["admin"];
+    apiUrl = await ask("Backend API URL", DEFAULTS.apiUrl);
+  }
+  if (authMode === "laravel") {
+    laravelUrl = await ask("Laravel URL", "http://localhost:8000");
+    dbHost = await ask("Database host", "127.0.0.1");
+    dbPort = await ask("Database port", "3306");
+    dbName = await ask("Database name", "laravel");
+    dbUser = await ask("Database user", "root");
+    dbPassword = await ask("Database password", "");
+  }
+  const loginStyle = await select("Login page style?", [
+    { value: "animated", label: "Animated", hint: "floating orbs + particle background + tricolor bar" },
+    { value: "simple", label: "Simple", hint: "clean gradient card (minimal)" }
+  ]);
+  const sidebarStyle = await select("Sidebar style?", [
+    { value: "full", label: "Full", hint: "wide sidebar with labels and collapsible groups" },
+    { value: "rail", label: "Rail", hint: "icon-only narrow sidebar" },
+    { value: "both", label: "Both", hint: "full on desktop, rail on mobile" }
+  ]);
+  process.stderr.write("\nBrand colours (press Enter to keep default):\n");
+  const primaryColor = await ask("Primary colour  ", DEFAULTS.primaryColor);
+  const accentColor = await ask("Accent colour   ", DEFAULTS.accentColor);
+  const successColor = await ask("Success colour  ", DEFAULTS.successColor);
+  const brandLogoPath = await ask("Logo path in public/", DEFAULTS.brandLogoPath);
+  const includeI18nRaw = await select("Include i18n (translations)?", [
+    { value: "no", label: "No" },
+    { value: "yes", label: "Yes" }
+  ]);
+  const stateManagement = await select("State management?", [
+    { value: "redux-query", label: "Redux Toolkit + React Query" },
+    { value: "query-only", label: "React Query only" }
+  ]);
+  const packageManager = await select("Package manager?", [
+    { value: "npm", label: "npm" },
+    { value: "pnpm", label: "pnpm" },
+    { value: "yarn", label: "yarn" }
+  ]);
+  closePrompt();
+  return {
+    projectName,
+    projectDescription,
+    authMode,
+    loginStyle,
+    sidebarStyle,
+    primaryColor,
+    accentColor,
+    successColor,
+    brandLogoPath,
+    apiUrl,
+    jwtCookieName,
+    jwtSecret,
+    roles,
+    laravelUrl,
+    dbHost,
+    dbPort,
+    dbName,
+    dbUser,
+    dbPassword,
+    includeI18n: includeI18nRaw === "yes",
+    stateManagement,
+    packageManager
+  };
+}
+function scaffold(opts) {
+  const outDir = (0, import_path.join)(process.cwd(), opts.projectName);
+  if ((0, import_fs.existsSync)(outDir)) {
+    log(`
+Error: directory "${opts.projectName}" already exists.
+`);
+    process.exit(1);
+  }
+  log(`
+Creating ${opts.projectName}/ ...
+`);
+  const f = (rel) => (0, import_path.join)(outDir, rel);
+  write(f("package.json"), genPackageJson(opts));
+  write(f("tailwind.config.ts"), genTailwindConfig(opts));
+  write(f("src/theme.config.ts"), genThemeConfig(opts));
+  write(f(".env.local"), genEnvLocal(opts));
+  write(f(".env.example"), genEnvLocal(opts).replace(/=.+/g, "="));
+  write(f("postcss.config.mjs"), `export default { plugins: { tailwindcss: {}, autoprefixer: {} } }
+`);
+  write(f("next.config.ts"), `import type { NextConfig } from 'next'
+const config: NextConfig = {
+  transpilePackages: ['@lucifer91299/ui'],
+}
+export default config
+`);
+  write(f("tsconfig.json"), JSON.stringify({
+    compilerOptions: {
+      target: "ES2017",
+      lib: ["dom", "dom.iterable", "esnext"],
+      allowJs: true,
+      skipLibCheck: true,
+      strict: true,
+      noEmit: true,
+      esModuleInterop: true,
+      module: "esnext",
+      moduleResolution: "bundler",
+      resolveJsonModule: true,
+      isolatedModules: true,
+      jsx: "preserve",
+      incremental: true,
+      plugins: [{ name: "next" }],
+      paths: { "@/*": ["./src/*"] }
+    },
+    include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    exclude: ["node_modules"]
+  }, null, 2));
+  write(f("src/app/globals.css"), genGlobalsCSS());
+  write(f("src/app/layout.tsx"), genRootLayout(opts));
+  write(f("src/app/page.tsx"), genRootPage());
+  write(f("src/app/login/page.tsx"), genLoginPage(opts));
+  write(f("src/app/dashboard/layout.tsx"), genDashboardLayout(opts));
+  write(f("src/app/dashboard/page.tsx"), genDashboardHomePage(opts));
+  write(f("src/app/api/auth/login/route.ts"), genLoginRoute(opts));
+  write(f("src/app/api/auth/user/route.ts"), genUserRoute(opts));
+  write(f("src/app/api/auth/session/route.ts"), genSessionRoute(opts));
+  write(f("src/app/api/auth/logout/route.ts"), genLogoutRoute(opts));
+  write(f("src/providers/index.tsx"), genProviders(opts));
+  write(f("src/lib/api.ts"), genApiClient(opts));
+  write(f("src/components/layout/nav-config.tsx"), genNavConfig(opts));
+  write(f("src/middleware.ts"), genMiddleware(opts));
+  if (opts.stateManagement === "redux-query") {
+    write(f("src/store/index.ts"), genReduxStore());
+    write(f("src/store/auth.slice.ts"), genAuthSlice());
+  }
+  const initial = opts.projectName.charAt(0).toUpperCase();
+  write(
+    f("public/brand/logo.svg"),
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="${opts.primaryColor}"/><text x="32" y="40" font-size="24" text-anchor="middle" fill="#fff" font-family="system-ui">${initial}</text></svg>`
+  );
+  write(
+    f("public/brand/powered-by-logo.svg"),
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 24"><text y="18" font-size="12" font-family="system-ui" fill="#888">powered</text></svg>`
+  );
+  const cmds = {
+    npm: { install: "npm install", dev: "npm run dev" },
+    pnpm: { install: "pnpm install", dev: "pnpm dev" },
+    yarn: { install: "yarn", dev: "yarn dev" }
+  }[opts.packageManager];
+  const count = countFiles(outDir);
+  log(`\u2714  ${opts.projectName}/ \u2014 ${count} files created`);
+  log(``);
+  log(`   Theme:   ${opts.primaryColor}  ${opts.accentColor}  ${opts.successColor}`);
+  log(`   Auth:    ${opts.authMode}`);
+  log(`   Login:   ${opts.loginStyle}`);
+  log(`   Sidebar: ${opts.sidebarStyle}`);
+  log(``);
+  log(`Next steps:`);
+  log(`  cd ${opts.projectName}`);
+  log(`  ${cmds.install}`);
+  log(`  ${cmds.dev}`);
+  log(``);
+}
+function countFiles(dir) {
+  const { readdirSync, statSync } = require("fs");
+  let n = 0;
+  for (const e of readdirSync(dir)) {
+    const full = (0, import_path.join)(dir, e);
+    n += statSync(full).isDirectory() ? countFiles(full) : 1;
+  }
+  return n;
+}
+async function main() {
+  const { flags, positional } = parseArgs(process.argv.slice(2));
+  if (flags["help"] || flags["h"]) {
+    log("Usage:  create-portal-app [project-name] [options]");
+    log("");
+    log("  Without options  \u2192 interactive prompts for all settings");
+    log("");
+    log("  --yes, -y        Skip all prompts, use defaults immediately");
+    log("  --auth=jwt|multi-role|laravel");
+    log("  --login=animated|simple");
+    log("  --sidebar=full|rail|both");
+    log("  --primary=#hex   Primary brand colour");
+    log("  --accent=#hex    Accent colour");
+    log("  --success=#hex   Success colour");
+    log("  --api-url=URL    Backend API URL");
+    log("  --pm=npm|pnpm|yarn");
+    log("  --local-ui=PATH  Use local @lucifer91299/ui (file: reference, for development)");
+    log("");
+    log("Examples:");
+    log("  create-portal-app");
+    log("  create-portal-app my-portal");
+    log("  create-portal-app my-portal --yes");
+    log("  create-portal-app my-portal --yes --auth=laravel --primary=#E11D48");
+    log("  create-portal-app my-portal --yes --local-ui=../../ui");
+    process.exit(0);
+  }
+  const projectNameArg = positional[0];
+  if (flags["yes"] || flags["y"]) {
+    const name = projectNameArg || "my-portal";
+    const opts2 = {
+      projectName: name,
+      projectDescription: DEFAULTS.projectDescription,
+      authMode: flags["auth"] ?? DEFAULTS.authMode,
+      loginStyle: flags["login"] ?? DEFAULTS.loginStyle,
+      sidebarStyle: flags["sidebar"] ?? DEFAULTS.sidebarStyle,
+      primaryColor: flags["primary"] ?? DEFAULTS.primaryColor,
+      accentColor: flags["accent"] ?? DEFAULTS.accentColor,
+      successColor: flags["success"] ?? DEFAULTS.successColor,
+      brandLogoPath: DEFAULTS.brandLogoPath,
+      apiUrl: flags["api-url"] ?? DEFAULTS.apiUrl,
+      jwtCookieName: DEFAULTS.jwtCookieName,
+      jwtSecret: DEFAULTS.jwtSecret,
+      includeI18n: false,
+      stateManagement: flags["pm"] ?? DEFAULTS.stateManagement,
+      packageManager: flags["pm"] ?? DEFAULTS.packageManager,
+      localUiPath: flags["local-ui"] ?? void 0
+    };
+    log("create-portal-app \u2014 using defaults (--yes)");
+    scaffold(opts2);
+    return;
+  }
+  const opts = await runPrompts(projectNameArg);
+  opts.localUiPath = flags["local-ui"] ?? void 0;
+  scaffold(opts);
+}
+main().catch((err) => {
+  closePrompt();
+  console.error(err instanceof Error ? err.message : err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@lucifer91299/create-portal-app",
+  "version": "1.0.0",
+  "description": "Scaffold a Next.js authenticated portal with full design system in one command",
+  "license": "MIT",
+  "author": "Aakash Kanojiya",
+  "bin": {
+    "create-portal-app": "dist/cli/index.js"
+  },
+  "main": "dist/cli/index.js",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.7",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  }
+}