adding developer tools in admin panel, adding vendor management

static/admin/js/components.js

@@ -0,0 +1,140 @@
+// static/admin/js/components.js
+
+// Setup logging
+const COMPONENTS_LOG_LEVEL = 3;
+
+const componentsLog = {
+    error: (...args) => COMPONENTS_LOG_LEVEL >= 1 && console.error('❌ [COMPONENTS ERROR]', ...args),
+    warn: (...args) => COMPONENTS_LOG_LEVEL >= 2 && console.warn('⚠️ [COMPONENTS WARN]', ...args),
+    info: (...args) => COMPONENTS_LOG_LEVEL >= 3 && console.info('ℹ️ [COMPONENTS INFO]', ...args),
+    debug: (...args) => COMPONENTS_LOG_LEVEL >= 4 && console.log('🔍 [COMPONENTS DEBUG]', ...args)
+};
+
+/**
+ * Components Library Alpine.js Component
+ * UI components reference with live examples
+ */
+function adminComponents() {
+    return {
+        // ✅ CRITICAL: Inherit base layout functionality
+        ...data(),
+
+        // ✅ CRITICAL: Set page identifier
+        currentPage: 'components',
+
+        // Active section for navigation
+        activeSection: 'forms',
+
+        // Component sections
+        sections: [
+            { id: 'forms', name: 'Forms', icon: 'clipboard-list' },
+            { id: 'buttons', name: 'Buttons', icon: 'cursor-click' },
+            { id: 'cards', name: 'Cards', icon: 'collection' },
+            { id: 'badges', name: 'Badges', icon: 'tag' },
+            { id: 'tables', name: 'Tables', icon: 'table' },
+            { id: 'modals', name: 'Modals', icon: 'window' },
+            { id: 'alerts', name: 'Alerts', icon: 'exclamation' }
+        ],
+
+        // Sample form data for examples
+        exampleForm: {
+            textInput: 'Sample text',
+            email: 'user@example.com',
+            textarea: 'Sample description text...',
+            select: 'option1',
+            checkbox: true,
+            radio: 'option1',
+            disabled: 'Read-only value'
+        },
+
+        // Sample errors for validation examples
+        exampleErrors: {
+            email: 'Please enter a valid email address',
+            required: 'This field is required'
+        },
+
+        // ✅ CRITICAL: Proper initialization with guard
+        async init() {
+            componentsLog.info('=== COMPONENTS PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._componentsInitialized) {
+                componentsLog.warn('Components page already initialized, skipping...');
+                return;
+            }
+            window._componentsInitialized = true;
+
+            // Set active section from URL hash if present
+            this.setActiveSectionFromHash();
+
+            // Listen for hash changes
+            window.addEventListener('hashchange', () => {
+                this.setActiveSectionFromHash();
+            });
+
+            componentsLog.info('=== COMPONENTS PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        /**
+         * Set active section from URL hash
+         */
+        setActiveSectionFromHash() {
+            const hash = window.location.hash.replace('#', '');
+            if (hash && this.sections.find(s => s.id === hash)) {
+                this.activeSection = hash;
+                componentsLog.debug('Set active section from hash:', hash);
+            }
+        },
+
+        /**
+         * Navigate to section
+         */
+        goToSection(sectionId) {
+            componentsLog.info('Navigating to section:', sectionId);
+            this.activeSection = sectionId;
+            window.location.hash = sectionId;
+
+            // Smooth scroll to section
+            const element = document.getElementById(sectionId);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        },
+
+        /**
+         * Check if section is active
+         */
+        isSectionActive(sectionId) {
+            return this.activeSection === sectionId;
+        },
+
+        /**
+         * Copy code to clipboard
+         */
+        async copyCode(code) {
+            try {
+                await navigator.clipboard.writeText(code);
+                Utils.showToast('Code copied to clipboard!', 'success');
+                componentsLog.debug('Code copied to clipboard');
+            } catch (error) {
+                componentsLog.error('Failed to copy code:', error);
+                Utils.showToast('Failed to copy code', 'error');
+            }
+        },
+
+        /**
+         * Show toast example
+         */
+        showToastExample(type) {
+            const messages = {
+                success: 'Operation completed successfully!',
+                error: 'An error occurred!',
+                warning: 'Please review your input.',
+                info: 'Here is some information.'
+            };
+            Utils.showToast(messages[type] || messages.info, type);
+        }
+    };
+}
+
+componentsLog.info('Components module loaded');