"use client"; import { FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; export default function EditServicePage() { const params = useParams(); const router = useRouter(); const id = params.id as string; const [title, setTitle] = useState(""); const [slug, setSlug] = useState(""); const [description, setDescription] = useState(""); const [icon, setIcon] = useState(""); const [image, setImage] = useState(""); const [featured, setFeatured] = useState(false); const [active, setActive] = useState(true); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); const generateSlug = (value: string) => { return value .toLowerCase() .trim() .replace(/[^a-z0-9\s-]/g, "") .replace(/\s+/g, "-") .replace(/-+/g, "-"); }; const getService = async () => { try { setLoading(true); const response = await fetch( `/api/services/${id}`, { cache: "no-store", } ); const result = await response.json(); if (result.success) { const service = result.data; setTitle(service.title || ""); setSlug(service.slug || ""); setDescription(service.description || ""); setIcon(service.icon || ""); setImage(service.image || ""); setFeatured(Boolean(service.featured)); setActive( service.active !== undefined ? Boolean(service.active) : true ); } else { alert( result.message || "Gagal mengambil data Service." ); router.push("/secure-panel/services"); } } catch (error) { console.error( "GET SERVICE:", error ); alert( "Terjadi kesalahan saat mengambil data Service." ); router.push("/secure-panel/services"); } finally { setLoading(false); } }; useEffect(() => { if (id) { getService(); } }, [id]); const handleTitleChange = ( value: string ) => { setTitle(value); setSlug(generateSlug(value)); }; const handleSubmit = async ( event: FormEvent ) => { event.preventDefault(); if (!title.trim()) { alert("Title wajib diisi."); return; } if (!slug.trim()) { alert("Slug wajib diisi."); return; } setSaving(true); try { const response = await fetch( `/api/services/${id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title, slug, description: description || null, icon: icon || null, image: image || null, featured, active, }), } ); const result = await response.json(); if (result.success) { alert( "Service berhasil diperbarui." ); router.push( "/secure-panel/services" ); router.refresh(); } else { alert( result.message || "Gagal memperbarui Service." ); } } catch (error) { console.error( "UPDATE SERVICE:", error ); alert( "Terjadi kesalahan saat memperbarui Service." ); } finally { setSaving(false); } }; if (loading) { return ( <>
Memuat data Service

Sedang mengambil informasi dari database...

); } return ( <>
{/* ========================= MOBILE OVERLAY ========================= */}
setSidebarOpen(false) } /> {/* ========================= SIDEBAR ========================= */} {/* ========================= MAIN ========================= */}
{/* ========================= TOPBAR ========================= */}
ADMIN PANEL
Service Management
Website Logout
{/* ========================= CONTENT ========================= */}
{/* PAGE HEADING */}
Kembali ke Services
SERVICE MANAGEMENT

Edit Service

Perbarui informasi layanan yang ditampilkan pada website portfolio GloVaTech. Pastikan informasi yang diberikan sudah sesuai sebelum menyimpan perubahan.

{/* INFO */}
Mengedit Service #{id}

Perubahan yang disimpan akan memperbarui data Service pada database melalui API yang sudah tersedia. Struktur backend dan endpoint tidak diubah.

{/* FORM CARD */}
SERVICE INFORMATION

Informasi Service

Kelola nama, URL slug, deskripsi, icon, gambar, serta status service.

{id}
{/* TITLE */}
handleTitleChange( event.target.value ) } placeholder="Contoh: Web Development" />
Nama layanan yang akan ditampilkan kepada pengunjung.
{/* SLUG */}
setSlug( generateSlug( event.target.value ) ) } placeholder="web-development" />
Slug dibuat otomatis dari Title dan digunakan sebagai identitas URL.
{/* DESCRIPTION */}