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>
143 lines
4.8 KiB
TypeScript
143 lines
4.8 KiB
TypeScript
/**
|
||
* 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),
|
||
})),
|
||
});
|
||
}
|