@thinhnguyencth1204/nextcli 0.7.0 → 0.9.0

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

@@ -0,0 +1,34 @@
+import { createExampleSchema } from "@/example/validations";
+import { listExamples } from "@/example/services";
+import { fail, ok } from "@/lib/api/response";
+import prisma from "@/lib/db/prisma";
+
+export async function GET() {
+  try {
+    const examples = await listExamples();
+    return ok({ items: examples });
+  } catch {
+    return fail("INTERNAL_ERROR", "Failed to fetch examples.", { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  const payload = await request.json().catch(() => null);
+  const parsed = createExampleSchema.safeParse(payload);
+
+  if (!parsed.success) {
+    return fail("VALIDATION_ERROR", "Invalid example payload.", {
+      status: 400,
+      details: parsed.error.flatten(),
+    });
+  }
+
+  try {
+    const created = await prisma.example.create({
+      data: parsed.data,
+    });
+    return ok(created, { status: 201 });
+  } catch {
+    return fail("INTERNAL_ERROR", "Failed to create example.", { status: 500 });
+  }
+}

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/auth/rbac";
+import prisma from "@/lib/db/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/auth/rbac";
+import prisma from "@/lib/db/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/blog-demo/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { BlogRichTextDemo } from "@/components/rich-text/examples/blog-rich-text-demo";
+
+export const dynamic = "force-dynamic";
+
+export default function BlogDemoPage() {
+  return <BlogRichTextDemo />;
+}

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

@@ -109,3 +109,60 @@
     @apply bg-background text-foreground antialiased;
   }
 }
+
+/* Lexical rich text */
+.lexical-content-editable {
+  position: relative;
+}
+
+.lexical-paragraph {
+  @apply mb-2;
+}
+
+.lexical-text-bold {
+  @apply font-bold;
+}
+
+.lexical-text-italic {
+  @apply italic;
+}
+
+.lexical-text-underline {
+  @apply underline;
+}
+
+.lexical-text-strikethrough {
+  @apply line-through;
+}
+
+.lexical-text-underline-strikethrough {
+  @apply underline line-through;
+}
+
+.lexical-text-code {
+  @apply bg-muted rounded px-1 font-mono text-[0.9em];
+}
+
+.lexical-heading-h1 {
+  @apply mb-3 text-3xl font-bold;
+}
+
+.lexical-heading-h2 {
+  @apply mb-2 text-2xl font-semibold;
+}
+
+.lexical-heading-h3 {
+  @apply mb-2 text-xl font-semibold;
+}
+
+.lexical-quote {
+  @apply border-muted-foreground mb-2 border-l-4 pl-4 italic;
+}
+
+.lexical-image-element {
+  @apply my-2 block;
+}
+
+.lexical-renderer .lexical-content-editable {
+  min-height: auto;
+}

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

@@ -1,7 +1,10 @@
 import type { Metadata } from "next";
 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 { ThemeProvider } from "@/components/providers/theme-provider";
 import { branding } from "@/config/branding";
 import "@/app/globals.css";
@@ -16,18 +19,23 @@ export const metadata: Metadata = {
   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="vi" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <body className={beVietnamPro.className}>
-        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-          {children}
-          <Toaster richColors position="top-right" />
-        </ThemeProvider>
+        <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,28 +1,5 @@
-import Link from "next/link";
-import { branding } from "@/config/branding";
-import { Button } from "@/components/ui/button";
+import { redirect } from "next/navigation";
 
 export default function HomePage() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-center gap-6 p-8 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">
-        {branding.projectName}
-      </h1>
-      <p className="text-muted-foreground max-w-md text-sm">
-        {branding.description}
-      </p>
-      <p className="text-muted-foreground max-w-lg text-sm">
-        This project was scaffolded with NexTCLI. Add optional modules with{" "}
-        <code className="bg-muted rounded px-1.5 py-0.5 text-xs">
-          nextcli add module
-        </code>{" "}
-        to enable database, auth, dashboard, and more.
-      </p>
-      <Button asChild variant="outline">
-        <Link href="https://github.com/thinhnguyencth1204/NexTCLI">
-          NexTCLI docs
-        </Link>
-      </Button>
-    </main>
-  );
+  redirect("/dashboard");
 }

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>
+  );
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import { LogOut, Monitor, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+import { authClient } from "@/lib/auth/client";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { LocaleSwitcher } from "@/components/layout/private/locale-switcher";
+
+export function NavUser() {
+  const { theme, setTheme } = useTheme();
+  const t = useTranslations("common");
+
+  const handleLogout = async () => {
+    await authClient.signOut();
+    window.location.href = "/sign-in";
+  };
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" className="h-fit w-fit px-2 py-1">
+          <div className="grid text-right text-sm">
+            <span className="font-semibold">{t("userMenu.anonymousName")}</span>
+            <span className="text-xs text-muted-foreground">
+              {t("userMenu.anonymousEmail")}
+            </span>
+          </div>
+          <Avatar className="h-9 w-9">
+            <AvatarFallback>U</AvatarFallback>
+          </Avatar>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-full max-w-sm p-0">
+        <SheetHeader className="border-b p-4">
+          <SheetTitle>{t("userMenu.title")}</SheetTitle>
+        </SheetHeader>
+
+        <ScrollArea className="h-[calc(100vh-10rem)] p-4">
+          <div className="space-y-4">
+            <div className="rounded-md border bg-card p-4">
+              <p className="mb-3 text-sm font-medium">
+                {t("userMenu.appearance")}
+              </p>
+              <div className="grid grid-cols-3 gap-2">
+                <Button
+                  variant={theme === "light" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme("light")}
+                >
+                  <Sun className="h-4 w-4" />
+                  {t("header.themeLight")}
+                </Button>
+                <Button
+                  variant={theme === "dark" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme("dark")}
+                >
+                  <Moon className="h-4 w-4" />
+                  {t("header.themeDark")}
+                </Button>
+                <Button
+                  variant={theme === "system" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme("system")}
+                >
+                  <Monitor className="h-4 w-4" />
+                  {t("header.themeSystem")}
+                </Button>
+              </div>
+            </div>
+            <LocaleSwitcher />
+          </div>
+        </ScrollArea>
+
+        <SheetFooter className="border-t p-0">
+          <Button
+            variant="ghost"
+            className="w-full justify-center rounded-none py-6 text-destructive hover:bg-destructive/10"
+            onClick={handleLogout}
+          >
+            <LogOut className="h-4 w-4" />
+            {t("userMenu.logout")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/templates/next-base/src/components/providers/query-provider.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}