Add event report dashboard, slide-out drawer, in-app comp portal + creator tracking

- Reporting: GET /api/stats aggregates check-in progress, ice, ticket types,
  people breakdown, add-ons/donors, gate-crew leaderboard (from audit),
  comp tickets by creator, and a by-hour check-in timeline. New /stats screen.
- Slide-out drawer (custom RN Animated, no new native deps) replaces per-screen
  header links; available on every main screen via a hamburger.
- In-app comp portal (/comp), password-gated like /crush33, reusing the portal
  endpoints; records the issuing gate-staff name (Created By column) and reports
  comps per creator.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/components/SideMenu.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View, Text, Pressable, Easing, useWindowDimensions } from "react-native";
+import { router, useSegments } from "expo-router";
+import { useAuth } from "../lib/auth";
+import { theme } from "../lib/theme";
+
+const ITEMS: { label: string; icon: string; route: string; seg: string }[] = [
+  { label: "Scanner", icon: "📷", route: "/", seg: "" },
+  { label: "Event report", icon: "📊", route: "/stats", seg: "stats" },
+  { label: "Comp tickets", icon: "🎟️", route: "/comp", seg: "comp" },
+  { label: "Admin lookup", icon: "🔎", route: "/admin", seg: "admin" },
+];
+
+export default function SideMenu({ visible, onClose }: { visible: boolean; onClose: () => void }) {
+  const { operator, signOut } = useAuth();
+  const segments = useSegments();
+  const current = segments[0] ?? "";
+  const { width } = useWindowDimensions();
+  const panelW = Math.min(320, width * 0.84);
+  const tx = useRef(new Animated.Value(-panelW)).current;
+  const fade = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(tx, {
+        toValue: visible ? 0 : -panelW,
+        duration: 220,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(fade, { toValue: visible ? 1 : 0, duration: 220, useNativeDriver: true }),
+    ]).start();
+  }, [visible, panelW, tx, fade]);
+
+  const go = (item: { route: string; seg: string }) => {
+    onClose();
+    if (item.seg !== current) router.replace(item.route as any);
+  };
+
+  return (
+    <View pointerEvents={visible ? "auto" : "none"} style={StyleSheet.absoluteFill}>
+      <Animated.View style={[styles.scrim, { opacity: fade }]}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
+      </Animated.View>
+      <Animated.View style={[styles.panel, { width: panelW, transform: [{ translateX: tx }] }]}>
+        <View style={styles.header}>
+          <Text style={styles.logo}>🐻 Camp Scan</Text>
+          {!!operator && <Text style={styles.operator}>{operator}</Text>}
+        </View>
+        <View style={styles.items}>
+          {ITEMS.map((it) => {
+            const active = it.seg === current;
+            return (
+              <Pressable key={it.route} style={[styles.item, active && styles.itemActive]} onPress={() => go(it)}>
+                <Text style={styles.itemIcon}>{it.icon}</Text>
+                <Text style={[styles.itemText, active && styles.itemTextActive]}>{it.label}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+        <View style={styles.spacer} />
+        <Pressable
+          style={styles.signout}
+          onPress={() => {
+            onClose();
+            signOut();
+          }}
+        >
+          <Text style={styles.itemIcon}>🚪</Text>
+          <Text style={styles.signoutText}>Sign out</Text>
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrim: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "rgba(0,0,0,0.55)" },
+  panel: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.card,
+    borderRightWidth: 1,
+    borderRightColor: theme.cardBorder,
+    paddingTop: 54,
+    paddingHorizontal: 14,
+    paddingBottom: 28,
+  },
+  header: { paddingHorizontal: 8, paddingBottom: 14, borderBottomWidth: 1, borderBottomColor: theme.cardBorder },
+  logo: { color: theme.text, fontSize: 20, fontWeight: "800" },
+  operator: { color: theme.textDim, fontSize: 14, marginTop: 3 },
+  items: { marginTop: 14, gap: 4 },
+  item: { flexDirection: "row", alignItems: "center", gap: 14, paddingVertical: 14, paddingHorizontal: 12, borderRadius: 12 },
+  itemActive: { backgroundColor: theme.primary },
+  itemIcon: { fontSize: 20, width: 26, textAlign: "center" },
+  itemText: { color: theme.text, fontSize: 17, fontWeight: "600" },
+  itemTextActive: { color: "#fff", fontWeight: "800" },
+  spacer: { flex: 1 },
+  signout: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    borderTopWidth: 1,
+    borderTopColor: theme.cardBorder,
+  },
+  signoutText: { color: theme.dangerBright, fontSize: 17, fontWeight: "700" },
+});