@fabo-agency/shared-ui

Layout dùng chung cho agency, agency-admin, agency-shop: vỏ ngoài cố định, phần login và body do từng app tự render trong children.

Cấu trúc mã nguồn (src/)

| Thư mục / file | Nội dung | |-----------------|----------| | constants/dashboard.ts | Hằng số màu & viền dashboard (DASHBOARD_*). | | dashboard/ | DASHBOARD_LAYOUT, theme Menu (dashboardPrimaryMenuTheme, dashboardSettingsColumnMenuTheme), DashboardSidebarHeader, FixedSettingsPanel. | | layouts/ | AuthPageShell, DashboardShell, SidebarSectionLabel, SidebarStack, usePersistedSidebarCollapsed. | | branding/ | AppName, APP_DISPLAY_NAME, AuthBrandGhnMark — định danh app + nhãn + logo. | | utils/ | loginCredentialErrors, userDisplayInitials. | | login-loading/ | LoginLoadingOverlay + props appName (AppName) — màn loading đúng từng app. | | app-global.css | Style toàn cục + animation overlay (import qua @fabo-agency/shared-ui/global.css). |

Khái niệm

| Component | Vai trò | |-----------|--------| | AuthPageShell | Trang đăng nhập: nền + brand (tuỳ chọn) + một slot children duy nhất — app tự dựng Card, form, banner lỗi, v.v. | | DashboardShell | Khung dashboard: sidebar-first hoặc header-first, hỗ trợ nhiều panel phụ + thu gọn sidebar. | | SidebarSectionLabel / SidebarStack | Nhãn nhóm menu & cột sidebar (scroll + footer). | | usePersistedSidebarCollapsed | State thu gọn sidebar + tuỳ chọn ghi localStorage. | | DashboardSidebarHeader / FixedSettingsPanel | Logo + tiêu đề + nút thu gọn khi mở rộng; khi thu gọn chỉ logo (bấm logo để mở rộng); Menu dùng inlineCollapsed để chỉ hiện icon; overlay cột Cài đặt. | | AuthBrandGhnMark | Ô vuông GHN + text brand (login / header). |

Publish

npm install
npm run build
npm login
npm publish --access public

Install in app

yarn add @fabo-agency/[email protected]

Ví dụ: body app khác nhau

import { AuthPageShell } from '@fabo-agency/shared-ui';
import '@fabo-agency/shared-ui/global.css';

<AuthPageShell mode="gradient" brand={<span>AGENCY GHN</span>}>
  <Card>{/* form riêng app */}</Card>
</AuthPageShell>