@omnifyjp/shell 0.1.1

package/README.md

@@ -0,0 +1,476 @@
+# @omnifyjp/shell
+
+A production-ready application shell framework for multi-tenant React apps. Provides a complete layout system with collapsible sidebar, header with organization switching, theme management, internationalization (vi/en/ja), and flexible page containers.
+
+Built on top of [`@omnifyjp/ui`](https://www.npmjs.com/package/@omnifyjp/ui) components.
+
+## Installation
+
+```bash
+npm install @omnifyjp/shell
+# This automatically installs @omnifyjp/ui as a dependency
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom react-router
+```
+
+---
+
+## Quick Start
+
+```tsx
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import { AppShell, initOmnifyI18n } from '@omnifyjp/shell';
+import type { ShellConfig } from '@omnifyjp/shell';
+import { LayoutDashboard, Users, Settings } from 'lucide-react';
+
+// 1. Initialize i18n with your service translations
+import enLocale from './locales/en.json';
+import viLocale from './locales/vi.json';
+
+initOmnifyI18n({
+  namespaces: {
+    myapp: { en: enLocale, vi: viLocale },
+  },
+});
+
+// 2. Define shell configuration
+const config: ShellConfig = {
+  app: {
+    name: 'My App',
+    key: 'myapp',
+    logo: { icon: LayoutDashboard, text: 'My App', color: 'text-blue-600' },
+  },
+  sidebar: {
+    menuItems: [
+      { icon: LayoutDashboard, label: 'Dashboard', path: '/' },
+      { icon: Users, label: 'Users', path: '/users' },
+      { icon: Settings, label: 'Settings', path: '/settings' },
+    ],
+  },
+  header: {
+    user: {
+      name: 'John Doe',
+      email: 'john@example.com',
+      onLogout: () => console.log('logout'),
+    },
+  },
+  organization: {
+    organizations: [
+      { id: '1', name: 'Acme Corp', shortName: 'AC' },
+    ],
+    branches: [
+      { id: '1', name: 'Tokyo Office', organizationId: '1', location: 'Tokyo' },
+      { id: '2', name: 'Hanoi Office', organizationId: '1', location: 'Hanoi' },
+    ],
+  },
+};
+
+// 3. Set up routes with AppShell as the layout
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <AppShell config={config} />,
+    children: [
+      { index: true, element: <Dashboard /> },
+      { path: 'users', element: <Users /> },
+      { path: 'settings', element: <Settings /> },
+    ],
+  },
+]);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+```
+
+---
+
+## Core Components
+
+### AppShell
+
+The main application wrapper. Combines `ThemeProvider` + `I18nextProvider` + `OrganizationProvider`, then renders the sidebar, header, and a React Router `<Outlet />`.
+
+```tsx
+import { AppShell } from '@omnifyjp/shell';
+
+<AppShell config={config} extra={<ChatWidget />} />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `config` | `ShellConfig` | Full shell configuration (see below) |
+| `extra` | `ReactNode` | Optional floating elements (e.g., chat widget) |
+
+### Sidebar
+
+Collapsible left navigation with context switching, expandable groups, and tooltips when collapsed.
+
+Features:
+- Logo area with app icon
+- Main menu items with nested groups
+- Context switching popover (e.g., project switcher with search)
+- Recent items section
+- Collapse/expand toggle
+- Organization selector badge
+
+### Header
+
+Top navigation bar with:
+- Organization/branch selector
+- Service menu (grid of available apps)
+- Global search input
+- Notification dropdown with count badge
+- Custom action buttons
+- User menu (profile, settings, logout)
+
+### PageContainer
+
+Flexible page layout wrapper with three variants:
+
+```tsx
+import {
+  StandardPageContainer,
+  SplitPageContainer,
+  FullWidthPageContainer,
+} from '@omnifyjp/shell';
+
+// Standard — padded page with title bar
+<StandardPageContainer title="Users" subtitle="Manage team members" extra={<Button>Add User</Button>}>
+  <UserTable />
+</StandardPageContainer>
+
+// Split — two-column layout with sidebar
+<SplitPageContainer title="Settings" sidebar={<SettingsNav />} sidebarPosition="left">
+  <SettingsForm />
+</SplitPageContainer>
+
+// Full width — no padding (for Kanban boards, Gantt charts)
+<FullWidthPageContainer>
+  <KanbanBoard />
+</FullWidthPageContainer>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | — | Page heading |
+| `subtitle` | `string` | — | Description text below title |
+| `extra` | `ReactNode` | — | Header actions (buttons, etc.) |
+| `children` | `ReactNode` | — | Main content |
+| `footer` | `ReactNode` | — | Footer content |
+| `variant` | `'standard' \| 'split' \| 'full'` | `'standard'` | Layout mode |
+| `sidebar` | `ReactNode` | — | Sidebar content (split mode) |
+| `sidebarPosition` | `'left' \| 'right'` | `'right'` | Sidebar placement |
+| `sidebarWidth` | `string` | `'w-80'` | Sidebar Tailwind width class |
+
+### OrganizationSelector
+
+Two-step modal for switching organizations and branches:
+
+1. **Step 1**: Select organization (shows description + branch count)
+2. **Step 2**: Select branch (searchable, shows location)
+
+```tsx
+import { OrganizationSelector } from '@omnifyjp/shell';
+
+<OrganizationSelector variant="header" />  // in header
+<OrganizationSelector variant="sidebar" /> // in sidebar
+```
+
+### ServiceMenu
+
+Searchable dropdown grid listing all available services/apps:
+
+```tsx
+const config: ShellConfig = {
+  services: [
+    {
+      category: 'HR',
+      items: [
+        { icon: Users, label: 'Attendance', url: '/attendance', color: 'bg-blue-600' },
+        { icon: Calendar, label: 'Leave', url: '/leave', color: 'bg-green-600' },
+      ],
+    },
+  ],
+};
+```
+
+---
+
+## Configuration: `ShellConfig`
+
+```typescript
+interface ShellConfig {
+  app: {
+    name: string;                    // App display name
+    key: string;                     // App identifier
+    logo: {
+      icon: LucideIcon;             // Logo icon
+      text: string;                  // Logo text
+      color?: string;                // Icon color class
+    };
+  };
+
+  sidebar: {
+    menuItems: SidebarMenuItem[];    // Navigation items
+    contextMenu?: {                  // Context switcher (e.g., project selector)
+      paramName: string;             // URL param name
+      getItems: () => ContextItem[];
+      getHeader?: () => ReactNode;
+      getFooterItems?: () => ContextItem[];
+    };
+    recentItems?: {                  // Recent items section
+      title: string;
+      items: { label: string; path: string; badge?: string; color?: string }[];
+    };
+    footer?: ReactNode;              // Custom sidebar footer
+  };
+
+  services?: ServiceCategory[];      // Service menu grid
+
+  header?: {
+    searchPlaceholder?: string;
+    showSearch?: boolean;            // Default: true
+    actions?: ReactNode;             // Custom header buttons
+    notifications?: {
+      count: number;
+      content: ReactNode;
+    };
+    user?: {
+      name: string;
+      email?: string;
+      avatar?: string;
+      onLogout?: () => void;
+    };
+  };
+
+  organization?: {
+    organizations: Organization[];
+    branches: Branch[];
+    onOrganizationChange?: (org: Organization) => void;
+    onBranchChange?: (branch: Branch) => void;
+  };
+}
+```
+
+### SidebarMenuItem
+
+```typescript
+interface SidebarMenuItem {
+  icon: LucideIcon;
+  label: string;
+  path?: string;                     // Omit for collapsible groups
+  badge?: number;                    // Notification count
+  children?: SidebarMenuItem[];      // Nested items
+}
+```
+
+---
+
+## Context Providers
+
+### ThemeProvider
+
+Dark mode management with system preference detection:
+
+```tsx
+import { useTheme } from '@omnifyjp/shell';
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  // theme: 'light' | 'dark' | 'system'
+
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+      <option value="system">System</option>
+    </select>
+  );
+}
+```
+
+Persists selection to `localStorage.omnify_theme`.
+
+### OrganizationProvider
+
+Multi-tenant organization/branch management:
+
+```tsx
+import { useOrganization } from '@omnifyjp/shell';
+
+function OrgInfo() {
+  const {
+    selectedOrganization,   // Organization | null
+    selectedBranch,         // Branch | null
+    setSelectedOrganization,
+    setSelectedBranch,
+    getBranchesByOrg,       // (orgId: string) => Branch[]
+    isSetupComplete,        // true when both selected
+  } = useOrganization();
+
+  return <p>{selectedOrganization?.name} — {selectedBranch?.name}</p>;
+}
+```
+
+Persists selections to `localStorage.selectedOrganizationId` and `localStorage.selectedBranchId`.
+
+---
+
+## i18n (Internationalization)
+
+### Supported Languages
+
+| Code | Language |
+|------|----------|
+| `vi` | Tieng Viet (default, fallback) |
+| `en` | English |
+| `ja` | Japanese |
+
+### Shell Namespace
+
+The shell comes pre-loaded with translations for common UI strings: sidebar labels, header actions, status/priority names, settings pages, login forms, organization selection, date picker, etc.
+
+### Adding Service Translations
+
+```tsx
+import { initOmnifyI18n } from '@omnifyjp/shell';
+
+// Add your service namespace
+initOmnifyI18n({
+  namespaces: {
+    myapp: {
+      en: { dashboard: { title: 'Dashboard' } },
+      vi: { dashboard: { title: 'Bang dieu khien' } },
+      ja: { dashboard: { title: 'dasshubodo' } },
+    },
+  },
+});
+
+// Use in components
+import { useTranslation } from 'react-i18next';
+
+function Dashboard() {
+  const { t } = useTranslation(['myapp', 'shell']);
+  return <h1>{t('dashboard.title')}</h1>;
+  // Falls back to 'shell' namespace for common keys
+}
+```
+
+### Changing Language
+
+```tsx
+import { changeLanguage } from '@omnifyjp/shell';
+
+await changeLanguage('en'); // Persists to localStorage
+```
+
+---
+
+## Hooks
+
+### useDateFormat
+
+Locale-aware date formatting with timezone support:
+
+```tsx
+import { useDateFormat } from '@omnifyjp/shell';
+
+function EventDate({ date }: { date: Date }) {
+  const {
+    formatDate,           // '01/15/2026' (locale-dependent)
+    formatDateTime,       // '01/15/2026 14:30'
+    formatRelativeTime,   // '5 minutes ago'
+    formatShortDate,      // '01/15'
+    formatMonthYear,      // 'January 2026'
+    formatDayOfWeek,      // 'Mon'
+    formatDateLong,       // 'January 15, 2026'
+    timezone,             // 'Asia/Ho_Chi_Minh'
+    setTimezone,          // Change timezone
+    dateFnsLocale,        // date-fns Locale object
+  } = useDateFormat();
+
+  return <time>{formatDateTime(date)}</time>;
+}
+```
+
+Supported timezones: `Asia/Ho_Chi_Minh`, `Asia/Tokyo`, `America/New_York`, `America/Los_Angeles`, `Europe/London`, `UTC`.
+
+---
+
+## Package Exports
+
+```
+@omnifyjp/shell                          → all exports (barrel)
+@omnifyjp/shell/components/AppShell      → AppShell
+@omnifyjp/shell/components/Sidebar       → Sidebar
+@omnifyjp/shell/components/Header        → Header
+@omnifyjp/shell/components/PageContainer → PageContainer, Standard/Split/FullWidth variants
+@omnifyjp/shell/components/ServiceMenu   → ServiceMenu
+@omnifyjp/shell/components/OrganizationSelector → OrganizationSelector
+@omnifyjp/shell/contexts/ThemeContext    → ThemeProvider, useTheme
+@omnifyjp/shell/contexts/OrganizationContext → OrganizationProvider, useOrganization
+@omnifyjp/shell/hooks/useDateFormat      → useDateFormat, timezoneLabels
+@omnifyjp/shell/i18n                     → i18n, initOmnifyI18n, changeLanguage
+@omnifyjp/shell/types                    → ShellConfig, Organization, Branch, etc.
+```
+
+---
+
+## TypeScript
+
+Full type definitions are included. Key types:
+
+```typescript
+import type {
+  ShellConfig,
+  SidebarMenuItem,
+  ServiceCategory,
+  ServiceItem,
+  Organization,
+  Branch,
+  PageContainerProps,
+} from '@omnifyjp/shell';
+```
+
+---
+
+## Dependencies
+
+This package depends on:
+
+| Package | Purpose |
+|---------|---------|
+| `@omnifyjp/ui` | UI component primitives (auto-installed) |
+| `i18next` | Internationalization core |
+| `react-i18next` | React i18n bindings |
+| `date-fns` | Date formatting |
+| `lucide-react` | Icons |
+| `sonner` | Toast notifications |
+
+Peer dependencies (you provide):
+
+| Package | Version |
+|---------|---------|
+| `react` | >=18 |
+| `react-dom` | >=18 |
+| `react-router` | >=7 |
+
+---
+
+## Related Packages
+
+| Package | Description |
+|---------|-------------|
+| [`@omnifyjp/ui`](https://www.npmjs.com/package/@omnifyjp/ui) | 53 Shadcn primitives + 14 domain components |
+| [`@omnifyjp/editor`](https://www.npmjs.com/package/@omnifyjp/editor) | Rich text editors (Tiptap + BlockNote) |
+
+---
+
+## License
+
+MIT

package/dist/chunk-6JYWZJEY.js

@@ -0,0 +1,123 @@
+import { changeLanguage } from './chunk-OMIE3Z5N.js';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { format, formatDistanceToNow } from 'date-fns';
+import { ja, enUS, vi } from 'date-fns/locale';
+
+var timezoneLabels = {
+  "Asia/Ho_Chi_Minh": "(UTC+7) Ho Chi Minh",
+  "Asia/Tokyo": "(UTC+9) Tokyo",
+  "America/New_York": "(UTC-5) New York",
+  "America/Los_Angeles": "(UTC-8) Los Angeles",
+  "Europe/London": "(UTC+0) London",
+  "UTC": "(UTC+0) UTC"
+};
+var dateFnsLocales = {
+  vi: vi,
+  en: enUS,
+  ja: ja
+};
+var dateFormatPatterns = {
+  vi: "dd/MM/yyyy",
+  en: "MM/dd/yyyy",
+  ja: "yyyy/MM/dd"
+};
+var dateTimeFormatPatterns = {
+  vi: "dd/MM/yyyy HH:mm",
+  en: "MM/dd/yyyy HH:mm",
+  ja: "yyyy/MM/dd HH:mm"
+};
+var shortDatePatterns = {
+  vi: "dd/MM",
+  en: "MM/dd",
+  ja: "MM/dd"
+};
+var localeTags = {
+  vi: "vi-VN",
+  en: "en-US",
+  ja: "ja-JP"
+};
+function toDate(d) {
+  return typeof d === "string" ? new Date(d) : d;
+}
+function loadSavedTimezone() {
+  if (typeof window === "undefined") return "Asia/Ho_Chi_Minh";
+  const saved = localStorage.getItem("omnify_timezone");
+  if (saved && saved in timezoneLabels) return saved;
+  return "Asia/Ho_Chi_Minh";
+}
+function useDateFormat() {
+  const { i18n } = useTranslation();
+  const language = i18n.language || "vi";
+  const locale = dateFnsLocales[language] || vi;
+  const [timezone, setTimezoneState] = useState(() => loadSavedTimezone());
+  const setTimezone = useCallback((tz) => {
+    localStorage.setItem("omnify_timezone", tz);
+    setTimezoneState(tz);
+  }, []);
+  const setLanguage = useCallback((lang) => {
+    changeLanguage(lang);
+  }, []);
+  const formatDate = useCallback(
+    (date) => {
+      return format(toDate(date), dateFormatPatterns[language] || "dd/MM/yyyy", { locale });
+    },
+    [language, locale]
+  );
+  const formatDateTime = useCallback(
+    (date) => {
+      return format(toDate(date), dateTimeFormatPatterns[language] || "dd/MM/yyyy HH:mm", { locale });
+    },
+    [language, locale]
+  );
+  const formatRelativeTime = useCallback(
+    (date) => {
+      return formatDistanceToNow(toDate(date), { addSuffix: true, locale });
+    },
+    [locale]
+  );
+  const formatShortDate = useCallback(
+    (date) => {
+      return format(toDate(date), shortDatePatterns[language] || "dd/MM", { locale });
+    },
+    [language, locale]
+  );
+  const formatMonthYear = useCallback(
+    (date) => {
+      return format(toDate(date), "MMMM yyyy", { locale });
+    },
+    [locale]
+  );
+  const formatDayOfWeek = useCallback(
+    (date) => {
+      return format(toDate(date), "EEE", { locale });
+    },
+    [locale]
+  );
+  const formatDateLong = useCallback(
+    (date) => {
+      return format(toDate(date), "PPP", { locale });
+    },
+    [locale]
+  );
+  return {
+    language,
+    timezone,
+    setLanguage,
+    setTimezone,
+    formatDate,
+    formatDateTime,
+    formatRelativeTime,
+    formatShortDate,
+    formatMonthYear,
+    formatDayOfWeek,
+    formatDateLong,
+    dateFnsLocale: locale,
+    localeTag: localeTags[language] || "vi-VN",
+    languageNames: { vi: "Ti\u1EBFng Vi\u1EC7t", en: "English", ja: "\u65E5\u672C\u8A9E" }
+  };
+}
+
+export { timezoneLabels, useDateFormat };
+//# sourceMappingURL=chunk-6JYWZJEY.js.map
+//# sourceMappingURL=chunk-6JYWZJEY.js.map

package/dist/chunk-6JYWZJEY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDateFormat.ts"],"names":["viLocale","jaLocale"],"mappings":"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","file":"chunk-6JYWZJEY.js","sourcesContent":["import { useCallback, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { format, formatDistanceToNow } from 'date-fns';\nimport { vi as viLocale } from 'date-fns/locale';\nimport { enUS } from 'date-fns/locale';\nimport { ja as jaLocale } from 'date-fns/locale';\nimport type { Locale } from 'date-fns';\nimport { changeLanguage } from '../i18n';\nimport type { SupportedLanguage } from '../i18n';\n\nexport type SupportedTimezone =\n  | 'Asia/Ho_Chi_Minh'\n  | 'Asia/Tokyo'\n  | 'America/New_York'\n  | 'America/Los_Angeles'\n  | 'Europe/London'\n  | 'UTC';\n\nexport const timezoneLabels: Record<SupportedTimezone, string> = {\n  'Asia/Ho_Chi_Minh': '(UTC+7) Ho Chi Minh',\n  'Asia/Tokyo': '(UTC+9) Tokyo',\n  'America/New_York': '(UTC-5) New York',\n  'America/Los_Angeles': '(UTC-8) Los Angeles',\n  'Europe/London': '(UTC+0) London',\n  'UTC': '(UTC+0) UTC',\n};\n\nconst dateFnsLocales: Record<SupportedLanguage, Locale> = {\n  vi: viLocale,\n  en: enUS,\n  ja: jaLocale,\n};\n\nconst dateFormatPatterns: Record<SupportedLanguage, string> = {\n  vi: 'dd/MM/yyyy',\n  en: 'MM/dd/yyyy',\n  ja: 'yyyy/MM/dd',\n};\n\nconst dateTimeFormatPatterns: Record<SupportedLanguage, string> = {\n  vi: 'dd/MM/yyyy HH:mm',\n  en: 'MM/dd/yyyy HH:mm',\n  ja: 'yyyy/MM/dd HH:mm',\n};\n\nconst shortDatePatterns: Record<SupportedLanguage, string> = {\n  vi: 'dd/MM',\n  en: 'MM/dd',\n  ja: 'MM/dd',\n};\n\nconst localeTags: Record<SupportedLanguage, string> = {\n  vi: 'vi-VN',\n  en: 'en-US',\n  ja: 'ja-JP',\n};\n\nfunction toDate(d: Date | string): Date {\n  return typeof d === 'string' ? new Date(d) : d;\n}\n\nfunction loadSavedTimezone(): SupportedTimezone {\n  if (typeof window === 'undefined') return 'Asia/Ho_Chi_Minh';\n  const saved = localStorage.getItem('omnify_timezone');\n  if (saved && saved in timezoneLabels) return saved as SupportedTimezone;\n  return 'Asia/Ho_Chi_Minh';\n}\n\n/**\n * Hook that provides date formatting utilities.\n * Reads the current language from i18next automatically.\n */\nexport function useDateFormat() {\n  const { i18n } = useTranslation();\n  const language = (i18n.language || 'vi') as SupportedLanguage;\n  const locale = dateFnsLocales[language] || viLocale;\n\n  const [timezone, setTimezoneState] = useState<SupportedTimezone>(() => loadSavedTimezone());\n\n  const setTimezone = useCallback((tz: SupportedTimezone) => {\n    localStorage.setItem('omnify_timezone', tz);\n    setTimezoneState(tz);\n  }, []);\n\n  const setLanguage = useCallback((lang: SupportedLanguage) => {\n    changeLanguage(lang);\n  }, []);\n\n  const formatDate = useCallback(\n    (date: Date | string): string => {\n      return format(toDate(date), dateFormatPatterns[language] || 'dd/MM/yyyy', { locale });\n    },\n    [language, locale]\n  );\n\n  const formatDateTime = useCallback(\n    (date: Date | string): string => {\n      return format(toDate(date), dateTimeFormatPatterns[language] || 'dd/MM/yyyy HH:mm', { locale });\n    },\n    [language, locale]\n  );\n\n  const formatRelativeTime = useCallback(\n    (date: Date | string): string => {\n      return formatDistanceToNow(toDate(date), { addSuffix: true, locale });\n    },\n    [locale]\n  );\n\n  const formatShortDate = useCallback(\n    (date: Date | string): string => {\n      return format(toDate(date), shortDatePatterns[language] || 'dd/MM', { locale });\n    },\n    [language, locale]\n  );\n\n  const formatMonthYear = useCallback(\n    (date: Date | string): string => {\n      return format(toDate(date), 'MMMM yyyy', { locale });\n    },\n    [locale]\n  );\n\n  const formatDayOfWeek = useCallback(\n    (date: Date | string): string => {\n      return format(toDate(date), 'EEE', { locale });\n    },\n    [locale]\n  );\n\n  const formatDateLong = useCallback(\n    (date: Date | string): string => {\n      return format(toDate(date), 'PPP', { locale });\n    },\n    [locale]\n  );\n\n  return {\n    language,\n    timezone,\n    setLanguage,\n    setTimezone,\n    formatDate,\n    formatDateTime,\n    formatRelativeTime,\n    formatShortDate,\n    formatMonthYear,\n    formatDayOfWeek,\n    formatDateLong,\n    dateFnsLocale: locale,\n    localeTag: localeTags[language] || 'vi-VN',\n    languageNames: { vi: 'Tiếng Việt', en: 'English', ja: '日本語' } as Record<SupportedLanguage, string>,\n  };\n}\n"]}

package/dist/chunk-ACCHC3AM.js

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@omnifyjp/ui/components/button';
+import { Input } from '@omnifyjp/ui/components/input';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem } from '@omnifyjp/ui/components/dropdown-menu';
+import { Grid3X3, Search } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ServiceMenu.tsx
+function ServiceMenu({ categories }) {
+  const [search, setSearch] = useState("");
+  const { t } = useTranslation("shell");
+  const filteredCategories = categories.map((cat) => ({
+    ...cat,
+    items: cat.items.filter(
+      (s) => s.label.toLowerCase().includes(search.toLowerCase())
+    )
+  })).filter((cat) => cat.items.length > 0);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-2", children: [
+      /* @__PURE__ */ jsx(Grid3X3, { className: "w-4 h-4" }),
+      t("header.services")
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[340px] p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: t("header.searchServices"),
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            className: "h-8 pl-8 text-sm"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-[420px] overflow-y-auto p-1", children: filteredCategories.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: t("header.noServiceFound") }) : filteredCategories.map((category) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-medium px-2 py-1.5", children: category.category }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-0.5 px-1 mb-1", children: category.items.map((service) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            className: "flex items-center gap-2.5 px-2 py-2 rounded-md cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${service.color}`, children: /* @__PURE__ */ jsx(service.icon, { className: "w-4 h-4" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: service.label })
+            ]
+          },
+          service.label
+        )) })
+      ] }, category.category)) })
+    ] })
+  ] });
+}
+
+export { ServiceMenu };
+//# sourceMappingURL=chunk-ACCHC3AM.js.map
+//# sourceMappingURL=chunk-ACCHC3AM.js.map

package/dist/chunk-ACCHC3AM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ServiceMenu.tsx"],"names":[],"mappings":"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","file":"chunk-ACCHC3AM.js","sourcesContent":["import { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from '@omnifyjp/ui/components/button';\nimport { Input } from '@omnifyjp/ui/components/input';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '@omnifyjp/ui/components/dropdown-menu';\nimport { Grid3X3, Search } from 'lucide-react';\nimport type { ServiceCategory } from '../types';\n\ninterface ServiceMenuProps {\n  categories: ServiceCategory[];\n}\n\nexport function ServiceMenu({ categories }: ServiceMenuProps) {\n  const [search, setSearch] = useState('');\n  const { t } = useTranslation('shell');\n\n  const filteredCategories = categories\n    .map((cat) => ({\n      ...cat,\n      items: cat.items.filter((s) =>\n        s.label.toLowerCase().includes(search.toLowerCase())\n      ),\n    }))\n    .filter((cat) => cat.items.length > 0);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" className=\"gap-2\">\n          <Grid3X3 className=\"w-4 h-4\" />\n          {t('header.services')}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[340px] p-0\">\n        <div className=\"p-2 border-b\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground\" />\n            <Input\n              placeholder={t('header.searchServices')}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"h-8 pl-8 text-sm\"\n            />\n          </div>\n        </div>\n        <div className=\"max-h-[420px] overflow-y-auto p-1\">\n          {filteredCategories.length === 0 ? (\n            <div className=\"py-6 text-center text-sm text-muted-foreground\">\n              {t('header.noServiceFound')}\n            </div>\n          ) : (\n            filteredCategories.map((category) => (\n              <div key={category.category}>\n                <DropdownMenuLabel className=\"text-xs text-muted-foreground font-medium px-2 py-1.5\">\n                  {category.category}\n                </DropdownMenuLabel>\n                <div className=\"grid grid-cols-2 gap-0.5 px-1 mb-1\">\n                  {category.items.map((service) => (\n                    <DropdownMenuItem\n                      key={service.label}\n                      className=\"flex items-center gap-2.5 px-2 py-2 rounded-md cursor-pointer\"\n                    >\n                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${service.color}`}>\n                        <service.icon className=\"w-4 h-4\" />\n                      </div>\n                      <span className=\"text-sm truncate\">{service.label}</span>\n                    </DropdownMenuItem>\n                  ))}\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"]}