initital commit
This commit is contained in:
@@ -0,0 +1,223 @@
|
||||
{{define "dashboard.html"}}
|
||||
{{template "base" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "dashboard-title"}}License Management{{end}}
|
||||
|
||||
{{define "dashboard-content"}}
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">{{.Total}}</div>
|
||||
<div class="stat-label">Total Licenses</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value" style="color:#4d99ff">{{.ActiveCount}}</div>
|
||||
<div class="stat-label">Active</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value" style="color:var(--danger)">{{.RevokedCount}}</div>
|
||||
<div class="stat-label">Revoked</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">All Licenses</span>
|
||||
<span id="results-count" style="font-size:11px;color:var(--muted);font-family:var(--mono)"></span>
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" id="search" placeholder="Search key, customer, product…" oninput="applyFilters()">
|
||||
</div>
|
||||
<div class="filter-chips">
|
||||
<button class="chip chip-active selected" data-filter="status" data-value="" onclick="setChip(this,'status')">All</button>
|
||||
<button class="chip" data-filter="status" data-value="active" onclick="setChip(this,'status')">Active</button>
|
||||
<button class="chip" data-filter="status" data-value="revoked" onclick="setChip(this,'status')">Revoked</button>
|
||||
</div>
|
||||
<div class="filter-chips">
|
||||
<button class="chip chip-active selected" data-filter="type" data-value="" onclick="setChip(this,'type')">All Types</button>
|
||||
<button class="chip" data-filter="type" data-value="expiry" onclick="setChip(this,'type')">Expiry</button>
|
||||
<button class="chip" data-filter="type" data-value="usage" onclick="setChip(this,'type')">Usage</button>
|
||||
</div>
|
||||
<button class="btn btn-ghost btn-sm" onclick="clearFilters()" id="clear-btn" style="display:none">✕ Clear</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table id="license-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" data-col="0" onclick="sortTable(0)">Key <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="1" onclick="sortTable(1)">Customer <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="2" onclick="sortTable(2)">Product <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="3" onclick="sortTable(3)">Type <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="4" onclick="sortTable(4)">Status <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="5" onclick="sortTable(5)">Expires / Uses <span class="sort-icon">↕</span></th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="license-tbody">
|
||||
{{range .Licenses}}
|
||||
{{template "license_row.html" .}}
|
||||
{{else}}
|
||||
<tr id="empty-row"><td colspan="7" style="color:var(--muted);text-align:center;padding:32px">No licenses yet — issue your first one.</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="no-results" style="display:none;text-align:center;padding:40px;color:var(--muted);font-size:13px">
|
||||
No licenses match your filters.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-search {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
.filter-search input {
|
||||
padding-left: 32px;
|
||||
width: 100%;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
padding: 8px 12px 8px 32px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.filter-search input:focus { border-color: var(--accent); }
|
||||
.filter-chips { display: flex; gap: 6px; }
|
||||
.chip {
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.chip:hover { color: var(--text); border-color: var(--muted); }
|
||||
.chip.selected { border-color: var(--accent); color: var(--accent); background: rgba(0,255,157,0.07); }
|
||||
|
||||
th.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
th.sortable:hover { color: var(--text); }
|
||||
th.sort-asc .sort-icon::after { content: ' ↑'; }
|
||||
th.sort-desc .sort-icon::after { content: ' ↓'; }
|
||||
.sort-icon { color: var(--muted); font-size: 10px; }
|
||||
th.sort-asc .sort-icon,
|
||||
th.sort-desc .sort-icon { color: var(--accent); }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// --- State ---
|
||||
let sortCol = -1;
|
||||
let sortDir = 1; // 1 = asc, -1 = desc
|
||||
let filters = { status: '', type: '' };
|
||||
|
||||
// --- Sort ---
|
||||
function sortTable(col) {
|
||||
if (sortCol === col) {
|
||||
sortDir *= -1;
|
||||
} else {
|
||||
sortCol = col;
|
||||
sortDir = 1;
|
||||
}
|
||||
|
||||
// Update header icons
|
||||
document.querySelectorAll('th.sortable').forEach(th => {
|
||||
th.classList.remove('sort-asc', 'sort-desc');
|
||||
});
|
||||
const th = document.querySelector(`th[data-col="${col}"]`);
|
||||
th.classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
|
||||
|
||||
const tbody = document.getElementById('license-tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr[data-key]'));
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const aVal = a.children[col]?.dataset?.sort || a.children[col]?.innerText.trim() || '';
|
||||
const bVal = b.children[col]?.dataset?.sort || b.children[col]?.innerText.trim() || '';
|
||||
return aVal.localeCompare(bVal, undefined, { numeric: true }) * sortDir;
|
||||
});
|
||||
|
||||
rows.forEach(r => tbody.appendChild(r));
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// --- Filter ---
|
||||
function setChip(el, filterKey) {
|
||||
document.querySelectorAll(`.chip[data-filter="${filterKey}"]`).forEach(c => c.classList.remove('selected'));
|
||||
el.classList.add('selected');
|
||||
filters[filterKey] = el.dataset.value;
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const search = document.getElementById('search').value.toLowerCase().trim();
|
||||
const tbody = document.getElementById('license-tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr[data-key]'));
|
||||
let visible = 0;
|
||||
|
||||
rows.forEach(row => {
|
||||
const text = row.dataset.search || '';
|
||||
const status = row.dataset.status || '';
|
||||
const type = row.dataset.type || '';
|
||||
|
||||
const matchSearch = !search || text.includes(search); // text is pre-lowercased by server
|
||||
const matchStatus = !filters.status || status === filters.status;
|
||||
const matchType = !filters.type || type === filters.type;
|
||||
|
||||
const show = matchSearch && matchStatus && matchType;
|
||||
row.style.display = show ? '' : 'none';
|
||||
if (show) visible++;
|
||||
});
|
||||
|
||||
// Update results count
|
||||
const total = rows.length;
|
||||
const countEl = document.getElementById('results-count');
|
||||
countEl.textContent = visible === total
|
||||
? `${total} license${total !== 1 ? 's' : ''}`
|
||||
: `${visible} of ${total} licenses`;
|
||||
|
||||
// Show/hide empty state
|
||||
document.getElementById('no-results').style.display = visible === 0 && total > 0 ? '' : 'none';
|
||||
|
||||
// Show clear button if any filter active
|
||||
const anyFilter = search || filters.status || filters.type;
|
||||
document.getElementById('clear-btn').style.display = anyFilter ? '' : 'none';
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
document.getElementById('search').value = '';
|
||||
filters = { status: '', type: '' };
|
||||
document.querySelectorAll('.chip').forEach(c => {
|
||||
c.classList.toggle('selected', c.dataset.value === '');
|
||||
});
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// Init count on load
|
||||
document.addEventListener('DOMContentLoaded', applyFilters);
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user