Résumé
{[["Démarrée le",fmtDate(detail.startDate)],["Cagnotte / tour",fmtAmt(detail.memberCount*detail.amount)],["Mon tour",`#${detail.myTurn} · ${myR?fmtDate(myR.date):"—"}`],["Tours cochés",`${done}/${rounds.length} (${pct}%)`],["Durée totale",`${(rounds.length-1)*detail.frequency} jours`]].map(([l,v],i)=>(
{l}{v}
))}
{rounds.map(r=>(
{detail.checks[r.num]&&✓}
{r.num}
{r.isMe?"👑 MOI":`Tour ${r.num}`}
{fmtDate(r.date)}
{(r.pot/1000).toFixed(0)}k FCFA
))}
);
}
/* ═══════════════════════════════════════════════════════
APP PRINCIPAL
Contient uniquement la logique d'état.
Tous les views/composants sont définis EN DEHORS
→ les inputs ne perdent plus le focus ✓
═══════════════════════════════════════════════════════ */
export default function TontiPay(){
const [view, setView] =useState("load");
const [db, setDb] =useState({tontines:[]});
const [active,setActive]=useState(null);
const [detail,setDetail]=useState(null);
const [toast, setToast] =useState(null);
const [saving,setSaving]=useState(false);
const [form, setForm] =useState({name:"",amount:20000,frequency:5,startDate:todayStr(),myTurn:1,memberCount:5});
useEffect(()=>{
loadDb().then(d=>{ setDb(d); const a=d.tontines.find(t=>t.status==="active"); if(a) setActive(a); setView("home"); });
},[]);
const persist=async(newDb)=>{ setDb(newDb); await saveDb(newDb); };
const toast2=(msg,type="gold")=>{ setToast({msg,type}); setTimeout(()=>setToast(null),2400); };
const onToggle=async(tId,num)=>{
const was=db.tontines.find(t=>t.id===tId)?.checks?.[num];
const newDb={...db,tontines:db.tontines.map(t=>t.id!==tId?t:{...t,checks:{...t.checks,[num]:!t.checks[num]}})};
const upd=newDb.tontines.find(t=>t.id===tId);
setActive(upd); if(detail?.id===tId) setDetail(upd);
await persist(newDb);
toast2(was?"↩ Décoché":"✓ Coché !",was?"gold":"green");
};
const startCreate=()=>{ setForm({name:"",amount:20000,frequency:5,startDate:todayStr(),myTurn:1,memberCount:5}); setView("create"); };
const onCreate=async()=>{
setSaving(true);
const newT={id:uid(),name:form.name.trim()||"Ma Tontine",amount:Number(form.amount),frequency:Number(form.frequency),startDate:form.startDate,myTurn:Number(form.myTurn),memberCount:Number(form.memberCount),checks:{},status:"active",createdAt:new Date().toISOString(),archivedAt:null};
const list=db.tontines.map(t=>t.status==="active"?{...t,status:"archived",archivedAt:new Date().toISOString()}:t);
list.push(newT);
const newDb={...db,tontines:list};
await persist(newDb); setActive(newT); setSaving(false);
toast2("🎉 Tontine créée !"); setView("tracker");
};
const archiveCurrent=async()=>{
if(!active) return;
const newDb={...db,tontines:db.tontines.map(t=>t.id===active.id?{...t,status:"archived",archivedAt:new Date().toISOString()}:t)};
await persist(newDb); setActive(null); toast2("📦 Archivée");
};
const deleteTontine=async(id)=>{
const newDb={...db,tontines:db.tontines.filter(t=>t.id!==id)};
await persist(newDb); setDetail(null); toast2("🗑️ Supprimée"); setView("history");
};
const archived=db.tontines.filter(t=>t.status==="archived").sort((a,b)=>new Date(b.archivedAt||b.createdAt)-new Date(a.archivedAt||a.createdAt));
if(view==="load") return
🪙
;
return(
{toast&&
{toast.msg}
}
{view==="home" &&
}
{view==="create" && setView("home")} saving={saving}/>}
{view==="tracker" && }
{view==="history" && }
{view==="detail" && }
);
}