@exotic-holidays/ui 0.1.0

package/src/components/DashboardLayout.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { Menu, X } from 'lucide-react';
+import { UserMenu } from './UserMenu';
+import { cn } from '../helpers/cn';
+
+export type NavIcon = React.ComponentType<{ size?: number; className?: string; strokeWidth?: number }>;
+
+export interface NavItem {
+  label: string;
+  href: string;
+  icon?: NavIcon;
+  permission?: string;
+}
+
+export interface NavGroup {
+  id: string;
+  label?: string;
+  items: NavItem[];
+}
+
+export interface NavSection {
+  id: string;
+  label: string;
+  icon: NavIcon;
+  groups: NavGroup[];
+}
+
+export interface DashboardBrand {
+  logo: React.ReactNode;
+  title: string;
+  subtitle?: string;
+}
+
+export interface DashboardUser {
+  name: string;
+  role: string;
+  initials: string;
+}
+
+export interface DashboardLayoutProps {
+  brand: DashboardBrand;
+  sections: NavSection[];
+  user: DashboardUser;
+  onLogout: () => void;
+  hasPermission?: (permission: string) => boolean;
+  card?: boolean;
+  topbarRight?: React.ReactNode;
+  /** Optional override for the pathname used to determine the active navigation item. */
+  activePathname?: string;
+  /** Optional override to strictly highlight a specific item by its exact href. */
+  activeItemHref?: string;
+  children: React.ReactNode;
+}
+
+const isActiveHref = (pathname: string, href: string) =>
+  pathname === href || pathname.startsWith(`${href}/`);
+
+export function DashboardLayout({
+  brand,
+  sections,
+  user,
+  onLogout,
+  hasPermission,
+  card = true,
+  topbarRight,
+  activePathname,
+  activeItemHref: activeItemHrefOverride,
+  children,
+}: DashboardLayoutProps) {
+  const nextPathname = usePathname() || '';
+  const pathname = activePathname ?? nextPathname;
+  const router = useRouter();
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  // Permission-filter items, then drop empty groups and empty sections.
+  const visibleSections = useMemo(() => {
+    const allow = (perm?: string) => !perm || !hasPermission || hasPermission(perm);
+    return sections
+      .map((section) => ({
+        ...section,
+        groups: section.groups
+          .map((group) => ({ ...group, items: group.items.filter((i) => allow(i.permission)) }))
+          .filter((group) => group.items.length > 0),
+      }))
+      .filter((section) => section.groups.length > 0);
+  }, [sections, hasPermission]);
+
+  // Active section/item = the one owning the longest href match for the current
+  // path. Picking a single longest match (rather than letting every item whose
+  // href is a prefix of the pathname claim "active" independently) is what
+  // keeps a parent route like `/hotels` from also lighting up alongside a more
+  // specific child route like `/hotels/new`.
+  const { activeSectionId, activeItemHref } = useMemo(() => {
+    if (activeItemHrefOverride) {
+      for (const section of visibleSections) {
+        for (const group of section.groups) {
+          for (const item of group.items) {
+            if (item.href === activeItemHrefOverride) {
+              return { activeSectionId: section.id, activeItemHref: activeItemHrefOverride };
+            }
+          }
+        }
+      }
+    }
+
+    let bestSectionId = visibleSections[0]?.id ?? '';
+    let bestHref = '';
+    let bestLen = -1;
+    for (const section of visibleSections) {
+      for (const group of section.groups) {
+        for (const item of group.items) {
+          if (isActiveHref(pathname, item.href) && item.href.length > bestLen) {
+            bestLen = item.href.length;
+            bestSectionId = section.id;
+            bestHref = item.href;
+          }
+        }
+      }
+    }
+    return { activeSectionId: bestSectionId, activeItemHref: bestHref };
+  }, [visibleSections, pathname, activeItemHrefOverride]);
+
+  // Rail clicks can preview a section without navigating; default to the active one.
+  const [openSectionId, setOpenSectionId] = useState(activeSectionId);
+  useEffect(() => setOpenSectionId(activeSectionId), [activeSectionId]);
+
+  const activeSection =
+    visibleSections.find((s) => s.id === openSectionId) ?? visibleSections[0];
+
+  const itemLink = (item: NavItem, onNavigate?: () => void) => {
+    const active = item.href === activeItemHref;
+    const Icon = item.icon;
+    return (
+      <Link
+        key={item.href}
+        href={item.href}
+        onClick={onNavigate}
+        aria-current={active ? 'page' : undefined}
+        className={cn(
+          'flex items-center gap-2.5 px-2 py-2 rounded-[8px] text-[13px] transition-colors',
+          active
+            ? 'bg-surface-0 text-foreground-0 font-semibold'
+            : 'text-foreground-muted font-medium hover:bg-surface-hover hover:text-foreground-0',
+        )}
+      >
+        {Icon && (
+          <Icon
+            size={16}
+            className={cn('shrink-0', active ? 'text-primary' : 'text-current')}
+            strokeWidth={active ? 2.3 : 2}
+          />
+        )}
+        <span className="truncate">{item.label}</span>
+      </Link>
+    );
+  };
+
+  return (
+    <div className="flex flex-col w-full h-screen bg-surface-0 overflow-hidden">
+      {/* ── Top Header (Full width) ──────────────────────────────────── */}
+      <header className="hidden md:flex items-center justify-between px-6 py-3 bg-surface-1 border-b border-border-subtle shrink-0 z-40">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-8 flex items-center justify-center shrink-0">{brand.logo}</div>
+          <span className="text-[1.1rem] font-extrabold tracking-tight text-foreground-0">{brand.title}</span>
+          {brand.subtitle && (
+            <span className="text-[0.65rem] text-foreground-muted font-bold uppercase tracking-[1.2px] ml-2 mt-1">
+              {brand.subtitle}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-4">
+          {topbarRight}
+          <div className="border-l border-border-subtle pl-4">
+            <UserMenu name={user.name} role={user.role} initials={user.initials} onLogout={onLogout} headerMode={true} />
+          </div>
+        </div>
+      </header>
+
+      {/* Mobile header */}
+      <header className="md:hidden flex items-center justify-between px-4 py-3 bg-surface-1 border-b border-border-subtle shrink-0 z-40">
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 flex items-center justify-center">{brand.logo}</div>
+          <span className="text-sm font-extrabold tracking-tight text-foreground-0">{brand.title}</span>
+        </div>
+        <button
+          type="button"
+          onClick={() => setMobileOpen(true)}
+          aria-label="Open menu"
+          className="p-1.5 rounded-lg text-foreground-muted hover:bg-surface-hover hover:text-foreground-0 transition-colors cursor-pointer"
+        >
+          <Menu size={22} />
+        </button>
+      </header>
+
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* ── Icon rail (top-level sections) ───────────────────────────── */}
+        <aside className="hidden md:flex w-[80px] bg-surface-1 border-r border-border-subtle flex-col items-center py-4 shrink-0 z-20">
+
+          <nav className="flex flex-col gap-1.5 flex-1 w-full px-1.5">
+            {visibleSections.map((section) => {
+              const active = section.id === activeSection?.id;
+              const Icon = section.icon;
+              const firstHref = section.groups[0]?.items[0]?.href;
+              return (
+                <Link
+                  key={section.id}
+                  href={firstHref ?? '#'}
+                  onClick={() => setOpenSectionId(section.id)}
+                  title={section.label}
+                  aria-current={active ? 'true' : undefined}
+                  className={cn(
+                    'group flex flex-col items-center justify-center gap-1.5 py-2.5 rounded-lg transition-colors cursor-pointer',
+                    active
+                      ? 'bg-surface-hover text-primary'
+                      : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground-0 ',
+                  )}
+                >
+                  <Icon size={22} strokeWidth={active ? 1.7 : 1.5} />
+                  <span className={cn('text-[9px] leading-tight font-semibold text-center px-0.5', active ? 'text-foreground-0' : '')}>
+                    {section.label}
+                  </span>
+                </Link>
+              );
+            })}
+          </nav>
+
+        </aside>
+
+        {/* ── Contextual sidebar (active section's groups) ─────────────── */}
+        {activeSection && (
+          <aside className="hidden md:flex w-[240px] bg-surface-1 border-r border-border-subtle flex-col py-6 shrink-0 z-10">
+            {/* <div className="px-6 mb-6">
+              <h1 className="text-[1.2rem] font-extrabold tracking-tight text-foreground-0 truncate">
+                {activeSection.label}
+              </h1>
+            </div> */}
+
+            <nav className="flex-1 overflow-y-auto px-4 flex flex-col gap-6">
+              {activeSection.groups.map((group) => (
+                <div key={group.id} className="flex flex-col gap-1">
+                  {group.label && (
+                    <div className="px-2 pb-2 text-[11px] font-bold text-foreground-disabled uppercase tracking-wider">
+                      {group.label}
+                    </div>
+                  )}
+                  {group.items.map((item) => itemLink(item))}
+                </div>
+              ))}
+            </nav>
+          </aside>
+        )}
+
+        {/* ── Main column ──────────────────────────────────────────────── */}
+        <div className="flex-1 flex flex-col min-w-0 overflow-hidden bg-surface-0">
+          <main className="flex-1 overflow-y-auto min-h-0 p-4 md:p-6 lg:p-8">
+            {card ? (
+              <div className="bg-surface-1 border border-border-subtle rounded-2xl min-h-full p-4 md:p-6 lg:p-8 flex flex-col shadow-sm">
+                {children}
+              </div>
+            ) : (
+              children
+            )}
+          </main>
+        </div>
+      </div>
+
+      {/* ── Mobile drawer ────────────────────────────────────────────── */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 flex md:hidden">
+          <div
+            className="fixed inset-0 bg-foreground-0/40 backdrop-blur-sm"
+            onClick={() => setMobileOpen(false)}
+          />
+          <div className="relative flex w-[82%] max-w-[300px] flex-col bg-surface-1 h-full shadow-lg">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-border-subtle">
+              <div className="flex items-center gap-2.5">
+                <div className="w-8 h-8 flex items-center justify-center">{brand.logo}</div>
+                <span className="text-sm font-extrabold tracking-tight text-foreground-0">{brand.title}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => setMobileOpen(false)}
+                aria-label="Close menu"
+                className="p-1.5 rounded-lg text-foreground-muted hover:bg-surface-hover hover:text-foreground-0 transition-colors cursor-pointer"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto py-4 px-3 flex flex-col gap-6">
+              {visibleSections.map((section) => {
+                const Icon = section.icon;
+                return (
+                  <div key={section.id} className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2.5 px-3 mb-1 text-foreground-0 font-bold">
+                      <Icon size={18} strokeWidth={2.4} />
+                      <span className="text-[13px]">{section.label}</span>
+                    </div>
+                    {section.groups.map((group) => (
+                      <div key={group.id} className="flex flex-col gap-0.5 pl-2">
+                        {group.label && (
+                          <div className="px-3 pt-1.5 pb-1 text-[11px] font-semibold text-foreground-disabled uppercase tracking-wider">
+                            {group.label}
+                          </div>
+                        )}
+                        {group.items.map((item) => itemLink(item, () => setMobileOpen(false)))}
+                      </div>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="border-t border-border-subtle p-2.5">
+              <UserMenu name={user.name} role={user.role} initials={user.initials} onLogout={onLogout} />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ListPage.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+import { Filter } from 'lucide-react';
+import { Card } from '../base-components/Card';
+import { Pagination } from '../base-components/Pagination';
+import { Button } from '../base-components/Button';
+import { SearchPopover } from '../base-components/SearchPopover';
+import { FilterPopover } from '../base-components/FilterPopover';
+
+/**
+ * Standardized index / list page scaffold.
+ *
+ * The header row holds the title + a compact action cluster — a search
+ * popover, a filter popover, and the primary action — all inline (the
+ * jewelry-ui arrangement). Below sits a card-wrapped table slot (`children`)
+ * with optional pagination. `toolbarLeft`/`toolbarRight` render a secondary
+ * in-card row for things like tab bars.
+ */
+export interface ListPageProps {
+  title: string;
+  subtitle?: string;
+  /** Primary action element (usually a <Button/>), shown in the header cluster. */
+  action?: React.ReactNode;
+
+  /** Controlled search value. Omit `onSearchChange` to hide the search popover. */
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+
+  /** Filter popover content (Select controls, etc.). Renders a filter popover when set. */
+  filter?: React.ReactNode;
+  /** Show the active-filter indicator dot on the filter trigger. */
+  filterActive?: boolean;
+
+  /** Legacy: a bare Filter button (no popover). Prefer `filter`. */
+  showFilter?: boolean;
+  onFilterClick?: () => void;
+
+  toolbarLeft?: React.ReactNode;
+  toolbarRight?: React.ReactNode;
+
+  /** Wrap content in the standard table Card (default true). Set false for
+   *  card-grid pages so they aren't nested inside another card. */
+  card?: boolean;
+
+  children: React.ReactNode;
+
+  pagination?: {
+    currentPage: number;
+    totalItems: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+  };
+}
+
+export function ListPage({
+  title,
+  subtitle,
+  action,
+  search = '',
+  onSearchChange,
+  searchPlaceholder = 'Search…',
+  filter,
+  filterActive = false,
+  showFilter = false,
+  onFilterClick,
+  toolbarLeft,
+  toolbarRight,
+  card = true,
+  children,
+  pagination,
+}: ListPageProps) {
+  const showSearch = onSearchChange !== undefined;
+  const showToolbar = !!toolbarLeft || !!toolbarRight;
+
+  return (
+    <div className="w-full flex flex-col animate-in fade-in duration-200">
+      <div className="mb-6">
+        <div className="flex items-center justify-between gap-4">
+          <h1 className="text-[22px] sm:text-[26px] font-bold text-foreground-0 tracking-tight min-w-0 truncate">
+            {title}
+          </h1>
+
+          {/* Compact action cluster: search · filter · primary action */}
+          <div className="flex items-center gap-2 shrink-0">
+            {showSearch && (
+              <SearchPopover value={search} onChange={onSearchChange!} placeholder={searchPlaceholder} />
+            )}
+            {filter && <FilterPopover active={filterActive}>{filter}</FilterPopover>}
+            {!filter && showFilter && (
+              <Button
+                variant="bordered"
+                color="default"
+                size="small"
+                icon={<Filter size={15} />}
+                onClick={onFilterClick}
+              >
+                Filter
+              </Button>
+            )}
+            {action}
+          </div>
+        </div>
+
+        {subtitle && (
+          <p className="text-[13px] sm:text-[14px] text-foreground-subtle mt-1">{subtitle}</p>
+        )}
+      </div>
+
+      {card ? (
+        <Card fullWidth variant="flat" className="border border-border-subtle overflow-hidden">
+          {showToolbar && (
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4">
+              <div className="flex items-center gap-2 min-w-0">{toolbarLeft}</div>
+              <div className="flex items-center gap-2">{toolbarRight}</div>
+            </div>
+          )}
+
+          <div className="px-3 sm:px-4 pt-3 pb-2">{children}</div>
+
+          {pagination && <Pagination {...pagination} />}
+        </Card>
+      ) : (
+        <>
+          {showToolbar && (
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
+              <div className="flex items-center gap-2 min-w-0">{toolbarLeft}</div>
+              <div className="flex items-center gap-2">{toolbarRight}</div>
+            </div>
+          )}
+
+          {children}
+
+          {pagination && <div className="mt-4"><Pagination {...pagination} /></div>}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/QuickAccess.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { Grip, X } from 'lucide-react';
+import { cn } from '../helpers/cn';
+
+export interface QuickAccessItem {
+  label: string;
+  href: string;
+  icon: React.ElementType;
+  intent?: 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'default';
+}
+
+export interface QuickAccessGroup {
+  label: string;
+  items: QuickAccessItem[];
+}
+
+export interface QuickAccessProps {
+  groups: QuickAccessGroup[];
+}
+
+const INTENT_CLASSES = {
+  primary: 'bg-primary-50 text-primary-700',
+  accent: 'bg-accent-50 text-accent-700',
+  success: 'bg-success-50 text-success-700',
+  warning: 'bg-warning-50 text-warning-700',
+  danger: 'bg-danger-50 text-danger-700',
+  default: 'bg-surface-hover text-foreground-0',
+};
+
+export function QuickAccess({ groups }: QuickAccessProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onClick = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('mousedown', onClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [isOpen]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen((o) => !o)}
+        className={cn(
+          'p-1.5 rounded-lg transition-colors cursor-pointer',
+          isOpen ? 'bg-primary-50 text-primary-500' : 'text-foreground-muted'
+        )}
+        aria-label="Quick Access"
+      >
+        <Grip size={22} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-2 w-[340px] bg-surface-1 border border-border-subtle rounded-2xl shadow-xl z-50 overflow-hidden flex flex-col">
+          <div className="flex items-center justify-between px-5 py-4">
+            <h3 className="text-[13px] font-extrabold text-foreground-0">Quick Access</h3>
+            <button
+              type="button"
+              onClick={() => setIsOpen(false)}
+              className="p-1 rounded-md text-foreground-muted hover:bg-surface-hover hover:text-foreground-0 transition-colors cursor-pointer"
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          <div className="p-5 pt-1 overflow-y-auto max-h-[60vh] flex flex-col gap-6">
+            {groups.map((group, gIdx) => (
+              <div key={gIdx} className="flex flex-col gap-3">
+                {group.label && (
+                  <div className="text-[10px] font-extrabold text-foreground-disabled uppercase tracking-wider">
+                    {group.label}
+                  </div>
+                )}
+                <div className="grid grid-cols-4 gap-2">
+                  {group.items.map((item, iIdx) => {
+                    const Icon = item.icon;
+                    const intentClass = INTENT_CLASSES[item.intent || 'default'];
+                    return (
+                      <Link
+                        key={iIdx}
+                        href={item.href}
+                        onClick={() => setIsOpen(false)}
+                        className="group flex flex-col items-center gap-2 p-2 rounded-xl hover:bg-surface-hover transition-colors text-center cursor-pointer"
+                      >
+                        <div className={cn('w-12 h-12 flex flex-col items-center justify-center rounded-[12px] transition-colors', intentClass)}>
+                          <Icon size={20} strokeWidth={2} />
+                        </div>
+                        <span className="text-[11px] font-semibold text-foreground-muted group-hover:text-foreground-0 leading-tight">
+                          {item.label}
+                        </span>
+                      </Link>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}