Refactor: reorganize components into domain subfolders

shared/    → StatusBadge
layout/    → Navbar
championships/ → ChampionshipCard
registrations/ → RegistrationCard, RegistrationTimeline
admin/     → UserCard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/components/admin/UserCard.tsx

@@ -0,0 +1,59 @@
+import { UserOut } from "@/types/user";
+import { Card, CardContent } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  user: UserOut;
+  onApprove?: (id: string) => void;
+  onReject?: (id: string) => void;
+  isActing?: boolean;
+}
+
+const STATUS_DOT: Record<string, string> = {
+  pending: "bg-orange-400",
+  approved: "bg-green-500",
+  rejected: "bg-red-500",
+};
+
+export function UserCard({ user, onApprove, onReject, isActing }: Props) {
+  const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+
+  return (
+    <Card>
+      <CardContent className="p-4 flex gap-4 items-start">
+        <Avatar className="h-10 w-10 shrink-0">
+          <AvatarFallback className="bg-violet-100 text-violet-700 text-sm font-semibold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="flex-1 min-w-0 space-y-1">
+          <div className="flex items-center gap-2">
+            <p className="font-semibold text-gray-900">{user.full_name}</p>
+            <span className={`h-2 w-2 rounded-full shrink-0 ${STATUS_DOT[user.status] ?? "bg-gray-400"}`} />
+          </div>
+          <p className="text-sm text-gray-500">{user.email}</p>
+          {user.organization_name && <p className="text-sm text-gray-500">🏢 {user.organization_name}</p>}
+          {user.phone && <p className="text-sm text-gray-500">📞 {user.phone}</p>}
+          {user.instagram_handle && <p className="text-sm text-gray-500">📸 {user.instagram_handle}</p>}
+        </div>
+
+        {user.status === "pending" && onApprove && onReject && (
+          <div className="flex gap-2 shrink-0">
+            <Button size="sm" className="bg-green-600 hover:bg-green-700" disabled={isActing} onClick={() => onApprove(user.id)}>
+              Approve
+            </Button>
+            <Button size="sm" variant="destructive" disabled={isActing} onClick={() => onReject(user.id)}>
+              Reject
+            </Button>
+          </div>
+        )}
+
+        {user.status !== "pending" && (
+          <span className="text-xs text-gray-400 capitalize shrink-0">{user.status}</span>
+        )}
+      </CardContent>
+    </Card>
+  );
+}