x

apps/admin/src/pages/MenuManagerPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { API_BASE, type Menu } from '@homaroma/types'
-import { Save, Loader2, Plus, Trash2, GripVertical, Copy, Check } from 'lucide-react'
+import { Save, Loader2, Plus, Trash2, GripVertical, Copy, Check, Download, Upload } from 'lucide-react'
 
 const TreeNodeEditor = ({ node, type, depth, onChange, onRemove }: any) => {
   const childrenKey = type === 'root' ? 'columns' : 'links';
@@ -99,6 +99,7 @@ export default function MenuManagerPage() {
 
   // We'll manage multiple menus, e.g., 'main' and 'footer-explore'
   const [selectedMenuName, setSelectedMenuName] = useState('main')
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     Promise.all([
@@ -139,6 +140,55 @@ export default function MenuManagerPage() {
     setMenus(menus.map(m => m.name === selectedMenuName ? { ...m, items: newItems } : m))
   }
 
+  const handleExport = () => {
+    const dataStr = JSON.stringify(currentMenu, null, 2)
+    const blob = new Blob([dataStr], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `menu-${selectedMenuName}-snapshot-${new Date().toISOString().split('T')[0]}.json`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = async (event) => {
+      try {
+        const content = event.target?.result as string
+        const parsed = JSON.parse(content)
+        
+        if (!parsed || typeof parsed !== 'object') {
+          throw new Error('Invalid JSON format')
+        }
+
+        const newItems = Array.isArray(parsed.items) ? parsed.items : []
+        const newPayload = parsed.payload || []
+
+        setMenus(menus.map(m => m.name === selectedMenuName ? { ...m, items: newItems, payload: newPayload } : m))
+        
+        if (!menus.find(m => m.name === selectedMenuName)) {
+          setMenus([...menus, { id: Date.now(), name: selectedMenuName, items: newItems, payload: newPayload }])
+        }
+        
+        alert('Menu loaded from file! Click "Save Menu" to apply changes.')
+      } catch (err) {
+        console.error(err)
+        alert('Failed to parse JSON file')
+      } finally {
+        if (fileInputRef.current) {
+          fileInputRef.current.value = ''
+        }
+      }
+    }
+    reader.readAsText(file)
+  }
+
   const handleSave = async (e: React.FormEvent) => {
     e.preventDefault()
     setSaving(true)
@@ -183,17 +233,42 @@ export default function MenuManagerPage() {
       </div>
 
       <div className="flex gap-4 border-b border-white/5 pb-4">
-        {['main', 'footer-explore', 'footer-support'].map(name => (
+        <div className="flex-1 flex gap-4">
+          {['main', 'footer-explore', 'footer-support'].map(name => (
+            <button
+              key={name}
+              onClick={() => setSelectedMenuName(name)}
+              className={`px-4 py-2 font-bold text-xs uppercase tracking-widest rounded-lg transition-colors ${
+                selectedMenuName === name ? 'bg-cyan-glow text-night-900' : 'bg-white/5 text-slate-400 hover:bg-white/10'
+              }`}
+            >
+              {name === 'main' ? 'Main Navigation' : name === 'footer-explore' ? 'Footer Explore' : 'Footer Support'}
+            </button>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <input 
+            type="file" 
+            accept=".json" 
+            ref={fileInputRef} 
+            onChange={handleImport} 
+            className="hidden" 
+          />
           <button
-            key={name}
+            type="button"
-            onClick={() => setSelectedMenuName(name)}
+            onClick={() => fileInputRef.current?.click()}
-            className={`px-4 py-2 font-bold text-xs uppercase tracking-widest rounded-lg transition-colors ${
+            className="flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 text-slate-300 rounded-lg text-xs font-bold transition-colors"
-              selectedMenuName === name ? 'bg-cyan-glow text-night-900' : 'bg-white/5 text-slate-400 hover:bg-white/10'
-            }`}
           >
-            {name === 'main' ? 'Main Navigation' : name === 'footer-explore' ? 'Footer Explore' : 'Footer Support'}
+            <Upload className="w-4 h-4" /> Import
           </button>
-        ))}
+          <button
+            type="button"
+            onClick={handleExport}
+            className="flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 text-slate-300 rounded-lg text-xs font-bold transition-colors"
+          >
+            <Download className="w-4 h-4" /> Export
+          </button>
+        </div>
       </div>
 
       <form onSubmit={handleSave} className="space-y-6">

apps/spa/src/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer({ categories = [] }: FooterProps) {
   const [exploreMenu, setExploreMenu] = useState<MenuItem[]>([])
   const [supportMenu, setSupportMenu] = useState<MenuItem[]>([])
   const [settings, setSettings] = useState<StoreSettings | null>(null)
-  const brandName = settings?.brandName || 'HomAroma'
+  const brandName = settings?.brandName || ''
 
   const translateMenuLabel = (item: MenuItem) => {
     const lang = localStorage.getItem('homaroma_lang') || 'en'

apps/spa/src/components/Navbar.tsx

@@ -144,7 +144,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
     : (hasAnnouncement ? 'top-[32px] md:top-[40px]' : 'top-0')
 
   const finalTopClassName = scrolled ? 'top-0' : computedOffset
-  const brandName = settings?.brandName || 'HomAroma'
+  const brandName = settings?.brandName || ''
 
   return (
     <>

apps/website/src/components/Footer.tsx

@@ -52,7 +52,7 @@ export default function Footer({
 
   // Social links — use settings if available, fallback to placeholder buttons
   const hasSocialLinks = settings && (settings.facebookUrl || settings.instagramUrl || settings.tiktokUrl)
-  const brandName = settings?.brandName || 'HomAroma'
+  const brandName = settings?.brandName || ''
 
   return (
     <footer className="border-t border-gray-200 bg-white px-6 py-20 text-pop-black">

apps/website/src/components/Navbar.tsx

@@ -165,7 +165,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
 
   const iconButtonClass = 'group rounded-full p-2 text-pop-black transition-all hover:bg-pop-pink/10 hover:text-pop-pink md:p-2.5'
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
-  const brandName = settings?.brandName || 'HomAroma'
+  const brandName = settings?.brandName || ''
 
   return (
     <>