83 lines
2.9 KiB
React
83 lines
2.9 KiB
React
|
import React, { useState } from 'react';
|
||
|
|
import { api } from '../stores/api';
|
||
|
|
import PageHeader from '../components/PageHeader';
|
||
|
|
import SuccessCheck from '../components/SuccessCheck';
|
||
|
|
|
||
|
|
export default function Collecte() {
|
||
|
|
const [montant, setMontant] = useState('');
|
||
|
|
const [dateCollecte, setDateCollecte] = useState(new Date().toISOString().slice(0, 10));
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [success, setSuccess] = useState(false);
|
||
|
|
const [error, setError] = useState('');
|
||
|
|
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
if (!montant || parseFloat(montant) <= 0) {
|
||
|
|
setError('Entrez un montant valide');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setLoading(true);
|
||
|
|
setError('');
|
||
|
|
try {
|
||
|
|
await api.post('/collectes/', {
|
||
|
|
date_collecte: dateCollecte,
|
||
|
|
montant: parseFloat(montant),
|
||
|
|
});
|
||
|
|
setSuccess(true);
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message);
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (success) return <SuccessCheck message="Collecte enregistrée ✓" />;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-100">
|
||
|
|
<PageHeader titre="Collecte 7e Tradition" sousTitre="S1 — Saisir le panier" />
|
||
|
|
|
||
|
|
<div className="p-4 space-y-4">
|
||
|
|
{/* Date pré-remplie */}
|
||
|
|
<div className="bg-white rounded-2xl p-4 shadow-sm">
|
||
|
|
<label className="text-xs text-gray-400 block mb-1">Date</label>
|
||
|
|
<input
|
||
|
|
type="date"
|
||
|
|
value={dateCollecte}
|
||
|
|
onChange={(e) => setDateCollecte(e.target.value)}
|
||
|
|
className="w-full p-3 bg-gray-50 rounded-xl text-lg border-0 focus:ring-2 focus:ring-aa-blue"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Montant — gros clavier numérique */}
|
||
|
|
<div className="bg-white rounded-2xl p-4 shadow-sm">
|
||
|
|
<label className="text-xs text-gray-400 block mb-1">Montant collecté</label>
|
||
|
|
<div className="relative">
|
||
|
|
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-2xl text-gray-400">$</span>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
inputMode="decimal"
|
||
|
|
step="0.01"
|
||
|
|
min="0"
|
||
|
|
placeholder="0.00"
|
||
|
|
value={montant}
|
||
|
|
onChange={(e) => setMontant(e.target.value)}
|
||
|
|
className="w-full p-4 pl-10 bg-gray-50 rounded-xl text-3xl font-bold text-center border-0 focus:ring-2 focus:ring-green-500"
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{error && <p className="text-red-500 text-sm text-center bg-red-50 p-3 rounded-lg">{error}</p>}
|
||
|
|
|
||
|
|
{/* Bouton enregistrer */}
|
||
|
|
<button
|
||
|
|
onClick={handleSubmit}
|
||
|
|
disabled={loading || !montant}
|
||
|
|
className="w-full p-5 bg-green-600 text-white rounded-2xl text-xl font-bold disabled:opacity-40 active:scale-[0.97] transition shadow-lg"
|
||
|
|
>
|
||
|
|
{loading ? '...' : '💰 Enregistrer la collecte'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|