@goplusvn/core 0.1.67 → 0.1.69

package/src/user/pages/users-client-page.tsx

@@ -1,29 +1,16 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useViewMode } from "../../hooks";
 import { toast } from "sonner";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Badge,
-  Button,
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "../../ui";
-import { Edit2, Phone, Briefcase, Building2 } from "lucide-react";
+import { ShallowPagination } from "../../ui";
 import type { EntityConfig, CrudPermissions } from "../../types";
-import { cn } from "../../utils";
 
 import { UserToolbar } from "../components/user-toolbar";
 import { UserStats } from "../components/user-stats";
 import { UsersCardView } from "../components/users-card-view";
+import { UsersTable } from "../components/users-table";
 import { UnifiedProfileDialog } from "../components/unified-profile-dialog";
 import {
   EffectivePermissionsDialog,
@@ -52,6 +39,8 @@ interface UsersClientPageProps {
   actionMeta?: Record<string, { label?: string; flow?: string; description?: string }>;
 }
 
+const DEFAULT_PAGE_SIZE = 20;
+
 export function UsersClientPage({
   initialData,
   config,
@@ -69,6 +58,36 @@ export function UsersClientPage({
   const pathname = usePathname();
 
   const searchParams = useSearchParams();
+
+  // ── Phân trang chung cho CẢ card view lẫn table view ──
+  // Server trả toàn bộ danh sách đã lọc (initialData); trang/kích thước trang
+  // sống trong URL (?page&pageSize) như trang khách hàng, và client cắt trang
+  // MỘT chỗ ở đây — hai chế độ xem không còn mỗi bên một kiểu (card không phân
+  // trang, table tự chế state cục bộ) như trước.
+  const total = initialData.length;
+  const pageSize = Number(searchParams.get("pageSize")) || DEFAULT_PAGE_SIZE;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  // Kẹp vào phạm vi thật: đổi bộ lọc làm danh sách ngắn lại thì trang đang
+  // đứng có thể vượt quá trang cuối.
+  const page = Math.min(Number(searchParams.get("page")) || 1, pageCount);
+  const pageData = useMemo(
+    () => initialData.slice((page - 1) * pageSize, page * pageSize),
+    [initialData, page, pageSize],
+  );
+
+  // Dữ liệu đã nằm sẵn ở client nên đổi trang chỉ cần ghi URL nông
+  // (history.replaceState — Next vẫn đồng bộ useSearchParams), không kéo theo
+  // một lượt RSC chỉ để trả về đúng danh sách client đang cầm.
+  const handlePageChange = useCallback(
+    (nextPage: number, nextPageSize: number) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("page", String(nextPageSize !== pageSize ? 1 : nextPage));
+      params.set("pageSize", String(nextPageSize));
+      window.history.replaceState(null, "", `${pathname}?${params.toString()}`);
+    },
+    [pathname, searchParams, pageSize],
+  );
+
   // View Mode
   const [viewModeRaw, handleViewModeChangeRaw] = useViewMode(
     "users-view-mode",
@@ -87,38 +106,36 @@ export function UsersClientPage({
 
   // Dialogs State
   const [userFormOpen, setUserFormOpen] = useState(false);
-  const [userFormMode, setUserFormMode] = useState<"create" | "edit">("create");
-  const [userFormData, setUserFormData] = useState<any>(null);
 
-  // Handlers
-  const handleSearch = useCallback(
-    (value: string) => {
-      const params = new URLSearchParams(searchParams.toString());
-      if (value) params.set("search", value);
-      else params.delete("search");
+  // Handlers — bộ lọc đổi thì về trang 1, kẻo đứng ở trang ngoài phạm vi mới.
+  // Đọc query tại THỜI ĐIỂM GỌI (window.location) thay vì phụ thuộc
+  // `searchParams`: phụ thuộc vào đó làm callback đổi identity mỗi lần URL đổi,
+  // kéo effect debounce của ô tìm kiếm trong toolbar chạy lại và phát "" đè
+  // mất ?page vừa bấm.
+  const applyFilter = useCallback(
+    (key: string, value: string) => {
+      const params = new URLSearchParams(window.location.search);
+      if (value && value !== "all") params.set(key, value);
+      else params.delete(key);
+      params.delete("page");
       router.push(`${pathname}?${params.toString()}`);
     },
-    [pathname, router, searchParams],
+    [pathname, router],
+  );
+
+  const handleSearch = useCallback(
+    (value: string) => applyFilter("search", value),
+    [applyFilter],
   );
 
   const handleRoleFilter = useCallback(
-    (value: string) => {
-      const params = new URLSearchParams(searchParams.toString());
-      if (value && value !== "all") params.set("role", value);
-      else params.delete("role");
-      router.push(`${pathname}?${params.toString()}`);
-    },
-    [pathname, router, searchParams],
+    (value: string) => applyFilter("role", value),
+    [applyFilter],
   );
 
   const handleUserTypeFilter = useCallback(
-    (value: string) => {
-      const params = new URLSearchParams(searchParams.toString());
-      if (value && value !== "all") params.set("type", value);
-      else params.delete("type");
-      router.push(`${pathname}?${params.toString()}`);
-    },
-    [pathname, router, searchParams],
+    (value: string) => applyFilter("type", value),
+    [applyFilter],
   );
 
   const handleSelectUser = (user: any) => {
@@ -127,8 +144,6 @@ export function UsersClientPage({
   };
 
   const handleCreateNew = () => {
-    setUserFormMode("create");
-    setUserFormData(null);
     setUserFormOpen(true);
   };
 
@@ -212,20 +227,36 @@ export function UsersClientPage({
         permissions={permissions}
       />
 
-      <div className="min-h-[400px]">
+      <div className="min-h-[400px] flex flex-col">
         {viewMode === "table" ? (
-          <div className="border rounded-md">
-            <BasicUserTable
-              data={initialData}
-              onEdit={(u) => handleEditUser(u)}
-            />
-          </div>
-        ) : (
-          <UsersCardView
-            data={initialData}
-            onSelect={handleSelectUser}
-            onViewPermissions={menuTree ? setPermUser : undefined}
+          <UsersTable
+            data={pageData}
+            page={page}
+            pageSize={pageSize}
+            total={total}
+            onPageChange={handlePageChange}
+            onRowClick={handleSelectUser}
+            onEdit={(u) => handleEditUser(u)}
           />
+        ) : (
+          <>
+            <UsersCardView
+              data={pageData}
+              onSelect={handleSelectUser}
+              onViewPermissions={menuTree ? setPermUser : undefined}
+            />
+            {/* Cùng thanh phân trang với chế độ bảng (bảng tự vẽ trong khung
+                DataTable) — card view vẽ dưới lưới, giống trang khách hàng. */}
+            {total > 0 && (
+              <div className="border-t bg-background px-2 sm:px-6 py-1 sm:py-2 shrink-0">
+                <ShallowPagination
+                  totalItems={total}
+                  currentPage={page}
+                  pageSize={pageSize}
+                />
+              </div>
+            )}
+          </>
         )}
       </div>
 
@@ -266,209 +297,3 @@ export function UsersClientPage({
     </div>
   );
 }
-
-// Simple Basic Table Component
-function BasicUserTable({
-  data,
-  onEdit,
-}: {
-  data: any[];
-  onEdit: (u: any) => void;
-}) {
-  const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 10;
-
-  if (!data.length) return (
-    <div className="p-8 text-center bg-card flex flex-col items-center justify-center border-t border-border">
-      <p className="text-sm font-medium text-muted-foreground">Không có dữ liệu</p>
-    </div>
-  );
-
-  const totalPages = Math.ceil(data.length / pageSize);
-  const paginatedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
-
-  const getInitials = (name: string | null) => {
-    if (!name) return "U";
-    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  };
-
-  // Corporate Palette for Avatars
-  const AVATAR_PALETTE = [
-    { bg: "bg-blue-600", text: "text-white" },
-    { bg: "bg-emerald-600", text: "text-white" },
-    { bg: "bg-orange-600", text: "text-white" },
-    { bg: "bg-violet-600", text: "text-white" },
-    { bg: "bg-cyan-600", text: "text-white" },
-    { bg: "bg-rose-600", text: "text-white" },
-  ];
-
-  const getAvatarColor = (name: string | null) => {
-    if (!name) return AVATAR_PALETTE[0];
-    const charCode = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
-    return AVATAR_PALETTE[charCode % AVATAR_PALETTE.length];
-  };
-
-  return (
-    <div className="flex flex-col border border-border rounded-lg overflow-hidden shadow-sm mt-2">
-      <div className="bg-card w-full overflow-x-auto">
-        <Table className="w-full">
-          <TableHeader>
-            <TableRow className="border-b border-border bg-muted/50 hover:bg-muted/50">
-              <TableHead className="w-[50px] font-semibold text-muted-foreground text-xs uppercase tracking-wider text-center h-11">STT</TableHead>
-              <TableHead className="w-[30%] min-w-[250px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Người dùng</TableHead>
-              <TableHead className="w-[15%] min-w-[150px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Liên hệ</TableHead>
-              <TableHead className="w-[20%] min-w-[180px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Phòng ban / Chi nhánh</TableHead>
-              <TableHead className="w-[25%] min-w-[200px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Vai trò</TableHead>
-              <TableHead className="w-[60px] text-right h-11"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {paginatedData.map((user, index) => {
-              const isActive = user.isActive || user.status === "active";
-              const avatarColors = getAvatarColor(user.name);
-              
-              return (
-                <TableRow key={user.id} className="border-b border-border/40 hover:bg-accent/10 transition-colors group">
-                  {/* STT */}
-                  <TableCell className="py-3 text-center text-muted-foreground text-xs font-medium align-middle">
-                    {(currentPage - 1) * pageSize + index + 1}
-                  </TableCell>
-
-                  {/* User Info (Avatar + Name + Type + Status) */}
-                  <TableCell className="py-3 align-top">
-                    <div className="flex items-start gap-3">
-                      <div className="relative shrink-0 mt-0.5">
-                        <Avatar className="h-10 w-10 rounded-full border shadow-sm">
-                          <AvatarImage src={user.image || user.avatar || ""} alt={user.name || ""} className="object-cover rounded-full" />
-                          <AvatarFallback className={cn("text-xs font-bold rounded-full", avatarColors.bg, avatarColors.text)}>
-                            {getInitials(user.name || user.email)}
-                          </AvatarFallback>
-                        </Avatar>
-                        {/* Note: Status indicator is now a badge next to the name */}
-                      </div>
-                      
-                      <div className="flex flex-col min-w-0">
-                        <div className="flex items-center gap-1.5 mb-1 flex-wrap">
-                          <span className="font-bold text-sm text-foreground truncate mr-1">{user.name || "Chưa đặt tên"}</span>
-                          
-                          {/* Status Badge */}
-                          {isActive ? (
-                            <Badge className="text-[9px] h-4 px-1.5 font-bold bg-emerald-100 text-emerald-700 hover:bg-emerald-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">
-                              <div className="w-1.5 h-1.5 rounded-full bg-emerald-600 mr-1.5" />
-                              Hoạt động
-                            </Badge>
-                          ) : (
-                            <Badge className="text-[9px] h-4 px-1.5 font-bold bg-slate-100 text-slate-600 hover:bg-slate-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">
-                              <div className="w-1.5 h-1.5 rounded-full bg-slate-400 mr-1.5" />
-                              Đã khóa
-                            </Badge>
-                          )}
-
-                          {/* Type Badge */}
-                          {user.userType === "customer" && <Badge className="text-[9px] h-4 px-1.5 font-bold bg-emerald-100 text-emerald-700 hover:bg-emerald-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">Khách hàng</Badge>}
-                          {user.userType === "supplier" && <Badge className="text-[9px] h-4 px-1.5 font-bold bg-orange-100 text-orange-700 hover:bg-orange-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">Nhà cung cấp</Badge>}
-                          {(!user.userType || user.userType === "employee") && <Badge className="text-[9px] h-4 px-1.5 font-bold bg-indigo-100 text-indigo-700 hover:bg-indigo-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">Nhân viên</Badge>}
-                        </div>
-                        <span className="text-xs text-muted-foreground truncate font-medium">{user.email || "—"}</span>
-                      </div>
-                    </div>
-                  </TableCell>
-
-                  {/* Contact */}
-                  <TableCell className="py-3 align-top">
-                    <div className="flex items-center gap-1.5 mt-1">
-                      <Phone className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-                      <span className="text-sm font-medium text-foreground/80">{user.profiles?.phone || user.phone || "—"}</span>
-                    </div>
-                  </TableCell>
-
-                  {/* Department & Branch */}
-                  <TableCell className="py-3 align-top">
-                    <div className="flex flex-col gap-1.5 mt-1">
-                      <div className="flex items-center gap-1.5">
-                        <Briefcase className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-                        <span className="text-sm font-semibold text-foreground/80 truncate max-w-[200px]" title={user.departmentName}>{user.departmentName || "—"}</span>
-                      </div>
-                      <div className="flex items-center gap-1.5">
-                        <Building2 className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-                        <span className="text-xs text-muted-foreground truncate max-w-[200px]" title={(user.branchNames && user.branchNames.length > 0) ? user.branchNames.join(", ") : (user.branchName || user.branch?.name || "")}>
-                          {(user.branchNames && user.branchNames.length > 0) ? user.branchNames.join(", ") : (user.branchName || user.branch?.name || "—")}
-                        </span>
-                      </div>
-                    </div>
-                  </TableCell>
-
-                  {/* Roles */}
-                  <TableCell className="py-3 align-top">
-                    <div className="flex flex-wrap gap-1 mt-0.5">
-                      {user.roleNames && user.roleNames.length > 0 ? (
-                        user.roleNames.map((r: string, i: number) => (
-                          <Badge
-                            key={i}
-                            className="text-[10px] px-2 py-0.5 font-medium bg-slate-100 text-slate-700 border-transparent hover:bg-slate-200 truncate max-w-[140px]"
-                            title={r}
-                          >
-                            {r}
-                          </Badge>
-                        ))
-                      ) : (
-                        <span className="text-xs text-muted-foreground italic">—</span>
-                      )}
-                    </div>
-                  </TableCell>
-
-                  {/* Actions */}
-                  <TableCell className="py-3 text-right align-middle">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-background shadow-sm opacity-0 group-hover:opacity-100 transition-all focus:opacity-100"
-                      onClick={(e: React.MouseEvent) => {
-                        e.stopPropagation();
-                        onEdit(user);
-                      }}
-                    >
-                      <Edit2 className="h-4 w-4" />
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="flex items-center justify-between px-4 py-3 bg-muted/20 border-t border-border">
-          <p className="text-xs text-muted-foreground font-medium">
-            Hiển thị từ <span className="font-bold text-foreground">{(currentPage - 1) * pageSize + 1}</span> đến <span className="font-bold text-foreground">{Math.min(currentPage * pageSize, data.length)}</span> / <span className="font-bold text-foreground">{data.length}</span>
-          </p>
-          <div className="flex items-center gap-1.5">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              disabled={currentPage === 1}
-              className="h-7 text-xs px-2.5 rounded-full bg-card"
-            >
-              Trang trước
-            </Button>
-            <div className="text-xs font-semibold text-foreground px-2">
-              {currentPage} / {totalPages}
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-              disabled={currentPage === totalPages}
-              className="h-7 text-xs px-2.5 rounded-full bg-card"
-            >
-              Trang sau
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/starter-app/AGENTS.md

@@ -30,13 +30,49 @@ ký tự = nút biến mất vĩnh viễn, không có thông báo. `pnpm test` b
 khởi tạo. Với DB đang chạy: viết SQL tay vào `prisma/migrations/<ts>_<tên>/` rồi
 `pnpm prisma:deploy`.
 
-**5. Mỗi lần sửa xong: `pnpm type-check` + `pnpm test`.** Không dồn kiểm tra về
-cuối. Ratchet trong `src/__tests__/architecture.test.ts` chỉ được siết chặt thêm,
-không được nới ra.
+**5. Mỗi lần sửa xong: `pnpm type-check` + `pnpm lint` + `pnpm test`.** Không dồn
+kiểm tra về cuối. Ratchet trong `src/__tests__/architecture.test.ts` chỉ được
+siết chặt thêm, không được nới ra.
 
 **6. Lỗi phải đi vào `error_logs`.** Route dùng `serverError(error, req)` trong
 catch; đừng nuốt lỗi bằng `console.log` rồi trả 200.
 
+## Luật nào đang được MÁY chặn
+
+Đừng đoán — hỏi thẳng bộ thước:
+
+```bash
+pnpm guardrails            # bảng trạng thái từng thước + chỗ chưa đạt
+pnpm guardrails --verbose  # in đủ, không cắt bớt
+```
+
+Luật sống ở `@goerp/core/guardrails` (dùng chung mọi app), chạy trong
+`pnpm test`. `src/__tests__/architecture.test.ts` chỉ khai phần riêng của app.
+Mỗi thước có một **id** — id đó xuất hiện trong thông báo lỗi của cả test lẫn
+ESLint, nên khi thấy id thì tra thẳng được:
+
+| Nhóm | Chặn điều gì |
+| --- | --- |
+| `auth/*` | proxy mặc-định-chặn; route API phải gác hoặc **được khai công khai** trong `proxy.ts`; server action không `getSession` trần |
+| `rbac/*` | resource/action dùng ở route + menu phải có trong registry; file quyền là dữ liệu thuần |
+| `layering/*` | ngoài module chỉ import qua public API; `lib` không gọi ngược lên `modules`; domain không dính `next/*` |
+| `one-door/*` | một Prisma client, một cửa kho tập tin / phạm vi chi nhánh; export qua `useExport`; API 500 phải ghi `error_logs` |
+| `structure/*` | đặt tên & vị trí file trong `app/`; `.dockerignore` không nuốt mã nguồn |
+| `design/*` | không `tailwind.config.ts`; token lấy từ core; không `flex {bp}:hidden`; bảng dùng `DataTableWrapper` |
+| `safety/*` | không `FOR UPDATE` thô; không gọi mạng trong `$transaction`; `findMany` trong page phải có `take` |
+| `debt/*` | trần `any` theo thư mục — chỉ được hạ, và **không được dư** |
+
+Thước đỏ thì **sửa code**, đừng nới thước. Thật sự cần miễn trừ thì có hai
+đường, cả hai đều để lại dấu vết nhìn thấy khi review:
+
+- thêm đường dẫn vào `allowlists[<id>]` — nợ cũ, chỉ được rút bớt. Entry kết
+  thúc bằng `/` miễn trừ CẢ THƯ MỤC: dùng khi mọi file trong đó vi phạm vì đúng
+  một lý do và số file còn tăng (ví dụ `_handlers/` của dispatcher khai resource
+  bằng biến) — liệt kê từng file ở chỗ đó chỉ đẻ ra danh sách phải sửa cho xanh;
+- khai `skip: { "<id>": "lý do" }` — tắt hẳn, phải ghi lý do.
+
+Nợ trả xong mà quên gỡ entry thì chính thước sẽ báo entry đó đã thừa.
+
 ## Bẫy đã trả giá
 
 - Đổi schema xong phải **restart `next dev`**. KHÔNG `rm -rf .next` khi dev chạy.

package/templates/starter-app/eslint.config.mjs

@@ -0,0 +1,85 @@
+import { existsSync } from "node:fs"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { includeIgnoreFile } from "@eslint/compat"
+import js from "@eslint/js"
+import nextPlugin from "@next/eslint-plugin-next"
+import goerp from "@goerp/core/eslint"
+import tseslint from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import importPlugin from "eslint-plugin-import"
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y"
+import prettierPlugin from "eslint-plugin-prettier"
+import reactHooksPlugin from "eslint-plugin-react-hooks"
+import globals from "globals"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const gitignorePath = resolve(__dirname, ".gitignore")
+
+/**
+ * Cấu hình lint của app. Mốc cần giữ: **0 lỗi**.
+ *
+ * Không phải vì con số đẹp, mà vì một baseline có sẵn 400 lỗi thì cảnh báo thứ
+ * 401 — cái thật sự là bug — không ai nhìn thấy. Đã ở 0 rồi thì mọi lỗi mới đều
+ * là tín hiệu.
+ *
+ * `goerp()` là tầng luật kiến trúc dùng chung của @goerp/core (một cửa Prisma /
+ * kho tập tin, ranh giới module, useExport…). Nó soi được trong phạm vi một
+ * file, ngay lúc gõ; phần cần nhìn nhiều file thì do `pnpm test` (guardrails)
+ * và `pnpm guardrails` lo.
+ */
+const eslintConfig = [
+  ...(existsSync(gitignorePath) ? [includeIgnoreFile(gitignorePath)] : []),
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,ts,tsx,mjs,cjs}"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+      globals: { ...globals.browser, ...globals.es2021, ...globals.node },
+    },
+    plugins: {
+      "@next/next": nextPlugin,
+      "@typescript-eslint": tseslint,
+      "jsx-a11y": jsxA11yPlugin,
+      import: importPlugin,
+      prettier: prettierPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    rules: {
+      ...(nextPlugin.configs?.recommended?.rules ?? {}),
+      ...reactHooksPlugin.configs.recommended.rules,
+      "@next/next/no-html-link-for-pages": "error",
+      "@next/next/no-sync-scripts": "error",
+      "react-hooks/error-boundaries": "off",
+      "react-hooks/set-state-in-effect": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extra-boolean-cast": "off",
+      // Nuốt lỗi có chủ đích (`catch {}`) là idiom hợp lệ — phần đáng bắt của
+      // no-empty là `if {}` / `for {}` bỏ quên. Chỗ nào nuốt thật thì viết
+      // `catch {}` kèm comment lý do, đừng để `catch (e) {}` treo biến.
+      "no-empty": ["error", { allowEmptyCatch: true }],
+      "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+      "@typescript-eslint/consistent-type-imports": "error",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          // `const { details, ...rest } = item` là cách bóc bớt field chuẩn —
+          // `details` "không dùng" chính là mục đích.
+          ignoreRestSiblings: true,
+        },
+      ],
+      "prettier/prettier": "error",
+    },
+  },
+  ...goerp(),
+]
+
+export default eslintConfig

package/templates/starter-app/package.json

@@ -15,7 +15,9 @@
     "prisma:studio": "prisma studio",
     "seed": "tsx prisma/seed.ts",
     "rbac-sync": "tsx scripts/rbac-sync.ts",
-    "goerp-features": "goerp-features"
+    "goerp-features": "goerp-features",
+    "lint": "eslint .",
+    "guardrails": "goerp-guardrails"
   },
   "dependencies": {
     "@goerp/core": "npm:@goplusvn/core@^0.1.59",
@@ -35,16 +37,31 @@
     "zod": "3.23.8"
   },
   "devDependencies": {
+    "@eslint/compat": "1.2.7",
+    "@eslint/js": "9.18.0",
+    "@ianvs/prettier-plugin-sort-imports": "4.4.1",
+    "@next/eslint-plugin-next": "16.0.3",
     "@tailwindcss/postcss": "4.0.17",
-    "@vitejs/plugin-react": "^5.0.4",
     "@testing-library/react": "^16.3.0",
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "22.9.0",
     "@types/pg": "^8.16.0",
     "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
+    "@typescript-eslint/eslint-plugin": "8.46.4",
+    "@typescript-eslint/parser": "8.46.4",
+    "@vitejs/plugin-react": "^5.0.4",
     "dotenv": "^16.4.7",
+    "eslint": "9.18.0",
+    "eslint-config-prettier": "10.1.1",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "16.5.0",
     "jsdom": "^27.4.0",
+    "prettier": "3.5.3",
+    "prettier-plugin-tailwindcss": "0.6.11",
     "prisma": "^7.0.0",
     "tailwindcss": "4.1.3",
     "tsx": "^4.7.1",

package/templates/starter-app/prettier.config.mjs

@@ -0,0 +1,54 @@
+/** @type {import('prettier').Config} */
+const config = {
+  plugins: [
+    "prettier-plugin-tailwindcss",
+    "@ianvs/prettier-plugin-sort-imports",
+  ],
+  semi: false,
+  singleQuote: false,
+  trailingComma: "es5",
+  printWidth: 80,
+  tabWidth: 2,
+  bracketSpacing: true,
+  arrowParens: "always",
+  endOfLine: "lf",
+  tailwindStylesheet: "./src/app/globals.css",
+  tailwindFunctions: ["cn", "clsx"],
+  importOrder: [
+    "<BUILTIN_MODULES>",
+    "",
+    "^(react/(.*)$)|^(react$)",
+    "^(react-dom/(.*)$)|^(react-dom$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "^(lucide-react/(.*)$)|^(lucide-react$)",
+    "^(react-icons/(.*)$)|^(react-icons$)",
+    "",
+    ".css$",
+    "",
+    "<TYPES>^(node:)",
+    "<TYPES>",
+    "<TYPES>^[.]",
+    "/types(.*)$",
+    "",
+    "/(_data|data)/(.*)$",
+    "",
+    "/(_schemas|schemas)/(.*)$",
+    "",
+    "/constants/(.*)$",
+    "/configs/(.*)$",
+    "/lib/(.*)$",
+    "",
+    "/(_hooks|hooks)/(.*)$",
+    "/(_contexts|contexts)/(.*)$",
+    "/(_providers|providers)/(.*)$",
+    "^@/components/ui/(.*)$",
+    "/(_components|components)/(.*)$",
+    "[.]",
+  ],
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderTypeScriptVersion: "5.0.0",
+  importOrderCaseSensitive: true,
+}
+
+export default config