95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { ShieldAlert } from 'lucide-react';
|
|
|
|
import { PageHeader } from '@/components/shared/page-header';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { AlertCard, AlertCardEmpty } from './alert-card';
|
|
import { useAlertCount, useAlertList, useAlertRealtime, useDismissAll } from './use-alerts';
|
|
import type { AlertStatus } from './types';
|
|
|
|
/**
|
|
* `embedded` mode drops the PageHeader and outer spacing so the shell
|
|
* can render as a section inside the merged Inbox page without
|
|
* duplicating chrome. Standalone /alerts route still uses the default
|
|
* (non-embedded) mode via the redirect - actually, /alerts now redirects
|
|
* to /inbox#alerts, so non-embedded mode is currently unused but kept
|
|
* for flexibility.
|
|
*/
|
|
interface AlertsPageShellProps {
|
|
embedded?: boolean;
|
|
}
|
|
|
|
export function AlertsPageShell({ embedded = false }: AlertsPageShellProps = {}) {
|
|
const [tab, setTab] = useState<AlertStatus>('open');
|
|
const { data: count } = useAlertCount();
|
|
const { data, isLoading } = useAlertList(tab);
|
|
useAlertRealtime();
|
|
|
|
const total = count?.total ?? 0;
|
|
const alerts = data?.data ?? [];
|
|
const dismissAll = useDismissAll();
|
|
|
|
return (
|
|
<div className={embedded ? 'space-y-3' : 'space-y-6'}>
|
|
{!embedded ? (
|
|
<PageHeader
|
|
title="Alerts"
|
|
eyebrow="Operational"
|
|
description="Rules-based signals about pipeline, agreements, expenses, and access"
|
|
kpiLine={
|
|
<span>
|
|
<ShieldAlert className="mr-1 inline h-3 w-3" aria-hidden />
|
|
{total} active
|
|
</span>
|
|
}
|
|
variant="gradient"
|
|
/>
|
|
) : null}
|
|
|
|
<Tabs value={tab} onValueChange={(v) => setTab(v as AlertStatus)}>
|
|
<TabsList>
|
|
<TabsTrigger value="open" data-testid="tab-open">
|
|
Active{total > 0 ? ` · ${total}` : ''}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="dismissed" data-testid="tab-dismissed">
|
|
Dismissed
|
|
</TabsTrigger>
|
|
<TabsTrigger value="resolved" data-testid="tab-resolved">
|
|
Resolved
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value={tab} className="mt-4 space-y-2">
|
|
{tab === 'open' && alerts.length > 0 ? (
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => dismissAll.mutate({})}
|
|
disabled={dismissAll.isPending}
|
|
>
|
|
Dismiss all
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-20 w-full" />
|
|
<Skeleton className="h-20 w-full" />
|
|
<Skeleton className="h-20 w-full" />
|
|
</div>
|
|
) : alerts.length === 0 ? (
|
|
<AlertCardEmpty />
|
|
) : (
|
|
alerts.map((a) => <AlertCard key={a.id} alert={a} readOnly={tab !== 'open'} />)
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|