"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; type AboutStat = { id: number; label: string; value: string; icon: string | null; active: boolean; sortOrder: number; }; export default function EditAboutStatPage() { const params = useParams(); const router = useRouter(); const id = params.id; const [form, setForm] = useState({ label: "", value: "", icon: "", active: true, sortOrder: 1, }); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); // ========================================= // GET STAT // BACKEND TIDAK DIUBAH // ========================================= useEffect(() => { const getStat = async () => { try { const response = await fetch(`/api/about/stats?id=${id}`); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Gagal mengambil data statistik"); router.push("/secure-panel/about/stats"); return; } const stat: AboutStat = result.data; setForm({ label: stat.label, value: stat.value, icon: stat.icon || "", active: stat.active, sortOrder: stat.sortOrder, }); } catch (error) { console.error("GET ABOUT STAT ERROR:", error); alert("Terjadi kesalahan saat mengambil data"); router.push("/secure-panel/about/stats"); } finally { setLoading(false); } }; getStat(); }, [id, router]); // ========================================= // HANDLE CHANGE // ========================================= const handleChange = ( e: React.ChangeEvent ) => { const { name, value, type } = e.target; setForm((prev) => ({ ...prev, [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : name === "sortOrder" ? Number(value) : value, })); }; // ========================================= // SUBMIT // BACKEND TIDAK DIUBAH // ========================================= const handleSubmit = async ( e: React.FormEvent ) => { e.preventDefault(); setSaving(true); try { const response = await fetch("/api/about/stats", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: Number(id), ...form, }), }); const result = await response.json(); if (!response.ok || !result.success) { alert( result.message || "Gagal memperbarui statistik" ); return; } alert("Statistik berhasil diperbarui"); router.push("/secure-panel/about/stats"); router.refresh(); } catch (error) { console.error("UPDATE ABOUT STAT ERROR:", error); alert("Terjadi kesalahan saat memperbarui statistik"); } finally { setSaving(false); } }; // ========================================= // CLOSE SIDEBAR // ========================================= const closeSidebar = () => { setSidebarOpen(false); }; // ========================================= // LOADING // ========================================= if (loading) { return ( <>

Loading Statistics

Memuat data statistik About Me...

); } return ( <>
{/* ====================================== MOBILE OVERLAY ====================================== */} {sidebarOpen && (
); }