Function OverviewPanel

src/components/admin/OverviewPanel.tsx:12–179

()

interface Stats {
  totalVoters: number;
  votesCast: number;
  activeSections: number;
  activeElection: Election | null;
}

interface SectionTurnout {
  year_section: string;
  total_voters: number;
  votes_cast: number;
}

export function OverviewPanel({ onGoToAudit }: { onGoToAudit?: () => void }) {
  const [stats, setStats] = useState<Stats | null>(null);
  const [sections, setSections] = useState<SectionTurnout[]>([]);
  const [loading, setLoading] = useState(true);
  const [auditLog, setAuditLog] = useState<AuditEntry[]>([]);
  const adminEmail = sessionStorage.getItem(ADMIN_SESSION_KEY) ?? "";

  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const checkDark = () => setIsDark(document.documentElement.classList.contains("dark"));
    checkDark();
    const observer = new MutationObserver(checkDark);
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    return () => observer.disconnect();
  }, []);

  async function load() {
    setLoading(true);
    try {
      const [statsRes, sectionRes, electionRes] = await Promise.all([
        supabase.rpc("admin_get_stats", { p_admin_email: adminEmail }),
        supabase.rpc("admin_get_section_turnout", { p_admin_email: adminEmail }),
        supabase.from("elections").select("*").eq("is_active", true).maybeSingle(),
      ]);

      const statsArray = statsRes.data as Array<{ total_voters: number; votes_cast: number; active_sections: number }> | null;
      const statsData = statsArray?.[0] ?? null;

      setStats({
        totalVoters: statsData?.total_voters ?? 0,
        votesCast: statsData?.votes_cast ?? 0,
        activeSections: statsData?.active_sections ?? 0,
        activeElection: electionRes.data as Election | null,
      });

      setSections((sectionRes.data as SectionTurnout[] | null) ?? []);
    } catch (err) {
      console.error("Failed to load stats:", err);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
    setAuditLog(getAuditLog());