From bcea28cd71f3e9d563ec2aa08c0c7b0c0a6d577b Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Fri, 1 May 2026 15:39:06 +0200
Subject: [PATCH] feat(mobile): mobile cards for reminders, audit log, users

Three new <EntityCard> files using the shared <ListCard> shell, wired
into each list page's <DataTable> via cardRender.

  - ReminderCard:   Bell icon, related-entity subtitle (User/Anchor/
                    FileText icon by entity type), due-date meta with
                    past-due flag, accent bar (rose=past-due,
                    amber=pending, slate=snoozed, emerald=done).
                    Snooze/Complete/Edit/Delete in actions menu.
  - AuditLogCard:   Action icon (Plus/Pencil/Trash2/Eye), entity
                    title, "{verb} by {actor}" subtitle, timestamp
                    meta, optional changed-field chip line. Accent
                    bar by action (created=emerald, updated=blue,
                    deleted=rose). Immutable, no actions menu.
  - UserCard:       Initials avatar, displayName/email, role meta
                    (Shield icon), last-login distance, "Inactive"
                    pill when deactivated. Accent bar (violet=
                    super_admin, slate=inactive, none=active).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/admin/audit/audit-log-card.tsx | 151 +++++++++++
 src/components/admin/audit/audit-log-list.tsx |   2 +
 src/components/admin/users/user-card.tsx      | 149 ++++++++++
 src/components/admin/users/user-list.tsx      |   9 +
 src/components/reminders/reminder-card.tsx    | 256 ++++++++++++++++++
 src/components/reminders/reminder-list.tsx    |  17 ++
 6 files changed, 584 insertions(+)
 create mode 100644 src/components/admin/audit/audit-log-card.tsx
 create mode 100644 src/components/admin/users/user-card.tsx
 create mode 100644 src/components/reminders/reminder-card.tsx

diff --git a/src/components/admin/audit/audit-log-card.tsx b/src/components/admin/audit/audit-log-card.tsx
new file mode 100644
index 0000000..28d406c
--- /dev/null
+++ b/src/components/admin/audit/audit-log-card.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import { Activity, Clock, Eye, Pencil, Plus, Trash2, User } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+
+interface AuditEntry {
+  id: string;
+  userId: string | null;
+  action: string;
+  entityType: string;
+  entityId: string | null;
+  fieldChanged: string | null;
+  oldValue: Record<string, unknown> | null;
+  newValue: Record<string, unknown> | null;
+  metadata: Record<string, unknown> | null;
+  ipAddress: string | null;
+  createdAt: string;
+  actor: { id: string; email: string; name: string } | null;
+}
+
+const ACTION_ACCENT: Record<string, string> = {
+  create: 'bg-emerald-400',
+  update: 'bg-blue-400',
+  delete: 'bg-rose-400',
+  viewed: 'bg-slate-300',
+};
+
+const ACTION_BADGE_COLORS: Record<string, string> = {
+  create: 'bg-green-600',
+  update: 'bg-blue-500',
+  delete: 'bg-red-600',
+  archive: 'bg-orange-500',
+  restore: 'bg-teal-500',
+  login: 'bg-gray-500',
+  permission_denied: 'bg-red-800',
+  merge: 'bg-purple-500',
+  revert: 'bg-amber-500',
+};
+
+function ActionIcon({ action }: { action: string }) {
+  if (action === 'create') return <Plus className="h-5 w-5" />;
+  if (action === 'update') return <Pencil className="h-5 w-5" />;
+  if (action === 'delete') return <Trash2 className="h-5 w-5" />;
+  if (action === 'viewed') return <Eye className="h-5 w-5" />;
+  return <Activity className="h-5 w-5" />;
+}
+
+function actionVerb(action: string): string {
+  const map: Record<string, string> = {
+    create: 'Created',
+    update: 'Updated',
+    delete: 'Deleted',
+    archive: 'Archived',
+    restore: 'Restored',
+    login: 'Logged in',
+    permission_denied: 'Permission denied',
+    merge: 'Merged',
+    revert: 'Reverted',
+    viewed: 'Viewed',
+  };
+  return map[action] ?? action.charAt(0).toUpperCase() + action.slice(1);
+}
+
+interface AuditLogCardProps {
+  entry: AuditEntry;
+}
+
+export function AuditLogCard({ entry }: AuditLogCardProps) {
+  const accentClass = ACTION_ACCENT[entry.action] ?? 'bg-slate-300';
+  const badgeColor = ACTION_BADGE_COLORS[entry.action] ?? 'bg-gray-500';
+
+  const entityTitle = `${entry.entityType.charAt(0).toUpperCase()}${entry.entityType.slice(1)}${
+    entry.entityId ? ` ${entry.entityId.slice(0, 8)}…` : ''
+  }`;
+
+  const actorName = entry.actor?.name ?? (entry.userId ? `${entry.userId.slice(0, 8)}…` : 'system');
+
+  // Changed-fields chip line: prefer fieldChanged (single field), then newValue keys
+  let changedFields: string[] = [];
+  if (entry.fieldChanged) {
+    changedFields = [entry.fieldChanged];
+  } else if (entry.newValue) {
+    changedFields = Object.keys(entry.newValue);
+  }
+  const visibleFields = changedFields.slice(0, 3);
+  const overflowCount = changedFields.length - visibleFields.length;
+
+  return (
+    <ListCard
+      href="#"
+      ariaLabel={`Audit: ${actionVerb(entry.action)} ${entityTitle}`}
+      accentClassName={accentClass}
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<ActionIcon action={entry.action} />} />
+        <div className="min-w-0 flex-1">
+          {/* Title: entity type + short ID */}
+          <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
+            {entityTitle}
+          </h3>
+
+          {/* Subtitle: action verb + actor */}
+          <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+            <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+            <span className="truncate">
+              {actionVerb(entry.action)} by {actorName}
+            </span>
+          </p>
+
+          {/* Timestamp meta line */}
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <ListCardMeta icon={<Clock className="h-3 w-3" />}>
+              {formatDistanceToNow(new Date(entry.createdAt), { addSuffix: true })}
+            </ListCardMeta>
+          </div>
+
+          {/* Action badge + changed-fields chips */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium text-white',
+                badgeColor,
+              )}
+            >
+              {entry.action}
+            </span>
+
+            {visibleFields.length > 0 ? (
+              <>
+                {visibleFields.map((field) => (
+                  <span
+                    key={field}
+                    className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+                  >
+                    {field}
+                  </span>
+                ))}
+                {overflowCount > 0 ? (
+                  <span className="text-xs text-muted-foreground">+{overflowCount}</span>
+                ) : null}
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}
diff --git a/src/components/admin/audit/audit-log-list.tsx b/src/components/admin/audit/audit-log-list.tsx
index f74c37d..e076926 100644
--- a/src/components/admin/audit/audit-log-list.tsx
+++ b/src/components/admin/audit/audit-log-list.tsx
@@ -19,6 +19,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { apiFetch } from '@/lib/api/client';
+import { AuditLogCard } from './audit-log-card';
 
 interface AuditEntry {
   id: string;
@@ -357,6 +358,7 @@ export function AuditLogList() {
           data={entries}
           isLoading={loading}
           getRowId={(row) => row.id}
+          cardRender={(row) => <AuditLogCard entry={row.original} />}
           emptyState={
             <div className="text-center py-8">
               <p className="text-muted-foreground">No audit log entries found.</p>
diff --git a/src/components/admin/users/user-card.tsx b/src/components/admin/users/user-card.tsx
new file mode 100644
index 0000000..2ec1281
--- /dev/null
+++ b/src/components/admin/users/user-card.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import { Clock, Mail, MoreHorizontal, Pencil, Shield, Trash2 } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
+import {
+  ListCard,
+  ListCardAvatar,
+  ListCardMeta,
+  deriveInitials,
+} from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+
+interface UserRow {
+  userId: string;
+  displayName: string;
+  email: string;
+  phone: string | null;
+  isActive: boolean;
+  isSuperAdmin: boolean;
+  lastLoginAt: string | null;
+  role: { id: string; name: string };
+  assignedAt: string;
+}
+
+interface UserCardProps {
+  user: UserRow;
+  onEdit: (user: UserRow) => void;
+  onRemove: (userId: string) => void;
+  isRemoving: boolean;
+}
+
+export function UserCard({ user, onEdit, onRemove, isRemoving }: UserCardProps) {
+  const initials = deriveInitials(user.displayName || user.email);
+
+  const accentClass = user.isSuperAdmin
+    ? 'bg-violet-400'
+    : !user.isActive
+      ? 'bg-slate-400'
+      : undefined;
+
+  return (
+    <ListCard
+      href="#"
+      ariaLabel={`User: ${user.displayName}`}
+      accentClassName={accentClass}
+      actions={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Actions for ${user.displayName}`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                onEdit(user);
+              }}
+            >
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <ConfirmationDialog
+              trigger={
+                <DropdownMenuItem className="text-destructive" onSelect={(e) => e.preventDefault()}>
+                  <Trash2 className="mr-2 h-3.5 w-3.5" />
+                  Remove
+                </DropdownMenuItem>
+              }
+              title="Remove User"
+              description={`Remove "${user.displayName}" from this port? They will lose access but their account remains.`}
+              confirmLabel="Remove"
+              onConfirm={() => onRemove(user.userId)}
+              loading={isRemoving}
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar initials={initials} className={cn(!user.isActive && 'opacity-50')} />
+        <div className="min-w-0 flex-1">
+          {/* Title row + spacer for actions button */}
+          <div className="flex items-start justify-between gap-2">
+            <h3
+              className={cn(
+                'truncate text-base font-semibold tracking-tight',
+                user.isActive ? 'text-foreground' : 'text-muted-foreground',
+              )}
+            >
+              {user.displayName || user.email}
+            </h3>
+            <span aria-hidden className="block h-9 w-9 shrink-0" />
+          </div>
+
+          {/* Email subtitle — only when display name is shown as title */}
+          {user.displayName && user.displayName !== user.email ? (
+            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+              <Mail className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+              <span className="truncate">{user.email}</span>
+            </p>
+          ) : null}
+
+          {/* Role + last login meta */}
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <ListCardMeta icon={<Shield className="h-3 w-3" />}>{user.role.name}</ListCardMeta>
+
+            {user.lastLoginAt ? (
+              <ListCardMeta icon={<Clock className="h-3 w-3" />}>
+                {formatDistanceToNow(new Date(user.lastLoginAt), { addSuffix: true })}
+              </ListCardMeta>
+            ) : (
+              <ListCardMeta icon={<Clock className="h-3 w-3" />}>Never logged in</ListCardMeta>
+            )}
+          </div>
+
+          {/* Status + super-admin pills */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            {!user.isActive ? (
+              <span className="inline-flex items-center rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-700">
+                Inactive
+              </span>
+            ) : null}
+            {user.isSuperAdmin ? (
+              <span className="inline-flex items-center rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                Super Admin
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}
diff --git a/src/components/admin/users/user-list.tsx b/src/components/admin/users/user-list.tsx
index f4a53ee..2853b0d 100644
--- a/src/components/admin/users/user-list.tsx
+++ b/src/components/admin/users/user-list.tsx
@@ -10,6 +10,7 @@ import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { apiFetch } from '@/lib/api/client';
+import { UserCard } from './user-card';
 import { UserForm } from './user-form';
 
 interface UserRow {
@@ -152,6 +153,14 @@ export function UserList() {
         data={users}
         isLoading={loading}
         getRowId={(row) => row.userId}
+        cardRender={(row) => (
+          <UserCard
+            user={row.original}
+            onEdit={handleEditUser}
+            onRemove={handleRemoveUser}
+            isRemoving={deletingId === row.original.userId}
+          />
+        )}
         emptyState={
           <div className="text-center py-8">
             <p className="text-muted-foreground">No users assigned to this port.</p>
diff --git a/src/components/reminders/reminder-card.tsx b/src/components/reminders/reminder-card.tsx
new file mode 100644
index 0000000..496f45e
--- /dev/null
+++ b/src/components/reminders/reminder-card.tsx
@@ -0,0 +1,256 @@
+'use client';
+
+import {
+  Anchor,
+  Bell,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  FileText,
+  MoreHorizontal,
+  User,
+  XCircle,
+} from 'lucide-react';
+import { format } from 'date-fns';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
+import { cn } from '@/lib/utils';
+
+interface Reminder {
+  id: string;
+  title: string;
+  note: string | null;
+  dueAt: string;
+  priority: 'low' | 'medium' | 'high' | 'urgent';
+  status: 'pending' | 'snoozed' | 'completed' | 'dismissed';
+  assignedTo: string | null;
+  createdBy: string;
+  clientId: string | null;
+  interestId: string | null;
+  berthId: string | null;
+  autoGenerated: boolean;
+  snoozedUntil: string | null;
+  completedAt: string | null;
+  createdAt: string;
+  client?: { id: string; fullName: string } | null;
+  interest?: { id: string; pipelineStage: string } | null;
+  berth?: { id: string; mooringNumber: string } | null;
+}
+
+const STATUS_CONFIG = {
+  pending: { label: 'Pending', icon: Bell },
+  snoozed: { label: 'Snoozed', icon: Clock },
+  completed: { label: 'Completed', icon: CheckCircle2 },
+  dismissed: { label: 'Dismissed', icon: XCircle },
+} as const;
+
+const STATUS_PILL: Record<string, string> = {
+  pending: 'bg-amber-100 text-amber-700',
+  snoozed: 'bg-slate-100 text-slate-700',
+  completed: 'bg-emerald-100 text-emerald-700',
+  dismissed: 'bg-emerald-100 text-emerald-700',
+};
+
+const PRIORITY_CONFIG = {
+  urgent: { label: 'Urgent', className: 'bg-red-600 text-white' },
+  high: { label: 'High', className: 'bg-orange-500 text-white' },
+  medium: { label: 'Medium', className: 'bg-blue-500 text-white' },
+  low: { label: 'Low', className: 'bg-gray-400 text-white' },
+} as const;
+
+function accentForReminder(status: string, isPastDue: boolean): string {
+  if (isPastDue) return 'bg-rose-400';
+  if (status === 'pending') return 'bg-amber-400';
+  if (status === 'snoozed') return 'bg-slate-400';
+  if (status === 'completed' || status === 'dismissed') return 'bg-emerald-400';
+  return 'bg-slate-300';
+}
+
+interface ReminderCardProps {
+  reminder: Reminder;
+  portSlug: string;
+  onComplete: (id: string) => void;
+  onSnooze: (id: string) => void;
+  onDismiss: (id: string) => void;
+  onEdit: (reminder: Reminder) => void;
+}
+
+export function ReminderCard({
+  reminder,
+  portSlug: _portSlug,
+  onComplete,
+  onSnooze,
+  onDismiss,
+  onEdit,
+}: ReminderCardProps) {
+  const isPastDue =
+    (reminder.status === 'pending' || reminder.status === 'snoozed') &&
+    new Date(reminder.dueAt) < new Date();
+
+  const accentClass = accentForReminder(reminder.status, isPastDue);
+  const statusConfig = STATUS_CONFIG[reminder.status];
+  const StatusIcon = statusConfig.icon;
+  const statusPill = STATUS_PILL[reminder.status] ?? 'bg-slate-100 text-slate-700';
+  const priorityConfig = PRIORITY_CONFIG[reminder.priority];
+
+  const isResolved = reminder.status === 'completed' || reminder.status === 'dismissed';
+
+  // Subtitle: related-entity context
+  let subtitleIcon: React.ReactNode = null;
+  let subtitleText: string | null = null;
+  if (reminder.client) {
+    subtitleIcon = <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />;
+    subtitleText = reminder.client.fullName;
+  } else if (reminder.berth) {
+    subtitleIcon = <Anchor className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />;
+    subtitleText = `Berth ${reminder.berth.mooringNumber}`;
+  } else if (reminder.interest) {
+    subtitleIcon = (
+      <FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
+    );
+    subtitleText = `Interest (${reminder.interest.pipelineStage})`;
+  }
+
+  const hasActions = !isResolved;
+
+  return (
+    <ListCard
+      href="#"
+      ariaLabel={`Reminder: ${reminder.title}`}
+      accentClassName={accentClass}
+      actions={
+        hasActions ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9"
+                onClick={(e) => e.stopPropagation()}
+                aria-label={`Actions for reminder: ${reminder.title}`}
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onComplete(reminder.id);
+                }}
+              >
+                <CheckCircle2 className="mr-2 h-3.5 w-3.5 text-green-600" />
+                Complete
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onSnooze(reminder.id);
+                }}
+              >
+                <Clock className="mr-2 h-3.5 w-3.5" />
+                Snooze
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onEdit(reminder);
+                }}
+              >
+                <Bell className="mr-2 h-3.5 w-3.5" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-destructive"
+                onClick={(e) => {
+                  e.preventDefault();
+                  onDismiss(reminder.id);
+                }}
+              >
+                <XCircle className="mr-2 h-3.5 w-3.5" />
+                Dismiss
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : undefined
+      }
+    >
+      <div className="flex items-start gap-3">
+        <ListCardAvatar icon={<Bell className="h-5 w-5" />} />
+        <div className="min-w-0 flex-1">
+          {/* Title row + spacer for actions button */}
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
+              {reminder.title}
+            </h3>
+            {hasActions ? <span aria-hidden className="block h-9 w-9 shrink-0" /> : null}
+          </div>
+
+          {/* Related entity subtitle */}
+          {subtitleText ? (
+            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+              {subtitleIcon}
+              <span className="truncate">{subtitleText}</span>
+            </p>
+          ) : null}
+
+          {/* Due date meta line */}
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <ListCardMeta
+              icon={
+                <Calendar
+                  className={cn(
+                    'h-3 w-3',
+                    isPastDue ? 'text-rose-500' : 'text-muted-foreground/80',
+                  )}
+                />
+              }
+            >
+              <span className={isPastDue ? 'font-medium text-rose-600' : ''}>
+                Due {format(new Date(reminder.dueAt), 'MMM d, yyyy')}
+              </span>
+            </ListCardMeta>
+          </div>
+
+          {/* Pills row: status + priority + past-due flag */}
+          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            {/* Status pill */}
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
+                statusPill,
+              )}
+            >
+              <StatusIcon className="h-3 w-3" aria-hidden />
+              {statusConfig.label}
+            </span>
+
+            {/* Priority pill */}
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                priorityConfig.className,
+              )}
+            >
+              {priorityConfig.label}
+            </span>
+
+            {/* Past-due flag */}
+            {isPastDue ? (
+              <span className="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700">
+                Past due
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </ListCard>
+  );
+}
diff --git a/src/components/reminders/reminder-list.tsx b/src/components/reminders/reminder-list.tsx
index ab15613..b9800e9 100644
--- a/src/components/reminders/reminder-list.tsx
+++ b/src/components/reminders/reminder-list.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { type ColumnDef } from '@tanstack/react-table';
 import { Plus, CheckCircle2, Clock, XCircle, AlertTriangle, Bell } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
+import { useParams } from 'next/navigation';
 
 import { DataTable } from '@/components/shared/data-table';
 import { PageHeader } from '@/components/shared/page-header';
@@ -19,6 +20,7 @@ import {
 } from '@/components/ui/select';
 import { apiFetch } from '@/lib/api/client';
 import { usePermissions } from '@/hooks/use-permissions';
+import { ReminderCard } from './reminder-card';
 import { ReminderForm } from './reminder-form';
 import { SnoozeDialog } from './snooze-dialog';
 
@@ -69,6 +71,8 @@ export function ReminderList() {
   const [total, setTotal] = useState(0);
   const { can } = usePermissions();
   const canViewAll = can('reminders', 'view_all');
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
 
   const fetchReminders = useCallback(async () => {
     setLoading(true);
@@ -290,6 +294,19 @@ export function ReminderList() {
         data={reminders}
         isLoading={loading}
         getRowId={(row) => row.id}
+        cardRender={(row) => (
+          <ReminderCard
+            reminder={row.original}
+            portSlug={portSlug}
+            onComplete={handleComplete}
+            onSnooze={setSnoozingId}
+            onDismiss={handleDismiss}
+            onEdit={(r) => {
+              setEditingReminder(r);
+              setFormOpen(true);
+            }}
+          />
+        )}
         emptyState={
           <div className="text-center py-8">
             <Bell className="mx-auto h-8 w-8 text-muted-foreground mb-2" />