create-stackflow 1.0.0

package/src/generators/frontend.js

@@ -0,0 +1,723 @@
+import path from "node:path";
+import fs from "fs-extra";
+import ora from "ora";
+import { execa } from "execa";
+import { jsxExt, writeTemplate } from "../utils/template.js";
+
+export async function createFrontend(context) {
+  await scaffoldOfficialFrontend(context);
+  await installFrontendDependencies(context);
+  await writeFrontendOverlay(context);
+}
+
+async function scaffoldOfficialFrontend(context) {
+  const spinner = ora(`Creating ${context.frontend === "next" ? "Next.js" : "React"} frontend with official generator`).start();
+  try {
+    if (context.frontend === "next") {
+      const args = [
+        "create-next-app@latest",
+        path.basename(context.frontendDir),
+        context.language === "typescript" ? "--ts" : "--js",
+        context.tailwind ? "--tailwind" : "--no-tailwind",
+        "--eslint",
+        "--app",
+        "--src-dir",
+        "--use-npm",
+        "--import-alias",
+        "@/*"
+      ];
+      await execa("npx", args, { cwd: context.projectDir, stdio: "ignore" });
+    } else {
+      const template = context.language === "typescript" ? "react-ts" : "react";
+      await execa("npm", ["create", "vite@latest", path.basename(context.frontendDir), "--", "--template", template], {
+        cwd: context.projectDir,
+        stdio: "ignore"
+      });
+    }
+    spinner.succeed("Creating frontend with official generator");
+  } catch (error) {
+    spinner.fail("Creating frontend with official generator");
+    throw error;
+  }
+}
+
+async function installFrontendDependencies(context) {
+  await updateFrontendPackage(context);
+  if (context.skipInstall) return;
+  const spinner = ora("Installing frontend dependencies").start();
+  try {
+    const deps = [
+      "axios@latest",
+      "sonner@latest",
+      "lucide-react@latest",
+      "clsx@latest",
+      "tailwind-merge@latest"
+    ];
+    if (context.frontend === "react" && context.router) deps.push("react-router-dom@latest");
+    if (context.state === "zustand") deps.push("zustand@latest");
+    if (context.state === "redux-toolkit") deps.push("@reduxjs/toolkit@latest", "react-redux@latest");
+    if (context.form && context.form !== "none") deps.push("react-hook-form@latest", "@hookform/resolvers@latest");
+    if (context.validation === "zod") deps.push("zod@latest");
+    if (context.validation === "yup") deps.push("yup@latest");
+    if (context.tailwind && context.frontend === "react") deps.push("tailwindcss@latest", "@tailwindcss/vite@latest");
+
+    await execa("npm", ["install", ...deps], { cwd: context.frontendDir, stdio: "ignore" });
+    spinner.succeed("Installing frontend dependencies");
+  } catch (error) {
+    spinner.fail("Installing frontend dependencies");
+    throw error;
+  }
+}
+
+async function updateFrontendPackage(context) {
+  const packageFile = path.join(context.frontendDir, "package.json");
+  const pkg = await fs.readJson(packageFile);
+  pkg.dependencies = { ...(pkg.dependencies || {}) };
+  pkg.devDependencies = { ...(pkg.devDependencies || {}) };
+
+  const deps = [
+    "axios",
+    "sonner",
+    "lucide-react",
+    "clsx",
+    "tailwind-merge"
+  ];
+  if (context.frontend === "react" && context.router) deps.push("react-router-dom");
+  if (context.state === "zustand") deps.push("zustand");
+  if (context.state === "redux-toolkit") deps.push("@reduxjs/toolkit", "react-redux");
+  if (context.form && context.form !== "none") deps.push("react-hook-form", "@hookform/resolvers");
+  if (context.validation === "zod") deps.push("zod");
+  if (context.validation === "yup") deps.push("yup");
+
+  for (const dep of deps) pkg.dependencies[dep] = "latest";
+  if (context.tailwind && context.frontend === "react") {
+    pkg.devDependencies.tailwindcss = "latest";
+    pkg.devDependencies["@tailwindcss/vite"] = "latest";
+  }
+
+  if (context.frontend === "react") {
+    pkg.scripts = { ...(pkg.scripts || {}), build: "vite build" };
+  }
+
+  await fs.writeJson(packageFile, pkg, { spaces: 2 });
+}
+
+async function writeFrontendOverlay(context) {
+  const spinner = ora("Writing StackFlow frontend features").start();
+  try {
+    if (context.frontend === "next") {
+      await writeNextOverlay(context);
+    } else {
+      await writeReactOverlay(context);
+    }
+    spinner.succeed("Writing StackFlow frontend features");
+  } catch (error) {
+    spinner.fail("Writing StackFlow frontend features");
+    throw error;
+  }
+}
+
+async function writeReactOverlay(context) {
+  const x = jsxExt(context);
+  const src = path.join(context.frontendDir, "src");
+  await fs.ensureDir(path.join(src, "components", "ui"));
+  await fs.ensureDir(path.join(src, "features", "auth"));
+  await fs.ensureDir(path.join(src, "features", "tasks"));
+  await fs.ensureDir(path.join(src, "lib"));
+  await fs.ensureDir(path.join(src, "pages"));
+  await fs.ensureDir(path.join(src, "routes"));
+  await fs.ensureDir(path.join(src, "store"));
+
+  await writeTemplate(path.join(context.frontendDir, ".env"), "VITE_API_URL=http://localhost:5000/api\n");
+  await relaxTypescriptConfig(context, "react");
+  if (context.tailwind) {
+    await writeTemplate(path.join(context.frontendDir, "vite.config." + (context.language === "typescript" ? "ts" : "js")), `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173
+  }
+});
+`);
+  }
+
+  const files = reactTemplates(context, x);
+  await Promise.all(Object.entries(files).map(([file, content]) => writeTemplate(path.join(src, file), content, context)));
+  if (context.language === "typescript") {
+    await writeTemplate(path.join(src, "vite-env.d.ts"), `/// <reference types="vite/client" />
+`);
+  }
+}
+
+async function writeNextOverlay(context) {
+  const x = jsxExt(context);
+  const src = path.join(context.frontendDir, "src");
+  await fs.ensureDir(path.join(src, "app", "dashboard"));
+  await fs.ensureDir(path.join(src, "app", "login"));
+  await fs.ensureDir(path.join(src, "app", "register"));
+  await fs.ensureDir(path.join(src, "components", "ui"));
+  await fs.ensureDir(path.join(src, "features", "auth"));
+  await fs.ensureDir(path.join(src, "features", "tasks"));
+  await fs.ensureDir(path.join(src, "lib"));
+  await fs.ensureDir(path.join(src, "store"));
+
+  await removeNextGeneratedDuplicates(context, x);
+  await writeTemplate(path.join(context.frontendDir, ".env.local"), "NEXT_PUBLIC_API_URL=http://localhost:5000/api\n");
+  await relaxTypescriptConfig(context, "next");
+  const files = nextTemplates(context, x);
+  await Promise.all(Object.entries(files).map(([file, content]) => writeTemplate(path.join(src, file), content, context)));
+}
+
+async function removeNextGeneratedDuplicates(context, x) {
+  const appDir = path.join(context.frontendDir, "src", "app");
+  const generated = ["js", "jsx", "ts", "tsx"].filter((candidate) => candidate !== x);
+  await Promise.all(generated.flatMap((candidate) => [
+    fs.remove(path.join(appDir, `page.${candidate}`)),
+    fs.remove(path.join(appDir, `layout.${candidate}`)),
+    fs.remove(path.join(appDir, "login", `page.${candidate}`)),
+    fs.remove(path.join(appDir, "register", `page.${candidate}`)),
+    fs.remove(path.join(appDir, "dashboard", `page.${candidate}`))
+  ]));
+}
+
+async function relaxTypescriptConfig(context, framework) {
+  if (context.language !== "typescript") return;
+  if (framework === "react") {
+    await writeTemplate(path.join(context.frontendDir, "tsconfig.app.json"), `{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
+`);
+  } else {
+    await writeTemplate(path.join(context.frontendDir, "tsconfig.json"), `{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "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"]
+}
+`);
+  }
+}
+
+function commonTemplates(context, x) {
+  const isTs = context.language === "typescript";
+  const typeBlock = isTs ? `export type User = { id: string; name: string; email: string };
+export type Task = { _id: string; title: string; description?: string; imageUrl?: string; status: "todo" | "in-progress" | "done" };
+` : "";
+  const schema = context.validation === "none" || context.validation === "joi"
+    ? `export const authSchema = null;
+export const taskSchema = null;
+`
+    : context.validation === "zod"
+    ? `import { z } from "zod";
+
+export const authSchema = z.object({
+  name: z.string().min(2).optional(),
+  email: z.string().email(),
+  password: z.string().min(6)
+});
+
+export const taskSchema = z.object({
+  title: z.string().min(2),
+  description: z.string().optional(),
+  status: z.enum(["todo", "in-progress", "done"]).default("todo")
+});
+`
+    : `import * as yup from "yup";
+
+export const authSchema = yup.object({
+  name: yup.string().min(2),
+  email: yup.string().email().required(),
+  password: yup.string().min(6).required()
+});
+
+export const taskSchema = yup.object({
+  title: yup.string().min(2).required(),
+  description: yup.string(),
+  status: yup.string().oneOf(["todo", "in-progress", "done"]).default("todo")
+});
+`;
+
+  const authStore = context.state === "zustand"
+    ? `import { create } from "zustand";
+${isTs ? "import type { User } from \"../lib/types\";\n" : ""}
+
+export const useAuthStore = create((set) => ({
+  user: null,
+  token: typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null,
+  setSession: ({ user, token }) => {
+    if (token && typeof window !== "undefined") localStorage.setItem("stackflow_token", token);
+    set({ user, token });
+  },
+  logout: () => {
+    if (typeof window !== "undefined") localStorage.removeItem("stackflow_token");
+    set({ user: null, token: null });
+  }
+}));
+`
+    : context.state === "redux-toolkit"
+      ? `import { configureStore, createSlice } from "@reduxjs/toolkit";
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState: { user: null, token: typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null },
+  reducers: {
+    setSession: (state, action) => {
+      state.user = action.payload.user;
+      state.token = action.payload.token;
+      if (action.payload.token && typeof window !== "undefined") localStorage.setItem("stackflow_token", action.payload.token);
+    },
+    logout: (state) => {
+      state.user = null;
+      state.token = null;
+      if (typeof window !== "undefined") localStorage.removeItem("stackflow_token");
+    }
+  }
+});
+
+export const { setSession, logout } = authSlice.actions;
+export const store = configureStore({ reducer: { auth: authSlice.reducer } });
+`
+      : `import { createContext, useContext, useState } from "react";
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [session, setSessionState] = useState({ user: null, token: typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null });
+  const setSession = ({ user, token }) => {
+    if (token && typeof window !== "undefined") localStorage.setItem("stackflow_token", token);
+    setSessionState({ user, token });
+  };
+  const logout = () => {
+    if (typeof window !== "undefined") localStorage.removeItem("stackflow_token");
+    setSessionState({ user: null, token: null });
+  };
+  return <AuthContext.Provider value={{ ...session, setSession, logout }}>{children}</AuthContext.Provider>;
+}
+
+export const useAuthContext = () => useContext(AuthContext);
+`;
+
+  return {
+    [`lib/types.${isTs ? "ts" : "js"}`]: typeBlock || "export {};\n",
+    [`lib/api.${isTs ? "ts" : "js"}`]: `import axios from "axios";
+
+export const api = axios.create({
+  baseURL: ${context.frontend === "next" ? "process.env.NEXT_PUBLIC_API_URL" : "import.meta.env.VITE_API_URL"} || "http://localhost:5000/api",
+  withCredentials: true
+});
+
+api.interceptors.request.use((config) => {
+  const token = typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null;
+  if (token) config.headers.Authorization = \`Bearer \${token}\`;
+  return config;
+});
+`,
+    [`lib/validation.${isTs ? "ts" : "js"}`]: schema,
+    [`store/auth.${x}`]: authStore,
+    [`features/auth/auth.service.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
+
+export const authService = {
+  register: (payload) => api.post("/auth/register", payload).then((res) => res.data),
+  login: (payload) => api.post("/auth/login", payload).then((res) => res.data),
+  me: () => api.get("/auth/me").then((res) => res.data),
+  logout: () => api.post("/auth/logout").then((res) => res.data)
+};
+`,
+    [`features/tasks/task.service.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
+
+export const taskService = {
+  list: () => api.get("/tasks").then((res) => res.data.tasks),
+  create: (payload) => api.post("/tasks", payload, multipartConfig(payload)).then((res) => res.data.task),
+  update: (id, payload) => api.patch(\`/tasks/\${id}\`, payload, multipartConfig(payload)).then((res) => res.data.task),
+  remove: (id) => api.delete(\`/tasks/\${id}\`).then((res) => res.data)
+};
+
+function multipartConfig(payload) {
+  return payload instanceof FormData ? { headers: { "Content-Type": "multipart/form-data" } } : undefined;
+}
+`,
+    [`components/ui/button.${x}`]: `import { clsx } from "clsx";
+
+export function Button({ className = "", variant = "primary", ...props }) {
+  return (
+    <button
+      className={clsx(
+        "inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition disabled:opacity-50",
+        variant === "primary" && "bg-slate-950 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-950",
+        variant === "ghost" && "hover:bg-slate-100 dark:hover:bg-slate-800",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+`,
+    [`components/ui/input.${x}`]: `import { clsx } from "clsx";
+
+export function Input(props) {
+  return <input className={clsx("h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none focus:ring-2 focus:ring-cyan-500 dark:border-slate-700 dark:bg-slate-900", props.className)} {...props} />;
+}
+`
+  };
+}
+
+function reactTemplates(context, x) {
+  const isTs = context.language === "typescript";
+  return {
+    ...commonTemplates(context, x),
+    "index.css": `@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root { color-scheme: light; }
+.dark { color-scheme: dark; }
+body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+`,
+    [`main.${x}`]: `import React from "react";
+import ReactDOM from "react-dom/client";
+${context.router ? "import { BrowserRouter } from \"react-router-dom\";" : ""}
+${context.state === "redux-toolkit" ? "import { Provider } from \"react-redux\";\nimport { store } from \"./store/auth\";" : ""}
+${context.state === "context-api" ? "import { AuthProvider } from \"./store/auth\";" : ""}
+import { Toaster } from "sonner";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    ${context.router ? "<BrowserRouter>" : ""}
+    ${context.state === "redux-toolkit" ? "<Provider store={store}>" : ""}
+    ${context.state === "context-api" ? "<AuthProvider>" : ""}
+      <App />
+      <Toaster richColors position="top-right" />
+    ${context.state === "context-api" ? "</AuthProvider>" : ""}
+    ${context.state === "redux-toolkit" ? "</Provider>" : ""}
+    ${context.router ? "</BrowserRouter>" : ""}
+  </React.StrictMode>
+);
+`,
+    [`App.${x}`]: `${context.router ? `import { Navigate, Route, Routes } from "react-router-dom";
+import { Dashboard } from "./pages/Dashboard";
+import { Login } from "./pages/Login";
+import { Register } from "./pages/Register";
+import { ProtectedRoute } from "./routes/ProtectedRoute";
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Navigate to="/dashboard" replace />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+    </Routes>
+  );
+}
+` : `import { Dashboard } from "./pages/Dashboard";
+
+export default function App() {
+  return <Dashboard />;
+}
+`}`,
+    [`routes/ProtectedRoute.${x}`]: `import { Navigate } from "react-router-dom";
+${context.state === "zustand" ? "import { useAuthStore } from \"../store/auth\";" : ""}
+${context.state === "context-api" ? "import { useAuthContext } from \"../store/auth\";" : ""}
+${context.state === "redux-toolkit" ? "import { useSelector } from \"react-redux\";" : ""}
+
+export function ProtectedRoute({ children }) {
+  const token = ${context.state === "zustand" ? "useAuthStore((state) => state.token)" : context.state === "context-api" ? "useAuthContext()?.token" : context.state === "redux-toolkit" ? "useSelector((state) => state.auth.token)" : "localStorage.getItem(\"stackflow_token\")"};
+  return token ? children : <Navigate to="/login" replace />;
+}
+`,
+    [`pages/Login.${x}`]: authPage("login", context),
+    [`pages/Register.${x}`]: authPage("register", context),
+    [`pages/Dashboard.${x}`]: dashboardPage(context)
+  };
+}
+
+function nextTemplates(context, x) {
+  return {
+    ...commonTemplates(context, x),
+    "app/globals.css": `@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+`,
+    [`app/layout.${x}`]: `import { Toaster } from "sonner";
+import "./globals.css";
+
+export const metadata = { title: "StackFlow", description: "Generated full-stack app" };
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Toaster richColors position="top-right" />
+      </body>
+    </html>
+  );
+}
+`,
+    [`app/page.${x}`]: `import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/dashboard");
+}
+`,
+    [`app/login/page.${x}`]: `"use client";
+${authPage("login", context, true)}
+export default Login;
+`,
+    [`app/register/page.${x}`]: `"use client";
+${authPage("register", context, true)}
+export default Register;
+`,
+    [`app/dashboard/page.${x}`]: `"use client";
+${dashboardPage(context, true)}
+export default Dashboard;
+`
+  };
+}
+
+function authPage(mode, context, next = false) {
+  const isRegister = mode === "register";
+  const navImport = next ? "import { useRouter } from \"next/navigation\";" : "import { Link, useNavigate } from \"react-router-dom\";";
+  const navHook = next ? "const router = useRouter();" : "const navigate = useNavigate();";
+  const redirect = next ? "router.push(\"/dashboard\");" : "navigate(\"/dashboard\");";
+  const link = next
+    ? `<button className="text-sm text-cyan-700" onClick={() => router.push("${isRegister ? "/login" : "/register"}")}>${isRegister ? "Sign in" : "Create account"}</button>`
+    : `<Link className="text-sm text-cyan-700" to="${isRegister ? "/login" : "/register"}">${isRegister ? "Sign in" : "Create account"}</Link>`;
+  return `import { useState } from "react";
+${navImport}
+import { toast } from "sonner";
+import { Button } from "${next ? "../../components/ui/button" : "../components/ui/button"}";
+import { Input } from "${next ? "../../components/ui/input" : "../components/ui/input"}";
+import { authService } from "${next ? "../../features/auth/auth.service" : "../features/auth/auth.service"}";
+${context.state === "zustand" ? `import { useAuthStore } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
+
+export function ${isRegister ? "Register" : "Login"}() {
+  ${navHook}
+  const setSession = ${context.state === "zustand" ? "useAuthStore((state) => state.setSession)" : "({ user, token }) => localStorage.setItem(\"stackflow_token\", token)"};
+  const [loading, setLoading] = useState(false);
+  const [form, setForm] = useState({ name: "", email: "", password: "" });
+
+  async function onSubmit(event) {
+    event.preventDefault();
+    setLoading(true);
+    try {
+      const result = await authService.${mode}(form);
+      setSession(result);
+      toast.success("${isRegister ? "Account created" : "Welcome back"}");
+      ${redirect}
+    } catch (error) {
+      toast.error(error?.response?.data?.message || "Authentication failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="grid min-h-screen place-items-center bg-slate-50 px-4 text-slate-950 dark:bg-slate-950 dark:text-white">
+      <form onSubmit={onSubmit} className="w-full max-w-md space-y-4 rounded-lg border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div>
+          <h1 className="text-2xl font-semibold">${isRegister ? "Create your account" : "Sign in to StackFlow"}</h1>
+          <p className="mt-1 text-sm text-slate-500">${isRegister ? "Start managing your dashboard tasks." : "Continue to your protected dashboard."}</p>
+        </div>
+        ${isRegister ? `<Input placeholder="Name" value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} />` : ""}
+        <Input placeholder="Email" type="email" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
+        <Input placeholder="Password" type="password" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} />
+        <Button className="w-full" disabled={loading}>{loading ? "Please wait..." : "${isRegister ? "Create account" : "Sign in"}"}</Button>
+        <div className="text-center">${link}</div>
+      </form>
+    </main>
+  );
+}
+`;
+}
+
+function dashboardPage(context, next = false) {
+  const logoutNav = next ? "router.push(\"/login\");" : "navigate(\"/login\");";
+  const navImports = next ? "import { useRouter } from \"next/navigation\";" : "import { useNavigate } from \"react-router-dom\";";
+  const componentName = next ? "function Dashboard()" : "export function Dashboard()";
+  return `import { useEffect, useState } from "react";
+${navImports}
+import { Edit3, ImagePlus, LogOut, Moon, Plus, Save, Sun, Trash2, X } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "${next ? "../../components/ui/button" : "../components/ui/button"}";
+import { Input } from "${next ? "../../components/ui/input" : "../components/ui/input"}";
+import { taskService } from "${next ? "../../features/tasks/task.service" : "../features/tasks/task.service"}";
+${context.state === "zustand" ? `import { useAuthStore } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
+
+${componentName} {
+  const ${next ? "router" : "navigate"} = ${next ? "useRouter()" : "useNavigate()"};
+  const logoutStore = ${context.state === "zustand" ? "useAuthStore((state) => state.logout)" : "() => localStorage.removeItem(\"stackflow_token\")"};
+  const [dark, setDark] = useState(() => typeof window !== "undefined" && localStorage.getItem("stackflow_theme") === "dark");
+  const [loading, setLoading] = useState(true);
+  const [tasks, setTasks] = useState([]);
+  const [form, setForm] = useState({ title: "", description: "", status: "todo", image: null });
+  const [editingId, setEditingId] = useState(null);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+    if (typeof window !== "undefined") localStorage.setItem("stackflow_theme", dark ? "dark" : "light");
+  }, [dark]);
+
+  useEffect(() => {
+    taskService.list()
+      .then(setTasks)
+      .catch(() => toast.error("Could not load tasks"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function createTask(event) {
+    event.preventDefault();
+    if (!form.title.trim()) return;
+    const payload = toPayload(form);
+    const saved = editingId
+      ? await taskService.update(editingId, payload)
+      : await taskService.create(payload);
+    setTasks(editingId ? tasks.map((task) => task._id === editingId ? saved : task) : [saved, ...tasks]);
+    resetForm();
+    toast.success(editingId ? "Task updated" : "Task created");
+  }
+
+  function startEdit(task) {
+    setEditingId(task._id);
+    setForm({
+      title: task.title || "",
+      description: task.description || "",
+      status: task.status || "todo",
+      image: null
+    });
+  }
+
+  function resetForm() {
+    setEditingId(null);
+    setForm({ title: "", description: "", status: "todo", image: null });
+  }
+
+  async function removeTask(id) {
+    await taskService.remove(id);
+    setTasks(tasks.filter((task) => task._id !== id));
+    toast.success("Task deleted");
+  }
+
+  function logout() {
+    logoutStore();
+    ${logoutNav}
+  }
+
+  function toPayload(values) {
+    ${context.multer ? `const data = new FormData();
+    data.append("title", values.title);
+    data.append("description", values.description);
+    data.append("status", values.status);
+    if (values.image) data.append("image", values.image);
+    return data;` : `return {
+      title: values.title,
+      description: values.description,
+      status: values.status
+    };`}
+  }
+
+  return (
+    <main className="min-h-screen bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-white">
+      <header className="border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+        <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
+          <div>
+            <h1 className="text-xl font-semibold">StackFlow Dashboard</h1>
+            <p className="text-sm text-slate-500">Protected MERN CRUD workspace</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={() => setDark(!dark)} aria-label="Toggle dark mode">{dark ? <Sun size={18} /> : <Moon size={18} />}</Button>
+            <Button variant="ghost" onClick={logout} aria-label="Logout"><LogOut size={18} /></Button>
+          </div>
+        </div>
+      </header>
+      <section className="mx-auto grid max-w-6xl gap-6 px-4 py-8 md:grid-cols-[1fr_320px]">
+        <div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+          <div className="mb-4 flex items-center justify-between">
+            <h2 className="text-lg font-semibold">Tasks</h2>
+            <span className="text-sm text-slate-500">{tasks.length} total</span>
+          </div>
+          {loading ? <p className="text-sm text-slate-500">Loading tasks...</p> : (
+            <div className="space-y-3">
+              {tasks.map((task) => (
+                <div key={task._id} className="grid gap-3 rounded-md border border-slate-200 p-3 dark:border-slate-800 sm:grid-cols-[96px_1fr_auto]">
+                  <div className="h-24 overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800">
+                    {task.imageUrl ? <img className="h-full w-full object-cover" src={\`http://localhost:5000\${task.imageUrl}\`} alt={task.title} /> : <div className="grid h-full place-items-center text-slate-400"><ImagePlus size={20} /></div>}
+                  </div>
+                  <div>
+                    <p className="font-medium">{task.title}</p>
+                    <p className="mt-1 text-sm text-slate-500">{task.description || "No description"}</p>
+                    <p className="mt-2 text-xs uppercase tracking-wide text-slate-500">{task.status}</p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <Button variant="ghost" onClick={() => startEdit(task)} aria-label="Edit task"><Edit3 size={16} /></Button>
+                    <Button variant="ghost" onClick={() => removeTask(task._id)} aria-label="Delete task"><Trash2 size={16} /></Button>
+                  </div>
+                </div>
+              ))}
+              {!tasks.length && <p className="text-sm text-slate-500">No tasks yet.</p>}
+            </div>
+          )}
+        </div>
+        <form onSubmit={createTask} className="h-fit space-y-3 rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold">{editingId ? "Edit task" : "Create task"}</h2>
+            {editingId && <Button type="button" variant="ghost" onClick={resetForm} aria-label="Cancel edit"><X size={18} /></Button>}
+          </div>
+          <Input value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} placeholder="Task title" />
+          <Input value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} placeholder="Description" />
+          <select className="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-900" value={form.status} onChange={(event) => setForm({ ...form, status: event.target.value })}>
+            <option value="todo">Todo</option>
+            <option value="in-progress">In progress</option>
+            <option value="done">Done</option>
+          </select>
+          ${context.multer ? `<Input type="file" accept="image/*" onChange={(event) => setForm({ ...form, image: event.target.files?.[0] || null })} />` : ""}
+          <Button className="w-full" aria-label={editingId ? "Save task" : "Add task"}>{editingId ? <Save size={18} /> : <Plus size={18} />}<span className="ml-2">{editingId ? "Save changes" : "Add task"}</span></Button>
+        </form>
+      </section>
+    </main>
+  );
+}
+`;
+}