feat(uat-batch-5): UI polish — dialog width, chart centering, recommender pill, audit link, inbox reorder

Six surgical Wave-2-3 wins:

- UploadForSigningDialog: dialog widened to max-w-[1400px] w-[95vw] so
  the place-fields step actually has room; recipient row converts from
  fixed grid to flex (name flex-1, email flex-[2] for the longer
  string, role w-40, delete shrink-0); invitation-message textarea
  rows 3 → 6.
- ChartCard becomes flex-col with flex-1 + items-center on CardContent
  so charts vertically center when neighbouring cards make the row
  taller (e.g. Pipeline Value's full breakdown).
- Berth recommender pill: drops the "Tier {letter} · " prefix; shows
  just the plain-English label ("Open" / "Fall-through" / "Active
  interest" / "Late stage") as a Popover trigger that explains the
  4-state ladder. HelpCircle icon makes the tooltip discoverable.
- Activity feed gains a "See all" link in the header pointing at
  /<port>/admin/audit, permission-gated by `admin.view_audit_log`.
- Inbox section order swaps to Reminders above Alerts (rep-noted
  priority); PageHeader title flips to "Reminders & Alerts". Section
  ids, deep-link hashes, and localStorage open-state keys untouched.
- Inbox ReminderList (embedded mode only): "New Reminder" button now
  shares the filter row (right-aligned via ml-auto) instead of
  occupying its own dedicated row above the filters.

tsc clean. 1419/1419 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-21 17:28:20 +02:00
parent 70c7d84dea
commit 203f543e60
6 changed files with 113 additions and 53 deletions

View File

@@ -2,11 +2,14 @@
import { useQuery } from '@tanstack/react-query';
import { formatDistanceToNow } from 'date-fns';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { apiFetch } from '@/lib/api/client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { CardSkeleton } from '@/components/shared/loading-skeleton';
import { usePermissions } from '@/hooks/use-permissions';
import { WidgetErrorBoundary } from './widget-error-boundary';
import {
STAGE_LABELS,
@@ -171,6 +174,11 @@ function ActionBadge({ action }: { action: string }) {
}
function ActivityFeedInner() {
const params = useParams<{ portSlug: string }>();
const portSlug = params?.portSlug ?? '';
const { can } = usePermissions();
const canViewAuditLog = can('admin', 'view_audit_log');
const { data, isLoading } = useQuery<ActivityItem[]>({
queryKey: ['dashboard', 'activity'],
queryFn: () => apiFetch<ActivityItem[]>('/api/v1/dashboard/activity'),
@@ -190,8 +198,17 @@ function ActivityFeedInner() {
return (
<Card>
<CardHeader>
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
<CardTitle className="text-base">Recent Activity</CardTitle>
{canViewAuditLog && portSlug ? (
<Link
// eslint-disable-next-line @typescript-eslint/no-explicit-any
href={`/${portSlug}/admin/audit` as any}
className="text-xs font-medium text-primary hover:underline"
>
See all
</Link>
) : null}
</CardHeader>
<CardContent>
{items.length === 0 ? (