@goplusvn/core 0.1.73 → 0.1.75

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/providers/tenant-provider.tsx

@@ -13,6 +13,16 @@ export interface TenantBranding {
   primaryColor?: string;
   /** Favicon URL — apps read `tenant.branding.favicon` in their metadata. */
   favicon?: string;
+  /**
+   * Ảnh nền nửa phải trang đăng nhập. Phải là ẢNH CHỤP THẬT của khách (nhà máy,
+   * cửa hàng, mặt bằng) — đừng dùng ảnh stock/AI: nó là bề mặt đầu tiên người
+   * dùng thấy, ảnh chung chung làm hệ thống trông như hàng mẫu.
+   *
+   * Bỏ trống thì `AuthImage` tự vẽ tấm nền màu thương hiệu (logo + tên công ty),
+   * nên app chưa có ảnh vẫn ra màn tử tế. Đường dẫn đặt trong `public/` của app,
+   * quy ước `/images/auth/cover.jpg`.
+   */
+  authImage?: string;
 }
 
 export interface TenantConfig {

package/src/ui/auth/auth-layout.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { useState } from "react";
 import type { ComponentProps } from "react";
 import type { LocaleType } from "../../types";
 
@@ -16,6 +17,11 @@ import type { StaticImageData } from "next/image";
 export type AuthDictionaryType = any;
 
 interface AuthProps extends ComponentProps<"div"> {
+  /**
+   * Ảnh nền nửa phải. Bỏ trống thì lấy `tenant.branding.authImage`; vẫn trống
+   * nữa thì `AuthImage` vẽ tấm nền màu thương hiệu. Không app nào phải ship ảnh
+   * chỉ để trang đăng nhập khỏi vỡ.
+   */
   imgSrc?: string | StaticImageData;
   imgClassName?: string;
   imageClassName?: string;
@@ -46,7 +52,9 @@ export function Auth({
       {...props}
     >
       <div className="flex flex-col relative bg-background">
-        <div className="absolute top-0 inset-x-0 flex justify-between items-center px-4 py-2.5 z-50">
+        <div className="absolute top-0 inset-x-0 flex justify-between items-center gap-2 px-4 py-2.5 z-50">
+          {/* Logo + tên công ty chỉ đứng ĐÚNG một chỗ: góc trên trái. Nửa phải
+              là hoa văn thuần, không mang chữ — nhồi logo lên đó là lặp. */}
           <Link
             href={ensureLocalizedPathname("/", locale)}
             className="flex items-center gap-2 text-foreground font-black"
@@ -71,56 +79,234 @@ export function Auth({
             )}
             <span>{branding?.companyName || "GoERP"}</span>
           </Link>
-          <LanguageDropdown dictionary={dictionary} />
+          <div className="ms-auto">
+            <LanguageDropdown dictionary={dictionary} />
+          </div>
         </div>
         <div className="flex-1 flex items-center justify-center p-6">
           <div className="max-w-md w-full space-y-6">{children}</div>
         </div>
       </div>
-      {imgSrc && (
-        <AuthImage
-          imgSrc={imgSrc}
-          className={cn("", imgClassName)}
-          imageClassName={imageClassName}
-        />
-      )}
+      <AuthImage
+        imgSrc={imgSrc ?? branding?.authImage}
+        className={cn("", imgClassName)}
+        imageClassName={imageClassName}
+      />
     </section>
   );
 }
 
+/*
+ * Hoa văn khối lập phương đẳng cự (isometric) — hình học của tấm nền đăng nhập.
+ *
+ * Cạnh `a`; mỗi khối là một lục giác đều cộng ba nan từ tâm ra ba đỉnh, xếp kiểu
+ * tổ ong thì thành một mặt phẳng toàn khối hộp. Chọn hoa văn này vì nó CÓ NGHĨA
+ * với phần mềm quản trị: kiện hàng xếp kho, mô-đun ghép lại thành hệ thống —
+ * không phải mảng loang trang trí cho có.
+ *
+ * Toạ độ tính sẵn ở mức mô-đun (không phụ thuộc render) để khỏi tính lại mỗi lần
+ * vẽ và để sai số làm rời mạch hoa văn thì thấy ngay ở đây.
+ */
+const CUBE_A = 60;
+const CUBE_DX = 51.96; // a·√3/2 — nửa bề ngang lục giác
+const CUBE_DY = 30; // a/2
+const CUBE_TILE_W = 103.92; // a·√3
+const CUBE_TILE_H = 180; // 3a — hai hàng tổ ong
+
+function cubeAt(cx: number, cy: number) {
+  const { round } = Math;
+  const r = (n: number) => round(n * 100) / 100;
+  const [t, b] = [r(cy - CUBE_A), r(cy + CUBE_A)];
+  const [l, rt] = [r(cx - CUBE_DX), r(cx + CUBE_DX)];
+  const [up, dn] = [r(cy - CUBE_DY), r(cy + CUBE_DY)];
+  const x = r(cx);
+  return (
+    // Viền lục giác + ba nan tâm → ảo giác khối hộp.
+    `M${x} ${t}L${rt} ${up}L${rt} ${dn}L${x} ${b}L${l} ${dn}L${l} ${up}Z` +
+    `M${x} ${t}L${x} ${r(cy)}M${x} ${r(cy)}L${l} ${dn}M${x} ${r(cy)}L${rt} ${dn}`
+  );
+}
+
+function cubeTopFaceAt(cx: number, cy: number) {
+  return `M${cx} ${cy - CUBE_A}L${cx + CUBE_DX} ${cy - CUBE_DY}L${cx} ${cy}L${cx - CUBE_DX} ${cy - CUBE_DY}Z`;
+}
+
+// Ô lặp chứa hai hàng tổ ong; vẽ thêm tâm tràn ra ngoài mép để phần bị cắt được
+// ô kế bên nối lại — thiếu chúng là hoa văn đứt thành từng mảng vuông.
+const CUBE_TILE_CENTERS: Array<[number, number]> = [
+  [0, 0],
+  [CUBE_TILE_W, 0],
+  [0, CUBE_TILE_H],
+  [CUBE_TILE_W, CUBE_TILE_H],
+  [CUBE_TILE_W / 2, CUBE_TILE_H / 2],
+  [CUBE_TILE_W / 2, -CUBE_TILE_H / 2],
+  [CUBE_TILE_W / 2, CUBE_TILE_H * 1.5],
+];
+
+// Vài mặt trên được tô đậm hơn, xếp thành hai vệt chéo song song — chỗ sáng chỗ
+// tối làm hoa văn có nhịp, thay vì trải đều một mức xám chết.
+const CUBE_HIGHLIGHTS: Array<[number, number, number]> = [
+  [311.77, 180, 0.1],
+  [363.73, 270, 0.16],
+  [415.69, 360, 0.12],
+  [467.65, 450, 0.07],
+  [155.88, 630, 0.09],
+  [207.85, 720, 0.14],
+  [259.8, 810, 0.08],
+];
+
+/**
+ * Nền vector mặc định cho nửa phải khi app chưa có ảnh chụp thật.
+ *
+ * Vẽ bằng SVG chứ không dùng file: nó ăn theo `currentColor` nên tenant đổi màu
+ * thương hiệu là nền đổi theo, không app nào phải ship thêm ảnh, và không có
+ * bitmap nào để phóng to bị vỡ.
+ *
+ * KHÔNG có chữ hay logo ở đây — logo đã đứng ở góc trên trái, đặt thêm một cái
+ * nữa lên hoa văn là lặp. Tấm này thuần hình.
+ */
+export function AuthBrandPattern({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 600 900"
+      preserveAspectRatio="xMidYMid slice"
+      fill="none"
+      className={cn("absolute inset-0 h-full w-full", className)}
+    >
+      <defs>
+        <pattern
+          id="goerp-auth-cubes"
+          width={CUBE_TILE_W}
+          height={CUBE_TILE_H}
+          patternUnits="userSpaceOnUse"
+        >
+          {CUBE_TILE_CENTERS.map(([cx, cy]) => (
+            <path
+              key={`${cx}-${cy}`}
+              d={cubeAt(cx, cy)}
+              stroke="currentColor"
+              strokeOpacity="0.14"
+              strokeWidth="1.25"
+            />
+          ))}
+        </pattern>
+        {/* Ánh sáng chếch từ trên phải: hoa văn phẳng đều thì nhìn như giấy dán
+            tường, có vệt sáng mới ra chiều sâu. */}
+        <radialGradient id="goerp-auth-glow" cx="0.78" cy="0.12" r="0.85">
+          <stop offset="0" stopColor="currentColor" stopOpacity="0.14" />
+          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
+        </radialGradient>
+        {/* Đáy tối dần để khối chân trang không bị hoa văn cắn vào. */}
+        <linearGradient id="goerp-auth-foot" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0.55" stopColor="#000" stopOpacity="0" />
+          <stop offset="1" stopColor="#000" stopOpacity="0.22" />
+        </linearGradient>
+      </defs>
+      <rect width="600" height="900" fill="url(#goerp-auth-cubes)" />
+      <g fill="currentColor">
+        {CUBE_HIGHLIGHTS.map(([cx, cy, opacity]) => (
+          <path
+            key={`${cx}-${cy}`}
+            d={cubeTopFaceAt(cx, cy)}
+            fillOpacity={opacity}
+          />
+        ))}
+      </g>
+      <rect width="600" height="900" fill="url(#goerp-auth-glow)" />
+      <rect width="600" height="900" fill="url(#goerp-auth-foot)" />
+    </svg>
+  );
+}
+
 interface AuthImageProps extends ComponentProps<"div"> {
-  imgSrc: string | StaticImageData;
+  /** Bỏ trống ⇒ tấm nền màu thương hiệu thay cho ảnh. */
+  imgSrc?: string | StaticImageData;
   imageClassName?: string;
 }
 
+/**
+ * Nửa phải trang đăng nhập. THUẦN HÌNH — không logo, không tên công ty, không
+ * khẩu hiệu: thương hiệu đã đứng ở góc trên trái, in lại lần nữa ở đây là lặp và
+ * làm màn đăng nhập trông như trang quảng cáo.
+ *
+ * Hai trạng thái:
+ *  - CÓ ảnh: ảnh chụp thật phủ kín, một lớp tối rất nhẹ để mép ảnh không chọi
+ *    với cột nhập liệu bên trái.
+ *  - KHÔNG ảnh: nền `--primary` của tenant + `AuthBrandPattern`. Đây là mặc
+ *    định, KHÔNG phải trạng thái lỗi — thà một tấm màu thương hiệu sạch còn hơn
+ *    ảnh stock/AI dùng chung cho mọi khách.
+ *
+ * `onError` bắt cả trường hợp app khai `authImage` nhưng quên chép file: rơi về
+ * tấm màu chứ không để ô ảnh vỡ.
+ */
 export function AuthImage({
   className,
   imageClassName,
   imgSrc,
   ...props
 }: AuthImageProps) {
+  const [imageBroken, setImageBroken] = useState(false);
+  const hasPhoto = Boolean(imgSrc) && !imageBroken;
+
   return (
     <div
       className={cn(
-        "relative hidden h-full min-h-screen bg-muted md:block",
+        "relative hidden h-full min-h-screen overflow-hidden md:block",
+        hasPhoto ? "bg-muted" : "bg-primary",
         className,
       )}
       {...props}
     >
-      <Image
-        src={imgSrc}
-        alt="Authentication Image"
-        fill
-        sizes="(max-width: 768px) 100vw, 50vw"
-        priority
-        className={cn("object-cover", imageClassName)}
-      />
+      {hasPhoto ? (
+        <>
+          {/* `unoptimized` KHÔNG phải cho tiện: app nào khai
+              `images.localPatterns` trong next.config (spartronics chỉ mở
+              `/api/branding/logo`) thì mọi đường dẫn khác NÉM LỖI NGAY LÚC
+              RENDER — không phải 404 để `onError` đỡ — và trang đăng nhập 500
+              trắng, không ai vào được hệ thống. Đi vòng qua bộ tối ưu là đổi
+              lấy sự chắc chắn đó. Bù lại: ảnh phải nén sẵn trước khi chép vào
+              public/ (khoảng 1600px, dưới ~300KB). */}
+          <Image
+            src={imgSrc!}
+            alt=""
+            aria-hidden
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
+            priority
+            unoptimized
+            onError={() => setImageBroken(true)}
+            className={cn("object-cover", imageClassName)}
+          />
+          {/* Lớp tối nhẹ thôi: không còn chữ nào đè lên ảnh, nó chỉ để ảnh khỏi
+              chói hơn hẳn cột nhập liệu bên trái. */}
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-gradient-to-t from-black/45 via-black/10 to-transparent"
+          />
+        </>
+      ) : (
+        <>
+          {/* Nền tối: hầu hết theme kéo `--primary` SÁNG lên cho hợp nền đen —
+              spartronics đi từ #0f7b4c sang xanh bạc hà rgb(70 185 129). Nửa màn
+              hình màu sáng vừa chói ban đêm, vừa dìm chữ trắng xuống 2.5:1. Phủ
+              đen để tấm nền giữ đúng sắc thương hiệu mà chữ vẫn đọc được; 55% là
+              mức đủ cho cả trường hợp tenant đặt primary rất sáng. */}
+          <div
+            aria-hidden
+            className="absolute inset-0 hidden bg-black/55 dark:block"
+          />
+          <AuthBrandPattern className="motion-safe:animate-status-in text-primary-foreground dark:text-white" />
+        </>
+      )}
     </div>
   );
 }
 
 export function AuthHeader({ className, ...props }: ComponentProps<"div">) {
-  return <div className={cn("space-y-2 text-center", className)} {...props} />;
+  // Căn TRÁI, không căn giữa: nhãn ô nhập ngay bên dưới đều căn trái — tiêu đề
+  // căn giữa tạo hai trục lệch nhau trong cùng một khối hẹp.
+  return <div className={cn("space-y-2 text-start", className)} {...props} />;
 }
 
 export function AuthTitle({ className, ...props }: ComponentProps<"h1">) {

package/templates/starter-app/src/app/[lang]/(plain)/sign-in/page.tsx

@@ -9,8 +9,6 @@ import {
 
 import type { Metadata } from "next"
 
-import wallpaper from "@goerp/core/assets/erp_wallpaper.png"
-
 import { dictionary } from "@/data/dictionary"
 
 export const metadata: Metadata = { title: "Đăng nhập" }
@@ -20,11 +18,14 @@ export const metadata: Metadata = { title: "Đăng nhập" }
  * src/lib/auth-client.ts) nên không biết gì về Better Auth — đổi thư viện auth
  * chỉ cần sửa bridge, trang này giữ nguyên.
  *
- * Đổi ảnh nền bằng cách trỏ `imgSrc` sang file trong public/ của app.
+ * Nửa phải: mặc định là tấm nền màu thương hiệu (logo + tên công ty) do core vẽ.
+ * Muốn thay bằng ảnh chụp thật của khách thì chép ảnh vào `public/images/auth/`
+ * rồi khai `branding.authImage` trong `src/configs/tenant.ts` — đừng dùng ảnh
+ * stock/AI, đây là bề mặt đầu tiên khách nhìn thấy.
  */
 export default function SignInPage() {
   return (
-    <Auth imgSrc={wallpaper} dictionary={dictionary}>
+    <Auth dictionary={dictionary}>
       <AuthHeader>
         <AuthTitle>Đăng nhập</AuthTitle>
         <AuthDescription>