Replace all MUI/x-date-pickers components in AnalyticsClient.tsx and
WorldMapInner.tsx with shadcn/ui + Tailwind equivalents: local
DateTimePicker (Popover + Calendar + time input using dayjs), interval
toggle group (Button), hosts multi-select (Command + Popover combobox),
pagination (prev/next Buttons), CSS spinner, Skeleton, Tooltip, Table,
Badge, and sonner toast. All business logic and chart configs unchanged.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Create tests/e2e/mobile/mobile-layout.spec.ts with 8 tests covering
AppBar/hamburger visibility, drawer open/close, mobile card rendering,
PageHeader button layout, dialog width, card actions, and analytics overflow.
- Fix AnalyticsClient: make Autocomplete full-width on mobile, add
overflow:hidden to outer Stack to prevent body scrollWidth growth.
- Fix WorldMapInner: remove hard-coded minWidth:400 that caused 73px
horizontal overflow on 393px iPhone 15 viewport.
- Fix DashboardLayoutClient: add overflowX:hidden to main content area
to contain chart library elements that exceed viewport width.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Analytics default interval changed to 1h
- Add 'Custom' toggle option with datetime-local pickers (pre-filled to last 24h)
- Refactor analytics-db: buildWhere now takes from/to unix timestamps instead of Interval
- Export INTERVAL_SECONDS from analytics-db for route reuse
- All 6 API routes accept from/to params (fallback to interval if absent)
- Timeline bucket size computed from duration rather than hardcoded per interval
- Fix map country click highlight: bake isSelected into GeoJSON features (data-driven)
instead of relying on Layer filter prop updates (unreliable in react-map-gl v8)
- Split highlight into countries-selected (data-driven) and countries-hover (filter-driven)
- Show tooltip at country centroid when selected via table, hover takes precedence
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Use Popup component for map-anchored tooltips (moves with lat/lng)
- Use filter+highlight layer for hover instead of feature state
- fitBounds to [-168,-56,168,74] to trim polar dead zones
- Country no-data color #1e293b vs ocean #0a1628 — clear contrast
- Visible borders rgba(148,163,184,0.18)
- Add 1h and 12h interval buttons to analytics UI
- formatTs handles 1h/12h with time-only format
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace D3/SVG choropleth with react-map-gl MapGL component
- Use Natural Earth projection for proper world view
- Embed traffic data (norm, total, blocked, alpha2) as GeoJSON properties
- Use feature state only for hover highlighting
- Add 1h and 12h interval options to analytics
- Add worker-src blob: to CSP for MapLibre web workers
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Dark ocean background (#0b1628) with country borders
- Three-stop color gradient (dark blue → blue → sky) with power curve
distribution so low-traffic countries are still visible
- Hover highlights country in sky-300 with smooth CSS transition
- Floating tooltip on hover: flag emoji, country name, requests, blocked
- Color legend (Low → High) below the map
- Country names lookup table for all ~180 countries
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fetching from cdn.jsdelivr.net was blocked by connect-src 'self'.
Copy countries-110m.json from world-atlas npm package into public/geo/
and reference it as /geo/countries-110m.json instead.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Parse Caddy access logs every 30s into traffic_events SQLite table
- GeoIP country lookup via maxmind (GeoLite2-Country.mmdb)
- 90-day retention with automatic purge
- Analytics page with interval (24h/7d/30d) and per-host filtering:
- Stats cards: total requests, unique IPs, blocked count, block rate
- Requests-over-time area chart (ApexCharts)
- SVG world choropleth map (d3-geo + topojson-client, React 19 compatible)
- Top countries table with flag emojis
- HTTP protocol donut chart
- Top user agents horizontal bar chart
- Recent blocked requests table with pagination
- Traffic (24h) summary card on Overview page linking to analytics
- 7 authenticated API routes under /api/analytics/
- Share caddy-logs volume with web container (read-only)
- group_add caddy GID to web container for log file read access
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
