From 0df761f4ad188c6a47f4ec68918f918e2b6ed3a7 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 13 May 2026 12:00:35 +0200
Subject: [PATCH] fix(audit-wave-9): add mobile cardRender to remaining admin
 lists

Five DataTable consumers were rendering as horizontally-scrolling
desktop tables on mobile because they had no cardRender prop. Now they
collapse to a vertical card list below the lg: breakpoint with the
same actions inline:

- admin/tags/tag-list
- admin/roles/role-list
- admin/ports/port-list (also: Active/Inactive badge -> StatusPill)
- admin/document-templates/template-list (also: Active/Inactive badge
  -> StatusPill)
- admin/custom-fields/custom-fields-manager

All five now share the user-list / berth-list pattern: row-card with
title, secondary meta, and trailing action buttons; same TanStack
table instance powers both the desktop table and the mobile cards.

Closes ui/ux H2 + extends M2 (status-pill coverage).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../custom-fields/custom-fields-manager.tsx   | 60 +++++++++++++++
 .../document-templates/template-list.tsx      | 76 +++++++++++++++++--
 src/components/admin/ports/port-list.tsx      | 44 +++++++++--
 src/components/admin/roles/role-list.tsx      | 61 +++++++++++++++
 src/components/admin/tags/tag-list.tsx        | 46 +++++++++++
 5 files changed, 277 insertions(+), 10 deletions(-)

diff --git a/src/components/admin/custom-fields/custom-fields-manager.tsx b/src/components/admin/custom-fields/custom-fields-manager.tsx
index 6bf784f9..c778de8a 100644
--- a/src/components/admin/custom-fields/custom-fields-manager.tsx
+++ b/src/components/admin/custom-fields/custom-fields-manager.tsx
@@ -192,6 +192,66 @@ export function CustomFieldsManager() {
               data={filteredFields}
               isLoading={loading}
               getRowId={(row) => row.id}
+              cardRender={({ original }) => (
+                <div className="rounded-xl border border-border bg-card p-4 shadow-sm">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-semibold text-foreground">
+                        {original.fieldLabel}
+                      </p>
+                      <p className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+                        {original.fieldName}
+                      </p>
+                      <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
+                        <Badge variant="secondary">
+                          {FIELD_TYPE_LABELS[original.fieldType] ?? original.fieldType}
+                        </Badge>
+                        {original.isRequired ? (
+                          <Badge variant="destructive" className="text-xs">
+                            Required
+                          </Badge>
+                        ) : (
+                          <span className="text-muted-foreground">Optional</span>
+                        )}
+                        <span aria-hidden className="text-muted-foreground">
+                          ·
+                        </span>
+                        <span className="tabular-nums text-muted-foreground">
+                          Order {original.sortOrder}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEdit(original)}
+                        aria-label="Edit field"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <ConfirmationDialog
+                        trigger={
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive hover:text-destructive"
+                            disabled={deletingId === original.id}
+                            aria-label="Delete field"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        }
+                        title="Delete Custom Field"
+                        description={getDeleteDescription(original)}
+                        confirmLabel="Delete Field"
+                        onConfirm={() => handleDelete(original.id)}
+                        loading={deletingId === original.id}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
               emptyState={
                 <div className="py-8 text-center">
                   <p className="text-muted-foreground">
diff --git a/src/components/admin/document-templates/template-list.tsx b/src/components/admin/document-templates/template-list.tsx
index 585fa875..1bf7a2d2 100644
--- a/src/components/admin/document-templates/template-list.tsx
+++ b/src/components/admin/document-templates/template-list.tsx
@@ -10,6 +10,7 @@ import { PageHeader } from '@/components/shared/page-header';
 import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { StatusPill } from '@/components/ui/status-pill';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { apiFetch } from '@/lib/api/client';
 import { TemplateForm } from './template-form';
@@ -117,11 +118,12 @@ export function TemplateList() {
     {
       accessorKey: 'isActive',
       header: 'Status',
-      cell: ({ row }) => (
-        <Badge variant={row.original.isActive ? 'default' : 'outline'}>
-          {row.original.isActive ? 'Active' : 'Inactive'}
-        </Badge>
-      ),
+      cell: ({ row }) =>
+        row.original.isActive ? (
+          <StatusPill status="enabled">Active</StatusPill>
+        ) : (
+          <StatusPill status="disabled">Inactive</StatusPill>
+        ),
     },
     {
       accessorKey: 'updatedAt',
@@ -197,6 +199,70 @@ export function TemplateList() {
         columns={columns}
         data={templates}
         isLoading={loading}
+        getRowId={(row) => row.id}
+        cardRender={({ original }) => (
+          <div className="rounded-xl border border-border bg-card p-4 shadow-sm">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <p className="truncate text-sm font-semibold text-foreground">{original.name}</p>
+                </div>
+                <div className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+                  <Badge variant="secondary">
+                    {TYPE_LABELS[original.templateType] ?? original.templateType}
+                  </Badge>
+                  <span>v{original.version}</span>
+                  {original.isActive ? (
+                    <StatusPill status="enabled">Active</StatusPill>
+                  ) : (
+                    <StatusPill status="disabled">Inactive</StatusPill>
+                  )}
+                  <span aria-hidden>·</span>
+                  <span>
+                    Updated{' '}
+                    {new Date(original.updatedAt).toLocaleDateString('en-GB', {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric',
+                    })}
+                  </span>
+                </div>
+              </div>
+              <div className="flex shrink-0 items-center gap-0.5">
+                <TemplatePreview content={original.content} templateName={original.name} />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  title="Version history"
+                  onClick={() => handleViewHistory(original)}
+                >
+                  <History className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  title="Edit template"
+                  onClick={() => handleEditTemplate(original)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+                <ConfirmationDialog
+                  trigger={
+                    <Button variant="ghost" size="icon" title="Delete template">
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  }
+                  title="Delete Template"
+                  description={`Are you sure you want to delete "${original.name}"? This action cannot be undone.`}
+                  confirmLabel="Delete"
+                  destructive
+                  onConfirm={() => handleDeleteTemplate(original.id)}
+                />
+              </div>
+            </div>
+          </div>
+        )}
         emptyState={
           <div className="py-10 text-center text-muted-foreground">
             No document templates yet. Create your first template to get started.
diff --git a/src/components/admin/ports/port-list.tsx b/src/components/admin/ports/port-list.tsx
index 1bd29cdc..e025463e 100644
--- a/src/components/admin/ports/port-list.tsx
+++ b/src/components/admin/ports/port-list.tsx
@@ -8,7 +8,7 @@ import { Pencil, Plus } from 'lucide-react';
 import { DataTable } from '@/components/shared/data-table';
 import { PageHeader } from '@/components/shared/page-header';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
+import { StatusPill } from '@/components/ui/status-pill';
 import { apiFetch } from '@/lib/api/client';
 import { PortForm } from './port-form';
 
@@ -85,11 +85,9 @@ export function PortList() {
       header: 'Status',
       cell: ({ row }) =>
         row.original.isActive ? (
-          <Badge variant="default" className="bg-green-600">
-            Active
-          </Badge>
+          <StatusPill status="enabled">Active</StatusPill>
         ) : (
-          <Badge variant="destructive">Inactive</Badge>
+          <StatusPill status="disabled">Inactive</StatusPill>
         ),
     },
     {
@@ -124,6 +122,42 @@ export function PortList() {
         data={ports}
         isLoading={loading}
         getRowId={(row) => row.id}
+        cardRender={({ original }) => (
+          <div className="flex items-start justify-between gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                {original.primaryColor ? (
+                  <span
+                    aria-hidden
+                    className="inline-block h-3 w-3 shrink-0 rounded-full"
+                    style={{ backgroundColor: original.primaryColor }}
+                  />
+                ) : null}
+                <p className="truncate text-sm font-semibold text-foreground">{original.name}</p>
+                {original.isActive ? (
+                  <StatusPill status="enabled">Active</StatusPill>
+                ) : (
+                  <StatusPill status="disabled">Inactive</StatusPill>
+                )}
+              </div>
+              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+                <code className="rounded bg-muted px-1.5 py-0.5">{original.slug}</code>
+                <span>{original.defaultCurrency}</span>
+                <span aria-hidden>·</span>
+                <span>{original.timezone}</span>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => handleEditPort(original)}
+              aria-label={`Edit ${original.name}`}
+              className="shrink-0"
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
         emptyState={
           <div className="text-center py-8">
             <p className="text-muted-foreground">No ports configured.</p>
diff --git a/src/components/admin/roles/role-list.tsx b/src/components/admin/roles/role-list.tsx
index 0ea0ba13..cac036ef 100644
--- a/src/components/admin/roles/role-list.tsx
+++ b/src/components/admin/roles/role-list.tsx
@@ -173,6 +173,67 @@ export function RoleList() {
         data={roles}
         isLoading={loading}
         getRowId={(row) => row.id}
+        cardRender={({ original }) => (
+          <div className="rounded-xl border border-border bg-card p-4 shadow-sm">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <p className="truncate text-sm font-semibold text-foreground">
+                    {formatRole(original.name)}
+                  </p>
+                  {original.isSystem ? (
+                    <Badge variant="outline" className="text-xs">
+                      <Lock className="mr-1 h-3 w-3" aria-hidden />
+                      System
+                    </Badge>
+                  ) : null}
+                </div>
+                {original.description ? (
+                  <p className="mt-1 text-xs text-muted-foreground">{original.description}</p>
+                ) : null}
+                <button
+                  type="button"
+                  onClick={() => setViewingPermissions(original)}
+                  className="mt-2 inline-flex"
+                  title="View permission breakdown"
+                >
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-secondary/80">
+                    {countPermissions(original.permissions)} permissions
+                  </Badge>
+                </button>
+              </div>
+              <div className="flex shrink-0 items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleEditRole(original)}
+                  aria-label="Edit role"
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+                {!original.isSystem ? (
+                  <ConfirmationDialog
+                    trigger={
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-destructive hover:text-destructive"
+                        aria-label="Delete role"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    }
+                    title="Delete Role"
+                    description={`Delete "${original.name}"? Users assigned to this role must be reassigned first.`}
+                    confirmLabel="Delete"
+                    onConfirm={() => deleteMutation.mutate(original.id)}
+                    loading={deleteMutation.isPending && deleteMutation.variables === original.id}
+                  />
+                ) : null}
+              </div>
+            </div>
+          </div>
+        )}
         emptyState={
           <div className="text-center py-8">
             <p className="text-muted-foreground">No roles defined.</p>
diff --git a/src/components/admin/tags/tag-list.tsx b/src/components/admin/tags/tag-list.tsx
index 5d48e978..c580ade5 100644
--- a/src/components/admin/tags/tag-list.tsx
+++ b/src/components/admin/tags/tag-list.tsx
@@ -128,6 +128,52 @@ export function TagList() {
         data={tags}
         isLoading={loading}
         getRowId={(row) => row.id}
+        cardRender={({ original }) => (
+          <div className="flex items-start justify-between gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
+            <div className="flex min-w-0 items-center gap-2">
+              <span
+                aria-hidden
+                className="inline-block h-3 w-3 shrink-0 rounded-full"
+                style={{ backgroundColor: original.color }}
+              />
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold text-foreground">{original.name}</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  <span className="font-mono">{original.color}</span>
+                  {' · '}
+                  Created {new Date(original.createdAt).toLocaleDateString()}
+                </p>
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleEditTag(original)}
+                aria-label={`Edit ${original.name}`}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <ConfirmationDialog
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    aria-label={`Delete ${original.name}`}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                }
+                title="Delete Tag"
+                description={`Are you sure you want to delete "${original.name}"? This action cannot be undone.`}
+                confirmLabel="Delete"
+                onConfirm={() => deleteMutation.mutate(original.id)}
+                loading={deleteMutation.isPending && deleteMutation.variables === original.id}
+              />
+            </div>
+          </div>
+        )}
         emptyState={
           <div className="text-center py-8">
             <p className="text-muted-foreground">No tags yet.</p>