gov-layout 1.2.25 → 1.2.27

package/README.md

@@ -241,11 +241,21 @@ import { UserHeader } from 'gov-layout';
   notifications={[
     {
       id: 1,
-      title: 'คำร้องได้รับการอนุมัติ',
-      description: 'คำร้องหมายเลข #1234',
+      title: 'คำร้องใหม่รอตรวจสอบ',
+      description: 'มีคำร้องใหม่เข้ามา กรุณาตรวจสอบ',
       date: '2 ชม. ที่แล้ว',
-      type: 'success',
+      type: 'warning',
       isRead: false,
+      category: 'action',           // ← แสดงในแท็บ "ต้องดำเนินการ"
+    },
+    {
+      id: 2,
+      title: 'คำร้องได้รับการอนุมัติ',
+      description: 'คำร้องหมายเลข #1234 อนุมัติสำเร็จ',
+      date: '5 ชม. ที่แล้ว',
+      type: 'success',
+      isRead: true,
+      category: 'general',          // ← แสดงในแท็บ "แจ้งเตือนทั่วไป"
     },
   ]}
   onToggleSidebar={() => setOpen(true)}
@@ -273,15 +283,32 @@ import { UserHeader } from 'gov-layout';
 | `notificationBell` | `ReactNode?` | - | custom bell icon |
 | `className` | `string?` | - | className เพิ่มเติม |
 
+### 🔔 Notification Filter Tabs (v1.2.25+)
+
+Dropdown แจ้งเตือนมีแท็บกรอง 3 หมวด พร้อม badge ตัวเลข:
+
+| แท็บ | กรองจาก `category` | ตัวอย่างใช้งาน |
+|------|-------------------|----------------|
+| **ทั้งหมด** | แสดงทุกรายการ | ดูภาพรวม |
+| **ต้องดำเนินการ** | `'action'` | คำร้องใหม่รอตรวจสอบ, ต้องอัปโหลดเอกสาร, มีคิวใหม่ |
+| **แจ้งเตือนทั่วไป** | `'general'` หรือไม่ระบุ | อนุมัติสำเร็จ, จองสำเร็จ, ยกเลิกแล้ว |
+
+> 💡 ถ้าไม่ส่ง `category` จะถูกจัดเป็น **แจ้งเตือนทั่วไป** อัตโนมัติ (backward compatible)
+
 ### Features
 
 - ✅ Notification bell พร้อม badge (99+ เมื่อเกิน)
 - ✅ ไม่มีแจ้งเตือน → ไม่แสดง badge
 - ✅ Notification dropdown แบบ scroll
+- ✅ **Filter tabs**: ทั้งหมด / ต้องดำเนินการ / แจ้งเตือนทั่วไป 🆕
+- ✅ **Badge ตัวเลข** แต่ละแท็บ 🆕
+- ✅ **Category badge** "ต้องดำเนินการ" ติดแต่ละรายการ 🆕
+- ✅ **Empty state แยกตาม filter** 🆕
 - ✅ กดแจ้งเตือนแต่ละรายการ → `onNotificationClick`
 - ✅ Subtitle ใต้ข้อความทักทาย (เช่น "ผู้สูงอายุ")
 - ✅ ปุ่มเปิด sidebar (☰)
 - ✅ กดโปรไฟล์ผู้ใช้ (avatar + ชื่อ) → `onProfile`
+- ✅ รองรับ Dark Mode
 
 ---
 
@@ -433,6 +460,8 @@ interface User {
 }
 
 // การแจ้งเตือน
+type NotificationCategory = 'action' | 'general';
+
 interface NotificationItem {
   id: string | number;
   title: string;
@@ -440,6 +469,7 @@ interface NotificationItem {
   date: string;
   type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
   isRead: boolean;
+  category?: NotificationCategory;  // 🆕 หมวดหมู่: 'action' | 'general'
 }
 
 // ตั้งค่า

package/dist/index.js

@@ -625,6 +625,18 @@ function ProfileIcon() {
     }
   );
 }
+function DefaultAvatarIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+    }
+  );
+}
 function SidebarUserProfile({
   user,
   roleLabel,
@@ -640,9 +652,6 @@ function SidebarUserProfile({
     }
     return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
   };
-  const getInitial = () => {
-    return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
-  };
   if (collapsed) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
       padding: "12px 8px",
@@ -681,11 +690,9 @@ function SidebarUserProfile({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                color: "#fff",
-                fontWeight: 700,
-                fontSize: "14px"
+                color: "#fff"
               },
-              children: getInitial()
+              children: /* @__PURE__ */ jsxRuntime.jsx(DefaultAvatarIcon, {})
             }
           )
         }
@@ -802,11 +809,9 @@ function SidebarUserProfile({
                     alignItems: "center",
                     justifyContent: "center",
                     color: "#fff",
-                    fontWeight: 700,
-                    fontSize: "16px",
                     flexShrink: 0
                   },
-                  children: getInitial()
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DefaultAvatarIcon, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -1097,6 +1102,9 @@ function HamburgerIcon() {
     }
   ) });
 }
+function MessageOutlinedIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z" }) });
+}
 function getNotifBg(type) {
   const map = {
     success: "#dcfce7",
@@ -1440,12 +1448,26 @@ function UserHeader({
                         "div",
                         {
                           style: {
-                            padding: "32px",
+                            padding: "48px 32px",
                             textAlign: "center",
-                            color: "#9ca3af",
-                            fontSize: "14px"
+                            color: isDark ? "#9ca3af" : "#6b7280",
+                            fontSize: "14px",
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "12px"
                           },
-                          children: activeFilter === "all" ? "\u{1F514} \u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E43\u0E2B\u0E21\u0E48" : activeFilter === "action" ? "\u2705 \u0E44\u0E21\u0E48\u0E21\u0E35\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E15\u0E49\u0E2D\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23" : "\u{1F4CB} \u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B"
+                          children: activeFilter === "action" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(MessageOutlinedIcon, { style: { width: "48px", height: "48px", opacity: 0.4 } }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E15\u0E49\u0E2D\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23" })
+                          ] }) : activeFilter === "all" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(BellIcon2, {}),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, marginTop: "8px" }, children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E43\u0E2B\u0E21\u0E48" })
+                          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "40px", opacity: 0.6, marginBottom: "-8px" }, children: "\u{1F4CB}" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B" })
+                          ] })
                         }
                       ) : filteredNotifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",