@thinhnguyencth1204/nextcli 0.9.0 → 1.0.0

package/templates/next-base/messages/vi/auth.json

@@ -11,7 +11,6 @@
     "submit": "Đăng nhập",
     "submitting": "Đang đăng nhập...",
     "invalidInput": "Vui lòng nhập tên đăng nhập và mật khẩu hợp lệ.",
-    "missingAccessToken": "Không tìm thấy access token.",
     "success": "Đăng nhập thành công.",
     "failed": "Đăng nhập thất bại."
   },
@@ -30,6 +29,8 @@
   },
   "account": {
     "title": "Tài khoản",
+    "description": "Xem thông tin phiên đăng nhập hiện tại.",
+    "panelTitle": "Thông tin tài khoản",
     "loading": "Đang tải thông tin tài khoản...",
     "noSession": "Chưa có phiên đăng nhập hoạt động.",
     "userId": "Mã người dùng",

package/templates/next-base/messages/vi/common.json

@@ -12,6 +12,25 @@
     "themeSystem": "Theo hệ thống",
     "toggleTheme": "Chuyển giao diện"
   },
+  "dashboardPage": {
+    "title": "Bảng điều khiển",
+    "description": "Tổng quan nhanh về hoạt động hệ thống.",
+    "placeholder": "Thêm widget và số liệu của bạn tại đây.",
+    "stats": {
+      "users": {
+        "title": "Người dùng",
+        "value": "—"
+      },
+      "records": {
+        "title": "Bản ghi",
+        "value": "—"
+      },
+      "activity": {
+        "title": "Hoạt động hôm nay",
+        "value": "—"
+      }
+    }
+  },
   "userMenu": {
     "title": "Tài khoản",
     "anonymousName": "Người dùng",

package/templates/next-base/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/next-base/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/next-base/prisma/schema.prisma

@@ -70,6 +70,7 @@ 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/next-base/src/app/(auth)/change-password/page.tsx

@@ -5,10 +5,11 @@ export default function ChangePasswordPage() {
   const t = useTranslations("auth.changePasswordPage");
 
   return (
-    <main className="space-y-3">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
-      <p className="text-sm text-muted-foreground">{t("description")}</p>
+    <div className="space-y-6">
+      <div className="text-center sm:text-left">
+        <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
+      </div>
       <ChangePasswordForm />
-    </main>
+    </div>
   );
 }

package/templates/next-base/src/app/(auth)/layout.tsx

@@ -1,9 +1,6 @@
 import type { ReactNode } from "react";
+import { AuthShell } from "@/components/layout/auth/auth-shell";
 
 export default function AuthRouteLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <div className="w-full max-w-md">{children}</div>
-    </div>
-  );
+  return <AuthShell>{children}</AuthShell>;
 }

package/templates/next-base/src/app/(auth)/sign-in/page.tsx

@@ -5,10 +5,11 @@ export default function SignInPage() {
   const t = useTranslations("auth.signInPage");
 
   return (
-    <main className="space-y-3">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
-      <p className="text-sm text-muted-foreground">{t("description")}</p>
+    <div className="space-y-6">
+      <div className="text-center sm:text-left">
+        <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
+      </div>
       <SignInForm />
-    </main>
+    </div>
   );
 }

package/templates/next-base/src/app/(dashboard)/account/page.tsx

@@ -1,18 +1,20 @@
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { AccountPanel } from "@/features/auth/components/account-panel";
+import { PageShell } from "@/components/layout/private/page-shell";
 import { Button } from "@/components/ui/button";
 
 export default function AccountPage() {
   const t = useTranslations("auth.account");
 
   return (
-    <main className="space-y-4">
-      <h1 className="text-2xl font-semibold">{t("title")}</h1>
-      <AccountPanel />
-      <Button asChild variant="outline">
-        <Link href="/sign-in">{t("goToSignIn")}</Link>
-      </Button>
-    </main>
+    <PageShell title={t("title")} description={t("description")}>
+      <div className="space-y-4">
+        <AccountPanel />
+        <Button asChild variant="outline">
+          <Link href="/sign-in">{t("goToSignIn")}</Link>
+        </Button>
+      </div>
+    </PageShell>
   );
 }

package/templates/next-base/src/app/(dashboard)/dashboard/page.tsx

@@ -1,17 +1,31 @@
 import { useTranslations } from "next-intl";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { PageShell } from "@/components/layout/private/page-shell";
 
 export default function DashboardPage() {
-  const t = useTranslations("common.sidebar");
+  const t = useTranslations("common.dashboardPage");
+
+  const stats = [
+    { title: t("stats.users.title"), value: t("stats.users.value") },
+    { title: t("stats.records.title"), value: t("stats.records.value") },
+    { title: t("stats.activity.title"), value: t("stats.activity.value") },
+  ];
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t("dashboard")}</CardTitle>
-      </CardHeader>
-      <CardContent className="text-sm text-muted-foreground">
-        Starter dashboard page. Add your own widgets and metrics here.
-      </CardContent>
-    </Card>
+    <PageShell title={t("title")} description={t("description")}>
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {stats.map((stat) => (
+          <div
+            key={stat.title}
+            className="overflow-hidden rounded-lg border bg-card p-6 shadow-sm"
+          >
+            <h3 className="text-base font-semibold leading-6">{stat.title}</h3>
+            <p className="mt-2 text-3xl font-bold tracking-tight text-primary">
+              {stat.value}
+            </p>
+          </div>
+        ))}
+      </div>
+      <p className="mt-8 text-sm text-muted-foreground">{t("placeholder")}</p>
+    </PageShell>
   );
 }

package/templates/next-base/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/next-base/src/app/api/v1/auth/login/route.ts

@@ -1,4 +1,3 @@
-import { getRefreshCookieName, refreshCookieOptions } from "@/lib/auth/cookies";
 import { fail, ok } from "@/lib/api/response";
 import prisma from "@/lib/db/prisma";
 
@@ -19,16 +18,19 @@ export async function POST(request: Request) {
     });
   }
 
-  const signInResponse = await fetch(`${authBaseUrl}/api/auth/sign-in/username`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
+  const signInResponse = await fetch(
+    `${authBaseUrl}/api/auth/sign-in/username`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username: payload.username,
+        password: payload.password,
+      }),
     },
-    body: JSON.stringify({
-      username: payload.username,
-      password: payload.password,
-    }),
-  });
+  );
 
   if (!signInResponse.ok) {
     return fail("UNAUTHORIZED", "Invalid credentials.", {
@@ -36,20 +38,12 @@ export async function POST(request: Request) {
     });
   }
 
-  const cookieHeader = signInResponse.headers.get("set-cookie");
-
-  const tokenResponse = await fetch(`${authBaseUrl}/api/auth/token`, {
-    method: "GET",
-    headers: cookieHeader ? { cookie: cookieHeader } : undefined,
-  });
-
-  if (!tokenResponse.ok) {
-    return fail("UPSTREAM_ERROR", "Unable to issue access token.", {
-      status: tokenResponse.status,
-    });
-  }
-
-  const tokenPayload = await tokenResponse.json();
+  const upstreamSetCookies =
+    typeof signInResponse.headers.getSetCookie === "function"
+      ? signInResponse.headers.getSetCookie()
+      : [];
+  const cookieHeader =
+    upstreamSetCookies[0] ?? signInResponse.headers.get("set-cookie");
 
   const dbUser = await prisma.user.findUnique({
     where: { username: payload.username },
@@ -57,14 +51,15 @@ export async function POST(request: Request) {
   });
 
   const response = ok({
-    accessToken: tokenPayload.token,
     requirePasswordChange: dbUser?.requirePasswordChange ?? false,
   });
 
-  if (cookieHeader) {
-    response.headers.set("set-cookie", cookieHeader);
+  if (upstreamSetCookies.length > 0) {
+    for (const setCookie of upstreamSetCookies) {
+      response.headers.append("set-cookie", setCookie);
+    }
+  } else if (cookieHeader) {
+    response.headers.append("set-cookie", cookieHeader);
   }
-  response.cookies.set(getRefreshCookieName(), crypto.randomUUID(), refreshCookieOptions());
-
   return response;
 }

package/templates/next-base/src/app/api/v1/auth/logout/route.ts

@@ -1,4 +1,3 @@
-import { getRefreshCookieName, refreshCookieOptions } from "@/lib/auth/cookies";
 import { fail, ok } from "@/lib/api/response";
 
 const authBaseUrl =
@@ -20,9 +19,5 @@ export async function POST(request: Request) {
     : fail("UPSTREAM_ERROR", "Failed to sign out.", {
         status: signOutResponse.status,
       });
-  response.cookies.set(getRefreshCookieName(), "", {
-    ...refreshCookieOptions(),
-    maxAge: 0,
-  });
   return response;
 }

package/templates/next-base/src/components/branding/logo.tsx

@@ -6,17 +6,40 @@ type LogoProps = {
   className?: string;
   size?: number;
   showLabel?: boolean;
+  variant?: "default" | "auth" | "header";
 };
 
-export function Logo({ className, size = 28, showLabel = false }: LogoProps) {
+export function Logo({
+  className,
+  size = 28,
+  showLabel = false,
+  variant = "default",
+}: LogoProps) {
+  if (variant === "auth") {
+    return (
+      <Image
+        src={branding.logoPath}
+        alt={branding.projectName}
+        width={200}
+        height={60}
+        className={cn("h-16 w-auto object-contain", className)}
+        priority
+      />
+    );
+  }
+
+  const imageSize = variant === "header" ? 120 : size;
+  const imageClassName =
+    variant === "header" ? "h-10 w-auto object-contain shrink-0" : "shrink-0";
+
   return (
     <span className={cn("inline-flex items-center gap-2", className)}>
       <Image
         src={branding.logoPath}
         alt={branding.projectName}
-        width={size}
-        height={size}
-        className="shrink-0"
+        width={imageSize}
+        height={variant === "header" ? 40 : size}
+        className={imageClassName}
         priority
       />
       {showLabel ? (

package/templates/next-base/src/components/layout/auth/auth-shell.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { Logo } from "@/components/branding/logo";
+
+type AuthShellProps = {
+  children: ReactNode;
+};
+
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center">
+          <Logo variant="auth" />
+        </div>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="rounded-lg border bg-card px-4 py-8 shadow-sm sm:px-10">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/next-base/src/components/layout/private/app-sidebar.tsx

@@ -1,14 +1,7 @@
 "use client";
 
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import Link from "next/link";
-import {
-  useSidebar,
-  Sidebar,
-  SidebarHeader,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
-import { Logo } from "@/components/branding/logo";
+import { useSidebar, Sidebar, SidebarTrigger } from "@/components/ui/sidebar";
 import { NavSidebar } from "@/components/layout/private/nav-sidebar";
 import { cn } from "@/utils/cn";
 
@@ -33,11 +26,6 @@ export function AppSidebar() {
           </SidebarTrigger>
         </div>
       )}
-      <SidebarHeader className="p-3">
-        <Link href="/dashboard">
-          <Logo showLabel />
-        </Link>
-      </SidebarHeader>
       <NavSidebar />
     </Sidebar>
   );

package/templates/next-base/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/next-base/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/next-base/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>
+  );
 }