"use client"; import Image from "next/image"; import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/navigation"; import { SiteShell, PageBand } from "@/components/SiteShell"; const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"; type Tab = "verify" | "list" ; type Person = { id: number; name: string; mobile: string; email: string; address: string; state: string; city: string; pincode: string; dob: string; gender: string; blood_group: string; profile_img?: string; }; const tabMeta: Record = { verify: { icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z", desc: "Look up your existing record", }, list: { icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z", desc: "Browse all registered people", }, }; export function MembershipTabs({ type }: { type: "member" | "volunteer" }) { const router = useRouter(); const [tab, setTab] = useState("list"); const [people, setPeople] = useState([]); const [loading, setLoading] = useState(true); const [formState, setFormState] = useState<"idle" | "loading" | "success" | "error">("idle"); const [verifyId, setVerifyId] = useState(""); const [verifyDob, setVerifyDob] = useState(""); const [verifyResult, setVerifyResult] = useState(null); const [verifyError, setVerifyError] = useState(""); const [profileFile, setProfileFile] = useState(null); const fileRef = useRef(null); const endpoint = type === "member" ? "members" : "volunteers"; const label = type === "member" ? "Member" : "Volunteer"; const labelPlural = type === "member" ? "Members" : "Volunteers"; const accentColor = type === "member" ? "var(--brand-primary)" : "var(--brand-secondary)"; useEffect(() => { fetch(`${API}/${endpoint}`) .then((r) => r.json()) .then((data) => setPeople(Array.isArray(data) ? data : [])) .catch(() => undefined) .finally(() => setLoading(false)); }, [endpoint]); const tabs: { key: Tab; label: string }[] = [ { key: "verify", label: `Verify ${label}` }, { key: "list", label: `Our ${labelPlural}` }, ]; return ( {/* ── Hero (white canvas) ── */}
{label} Portal

{label}{" "} {type === "member" ? "Membership" : "Program"}

Verify your details, browse the community, or submit a new application — all in one place.

{/* ── Sidebar ── */} {/* ── Content ── */}
{/* ── Verify ── */} {tab === "verify" && (

Verify {label}

Enter your ID and date of birth to look up your record.

setVerifyId(e.target.value)} placeholder={`${label} ID`} className="input" /> setVerifyDob(e.target.value)} type="date" className="input" />
{verifyResult && (
Record Found

Name

{verifyResult.name}

Mobile

{verifyResult.mobile}

Email

{verifyResult.email}

Location

{verifyResult.city}, {verifyResult.state}

)} {verifyError && (
{verifyError}
)}
)} {/* ── List ── */} {tab === "list" && (
{people.length > 0 && (
{people.length} {labelPlural} registered
)} {loading ? (
Loading...
) : people.length === 0 ? (

No {labelPlural.toLowerCase()} yet

Applications will appear here once submitted.

) : (
{people.map((p) => (
{p.profile_img ? ( ) : (
{p.name.charAt(0)}
)}

{p.name}

{p.mobile}
{p.email || "—"}
{p.city}, {p.state}
))}
)}
)}
); }