"use client"; import { Suspense, useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; type ContactInfo = { id: number; description: string | null; email: string | null; phone: string | null; location: string | null; website: string | null; github: string | null; linkedin: string | null; facebook: string | null; instagram: string | null; twitter: string | null; youtube: string | null; tiktok: string | null; active: boolean; }; function ContactInfoAdminPage() { const router = useRouter(); const searchParams = useSearchParams(); const editId = searchParams.get("id"); const [data, setData] = useState(null); const [description, setDescription] = useState(""); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); const [location, setLocation] = useState(""); const [website, setWebsite] = useState(""); const [github, setGithub] = useState(""); const [linkedin, setLinkedin] = useState(""); const [facebook, setFacebook] = useState(""); const [instagram, setInstagram] = useState(""); const [twitter, setTwitter] = useState(""); const [youtube, setYoutube] = useState(""); const [tiktok, setTiktok] = useState(""); const [active, setActive] = useState(true); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [error, setError] = useState(""); const [sidebarOpen, setSidebarOpen] = useState(false); useEffect(() => { const loadData = async () => { try { setLoading(true); setError(""); const url = editId ? `/api/contact-info?id=${editId}` : "/api/contact-info"; const response = await fetch(url, { cache: "no-store", }); const result = await response.json(); if (!response.ok) { throw new Error( result.message || "Gagal mengambil Contact Information." ); } const contact = result.data as ContactInfo | null; setData(contact); if (contact) { setDescription(contact.description || ""); setEmail(contact.email || ""); setPhone(contact.phone || ""); setLocation(contact.location || ""); setWebsite(contact.website || ""); setGithub(contact.github || ""); setLinkedin(contact.linkedin || ""); setFacebook(contact.facebook || ""); setInstagram(contact.instagram || ""); setTwitter(contact.twitter || ""); setYoutube(contact.youtube || ""); setTiktok(contact.tiktok || ""); setActive(contact.active); } } catch (err) { setError( err instanceof Error ? err.message : "Gagal mengambil data." ); } finally { setLoading(false); } }; loadData(); }, [editId]); const handleSubmit = async ( e: React.FormEvent ) => { e.preventDefault(); setSaving(true); setError(""); try { const payload = { description, email, phone, location, website, github, linkedin, facebook, instagram, twitter, youtube, tiktok, active, }; const response = await fetch("/api/contact-info", { method: data ? "PUT" : "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify( data ? { id: data.id, ...payload, } : payload ), }); const result = await response.json(); if (!response.ok) { throw new Error( result.message || "Gagal menyimpan Contact Information." ); } router.push("/secure-panel/contact-info/list"); router.refresh(); } catch (err) { setError( err instanceof Error ? err.message : "Terjadi kesalahan." ); setSaving(false); } }; const handleDelete = async () => { if (!data) return; const confirmed = window.confirm( "Yakin ingin menghapus Contact Information?" ); if (!confirmed) return; try { setSaving(true); setError(""); const response = await fetch( `/api/contact-info?id=${data.id}`, { method: "DELETE", } ); const result = await response.json(); if (!response.ok) { throw new Error( result.message || "Gagal menghapus Contact Information." ); } router.push("/secure-panel/contact-info/list"); router.refresh(); } catch (err) { setError( err instanceof Error ? err.message : "Gagal menghapus data." ); setSaving(false); } }; if (loading) { return ( <>
Memuat Contact Information

Sedang mengambil data dari database...

); } return ( <>
{/* MOBILE OVERLAY */}
setSidebarOpen(false)} /> {/* SIDEBAR */} {/* MAIN */}
{/* TOPBAR */}
ADMIN PANEL
Contact Management
{/* CONTENT */}
{/* PAGE HEADING */}
Kembali ke Contact List
WEBSITE CONTENT

{editId ? "Edit Contact" : "Contact Information"}

{editId ? "Perbarui informasi kontak, alamat, website, dan sosial media yang digunakan pada halaman contact website GloVaTech." : "Kelola informasi kontak, alamat, website, dan sosial media yang digunakan pada halaman contact website GloVaTech."}

{/* ERROR */} {error && (
{error}
)}
{/* CONTACT + PREVIEW INFO */}
{/* CONTACT INFORMATION */}
CONTACT INFORMATION

Informasi Kontak

Informasi utama yang digunakan pengunjung untuk menghubungi atau menemukan lokasi website owner.