"use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; export default function CreateServicePage() { const router = useRouter(); 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(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 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; } setLoading(true); try { const response = await fetch("/api/services", { method: "POST", 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 ditambahkan."); router.push("/secure-panel/services"); router.refresh(); } else { alert( result.message || "Gagal menambahkan Service." ); } } catch (error) { console.error("CREATE SERVICE:", error); alert( "Terjadi kesalahan saat menyimpan Service." ); } finally { setLoading(false); } }; return ( <>
{/* MOBILE OVERLAY */}
setSidebarOpen(false)} /> {/* SIDEBAR */} {/* MAIN */}
{/* TOPBAR */}
ADMIN PANEL
Services Management
Website Logout
{/* CONTENT */}
{/* PAGE HEADING */}
Kembali ke Services
WEBSITE CONTENT

Tambah Service

Tambahkan layanan baru yang akan ditampilkan pada section Services di website portfolio GloVaTech. Lengkapi informasi layanan, icon, gambar, dan status publikasinya.

{/* FORM */}
SERVICE INFORMATION

Informasi Service

Masukkan informasi utama service yang ingin ditampilkan pada website. Field bertanda * wajib diisi.

{/* TITLE */}
handleTitleChange( event.target.value ) } placeholder="Contoh: Web Development" autoComplete="off" />
{/* SLUG */}
setSlug( generateSlug( event.target.value ) ) } placeholder="web-development" autoComplete="off" />
Slug dibuat otomatis dari Title dan digunakan sebagai identitas URL.
{/* DESCRIPTION */}