UI-Komponenten & Design-System¶

Architektur¶

Das Admin Panel verwendet Inline-Styles (keine CSS-Module/Tailwind) mit einer zentralisierten Farbpalette. Alle Komponenten folgen einem konsistenten Dark-Theme-Design.

Farbpalette (`lib/colors.ts`)¶

Hintergründe¶

Variable	Hex	Verwendung
`bg`	#0a0e12	Seitenhintergrund
`bgPanel`	#111820	Panel/Sidebar
`bgCard`	#1a2332	Karten
`bgInput`	#0d1117	Eingabefelder

Akzentfarben¶

Variable	Hex	Verwendung
`accent`	#3b82f6	Primäre Aktionsfarbe
`success`	#22c55e	Erfolgsstatus
`warning`	#f59e0b	Warnungen
`danger`	#ef4444	Fehler
`info`	#06b6d4	Informationen

Text¶

Variable	Hex	Verwendung
`text`	#e2e8f0	Primärtext
`textMuted`	50% Opacity	Sekundärtext
`textSecondary`	70% Opacity	Tertiärtext

Wiederverwendbare Komponenten¶

StatusBadge¶

Pfad: app/components/StatusBadge.tsx

Pill-förmiges Badge mit farbcodiertem Hintergrund für Status-Anzeigen.

interface Props {
  status: string;
}

Status-Mapping:

Kategorie	Status-Werte	Farbe
Erfolg	CONFIRMED, COMMITTED, SUCCESS, ACTIVE, DONE	Grün
Info	CREATED, SIGNED, DRY_RUN	Cyan
Warnung	EXECUTING, PENDING, APPROVED	Amber
Fehler	FAILED, REVERTED	Rot
Inaktiv	INACTIVE, EXPIRED, USED	Grau

Styling: 11px Schrift, 12px Border-Radius, semi-transparenter Hintergrund

DataTable¶

Pfad: app/components/DataTable.tsx

Generische Tabellen-Komponente mit Pagination und Suche.

interface DataTableProps<T> {
  columns: Column<T>[];     // Spalten-Definition
  data: T[];                // Tabellenzeilen
  total?: number;           // Gesamtanzahl für Pagination
  page?: number;            // Aktuelle Seite
  pageSize?: number;        // Einträge pro Seite
  onPageChange?: (page: number) => void;
  onSearch?: (query: string) => void;
  searchPlaceholder?: string;
  onRowClick?: (row: T) => void;
}

interface Column<T> {
  key: string;
  label: string;
  render?: (value: any, row: T) => ReactNode;
}

Features: - Suchfeld (max. 400px Breite) - Responsive Tabelle mit horizontalem Scroll - Custom Column-Rendering via render-Funktion - Pagination: Prev/Next mit "X total — Page Y of Z" - Row-Click-Handler für Navigation - Dark-Theme mit dezenten Borders (13px Schrift)

StatCard¶

Pfad: app/components/StatCard.tsx

Metrikkarte für Dashboard-Zusammenfassungen.

interface Props {
  label: string;    // Überschrift
  value: string;    // Hauptwert (24px, fett)
  sub?: string;     // Untertitel (11px, gedämpft)
  color?: string;   // Wertfarbe (optional)
}

Styling: #1a2332 Hintergrund, dezenter Border, 10px Radius, 18px Padding

AdminShell¶

Pfad: app/components/AdminShell.tsx

Layout-Wrapper für alle Admin-Seiten.

interface Props {
  children: ReactNode;
}

Struktur: Flexbox-Container mit Sidebar (links) + Content-Bereich (rechts, 24px Padding)

Pfad: app/components/Sidebar.tsx

Navigationskomponente mit 15 Menüpunkten.

Routen:

Icon	Label	Pfad
D	Dashboard	`/dashboard`
U	Users	`/users`
S	Settlements	`/settlements`
I	Intents	`/intents`
V	Vouchers	`/vouchers`
A	Affiliates	`/affiliates`
W	Winners	`/winners`
♥	Charity	`/charity`
⚙	Config	`/config`
C	Contracts	`/contracts`
E	Errors	`/errors`
⚡	Workers	`/workers`
🌱	Seeds	`/seeds`
🔍	Watchdog	`/watchdog`
T	Test Players	`/testplayers`

Features: - Aktive Route: Fetter Text + farbiger Icon-Hintergrund - Hover-Effekte - Logout-Button am unteren Rand - Konsistentes Dark-Theme (#111820 Hintergrund)

Design-Patterns¶

Responsive Layouts¶

// Typisches Karten-Grid
<div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
  <StatCard label="..." value="..." />
  <StatCard label="..." value="..." />
</div>

Wallet-Adressen¶

// Gekürzte Darstellung mit Link
<a href={`/users/${wallet}`} style={{ color: colors.accent }}>
  {wallet.slice(0, 6)}...{wallet.slice(-4)}
</a>

USDT-Formatierung¶

function formatUsdt(raw: string): string {
  return (Number(raw) / 1_000_000).toFixed(2);
}

Zeitstempel¶

new Date(timestamp).toLocaleString("de-AT")

Schriftarten¶

System-Fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif