gov-layout 1.1.8 → 1.1.10

package/README.md

@@ -1,28 +1,49 @@
 # gov-layout
 
-Government Layout Components — Staff Sidebar + User Header/Sidebar + Settings Panel
+Government Layout Components สำหรับเว็บแอปพลิเคชันภาครัฐ
 
 > ใช้คู่กับ `gov-token-css` เพื่อให้สีตรงตาม Design System
 
-## Installation
+---
+
+## 📥 Installation
 
 ```bash
 npm install gov-layout gov-token-css
 ```
 
+```css
+/* ใน globals.css */
+@import "gov-token-css";
+```
+
+---
+
+## 📦 Components ทั้งหมด
+
+| Component | ใช้สำหรับ | import |
+|-----------|----------|--------|
+| `StaffSidebar` | Sidebar เจ้าหน้าที่ | `import { StaffSidebar } from 'gov-layout'` |
+| `UserHeader` | Header ผู้ใช้ทั่วไป | `import { UserHeader } from 'gov-layout'` |
+| `UserSidebar` | Sidebar ผู้ใช้ (slide-in) | `import { UserSidebar } from 'gov-layout'` |
+| `SettingsPanel` | หน้าตั้งค่า (font + theme) | `import { SettingsPanel } from 'gov-layout'` |
+| `SettingsProvider` | Context wrapper | `import { SettingsProvider } from 'gov-layout'` |
+| `useSettings` | Hook อ่าน/เปลี่ยนค่า | `import { useSettings } from 'gov-layout'` |
+
 ---
 
-## 📦 Components
+## 1. StaffSidebar (เจ้าหน้าที่)
 
-### 1. StaffSidebar (เจ้าหน้าที่)
+Sidebar ฝั่งซ้ายแบบ fixed — รองรับพับ/กาง (collapsible)
 
-Sidebar ฝั่งซ้ายแบบ fixed สำหรับหน้า admin — รองรับพับ/กาง (collapsible)
+### ตัวอย่างใช้งาน
 
 ```tsx
 import { StaffSidebar } from 'gov-layout';
 import type { MenuItem } from 'gov-layout';
 
 const menuItems: MenuItem[] = [
+  // === Dropdown (มี children) ===
   {
     id: 'services',
     title: 'งานบริการ',
@@ -30,19 +51,13 @@ const menuItems: MenuItem[] = [
     children: [
       { id: 'water', title: 'ประปา', path: '/services/water' },
       { id: 'tax', title: 'ภาษี', path: '/services/tax' },
+      { id: 'civil', title: 'ทะเบียน', path: '/services/civil' },
     ],
+    dividerAfter: true, // เส้นคั่นหลังเมนูนี้
   },
-  {
-    id: 'help',
-    title: 'ช่วยเหลือ',
-    icon: <HelpIcon />,
-    path: '/help',
-    dividerAfter: true,
-  },
-];
-
-const bottomMenu: MenuItem[] = [
-  { id: 'settings', title: 'ตั้งค่าระบบ', icon: <SettingsIcon />, path: '/settings' },
+  // === เมนูเดี่ยว (ไม่มี children) ===
+  { id: 'users', title: 'จัดการผู้ใช้', icon: <UserIcon />, path: '/users' },
+  { id: 'reports', title: 'รายงาน', icon: <ChartIcon />, path: '/reports' },
 ];
 
 <StaffSidebar
@@ -50,39 +65,96 @@ const bottomMenu: MenuItem[] = [
   orgName="เทศบาลตำบลหลักเมือง"
   orgSubtitle="จังหวัดราชบุรี"
   menuItems={menuItems}
-  bottomMenuItems={bottomMenu}
-  user={{ firstName: 'Kaimuk', lastName: 'Jakprim' }}
+  user={{ firstName: 'สมชาย', lastName: 'ใจดี' }}
   roleLabel="เจ้าหน้าที่"
   currentPath="/services/water"
   onNavigate={(path) => router.push(path)}
   onLogout={() => signOut()}
-  collapsible           // ← เปิดโหมดพับ/กาง
+  collapsible
 />
 ```
 
-**Features:**
-- ✅ Dropdown submenu (พับ/กาง)
+> **💡 ข้อมูลองค์กร (`orgLogo`, `orgName`, `orgSubtitle`) มาจากไหนก็ได้:**
+> - ดึงจาก **ตัวกลาง SSO** หลังล็อกอิน (แนะนำ) เช่น `useSSOAuth().organization`
+> - ดึงจาก **API** เช่น `fetchOrgInfo()`
+> - **Fix ค่า** ตรงๆ ก็ได้ ถ้าใช้ระบบเดียว
+>
+> Library ไม่ผูกกับแหล่งข้อมูลใดๆ — แค่รับ props แล้วแสดงผล
+
+### Default Bottom Menu
+
+ไม่ต้องตั้งค่าเอง — มี **ตั้งค่าระบบ** + **ช่วยเหลือ** อยู่ด้านล่างอัตโนมัติ
+
+```
+งานบริการ ▽
+  ประปา / ภาษี / ทะเบียน
+──────────────
+จัดการผู้ใช้
+รายงาน
+ตั้งค่าระบบ    ← default (ไม่ต้องส่ง)
+ช่วยเหลือ     ← default (ไม่ต้องส่ง)
+      ↕ spacer
+โปรไฟล์ + ออกจากระบบ
+```
+
+ถ้าอยากเปลี่ยน bottom menu เอง:
+
+```tsx
+<StaffSidebar
+  bottomMenuItems={[
+    { id: 'settings', title: 'ตั้งค่า', icon: <GearIcon />, path: '/settings' },
+  ]}
+  ...
+/>
+```
+
+ถ้าไม่อยากมี bottom menu:
+
+```tsx
+<StaffSidebar bottomMenuItems={[]} ... />
+```
+
+### Props ทั้งหมด
+
+| Prop | Type | Default | คำอธิบาย |
+|------|------|---------|----------|
+| `orgLogo` | `string?` | - | URL รูปตราองค์กร |
+| `orgName` | `string` | **required** | ชื่อองค์กร |
+| `orgSubtitle` | `string?` | - | ชื่อรอง เช่น จังหวัด |
+| `menuItems` | `MenuItem[]` | **required** | เมนูหลัก |
+| `bottomMenuItems` | `MenuItem[]?` | ตั้งค่าระบบ + ช่วยเหลือ | เมนูด้านล่าง |
+| `user` | `User \| null` | **required** | ข้อมูลผู้ใช้ |
+| `roleLabel` | `string` | **required** | ป้ายตำแหน่ง เช่น "เจ้าหน้าที่" |
+| `onNavigate` | `(path) => void` | **required** | callback เมื่อคลิกเมนู |
+| `onLogout` | `() => void` | **required** | callback ออกจากระบบ |
+| `currentPath` | `string?` | - | path ปัจจุบัน (highlight active) |
+| `width` | `string?` | `'280px'` | ความกว้าง sidebar |
+| `collapsible` | `boolean?` | `false` | เปิดโหมดพับ/กาง |
+| `isOpen` | `boolean?` | - | controlled open/close |
+| `onToggle` | `() => void?` | - | callback เมื่อกดพับ/กาง |
+
+### Features
+
+- ✅ Dropdown submenu (พับ/กางอัตโนมัติ)
 - ✅ Auto-expand เมื่อ child active
 - ✅ Active item highlight
-- ✅ Bottom menu (ตั้งค่าระบบ)
-- ✅ User profile + logout ข้างล่าง
-- ✅ **Collapsible** — พับเป็น icon-only 64px, กางเป็น 280px
-  - ปุ่ม toggle อยู่ขอบขวาบน (10%) ของ sidebar
-  - Tooltip แสดงชื่อเมนูเมื่อพับ
+- ✅ Collapsible — พับเป็น icon-only 64px, กางเป็น 280px
+- ✅ Tooltip เมื่อพับ
+- ✅ Default ตั้งค่าระบบ + ช่วยเหลือ (override ได้)
+- ✅ โปรไฟล์ + ออกจากระบบ ล่างสุดเสมอ
+- ✅ `dividerAfter` เส้นคั่นระหว่างกลุ่ม
 
 ---
 
-### 2. UserHeader (ผู้ใช้ทั่วไป)
+## 2. UserHeader (ผู้ใช้ทั่วไป)
 
-Header ด้านบนพร้อม notification bell — badge แสดง 99+ เมื่อเกิน 99
+Header ด้านบนพร้อม notification bell
 
 ```tsx
 import { UserHeader } from 'gov-layout';
 
-const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-
 <UserHeader
-  user={{ firstName: 'Kaimuk', pictureUrl: '/avatar.jpg' }}
+  user={{ firstName: 'สมหญิง', pictureUrl: '/avatar.jpg' }}
   notifications={[
     {
       id: 1,
@@ -93,22 +165,24 @@ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
       isRead: false,
     },
   ]}
-  onToggleSidebar={() => setIsSidebarOpen(true)}
+  onToggleSidebar={() => setOpen(true)}
   onMarkAllRead={() => markAllRead()}
   onViewAll={() => router.push('/notifications')}
 />
 ```
 
-**Features:**
-- ✅ Notification bell พร้อม badge (แสดง 99+ เมื่อเกิน 99)
-- ✅ Notification dropdown แบบ scroll ได้
-- ✅ ปุ่มเปิด sidebar
+### Features
+
+- ✅ Notification bell พร้อม badge (99+ เมื่อเกิน)
+- ✅ ไม่มีแจ้งเตือน → ไม่แสดง badge
+- ✅ Notification dropdown แบบ scroll
+- ✅ ปุ่มเปิด sidebar (☰)
 
 ---
 
-### 3. UserSidebar (ผู้ใช้ทั่วไป)
+## 3. UserSidebar (ผู้ใช้ทั่วไป)
 
-Sidebar ฝั่งขวาแบบ slide-in
+Sidebar ฝั่งขวาแบบ slide-in + overlay
 
 ```tsx
 import { UserSidebar } from 'gov-layout';
@@ -116,39 +190,39 @@ import { UserSidebar } from 'gov-layout';
 <UserSidebar
   isOpen={isSidebarOpen}
   onClose={() => setIsSidebarOpen(false)}
-  user={{ firstName: 'Kaimuk', lastName: 'Jakprim', pictureUrl: '/avatar.jpg' }}
-  roleLabel="ผู้สูงอายุ"        // ← กำหนดตาม role ของแต่ละระบบ
+  user={{ firstName: 'สมหญิง', lastName: 'ใจดี', pictureUrl: '/avatar.jpg' }}
+  roleLabel="ผู้สูงอายุ"
   menuItems={[
     { id: 'profile', title: 'ข้อมูลส่วนตัว', icon: <UserIcon />, path: '/profile' },
     { id: 'services', title: 'บริการหลัก', icon: <HomeIcon />, path: '/services' },
-    { id: 'settings', title: 'ตั้งค่าระบบ', icon: <SettingsIcon />, path: '/settings' },
+    { id: 'settings', title: 'ตั้งค่าระบบ', icon: <GearIcon />, path: '/settings' },
   ]}
   onNavigate={(path) => router.push(path)}
   onLogout={() => signOut()}
 />
 ```
 
-> **หมายเหตุ:** `roleLabel` ไม่ได้ fix ไว้ แต่ละระบบส่งค่าเองได้ เช่น "ผู้สูงอายุ", "ผู้ใช้ปกติ", "อาสาสมัคร"
+> **หมายเหตุ:** `roleLabel` แต่ละระบบส่งค่าเองได้ เช่น "ผู้สูงอายุ", "ผู้ใช้ปกติ", "อาสาสมัคร"
 
 ---
 
-### 4. SettingsPanel (ตั้งค่าระบบ) 🆕
+## 4. SettingsPanel (ตั้งค่าระบบ) 🆕
 
-หน้าตั้งค่าพร้อมปรับขนาดตัวอักษร (5 ระดับ) + โหมดสว่าง/มืด
+ปรับขนาดตัวอักษร (5 ระดับ) + โหมดสว่าง/มืด — ค่าจำใน localStorage
 
-#### ขั้นตอนการใช้งาน
-
-**1) ครอบ `SettingsProvider` ที่ root layout:**
+### ขั้นตอนที่ 1: ครอบ SettingsProvider
 
 ```tsx
-// app/providers.tsx — ต้องเป็น 'use client'
+// app/providers.tsx ← ต้องเป็น 'use client'
 'use client';
 import { SettingsProvider } from 'gov-layout';
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return <SettingsProvider>{children}</SettingsProvider>;
 }
+```
 
+```tsx
 // app/layout.tsx
 import Providers from './providers';
 
@@ -163,97 +237,87 @@ export default function RootLayout({ children }) {
 }
 ```
 
-**2) วาง `SettingsPanel` ในหน้าตั้งค่า:**
+### ขั้นตอนที่ 2: วาง SettingsPanel
 
 ```tsx
 import { SettingsPanel } from 'gov-layout';
 
-// ผู้ใช้ทั่วไป — ได้ทั้ง font + theme
+// ผู้ใช้ทั่วไป → ทั้ง font + theme
 <SettingsPanel />
 
-// เจ้าหน้าที่ — แค่ปรับขนาดฟอนต์
+// เจ้าหน้าที่ → แค่ปรับขนาดฟอนต์
 <SettingsPanel showTheme={false} />
 ```
 
-**3) ใช้ `useSettings()` hook ถ้าอยากอ่าน/เปลี่ยนค่าเอง:**
+| Prop | Type | Default | คำอธิบาย |
+|------|------|---------|----------|
+| `showTheme` | `boolean?` | `true` | แสดงตัวเลือกโหมดสว่าง/มืด |
+| `className` | `string?` | - | className เพิ่มเติม |
+
+### ขั้นตอนที่ 3: ใช้ useSettings() hook (ถ้าต้องการ)
 
 ```tsx
 import { useSettings } from 'gov-layout';
 
 function MyComponent() {
-  const { theme, toggleTheme, fontSize, setFontSize } = useSettings();
-  return <p>ธีม: {theme} | ฟอนต์: {fontSize}</p>;
-}
-```
-
-#### ขนาดตัวอักษร (5 ระดับ)
-
-| ค่า | Label | Scale |
-|-----|-------|-------|
-| `xsmall` | เล็กมาก | ×0.8 |
-| `small` | เล็ก | ×0.9 |
-| `medium` | กลาง (default) | ×1.0 |
-| `large` | ใหญ่ | ×1.2 |
-| `xlarge` | ใหญ่มาก | ×1.4 |
-
-#### หลักการทำงาน
-
-- **Theme** — เพิ่ม/ลบ class `dark` บน `<html>` → ใช้ CSS `html.dark` selector จัดสี
-- **Font size** — ปรับ `body.style.zoom`, `root.style.fontSize`, design token CSS variables ตาม scale
-- ค่าเก็บใน **localStorage** (`app-theme`, `app-font-size`) จำค่าได้เมื่อ reload
-
-#### Dark mode CSS ที่ต้องเพิ่มในโปรเจกต์
+  const { theme, toggleTheme, fontSize, setFontSize, fontSizeOption } = useSettings();
 
-```css
-/* globals.css */
-html.dark body { background-color: #0f172a; color: #f1f5f9; }
-html.dark aside { background-color: #1e293b !important; }
-html.dark header { background-color: #1e293b !important; }
-html.dark h1, html.dark h2, html.dark h3 { color: #f1f5f9 !important; }
-html.dark p { color: #94a3b8 !important; }
+  return (
+    <div>
+      <p>ธีม: {theme}</p>
+      <p>ฟอนต์: {fontSize} (×{fontSizeOption.scale})</p>
+      <button onClick={toggleTheme}>สลับธีม</button>
+      <button onClick={() => setFontSize('large')}>ฟอนต์ใหญ่</button>
+    </div>
+  );
+}
 ```
 
----
+### ขนาดตัวอักษร (5 ระดับ)
 
-## 🔧 Sub-Components
-
-ใช้แยกกันได้ถ้าต้องการ customize
-
-```tsx
-import {
-  SidebarHeader,     // logo + ชื่อองค์กร
-  SidebarMenu,       // เมนู dropdown
-  SidebarUserProfile // avatar + logout
-} from 'gov-layout';
-```
+| ค่า | Label | Scale | ผลลัพธ์ |
+|-----|-------|-------|---------|
+| `xsmall` | เล็กมาก | ×0.8 | ย่อทุกอย่าง 80% |
+| `small` | เล็ก | ×0.9 | ย่อเล็กน้อย |
+| `medium` | กลาง | ×1.0 | ค่าเริ่มต้น |
+| `large` | ใหญ่ | ×1.2 | ขยาย 120% |
+| `xlarge` | ใหญ่มาก | ×1.4 | ขยาย 140% |
 
----
+### หลักการทำงาน
 
-## 🎨 Styling
+- **Theme** — เพิ่ม/ลบ class `dark` บน `<html>` ➜ ใช้ CSS `html.dark` จัดสี
+- **Font size** — ปรับ `body.style.zoom` + CSS variables ตาม scale
+- **Persistence** — เก็บใน localStorage (`app-theme`, `app-font-size`)
 
-Components ใช้ **inline styles** + CSS variables จาก `gov-token-css`:
+### Dark mode CSS ที่ต้องเพิ่ม
 
 ```css
-/* ใน globals.css */
-@import "gov-token-css";
+/* globals.css — เพิ่มสำหรับ dark mode */
+html.dark body          { background-color: #0f172a; color: #f1f5f9; }
+html.dark aside         { background-color: #1e293b !important; }
+html.dark header        { background-color: #1e293b !important; }
+html.dark h1,
+html.dark h2,
+html.dark h3            { color: #f1f5f9 !important; }
+html.dark p             { color: #94a3b8 !important; }
 ```
 
-ถ้าไม่ได้ import `gov-token-css` จะใช้สี fallback อัตโนมัติ
-
 ---
 
 ## 📐 Types
 
 ```ts
+// เมนู
 interface MenuItem {
   id: string;
   title: string;
-  path?: string;
-  icon?: React.ReactNode;
-  children?: MenuItem[];    // submenu
-  dividerAfter?: boolean;   // เส้นคั่น
+  path?: string;           // path สำหรับ navigate
+  icon?: React.ReactNode;  // icon component
+  children?: MenuItem[];   // submenu → แสดงเป็น dropdown
+  dividerAfter?: boolean;  // เส้นคั่นด้านล่าง
 }
 
+// ผู้ใช้
 interface User {
   id?: string | number;
   firstName?: string;
@@ -262,6 +326,7 @@ interface User {
   role?: string;
 }
 
+// การแจ้งเตือน
 interface NotificationItem {
   id: string | number;
   title: string;
@@ -271,36 +336,109 @@ interface NotificationItem {
   isRead: boolean;
 }
 
+// ตั้งค่า
 type Theme = 'light' | 'dark';
 type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 ```
 
 ---
 
-## 📁 Layout Example
+## 📁 Layout Examples
+
+### Staff Layout (เจ้าหน้าที่)
 
 ```tsx
-// Staff Layout (เจ้าหน้าที่)
+'use client';
+import { StaffSidebar, SettingsPanel } from 'gov-layout';
+
 export default function AdminLayout({ children }) {
+  const [currentPath, setCurrentPath] = useState('/');
+
   return (
     <div style={{ display: 'flex' }}>
-      <StaffSidebar collapsible ... />
-      <main style={{ marginLeft: '280px', flex: 1 }}>
-        {children}
+      <StaffSidebar
+        orgLogo="/logo.png"
+        orgName="เทศบาลตำบลหลักเมือง"
+        orgSubtitle="จังหวัดราชบุรี"
+        menuItems={menuItems}
+        user={user}
+        roleLabel="เจ้าหน้าที่"
+        currentPath={currentPath}
+        onNavigate={(path) => setCurrentPath(path)}
+        onLogout={() => signOut()}
+        collapsible
+      />
+      <main style={{ marginLeft: 280, flex: 1, padding: 32 }}>
+        {currentPath === '/settings' ? (
+          <SettingsPanel showTheme={false} />
+        ) : (
+          children
+        )}
       </main>
     </div>
   );
 }
+```
+
+### User Layout (ผู้ใช้ทั่วไป)
+
+```tsx
+'use client';
+import { UserHeader, UserSidebar, SettingsPanel } from 'gov-layout';
 
-// User Layout (ผู้ใช้ทั่วไป)
 export default function UserLayout({ children }) {
   const [open, setOpen] = useState(false);
+  const [currentPath, setCurrentPath] = useState('/');
+
   return (
     <>
-      <UserHeader onToggleSidebar={() => setOpen(true)} ... />
-      <UserSidebar isOpen={open} onClose={() => setOpen(false)} ... />
-      <main>{children}</main>
+      <UserHeader
+        user={user}
+        notifications={notifications}
+        onToggleSidebar={() => setOpen(true)}
+      />
+      <UserSidebar
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        user={user}
+        roleLabel="ผู้ใช้ทั่วไป"
+        menuItems={menuItems}
+        onNavigate={(path) => setCurrentPath(path)}
+        onLogout={() => signOut()}
+      />
+      <main style={{ padding: 32 }}>
+        {currentPath === '/settings' ? (
+          <SettingsPanel showTheme={true} />
+        ) : (
+          children
+        )}
+      </main>
     </>
   );
 }
 ```
+
+---
+
+## 🔧 Sub-Components
+
+ใช้แยกกันได้ถ้าต้องการ customize เฉพาะส่วน
+
+```tsx
+import {
+  SidebarHeader,      // logo + ชื่อองค์กร
+  SidebarMenu,        // เมนู dropdown
+  SidebarUserProfile, // avatar + logout
+  ThemeSettings,      // UI เลือก theme อย่างเดียว
+  FontSizeSettings,   // UI เลือก font size อย่างเดียว
+} from 'gov-layout';
+```
+
+---
+
+## 🎨 Styling
+
+- Components ใช้ **inline styles** + CSS variables จาก `gov-token-css`
+- ถ้าไม่ได้ import `gov-token-css` จะใช้สี **fallback** อัตโนมัติ
+- Dark mode ต้องเพิ่ม CSS เอง (ดู section Dark mode CSS ด้านบน)
+- Font size ใช้ `body.style.zoom` → scale ทุกอย่างรวมถึง inline `px`

package/dist/index.js

@@ -227,7 +227,6 @@ function MenuItemComponent({
 }
 function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { style: {
-    flex: collapsed ? void 0 : 1,
     padding: collapsed ? "8px 8px" : "8px 12px",
     overflowY: "auto"
   }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { style: {
@@ -563,6 +562,7 @@ function StaffSidebar({
               collapsed
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
           /* @__PURE__ */ jsxRuntime.jsx(
             SidebarUserProfile,
             {