@syuttechnologies/layout 1.0.2 → 1.0.21

package/src/components/ui/ModuleHeader/ModuleHeader.tsx

@@ -0,0 +1,722 @@
+import React, { useState, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import IconSystem from '../../../icon-collection/icon-systems';
+
+/**
+ * ============================================================================
+ * MODULE HEADER COMPONENT - REUSABLE HEADER FOR ALL MASTER SCREENS
+ * ============================================================================
+ *
+ * A flexible, configurable header component that can be used across all
+ * master screens (Service Master, GL Master, Customer Master, etc.)
+ *
+ * FEATURES:
+ * - Configurable title and description
+ * - Optional search functionality
+ * - Flexible view mode toggles (list, grid, calendar, etc.)
+ * - Optional filter button with active count badge
+ * - Custom toolbar items slot (for Column Selector, etc.)
+ * - Configurable action buttons (Add, Refresh, Export, Delete, etc.)
+ * - Responsive design with mobile overflow menu
+ * - Type-safe with TypeScript
+ * - Easy to extend without modifying base component
+ * ============================================================================
+ */
+
+// ============================================================================
+// TYPE DEFINITIONS
+// ============================================================================
+
+/**
+ * Configuration for an individual action button
+ */
+export interface ActionButton {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  tooltip?: string;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'icon' | 'danger';
+  visible?: boolean;
+}
+
+/**
+ * Configuration for view mode options (list, grid, calendar, etc.)
+ */
+export interface ViewModeOption {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Configuration for the search bar
+ */
+export interface SearchConfig {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Configuration for view mode toggle
+ */
+export interface ViewModeConfig {
+  currentMode: string;
+  modes: ViewModeOption[];
+  onChange: (mode: string) => void;
+}
+
+/**
+ * Configuration for the filter button
+ */
+export interface FilterConfig {
+  onClick: () => void;
+  isActive?: boolean;
+  activeCount?: number;
+  badgeCount?: number; // Alias for activeCount for compatibility
+  disabled?: boolean;
+  tooltip?: string;
+}
+
+/**
+ * Main props for the ModuleHeader component
+ */
+export interface ModuleHeaderProps {
+  title: string;
+  description?: string;
+  searchConfig?: SearchConfig;
+  viewModeConfig?: ViewModeConfig;
+  filterConfig?: FilterConfig;
+  customToolbarItems?: React.ReactNode;
+  actions?: ActionButton[];
+  showActionSeparator?: boolean;
+  visible?: boolean;
+  className?: string;
+}
+
+// Inject styles
+if (typeof document !== 'undefined') {
+  const styleId = 'module-header-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .module-header {
+        position: sticky;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.875rem 1.5rem;
+        min-height: 2.75rem;
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(12px);
+        border-radius: 0.75rem;
+        margin: 0.625rem 1.25rem;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        border: 1px solid rgba(226, 232, 240, 0.5);
+        gap: 0.875rem;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+      }
+
+      .module-header-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+      }
+
+      .module-title {
+        font-size: 1.1rem;
+        font-weight: 700;
+        background: linear-gradient(135deg, #2563eb, #0ea5e9);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin: 0;
+        line-height: 1.2;
+      }
+
+      .module-description {
+        font-size: 0.75rem;
+        color: #64748b;
+        margin: 0;
+      }
+
+      .module-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+
+      .toolbar-separator {
+        width: 1px;
+        height: 1.5rem;
+        background: rgba(226, 232, 240, 0.8);
+        margin: 0 0.25rem;
+      }
+
+      /* Desktop toolbar items - visible on larger screens */
+      .toolbar-desktop-items {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+
+      /* Mobile overflow menu - hidden on larger screens */
+      .toolbar-overflow-menu {
+        display: none;
+        position: relative;
+      }
+
+      /* Responsive: Show overflow menu on mobile, hide desktop items */
+      @media (max-width: 768px) {
+        .module-header {
+          padding: 0.75rem 1rem;
+          margin: 0.5rem 0.75rem;
+          gap: 0.5rem;
+        }
+
+        .module-title {
+          font-size: 1rem;
+        }
+
+        .module-description {
+          font-size: 0.7rem;
+        }
+
+        .search-input-wrapper {
+          min-width: 150px;
+          flex: 1;
+        }
+
+        .toolbar-desktop-items {
+          display: none !important;
+        }
+
+        .toolbar-overflow-menu {
+          display: block !important;
+        }
+      }
+
+      .search-input-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        background: #f8fafc;
+        border: 1px solid rgba(226, 232, 240, 0.8);
+        border-radius: 0.5rem;
+        min-width: 200px;
+        transition: all 0.2s ease;
+      }
+
+      .search-input-wrapper:focus-within {
+        border-color: #2563eb;
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+      }
+
+      .search-input-wrapper svg {
+        color: #64748b;
+        flex-shrink: 0;
+      }
+
+      .search-input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        font-size: 0.85rem;
+        color: #1e293b;
+        outline: none;
+      }
+
+      .search-input::placeholder {
+        color: #94a3b8;
+      }
+
+      .view-mode-group {
+        display: inline-flex;
+        align-items: center;
+        background: #ffffff;
+        border: 1px solid rgba(226, 232, 240, 0.8);
+        border-radius: 0.375rem;
+        padding: 0.125rem;
+        gap: 0.125rem;
+      }
+
+      .view-mode-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: #64748b;
+      }
+
+      .view-mode-btn:hover {
+        background: #f8fafc;
+        color: #1e293b;
+      }
+
+      .view-mode-btn.active {
+        background: #2563eb;
+        color: white;
+        box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
+      }
+
+      .view-mode-btn svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .btn-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.25rem;
+        height: 2.25rem;
+        padding: 0;
+        border: 1px solid rgba(226, 232, 240, 0.8);
+        background: #ffffff;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: #64748b;
+        position: relative;
+      }
+
+      .btn-icon:hover {
+        background: #f8fafc;
+        border-color: #2563eb;
+        color: #2563eb;
+      }
+
+      .btn-icon.active {
+        background: linear-gradient(135deg, #2563eb, #0ea5e9);
+        color: white;
+        border-color: #2563eb;
+      }
+
+      .btn-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: none;
+        gap: 0.25rem;
+      }
+
+      .btn-primary {
+        background: linear-gradient(135deg, #2563eb, #0ea5e9);
+        color: white;
+        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
+      }
+
+      .btn-primary:hover {
+        background: linear-gradient(135deg, #1d4ed8, #0284c7);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
+      }
+
+      .btn-secondary {
+        background: #ffffff;
+        color: #1e293b;
+        border: 1px solid rgba(226, 232, 240, 0.8);
+      }
+
+      .btn-secondary:hover {
+        background: #f8fafc;
+        border-color: #2563eb;
+        color: #2563eb;
+      }
+
+      .btn-danger {
+        background: linear-gradient(135deg, #dc2626, #ef4444);
+        color: white;
+      }
+
+      .btn-danger:hover {
+        background: linear-gradient(135deg, #b91c1c, #dc2626);
+      }
+
+      .filter-badge {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        background: #3B82F6;
+        color: white;
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        font-size: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+      }
+
+      /* Overflow menu trigger */
+      .action-menu-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.25rem;
+        height: 2.25rem;
+        padding: 0;
+        border: 1px solid rgba(226, 232, 240, 0.8);
+        background: #ffffff;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: #64748b;
+      }
+
+      .action-menu-trigger:hover,
+      .action-menu-trigger.active {
+        background: #f8fafc;
+        border-color: #2563eb;
+        color: #2563eb;
+      }
+
+      /* Overflow dropdown styles */
+      .overflow-menu-section-label {
+        padding: 0.5rem 0.875rem 0.25rem;
+        font-size: 0.7rem;
+        font-weight: 600;
+        color: #94a3b8;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .overflow-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        width: 100%;
+        padding: 0.625rem 1rem;
+        border: none;
+        background: transparent;
+        color: #334155;
+        font-size: 0.875rem;
+        cursor: pointer;
+        text-align: left;
+        transition: background 0.15s ease;
+      }
+
+      .overflow-menu-item:hover {
+        background: #f1f5f9;
+      }
+
+      .overflow-menu-item.active {
+        background: #f1f5f9;
+        color: #3b82f6;
+      }
+
+      .overflow-menu-item.danger {
+        color: #ef4444;
+      }
+
+      .overflow-menu-item.danger:hover {
+        background: rgba(239, 68, 68, 0.1);
+      }
+
+      .overflow-menu-item:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+// ============================================================================
+// MODULE HEADER COMPONENT
+// ============================================================================
+
+const ModuleHeader: React.FC<ModuleHeaderProps> = ({
+  title,
+  description,
+  searchConfig,
+  viewModeConfig,
+  filterConfig,
+  customToolbarItems,
+  actions = [],
+  showActionSeparator = true,
+  visible = true,
+  className = ''
+}) => {
+  const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
+  const overflowMenuRef = useRef<HTMLDivElement>(null);
+
+  // Close overflow menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const dropdownEl = document.querySelector('.module-header-overflow-dropdown');
+
+      if (
+        overflowMenuRef.current &&
+        !overflowMenuRef.current.contains(target) &&
+        (!dropdownEl || !dropdownEl.contains(target))
+      ) {
+        setOverflowMenuOpen(false);
+      }
+    };
+
+    if (overflowMenuOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [overflowMenuOpen]);
+
+  if (!visible) {
+    return null;
+  }
+
+  const visibleActions = actions.filter(action => action.visible !== false);
+
+  // Get badge count from either activeCount or badgeCount
+  const filterBadgeCount = filterConfig?.activeCount || filterConfig?.badgeCount || 0;
+
+  return (
+    <div className={`module-header ${className}`}>
+      {/* Title Section */}
+      <div className="module-header-content">
+        <h1 className="module-title">{title}</h1>
+        {description && <p className="module-description">{description}</p>}
+      </div>
+
+      {/* Toolbar Section */}
+      <div className="module-toolbar">
+        {/* Search Bar - Always visible */}
+        {searchConfig && (
+          <div className="search-input-wrapper">
+            <IconSystem.search size={16} />
+            <input
+              type="text"
+              className="search-input"
+              placeholder={searchConfig.placeholder || 'Search...'}
+              value={searchConfig.value}
+              onChange={(e) => searchConfig.onChange(e.target.value)}
+              disabled={searchConfig.disabled}
+            />
+          </div>
+        )}
+
+        {/* Desktop Toolbar Items - Hidden on mobile */}
+        <div className="toolbar-desktop-items">
+          {/* View Mode Toggle */}
+          {viewModeConfig && (
+            <div className="view-mode-group">
+              {viewModeConfig.modes.map((mode) => (
+                <button
+                  key={mode.id}
+                  className={`view-mode-btn ${viewModeConfig.currentMode === mode.id ? 'active' : ''}`}
+                  onClick={() => viewModeConfig.onChange(mode.id)}
+                  disabled={mode.disabled}
+                  title={mode.tooltip || mode.label}
+                  style={mode.disabled ? { opacity: 0.3, cursor: 'not-allowed' } : {}}
+                >
+                  {mode.icon}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Filter Button */}
+          {filterConfig && (
+            <button
+              className={`btn-icon ${filterConfig.isActive ? 'active' : ''}`}
+              onClick={filterConfig.onClick}
+              disabled={filterConfig.disabled}
+              title={filterConfig.tooltip || 'Filters'}
+              style={{ position: 'relative' }}
+            >
+              <IconSystem.filter size={18} />
+              {filterBadgeCount > 0 && (
+                <span className="filter-badge">{filterBadgeCount}</span>
+              )}
+            </button>
+          )}
+
+          {/* Custom Toolbar Items */}
+          {customToolbarItems}
+
+          {/* Separator before actions */}
+          {showActionSeparator && visibleActions.length > 0 && (
+            <div className="toolbar-separator" />
+          )}
+
+          {/* Action Buttons */}
+          {visibleActions.map((action) => {
+            const buttonClass = action.variant === 'primary'
+              ? 'btn btn-primary'
+              : action.variant === 'secondary'
+              ? 'btn btn-secondary'
+              : action.variant === 'danger'
+              ? 'btn btn-danger'
+              : 'btn-icon';
+
+            return (
+              <button
+                key={action.id}
+                className={buttonClass}
+                onClick={action.onClick}
+                disabled={action.disabled}
+                title={action.tooltip || action.label}
+              >
+                {action.icon}
+                {action.variant !== 'icon' && (
+                  <span style={{ marginLeft: '0.5rem' }}>{action.label}</span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Mobile Overflow Menu - Visible only on mobile */}
+        <div
+          ref={overflowMenuRef}
+          className="toolbar-overflow-menu"
+        >
+          <button
+            onClick={() => setOverflowMenuOpen(!overflowMenuOpen)}
+            className={`action-menu-trigger ${overflowMenuOpen ? 'active' : ''}`}
+            title="More options"
+          >
+            <IconSystem.moreVertical size={18} />
+          </button>
+
+          {overflowMenuOpen && ReactDOM.createPortal(
+            <div
+              className="module-header-overflow-dropdown"
+              style={{
+                position: 'fixed',
+                top: overflowMenuRef.current ? overflowMenuRef.current.getBoundingClientRect().bottom + 4 : 0,
+                right: overflowMenuRef.current ? window.innerWidth - overflowMenuRef.current.getBoundingClientRect().right : 0,
+                minWidth: '200px',
+                maxHeight: overflowMenuRef.current ? `calc(100vh - ${overflowMenuRef.current.getBoundingClientRect().bottom + 20}px)` : '70vh',
+                overflowY: 'auto',
+                padding: '0.5rem 0',
+                zIndex: 999999,
+                background: 'white',
+                borderRadius: '0.5rem',
+                boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)',
+                border: '1px solid #e2e8f0',
+              }}
+            >
+              {/* View Mode Options */}
+              {viewModeConfig && (
+                <>
+                  <div className="overflow-menu-section-label">View</div>
+                  {viewModeConfig.modes.map((mode) => (
+                    <button
+                      key={mode.id}
+                      className={`overflow-menu-item ${viewModeConfig.currentMode === mode.id ? 'active' : ''}`}
+                      onClick={() => {
+                        viewModeConfig.onChange(mode.id);
+                        setOverflowMenuOpen(false);
+                      }}
+                      disabled={mode.disabled}
+                    >
+                      {mode.icon}
+                      <span>{mode.label}</span>
+                    </button>
+                  ))}
+                </>
+              )}
+
+              {/* Filter Option */}
+              {filterConfig && (
+                <button
+                  className={`overflow-menu-item ${filterConfig.isActive ? 'active' : ''}`}
+                  onClick={() => {
+                    filterConfig.onClick();
+                    setOverflowMenuOpen(false);
+                  }}
+                  disabled={filterConfig.disabled}
+                >
+                  <IconSystem.filter size={18} />
+                  <span>Filters</span>
+                  {filterBadgeCount > 0 && (
+                    <span style={{
+                      marginLeft: 'auto',
+                      backgroundColor: '#3B82F6',
+                      color: 'white',
+                      fontSize: '10px',
+                      fontWeight: 600,
+                      minWidth: '16px',
+                      height: '16px',
+                      borderRadius: '8px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      padding: '0 4px',
+                    }}>
+                      {filterBadgeCount}
+                    </span>
+                  )}
+                </button>
+              )}
+
+              {/* Separator if we have actions */}
+              {visibleActions.length > 0 && (viewModeConfig || filterConfig) && (
+                <div style={{ height: '1px', background: '#e2e8f0', margin: '0.5rem 0' }} />
+              )}
+
+              {/* Action Buttons */}
+              {visibleActions.length > 0 && (
+                <>
+                  <div className="overflow-menu-section-label">Actions</div>
+                  {visibleActions.map((action) => (
+                    <button
+                      key={action.id}
+                      className={`overflow-menu-item ${action.variant === 'danger' ? 'danger' : ''}`}
+                      onClick={() => {
+                        action.onClick();
+                        setOverflowMenuOpen(false);
+                      }}
+                      disabled={action.disabled}
+                    >
+                      {action.icon}
+                      <span>{action.label}</span>
+                    </button>
+                  ))}
+                </>
+              )}
+            </div>,
+            document.body
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModuleHeader;