recherche
This commit is contained in:
Bastien COIGNOUX
329
app/components/recherche/GrillePrixTab.tsx
Normal file
329
app/components/recherche/GrillePrixTab.tsx
Normal file
@ -0,0 +1,329 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Modal,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import { UI } from '@/constants/uiTheme';
|
||||
import { useGrillePrix } from '@/hooks/useGrillePrix';
|
||||
import type { GrillePrixEtat, GrillePrixRecord, GrillePrixTypeBien } from '@/types/collections';
|
||||
import { formatPocketBaseError } from '@/utils/pocketbaseErrors';
|
||||
|
||||
const TYPES: GrillePrixTypeBien[] = ['appartement', 'maison', 'immeuble'];
|
||||
const ETATS: GrillePrixEtat[] = ['bon_etat', 'a_renover', 'travaux_lourds'];
|
||||
|
||||
const TYPE_LABEL: Record<GrillePrixTypeBien, string> = {
|
||||
appartement: 'Appartement',
|
||||
maison: 'Maison',
|
||||
immeuble: 'Immeuble',
|
||||
};
|
||||
|
||||
const ETAT_LABEL: Record<GrillePrixEtat, string> = {
|
||||
bon_etat: 'Bon état',
|
||||
a_renover: 'À rénover',
|
||||
travaux_lourds: 'Travaux lourds',
|
||||
};
|
||||
|
||||
type EditorState =
|
||||
| { mode: 'create' }
|
||||
| { mode: 'edit'; row: GrillePrixRecord };
|
||||
|
||||
function parseNum(raw: string): number | null {
|
||||
const n = Number(String(raw).replace(',', '.').trim());
|
||||
return Number.isFinite(n) && n >= 0 ? n : null;
|
||||
}
|
||||
|
||||
export function GrillePrixTab() {
|
||||
const { rows, isLoading, error, createRow, updateRow, deleteRow, isMutating } = useGrillePrix();
|
||||
const [editor, setEditor] = useState<EditorState | null>(null);
|
||||
const [typeBien, setTypeBien] = useState<GrillePrixTypeBien>('appartement');
|
||||
const [etat, setEtat] = useState<GrillePrixEtat>('bon_etat');
|
||||
const [pa, setPa] = useState('');
|
||||
const [pr, setPr] = useState('');
|
||||
const [ville, setVille] = useState('');
|
||||
|
||||
const moyenneLabel = useMemo(() => {
|
||||
const vals = rows
|
||||
.map((r) => r.marge_estimee_pct)
|
||||
.filter((x): x is number => typeof x === 'number' && !Number.isNaN(x));
|
||||
if (vals.length === 0) return '—';
|
||||
const m = vals.reduce((a, b) => a + b, 0) / vals.length;
|
||||
return `${m.toFixed(1)} %`;
|
||||
}, [rows]);
|
||||
|
||||
const openCreate = () => {
|
||||
setTypeBien('appartement');
|
||||
setEtat('bon_etat');
|
||||
setPa('');
|
||||
setPr('');
|
||||
setVille('');
|
||||
setEditor({ mode: 'create' });
|
||||
};
|
||||
|
||||
const openEdit = (row: GrillePrixRecord) => {
|
||||
setTypeBien(row.type_bien);
|
||||
setEtat(row.etat);
|
||||
setPa(String(row.prix_achat_m2));
|
||||
setPr(String(row.prix_revente_m2));
|
||||
setVille(row.ville ?? '');
|
||||
setEditor({ mode: 'edit', row });
|
||||
};
|
||||
|
||||
const closeEditor = () => setEditor(null);
|
||||
|
||||
const submitEditor = async () => {
|
||||
const achat = parseNum(pa);
|
||||
const revente = parseNum(pr);
|
||||
if (achat == null || revente == null) {
|
||||
Alert.alert('Saisie', 'Indique des prix au m² valides (≥ 0).');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const payload = {
|
||||
type_bien: typeBien,
|
||||
etat,
|
||||
prix_achat_m2: achat,
|
||||
prix_revente_m2: revente,
|
||||
ville: ville.trim() || undefined,
|
||||
};
|
||||
if (editor?.mode === 'create') {
|
||||
await createRow(payload);
|
||||
} else if (editor?.mode === 'edit') {
|
||||
await updateRow({ id: editor.row.id, input: payload });
|
||||
}
|
||||
closeEditor();
|
||||
} catch (e) {
|
||||
Alert.alert('Erreur', formatPocketBaseError(e));
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = (row: GrillePrixRecord) => {
|
||||
Alert.alert('Supprimer cette ligne ?', `${TYPE_LABEL[row.type_bien]} · ${ETAT_LABEL[row.etat]}`, [
|
||||
{ text: 'Annuler', style: 'cancel' },
|
||||
{
|
||||
text: 'Supprimer',
|
||||
style: 'destructive',
|
||||
onPress: () =>
|
||||
void deleteRow(row.id).catch((e) => Alert.alert('Erreur', formatPocketBaseError(e))),
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center py-16">
|
||||
<ActivityIndicator size="large" color={UI.primary} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="flex-1">
|
||||
{error ? (
|
||||
<Text className="px-3 py-2 text-base text-red-700">{formatPocketBaseError(error)}</Text>
|
||||
) : null}
|
||||
<ScrollView horizontal className="flex-1" contentContainerStyle={{ paddingBottom: 120 }}>
|
||||
<View>
|
||||
<View className="min-w-[720px] flex-row border-b-2 bg-white px-2 py-3" style={{ borderColor: UI.border }}>
|
||||
<Text className="w-28 text-xs font-bold uppercase" style={{ color: UI.textMuted }}>
|
||||
Type
|
||||
</Text>
|
||||
<Text className="w-32 text-xs font-bold uppercase" style={{ color: UI.textMuted }}>
|
||||
État
|
||||
</Text>
|
||||
<Text className="w-28 text-xs font-bold uppercase" style={{ color: UI.textMuted }}>
|
||||
Achat €/m²
|
||||
</Text>
|
||||
<Text className="w-28 text-xs font-bold uppercase" style={{ color: UI.textMuted }}>
|
||||
Revente €/m²
|
||||
</Text>
|
||||
<Text className="w-24 text-xs font-bold uppercase" style={{ color: UI.textMuted }}>
|
||||
Marge %
|
||||
</Text>
|
||||
<Text className="w-28 text-xs font-bold uppercase" style={{ color: UI.textMuted }}>
|
||||
Ville
|
||||
</Text>
|
||||
<Text className="w-20" />
|
||||
</View>
|
||||
{rows.length === 0 ? (
|
||||
<Text className="p-6 text-base" style={{ color: UI.textMuted }}>
|
||||
Aucune ligne. Appuie sur + pour créer ton référentiel.
|
||||
</Text>
|
||||
) : (
|
||||
rows.map((r) => (
|
||||
<View
|
||||
key={r.id}
|
||||
className="min-w-[720px] flex-row border-b px-2 py-4"
|
||||
style={{ borderColor: UI.border }}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => openEdit(r)}
|
||||
className="min-w-0 flex-1 flex-row active:bg-slate-100"
|
||||
>
|
||||
<Text className="w-28 text-base font-semibold" style={{ color: UI.text }}>
|
||||
{TYPE_LABEL[r.type_bien]}
|
||||
</Text>
|
||||
<Text className="w-32 text-base" style={{ color: UI.text }}>
|
||||
{ETAT_LABEL[r.etat]}
|
||||
</Text>
|
||||
<Text className="w-28 text-base" style={{ color: UI.text }}>
|
||||
{r.prix_achat_m2}
|
||||
</Text>
|
||||
<Text className="w-28 text-base" style={{ color: UI.text }}>
|
||||
{r.prix_revente_m2}
|
||||
</Text>
|
||||
<Text className="w-24 text-base font-bold" style={{ color: UI.success }}>
|
||||
{r.marge_estimee_pct != null ? `${r.marge_estimee_pct.toFixed(1)} %` : '—'}
|
||||
</Text>
|
||||
<Text className="w-28 text-base" style={{ color: UI.textMuted }} numberOfLines={1}>
|
||||
{r.ville ?? '—'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => confirmDelete(r)} className="w-20 items-center justify-center">
|
||||
<Text className="font-bold" style={{ color: UI.danger }}>
|
||||
✕
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View
|
||||
className="border-t-2 px-4 py-4"
|
||||
style={{ borderColor: UI.border, backgroundColor: UI.card }}
|
||||
>
|
||||
<Text className="text-lg font-bold" style={{ color: UI.text }}>
|
||||
Marge moyenne du référentiel
|
||||
</Text>
|
||||
<Text className="mt-1 text-3xl font-bold" style={{ color: UI.primary }}>
|
||||
{moyenneLabel}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
accessibilityLabel="Ajouter une ligne"
|
||||
onPress={openCreate}
|
||||
className="absolute bottom-24 right-5 h-16 w-16 items-center justify-center rounded-2xl"
|
||||
style={{ backgroundColor: UI.primary, elevation: 8 }}
|
||||
>
|
||||
<Text className="text-3xl font-light text-white">+</Text>
|
||||
</Pressable>
|
||||
|
||||
<Modal visible={editor != null} animationType="slide" transparent>
|
||||
<View className="flex-1 justify-end bg-black/50">
|
||||
<View className="rounded-t-3xl bg-white p-5">
|
||||
<Text className="text-2xl font-bold" style={{ color: UI.text }}>
|
||||
{editor?.mode === 'edit' ? 'Modifier la ligne' : 'Nouvelle ligne'}
|
||||
</Text>
|
||||
<Text className="mt-4 text-base font-semibold" style={{ color: UI.textMuted }}>
|
||||
Type de bien
|
||||
</Text>
|
||||
<View className="mt-2 flex-row flex-wrap gap-2">
|
||||
{TYPES.map((t) => (
|
||||
<Pressable
|
||||
key={t}
|
||||
onPress={() => setTypeBien(t)}
|
||||
className="min-h-[48px] rounded-xl border-2 px-4 py-2"
|
||||
style={{
|
||||
borderColor: typeBien === t ? UI.primary : UI.border,
|
||||
backgroundColor: typeBien === t ? '#EFF6FF' : UI.card,
|
||||
}}
|
||||
>
|
||||
<Text className="text-base font-bold" style={{ color: UI.text }}>
|
||||
{TYPE_LABEL[t]}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
<Text className="mt-4 text-base font-semibold" style={{ color: UI.textMuted }}>
|
||||
État
|
||||
</Text>
|
||||
<View className="mt-2 flex-row flex-wrap gap-2">
|
||||
{ETATS.map((t) => (
|
||||
<Pressable
|
||||
key={t}
|
||||
onPress={() => setEtat(t)}
|
||||
className="min-h-[48px] rounded-xl border-2 px-4 py-2"
|
||||
style={{
|
||||
borderColor: etat === t ? UI.primary : UI.border,
|
||||
backgroundColor: etat === t ? '#EFF6FF' : UI.card,
|
||||
}}
|
||||
>
|
||||
<Text className="text-base font-bold" style={{ color: UI.text }}>
|
||||
{ETAT_LABEL[t]}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
<Text className="mt-4 text-base font-semibold" style={{ color: UI.textMuted }}>
|
||||
Prix achat (€/m²)
|
||||
</Text>
|
||||
<TextInput
|
||||
className="mt-1 rounded-xl border-2 px-4 py-3 text-lg"
|
||||
style={{ borderColor: UI.border, color: UI.text }}
|
||||
keyboardType="decimal-pad"
|
||||
value={pa}
|
||||
onChangeText={setPa}
|
||||
placeholder="4500"
|
||||
placeholderTextColor={UI.textMuted}
|
||||
/>
|
||||
<Text className="mt-4 text-base font-semibold" style={{ color: UI.textMuted }}>
|
||||
Prix revente (€/m²)
|
||||
</Text>
|
||||
<TextInput
|
||||
className="mt-1 rounded-xl border-2 px-4 py-3 text-lg"
|
||||
style={{ borderColor: UI.border, color: UI.text }}
|
||||
keyboardType="decimal-pad"
|
||||
value={pr}
|
||||
onChangeText={setPr}
|
||||
placeholder="5200"
|
||||
placeholderTextColor={UI.textMuted}
|
||||
/>
|
||||
<Text className="mt-4 text-base font-semibold" style={{ color: UI.textMuted }}>
|
||||
Ville (optionnel)
|
||||
</Text>
|
||||
<TextInput
|
||||
className="mt-1 rounded-xl border-2 px-4 py-3 text-lg"
|
||||
style={{ borderColor: UI.border, color: UI.text }}
|
||||
value={ville}
|
||||
onChangeText={setVille}
|
||||
placeholder="Lyon"
|
||||
placeholderTextColor={UI.textMuted}
|
||||
/>
|
||||
<View className="mt-6 flex-row gap-3">
|
||||
<Pressable
|
||||
onPress={closeEditor}
|
||||
className="min-h-[52px] flex-1 items-center justify-center rounded-2xl border-2"
|
||||
style={{ borderColor: UI.border }}
|
||||
>
|
||||
<Text className="text-lg font-bold" style={{ color: UI.text }}>
|
||||
Annuler
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={() => void submitEditor()}
|
||||
disabled={isMutating}
|
||||
className="min-h-[52px] flex-1 items-center justify-center rounded-2xl"
|
||||
style={{ backgroundColor: UI.primary }}
|
||||
>
|
||||
{isMutating ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text className="text-lg font-bold text-white">Enregistrer</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user