import {useEffect,useState} from 'react';import api from '../api/client';
export function ActivityPage(){return <RemoteList title="Activity reports" endpoint="/activities/" cols={[["activity_date","Date"],["title","Activity"],["activity_type","Type"],["campus_name","Campus"],["attendance","Attendance"],["souls_won","Souls won"]]}/>}
export function FinancePage(){return <RemoteList title="Finance entries" endpoint="/finance/" cols={[["transaction_date","Date"],["description","Description"],["category","Category"],["campus_name","Campus"],["direction","Direction"],["amount","Amount"]]}/>}
export function LeadershipPage(){return <RemoteList title="Leadership structure" endpoint="/governance/assignments/" cols={[["member_name","Member"],["position_name","Position"],["campus_name","Campus"],["starts_on","From"],["active","Active"]]}/>}
function RemoteList({title,endpoint,cols}){const[rows,setRows]=useState([]);const[loading,setLoading]=useState(true);const[error,setError]=useState('');useEffect(()=>{setLoading(true);setError('');api.get(endpoint).then(r=>setRows(r.data.results||r.data)).catch(()=>setError(`Unable to load ${title.toLowerCase()}.`)).finally(()=>setLoading(false))},[endpoint,title]);return <section className="panel"><div className="panel-head"><h3>{title}</h3></div>{error?<p className="notice error">{error}</p>:loading?<p>Loading…</p>:<div className="table-wrap"><table><thead><tr>{cols.map(c=><th key={c[0]}>{c[1]}</th>)}</tr></thead><tbody>{rows.length?rows.map((r,i)=><tr key={r.id||i}>{cols.map(c=><td key={c[0]}>{typeof r[c[0]]==='boolean'?(r[c[0]]?'Yes':'No'):String(r[c[0]]??'—')}</td>)}</tr>):<tr><td colSpan={cols.length}>No records yet.</td></tr>}</tbody></table></div>}</section>}
