feat: frontend core — auth, layout, transactions, categories
This commit is contained in:
Nox (OpenClaw)
@@ -0,0 +1,256 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { useCreateCategory, useUpdateCategory } from "../hooks/useCategories";
|
||||
import { useToast } from "../context/ToastContext";
|
||||
import type { Category, CategoryType } from "../api/types";
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
category?: Category;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
name: string;
|
||||
type: CategoryType;
|
||||
color: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const DEFAULT_FORM: FormState = {
|
||||
name: "",
|
||||
type: "expense",
|
||||
color: "#6366f1",
|
||||
icon: "",
|
||||
};
|
||||
|
||||
export default function CategoryModal({ isOpen, onClose, category }: Props) {
|
||||
const createMutation = useCreateCategory();
|
||||
const updateMutation = useUpdateCategory();
|
||||
const { addToast } = useToast();
|
||||
|
||||
const [form, setForm] = useState<FormState>(DEFAULT_FORM);
|
||||
const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});
|
||||
|
||||
const isEditing = !!category;
|
||||
const isDefault = category?.is_default ?? false;
|
||||
const isPending = createMutation.isPending || updateMutation.isPending;
|
||||
|
||||
useEffect(() => {
|
||||
if (category) {
|
||||
setForm({
|
||||
name: category.name,
|
||||
type: category.type,
|
||||
color: category.color ?? "#6366f1",
|
||||
icon: category.icon ?? "",
|
||||
});
|
||||
} else {
|
||||
setForm(DEFAULT_FORM);
|
||||
}
|
||||
setErrors({});
|
||||
}, [category, isOpen]);
|
||||
|
||||
function set<K extends keyof FormState>(key: K, value: FormState[K]) {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined }));
|
||||
}
|
||||
|
||||
function validate(): boolean {
|
||||
const errs: Partial<Record<keyof FormState, string>> = {};
|
||||
if (!form.name.trim()) errs.name = "Nom requis";
|
||||
setErrors(errs);
|
||||
return Object.keys(errs).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
|
||||
if (isEditing && category) {
|
||||
updateMutation.mutate(
|
||||
{
|
||||
id: category.id,
|
||||
payload: {
|
||||
name: form.name.trim(),
|
||||
color: form.color,
|
||||
icon: form.icon || undefined,
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
addToast({ type: "success", message: "Catégorie modifiée" });
|
||||
onClose();
|
||||
},
|
||||
onError: () =>
|
||||
addToast({ type: "error", message: "Erreur lors de la modification" }),
|
||||
},
|
||||
);
|
||||
} else {
|
||||
createMutation.mutate(
|
||||
{
|
||||
name: form.name.trim(),
|
||||
type: form.type,
|
||||
color: form.color,
|
||||
icon: form.icon || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
addToast({ type: "success", message: "Catégorie créée" });
|
||||
onClose();
|
||||
},
|
||||
onError: () =>
|
||||
addToast({ type: "error", message: "Erreur lors de la création" }),
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const CATEGORY_TYPES: { value: CategoryType; label: string }[] = [
|
||||
{ value: "expense", label: "Dépense" },
|
||||
{ value: "income", label: "Revenu" },
|
||||
{ value: "both", label: "Les deux" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md rounded-xl bg-white shadow-xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b px-5 py-4">
|
||||
<h2 className="text-base font-semibold text-slate-800">
|
||||
{isEditing ? "Modifier la catégorie" : "Nouvelle catégorie"}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-400 hover:text-slate-700"
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 p-5">
|
||||
{isDefault && (
|
||||
<p className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
|
||||
Les catégories par défaut ne peuvent pas être modifiées en type.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cat-name"
|
||||
className="mb-1.5 block text-sm font-medium text-slate-700"
|
||||
>
|
||||
Nom
|
||||
</label>
|
||||
<input
|
||||
id="cat-name"
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => set("name", e.target.value)}
|
||||
placeholder="Ex. : Alimentation"
|
||||
className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
|
||||
errors.name ? "border-red-400" : "border-slate-200"
|
||||
}`}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="mt-1 text-xs text-red-500">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cat-type"
|
||||
className="mb-1.5 block text-sm font-medium text-slate-700"
|
||||
>
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
id="cat-type"
|
||||
value={form.type}
|
||||
onChange={(e) => set("type", e.target.value as CategoryType)}
|
||||
disabled={isDefault || isEditing}
|
||||
className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 disabled:bg-slate-50 disabled:text-slate-400"
|
||||
>
|
||||
{CATEGORY_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cat-color"
|
||||
className="mb-1.5 block text-sm font-medium text-slate-700"
|
||||
>
|
||||
Couleur
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
id="cat-color"
|
||||
type="color"
|
||||
value={form.color}
|
||||
onChange={(e) => set("color", e.target.value)}
|
||||
className="h-9 w-14 cursor-pointer rounded border border-slate-200 p-0.5"
|
||||
/>
|
||||
<span className="text-sm text-slate-500">{form.color}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="cat-icon"
|
||||
className="mb-1.5 block text-sm font-medium text-slate-700"
|
||||
>
|
||||
Icône{" "}
|
||||
<span className="font-normal text-slate-400">(optionnel)</span>
|
||||
</label>
|
||||
<input
|
||||
id="cat-icon"
|
||||
type="text"
|
||||
value={form.icon}
|
||||
onChange={(e) => set("icon", e.target.value)}
|
||||
placeholder="Ex. : shopping-cart"
|
||||
className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{isPending
|
||||
? "Enregistrement…"
|
||||
: isEditing
|
||||
? "Modifier"
|
||||
: "Créer"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user