Add tab icons and fix mobile dashboard styling issues

- Add matching lucide-react icons to tab/mode switcher buttons on
  payments, at-the-door, manual, email-attendees, whatsapp-attendees,
  and admin cashup pages, mirroring icons already used in their help menus
- Fix navbar Logout button sitting lower than other nav links (missing
  border/padding classes that other links use for their active-underline)
- Fix stat card labels getting truncated on mobile by removing the
  ellipsis-cut label and widening the mobile grid to one column
- Fix Revenue trend / Top performing events rendering outside the
  viewport on mobile by containing horizontal overflow and truncating
  long event titles in the table

frontend/src/app/dashboard/supervisor/at-the-door/page.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
 import { scoreUser } from "@/lib/fuzzyMatch";
 import { useDismissingState } from "@/hooks/useDismissingState";
-import { DoorOpen } from "lucide-react";
+import { DoorOpen, UserPlus, CreditCard, CheckSquare, Ticket, RotateCcw, type LucideIcon } from "lucide-react";
 
 type Mode = "registration" | "payment" | "checkin" | "tickets" | "refund";
 
@@ -18,6 +18,14 @@ const MODE_LABELS: Record<Mode, string> = {
     refund: "REFUND",
 };
 
+const MODE_ICONS: Record<Mode, LucideIcon> = {
+    registration: UserPlus,
+    payment: CreditCard,
+    checkin: CheckSquare,
+    tickets: Ticket,
+    refund: RotateCcw,
+};
+
 // ─── Fuzzy search helpers ─────────────────────────────────────────────────────
 
 function fuzzyFilterRegs(allRegs: any[], search: string): any[] {
@@ -390,21 +398,25 @@ export default function AtTheDoorPage() {
 
             {/* Mode Buttons */}
             <div className="flex gap-2 mb-4 flex-wrap">
-                {(["registration", "payment", "checkin", "tickets", "refund"] as Mode[]).map(m => (
-                    <button
-                        key={m}
-                        onClick={() => setMode(m)}
-                        className={`px-4 py-2 rounded text-sm font-medium border ${
-                            mode === m
-                                ? m === "refund"
-                                    ? "bg-red-600 text-white border-red-600"
-                                    : "bg-brand-600 text-white border-brand-600"
-                                : "bg-white hover:bg-gray-50"
-                        }`}
-                    >
-                        {MODE_LABELS[m]}
-                    </button>
-                ))}
+                {(["registration", "payment", "checkin", "tickets", "refund"] as Mode[]).map(m => {
+                    const Icon = MODE_ICONS[m];
+                    return (
+                        <button
+                            key={m}
+                            onClick={() => setMode(m)}
+                            className={`inline-flex items-center gap-1.5 px-4 py-2 rounded text-sm font-medium border ${
+                                mode === m
+                                    ? m === "refund"
+                                        ? "bg-red-600 text-white border-red-600"
+                                        : "bg-brand-600 text-white border-brand-600"
+                                    : "bg-white hover:bg-gray-50"
+                            }`}
+                        >
+                            <Icon className="w-4 h-4" />
+                            {MODE_LABELS[m]}
+                        </button>
+                    );
+                })}
             </div>
 
             {/* ✅ Panels */}