@goplusvn/core 0.1.73 → 0.1.74

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.74",
   "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,10 +52,12 @@ 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 chỉ đứng đây khi KHÔNG có nửa phải (màn hẹp) — trên md tấm
+              ảnh đã mang logo + tên công ty rồi, lặp lại là thừa. */}
           <Link
             href={ensureLocalizedPathname("/", locale)}
-            className="flex items-center gap-2 text-foreground font-black"
+            className="flex md:hidden items-center gap-2 text-foreground font-black"
           >
             {branding?.logo ? (
               <Image
@@ -71,56 +79,210 @@ 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>
   );
 }
 
+/**
+ * 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ỡ.
+ *
+ * Hình khối cố ý ở mức kỹ thuật — lưới như giấy kẻ ô và mấy cung tròn quét từ
+ * góc trên phải (tâm nằm NGOÀI khung nên thấy nét quét chứ không thành cái bia
+ * bắn) — thay vì mấy vệt gradient loang: loang là thứ nhìn phát biết đồ máy
+ * sinh, còn lưới + cung tròn là ngôn ngữ của bản vẽ kỹ thuật, hợp phần mềm quản
+ * trị và không lỗi mốt.
+ *
+ * Mọi độ mờ đều dưới 20%: đây là nền, phần đọc được phải là logo + tên công ty.
+ */
+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-grid"
+          width="44"
+          height="44"
+          patternUnits="userSpaceOnUse"
+        >
+          <path
+            d="M44 0H0V44"
+            stroke="currentColor"
+            strokeOpacity="0.08"
+            strokeWidth="1"
+          />
+        </pattern>
+        <radialGradient id="goerp-auth-glow" cx="0.82" cy="0.1" r="0.8">
+          <stop offset="0" stopColor="currentColor" stopOpacity="0.16" />
+          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <rect width="600" height="900" fill="url(#goerp-auth-grid)" />
+      <rect width="600" height="900" fill="url(#goerp-auth-glow)" />
+      <g stroke="currentColor" fill="none">
+        <circle cx="640" cy="-60" r="280" strokeOpacity="0.16" />
+        <circle cx="640" cy="-60" r="430" strokeOpacity="0.12" />
+        <circle cx="640" cy="-60" r="600" strokeOpacity="0.08" />
+        <circle cx="640" cy="-60" r="790" strokeOpacity="0.05" />
+      </g>
+    </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.
+ *
+ * Hai trạng thái, cùng một khối logo + tên công ty ở dưới:
+ *  - CÓ ảnh: ảnh phủ kín, một lớp tối chuyển dần từ đáy lên để chữ đè lên còn
+ *    đọc được (nền ảnh không kiểm soát được ⇒ không có lớp này thì chữ trắng
+ *    rơi vào vùng sáng là mất hút).
+ *  - 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 branding = useOptionalTenant()?.branding;
+  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)}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 to-black/10"
+          />
+        </>
+      ) : (
+        <>
+          {/* 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="text-primary-foreground dark:text-white" />
+        </>
+      )}
+
+      <div
+        className={cn(
+          "absolute inset-0 flex flex-col p-10",
+          hasPhoto ? "justify-end" : "justify-center",
+        )}
+      >
+        <div
+          className={cn(
+            "motion-safe:animate-status-in flex flex-col items-start gap-4",
+            hasPhoto ? "text-white" : "text-primary-foreground dark:text-white",
+          )}
+        >
+          {branding?.logo ? (
+            // Logo khách phần lớn là nét sẫm trên nền trong suốt ⇒ đặt trên tấm
+            // trắng đục để nó không tan vào ảnh tối hay nền màu.
+            <span className="inline-flex rounded-xl bg-white p-3 shadow-sm">
+              <Image
+                src={branding.logo}
+                alt={branding.companyName || "Logo"}
+                height={40}
+                width={160}
+                className="h-10 w-auto object-contain"
+                unoptimized
+              />
+            </span>
+          ) : null}
+          <div className="space-y-1.5">
+            <p className="text-3xl font-semibold leading-tight tracking-tight text-balance">
+              {branding?.companyName || "GoERP"}
+            </p>
+            {branding?.tagline ? (
+              <p
+                className={cn(
+                  "max-w-sm text-balance text-sm leading-relaxed",
+                  hasPhoto
+                    ? "text-white/80"
+                    : "text-primary-foreground/80 dark:text-white/80",
+                )}
+              >
+                {branding.tagline}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </div>
     </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>