@thinhnguyencth1204/nextcli 0.2.1 → 0.4.0

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

@@ -1,26 +1,24 @@
 import { fail, ok } from "@/lib/api-response";
-
-const authBaseUrl =
-  process.env.BETTER_AUTH_URL ??
-  process.env.NEXT_PUBLIC_APP_URL ??
-  "http://localhost:3000";
+import { getSessionUser } from "@/lib/rbac";
 
 export async function GET(request: Request) {
-  const incomingCookie = request.headers.get("cookie") ?? "";
-
-  const sessionResponse = await fetch(`${authBaseUrl}/api/auth/get-session`, {
-    method: "GET",
-    headers: {
-      cookie: incomingCookie,
-    },
-  });
+  const user = await getSessionUser(request.headers);
 
-  if (!sessionResponse.ok) {
-    return fail("UNAUTHORIZED", "Unauthorized", {
-      status: sessionResponse.status,
-    });
+  if (!user) {
+    return fail("UNAUTHORIZED", "Unauthorized", { status: 401 });
   }
 
-  const payload = await sessionResponse.json();
-  return ok(payload);
+  return ok({
+    user: {
+      id: user.id,
+      username: user.username,
+      displayUsername: user.displayUsername,
+      name: user.name,
+      email: user.email,
+      requirePasswordChange: user.requirePasswordChange,
+      role: user.role
+        ? { id: user.role.id, name: user.role.name, level: user.role.level }
+        : null,
+    },
+  });
 }

package/templates/next-base/src/app/api/v1/users/[id]/route.ts

@@ -0,0 +1,104 @@
+import { updateUserSchema } from "@/features/users/validations";
+import {
+  deleteUserRecord,
+  getUserByIdForActor,
+  updateUserRecord,
+} from "@/features/users/services";
+import { fail, ok } from "@/lib/api-response";
+import {
+  canActOnUser,
+  canAssignRole,
+  getSessionUser,
+  isSuperAdmin,
+} from "@/lib/rbac";
+import prisma from "@/lib/prisma";
+
+type RouteContext = {
+  params: Promise<{ id: string }>;
+};
+
+export async function GET(request: Request, context: RouteContext) {
+  const actor = await getSessionUser(request.headers);
+  if (!actor?.role) {
+    return fail("FORBIDDEN", "Insufficient permissions.", { status: 403 });
+  }
+
+  const { id } = await context.params;
+  const user = await getUserByIdForActor(id, actor.role.level);
+
+  if (!user) {
+    return fail("NOT_FOUND", "User not found.", { status: 404 });
+  }
+
+  return ok(user);
+}
+
+export async function PATCH(request: Request, context: RouteContext) {
+  const actor = await getSessionUser(request.headers);
+  if (!actor?.role) {
+    return fail("FORBIDDEN", "Insufficient permissions.", { status: 403 });
+  }
+
+  const { id } = await context.params;
+  const target = await prisma.user.findUnique({
+    where: { id },
+    include: { role: true },
+  });
+
+  if (!target || !canActOnUser(actor, target)) {
+    return fail("FORBIDDEN", "Cannot modify this user.", { status: 403 });
+  }
+
+  const payload = await request.json().catch(() => null);
+  const parsed = updateUserSchema.safeParse(payload);
+
+  if (!parsed.success) {
+    return fail("VALIDATION_ERROR", "Invalid user payload.", {
+      status: 400,
+      details: parsed.error.flatten(),
+    });
+  }
+
+  if (parsed.data.roleId) {
+    const nextRole = await prisma.role.findUnique({
+      where: { id: parsed.data.roleId },
+    });
+
+    if (!nextRole || !canAssignRole(actor, nextRole)) {
+      return fail("FORBIDDEN", "Cannot assign the requested role.", {
+        status: 403,
+      });
+    }
+  }
+
+  const updated = await updateUserRecord(id, parsed.data);
+  if (!updated) {
+    return fail("NOT_FOUND", "User not found.", { status: 404 });
+  }
+
+  return ok(updated);
+}
+
+export async function DELETE(request: Request, context: RouteContext) {
+  const actor = await getSessionUser(request.headers);
+  if (!actor?.role) {
+    return fail("FORBIDDEN", "Insufficient permissions.", { status: 403 });
+  }
+
+  const { id } = await context.params;
+  const target = await prisma.user.findUnique({
+    where: { id },
+    include: { role: true },
+  });
+
+  if (!target) {
+    return fail("NOT_FOUND", "User not found.", { status: 404 });
+  }
+
+  if (isSuperAdmin(target) || !canActOnUser(actor, target)) {
+    return fail("FORBIDDEN", "Cannot delete this user.", { status: 403 });
+  }
+
+  await deleteUserRecord(id);
+  return ok({ deleted: true });
+}

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

@@ -0,0 +1,58 @@
+import { createUserSchema } from "@/features/users/validations";
+import {
+  createUserRecord,
+  listUsersForActor,
+} from "@/features/users/services";
+import { fail, ok } from "@/lib/api-response";
+import { canAssignRole, getSessionUser } from "@/lib/rbac";
+import prisma from "@/lib/prisma";
+
+export async function GET(request: Request) {
+  const actor = await getSessionUser(request.headers);
+  if (!actor?.role) {
+    return fail("FORBIDDEN", "Insufficient permissions.", { status: 403 });
+  }
+
+  const users = await listUsersForActor(actor.role.level);
+  return ok({ items: users });
+}
+
+export async function POST(request: Request) {
+  const actor = await getSessionUser(request.headers);
+  if (!actor?.role) {
+    return fail("FORBIDDEN", "Insufficient permissions.", { status: 403 });
+  }
+
+  const payload = await request.json().catch(() => null);
+  const parsed = createUserSchema.safeParse(payload);
+
+  if (!parsed.success) {
+    return fail("VALIDATION_ERROR", "Invalid user payload.", {
+      status: 400,
+      details: parsed.error.flatten(),
+    });
+  }
+
+  const targetRole = await prisma.role.findUnique({
+    where: { id: parsed.data.roleId },
+  });
+
+  if (!targetRole || !canAssignRole(actor, targetRole)) {
+    return fail("FORBIDDEN", "Cannot assign the requested role.", { status: 403 });
+  }
+
+  const existing = await prisma.user.findUnique({
+    where: { username: parsed.data.username },
+  });
+
+  if (existing) {
+    return fail("CONFLICT", "Username already exists.", { status: 409 });
+  }
+
+  try {
+    const created = await createUserRecord(parsed.data);
+    return ok(created, { status: 201 });
+  } catch {
+    return fail("INTERNAL_ERROR", "Failed to create user.", { status: 500 });
+  }
+}

package/templates/next-base/src/app/globals.css

@@ -0,0 +1,111 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* nextcli:theme:start — edit brand colors below */
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* nextcli:theme-dark:start */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+/* nextcli:theme-dark:end */
+/* nextcli:theme:end */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}

package/templates/next-base/src/app/layout.tsx

@@ -1,27 +1,41 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Be_Vietnam_Pro } from "next/font/google";
+import { getLocale, getMessages } from "next-intl/server";
+import { NextIntlClientProvider } from "next-intl";
 import { Toaster } from "sonner";
 import type { ReactNode } from "react";
 import { QueryProvider } from "@/components/providers/query-provider";
-import "@/app/styles.css";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { branding } from "@/config/branding";
+import "@/app/globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const beVietnamPro = Be_Vietnam_Pro({
+  subsets: ["latin", "vietnamese"],
+  weight: ["400", "500", "600", "700"],
+});
 
 export const metadata: Metadata = {
-  title: "__PROJECT_NAME__",
-  description: "Outsource-ready Next.js scaffolded by NexTCLI",
+  title: branding.projectName,
+  description: branding.description,
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
+  const locale = await getLocale();
+  const messages = await getMessages();
+
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <QueryProvider>{children}</QueryProvider>
-        <Toaster richColors position="top-right" />
+    <html lang={locale} suppressHydrationWarning>
+      <body className={beVietnamPro.className}>
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+            <QueryProvider>{children}</QueryProvider>
+            <Toaster richColors position="top-right" />
+          </ThemeProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );

package/templates/next-base/src/app/page.tsx

@@ -1,21 +1,5 @@
-import Link from "next/link";
+import { redirect } from "next/navigation";
 
 export default function HomePage() {
-  return (
-    <main style={{ padding: 24 }}>
-      <h1>NexTCLI Base Template</h1>
-      <p>Ship outsource projects faster with standardized architecture.</p>
-      <ul style={{ display: "grid", gap: 8 }}>
-        <li>
-          <Link href="/example">Go to example dashboard page</Link>
-        </li>
-        <li>
-          <Link href="/sign-in">Go to sign-in page</Link>
-        </li>
-        <li>
-          <Link href="/account">Go to account page</Link>
-        </li>
-      </ul>
-    </main>
-  );
+  redirect("/dashboard");
 }

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

@@ -0,0 +1,27 @@
+import Image from "next/image";
+import { branding } from "@/config/branding";
+import { cn } from "@/utils/cn";
+
+type LogoProps = {
+  className?: string;
+  size?: number;
+  showLabel?: boolean;
+};
+
+export function Logo({ className, size = 28, showLabel = false }: LogoProps) {
+  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"
+        priority
+      />
+      {showLabel ? (
+        <span className="font-semibold">{branding.projectName}</span>
+      ) : null}
+    </span>
+  );
+}

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

@@ -0,0 +1,44 @@
+"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 { NavSidebar } from "@/components/layout/private/nav-sidebar";
+import { cn } from "@/utils/cn";
+
+export function AppSidebar() {
+  const { state, isMobile } = useSidebar();
+  const isCollapsed = state === "collapsed";
+
+  return (
+    <Sidebar collapsible="offcanvas">
+      {!isMobile && (
+        <div className="absolute -right-4 top-20 z-10">
+          <SidebarTrigger
+            className={cn(
+              "h-8 w-4 rounded-l-none border border-border bg-background p-0 hover:bg-accent",
+            )}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="h-4 w-4" />
+            ) : (
+              <ChevronLeft className="h-4 w-4" />
+            )}
+          </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

@@ -0,0 +1,54 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/branding/logo";
+import { AppSidebar } from "@/components/layout/private/app-sidebar";
+import { NavUser } from "@/components/layout/private/nav-user";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { theme, setTheme } = useTheme();
+  const isMobile = useIsMobile();
+  const t = useTranslations("common.header");
+
+  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>
+
+          <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>
+        </header>
+
+        <div className="flex flex-1 overflow-hidden">
+          <AppSidebar />
+          <ScrollArea className="flex-1">
+            <main className="p-4 md:p-6">{children}</main>
+          </ScrollArea>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}

package/templates/next-base/src/components/layout/private/locale-switcher.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { locales, type AppLocale } from "@/i18n/config";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export function LocaleSwitcher() {
+  const locale = useLocale() as AppLocale;
+  const router = useRouter();
+  const t = useTranslations("common.locale");
+
+  if (locales.length <= 1) {
+    return null;
+  }
+
+  const setLocale = (nextLocale: string) => {
+    document.cookie = `NEXT_LOCALE=${nextLocale}; path=/; max-age=31536000`;
+    router.refresh();
+  };
+
+  return (
+    <div className="space-y-2">
+      <p className="text-xs font-medium text-muted-foreground">{t("label")}</p>
+      <Select value={locale} onValueChange={setLocale}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {locales.map((item) => (
+            <SelectItem key={item} value={item}>
+              {t(item)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { LayoutDashboard, Table2, User, type LucideIcon } from "lucide-react";
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { sidebarModules } from "@/data/sidebar-modules";
+
+const icons: Record<string, LucideIcon> = {
+  "layout-dashboard": LayoutDashboard,
+  table: Table2,
+  user: User,
+};
+
+export function NavSidebar() {
+  const pathname = usePathname();
+  const t = useTranslations("common.sidebar");
+
+  return (
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>{t("groupGeneral")}</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {sidebarModules.map((module) => {
+              const Icon = icons[module.icon];
+              const isActive =
+                pathname === module.url ||
+                pathname.startsWith(`${module.url}/`);
+              return (
+                <SidebarMenuItem key={module.id}>
+                  <SidebarMenuButton asChild isActive={isActive}>
+                    <Link href={module.url}>
+                      <Icon className="h-4 w-4" />
+                      <span>{t(module.id)}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  );
+}