feat(03-02): replace mobile dashboard page with 3-section layout
- Drop legacy recharts/chart sections, priority breakdown, SLA bars, queue list, recent activity - Add 2x2 KPI grid (DASH-01), Needs Attention horizontal strip (DASH-02), Worker/backup status row (DASH-03) - Wire KpiCardMobile, NeedsAttentionStrip, WorkerStatusRow against /api/mobile/dashboard - Inline error state with Retry button, spinner while loading, refresh button in H1 row - Zero recharts imports (DASH-04); 118 lines
This commit is contained in:
parent
464c02a7f4
commit
52562503c0
1 changed files with 91 additions and 164 deletions
|
|
@ -1,191 +1,118 @@
|
|||
'use client';
|
||||
|
||||
/* /mobile/dashboard — phase 03 (DASH-01..04).
|
||||
*
|
||||
* Three sections, top-to-bottom:
|
||||
* 1. 2×2 KPI grid (DASH-01)
|
||||
* 2. Needs Attention (DASH-02)
|
||||
* 3. Worker/backup row (DASH-03)
|
||||
*
|
||||
* No charts on phone widths (DASH-04). Header + bottom nav are provided
|
||||
* by app/mobile/layout.tsx; this page only renders the H1 and body. */
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { RefreshCw, AlertCircle, Clock, CheckCircle2, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface DashboardData {
|
||||
open_total: number;
|
||||
by_status: { status: number; label: string; count: number }[];
|
||||
by_queue: { queue_id: number; label: string; count: number }[];
|
||||
by_priority: { priority: number; label: string; count: number }[];
|
||||
recent: {
|
||||
id: number; ticket_number: string; title: string; status: number; priority: number;
|
||||
last_activity_date: string; company_name: string; queue_label: string; assigned_to: string;
|
||||
}[];
|
||||
sla: { response_met: number; response_total: number; resolution_met: number; resolution_total: number };
|
||||
}
|
||||
|
||||
const PRIORITY_COLOR: Record<number, string> = {
|
||||
1: 'bg-slate-300', // Standard
|
||||
2: 'bg-slate-300', // Medium
|
||||
3: 'bg-slate-300', // Standard
|
||||
4: 'bg-red-500', // Critical
|
||||
6: 'bg-orange-400', // High
|
||||
7: 'bg-purple-500', // Security Event
|
||||
8: 'bg-yellow-400', // Minor Service
|
||||
9: 'bg-orange-500', // Major Service
|
||||
10: 'bg-blue-400', // Installation
|
||||
11: 'bg-pink-400', // Fast Track
|
||||
};
|
||||
const PRIORITY_TEXT: Record<number, string> = {
|
||||
1: 'text-slate-500', // Standard
|
||||
2: 'text-slate-500', // Medium
|
||||
3: 'text-slate-500', // Standard
|
||||
4: 'text-red-600', // Critical
|
||||
6: 'text-orange-500', // High
|
||||
7: 'text-purple-600', // Security Event
|
||||
8: 'text-yellow-600', // Minor Service
|
||||
9: 'text-orange-600', // Major Service
|
||||
10: 'text-blue-600', // Installation
|
||||
11: 'text-pink-600', // Fast Track
|
||||
};
|
||||
|
||||
function pct(n: number, d: number) {
|
||||
return d === 0 ? 0 : Math.round((n / d) * 100);
|
||||
}
|
||||
function relTime(ts: string) {
|
||||
const diff = Date.now() - new Date(ts).getTime();
|
||||
const m = Math.floor(diff / 60000);
|
||||
if (m < 60) return `${m}m ago`;
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return `${h}h ago`;
|
||||
return `${Math.floor(h / 24)}d ago`;
|
||||
}
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { KpiCardMobile } from '@/components/mobile/KpiCardMobile';
|
||||
import { NeedsAttentionStrip } from '@/components/mobile/NeedsAttentionStrip';
|
||||
import { WorkerStatusRow } from '@/components/mobile/WorkerStatusRow';
|
||||
import type { MobileDashboardResponse } from '@/app/api/mobile/dashboard/route';
|
||||
|
||||
export default function MobileDashboard() {
|
||||
const [data, setData] = useState<DashboardData | null>(null);
|
||||
const [data, setData] = useState<MobileDashboardResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true); setError(null);
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const r = await fetch('/api/mobile/dashboard');
|
||||
if (!r.ok) throw new Error('Failed to load');
|
||||
setData(await r.json());
|
||||
} catch (e) { setError(String(e)); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
if (!r.ok) {
|
||||
const body = (await r.json().catch(() => ({}))) as { error?: string; message?: string };
|
||||
throw new Error(body.message ?? body.error ?? `HTTP ${r.status}`);
|
||||
}
|
||||
setData((await r.json()) as MobileDashboardResponse);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
if (loading) return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
if (error) return (
|
||||
<div className="p-4 text-sm text-destructive">{error}</div>
|
||||
);
|
||||
if (!data) return null;
|
||||
|
||||
const respPct = pct(data.sla.response_met, data.sla.response_total);
|
||||
const resPct = pct(data.sla.resolution_met, data.sla.resolution_total);
|
||||
useEffect(() => { void load(); }, []);
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-bold">Ticket Dashboard</h1>
|
||||
<button onClick={load} className="p-2 rounded-full hover:bg-accent">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
<h1 className="text-xl font-bold">Dashboard</h1>
|
||||
<button
|
||||
type="button"
|
||||
onClick={load}
|
||||
disabled={loading}
|
||||
aria-label="Refresh dashboard"
|
||||
className="p-2 rounded-full hover:bg-accent disabled:opacity-40"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Open total */}
|
||||
<div className="rounded-2xl border bg-primary/5 p-5 flex items-center gap-4">
|
||||
<div className="rounded-xl bg-primary/10 p-3">
|
||||
<AlertCircle className="w-7 h-7 text-primary" />
|
||||
{error && !loading && (
|
||||
<div className="rounded-xl border border-destructive/50 bg-destructive/5 p-4">
|
||||
<p className="text-sm font-medium text-destructive">Failed to load</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">{error}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={load}
|
||||
className="mt-3 text-xs font-medium text-primary hover:underline"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-4xl font-bold">{data.open_total}</p>
|
||||
<p className="text-sm text-muted-foreground">Open tickets</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Priority breakdown */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">By Priority</p>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{data.by_priority.map(p => (
|
||||
<div key={p.priority} className="rounded-xl border p-3 text-center">
|
||||
<div className={`w-2 h-2 rounded-full mx-auto mb-1.5 ${PRIORITY_COLOR[p.priority] ?? 'bg-slate-400'}`} />
|
||||
<p className={`text-xl font-bold ${PRIORITY_TEXT[p.priority] ?? ''}`}>{p.count}</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-0.5">{p.label}</p>
|
||||
</div>
|
||||
))}
|
||||
{loading && !data && (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SLA */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">SLA — last 30 days</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[
|
||||
{ label: 'First Response (≤1h)', met: data.sla.response_met, total: data.sla.response_total, p: respPct },
|
||||
{ label: 'Resolution (≤24h)', met: data.sla.resolution_met, total: data.sla.resolution_total, p: resPct },
|
||||
].map(s => (
|
||||
<div key={s.label} className="rounded-xl border p-4">
|
||||
<p className={`text-2xl font-bold ${s.p >= 80 ? 'text-green-600' : s.p >= 60 ? 'text-yellow-600' : 'text-red-600'}`}>
|
||||
{s.p}%
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{s.label}</p>
|
||||
<p className="text-[10px] text-muted-foreground">{s.met} / {s.total}</p>
|
||||
<div className="mt-2 h-1.5 rounded-full bg-muted overflow-hidden">
|
||||
<div className={`h-full rounded-full ${s.p >= 80 ? 'bg-green-500' : s.p >= 60 ? 'bg-yellow-400' : 'bg-red-500'}`}
|
||||
style={{ width: `${s.p}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{data && (
|
||||
<>
|
||||
{/* DASH-01: 2×2 KPI grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{data.kpis.map(kpi => (
|
||||
<KpiCardMobile
|
||||
key={kpi.id}
|
||||
label={kpi.label}
|
||||
value={kpi.value}
|
||||
caption={kpi.caption}
|
||||
tone={kpi.tone ?? 'default'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* By queue */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">By Queue</p>
|
||||
<div className="rounded-xl border divide-y overflow-hidden">
|
||||
{data.by_queue.map(q => (
|
||||
<div key={q.queue_id} className="flex items-center px-4 py-3 gap-3">
|
||||
<p className="flex-1 text-sm font-medium">{q.label}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-24 h-1.5 rounded-full bg-muted overflow-hidden">
|
||||
<div className="h-full rounded-full bg-primary"
|
||||
style={{ width: `${pct(q.count, data.open_total)}%` }} />
|
||||
</div>
|
||||
<span className="text-sm font-bold w-8 text-right">{q.count}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* DASH-02: Needs Attention horizontal strip */}
|
||||
<NeedsAttentionStrip
|
||||
items={data.needsAttention.map(a => ({
|
||||
id: a.id,
|
||||
label: a.label,
|
||||
count: a.count,
|
||||
href: a.href,
|
||||
}))}
|
||||
/>
|
||||
|
||||
{/* Recent activity */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Recent Activity</p>
|
||||
<Link href="/mobile/tickets" className="text-xs text-primary">View all</Link>
|
||||
</div>
|
||||
<div className="rounded-xl border divide-y overflow-hidden">
|
||||
{data.recent.map(t => (
|
||||
<Link key={t.id} href={`/mobile/tickets/${t.id}`}
|
||||
className="flex items-start gap-3 px-4 py-3 hover:bg-accent transition-colors">
|
||||
<div className={`mt-1 w-2 h-2 rounded-full shrink-0 ${PRIORITY_COLOR[t.priority] ?? 'bg-slate-400'}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{t.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{t.company_name} · {t.queue_label ?? '—'}</p>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock className="w-3 h-3" />
|
||||
{t.last_activity_date ? relTime(t.last_activity_date) : '—'}
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground ml-auto mt-1" />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* DASH-03: Worker/backup status row */}
|
||||
<WorkerStatusRow
|
||||
entries={data.workers.map(w => ({
|
||||
id: w.id,
|
||||
label: w.label,
|
||||
value: w.value,
|
||||
status: w.status,
|
||||
href: w.href,
|
||||
}))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue