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/whatsapp-attendees/page.tsx

@@ -5,12 +5,19 @@ import { useAuth } from "@/hooks/useAuth";
 import { useRouter, useSearchParams } from "next/navigation";
 import { apiFetch, fetchAllUsers } from "@/lib/api";
 import { useDismissingState } from "@/hooks/useDismissingState";
-import { MessageCircle } from "lucide-react";
+import { MessageCircle, Users, Zap, Send, Clock, type LucideIcon } from "lucide-react";
 
 // Attendee with preference info
 type Attendee = { id: string; name: string; phone: string; pref: string };
 type UserEntry = { id: string; name: string; phone: string; pref: string };
 
+const WA_TAB_ICONS: Record<"attendees" | "automations" | "broadcasts" | "scheduled", LucideIcon> = {
+  attendees: Users,
+  automations: Zap,
+  broadcasts: Send,
+  scheduled: Clock,
+};
+
 function toLocalInputValue(d: Date) {
   const pad = (n: number) => String(n).padStart(2, "0");
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
@@ -612,12 +619,16 @@ function WhatsAppAttendeesPageInner() {
 
       {/* Tabs */}
       <div className="mb-4 flex items-center gap-2 flex-wrap">
-        {(["attendees", "automations", "broadcasts", "scheduled"] as const).map((t) => (
-          <label key={t} className={`px-3 py-1.5 text-sm rounded border cursor-pointer ${tab === t ? "bg-green-600 text-white border-green-600" : "bg-white text-gray-800 border-gray-200"}`}>
-            <input type="radio" name="waTab" value={t} className="hidden" checked={tab === t} onChange={() => setTab(t)} />
-            {t.charAt(0).toUpperCase() + t.slice(1)}
-          </label>
-        ))}
+        {(["attendees", "automations", "broadcasts", "scheduled"] as const).map((t) => {
+          const Icon = WA_TAB_ICONS[t];
+          return (
+            <label key={t} className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded border cursor-pointer ${tab === t ? "bg-green-600 text-white border-green-600" : "bg-white text-gray-800 border-gray-200"}`}>
+              <input type="radio" name="waTab" value={t} className="hidden" checked={tab === t} onChange={() => setTab(t)} />
+              <Icon className="w-4 h-4" />
+              {t.charAt(0).toUpperCase() + t.slice(1)}
+            </label>
+          );
+        })}
       </div>
 
       {/* ── Attendees Tab ── */}