{"path":"src/app/admin/page.tsx","size":43403,"locked":false,"binary":false,"truncated":false,"content":"\"use client\";\n\nexport const dynamic = \"force-dynamic\";\n\nimport { useState, useEffect } from \"react\";\nimport { createClient } from \"@/lib/supabase/client\";\nimport { Plus, Star, X, Trash2 } from \"lucide-react\";\nimport { brandConfig } from \"@/lib/brand\";\nimport { revalidateHome } from \"@/actions/revalidate\";\nimport { AdminProductCard } from \"@/components/admin/AdminProductCard\"; // NEW\n\nconst supabase = createClient();\n\nexport default function AdminDashboard() {\n const [activeTab, setActiveTab] = useState(\"products\");\n const [products, setProducts] = useState([]);\n const [reviews, setReviews] = useState([]);\n const [settings, setSettings] = useState({\n name: brandConfig.name,\n tagline: brandConfig.tagline,\n colors: { ...brandConfig.colors },\n hero: { ...brandConfig.hero },\n about: { ...brandConfig.about },\n contact: { ...brandConfig.contact },\n footer: {\n ...brandConfig.footer,\n socials: {\n instagram: brandConfig.footer?.socials?.instagram || \"\",\n facebook: brandConfig.footer?.socials?.facebook || \"\",\n x: brandConfig.footer?.socials?.x || \"\",\n youtube: brandConfig.footer?.socials?.youtube || \"\",\n whatsapp_channel: brandConfig.footer?.socials?.whatsapp_channel || \"\",\n telegram_channel: brandConfig.footer?.socials?.telegram_channel || \"\",\n discord_channel: brandConfig.footer?.socials?.discord_channel || \"\",\n viber_channel: brandConfig.footer?.socials?.viber_channel || \"\",\n },\n },\n nav: [...brandConfig.nav],\n chat: {\n whatsapp: brandConfig.chat?.whatsapp || \"\",\n telegram: brandConfig.chat?.telegram || \"\",\n discord: brandConfig.chat?.discord || \"\",\n viber: brandConfig.chat?.viber || \"\",\n },\n preferred_chat: brandConfig.preferred_chat || \"whatsapp\",\n });\n const [loading, setLoading] = useState(true);\n const [user, setUser] = useState(null);\n const [modalOpen, setModalOpen] = useState(false);\n const [editingProduct, setEditingProduct] = useState(null);\n\n const [form, setForm] = useState({\n name: \"\",\n description: \"\",\n price: \"\",\n badge: \"\",\n icon: \"sparkles\",\n });\n const [imageList, setImageList] = useState([\"\"]);\n\n useEffect(() => {\n if (!supabase) return;\n supabase.auth.getUser().then(({ data }) => {\n if (!data.user) {\n window.location.href = \"/login\";\n } else {\n setUser(data.user);\n fetchData();\n }\n });\n }, []);\n\n const fetchData = async () => {\n setLoading(true);\n try {\n const [prodRes, revRes, settRes] = await Promise.all([\n supabase!.from(\"products\").select(\"*\").order(\"created_at\", { ascending: false }),\n supabase!.from(\"reviews\").select(\"*\").order(\"created_at\", { ascending: false }),\n supabase!.from(\"site_settings\").select(\"*\").single(),\n ]);\n setProducts(prodRes.data || []);\n setReviews(revRes.data || []);\n if (settRes.data) {\n const s = settRes.data;\n setSettings((prev: any) => ({\n name: s.name ?? prev.name,\n tagline: s.tagline ?? prev.tagline,\n colors: s.colors ?? prev.colors,\n hero: s.hero ?? prev.hero,\n about: s.about ?? prev.about,\n contact: s.contact ?? prev.contact,\n footer: s.footer ?? prev.footer,\n nav: s.nav ?? prev.nav,\n chat: s.chat ?? prev.chat,\n preferred_chat: s.preferred_chat ?? prev.preferred_chat,\n }));\n }\n } catch (error) {\n console.error(error);\n }\n setLoading(false);\n };\n\n const openAddModal = () => {\n setEditingProduct(null);\n setForm({ name: \"\", description: \"\", price: \"\", badge: \"\", icon: \"sparkles\" });\n setImageList([\"\"]);\n setModalOpen(true);\n };\n\n const openEditModal = (product: any) => {\n setEditingProduct(product);\n setForm({\n name: product.name || \"\",\n description: product.description || \"\",\n price: product.price?.toString() || \"\",\n badge: product.badge || \"\",\n icon: product.icon || \"sparkles\",\n });\n const existingImages: string[] = Array.isArray(product.images)\n ? product.images\n : product.image\n ? [product.image]\n : [\"\"];\n setImageList(existingImages);\n setModalOpen(true);\n };\n\n const handleImageChange = (index: number, value: string) => {\n const updated = [...imageList];\n updated[index] = value;\n setImageList(updated);\n };\n\n const addImageField = () => setImageList([...imageList, \"\"]);\n\n const removeImageField = (index: number) => {\n if (imageList.length <= 1) return;\n const updated = imageList.filter((_, i) => i !== index);\n setImageList(updated);\n };\n\n const handleProductSubmit = async () => {\n if (!supabase) return;\n const cleanedImages = imageList.map((url) => url.trim()).filter((url) => url.length > 0);\n const primaryImage = cleanedImages.length > 0 ? cleanedImages[0] : \"\";\n\n const payload = {\n name: form.name,\n description: form.description,\n price: parseFloat(form.price) || 0,\n image: primaryImage,\n images: cleanedImages,\n badge: form.badge,\n icon: form.icon,\n is_active: true,\n };\n if (editingProduct) {\n await supabase.from(\"products\").update(payload).eq(\"id\", editingProduct.id);\n } else {\n await supabase.from(\"products\").insert([payload]);\n }\n setModalOpen(false);\n fetchData();\n };\n\n const handleDeleteProduct = async (id: string) => {\n if (!supabase) return;\n await supabase.from(\"products\").delete().eq(\"id\", id);\n fetchData();\n };\n\n const toggleReviewApproval = async (review: any) => {\n if (!supabase) return;\n await supabase.from(\"reviews\").update({ approved: !review.approved }).eq(\"id\", review.id);\n fetchData();\n };\n\n const handleDeleteReview = async (id: string) => {\n if (!supabase) return;\n await supabase.from(\"reviews\").delete().eq(\"id\", id);\n fetchData();\n };\n\n const handleSettingsChange = (section: string, field: string, value: any) => {\n setSettings((prev: any) => ({\n ...prev,\n [section]: { ...prev[section], [field]: value },\n }));\n };\n\n const handleSettingsSave = async () => {\n if (!supabase) return;\n const { error } = await supabase.from(\"site_settings\").upsert({ id: 1, ...settings });\n if (!error) {\n await revalidateHome();\n alert(\"Settings saved. The main site will now show your changes.\");\n } else {\n alert(`Error: ${error.message} (Code: ${error.code || \"none\"})`);\n }\n };\n\n if (loading) {\n return (\n
\n

Loading…

\n
\n );\n }\n\n if (!supabase) {\n return (\n
\n

Database not connected.

\n
\n );\n }\n\n return (\n
\n {/* Tab navigation */}\n
\n
\n setActiveTab(\"products\")}\n className={`${activeTab === \"products\" ? \"text-black border-b border-black pb-1 -mb-1\" : \"hover:text-black\"} transition`}\n >\n Products\n \n setActiveTab(\"reviews\")}\n className={`${activeTab === \"reviews\" ? \"text-black border-b border-black pb-1 -mb-1\" : \"hover:text-black\"} transition`}\n >\n Reviews\n \n setActiveTab(\"settings\")}\n className={`${activeTab === \"settings\" ? \"text-black border-b border-black pb-1 -mb-1\" : \"hover:text-black\"} transition`}\n >\n Settings\n \n setActiveTab(\"admins\")}\n className={`${activeTab === \"admins\" ? \"text-black border-b border-black pb-1 -mb-1\" : \"hover:text-black\"} transition`}\n >\n Admins\n \n
\n
\n\n {/* Products tab – now uses AdminProductCard with image arrows */}\n {activeTab === \"products\" && (\n
\n
\n

Products

\n \n Add New Product\n \n
\n {products.length === 0 ? (\n
No products yet.
\n ) : (\n
\n {products.map((product) => (\n \n ))}\n
\n )}\n
\n )}\n\n {/* Reviews tab */}\n {activeTab === \"reviews\" && (\n
\n

Client Reviews

\n {reviews.length === 0 ? (\n
No reviews yet.
\n ) : (\n
\n {reviews.map((review) => (\n
\n
\n
\n {review.author || \"Anonymous\"}\n
\n {Array.from({ length: 5 }, (_, i) => (\n \n ))}\n
\n on {review.product_id || \"product\"}\n
\n

{review.comment}

\n
\n
\n \n {review.approved ? \"Showing\" : \"Hidden\"}\n \n toggleReviewApproval(review)}\n className={`text-[11px] uppercase tracking-wider font-medium px-3 py-1.5 rounded-sm transition-colors ${review.approved ? \"text-neutral-400 hover:text-black border border-neutral-200 bg-white\" : \"text-white bg-black hover:bg-neutral-800\"}`}\n >\n {review.approved ? \"Hide\" : \"Show on site\"}\n \n \n
\n
\n ))}\n
\n )}\n
\n )}\n\n {/* Settings tab – Full Customization (unchanged) */}\n {activeTab === \"settings\" && (\n
\n

Site Customization

\n\n
\n {/* Business Identity */}\n
\n

Business Identity

\n
\n \n setSettings({ ...settings, name: e.target.value })}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n setSettings({ ...settings, tagline: e.target.value })}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light resize-none\"\n />\n
\n
\n\n {/* Hero Section */}\n
\n

Hero Section

\n
\n \n handleSettingsChange(\"hero\", \"title\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"hero\", \"subtitle\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n \n handleSettingsChange(\"hero\", \"cta\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"hero\", \"ctaLink\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n\n {/* About Section */}\n
\n

About Section

\n
\n \n handleSettingsChange(\"about\", \"title\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"about\", \"content\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light resize-none\"\n />\n
\n
\n \n handleSettingsChange(\"about\", \"image\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n\n {/* Contact */}\n
\n

Contact

\n
\n
\n \n handleSettingsChange(\"contact\", \"email\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"contact\", \"phone\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"contact\", \"address\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n\n {/* Chat Apps (for Book Now) */}\n
\n

Chat Links (for “Book Now”)

\n
\n
\n \n handleSettingsChange(\"chat\", \"whatsapp\", e.target.value)}\n placeholder=\"+15551234567\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"chat\", \"telegram\", e.target.value)}\n placeholder=\"@username\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"chat\", \"discord\", e.target.value)}\n placeholder=\"https://discord.gg/...\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n handleSettingsChange(\"chat\", \"viber\", e.target.value)}\n placeholder=\"+15551234567\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n \n setSettings({ ...settings, preferred_chat: e.target.value })}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light appearance-none\"\n >\n \n \n \n \n \n
\n
\n\n {/* Footer & Social */}\n
\n

Footer & Social Links

\n
\n \n handleSettingsChange(\"footer\", \"copyright\", e.target.value)}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, instagram: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, facebook: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, x: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, youtube: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, whatsapp_channel: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, telegram_channel: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, discord_channel: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n \n setSettings((prev: any) => ({\n ...prev,\n footer: { ...prev.footer, socials: { ...prev.footer?.socials, viber_channel: e.target.value } },\n }))\n }\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] tracking-wide px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n\n
\n \n Save All Settings\n \n
\n
\n
\n )}\n\n {/* Admins tab */}\n {activeTab === \"admins\" && (\n
\n

Admin Management

\n \n
\n )}\n\n {/* Product modal – unchanged */}\n {modalOpen && (\n
\n
\n
\n

\n {editingProduct ? \"Edit Product\" : \"New Product Manifest\"}\n

\n \n
\n
\n
\n \n setForm({ ...form, name: e.target.value })}\n placeholder=\"e.g. N°02 Alabaster Candle\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n \n setForm({ ...form, price: e.target.value })}\n placeholder=\"180\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n \n setForm({ ...form, badge: e.target.value })}\n placeholder=\"e.g. Limited\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n
\n
\n \n setForm({ ...form, description: e.target.value })}\n placeholder=\"e.g. Soy Wax / 220g\"\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n
\n\n
\n \n
\n {imageList.map((url, idx) => (\n
\n handleImageChange(idx, e.target.value)}\n placeholder=\"https://...\"\n className=\"flex-1 bg-[#f4f4f4] border border-transparent text-[12px] px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light\"\n />\n {imageList.length > 1 && (\n removeImageField(idx)}\n className=\"text-neutral-400 hover:text-red-500 transition p-1\"\n >\n \n \n )}\n
\n ))}\n
\n \n Add Image URL\n \n
\n\n
\n \n setForm({ ...form, icon: e.target.value })}\n className=\"w-full bg-[#f4f4f4] border border-transparent text-[12px] px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300 transition-all font-light appearance-none\"\n >\n \n \n \n \n \n
\n
\n
\n setModalOpen(false)}\n className=\"text-[11px] uppercase tracking-wider font-medium text-neutral-500 hover:text-black px-4 py-2.5 transition-colors\"\n >\n Cancel\n \n \n {editingProduct ? \"Update Item\" : \"Add Item\"}\n \n
\n
\n
\n )}\n
\n );\n}\n\n// ------------------- Admin Panel Component (unchanged) -------------------\nfunction AdminPanel() {\n const [admins, setAdmins] = useState([]);\n const [loading, setLoading] = useState(true);\n const [email, setEmail] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [isFirstAdmin, setIsFirstAdmin] = useState(false);\n const [currentUserId, setCurrentUserId] = useState(null);\n\n useEffect(() => {\n if (!supabase) return;\n fetchAdmins();\n }, []);\n\n const fetchAdmins = async () => {\n try {\n const res = await fetch(\"/api/admin/admins\");\n if (!res.ok) throw new Error(\"API failed\");\n\n const data = await res.json();\n const adminsArray = Array.isArray(data) ? data : data.admins || [];\n const currentId = data.currentUserId;\n const firstAdminFlag = data.isFirstAdmin ?? false;\n\n setAdmins(adminsArray);\n setCurrentUserId(currentId);\n setIsFirstAdmin(firstAdminFlag);\n } catch (error) {\n console.error(\"Failed to fetch admins:\", error);\n setAdmins([]);\n setCurrentUserId(null);\n setIsFirstAdmin(false);\n }\n setLoading(false);\n };\n\n const handlePromote = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n const res = await fetch(\"/api/admin/admins\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ email }),\n });\n if (res.ok) {\n setEmail(\"\");\n fetchAdmins();\n } else {\n const data = await res.json();\n setError(data.error || \"Promotion failed\");\n }\n };\n\n const handleDemote = async (userId: string) => {\n const res = await fetch(`/api/admin/admins/${userId}`, {\n method: \"DELETE\",\n });\n if (res.ok) {\n fetchAdmins();\n } else {\n const data = await res.json();\n alert(data.error || \"Demotion failed\");\n }\n };\n\n if (loading) return

Loading...

;\n\n return (\n
\n {isFirstAdmin && (\n
\n
\n \n setEmail(e.target.value)}\n required\n className=\"w-full bg-[#f4f4f4] border border-transparent text-sm px-4 py-3 rounded-sm focus:outline-none focus:border-neutral-300\"\n placeholder=\"user@example.com\"\n />\n
\n \n Promote\n \n \n )}\n {error &&

{error}

}\n\n
\n {admins.length === 0 && !loading && (\n
No admins found.
\n )}\n {admins.map((admin: any) => (\n
\n
\n

\n {admin.profiles?.full_name || \"No name\"}\n

\n

{admin.user_id}

\n
\n {isFirstAdmin && admin.user_id !== currentUserId && (\n handleDemote(admin.user_id)}\n className=\"text-xs text-red-500 hover:text-red-700\"\n >\n Remove\n \n )}\n
\n ))}\n
\n
\n );\n}"}