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>
2026-05-21 17:28:20 +02:00
parent 70c7d84dea
commit 203f543e60
6 changed files with 113 additions and 53 deletions
--- a/src/components/dashboard/activity-feed.tsx
+++ b/src/components/dashboard/activity-feed.tsx
@@ -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 ? (
--- a/src/components/dashboard/chart-card.tsx
+++ b/src/components/dashboard/chart-card.tsx
@@ -84,7 +84,7 @@ export function ChartCard({
  }

  return (
-    <Card className={cn('h-full', className)}>
+    <Card className={cn('h-full flex flex-col', className)}>
      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
        <div>
          <CardTitle className="text-base">{title}</CardTitle>
@@ -116,8 +116,10 @@ export function ChartCard({
          </DropdownMenuContent>
        </DropdownMenu>
      </CardHeader>
-      <CardContent>
-        <div ref={containerRef}>{children}</div>
+      <CardContent className="flex-1 flex items-center justify-center">
+        <div ref={containerRef} className="w-full">
+          {children}
+        </div>
      </CardContent>
    </Card>
  );
--- a/src/components/documents/upload-for-signing-dialog.tsx
+++ b/src/components/documents/upload-for-signing-dialog.tsx
@@ -163,7 +163,7 @@ export function UploadForSigningDialog({
  if (!open) return null;
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-hidden p-0 flex flex-col">
+      <DialogContent className="max-w-[1400px] w-[95vw] max-h-[90vh] overflow-hidden p-0 flex flex-col">
        <DialogBody
          key={`${interestId}:${documentType}`}
          interestId={interestId}
@@ -634,18 +634,18 @@ function RecipientsStep({
        <Label>Recipients (in signing order)</Label>
        <div className="space-y-2">
          {recipients.map((r, i) => (
-            <div key={i} className="grid grid-cols-12 gap-2 items-center">
-              <span className="col-span-1 text-xs text-center text-muted-foreground tabular-nums">
+            <div key={i} className="flex gap-2 items-center">
+              <span className="w-8 shrink-0 text-xs text-center text-muted-foreground tabular-nums">
                #{r.signingOrder}
              </span>
              <Input
-                className="col-span-3"
+                className="flex-1 min-w-0"
                placeholder="Name"
                value={r.name}
                onChange={(e) => update(i, { name: e.target.value })}
              />
              <Input
-                className="col-span-4"
+                className="flex-[2] min-w-0"
                placeholder="email@example.com"
                type="email"
                value={r.email}
@@ -655,7 +655,7 @@ function RecipientsStep({
                value={r.role}
                onValueChange={(v) => update(i, { role: v as Recipient['role'] })}
              >
-                <SelectTrigger className="col-span-3">
+                <SelectTrigger className="w-40 shrink-0">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
@@ -670,7 +670,7 @@ function RecipientsStep({
                size="icon"
                onClick={() => remove(i)}
                aria-label="Remove recipient"
-                className="col-span-1"
+                className="shrink-0"
              >
                <Trash2 className="size-4" aria-hidden />
              </Button>
@@ -689,8 +689,8 @@ function RecipientsStep({
          id="invitation-message"
          value={invitationMessage}
          onChange={(e) => onInvitationMessageChange(e.target.value)}
-          placeholder="Hi John — please review the attached contract before signing. Reach out if anything needs adjusting."
-          rows={3}
+          placeholder="Hi John, please review the attached contract before signing. Reach out if anything needs adjusting."
+          rows={6}
          maxLength={1000}
          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
        />
--- a/src/components/inbox/inbox-page-shell.tsx
+++ b/src/components/inbox/inbox-page-shell.tsx
@@ -75,12 +75,26 @@ export function InboxPageShell() {
  return (
    <div className="space-y-6">
      <PageHeader
-        title="Alerts & Reminders"
+        title="Reminders & Alerts"
        eyebrow="Action items"
-        description="Alerts the system has flagged plus your scheduled follow-ups, in one place."
+        description="Your scheduled follow-ups plus alerts the system has flagged, in one place."
        variant="gradient"
      />

+      <section id="inbox-section-reminders" className="rounded-lg border bg-card shadow-xs">
+        <SectionHeader
+          icon={<Bell className="size-4 text-muted-foreground" aria-hidden />}
+          label="Reminders"
+          open={remindersOpen}
+          onToggle={toggleReminders}
+        />
+        {remindersOpen ? (
+          <div className="border-t px-4 pb-4 pt-3">
+            <ReminderList embedded />
+          </div>
+        ) : null}
+      </section>
+
      <section id="inbox-section-alerts" className="rounded-lg border bg-card shadow-xs">
        <SectionHeader
          icon={<ShieldAlert className="size-4 text-muted-foreground" aria-hidden />}
@@ -95,20 +109,6 @@ export function InboxPageShell() {
          </div>
        ) : null}
      </section>
-
-      <section id="inbox-section-reminders" className="rounded-lg border bg-card shadow-xs">
-        <SectionHeader
-          icon={<Bell className="size-4 text-muted-foreground" aria-hidden />}
-          label="Reminders"
-          open={remindersOpen}
-          onToggle={toggleReminders}
-        />
-        {remindersOpen ? (
-          <div className="border-t px-4 pb-4 pt-3">
-            <ReminderList embedded />
-          </div>
-        ) : null}
-      </section>
    </div>
  );
 }
--- a/src/components/interests/berth-recommender-panel.tsx
+++ b/src/components/interests/berth-recommender-panel.tsx
@@ -4,12 +4,22 @@ import { useState, useMemo } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
-import { ChevronDown, ChevronUp, Filter, Flame, Plus, RefreshCw, Sparkles } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronUp,
+  Filter,
+  Flame,
+  HelpCircle,
+  Plus,
+  RefreshCw,
+  Sparkles,
+} from 'lucide-react';

 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
  Select,
  SelectContent,
@@ -172,14 +182,42 @@ function RecommendationCard({ rec, portSlug, onAdd }: RecommendationCardProps) {
            <span className="font-semibold">{rec.mooringNumber}</span>
            {rec.area ? <span className="text-xs text-muted-foreground">{rec.area}</span> : null}
            <StatusPill status={statusToPill(rec.status)}>{formatStatus(rec.status)}</StatusPill>
-            <span
-              className={cn(
-                'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium',
-                tier.tone,
-              )}
-            >
-              Tier {rec.tier} · {tier.label}
-            </span>
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className={cn(
+                    'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    tier.tone,
+                  )}
+                  aria-label={`Recommender state: ${tier.label}`}
+                >
+                  {tier.label}
+                  <HelpCircle className="size-3 opacity-60" aria-hidden />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-80 text-xs leading-relaxed">
+                <p className="font-medium text-foreground">Recommender state</p>
+                <ul className="mt-2 space-y-1.5 text-muted-foreground">
+                  <li>
+                    <span className="font-medium text-emerald-700">Open</span>: never had an
+                    interest, ready for new prospects.
+                  </li>
+                  <li>
+                    <span className="font-medium text-amber-700">Fall-through</span>: a prior
+                    interest didn&apos;t close; warm and worth pitching again.
+                  </li>
+                  <li>
+                    <span className="font-medium text-sky-700">Active interest</span>: another deal
+                    is in play. Coordinate before pitching.
+                  </li>
+                  <li>
+                    <span className="font-medium text-slate-700">Late stage</span>: another deal is
+                    near-sold; treat as backup only.
+                  </li>
+                </ul>
+              </PopoverContent>
+            </Popover>
            {showHeat ? (
              <span className="inline-flex items-center gap-1 rounded-md border border-rose-200 bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-800">
                <Flame className="size-3" aria-hidden />
--- a/src/components/reminders/reminder-list.tsx
+++ b/src/components/reminders/reminder-list.tsx
@@ -295,23 +295,12 @@ export function ReminderList({ embedded = false }: ReminderListProps = {}) {
            </Button>
          }
        />
-      ) : (
-        <div className="mb-3 flex justify-end">
-          <Button
-            size="sm"
-            onClick={() => {
-              setEditingReminder(null);
-              setFormOpen(true);
-            }}
-          >
-            <Plus className="mr-1.5 h-4 w-4" aria-hidden />
-            New Reminder
-          </Button>
-        </div>
-      )}
+      ) : null}

      {/* Wrap on phone widths so the priority filter doesn't get pushed
-          off-screen by the My/All tabs + status filter taking the full row. */}
+          off-screen by the My/All tabs + status filter taking the full row.
+          In embedded mode, the "New Reminder" button shares this row
+          (right-aligned via ml-auto) so filters + CTA stay visually tight. */}
      <div className="flex flex-wrap items-center gap-3 mb-4 sm:gap-4">
        {canViewAll && (
          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'my' | 'all')}>
@@ -350,6 +339,20 @@ export function ReminderList({ embedded = false }: ReminderListProps = {}) {
            <SelectItem value="low">Low</SelectItem>
          </SelectContent>
        </Select>
+
+        {embedded ? (
+          <Button
+            size="sm"
+            className="ml-auto"
+            onClick={() => {
+              setEditingReminder(null);
+              setFormOpen(true);
+            }}
+          >
+            <Plus className="mr-1.5 h-4 w-4" aria-hidden />
+            New Reminder
+          </Button>
+        ) : null}
      </div>

      <DataTable