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>
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
CartesianGrid,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from 'recharts';
|
|
|
|
import { CardSkeleton } from '@/components/shared/loading-skeleton';
|
|
import { EmptyState } from '@/components/shared/empty-state';
|
|
import { ChartCard } from './chart-card';
|
|
import { useOccupancy } from './use-analytics';
|
|
import type { DateRange } from '@/lib/services/analytics.service';
|
|
|
|
interface Props {
|
|
range: DateRange;
|
|
}
|
|
|
|
function shortDate(iso: string) {
|
|
const d = new Date(`${iso}T00:00:00`);
|
|
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
|
}
|
|
|
|
export function OccupancyTimelineChart({ range }: Props) {
|
|
const { data, isLoading } = useOccupancy(range);
|
|
const points = data?.points ?? [];
|
|
const noBerths = points.length > 0 && points[0]?.total === 0;
|
|
|
|
function toCsv(): string | null {
|
|
if (!points.length) return null;
|
|
const header = 'date,occupied,total,occupancy_pct';
|
|
const rows = points.map((p) => `${p.date},${p.occupied},${p.total},${p.occupancyPct}`);
|
|
return [header, ...rows].join('\n');
|
|
}
|
|
|
|
return (
|
|
<ChartCard
|
|
title="Occupancy Timeline"
|
|
description="Daily berth occupancy across the range"
|
|
exportFilename={`occupancy-timeline-${range}`}
|
|
toCsv={toCsv}
|
|
>
|
|
{isLoading ? (
|
|
<CardSkeleton />
|
|
) : noBerths ? (
|
|
<EmptyState title="No berths configured" description="Add berths to see occupancy." />
|
|
) : (
|
|
<ResponsiveContainer width="100%" height={260}>
|
|
<AreaChart
|
|
data={points.map((p) => ({ ...p, label: shortDate(p.date) }))}
|
|
margin={{ top: 8, right: 8, left: -16, bottom: 8 }}
|
|
>
|
|
<defs>
|
|
<linearGradient id="occupancyGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="hsl(var(--chart-2))" stopOpacity={0.4} />
|
|
<stop offset="100%" stopColor="hsl(var(--chart-2))" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
|
<XAxis
|
|
dataKey="label"
|
|
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
|
minTickGap={20}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
|
domain={[0, 100]}
|
|
tickFormatter={(v: number) => `${v}%`}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: 'hsl(var(--popover))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '6px',
|
|
fontSize: 12,
|
|
}}
|
|
formatter={(value, _name, item) => {
|
|
const p = item?.payload as { occupied?: number; total?: number } | undefined;
|
|
return [`${value}% (${p?.occupied ?? 0}/${p?.total ?? 0})`, 'Occupancy'];
|
|
}}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="occupancyPct"
|
|
stroke="hsl(var(--chart-2))"
|
|
strokeWidth={2}
|
|
fill="url(#occupancyGradient)"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</ChartCard>
|
|
);
|
|
}
|