wulf-pulse/app/api/dashboard/trends/route.ts
lorentz 9bfb57553d feat(design): nav/visual overhaul — brand layer, /status route, KPI dashboard, TanStack DataTable
Major UI refresh on the nav-design-improvements branch.  Drops 2013-era
inline styles and consolidates patterns behind shared primitives.

Foundation
- New Wulf brand layer in app/styles/brand.css repointing --primary to
  the standards-guide blue (#0075AD) with utility classes for numerics
  (.num / .num-lg / .num-xl), metric labels, surface tints, and the
  wolf-mark watermark
- Switch primary face to IBM Plex Sans + IBM Plex Mono via next/font;
  Helvetica/Arial stays in the fallback chain for brand fidelity
- Wordmark subtitle changed from "PSA Management System" to
  "Operations console" everywhere it appeared
- Tagline footer ("Don't be afraid to cry") on every non-mobile page

Status moved out of /dashboard
- New /status route with integration tiles grouped by category, sync
  health table, worker pulse cards (analyzer / RMM / sync scheduler),
  token-expiry section, conditional alert banner
- Top-bar StatusIndicator polls integration health every 60s and links
  to /status
- INTEGRATIONS_DISABLED env var suppresses operator-disabled
  integrations (e.g. SentinelOne) — no failure noise from broken-on-
  purpose entries.  Aliases supported (sentinelone → s1, etc.)

Dashboard rebuilt around KPIs
- /api/dashboard/overview adds today snapshot (opened, resolved, open
  total, SLA breaches) with delta math
- /api/dashboard/trends backs queue × priority heatmap, 30-day volume
  area chart, 30-day mean resolution time line chart, today's active
  engineers leaderboard

Components
- StatusBadge driven by lib/status-registry.ts (priority, ticket
  status, classification, source, company type, publish, active /
  yes-no / billable / approved registries)
- StatusLight (8px geometric square, five states, three sizes)
- EmptyState (shared dashed panel with icon + headline + optional CTA)
- KpiCard with delta indicator and tonal left border
- WulfMark (mark / wordmark variants from /public/branding)
- Skeleton helpers (SkeletonRow / Rows / Card / Chart / Header / Table)

Navigation
- Admin flat link → dropdown with seven shortcuts
- New UserMenu (initials avatar, role badge, settings + sign-out)
- Active-route highlight is now a 2px Wulf-blue underline echoing the
  PageHeader rule (consistent across flat links and submenu triggers);
  active children inside dropdowns use bg-primary/10
- Submenu width is content-driven (min-w 320 / max-w 440, single col)
- Mobile hamburger via Sheet, reuses the same nav config

Pages migrated
- 16 admin sub-pages adopt PageHeader (with accent prop)
- /addigy-devices: shadcn Table + Checkbox; PageHeader; status badges
- 10 raw <table> blocks across admin/sync/* migrated to shadcn Table
- /veeam-analysis migrated to shadcn Table (kept its expansion logic)
- Detail routes (analyzer ticket, analyzer analysis) get breadcrumbs

DataTable
- Rewritten on @tanstack/react-table v8 in manual mode; external API
  unchanged so all 10+ data-browser pages keep working
- New optional props for drill-down rows: getRowCanExpand + renderSubRow

Mobile
- Multi-select Popover gets max-w-[calc(100vw-1rem)] and
  collisionPadding so dropdowns can't overflow narrow viewports
- CI filter bar wraps and shrinks; stat pill flows below

Docs
- New ARCHITECTURE.md (load-bearing reference for runtime, data flow,
  workers, analyzer pipeline, auth, deployment, gotchas)
- New DESIGN.md (tokens, layout, navigation IA, component vocabulary,
  rolling backlog of remaining cleanup)
- CLAUDE.md refreshed with pointers to the two new docs and the
  INTEGRATIONS_DISABLED operator config note
- shadcn registry registered as project-level MCP server (.mcp.json)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-03 09:33:13 -04:00

143 lines
4.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* GET /api/dashboard/trends
* Operational trend data backing /dashboard's chart row + queue posture.
*
* volumeByDay — last 30 days, ticket creation count per day
* resolutionByDay — last 30 days, mean resolution hours per day completed
* queueHeatmap — open tickets grouped by (queue, priority)
* activeEngineers — top engineers today by hours logged
*
* All queries run in parallel. ~50 ms total against a warm DB.
*/
import { NextResponse } from 'next/server';
import { requireAuth } from '@/lib/auth-utils';
import postgresClient from '@/lib/services/postgres-client';
const TREND_DAYS = 30;
const TOP_QUEUES = 10;
const TOP_ENGINEERS = 8;
export async function GET() {
const { error } = await requireAuth();
if (error) return error;
const [volumeRes, resolutionRes, heatmapRes, engineersRes] = await Promise.all([
postgresClient.query<{ d: string; count: string }>(
`WITH days AS (
SELECT generate_series(
CURRENT_DATE - INTERVAL '${TREND_DAYS - 1} days',
CURRENT_DATE,
INTERVAL '1 day'
)::date AS d
)
SELECT d::text AS d,
COALESCE(COUNT(t.id), 0)::text AS count
FROM days
LEFT JOIN tickets t
ON t.create_date::date = days.d
AND (t.is_deleted = false OR t.is_deleted IS NULL)
GROUP BY d
ORDER BY d`,
),
postgresClient.query<{ d: string; avg_hours: string | null }>(
`WITH days AS (
SELECT generate_series(
CURRENT_DATE - INTERVAL '${TREND_DAYS - 1} days',
CURRENT_DATE,
INTERVAL '1 day'
)::date AS d
)
SELECT d::text AS d,
AVG(EXTRACT(EPOCH FROM (t.completed_date - t.create_date)) / 3600.0)::text AS avg_hours
FROM days
LEFT JOIN tickets t
ON t.completed_date::date = days.d
AND t.create_date IS NOT NULL
AND (t.is_deleted = false OR t.is_deleted IS NULL)
GROUP BY d
ORDER BY d`,
),
postgresClient.query<{
queue_id: number | null;
queue_label: string | null;
priority: number | null;
count: string;
}>(
`SELECT t.queue_id,
q.label AS queue_label,
t.priority,
COUNT(*)::text AS count
FROM tickets t
LEFT JOIN queues q ON q.value = t.queue_id
WHERE t.completed_date IS NULL
AND (t.is_deleted = false OR t.is_deleted IS NULL)
GROUP BY t.queue_id, q.label, t.priority
ORDER BY COUNT(*) DESC`,
),
postgresClient.query<{
resource_id: string;
resource_name: string;
hours: string;
tickets_touched: string;
}>(
`SELECT te.resource_id::text,
COALESCE(NULLIF(TRIM(r.first_name || ' ' || COALESCE(r.last_name, '')), ''),
r.email,
'Resource ' || te.resource_id) AS resource_name,
SUM(te.hours_worked)::text AS hours,
COUNT(DISTINCT te.ticket_id)::text AS tickets_touched
FROM time_entries te
LEFT JOIN resources r ON r.id = te.resource_id
WHERE te.entry_date::date = CURRENT_DATE
AND te.hours_worked > 0
GROUP BY te.resource_id, r.first_name, r.last_name, r.email
ORDER BY SUM(te.hours_worked) DESC
LIMIT ${TOP_ENGINEERS}`,
),
]);
// Heatmap: top N queues by open volume × priority columns
const heatmapRows = heatmapRes.rows;
const queueTotals = new Map<number, { id: number; label: string; total: number }>();
for (const row of heatmapRows) {
if (row.queue_id == null) continue;
const t = queueTotals.get(row.queue_id) ?? {
id: row.queue_id,
label: row.queue_label ?? `Queue ${row.queue_id}`,
total: 0,
};
t.total += parseInt(row.count, 10);
queueTotals.set(row.queue_id, t);
}
const topQueues = [...queueTotals.values()]
.sort((a, b) => b.total - a.total)
.slice(0, TOP_QUEUES);
const heatmap = topQueues.map((q) => {
const cells: Record<number, number> = {};
for (const row of heatmapRows) {
if (row.queue_id !== q.id || row.priority == null) continue;
cells[row.priority] = (cells[row.priority] ?? 0) + parseInt(row.count, 10);
}
return { queueId: q.id, queueLabel: q.label, total: q.total, byPriority: cells };
});
return NextResponse.json({
volumeByDay: volumeRes.rows.map((r) => ({
date: r.d,
count: parseInt(r.count, 10),
})),
resolutionByDay: resolutionRes.rows.map((r) => ({
date: r.d,
avgHours: r.avg_hours == null ? null : Math.round(parseFloat(r.avg_hours) * 10) / 10,
})),
queueHeatmap: heatmap,
activeEngineers: engineersRes.rows.map((r) => ({
resourceId: r.resource_id,
name: r.resource_name,
hours: Math.round(parseFloat(r.hours) * 10) / 10,
ticketsTouched: parseInt(r.tickets_touched, 10),
})),
});
}