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/trades/[id]/page.tsx

@@ -6,15 +6,15 @@ import { Permission } from "../../auth-context";
 import { tradesApi } from "../../api";
 import { Header } from "../../components/Header";
 import { SatsDisplay } from "../../components/SatsDisplay";
+import { StatusBadge } from "../../components/StatusBadge";
 import { useRequireAuth } from "../../hooks/useRequireAuth";
 import { useAsyncData } from "../../hooks/useAsyncData";
 import { formatDateTime } from "../../utils/date";
-import { formatEur, getTradeStatusDisplay } from "../../utils/exchange";
+import { formatEur } from "../../utils/exchange";
 import {
   layoutStyles,
   typographyStyles,
   bannerStyles,
-  badgeStyles,
   buttonStyles,
   tradeCardStyles,
 } from "../../styles/shared";
@@ -78,7 +78,6 @@ export default function TradeDetailPage() {
     );
   }
 
-  const status = getTradeStatusDisplay(trade.status);
   const isBuy = trade.direction === "buy";
 
   return (
@@ -98,15 +97,7 @@ export default function TradeDetailPage() {
             <div style={styles.detailGrid}>
               <div style={styles.detailRow}>
                 <span style={styles.detailLabel}>Status:</span>
-                <span
-                  style={{
-                    ...badgeStyles.badge,
-                    background: status.bgColor,
-                    color: status.textColor,
-                  }}
-                >
-                  {status.text}
-                </span>
+                <StatusBadge tradeStatus={trade.status} />
               </div>
               <div style={styles.detailRow}>
                 <span style={styles.detailLabel}>Time:</span>