@thinhnguyencth1204/nextcli 0.8.0 → 1.0.0

package/templates/features/dashboard/src/components/layout/private/dashboard-layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Moon, Sun } from "lucide-react";
+import { Menu, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useTranslations } from "next-intl";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
@@ -19,33 +19,42 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider>
       <div className="flex h-screen w-full flex-col">
-        <header className="flex h-14 items-center justify-between border-b bg-card px-4">
-          <div className="flex items-center gap-2">
-            {isMobile && <SidebarTrigger />}
-            <Logo showLabel />
-          </div>
+        <header className="relative z-50 flex h-[3.75rem] shrink-0 items-center border-b border-border bg-card">
+          <div className="flex w-full items-center justify-between px-4 md:px-6">
+            <div className="flex items-center gap-2">
+              {isMobile ? (
+                <SidebarTrigger variant="outline" size="icon">
+                  <Menu className="h-5 w-5" />
+                </SidebarTrigger>
+              ) : null}
+              <Logo variant="header" />
+            </div>
 
-          <div className="flex items-center gap-2">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              title={t("toggleTheme")}
-            >
-              {theme === "dark" ? (
-                <Sun className="h-5 w-5" />
-              ) : (
-                <Moon className="h-5 w-5" />
-              )}
-            </Button>
-            <NavUser />
+            <div className="flex items-center gap-2">
+              {!isMobile ? (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  title={t("toggleTheme")}
+                  className="rounded-full"
+                >
+                  {theme === "dark" ? (
+                    <Sun className="h-5 w-5" />
+                  ) : (
+                    <Moon className="h-5 w-5" />
+                  )}
+                </Button>
+              ) : null}
+              <NavUser />
+            </div>
           </div>
         </header>
 
         <div className="flex flex-1 overflow-hidden">
           <AppSidebar />
-          <ScrollArea className="flex-1">
-            <main className="p-4 md:p-6">{children}</main>
+          <ScrollArea className="flex-1 bg-background">
+            <main>{children}</main>
           </ScrollArea>
         </div>
       </div>

package/templates/features/dashboard/src/components/layout/private/page-shell.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { cn } from "@/utils/cn";
+
+type PageShellProps = {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function PageShell({
+  title,
+  description,
+  actions,
+  children,
+  className,
+}: PageShellProps) {
+  return (
+    <div
+      className={cn(
+        "mx-auto w-full max-w-screen-2xl px-4 py-10 sm:px-6 lg:px-10",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 pb-6 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-black tracking-tight">{title}</h1>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 items-center gap-2">{actions}</div>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  );
+}

package/templates/features/database/prisma/schema.prisma

@@ -70,5 +70,6 @@ model Verification {
   createdAt  DateTime? @default(now())
   updatedAt  DateTime? @updatedAt
 }
+
 // Optional Chatbox models are appended by NexTCLI only when adding the chat feature.
 // Review generated schema changes before running migrations on production databases.

package/templates/features/example/messages/vi/example.json

@@ -1,6 +1,16 @@
 {
   "page": {
-    "title": "Ví dụ"
+    "title": "Ví dụ",
+    "description": "Trang mẫu với bảng dữ liệu, thẻ nội dung và nút thêm bản ghi.",
+    "add": "Thêm mới",
+    "createTitle": "Thêm bản ghi ví dụ",
+    "nameLabel": "Tên",
+    "descriptionLabel": "Mô tả",
+    "createSubmit": "Lưu",
+    "creating": "Đang lưu...",
+    "createSuccess": "Đã thêm bản ghi ví dụ.",
+    "createFailed": "Không thể thêm bản ghi ví dụ.",
+    "invalidInput": "Vui lòng nhập tên hợp lệ."
   },
   "table": {
     "name": "Tên",

package/templates/features/example/src/app/(dashboard)/example/page.tsx

@@ -1,13 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import type { FormEvent } from "react";
 import { useTranslations } from "next-intl";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useCreateExample } from "@/example/api/use-mutations";
+import { createExampleSchema } from "@/example/validations";
 import { ExampleTable } from "@/example/components/example-table";
+import { PageShell } from "@/components/layout/private/page-shell";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 export default function ExamplePage() {
   const t = useTranslations("example.page");
+  const createExample = useCreateExample();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const parsed = createExampleSchema.safeParse({ name, description });
+    if (!parsed.success) {
+      toast.error(t("invalidInput"));
+      return;
+    }
+
+    try {
+      await createExample.mutateAsync(parsed.data);
+      toast.success(t("createSuccess"));
+      setName("");
+      setDescription("");
+      setOpen(false);
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : t("createFailed");
+      toast.error(message);
+    }
+  };
 
   return (
-    <main className="space-y-4">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
+    <PageShell
+      title={t("title")}
+      description={t("description")}
+      actions={
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              {t("add")}
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("createTitle")}</DialogTitle>
+            </DialogHeader>
+            <form onSubmit={onSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="example-name">{t("nameLabel")}</Label>
+                <Input
+                  id="example-name"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="example-description">
+                  {t("descriptionLabel")}
+                </Label>
+                <Input
+                  id="example-description"
+                  value={description}
+                  onChange={(event) => setDescription(event.target.value)}
+                />
+              </div>
+              <DialogFooter>
+                <Button type="submit" disabled={createExample.isPending}>
+                  {createExample.isPending ? t("creating") : t("createSubmit")}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      }
+    >
       <ExampleTable />
-    </main>
+    </PageShell>
   );
 }

package/templates/features/example/src/example/components/example-table.tsx

@@ -10,6 +10,7 @@ import {
 } from "@tanstack/react-table";
 import { useExample } from "@/example/api/use-example";
 import { DataTable } from "@/components/ui/data-table/data-table";
+import { Card, CardContent } from "@/components/ui/card";
 
 type ExampleItem = {
   id: string;
@@ -44,8 +45,20 @@ export function ExampleTable() {
   });
 
   if (isLoading) {
-    return <p>{t("loading")}</p>;
+    return (
+      <Card>
+        <CardContent className="py-8 text-sm text-muted-foreground">
+          {t("loading")}
+        </CardContent>
+      </Card>
+    );
   }
 
-  return <DataTable table={table} />;
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <DataTable table={table} />
+      </CardContent>
+    </Card>
+  );
 }

package/templates/next-base/.env

@@ -1,2 +1,18 @@
 # --- App ---
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
+
+# --- module: database ---
+DATABASE_URL="postgresql://postgres.your-project-ref:your-supabase-db-password@aws-0-us-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
+DIRECT_URL="postgresql://postgres.your-project-ref:your-supabase-db-password@aws-0-us-east-1.pooler.supabase.com:5432/postgres"
+
+# --- module: supabase ---
+NEXT_PUBLIC_SUPABASE_URL=""
+NEXT_PUBLIC_SUPABASE_ANON_KEY=""
+NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET="public"
+
+# --- module: auth ---
+BETTER_AUTH_SECRET=""
+BETTER_AUTH_URL="http://localhost:3000"
+
+# --- module: i18n ---
+NEXT_PUBLIC_DEFAULT_LOCALE="vi"

package/templates/next-base/.env.development

@@ -1,2 +1,18 @@
 # --- App ---
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
+
+# --- module: database ---
+DATABASE_URL="postgresql://postgres.your-project-ref:your-supabase-db-password@aws-0-us-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
+DIRECT_URL="postgresql://postgres.your-project-ref:your-supabase-db-password@aws-0-us-east-1.pooler.supabase.com:5432/postgres"
+
+# --- module: supabase ---
+NEXT_PUBLIC_SUPABASE_URL=""
+NEXT_PUBLIC_SUPABASE_ANON_KEY=""
+NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET="public"
+
+# --- module: auth ---
+BETTER_AUTH_SECRET=""
+BETTER_AUTH_URL="http://localhost:3000"
+
+# --- module: i18n ---
+NEXT_PUBLIC_DEFAULT_LOCALE="vi"

package/templates/next-base/.env.example

@@ -1,2 +1,18 @@
 # --- App ---
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
+
+# --- module: database ---
+DATABASE_URL="postgresql://postgres.your-project-ref:your-supabase-db-password@aws-0-us-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
+DIRECT_URL="postgresql://postgres.your-project-ref:your-supabase-db-password@aws-0-us-east-1.pooler.supabase.com:5432/postgres"
+
+# --- module: supabase ---
+NEXT_PUBLIC_SUPABASE_URL=""
+NEXT_PUBLIC_SUPABASE_ANON_KEY=""
+NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET="public"
+
+# --- module: auth ---
+BETTER_AUTH_SECRET=""
+BETTER_AUTH_URL="http://localhost:3000"
+
+# --- module: i18n ---
+NEXT_PUBLIC_DEFAULT_LOCALE="vi"

package/templates/next-base/SETUP.md

@@ -2,16 +2,18 @@
 
 Quick reference for env vars and branding after `nextcli create`.
 
-## Minimal base project
+## Default stack
 
-The default template ships a lightweight Next.js shell with branding, theme, and UI primitives only. No database, auth, or dashboard code is included until you select modules at create time or run `nextcli add module`.
+The base template ships with database (Prisma + Postgres), Supabase client + Storage, Better Auth + RBAC, API client (Axios + React Query), i18n (next-intl), dashboard shell, and an example CRUD demo. Optional modules (`chat`, `supabase-realtime`, `seo`, `email`) can be added at create time or via `nextcli add module`.
 
 ## First run
 
-1. `bun run dev` (or your package manager equivalent)
-2. Open `http://localhost:3000`
+1. Fill env keys in `.env` (see tables below).
+2. `bun run db:migrate` (or your package manager equivalent)
+3. `bun run dev`
+4. Open `http://localhost:3000` (redirects to `/dashboard`)
 
-When you add the `database` module, run `bun run db:migrate` before relying on Prisma models.
+Bootstrap seeds `admin` / `admin1234` on first dev start.
 
 ## Branding (edit in repo, not env)
 
@@ -29,21 +31,71 @@ Set in `.env` / `.env.development`.
 | --------------------- | ---------------------- | ------------------------------------- |
 | `NEXT_PUBLIC_APP_URL` | Client-visible app URL | Your public site URL (e.g. localhost) |
 
-## Optional module environment
-
-Reference for all optional modules. Matching keys are merged into `.env` when selected at `nextcli create` or via `nextcli add module`.
+## Base module environment
 
 <!-- nextcli:enabled-modules:start -->
 
-**Enabled modules:** none
+**Enabled modules:** `database`, `supabase`, `auth`, `api`, `i18n`, `dashboard`, `example`
 
 <!-- nextcli:enabled-modules:end -->
 
 <!-- nextcli:module-env:start -->
 
+### Module: Database (Prisma + Postgres) (`database`)
+
+| Variable       | Where to get                                                                           |
+| -------------- | -------------------------------------------------------------------------------------- |
+| `DATABASE_URL` | Supabase Dashboard → Connect → ORMs → Prisma → pooled URL (`:6543`, `?pgbouncer=true`) |
+| `DIRECT_URL`   | Supabase Dashboard → Connect → direct/session URL (`:5432`)                            |
+
+Run `bun run db:migrate` after setting `DATABASE_URL`.
+
+### Module: Supabase client + Storage (`supabase`)
+
+| Variable                              | Where to get                                              |
+| ------------------------------------- | --------------------------------------------------------- |
+| `NEXT_PUBLIC_SUPABASE_URL`            | Supabase Dashboard → Project Settings → API → Project URL |
+| `NEXT_PUBLIC_SUPABASE_ANON_KEY`       | Same page → `anon` `public` key                           |
+| `NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET` | Storage bucket name (default scaffold: `public`)          |
+
+Create the bucket and RLS policies in Supabase Dashboard before uploads.
+
+### Module: Auth (Better Auth + RBAC) (`auth`)
+
+| Variable             | Where to get                                   |
+| -------------------- | ---------------------------------------------- |
+| `BETTER_AUTH_SECRET` | Auto-generated on create; rotate in production |
+| `BETTER_AUTH_URL`    | Your app URL (e.g. `http://localhost:3000`)    |
+
+Requires `database` (included in base). Bootstrap seeds `admin` / `admin1234` on first dev start.
+
+### Module: API client (Axios + React Query) (`api`)
+
+No extra env keys. Use `publicApi` / `protectedApi` from `src/lib/api/axios.ts` and `ok` / `fail` from `src/lib/api/response.ts`.
+
+### Module: Internationalization (next-intl) (`i18n`)
+
+| Variable                     | Where to get                         |
+| ---------------------------- | ------------------------------------ |
+| `NEXT_PUBLIC_DEFAULT_LOCALE` | Default locale code (scaffold: `vi`) |
+
+Add more locales with `nextcli add language`.
+
+### Module: Dashboard shell (`dashboard`)
+
+Requires `auth`, `api`, and `i18n` (included in base). Protected routes redirect unauthenticated users to `/sign-in`.
+
+### Module: Example CRUD demo (`example`)
+
+Requires `dashboard` and `database` (included in base). Includes demo `Example` model in `prisma/schema.prisma` — run `db:migrate` after create.
+
 <!-- nextcli:module-env:end -->
 
-## After adding modules
+## Optional module environment
+
+Additional keys are merged when optional modules are selected at `nextcli create` or via `nextcli add module`.
+
+## After adding optional modules
 
 1. Fill new env keys in `.env` and `.env.example`.
 2. Run `bun run db:migrate` when a module adds Prisma models.