adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/scripts/ui/index.js

@@ -1,412 +0,0 @@
-/**
- * UI Page Bootstrap Components
- * Vanilla JavaScript implementations for Bootstrap components
- */
-
-export default (function () {
-  
-  // Modal functionality
-  class VanillaModal {
-    constructor(element) {
-      this.element = element;
-      this.modal = null;
-      this.backdrop = null;
-      this.isOpen = false;
-      this.init();
-    }
-    
-    init() {
-      this.modal = document.querySelector(this.element.getAttribute('data-bs-target'));
-      if (this.modal) {
-        this.element.addEventListener('click', (e) => {
-          e.preventDefault();
-          this.show();
-        });
-        
-        // Close button functionality
-        const closeButtons = this.modal.querySelectorAll('[data-bs-dismiss="modal"]');
-        closeButtons.forEach(btn => {
-          btn.addEventListener('click', () => this.hide());
-        });
-        
-        // Close on backdrop click
-        this.modal.addEventListener('click', (e) => {
-          if (e.target === this.modal) {
-            this.hide();
-          }
-        });
-      }
-    }
-    
-    show() {
-      if (this.isOpen) return;
-      
-      // Create backdrop
-      this.backdrop = document.createElement('div');
-      this.backdrop.className = 'modal-backdrop fade show';
-      document.body.appendChild(this.backdrop);
-      
-      // Show modal
-      this.modal.style.display = 'block';
-      this.modal.classList.add('show');
-      document.body.classList.add('modal-open');
-      
-      this.isOpen = true;
-      
-      // Focus the modal
-      this.modal.setAttribute('tabindex', '-1');
-      this.modal.focus();
-      
-      // Escape key handler
-      this.escapeHandler = (e) => {
-        if (e.key === 'Escape') {
-          this.hide();
-        }
-      };
-      document.addEventListener('keydown', this.escapeHandler);
-    }
-    
-    hide() {
-      if (!this.isOpen) return;
-      
-      // Hide modal
-      this.modal.classList.remove('show');
-      this.modal.style.display = 'none';
-      document.body.classList.remove('modal-open');
-      
-      // Remove backdrop
-      if (this.backdrop) {
-        this.backdrop.remove();
-        this.backdrop = null;
-      }
-      
-      this.isOpen = false;
-      
-      // Remove escape handler
-      if (this.escapeHandler) {
-        document.removeEventListener('keydown', this.escapeHandler);
-        this.escapeHandler = null;
-      }
-    }
-  }
-  
-  // Dropdown functionality
-  class VanillaDropdown {
-    constructor(element) {
-      this.element = element;
-      this.menu = null;
-      this.isOpen = false;
-      this.init();
-    }
-    
-    init() {
-      this.menu = this.element.parentNode.querySelector('.dropdown-menu');
-      if (this.menu) {
-        this.element.addEventListener('click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          this.toggle();
-        });
-        
-        // Close on outside click
-        document.addEventListener('click', (e) => {
-          if (!this.element.parentNode.contains(e.target)) {
-            this.hide();
-          }
-        });
-        
-        // Close on escape
-        document.addEventListener('keydown', (e) => {
-          if (e.key === 'Escape' && this.isOpen) {
-            this.hide();
-          }
-        });
-      }
-    }
-    
-    toggle() {
-      if (this.isOpen) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }
-    
-    show() {
-      if (this.isOpen) return;
-      
-      // Close other dropdowns
-      document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
-        menu.classList.remove('show');
-      });
-      
-      this.menu.classList.add('show');
-      this.element.setAttribute('aria-expanded', 'true');
-      this.isOpen = true;
-    }
-    
-    hide() {
-      if (!this.isOpen) return;
-      
-      this.menu.classList.remove('show');
-      this.element.setAttribute('aria-expanded', 'false');
-      this.isOpen = false;
-    }
-  }
-  
-  // Popover functionality
-  class VanillaPopover {
-    constructor(element) {
-      this.element = element;
-      this.popover = null;
-      this.isOpen = false;
-      this.init();
-    }
-    
-    init() {
-      this.element.addEventListener('click', (e) => {
-        e.preventDefault();
-        this.toggle();
-      });
-      
-      // Close on outside click
-      document.addEventListener('click', (e) => {
-        if (!this.element.contains(e.target) && (!this.popover || !this.popover.contains(e.target))) {
-          this.hide();
-        }
-      });
-    }
-    
-    toggle() {
-      if (this.isOpen) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }
-    
-    show() {
-      if (this.isOpen) return;
-      
-      // Close other popovers
-      document.querySelectorAll('.popover').forEach(popover => {
-        popover.remove();
-      });
-      
-      const title = this.element.getAttribute('title') || this.element.getAttribute('data-bs-title');
-      const content = this.element.getAttribute('data-bs-content');
-      
-      this.popover = document.createElement('div');
-      this.popover.className = 'popover bs-popover-top show';
-      this.popover.style.position = 'absolute';
-      this.popover.style.zIndex = '1070';
-      this.popover.style.maxWidth = '276px';
-      this.popover.style.backgroundColor = '#fff';
-      this.popover.style.border = '1px solid rgba(0,0,0,.2)';
-      this.popover.style.borderRadius = '6px';
-      this.popover.style.boxShadow = '0 5px 10px rgba(0,0,0,.2)';
-      
-      let popoverContent = '';
-      if (title) {
-        popoverContent += `<div class="popover-header" style="padding: 8px 14px; margin-bottom: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; font-weight: 600;">${title}</div>`;
-      }
-      popoverContent += `<div class="popover-body" style="padding: 9px 14px; word-wrap: break-word;">${content}</div>`;
-      
-      this.popover.innerHTML = popoverContent;
-      document.body.appendChild(this.popover);
-      
-      // Position popover
-      const rect = this.element.getBoundingClientRect();
-      this.popover.style.left = `${rect.left + (rect.width / 2) - (this.popover.offsetWidth / 2)}px`;
-      this.popover.style.top = `${rect.top - this.popover.offsetHeight - 10}px`;
-      
-      this.isOpen = true;
-    }
-    
-    hide() {
-      if (!this.isOpen) return;
-      
-      if (this.popover) {
-        this.popover.remove();
-        this.popover = null;
-      }
-      this.isOpen = false;
-    }
-  }
-  
-  // Tooltip functionality
-  class VanillaTooltip {
-    constructor(element) {
-      this.element = element;
-      this.tooltip = null;
-      this.init();
-    }
-    
-    init() {
-      this.element.addEventListener('mouseenter', () => this.show());
-      this.element.addEventListener('mouseleave', () => this.hide());
-      this.element.addEventListener('focus', () => this.show());
-      this.element.addEventListener('blur', () => this.hide());
-    }
-    
-    show() {
-      if (this.tooltip) return;
-      
-      const title = this.element.getAttribute('title') || this.element.getAttribute('data-bs-title');
-      const placement = this.element.getAttribute('data-bs-placement') || 'top';
-      
-      if (!title) return;
-      
-      this.tooltip = document.createElement('div');
-      this.tooltip.className = `tooltip bs-tooltip-${placement} show`;
-      this.tooltip.style.position = 'absolute';
-      this.tooltip.style.zIndex = '1070';
-      this.tooltip.style.maxWidth = '200px';
-      this.tooltip.style.padding = '4px 8px';
-      this.tooltip.style.fontSize = '12px';
-      this.tooltip.style.backgroundColor = '#000';
-      this.tooltip.style.color = '#fff';
-      this.tooltip.style.borderRadius = '4px';
-      this.tooltip.style.pointerEvents = 'none';
-      this.tooltip.style.whiteSpace = 'nowrap';
-      
-      this.tooltip.innerHTML = `<div class="tooltip-inner">${title}</div>`;
-      document.body.appendChild(this.tooltip);
-      
-      // Position tooltip
-      const rect = this.element.getBoundingClientRect();
-      
-      switch (placement) {
-      case 'top':
-        this.tooltip.style.left = `${rect.left + (rect.width / 2) - (this.tooltip.offsetWidth / 2)}px`;
-        this.tooltip.style.top = `${rect.top - this.tooltip.offsetHeight - 5}px`;
-        break;
-      case 'bottom':
-        this.tooltip.style.left = `${rect.left + (rect.width / 2) - (this.tooltip.offsetWidth / 2)}px`;
-        this.tooltip.style.top = `${rect.bottom + 5}px`;
-        break;
-      case 'left':
-        this.tooltip.style.left = `${rect.left - this.tooltip.offsetWidth - 5}px`;
-        this.tooltip.style.top = `${rect.top + (rect.height / 2) - (this.tooltip.offsetHeight / 2)}px`;
-        break;
-      case 'right':
-        this.tooltip.style.left = `${rect.right + 5}px`;
-        this.tooltip.style.top = `${rect.top + (rect.height / 2) - (this.tooltip.offsetHeight / 2)}px`;
-        break;
-      }
-    }
-    
-    hide() {
-      if (this.tooltip) {
-        this.tooltip.remove();
-        this.tooltip = null;
-      }
-    }
-  }
-  
-  // Accordion functionality
-  class VanillaAccordion {
-    constructor(element) {
-      this.element = element;
-      this.accordion = element.closest('.accordion');
-      this.target = document.querySelector(element.getAttribute('data-bs-target'));
-      this.isOpen = !element.classList.contains('collapsed');
-      this.init();
-    }
-    
-    init() {
-      this.element.addEventListener('click', (e) => {
-        e.preventDefault();
-        this.toggle();
-      });
-    }
-    
-    toggle() {
-      if (this.isOpen) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }
-    
-    show() {
-      if (this.isOpen) return;
-      
-      // Close other accordion items in the same parent
-      const parentAccordion = this.accordion;
-      if (parentAccordion) {
-        const otherItems = parentAccordion.querySelectorAll('.accordion-collapse.show');
-        otherItems.forEach(item => {
-          if (item !== this.target) {
-            item.classList.remove('show');
-            const button = parentAccordion.querySelector(`[data-bs-target="#${item.id}"]`);
-            if (button) {
-              button.classList.add('collapsed');
-              button.setAttribute('aria-expanded', 'false');
-            }
-          }
-        });
-      }
-      
-      // Show this item
-      this.target.classList.add('show');
-      this.element.classList.remove('collapsed');
-      this.element.setAttribute('aria-expanded', 'true');
-      this.isOpen = true;
-    }
-    
-    hide() {
-      if (!this.isOpen) return;
-      
-      this.target.classList.remove('show');
-      this.element.classList.add('collapsed');
-      this.element.setAttribute('aria-expanded', 'false');
-      this.isOpen = false;
-    }
-  }
-  
-  // Initialize all components
-  const initComponents = () => {
-    // Initialize modals
-    document.querySelectorAll('[data-bs-toggle="modal"]').forEach(element => {
-      new VanillaModal(element);
-    });
-    
-    // Initialize dropdowns
-    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(element => {
-      new VanillaDropdown(element);
-    });
-    
-    // Initialize popovers
-    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(element => {
-      new VanillaPopover(element);
-    });
-    
-    // Initialize tooltips
-    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
-      new VanillaTooltip(element);
-    });
-    
-    // Initialize accordions
-    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(element => {
-      new VanillaAccordion(element);
-    });
-  };
-  
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initComponents);
-  } else {
-    initComponents();
-  }
-  
-  // Public API
-  return {
-    init: initComponents,
-    Modal: VanillaModal,
-    Dropdown: VanillaDropdown,
-    Popover: VanillaPopover,
-    Tooltip: VanillaTooltip,
-    Accordion: VanillaAccordion,
-  };
-}());

package/src/assets/scripts/utils/date.js

@@ -1,242 +0,0 @@
-/**
- * Modern Date Utilities
- * Using Day.js (2KB) instead of Moment.js (67KB) - 97% size reduction
- * Provides consistent date formatting and manipulation across the application
- */
-
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-
-// Enable Day.js plugins
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(relativeTime);
-dayjs.extend(customParseFormat);
-dayjs.extend(advancedFormat);
-
-export const DateUtils = {
-  /**
-   * Get current date/time
-   */
-  now: () => dayjs(),
-
-  /**
-   * Parse date from string or Date object
-   */
-  parse: (input, format = null) => {
-    return format ? dayjs(input, format) : dayjs(input);
-  },
-
-  /**
-   * Format date for display
-   */
-  format: (date, format = 'YYYY-MM-DD') => {
-    return dayjs(date).format(format);
-  },
-
-  /**
-   * Common date formatting presets
-   */
-  formatters: {
-    // Dashboard display formats
-    shortDate: (date) => dayjs(date).format('MMM DD, YYYY'),
-    longDate: (date) => dayjs(date).format('MMMM DD, YYYY'),
-    dateTime: (date) => dayjs(date).format('MMM DD, YYYY h:mm A'),
-    
-    // Calendar formats
-    calendarDate: (date) => dayjs(date).format('YYYY-MM-DD'),
-    calendarDateTime: (date) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
-    
-    // Form input formats
-    inputDate: (date) => dayjs(date).format('YYYY-MM-DD'),
-    inputDateTime: (date) => dayjs(date).format('YYYY-MM-DDTHH:mm'),
-    
-    // Display formats
-    timeOnly: (date) => dayjs(date).format('h:mm A'),
-    monthYear: (date) => dayjs(date).format('MMMM YYYY'),
-    dayMonth: (date) => dayjs(date).format('DD MMM'),
-    
-    // Relative time
-    relative: (date) => dayjs(date).fromNow(),
-    relativeCalendar: (date) => {
-      const now = dayjs();
-      const target = dayjs(date);
-      const diffDays = now.diff(target, 'day');
-      
-      if (diffDays === 0) return 'Today';
-      if (diffDays === 1) return 'Yesterday';
-      if (diffDays === -1) return 'Tomorrow';
-      if (diffDays > 1 && diffDays < 7) return `${diffDays} days ago`;
-      if (diffDays < -1 && diffDays > -7) return `In ${Math.abs(diffDays)} days`;
-      return target.format('MMM DD, YYYY');
-    },
-  },
-
-  /**
-   * Date manipulation
-   */
-  add: (date, amount, unit) => dayjs(date).add(amount, unit),
-  subtract: (date, amount, unit) => dayjs(date).subtract(amount, unit),
-  startOf: (date, unit) => dayjs(date).startOf(unit),
-  endOf: (date, unit) => dayjs(date).endOf(unit),
-
-  /**
-   * Date comparison
-   */
-  isBefore: (date1, date2) => dayjs(date1).isBefore(dayjs(date2)),
-  isAfter: (date1, date2) => dayjs(date1).isAfter(dayjs(date2)),
-  isSame: (date1, date2, unit = 'day') => dayjs(date1).isSame(dayjs(date2), unit),
-  isBetween: (date, start, end) => dayjs(date).isBetween(dayjs(start), dayjs(end)),
-
-  /**
-   * Date validation
-   */
-  isValid: (date) => dayjs(date).isValid(),
-
-  /**
-   * Timezone utilities
-   */
-  timezone: {
-    convert: (date, tz) => dayjs(date).tz(tz),
-    utc: (date) => dayjs(date).utc(),
-    local: (date) => dayjs(date).local(),
-    guess: () => dayjs.tz.guess(),
-  },
-
-  /**
-   * Calendar utilities
-   */
-  calendar: {
-    // Get calendar month data for building calendar views
-    getMonthData: (date = null) => {
-      const target = date ? dayjs(date) : dayjs();
-      const startOfMonth = target.startOf('month');
-      const endOfMonth = target.endOf('month');
-      const startOfCalendar = startOfMonth.startOf('week');
-      const endOfCalendar = endOfMonth.endOf('week');
-      
-      const days = [];
-      let current = startOfCalendar;
-      
-      while (current.isBefore(endOfCalendar) || current.isSame(endOfCalendar, 'day')) {
-        days.push({
-          date: current.format('YYYY-MM-DD'),
-          day: current.date(),
-          isCurrentMonth: current.isSame(target, 'month'),
-          isToday: current.isSame(dayjs(), 'day'),
-          dayjs: current.clone(),
-        });
-        current = current.add(1, 'day');
-      }
-      
-      return {
-        month: target.format('MMMM YYYY'),
-        year: target.year(),
-        monthIndex: target.month(),
-        days,
-      };
-    },
-
-    // Get week data
-    getWeekData: (date = null) => {
-      const target = date ? dayjs(date) : dayjs();
-      const startOfWeek = target.startOf('week');
-      const endOfWeek = target.endOf('week');
-      
-      const days = [];
-      let current = startOfWeek;
-      
-      while (current.isBefore(endOfWeek) || current.isSame(endOfWeek, 'day')) {
-        days.push({
-          date: current.format('YYYY-MM-DD'),
-          day: current.date(),
-          dayName: current.format('dddd'),
-          shortDayName: current.format('ddd'),
-          isToday: current.isSame(dayjs(), 'day'),
-          dayjs: current.clone(),
-        });
-        current = current.add(1, 'day');
-      }
-      
-      return {
-        weekStart: startOfWeek.format('MMM DD'),
-        weekEnd: endOfWeek.format('MMM DD, YYYY'),
-        days,
-      };
-    },
-  },
-
-  /**
-   * Form utilities
-   */
-  form: {
-    // Convert date to HTML5 input format
-    toInputValue: (date) => dayjs(date).format('YYYY-MM-DD'),
-    toDateTimeInputValue: (date) => dayjs(date).format('YYYY-MM-DDTHH:mm'),
-    
-    // Parse from HTML5 input
-    fromInputValue: (value) => dayjs(value),
-    
-    // Validate date input
-    validateDateInput: (value) => {
-      const parsed = dayjs(value);
-      return parsed.isValid() && value.length >= 8; // Basic validation
-    },
-  },
-
-  /**
-   * Chart/Data utilities
-   */
-  charts: {
-    // Generate date ranges for charts
-    generateDateRange: (start, end, interval = 'day') => {
-      const dates = [];
-      let current = dayjs(start);
-      const endDate = dayjs(end);
-      
-      while (current.isBefore(endDate) || current.isSame(endDate, interval)) {
-        dates.push({
-          date: current.format('YYYY-MM-DD'),
-          label: current.format('MMM DD'),
-          value: current.toISOString(),
-          dayjs: current.clone(),
-        });
-        current = current.add(1, interval);
-      }
-      
-      return dates;
-    },
-
-    // Get common chart date labels
-    getChartLabels: (period = 'week') => {
-      const now = dayjs();
-      
-      switch (period) {
-      case 'week':
-        return Array.from({ length: 7 }, (_, i) => 
-          now.subtract(6 - i, 'day').format('ddd')
-        );
-      case 'month':
-        return Array.from({ length: 30 }, (_, i) => 
-          now.subtract(29 - i, 'day').format('DD')
-        );
-      case 'year':
-        return Array.from({ length: 12 }, (_, i) => 
-          now.subtract(11 - i, 'month').format('MMM')
-        );
-      default:
-        return [];
-      }
-    },
-  },
-};
-
-// Export dayjs instance for direct use when needed
-export { dayjs };
-
-// Default export
-export default DateUtils;