119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { toast } from "sonner";
|
|
import { adminGetSettings, adminUpdateSetting } from "@/lib/api/settings";
|
|
import { useLanguage } from "@/contexts/LanguageContext";
|
|
import { ApiError } from "@/lib/api";
|
|
import { Save } from "lucide-react";
|
|
|
|
const SETTING_KEYS = ["default_booking_price"] as const;
|
|
type SettingKey = typeof SETTING_KEYS[number];
|
|
|
|
interface SettingMeta { label: string; description: string; type: "number" | "text" }
|
|
|
|
export default function AdminParametres() {
|
|
const { t, locale } = useLanguage();
|
|
const [values, setValues] = useState<Record<string, string>>({ default_booking_price: "0" });
|
|
const [updatedAt, setUpdatedAt] = useState<Record<string, string>>({});
|
|
const [saving, setSaving] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const SETTING_META: Record<SettingKey, SettingMeta> = {
|
|
default_booking_price: {
|
|
label: t("admin.settings.booking_price_label"),
|
|
description: t("admin.settings.booking_price_desc"),
|
|
type: "number",
|
|
},
|
|
};
|
|
|
|
useEffect(() => {
|
|
adminGetSettings()
|
|
.then((rows) => {
|
|
const vals: Record<string, string> = { default_booking_price: "0" };
|
|
const dates: Record<string, string> = {};
|
|
rows.forEach((r) => {
|
|
vals[r.key] = r.value !== null && r.value !== undefined ? String(r.value) : "";
|
|
if (r.updated_at) dates[r.key] = r.updated_at;
|
|
});
|
|
setValues(vals);
|
|
setUpdatedAt(dates);
|
|
})
|
|
.catch((e) => toast.error(e instanceof ApiError ? e.message : t("admin.error")))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const handleSave = async (key: string) => {
|
|
setSaving(key);
|
|
try {
|
|
const meta = SETTING_META[key as SettingKey];
|
|
const raw = values[key] ?? "";
|
|
const value = meta?.type === "number" ? parseFloat(raw) || 0 : raw;
|
|
const saved = await adminUpdateSetting(key, value);
|
|
if (saved.updated_at) setUpdatedAt((prev) => ({ ...prev, [key]: saved.updated_at }));
|
|
toast.success(t("admin.settings.saved"));
|
|
} catch (err) {
|
|
toast.error(err instanceof ApiError ? err.message : t("admin.error"));
|
|
} finally {
|
|
setSaving(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 max-w-2xl">
|
|
<div>
|
|
<h2 className="font-serif text-2xl font-semibold">{t("admin.settings.title")}</h2>
|
|
<p className="text-sm text-muted-foreground mt-1">{t("admin.settings.subtitle")}</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 2 }).map((_, i) => (
|
|
<div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">{t("admin.settings.bookings")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{SETTING_KEYS.map((key) => {
|
|
const meta = SETTING_META[key];
|
|
return (
|
|
<div key={key}>
|
|
<Label htmlFor={key}>{meta.label}</Label>
|
|
<p className="text-xs text-muted-foreground mb-2">{meta.description}</p>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id={key}
|
|
type={meta.type}
|
|
min={meta.type === "number" ? 0 : undefined}
|
|
value={values[key] ?? ""}
|
|
onChange={(e) => setValues((prev) => ({ ...prev, [key]: e.target.value }))}
|
|
className="max-w-[200px]"
|
|
/>
|
|
<Button size="sm" onClick={() => handleSave(key)} disabled={saving === key}>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{saving === key ? t("admin.saving") : t("admin.save")}
|
|
</Button>
|
|
</div>
|
|
{updatedAt[key] && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{t("admin.settings.last_updated")} {new Date(updatedAt[key]).toLocaleDateString(locale)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|