110 lines
5.8 KiB
HTML
110 lines
5.8 KiB
HTML
{{ define "content" }}
|
|
<div class="page-header">
|
|
<h1>Dashboard Overview</h1>
|
|
</div>
|
|
|
|
<div class="stats-grid" style="margin-bottom: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
|
|
<div class="stat-card" style="background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; display: flex; align-items: center; gap: 1rem;">
|
|
<div class="stat-icon" style="background: rgba(59, 130, 246, 0.1); color: var(--accent); padding: 0.75rem; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Total Items</p>
|
|
<h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">
|
|
{{ if .Stats }}{{ .Stats.Items }}{{ else }}0{{ end }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card" style="background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; display: flex; align-items: center; gap: 1rem;">
|
|
<div class="stat-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success); padding: 0.75rem; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Active Projects</p>
|
|
<h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">
|
|
{{ if .Stats }}{{ .Stats.Projects }}{{ else }}0{{ end }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card" style="background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; display: flex; align-items: center; gap: 1rem;">
|
|
<div class="stat-icon" style="background: rgba(245, 158, 11, 0.1); color: #f59e0b; padding: 0.75rem; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Locations</p>
|
|
<h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">
|
|
{{ if .Stats }}{{ .Stats.Locations }}{{ else }}0{{ end }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-split">
|
|
<div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem;">
|
|
<h2 style="font-size: 1.25rem; margin-bottom: 1rem; color: var(--text);">Locations</h2>
|
|
<div class="table-container">
|
|
<table class="inner-table" style="margin-top: 0; border-radius: 8px; width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: left; padding: 0.75rem 1rem; background: #111827;">Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dash-locations-body">
|
|
<tr><td class="table-loader" style="padding: 1.5rem; text-align: center; color: var(--text-muted);">Loading locations...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem;">
|
|
<h2 style="font-size: 1.25rem; margin-bottom: 1rem; color: var(--text);">Active Projects</h2>
|
|
<div class="table-container">
|
|
<table class="inner-table" style="margin-top: 0; border-radius: 8px; width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: left; padding: 0.75rem 1rem; background: #111827;">Project Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dash-projects-body">
|
|
<tr><td class="table-loader" style="padding: 1.5rem; text-align: center; color: var(--text-muted);">Loading projects...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dash-details-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 id="dash-modal-title">Details</h2>
|
|
<div class="table-container">
|
|
<table class="inner-table" style="width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: left; padding: 0.75rem 1rem;">Item</th>
|
|
<th style="text-align: right; width: 100px; padding: 0.75rem 1rem;">Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dash-modal-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="button-group">
|
|
<button type="button" class="btn btn-secondary" onclick="document.getElementById('dash-details-modal').classList.remove('show')">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
if (typeof handleDashboardView === "function") {
|
|
handleDashboardView();
|
|
}
|
|
if (window.htmx) {
|
|
htmx.on("htmx:afterOnLoad", function() {
|
|
if (typeof handleDashboardView === "function") {
|
|
handleDashboardView();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{{ end }} |