@wikex/admin-kit 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 Các thay đổi đáng chú ý của `@wikex/admin-kit` được ghi tại đây theo Semantic Versioning.
 
+## 0.7.0 - 2026-09-13
+
+- Thay toàn bộ admin shell bằng component MUI thật theo Minimal UI: AppBar, navigation,
+  workspace switcher, account menu, theme switch, view-site và logout.
+- Đồng bộ kích thước layout gốc của Minimal với sidebar 300/88px, header 72/64px,
+  Public Sans và palette xanh `#00A76F`.
+- Chuẩn hóa table, filter, select, input, block, rich-text và document sidebar của Payload
+  theo token/bề mặt Minimal trong khi giữ nguyên hành vi, permission và Live Preview.
+- Loại bỏ implementation shell cũ để các export công khai chỉ còn trỏ tới giao diện Minimal.
+
+## 0.6.0 - 2026-09-13
+
+- Tích hợp MUI 7 và Emotion bằng App Router cache provider chính thức cho Next.js 16.
+- Thêm Minimal theme gốc, tự đồng bộ light/dark mode với Payload Admin.
+- Thêm `MinimalDataTable`, `MinimalSelect` và `MinimalBlockCard` cho các màn hình admin custom.
+
 ## 0.5.0 - 2026-09-13
 
 - Hoàn thiện admin shell Minimal với navigation mini/mobile, workspace header và account actions.

package/README.md

@@ -4,7 +4,7 @@ Admin shell dùng chung cho các website Payload CMS của Wikex.
 
 Package sở hữu:
 
-- navigation, header, đăng nhập, đổi theme và branding động;
+- navigation, header, đăng nhập, account menu, đổi theme và branding động bằng MUI;
 - Minimal UI skin và các bản vá layout Payload;
 - Live Preview editor, drawer thuộc tính, block picker và resize text;
 - font family, line-height và runtime áp dụng typography;
@@ -53,6 +53,38 @@ export const plugins = [
 ]
 ```
 
+`wikexAdminPlugin` tự đăng ký MUI/Emotion provider của Admin Kit và đồng bộ light/dark
+mode với Payload. Các màn hình custom có thể dùng trực tiếp các primitive Minimal thật:
+
+```tsx
+'use client'
+
+import { MinimalBlockCard, MinimalDataTable, MinimalSelect } from '@wikex/admin-kit/minimal'
+
+export const ProductPanel = () => (
+  <MinimalBlockCard label="Catalog" title="Hàng hóa">
+    <MinimalSelect
+      label="Trạng thái"
+      onChange={(value) => console.log(value)}
+      options={[{ label: 'Đang bán', value: 'active' }]}
+      value="active"
+    />
+    <MinimalDataTable
+      caption="Danh sách hàng hóa"
+      columns={[{ id: 'name', header: 'Tên', render: (row) => row.name }]}
+      rowKey="id"
+      rows={[{ id: 'gold', name: 'Vàng' }]}
+    />
+  </MinimalBlockCard>
+)
+```
+
+Theme dùng palette gốc của Minimal UI (`primary.main = #00A76F`) và không chèn
+`CssBaseline`, nhờ vậy không reset CSS form/document có sẵn của Payload.
+Admin shell dùng trực tiếp component MUI của Minimal; các control nội bộ của Payload
+(table, filter, select, block, editor) được ánh xạ sang cùng token và kích thước để giữ
+nguyên sorting, permission, localization và Live Preview.
+
 Live Preview provider của dự án là adapter khai báo route và component khả dụng:
 
 ```tsx
@@ -104,7 +136,7 @@ Xem consumer không thuộc lĩnh vực bất động sản tại `examples/corp
 ## Cài vào dự án khác — một package, một cấu hình
 
 ```bash
-pnpm add @wikex/admin-kit@0.5.0
+pnpm add @wikex/admin-kit@0.7.0
 ```
 
 Không cần `.npmrc`, GitLab token hay npm token ở dự án consumer. Các peer dependency

package/dist/admin/before-login.js

@@ -4,24 +4,25 @@ import {
   useAdminBrand
 } from "../chunk-X7VETFVD.js";
 
-// src/admin/BeforeLogin.tsx
+// src/admin/MinimalBeforeLogin.tsx
+import { Box, Typography } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BeforeLogin = () => {
   const { siteName } = useAdminBrand();
-  return /* @__PURE__ */ jsxs("div", { className: "admin-login-intro", children: [
-    /* @__PURE__ */ jsxs("span", { className: "admin-login-intro__eyebrow", children: [
+  return /* @__PURE__ */ jsxs(Box, { className: "admin-login-intro", children: [
+    /* @__PURE__ */ jsxs(Typography, { className: "admin-login-intro__eyebrow", color: "primary", variant: "overline", children: [
       siteName,
       " \xB7 Trung t\xE2m n\u1ED9i dung"
     ] }),
-    /* @__PURE__ */ jsx("h1", { children: "Ch\xE0o m\u1EEBng tr\u1EDF l\u1EA1i." }),
-    /* @__PURE__ */ jsxs("p", { children: [
+    /* @__PURE__ */ jsx(Typography, { component: "h1", variant: "h4", children: "Ch\xE0o m\u1EEBng tr\u1EDF l\u1EA1i." }),
+    /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", variant: "body2", children: [
       "\u0110\u0103ng nh\u1EADp \u0111\u1EC3 qu\u1EA3n l\xFD n\u1ED9i dung, h\xECnh \u1EA3nh v\xE0 xu\u1EA5t b\u1EA3n c\u1EE7a ",
       siteName,
       "."
     ] })
   ] });
 };
-var BeforeLogin_default = BeforeLogin;
+var MinimalBeforeLogin_default = BeforeLogin;
 export {
-  BeforeLogin_default as default
+  MinimalBeforeLogin_default as default
 };

package/dist/admin/header.js

@@ -5,25 +5,32 @@ import {
 } from "../chunk-SM6CCKQQ.js";
 import "../chunk-X7VETFVD.js";
 import {
-  ThemeToggle_default
-} from "../chunk-SAI5SWZA.js";
+  MinimalThemeToggle_default
+} from "../chunk-N7CP6ZLG.js";
+import {
+  MinimalViewSite_default
+} from "../chunk-BKR24U6B.js";
 
-// src/admin/Header.tsx
+// src/admin/MinimalHeader.tsx
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Divider,
+  IconButton,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  Stack,
+  Toolbar,
+  Tooltip,
+  Typography
+} from "@mui/material";
 import { Link, useAuth, useConfig, useNav } from "@payloadcms/ui";
-import { Menu, Settings2 } from "lucide-react";
+import { LogOut, Menu as MenuIcon, Settings2, UserRound } from "lucide-react";
 import { formatAdminURL } from "payload/shared";
-
-// src/admin/ViewSite.tsx
-import { ArrowUpRight } from "lucide-react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var AdminViewSite = () => /* @__PURE__ */ jsxs("a", { className: "admin-view-site", "data-slot": "button", href: "/", rel: "noreferrer", target: "_blank", children: [
-  "Xem website",
-  /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
-] });
-var ViewSite_default = AdminViewSite;
-
-// src/admin/Header.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var getInitials = (name, email) => {
   const source = name?.trim() || email?.split("@")[0] || "AD";
   return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
@@ -37,60 +44,95 @@ var AdminHeader = () => {
       routes: { admin: adminRoute }
     }
   } = useConfig();
+  const [accountAnchor, setAccountAnchor] = useState(null);
   const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
   const initials = getInitials(user?.name, user?.email);
-  return /* @__PURE__ */ jsxs2("header", { className: "minimal-admin-header", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "minimal-admin-header__left", children: [
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          "aria-label": "M\u1EDF menu qu\u1EA3n tr\u1ECB",
-          className: "minimal-admin-header__menu",
-          onClick: () => setNavOpen(true),
-          type: "button",
-          children: /* @__PURE__ */ jsx2(Menu, { "aria-hidden": "true" })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Link,
-        {
-          "aria-label": "V\u1EC1 dashboard",
-          className: "minimal-admin-header__mobile-brand",
-          href: adminRoute,
-          prefetch: false,
-          children: /* @__PURE__ */ jsx2(AdminIcon, {})
-        }
-      )
+  const accountURL = formatAdminURL({ adminRoute, path: adminRoutes.account });
+  const logoutURL = formatAdminURL({ adminRoute, path: adminRoutes.logout });
+  const openAccountMenu = (event) => setAccountAnchor(event.currentTarget);
+  const closeAccountMenu = () => setAccountAnchor(null);
+  return /* @__PURE__ */ jsxs(AppBar, { className: "minimal-admin-header", color: "transparent", elevation: 0, position: "fixed", children: [
+    /* @__PURE__ */ jsxs(Toolbar, { className: "minimal-admin-header__toolbar", disableGutters: true, children: [
+      /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: "minimal-admin-header__left", direction: "row", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "M\u1EDF menu qu\u1EA3n tr\u1ECB",
+            className: "minimal-admin-header__menu",
+            onClick: () => setNavOpen(true),
+            children: /* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": "true", size: 21 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            "aria-label": "V\u1EC1 dashboard",
+            className: "minimal-admin-header__mobile-brand",
+            href: adminRoute,
+            prefetch: false,
+            children: /* @__PURE__ */ jsx(AdminIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: "minimal-admin-header__actions", direction: "row", children: [
+        /* @__PURE__ */ jsx(MinimalViewSite_default, {}),
+        /* @__PURE__ */ jsx(MinimalThemeToggle_default, {}),
+        /* @__PURE__ */ jsx(Tooltip, { title: "C\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": `M\u1EDF c\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n ${userLabel}`,
+            className: "minimal-admin-header__settings",
+            component: Link,
+            href: accountURL,
+            prefetch: false,
+            children: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true", size: 20 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: userLabel, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-controls": accountAnchor ? "minimal-account-menu" : void 0,
+            "aria-expanded": accountAnchor ? "true" : void 0,
+            "aria-haspopup": "menu",
+            "aria-label": `M\u1EDF menu t\xE0i kho\u1EA3n ${userLabel}`,
+            className: "minimal-admin-header__account",
+            onClick: openAccountMenu,
+            children: /* @__PURE__ */ jsx(Avatar, { children: initials })
+          }
+        ) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "minimal-admin-header__actions", children: [
-      /* @__PURE__ */ jsx2(ViewSite_default, {}),
-      /* @__PURE__ */ jsx2(ThemeToggle_default, {}),
-      /* @__PURE__ */ jsx2(
-        Link,
-        {
-          "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
-          className: "minimal-admin-header__settings",
-          href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
-          prefetch: false,
-          title: "C\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n",
-          children: /* @__PURE__ */ jsx2(Settings2, { "aria-hidden": "true" })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Link,
-        {
-          "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
-          className: "minimal-admin-header__account",
-          href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
-          prefetch: false,
-          title: userLabel,
-          children: /* @__PURE__ */ jsx2("span", { children: initials })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl: accountAnchor,
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        id: "minimal-account-menu",
+        onClose: closeAccountMenu,
+        open: Boolean(accountAnchor),
+        slotProps: { paper: { className: "minimal-account-menu" } },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "minimal-account-menu__profile", children: [
+            /* @__PURE__ */ jsx(Typography, { fontWeight: 600, noWrap: true, variant: "subtitle2", children: userLabel }),
+            /* @__PURE__ */ jsx(Typography, { color: "text.secondary", noWrap: true, variant: "caption", children: user?.email || "T\xE0i kho\u1EA3n qu\u1EA3n tr\u1ECB" })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs(MenuItem, { component: Link, href: accountURL, onClick: closeAccountMenu, prefetch: false, children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(UserRound, { size: 18 }) }),
+            "T\xE0i kho\u1EA3n"
+          ] }),
+          /* @__PURE__ */ jsxs(MenuItem, { component: Link, href: logoutURL, onClick: closeAccountMenu, prefetch: false, children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(LogOut, { size: 18 }) }),
+            "\u0110\u0103ng xu\u1EA5t"
+          ] })
+        ]
+      }
+    )
   ] });
 };
-var Header_default = AdminHeader;
+var MinimalHeader_default = AdminHeader;
 export {
-  Header_default as default
+  MinimalHeader_default as default
 };

package/dist/admin/logout-button.js

@@ -1,8 +1,8 @@
 'use client';
 "use client";
 import {
-  LogoutButton_default
-} from "../chunk-GZ2B5BTH.js";
+  MinimalLogoutButton_default
+} from "../chunk-B6FIGT4Q.js";
 export {
-  LogoutButton_default as default
+  MinimalLogoutButton_default as default
 };