npm - @goplusvn/core - Versions diffs - 0.1.72 → 0.1.74 - Mend

@goplusvn/core 0.1.72 → 0.1.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/package.json +1 -1
package/src/branding/__tests__/identity.test.ts +101 -0
package/src/branding/__tests__/logo-route.test.ts +143 -0
package/src/branding/identity.ts +74 -0
package/src/branding/index.ts +36 -0
package/src/branding/logo-route.ts +249 -0
package/src/branding/pwa.tsx +146 -0
package/src/branding/types.ts +45 -0
package/src/providers/tenant-provider.tsx +10 -0
package/src/styles/base.css +16 -0
package/src/ui/auth/auth-layout.tsx +183 -21
package/src/ui/errors/error-view.tsx +80 -87
package/src/ui/errors/index.ts +6 -1
package/src/ui/errors/not-found-view.tsx +89 -16
package/src/ui/errors/status-page.tsx +132 -0
package/src/ui/layout/logo.tsx +5 -0
package/src/ui/pages/not-found.tsx +11 -27
package/templates/starter-app/next.config.mjs +8 -0
package/templates/starter-app/package.json +1 -0
package/templates/starter-app/public/images/illustrations/characters/character-01.svg +33 -0
package/templates/starter-app/public/images/illustrations/characters/character-02.svg +30 -0
package/templates/starter-app/public/images/illustrations/characters/character-03.svg +30 -0
package/templates/starter-app/public/images/illustrations/characters/character-04.svg +27 -0
package/templates/starter-app/public/images/logos/goeat_logo.png +0 -0
package/templates/starter-app/src/app/[lang]/(main)/admin/system/company/company-profile-form.tsx +21 -5
package/templates/starter-app/src/app/[lang]/(plain)/sign-in/page.tsx +5 -4
package/templates/starter-app/src/app/[lang]/layout.tsx +26 -1
package/templates/starter-app/src/app/api/branding/logo/route.ts +25 -0
package/templates/starter-app/src/app/layout.tsx +42 -1
package/templates/starter-app/src/app/manifest.ts +23 -19
package/templates/starter-app/src/configs/tenant.ts +6 -1
package/templates/starter-app/src/providers/index.tsx +12 -2
package/templates/starter-app/src/proxy.ts +3 -1

package/src/branding/pwa.tsx ADDED Viewed

@@ -0,0 +1,146 @@
+import * as React from "react";
+import type { Metadata, MetadataRoute } from "next";
+import type { BrandingIdentity } from "./types";
+/**
+ * PWA "cài được lên màn hình chính" — mức mặc định cho mọi app dựng từ core.
+ *
+ * Ba mảnh phải khớp nhau, thiếu một là iOS lặng lẽ tạo web clip THƯỜNG (bấm ra
+ * mở Safari, mất thanh trạng thái riêng, mất standalone):
+ * 1. `buildAppManifest` — `/manifest.webmanifest`, icon lấy từ logo công ty.
+ * 2. `buildBrandingMetadata` — `icons` + `appleWebApp` cho Metadata API.
+ * 3. `<PwaMetaTags>` — render CỨNG trong shell, xem ghi chú bên dưới.
+ *
+ * Service worker/offline KHÔNG nằm ở đây: app chạy trong nhà máy sóng yếu thì
+ * tự thêm serwist ở tầng app, đó là quyết định riêng từng dự án.
+ */
+export interface AppManifestOptions {
+  /** Mô tả ngắn. Bỏ trống ⇒ dùng tagline, rồi tới tên app. */
+  description?: string;
+  display?: MetadataRoute.Manifest["display"];
+  orientation?: MetadataRoute.Manifest["orientation"];
+  /** `id` PHẢI ổn định — đổi nó là Android coi như một app KHÁC. */
+  id?: string;
+  scope?: string;
+}
+export function buildAppManifest(
+  identity: BrandingIdentity,
+  options: AppManifestOptions = {},
+): MetadataRoute.Manifest {
+  const { logoPath } = identity;
+  return {
+    id: options.id ?? "/",
+    name: identity.appName,
+    short_name: identity.appName,
+    description: options.description || identity.tagline || identity.appName,
+    // start_url có locale sẵn: "/" bắt mỗi lần mở app đi 2–3 chặng redirect
+    // server, mấy chặng đó không vẽ được gì ngoài màn trắng.
+    start_url: identity.startUrl,
+    // Mặc định scope là THƯ MỤC của start_url — khai tường minh, nếu không
+    // start_url "/vi/home" sẽ khoá app trong "/vi/".
+    scope: options.scope ?? "/",
+    display: options.display ?? "standalone",
+    orientation: options.orientation,
+    background_color: identity.backgroundColor,
+    theme_color: identity.themeColor,
+    icons: [
+      {
+        src: `${logoPath}?variant=icon`,
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: `${logoPath}?variant=maskable`,
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  };
+}
+/**
+ * Phần `Metadata` phụ thuộc thương hiệu — trải vào `generateMetadata` của root
+ * layout. Khai `icons` ở đây khiến Next BỎ QUA file `app/icon.png` /
+ * `app/apple-icon.png`; ngược lại, còn hai file đó thì convention file-based
+ * THẮNG và favicon sẽ mãi là logo cũ.
+ */
+export function buildBrandingMetadata(identity: BrandingIdentity): Metadata {
+  const { logoPath, logoUrl } = identity;
+  const version = logoUrl.includes("?v=") ? `&${logoUrl.split("?")[1]}` : "";
+  return {
+    applicationName: identity.appName,
+    manifest: "/manifest.webmanifest",
+    icons: {
+      icon: [
+        { url: `${logoPath}?variant=favicon${version}`, type: "image/png" },
+      ],
+      shortcut: [{ url: `${logoPath}?variant=favicon${version}` }],
+      apple: [
+        {
+          url: `${logoPath}?variant=apple${version}`,
+          sizes: "180x180",
+          type: "image/png",
+        },
+      ],
+    },
+    appleWebApp: {
+      capable: true,
+      title: identity.appName,
+      statusBarStyle: "default",
+    },
+    openGraph: {
+      siteName: identity.appName,
+      images: [{ url: `${logoPath}?variant=og${version}`, width: 1200, height: 630 }],
+    },
+  };
+}
+/**
+ * Thẻ PWA render CỨNG trong shell (đặt ngay đầu `<body>` của root layout).
+ *
+ * Vì sao không trông vào Metadata API: từ khi layout stream qua `<Suspense>`,
+ * Next đẩy output của `generateMetadata` (phải chờ DB) xuống SAU vài chục KB
+ * đầu tiên của body. Safari lúc "Thêm vào MH chính" đọc `<head>` ở khoảnh khắc
+ * đó chưa thấy `<link rel="manifest">` nên tạo web clip thường. React hoist các
+ * thẻ này lên `<head>` ngay từ flush đầu.
+ *
+ * Next 16 cũng KHÔNG còn phát `apple-mobile-web-app-capable` từ
+ * `appleWebApp.capable` (chỉ phát bản `mobile-web-app-capable`) — thẻ apple-*
+ * chỉ tồn tại nhờ component này. Trùng thẻ với Metadata API là vô hại: thẻ đầu
+ * theo tree order thắng.
+ */
+export function PwaMetaTags({
+  manifestHref = "/manifest.webmanifest",
+  logoPath = "/api/branding/logo",
+  appName,
+  themeColor,
+}: {
+  manifestHref?: string;
+  logoPath?: string;
+  /** Tên trên biểu tượng iOS. Bỏ trống ⇒ để Metadata API lo. */
+  appName?: string;
+  themeColor?: string;
+}) {
+  // Không nhận `BrandingIdentity`: dựng identity phải chờ DB, mà root layout
+  // `await` là màn hình TRẮNG cho tới khi DB trả lời. Các thẻ ở đây cố ý là
+  // hằng số thuần.
+  return (
+    <>
+      <link rel="manifest" href={manifestHref} />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta name="mobile-web-app-capable" content="yes" />
+      {appName ? (
+        <meta name="apple-mobile-web-app-title" content={appName} />
+      ) : null}
+      {themeColor ? <meta name="theme-color" content={themeColor} /> : null}
+      <link rel="apple-touch-icon" href={`${logoPath}?variant=apple`} />
+    </>
+  );
+}

package/src/branding/types.ts ADDED Viewed

@@ -0,0 +1,45 @@
+/**
+ * Hồ sơ công ty ở mức core CẦN BIẾT — cố ý hẹp.
+ *
+ * Mỗi app có schema `companies` hơi khác nhau (vinhhoa/spartronics dùng cột
+ * `logo_url`, thingtodo dùng `logo`), nên core nhận cả hai tên và không đụng
+ * tới phần còn lại của bản ghi.
+ */
+export interface BrandingCompany {
+  /** Tên pháp lý — in trên hợp đồng/hoá đơn. */
+  name?: string | null;
+  /** Tên hiển thị trên app/PWA. Rỗng ⇒ rơi về `name`, rồi tới tenant. */
+  systemName?: string | null;
+  /** URL logo đã lưu: `/api/files/<key>`, `/uploads/...` hoặc http(s). */
+  logoUrl?: string | null;
+  /** Bí danh của `logoUrl` cho app đặt tên cột là `logo`. */
+  logo?: string | null;
+  /** Dùng làm `?v=` phá cache của URL logo. */
+  updatedAt?: Date | string | null;
+}
+/** Bản sắc thương hiệu đã hoà giải (DB đè lên tenant config tĩnh). */
+export interface BrandingIdentity {
+  /** Tên ngắn hiển thị sidebar/PWA. */
+  appName: string;
+  /** Tên pháp lý đầy đủ. */
+  companyName: string;
+  /** Dòng phụ dưới tên ở sidebar/đăng nhập. `""` = ẩn. */
+  tagline: string;
+  /** URL logo dùng chung cho MỌI bề mặt, đã kèm `?v=`. */
+  logoUrl: string;
+  /** Đường dẫn gốc của route logo (mặc định `/api/branding/logo`). */
+  logoPath: string;
+  themeColor: string;
+  backgroundColor: string;
+  /** `start_url` của manifest — PHẢI là đường đã có locale. */
+  startUrl: string;
+}
+/** Các biến thể kích thước mà route logo tự render. */
+export type BrandingLogoVariant =
+  | "favicon"
+  | "apple"
+  | "icon"
+  | "maskable"
+  | "og";

package/src/providers/tenant-provider.tsx CHANGED Viewed

@@ -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/styles/base.css CHANGED Viewed

@@ -108,6 +108,22 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
+  /* Màn trạng thái (404/403/400/lỗi): hình và chữ nổi lên MỘT lần lúc mở.
+     Dùng kèm `motion-safe:` — người bật "giảm chuyển động" thấy trang tĩnh. */
+  --animate-status-in: status-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
+  @keyframes status-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-collapsible-down: collapsible-down 0.2s ease-out;

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

@@ -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">) {