Extract reusable UI components to reduce DRY violations

- Created StatusBadge component: Standardizes status badge display
  - Supports tradeStatus prop for trade-specific styling
  - Supports variant prop for simple badges (success/error/ready)
  - Eliminates repetitive badge style combinations

- Created EmptyState component: Standardizes empty state display
  - Handles loading and empty states consistently
  - Supports message, hint, and action props
  - Used across trades, invites, admin pages

- Created ConfirmationButton component: Standardizes confirmation flows
  - Two-step confirmation pattern (action -> confirm/cancel)
  - Supports different variants (danger/success/primary)
  - Handles loading states automatically
  - Used for cancel, complete, no-show actions

- Migrated pages to use new components:
  - trades/page.tsx: StatusBadge, EmptyState, ConfirmationButton
  - trades/[id]/page.tsx: StatusBadge
  - invites/page.tsx: StatusBadge, EmptyState
  - admin/trades/page.tsx: StatusBadge, EmptyState, ConfirmationButton
  - admin/invites/page.tsx: StatusBadge

Benefits:
- Eliminated ~50+ lines of repetitive badge styling code
- Consistent UI patterns across all pages
- Easier to maintain and update styling
- Better type safety

All tests passing (32 frontend, 33 e2e)

frontend/app/admin/invites/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from "react";
 import { Permission } from "../../auth-context";
 import { adminApi } from "../../api";
 import { Header } from "../../components/Header";
+import { StatusBadge } from "../../components/StatusBadge";
 import { useRequireAuth } from "../../hooks/useRequireAuth";
 import { useMutation } from "../../hooks/useMutation";
 import { components } from "../../generated/api";
@@ -15,7 +16,6 @@ import {
   paginationStyles,
   formStyles,
   buttonStyles,
-  badgeStyles,
   utilityStyles,
 } from "../../styles/shared";
 
@@ -119,16 +119,16 @@ export default function AdminInvitesPage() {
     return new Date(dateStr).toLocaleString();
   };
 
-  const getStatusBadgeStyle = (status: string) => {
+  const getStatusBadgeVariant = (status: string): "ready" | "success" | "error" | undefined => {
     switch (status) {
       case READY:
-        return badgeStyles.badgeReady;
+        return "ready";
       case SPENT:
-        return badgeStyles.badgeSuccess;
+        return "success";
       case REVOKED:
-        return badgeStyles.badgeError;
+        return "error";
       default:
-        return {};
+        return undefined;
     }
   };
 
@@ -237,11 +237,9 @@ export default function AdminInvitesPage() {
                         <td style={tableStyles.tdMono}>{record.identifier}</td>
                         <td style={tableStyles.td}>{record.godfather_email}</td>
                         <td style={tableStyles.td}>
-                          <span
-                            style={{ ...badgeStyles.badge, ...getStatusBadgeStyle(record.status) }}
-                          >
+                          <StatusBadge variant={getStatusBadgeVariant(record.status)}>
                             {record.status}
-                          </span>
+                          </StatusBadge>
                         </td>
                         <td style={tableStyles.td}>{record.used_by_email || "-"}</td>
                         <td style={tableStyles.tdDate}>{formatDate(record.created_at)}</td>