f52d21df83
Phase B (Insights & Alerts) PR4-11 in one drop. Builds on the schema +
service skeletons committed in PRs 1-3.
PR4 Analytics dashboard — 4 chart types (funnel/timeline/breakdown/source),
date-range picker (today/7d/30d/90d), CSV+PNG export per card.
PR5 Alert rail UI + /alerts page — topbar bell w/ live count, dashboard
right-rail, three-tab page (active/dismissed/resolved), socket-driven
invalidation. Bell lazy-loads list on popover open to keep cold pages
fast in non-dashboard routes.
PR6 EOI queue tab on documents hub — filters to in-flight EOIs, count
surfaces in tab label.
PR7 Interests-by-berth tab on berth detail — replaces the stub.
PR8 Expense duplicate detection — BullMQ job runs scan on create, yellow
banner on detail w/ Merge / Not-a-duplicate, transactional merge
consolidates receipts and archives the source.
PR9 Receipt scanner PWA + multi-provider AI — port-scoped /scan route in
its own (scanner) group with no dashboard chrome, dynamic per-port
manifest, OpenAI + Claude provider abstraction, admin OCR settings
page (port-level + super-admin global default w/ opt-in fallback),
test-connection endpoint, manual-entry fallback when no key is
configured. Verify form always shown before save — no ghost rows.
PR10 Audit log read view — swap to tsvector full-text search on the
existing GIN index, cursor pagination, filters for entity/action/user
/date range, batched actor-email resolution.
PR11 Real-API tests — opt-in receipt-ocr.spec (admin save+test, optional
real-receipt parse via REALAPI_RECEIPT_FIXTURE) and alert-engine
socket-fanout spec gated behind RUN_ALERT_ENGINE_REALAPI. Both skip
cleanly without their gate envs so CI stays green.
Test totals: vitest 690 -> 713, smoke 130 -> 138, realapi +2 opt-in.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
import { useUIStore } from '@/stores/ui-store';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { AlertCard, AlertCardEmpty } from './alert-card';
|
|
import { useAlertList, useAlertRealtime } from './use-alerts';
|
|
|
|
export function AlertRail() {
|
|
const portSlug = useUIStore((s) => s.currentPortSlug);
|
|
const { data, isLoading } = useAlertList('open');
|
|
useAlertRealtime();
|
|
|
|
const alerts = data?.data ?? [];
|
|
// Show first 5 in the rail; surplus pushes user to the full /alerts page.
|
|
const visible = alerts.slice(0, 5);
|
|
const overflow = Math.max(alerts.length - visible.length, 0);
|
|
|
|
return (
|
|
<section
|
|
data-testid="alert-rail"
|
|
aria-label="Active alerts"
|
|
className="flex h-full flex-col gap-3"
|
|
>
|
|
<div className="flex items-baseline justify-between">
|
|
<h2 className="text-sm font-semibold tracking-tight">Alerts</h2>
|
|
<Link
|
|
href={portSlug ? (`/${portSlug}/alerts` as never) : ('/alerts' as never)}
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
View all
|
|
<ArrowRight className="ml-1 inline h-3 w-3" aria-hidden />
|
|
</Link>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-16 w-full" />
|
|
<Skeleton className="h-16 w-full" />
|
|
<Skeleton className="h-16 w-full" />
|
|
</div>
|
|
) : visible.length === 0 ? (
|
|
<AlertCardEmpty />
|
|
) : (
|
|
<div className="space-y-2">
|
|
{visible.map((a) => (
|
|
<AlertCard key={a.id} alert={a} />
|
|
))}
|
|
{overflow > 0 ? (
|
|
<Link
|
|
href={portSlug ? (`/${portSlug}/alerts` as never) : ('/alerts' as never)}
|
|
className="block rounded-lg border border-dashed border-border px-3 py-2 text-center text-xs text-muted-foreground transition-colors hover:bg-accent"
|
|
>
|
|
+{overflow} more — view all
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|