Inventory Export

Export Products – Admin

Business: — Software ID: — Branch: —

Preview 0 rows

Loading products...

Icon Data

// 2. Call: IconPicker.open('myInputId') // sets value on pick // or: IconPicker.open(callbackFn) // callback receives icon name // 3. Optional: IconPicker.open('id', { title, initial }) // ============================================================ (function () { 'use strict'; // -------------------- ICON DATA -------------------- const ICON_GROUPS = [ { key: 'navigation', label: 'Navigation', icons: [ 'fa-house','fa-bars','fa-ellipsis','fa-ellipsis-h','fa-ellipsis-v','fa-arrow-right','fa-arrow-left', 'fa-arrow-up','fa-arrow-down','fa-chevron-right','fa-chevron-left','fa-chevron-up','fa-chevron-down', 'fa-angles-right','fa-angles-left','fa-location-arrow','fa-up-right-from-square','fa-share','fa-share-nodes' ]}, { key: 'dashboard', label: 'Dashboard & Charts', icons: [ 'fa-tachometer-alt','fa-gauge','fa-gauge-high','fa-chart-pie','fa-chart-bar','fa-chart-line','fa-chart-area', 'fa-chart-column','fa-chart-simple','fa-diagram-project','fa-square-poll-vertical','fa-square-poll-horizontal', 'fa-list','fa-list-check','fa-list-ul','fa-list-ol','fa-table','fa-table-cells','fa-table-list','fa-layer-group' ]}, { key: 'users', label: 'Users & Accounts', icons: [ 'fa-user','fa-users','fa-user-plus','fa-user-minus','fa-user-edit','fa-user-cog','fa-user-check','fa-user-xmark', 'fa-user-shield','fa-user-lock','fa-user-tie','fa-user-graduate','fa-user-nurse','fa-user-secret','fa-user-search', 'fa-address-book','fa-address-card','fa-id-card','fa-id-badge','fa-people-group','fa-people-arrows','fa-person' ]}, { key: 'commerce', label: 'Commerce & Sales', icons: [ 'fa-cart-shopping','fa-cart-plus','fa-basket-shopping','fa-bag-shopping','fa-store','fa-shop','fa-tag','fa-tags', 'fa-ticket','fa-ticket-simple','fa-dollar-sign','fa-naira-sign','fa-euro-sign','fa-sterling-sign','fa-yen-sign', 'fa-credit-card','fa-money-bill','fa-money-bill-wave','fa-money-check','fa-money-check-dollar','fa-coins', 'fa-cash-register','fa-receipt','fa-barcode','fa-qrcode','fa-percent' ]}, { key: 'inventory', label: 'Inventory & Warehouse', icons: [ 'fa-box','fa-boxes','fa-boxes-stacked','fa-boxes-packing','fa-box-open','fa-pallet','fa-warehouse','fa-dolly', 'fa-dolly-flatbed','fa-truck','fa-truck-fast','fa-truck-ramp-box','fa-truck-arrow-right','fa-truck-moving', 'fa-clipboard-list','fa-clipboard-check','fa-clipboard-question','fa-archive','fa-inbox','fa-cubes','fa-cube' ]}, { key: 'finance', label: 'Finance & Transactions', icons: [ 'fa-wallet','fa-piggy-bank','fa-landmark','fa-building-columns','fa-vault','fa-money-bill-transfer', 'fa-arrow-right-arrow-left','fa-right-left','fa-exchange','fa-exchange-alt','fa-arrow-trend-up','fa-arrow-trend-down', 'fa-file-invoice','fa-file-invoice-dollar','fa-file-invoice-wave','fa-hand-holding-dollar', 'fa-hand-holding-usd','fa-hand-holding-heart','fa-scale-balanced','fa-scale-unbalanced' ]}, { key: 'files', label: 'Files & Documents', icons: [ 'fa-file','fa-file-lines','fa-file-alt','fa-file-text','fa-file-pdf','fa-file-word','fa-file-excel', 'fa-file-powerpoint','fa-file-image','fa-file-video','fa-file-audio','fa-file-code','fa-file-csv','fa-file-zipper', 'fa-folder','fa-folder-open','fa-folder-plus','fa-folder-minus','fa-folder-tree','fa-folder-closed', 'fa-book','fa-book-open','fa-bookmark','fa-copy','fa-paste','fa-scissors','fa-print','fa-floppy-disk','fa-save' ]}, { key: 'communication', label: 'Communication', icons: [ 'fa-envelope','fa-envelope-open','fa-paper-plane','fa-comment','fa-comments','fa-comment-dots','fa-message', 'fa-bell','fa-bell-slash','fa-phone','fa-phone-volume','fa-headset','fa-microphone','fa-video','fa-at','fa-inbox' ]}, { key: 'status', label: 'Status & Alerts', icons: [ 'fa-circle-check','fa-circle-xmark','fa-circle-exclamation','fa-circle-info','fa-circle-question','fa-triangle-exclamation', 'fa-check','fa-xmark','fa-plus','fa-minus','fa-ban','fa-shield','fa-shield-halved','fa-lock','fa-lock-open', 'fa-unlock','fa-key','fa-fingerprint','fa-eye','fa-eye-slash','fa-circle','fa-circle-dot','fa-dot-circle' ]}, { key: 'actions', label: 'Actions & Tools', icons: [ 'fa-gear','fa-cog','fa-gears','fa-cogs','fa-screwdriver-wrench','fa-toolbox','fa-wrench','fa-hammer','fa-sliders', 'fa-filter','fa-magnifying-glass','fa-search','fa-pen','fa-pencil','fa-pen-to-square','fa-edit','fa-trash', 'fa-trash-can','fa-plus-circle','fa-minus-circle','fa-circle-plus','fa-circle-minus','fa-square-plus','fa-square-minus', 'fa-clone','fa-download','fa-upload','fa-cloud-arrow-up','fa-cloud-arrow-down','fa-sync','fa-sync-alt','fa-rotate', 'fa-rotate-right','fa-rotate-left','fa-arrows-rotate' ]}, { key: 'datetime', label: 'Date & Time', icons: [ 'fa-calendar','fa-calendar-days','fa-calendar-check','fa-calendar-xmark','fa-calendar-plus','fa-calendar-minus', 'fa-calendar-week','fa-clock','fa-clock-rotate-left','fa-stopwatch','fa-hourglass','fa-hourglass-half','fa-bell' ]}, { key: 'analytics', label: 'Charts & Analytics', icons: [ 'fa-chart-pie','fa-chart-bar','fa-chart-line','fa-chart-area','fa-chart-column','fa-chart-simple','fa-chart-gantt', 'fa-diagram-project','fa-diagram-successor','fa-diagram-predecessor','fa-sitemap','fa-network-wired','fa-project-diagram', 'fa-magnifying-glass-chart','fa-square-poll-vertical','fa-square-poll-horizontal' ]}, { key: 'misc', label: 'Misc & Symbols', icons: [ 'fa-star','fa-star-half','fa-star-half-stroke','fa-heart','fa-fire','fa-fire-flame-curved','fa-bolt','fa-lightbulb', 'fa-flag','fa-flag-checkered','fa-trophy','fa-award','fa-medal','fa-certificate','fa-crown','fa-gem','fa-rocket', 'fa-code','fa-code-branch','fa-code-fork','fa-terminal','fa-bug','fa-laptop-code','fa-laptop', 'fa-desktop','fa-mobile','fa-tablet','fa-server','fa-database','fa-cloud','fa-wifi','fa-globe','fa-earth-americas', 'fa-language','fa-graduation-cap','fa-book-open-reader','fa-info','fa-question' ]} ]; // Flatten for search const ICON_LIST = []; ICON_GROUPS.forEach(g => { g.icons.forEach(name => { if (!ICON_LIST.find(x => x.name === name)) { ICON_LIST.push({ name, group: g.key, groupLabel: g.label }); } }); }); // -------------------- STYLES -------------------- const STYLE_ID = 'icon-picker-styles'; function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` .ip-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 100000; padding: 20px; } .ip-overlay.active { display: flex; } .ip-box { background: var(--card-bg, #fff); color: var(--text-color, #333); border-radius: 14px; width: 100%; max-width: 900px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 70px rgba(0,0,0,0.35); animation: ipSlide 0.25s ease; } @keyframes ipSlide { from { transform: translateY(-24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ip-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color, #dee2e6); } .ip-header h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; } .ip-header h3 i { color: var(--primary, #4361ee); } .ip-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted, #6c757d); line-height: 1; padding: 4px 10px; border-radius: 6px; transition: all .2s; } .ip-close:hover { background: rgba(0,0,0,0.05); color: var(--danger, #e74c3c); } .ip-controls { display: flex; gap: 10px; padding: 14px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color, #dee2e6); } .ip-search-wrap { flex: 1; min-width: 200px; position: relative; } .ip-search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #6c757d); font-size: 13px; pointer-events: none; } .ip-search { width: 100%; padding: 10px 12px 10px 34px; border: 1px solid var(--border-color, #dee2e6); border-radius: 8px; font-size: 14px; background: #ffffff; color: #000000; transition: all .2s; } .ip-search:focus { outline: none; border-color: var(--primary, #4361ee); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); } .ip-category { padding: 10px 14px; border: 1px solid var(--border-color, #dee2e6); border-radius: 8px; font-size: 14px; background: #ffffff; color: #000000; cursor: pointer; min-width: 160px; } .ip-category:focus { outline: none; border-color: var(--primary, #4361ee); } .ip-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .ip-body::-webkit-scrollbar { width: 8px; } .ip-body::-webkit-scrollbar-track { background: transparent; } .ip-body::-webkit-scrollbar-thumb { background: rgba(67,97,238,0.3); border-radius: 4px; } .ip-body::-webkit-scrollbar-thumb:hover { background: rgba(67,97,238,0.5); } .ip-group { margin-bottom: 22px; } .ip-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted, #6c757d); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color, #dee2e6); font-weight: 700; } .ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .ip-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; text-align: center; border: 1px solid var(--border-color, #dee2e6); border-radius: 8px; background: var(--card-bg, #fff); cursor: pointer; transition: all .18s ease; position: relative; min-height: 78px; overflow: hidden; } .ip-cell:hover { border-color: var(--primary, #4361ee); background: rgba(67,97,238,0.06); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(67,97,238,0.15); } .ip-cell.selected { border-color: var(--primary, #4361ee); background: rgba(67,97,238,0.12); box-shadow: 0 0 0 2px rgba(67,97,238,0.25); } .ip-cell i { font-size: 24px; color: var(--primary, #4361ee); } .ip-cell span { font-size: 10px; color: var(--text-muted, #6c757d); word-break: break-all; line-height: 1.2; max-width: 100%; } .ip-empty { text-align: center; padding: 40px 20px; color: var(--text-muted, #6c757d); font-style: italic; } .ip-empty i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.4; } .ip-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border-color, #dee2e6); gap: 12px; flex-wrap: wrap; } .ip-preview { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted, #6c757d); } .ip-preview i { font-size: 22px; color: var(--primary, #4361ee); } .ip-preview .ip-preview-name { font-family: 'Courier New', monospace; color: var(--text-color, #333); font-weight: 600; font-size: 13px; } .ip-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .ip-btn { padding: 9px 20px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; transition: all .2s; } .ip-btn-clear { background: rgba(231,76,60,0.1); color: #e74c3c; } .ip-btn-clear:hover { background: rgba(231,76,60,0.2); } .ip-btn-cancel { background: var(--bg-color, #f5f7fa); color: var(--text-color, #333); border: 1px solid var(--border-color, #dee2e6); } .ip-btn-cancel:hover { background: var(--border-color, #dee2e6); } .ip-btn-apply { background: var(--primary, #4361ee); color: white; } .ip-btn-apply:hover { background: #3a56d4; } .ip-btn-apply:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 640px) { .ip-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } .ip-cell i { font-size: 20px; } .ip-controls { padding: 12px 14px; } .ip-body { padding: 12px 14px; } .ip-header, .ip-footer { padding: 12px 14px; } .ip-category { min-width: 130px; } } `; document.head.appendChild(style); } // -------------------- MODAL -------------------- let overlay = null; let bodyEl = null; let searchEl = null; let categoryEl = null; let previewIconEl = null; let previewNameEl = null; let applyBtn = null; let currentSelection = null; let onPickCallback = null; let targetInputId = null; function buildModal() { if (overlay) return; injectStyles(); overlay = document.createElement('div'); overlay.className = 'ip-overlay'; overlay.innerHTML = ` `; document.body.appendChild(overlay); bodyEl = overlay.querySelector('.ip-body'); searchEl = overlay.querySelector('.ip-search'); categoryEl = overlay.querySelector('.ip-category'); previewIconEl = overlay.querySelector('#ip-preview-icon'); previewNameEl = overlay.querySelector('#ip-preview-name'); applyBtn = overlay.querySelector('#ip-btn-apply'); // populate category select ICON_GROUPS.forEach(g => { const opt = document.createElement('option'); opt.value = g.key; opt.textContent = g.label; categoryEl.appendChild(opt); }); // events overlay.querySelector('.ip-close').addEventListener('click', close); overlay.querySelector('#ip-btn-cancel').addEventListener('click', close); overlay.querySelector('#ip-btn-clear').addEventListener('click', () => { currentSelection = ''; updatePreview(); renderGrid(); }); applyBtn.addEventListener('click', apply); searchEl.addEventListener('input', renderGrid); categoryEl.addEventListener('change', renderGrid); overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); }); document.addEventListener('keydown', (e) => { if (overlay.classList.contains('active') && e.key === 'Escape') close(); }); } function renderGrid() { const q = (searchEl.value || '').toLowerCase().trim(); const cat = categoryEl.value; let html = ''; let any = false; ICON_GROUPS.forEach(g => { if (cat !== '__all__' && g.key !== cat) return; const matches = g.icons.filter(name => !q || name.toLowerCase().includes(q)); if (matches.length === 0) return; any = true; html += `

${g.label} (${matches.length})

`; matches.forEach(name => { const selected = currentSelection === name ? ' selected' : ''; html += `

${name.replace(/^fa-/, '')}

`; }); html += `

`; }); if (!any) { html = `

No icons match "${q || '(empty)'}"

`; } bodyEl.innerHTML = html; // attach click handlers bodyEl.querySelectorAll('.ip-cell').forEach(cell => { cell.addEventListener('click', () => { currentSelection = cell.getAttribute('data-icon'); updatePreview(); renderGrid(); }); cell.addEventListener('dblclick', () => { currentSelection = cell.getAttribute('data-icon'); apply(); }); }); } function updatePreview() { if (currentSelection) { previewIconEl.className = 'fas ' + currentSelection; previewNameEl.textContent = currentSelection; applyBtn.disabled = false; } else { previewIconEl.className = 'fas fa-circle'; previewNameEl.textContent = 'None'; applyBtn.disabled = !currentSelection && currentSelection !== ''; // allow applying empty to clear applyBtn.disabled = false; } } function apply() { if (onPickCallback) { onPickCallback(currentSelection); } else if (targetInputId) { const el = document.getElementById(targetInputId); if (el) el.value = currentSelection || ''; } close(); } function close() { if (overlay) overlay.classList.remove('active'); targetInputId = null; onPickCallback = null; currentSelection = null; } // -------------------- PUBLIC API -------------------- const IconPicker = { /** * Open the icon picker. * @param {string|Function} targetOrCallback - input element id OR a callback fn * @param {Object} [options] - { title, initial, categoriesOnly } */ open(targetOrCallback, options) { buildModal(); options = options || {}; if (options.title) { overlay.querySelector('#ip-title').innerHTML = ` ${options.title}`; } else { overlay.querySelector('#ip-title').innerHTML = ` Pick an Icon`; } // reset UI searchEl.value = ''; categoryEl.value = '__all__'; currentSelection = options.initial || null; updatePreview(); renderGrid(); if (typeof targetOrCallback === 'function') { onPickCallback = targetOrCallback; targetInputId = null; } else { targetInputId = targetOrCallback; onPickCallback = null; // Preload current value from the target input const el = document.getElementById(targetInputId); if (el && el.value) { currentSelection = el.value; updatePreview(); renderGrid(); } } overlay.classList.add('active'); setTimeout(() => searchEl.focus(), 100); }, /** Close programmatically */ close, /** Direct data access */ groups: ICON_GROUPS, list: ICON_LIST, /** Render the icon markup for a name (convenience) */ render(name) { return ``; } }; window.ICONS_DATA = { ICON_GROUPS, ICON_LIST }; window.IconPicker = IconPicker; })();

Inventory Export

Export Products

Preview 0 rows

No products found

Select Columns