FlatList et formulaires : afficher et saisir des données

import { useFocusEffect } from 'expo-router';
import { useCallback, useState } from 'react';
import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, Text, View } from 'react-native';

import { CarteFiche } from '@/components/CarteFiche';
import type { ResumeFiche } from '@/lib/api';
import { api } from '@/lib/client';

export default function MesFiches() {
  const [fiches, setFiches] = useState<ResumeFiche[] | null>(null);
  const [erreur, setErreur] = useState<string | null>(null);
  const [actualisation, setActualisation] = useState(false);

  const charger = useCallback(async () => {
    try {
      const { donnees } = await api.listerFiches();
      setFiches(donnees);
      setErreur(null);
    } catch (e) {
      setErreur((e as Error).message);
    }
  }, []);

  // Recharge à chaque retour sur l'onglet (après l'ajout d'un frais, par exemple).
  useFocusEffect(
    useCallback(() => {
      charger();
    }, [charger]),
  );

  async function actualiser() {
    setActualisation(true);
    await charger();
    setActualisation(false);
  }

  if (fiches === null && erreur === null) {
    return <ActivityIndicator style={styles.centre} size="large" />;
  }

  return (
    <FlatList
      data={fiches ?? []}
      keyExtractor={(fiche) => String(fiche.id)}
      renderItem={({ item }) => <CarteFiche fiche={item} />}
      ItemSeparatorComponent={() => <View style={styles.separateur} />}
      ListHeaderComponent={erreur ? <Text style={styles.erreur}>{erreur}</Text> : undefined}
      ListEmptyComponent={erreur ? undefined : <Text style={styles.vide}>Aucune fiche pour l'instant.</Text>}
      refreshControl={<RefreshControl refreshing={actualisation} onRefresh={actualiser} />}
      contentContainerStyle={styles.contenu}
    />
  );
}

const styles = StyleSheet.create({
  centre: { flex: 1 },
  contenu: { padding: 16 },
  separateur: { height: 8 },
  erreur: { color: '#b91c1c', marginBottom: 12 },
  vide: { textAlign: 'center', color: '#6b7280', marginTop: 32 },
});

import { Link } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import type { ResumeFiche } from '@/lib/api';
import { formatEuros, formatMois, LIBELLES_ETAT } from '@/lib/format';

type Props = { fiche: ResumeFiche };

export function CarteFiche({ fiche }: Props) {
  const etat = LIBELLES_ETAT[fiche.etat];
  return (
    <Link href={{ pathname: '/fiche/[id]', params: { id: fiche.id } }} asChild>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={`Fiche ${formatMois(fiche.mois)}, ${etat}`}
        style={({ pressed }) => [styles.carte, pressed && styles.appuyee]}>
        <View style={styles.ligne}>
          <Text style={styles.mois}>{formatMois(fiche.mois)}</Text>
          <Text style={[styles.badge, styles[fiche.etat]]}>{etat}</Text>
        </View>
        {fiche.montantValide !== null && (
          <Text style={styles.montant}>Montant validé : {formatEuros(fiche.montantValide)}</Text>
        )}
      </Pressable>
    </Link>
  );
}

const styles = StyleSheet.create({
  carte: { backgroundColor: '#ffffff', borderRadius: 12, padding: 16, gap: 8, elevation: 1 },
  appuyee: { opacity: 0.7 },
  ligne: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  mois: { fontSize: 17, fontWeight: '600', textTransform: 'capitalize' },
  badge: { fontSize: 12, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, overflow: 'hidden' },
  CR: { backgroundColor: '#dbeafe', color: '#1e3a8a' },
  CL: { backgroundColor: '#fef3c7', color: '#78350f' },
  VA: { backgroundColor: '#dcfce7', color: '#14532d' },
  MP: { backgroundColor: '#e5e7eb', color: '#111827' },
  montant: { fontSize: 15, color: '#374151' },
});

import type { Etat } from './api';

export const LIBELLES_ETAT: Record<Etat, string> = {
  CR: 'En cours de saisie',
  CL: 'Clôturée',
  VA: 'Validée',
  MP: 'Mise en paiement',
};

const MOIS = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];

// "2026-10" → "octobre 2026"
export function formatMois(mois: string): string {
  const [annee, numero] = mois.split('-');
  return `${MOIS[Number(numero) - 1]} ${annee}`;
}

// 23.5 → "23,50 €"
export function formatEuros(montant: number): string {
  return `${montant.toFixed(2).replace('.', ',')} €`;
}

// La date du jour sur le téléphone, au format AAAA-MM-JJ (pas toISOString, qui donne la date UTC).
export function aujourdhui(maintenant: Date = new Date()): string {
  const mm = String(maintenant.getMonth() + 1).padStart(2, '0');
  const jj = String(maintenant.getDate()).padStart(2, '0');
  return `${maintenant.getFullYear()}-${mm}-${jj}`;
}

export function ListePaginee() {
  const [fiches, setFiches] = useState<ResumeFiche[]>([]);
  const [page, setPage] = useState(1);
  const [pages, setPages] = useState(1);
  const [chargement, setChargement] = useState(false);

  const chargerPage = useCallback(async (numero: number) => {
    setChargement(true);
    try {
      const reponse = await api.listerFiches(numero);
      setFiches((avant) => (numero === 1 ? reponse.donnees : [...avant, ...reponse.donnees]));
      setPage(numero);
      setPages(reponse.pagination.pages);
    } finally {
      setChargement(false);
    }
  }, []);

  useEffect(() => {
    chargerPage(1);
  }, [chargerPage]);

  return (
    <FlatList
      data={fiches}
      keyExtractor={(f) => String(f.id)}
      renderItem={({ item }) => <CarteFiche fiche={item} />}
      onEndReached={() => {
        if (!chargement && page < pages) chargerPage(page + 1);
      }}
      onEndReachedThreshold={0.5}
      ListFooterComponent={chargement ? <ActivityIndicator /> : undefined}
    />
  );
}

export function FichesParAnnee({ fiches }: { fiches: ResumeFiche[] }) {
  const annees = [...new Set(fiches.map((f) => f.mois.slice(0, 4)))];
  const sections = annees.map((annee) => ({ title: annee, data: fiches.filter((f) => f.mois.startsWith(annee)) }));
  return (
    <SectionList
      sections={sections}
      keyExtractor={(f) => String(f.id)}
      renderItem={({ item }) => <Text>{formatMois(item.mois)}</Text>}
      renderSectionHeader={({ section }) => <Text style={styles.titre}>{section.title}</Text>}
    />
  );
}

const [libelle, setLibelle] = useState('');

<TextInput value={libelle} onChangeText={setLibelle} placeholder="Repas client" />

<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
  <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }} keyboardShouldPersistTaps="handled">
    {/* … les champs et le bouton … */}
  </ScrollView>
</KeyboardAvoidingView>

export type SaisieFrais = { date: string; libelle: string; montant: string };
export type Frais = { date: string; libelle: string; montant: number };
export type Erreurs = Partial<Record<keyof SaisieFrais, string>>;

export function lireMontant(texte: string): number | null {
  const normalise = texte.trim().replace(',', '.');
  if (!/^\d+(\.\d{1,2})?$/.test(normalise)) return null;
  return Number(normalise);
}

export function estDateValide(texte: string): boolean {
  if (!/^\d{4}-\d{2}-\d{2}$/.test(texte)) return false;
  const [annee, mois, jour] = texte.split('-').map(Number);
  const d = new Date(Date.UTC(annee, mois - 1, jour));
  return d.getUTCFullYear() === annee && d.getUTCMonth() === mois - 1 && d.getUTCDate() === jour;
}

export function validerFrais(saisie: SaisieFrais, aujourdhui: string): { frais?: Frais; erreurs: Erreurs } {
  const erreurs: Erreurs = {};

  const libelle = saisie.libelle.trim();
  if (libelle.length < 3) erreurs.libelle = 'Au moins 3 caractères.';
  else if (libelle.length > 100) erreurs.libelle = '100 caractères au maximum.';

  const montant = lireMontant(saisie.montant);
  if (montant === null) erreurs.montant = 'Un montant en euros, par exemple 23,50.';
  else if (montant <= 0 || montant > 5000) erreurs.montant = 'Entre 0,01 € et 5 000 €.';

  if (!estDateValide(saisie.date)) {
    erreurs.date = 'Date au format AAAA-MM-JJ.';
  } else if (saisie.date > aujourdhui) {
    erreurs.date = 'La date ne peut pas être dans le futur.';
  }

  if (Object.keys(erreurs).length > 0) return { erreurs };
  return { frais: { date: saisie.date, libelle, montant: montant as number }, erreurs };
}

export function NouveauFraisSansApi() {
  const [saisie, setSaisie] = useState<SaisieFrais>({ date: aujourdhui(), libelle: '', montant: '' });
  const [erreurs, setErreurs] = useState<Erreurs>({});

  const modifier = (champ: keyof SaisieFrais) => (texte: string) => setSaisie((s) => ({ ...s, [champ]: texte }));

  function enregistrer() {
    const { frais, erreurs: trouvees } = validerFrais(saisie, aujourdhui());
    setErreurs(trouvees);
    if (frais) Alert.alert('Frais valide', `${frais.libelle} : ${frais.montant} €`);
  }

  return (
    <View style={{ padding: 16 }}>
      <Champ libelle="Date (AAAA-MM-JJ)" value={saisie.date} onChangeText={modifier('date')} erreur={erreurs.date} />
      <Champ libelle="Libellé" value={saisie.libelle} onChangeText={modifier('libelle')} erreur={erreurs.libelle} />
      <Champ
        libelle="Montant (€)"
        value={saisie.montant}
        onChangeText={modifier('montant')}
        erreur={erreurs.montant}
        keyboardType="decimal-pad"
      />
      <Bouton titre="Enregistrer" onPress={enregistrer} />
    </View>
  );
}