Cristiano Benassati
ae78a2f7f4
Complete MVP implementation including: - PHP 8.4 backend with Front Controller pattern (80+ API endpoints) - Multi-tenant architecture with organization_id isolation - JWT authentication (HS256, 2h access + 7d refresh tokens) - 14 controllers: Auth, Organization, Assessment, Dashboard, Risk, Incident, Policy, SupplyChain, Training, Asset, Audit, Admin - AI Service integration (Anthropic Claude API) for gap analysis, risk suggestions, policy generation, incident classification - NIS2 gap analysis questionnaire (~80 questions, 10 categories) - MySQL schema (20 tables) with NIS2 Art. 21 compliance controls - NIS2 Art. 23 incident reporting workflow (24h/72h/30d) - Frontend: login, register, dashboard, assessment wizard, org setup - Docker configuration (PHP-FPM + Nginx + MySQL) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
464 lines
21 KiB
JavaScript
464 lines
21 KiB
JavaScript
/**
|
|
* NIS2 Agile - Common Utilities
|
|
*
|
|
* Funzioni condivise tra tutte le pagine del frontend.
|
|
*/
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Notifications (Toast)
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
/**
|
|
* Mostra una notifica toast.
|
|
* @param {string} message - Testo del messaggio
|
|
* @param {string} type - 'success' | 'error' | 'warning' | 'info'
|
|
* @param {number} duration - Durata in ms (default 4000)
|
|
*/
|
|
function showNotification(message, type = 'info', duration = 4000) {
|
|
let container = document.querySelector('.notification-container');
|
|
if (!container) {
|
|
container = document.createElement('div');
|
|
container.className = 'notification-container';
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
const icons = {
|
|
success: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>',
|
|
error: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>',
|
|
warning: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>',
|
|
info: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>'
|
|
};
|
|
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification ${type}`;
|
|
notification.innerHTML = `
|
|
<span class="notification-icon">${icons[type] || icons.info}</span>
|
|
<span class="notification-message">${escapeHtml(message)}</span>
|
|
<button class="notification-close" onclick="this.parentElement.remove()">×</button>
|
|
`;
|
|
|
|
container.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.classList.add('fade-out');
|
|
setTimeout(() => notification.remove(), 300);
|
|
}, duration);
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Modal
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
/**
|
|
* Mostra un dialogo modale.
|
|
* @param {string} title - Titolo del modale
|
|
* @param {string} content - Contenuto HTML del body
|
|
* @param {object} options - { footer: HTML, size: 'sm'|'md'|'lg' }
|
|
*/
|
|
function showModal(title, content, options = {}) {
|
|
closeModal(); // Chiudi eventuale modale aperto
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'modal-overlay';
|
|
overlay.id = 'modal-overlay';
|
|
|
|
const sizeClass = options.size === 'lg' ? 'style="max-width:720px"' : options.size === 'sm' ? 'style="max-width:400px"' : '';
|
|
|
|
overlay.innerHTML = `
|
|
<div class="modal" ${sizeClass}>
|
|
<div class="modal-header">
|
|
<h3>${escapeHtml(title)}</h3>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">${content}</div>
|
|
${options.footer ? `<div class="modal-footer">${options.footer}</div>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
// Chiudi cliccando fuori dal modale
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) closeModal();
|
|
});
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
// Trigger animation
|
|
requestAnimationFrame(() => {
|
|
overlay.classList.add('active');
|
|
});
|
|
|
|
// Chiudi con ESC
|
|
document.addEventListener('keydown', _modalEscHandler);
|
|
}
|
|
|
|
function closeModal() {
|
|
const overlay = document.getElementById('modal-overlay');
|
|
if (overlay) {
|
|
overlay.classList.remove('active');
|
|
setTimeout(() => overlay.remove(), 250);
|
|
}
|
|
document.removeEventListener('keydown', _modalEscHandler);
|
|
}
|
|
|
|
function _modalEscHandler(e) {
|
|
if (e.key === 'Escape') closeModal();
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Date Formatting
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
/**
|
|
* Formatta una data in formato italiano (dd/mm/yyyy).
|
|
* @param {string|Date} date
|
|
* @returns {string}
|
|
*/
|
|
function formatDate(date) {
|
|
if (!date) return '-';
|
|
const d = new Date(date);
|
|
if (isNaN(d.getTime())) return '-';
|
|
return d.toLocaleDateString('it-IT', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Formatta data e ora in formato italiano.
|
|
* @param {string|Date} date
|
|
* @returns {string}
|
|
*/
|
|
function formatDateTime(date) {
|
|
if (!date) return '-';
|
|
const d = new Date(date);
|
|
if (isNaN(d.getTime())) return '-';
|
|
return d.toLocaleDateString('it-IT', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Restituisce un'etichetta relativa (es. "2 ore fa", "ieri").
|
|
* @param {string|Date} date
|
|
* @returns {string}
|
|
*/
|
|
function timeAgo(date) {
|
|
if (!date) return '';
|
|
const d = new Date(date);
|
|
const now = new Date();
|
|
const diffMs = now - d;
|
|
const diffMin = Math.floor(diffMs / 60000);
|
|
const diffHrs = Math.floor(diffMs / 3600000);
|
|
const diffDays = Math.floor(diffMs / 86400000);
|
|
|
|
if (diffMin < 1) return 'Adesso';
|
|
if (diffMin < 60) return `${diffMin} min fa`;
|
|
if (diffHrs < 24) return `${diffHrs} ore fa`;
|
|
if (diffDays === 1) return 'Ieri';
|
|
if (diffDays < 7) return `${diffDays} giorni fa`;
|
|
return formatDate(date);
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Sidebar
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
/**
|
|
* Inietta la sidebar di navigazione nell'elemento #sidebar.
|
|
*/
|
|
function loadSidebar() {
|
|
const container = document.getElementById('sidebar');
|
|
if (!container) return;
|
|
|
|
// Determina la pagina corrente
|
|
const currentPage = window.location.pathname.split('/').pop() || 'dashboard.html';
|
|
|
|
const navItems = [
|
|
{
|
|
label: 'Principale',
|
|
items: [
|
|
{ name: 'Dashboard', href: 'dashboard.html', icon: iconGrid() },
|
|
{ name: 'Gap Analysis', href: 'assessment.html', icon: iconClipboardCheck() },
|
|
]
|
|
},
|
|
{
|
|
label: 'Gestione',
|
|
items: [
|
|
{ name: 'Rischi', href: 'risks.html', icon: iconShieldExclamation() },
|
|
{ name: 'Incidenti', href: 'incidents.html', icon: iconBell() },
|
|
{ name: 'Policy', href: 'policies.html', icon: iconDocumentText() },
|
|
{ name: 'Supply Chain', href: 'supply-chain.html', icon: iconLink() },
|
|
]
|
|
},
|
|
{
|
|
label: 'Operativo',
|
|
items: [
|
|
{ name: 'Formazione', href: 'training.html', icon: iconAcademicCap() },
|
|
{ name: 'Asset', href: 'assets.html', icon: iconServer() },
|
|
{ name: 'Audit & Report', href: 'audit.html', icon: iconChartBar() },
|
|
]
|
|
},
|
|
{
|
|
label: 'Sistema',
|
|
items: [
|
|
{ name: 'Impostazioni', href: 'settings.html', icon: iconCog() },
|
|
]
|
|
}
|
|
];
|
|
|
|
let navHTML = '';
|
|
|
|
// Brand
|
|
navHTML += `
|
|
<div class="sidebar-brand">
|
|
<div class="sidebar-brand-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l7 3.12v4.7c0 4.83-3.23 9.36-7 10.57-3.77-1.21-7-5.74-7-10.57V6.3l7-3.12z"/><path d="M10 12.5l-2-2-1.41 1.41L10 15.32l5.41-5.41L14 8.5l-4 4z"/></svg>
|
|
</div>
|
|
<div>
|
|
<h1>NIS2 Agile</h1>
|
|
<span>Compliance Platform</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Nav sections
|
|
navHTML += '<nav class="sidebar-nav">';
|
|
for (const section of navItems) {
|
|
navHTML += `<div class="sidebar-nav-label">${section.label}</div>`;
|
|
for (const item of section.items) {
|
|
const isActive = currentPage === item.href ? 'active' : '';
|
|
navHTML += `<a href="${item.href}" class="${isActive}">${item.icon}<span>${item.name}</span></a>`;
|
|
}
|
|
}
|
|
navHTML += '</nav>';
|
|
|
|
// Footer with user info
|
|
navHTML += `
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-user">
|
|
<div class="sidebar-user-avatar" id="sidebar-user-avatar">--</div>
|
|
<div class="sidebar-user-info">
|
|
<div class="sidebar-user-name" id="sidebar-user-name">Caricamento...</div>
|
|
<div class="sidebar-user-role" id="sidebar-user-role">Utente</div>
|
|
</div>
|
|
<button class="sidebar-logout-btn" onclick="api.logout()" title="Esci">
|
|
<svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 001 1h6a1 1 0 100-2H4V5h5a1 1 0 100-2H3zm11.707 3.293a1 1 0 010 1.414L12.414 10l2.293 2.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M16 10a1 1 0 00-1-1H8a1 1 0 100 2h7a1 1 0 001-1z" clip-rule="evenodd"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.innerHTML = navHTML;
|
|
|
|
// Carica info utente
|
|
_loadUserInfo();
|
|
|
|
// Mobile toggle
|
|
_setupMobileToggle();
|
|
}
|
|
|
|
async function _loadUserInfo() {
|
|
try {
|
|
const result = await api.getMe();
|
|
if (result.success && result.data) {
|
|
const user = result.data;
|
|
const nameEl = document.getElementById('sidebar-user-name');
|
|
const avatarEl = document.getElementById('sidebar-user-avatar');
|
|
const roleEl = document.getElementById('sidebar-user-role');
|
|
if (nameEl) nameEl.textContent = user.full_name || user.email;
|
|
if (avatarEl) {
|
|
const initials = (user.full_name || user.email || '--')
|
|
.split(' ')
|
|
.map(w => w[0])
|
|
.slice(0, 2)
|
|
.join('')
|
|
.toUpperCase();
|
|
avatarEl.textContent = initials;
|
|
}
|
|
if (roleEl) roleEl.textContent = user.role === 'admin' ? 'Amministratore' : 'Utente';
|
|
}
|
|
} catch (e) {
|
|
// Silenzioso
|
|
}
|
|
}
|
|
|
|
function _setupMobileToggle() {
|
|
// Crea pulsante toggle se non esiste
|
|
if (!document.querySelector('.sidebar-toggle')) {
|
|
const toggle = document.createElement('button');
|
|
toggle.className = 'sidebar-toggle';
|
|
toggle.innerHTML = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>';
|
|
toggle.addEventListener('click', () => {
|
|
const sidebar = document.getElementById('sidebar');
|
|
if (sidebar) sidebar.classList.toggle('open');
|
|
});
|
|
document.body.appendChild(toggle);
|
|
}
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Auth Check
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
/**
|
|
* Verifica che l'utente sia autenticato. Se non lo e', redirige al login.
|
|
* @returns {boolean}
|
|
*/
|
|
function checkAuth() {
|
|
if (!api.isAuthenticated()) {
|
|
window.location.href = 'login.html';
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Utilities
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
/**
|
|
* Escape HTML per prevenire XSS.
|
|
* @param {string} str
|
|
* @returns {string}
|
|
*/
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.appendChild(document.createTextNode(str));
|
|
return div.innerHTML;
|
|
}
|
|
|
|
/**
|
|
* Debounce: ritarda l'esecuzione di fn fino a delay ms dopo l'ultima chiamata.
|
|
* @param {Function} fn
|
|
* @param {number} delay
|
|
* @returns {Function}
|
|
*/
|
|
function debounce(fn, delay = 300) {
|
|
let timer;
|
|
return function (...args) {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => fn.apply(this, args), delay);
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Restituisce la classe CSS per un punteggio di conformita'.
|
|
* @param {number} score - Valore 0-100
|
|
* @returns {string}
|
|
*/
|
|
function getScoreClass(score) {
|
|
if (score >= 80) return 'score-excellent';
|
|
if (score >= 60) return 'score-good';
|
|
if (score >= 40) return 'score-medium';
|
|
if (score >= 20) return 'score-low';
|
|
return 'score-critical';
|
|
}
|
|
|
|
/**
|
|
* Restituisce il colore esadecimale per un punteggio.
|
|
* @param {number} score - Valore 0-100
|
|
* @returns {string}
|
|
*/
|
|
function getScoreColor(score) {
|
|
if (score >= 80) return '#34a853';
|
|
if (score >= 60) return '#84cc16';
|
|
if (score >= 40) return '#fbbc04';
|
|
if (score >= 20) return '#f97316';
|
|
return '#ea4335';
|
|
}
|
|
|
|
/**
|
|
* Crea l'SVG per il gauge circolare del punteggio.
|
|
* @param {number} score - Valore 0-100
|
|
* @param {number} size - Dimensione in px (default 180)
|
|
* @returns {string} HTML
|
|
*/
|
|
function renderScoreGauge(score, size = 180) {
|
|
const radius = (size / 2) - 14;
|
|
const circumference = 2 * Math.PI * radius;
|
|
const offset = circumference - (score / 100) * circumference;
|
|
const color = getScoreColor(score);
|
|
const cls = getScoreClass(score);
|
|
|
|
return `
|
|
<div class="score-gauge ${cls}" style="width:${size}px;height:${size}px">
|
|
<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
<circle class="score-gauge-circle-bg" cx="${size/2}" cy="${size/2}" r="${radius}"/>
|
|
<circle class="score-gauge-circle" cx="${size/2}" cy="${size/2}" r="${radius}"
|
|
stroke="${color}"
|
|
stroke-dasharray="${circumference}"
|
|
stroke-dashoffset="${offset}"
|
|
style="--score-color: ${color}"/>
|
|
</svg>
|
|
<div class="score-gauge-value">
|
|
<div class="score-gauge-number">${Math.round(score)}</div>
|
|
<div class="score-gauge-label">Compliance</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// SVG Icons (inline, nessuna dipendenza esterna)
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function iconGrid() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 8a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zm6-6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zm0 8a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>';
|
|
}
|
|
|
|
function iconClipboardCheck() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconShieldExclamation() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconBell() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/></svg>';
|
|
}
|
|
|
|
function iconDocumentText() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconLink() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconAcademicCap() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0z"/></svg>';
|
|
}
|
|
|
|
function iconServer() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconChartBar() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zm6-4a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zm6-3a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/></svg>';
|
|
}
|
|
|
|
function iconCog() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconPlus() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"/></svg>';
|
|
}
|
|
|
|
function iconSparkles() {
|
|
return '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm7-10a1 1 0 01.967.744L14.146 7.2 17.5 8.512a1 1 0 010 1.836l-3.354 1.311-1.18 4.456a1 1 0 01-1.932 0L9.854 11.66 6.5 10.348a1 1 0 010-1.836l3.354-1.311 1.18-4.456A1 1 0 0112 2z"/></svg>';
|
|
}
|