feat: Chart.js donut/bar charts, Flatpickr dates, skeleton loaders, CSP update

- DashboardView: Charts row with 3 panels (priority donut, status donut, category bar)
  using Chart.js from CDN; data passed inline from PHP stats; TDS color palette
- DashboardView: Flatpickr date picker on advanced search date fields with TDS theme overrides
- dashboard.js: showTableSkeleton() shows lt-skeleton-row during filter-triggered reloads
  and auto-refresh; called before all location.reload() with delay
- dashboard.css: Flatpickr TDS theme overrides (dark BG, monospace font, TDS accent colors)
- SecurityHeadersMiddleware: Added cdn.jsdelivr.net to script-src and style-src CSP
  to allow Chart.js and Flatpickr from CDN

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-04 17:45:02 -04:00
parent c15defc09b
commit 04b019a8e1
4 changed files with 219 additions and 9 deletions
+36
View File
@@ -361,3 +361,39 @@ kbd {
letter-spacing: 0.08em;
color: var(--text-muted);
}
/* ── Flatpickr TDS theme overrides ──────────────────────────────── */
.flatpickr-calendar {
background: var(--bg-secondary, #0a0e14) !important;
border: 1px solid var(--border-color, rgba(0,255,65,0.25)) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
border-radius: 0 !important;
font-family: var(--font-mono, monospace) !important;
}
.flatpickr-day {
color: var(--text-secondary, #8fa3b1) !important;
border-radius: 0 !important;
}
.flatpickr-day.today {
border-color: var(--accent-cyan, #00d4ff) !important;
color: var(--accent-cyan, #00d4ff) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
background: var(--accent-orange, #ff8c00) !important;
border-color: var(--accent-orange, #ff8c00) !important;
color: #000 !important;
}
.flatpickr-day:hover {
background: rgba(0,212,255,0.1) !important;
color: var(--text-primary, #e8f4f8) !important;
}
.flatpickr-months, .flatpickr-weekdays {
background: var(--bg-tertiary, #1a1f2e) !important;
}
.flatpickr-current-month, .flatpickr-weekday {
color: var(--text-muted, #5a7a8a) !important;
font-family: var(--font-mono, monospace) !important;
}
.flatpickr-prev-month svg path, .flatpickr-next-month svg path {
fill: var(--text-muted) !important;
}