220 lines
11 KiB
HTML
220 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description"
|
|
content="OTRS Turbo — Interfaccia moderna per gestione rapida ticket. Accesso diretto al database OTRS.">
|
|
<title>OTRS Turbo — Gestione Ticket Veloce</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Sidebar Navigation -->
|
|
<nav class="sidebar" id="sidebar">
|
|
<div class="sidebar-brand" style="border-bottom:none; padding-bottom:4px; display:flex; align-items:center; justify-content:space-between;">
|
|
<div style="display:flex; align-items:center; gap:var(--space-md);">
|
|
<div class="brand-icon">⚡</div>
|
|
<span class="brand-text">OTRS Turbo</span>
|
|
</div>
|
|
<button id="btn-close-end-of-day" class="btn-brand-action" title="Chiudi i ticket inseriti nel gruppo CHIUDI A FINE GIORNATA">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px; height:18px;">
|
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" />
|
|
<rect x="9" y="3" width="6" height="4" rx="1" />
|
|
<path d="M9 12h6M9 16h4" />
|
|
<line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="sidebar-timer" id="daily-timer"
|
|
style="padding:var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg); border-bottom:1px solid var(--border-subtle); font-size:0.75rem; color:var(--text-secondary); font-family:monospace; line-height:1.2;">
|
|
<span class="timer-display">0 / 480 | 480</span>
|
|
</div>
|
|
|
|
<ul class="nav-menu">
|
|
<li>
|
|
<a href="#/dashboard" class="nav-link active" data-view="dashboard" id="nav-dashboard">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7" rx="1" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1" />
|
|
</svg>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/tickets" class="nav-link" data-view="tickets" id="nav-tickets">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" />
|
|
<rect x="9" y="3" width="6" height="4" rx="1" />
|
|
<path d="M9 12h6M9 16h4" />
|
|
</svg>
|
|
<span>Ticket</span>
|
|
<span class="nav-badge" id="open-ticket-count"></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/tickets/my" class="nav-link" data-view="tickets-my" id="nav-tickets-my">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
<span>A mio carico</span>
|
|
<span class="nav-badge" id="my-ticket-count"></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/tickets/groups" class="nav-link" data-view="ticket-groups" id="nav-ticket-groups">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</svg>
|
|
<span>Gruppi Ticket</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/tickets/new" class="nav-link" data-view="new-ticket" id="nav-new-ticket">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 8v8M8 12h8" />
|
|
</svg>
|
|
<span>Nuovo Ticket</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/tickets/bulk" class="nav-link" data-view="bulk-tickets" id="nav-bulk-tickets">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
<span>Apertura Massiva</span>
|
|
</a>
|
|
</li>
|
|
<hr>
|
|
<li>
|
|
<a href="#/mail-management" class="nav-link" data-view="mail-management" id="nav-mail-management">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
|
<polyline points="22,6 12,13 2,6" />
|
|
</svg>
|
|
<span>Gestione Mail</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/activity" class="nav-link" data-view="activity" id="nav-activity">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
<span>Storico Attività Turbo</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-footer-info">
|
|
<div class="connection-dot" id="connection-status"></div>
|
|
<span class="connection-text" id="connection-text">Connessione DB...</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content" id="main-content">
|
|
<!-- Top Bar -->
|
|
<header class="topbar" id="topbar" style="height: auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0;">
|
|
<div class="topbar-main" style="display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--topbar-height); padding: 0 var(--space-xl);">
|
|
<div class="topbar-left" style="display:flex; align-items:center; gap:var(--space-md);">
|
|
<h1 class="page-title" id="page-title">Dashboard</h1>
|
|
<div style="display:flex; align-items:center; gap:var(--space-xs);">
|
|
<select class="form-select" id="active-agent-select"
|
|
style="padding: 6px 32px 6px 12px; font-size: 0.85rem; height: 36px; min-width: 180px; margin: 0; background-position: right 10px center; border-color: var(--border-light);"></select>
|
|
<button class="btn btn-ghost btn-sm" id="refresh-lookups-btn"
|
|
style="height:36px; padding:0 10px; min-width:36px;" title="Aggiorna dati locali (code, utenti)">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;">
|
|
<path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" />
|
|
</svg>
|
|
</button>
|
|
<select class="form-select" id="theme-select"
|
|
style="padding: 6px 32px 6px 12px; font-size: 0.85rem; height: 36px; min-width: 130px; margin: 0; background-position: right 10px center; border-color: var(--border-light);">
|
|
<option value="light">Tema Chiaro</option>
|
|
<option value="dark">Tema Scuro</option>
|
|
<option value="rosso">Rosso</option>
|
|
<option value="naturale">Naturale</option>
|
|
<option value="ice">Ice</option>
|
|
<option value="autunno">Autunno</option>
|
|
<option value="fairytale">Fairytale</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="search-bar" id="global-search-container">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="M21 21l-4.35-4.35" />
|
|
</svg>
|
|
<input type="text" class="search-input" id="global-search"
|
|
placeholder="Cerca ticket (numero, titolo o corpo)..." style="padding-right: 32px;" />
|
|
<button id="global-search-clear"
|
|
style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); display: none; align-items: center; justify-content: center;"
|
|
title="Cancella ricerca">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
style="width:14px;height:14px;display:block;">
|
|
<path d="M18 6L6 18M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="topbar-new-ticket" onclick="window.location.hash='#/tickets/new'">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;">
|
|
<path d="M12 5v14M5 12h14" />
|
|
</svg>
|
|
Nuovo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Tabs Bar -->
|
|
<div id="tabs-bar" class="tabs-bar" style="display:none; border-top: 1px solid var(--border-subtle);"></div>
|
|
</header>
|
|
|
|
<!-- View Container -->
|
|
<div class="view-container" id="view-container">
|
|
<!-- Dynamic content rendered here by JS -->
|
|
<div class="loading-screen" id="loading-screen">
|
|
<div class="spinner"></div>
|
|
<p>Caricamento...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container" id="toast-container"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="/js/components/toast.js"></script>
|
|
<script src="/js/components/filters.js"></script>
|
|
<script src="/js/views/dashboard.js"></script>
|
|
<script src="/js/views/ticketList.js"></script>
|
|
<script src="/js/views/ticketDetail.js"></script>
|
|
<script src="/js/views/ticketCreate.js"></script>
|
|
<script src="/js/views/ticketBulk.js"></script>
|
|
<script src="/js/views/activityLog.js"></script>
|
|
<script src="/js/views/emailCompose.js"></script>
|
|
<script src="/js/views/mailManagement.js"></script>
|
|
<script src="/js/views/ticketGroups.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
|
|
</html> |