admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-10-01 05:28:31 +07:00
1 parent e9f6e7201a
commit 7abbcfebd2
8 files changed
+405 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/admin/src/components/CategoryBulkJsonModal.tsx
+5
View File
@@ -75,6 +75,7 @@ export default function CategoryBulkJsonModal({
id: cat.id,
name: catBaseName || transMap['th'] || 'Unnamed Category',
imageUrl: cat.imageUrl || null,
layoutType: cat.layoutType || 'split_showcase',
translations: transMap,
};
});
@@ -89,6 +90,7 @@ export default function CategoryBulkJsonModal({
const sampleItems = exportData.slice(0, 5);
return `Please translate and optimize our E-commerce Category Names into all 8 supported languages (th, en, ja, zh, vi, ko, lo, it).
Ensure the tone is elegant, accurate for luxury aromatherapy & lifestyle products.
Allowed layoutType values: "split_showcase" (default), "editorial_hero", "dense_catalog".
Return ONLY a valid JSON Array conforming to this structure:
\`\`\`json
@@ -99,6 +101,7 @@ ${JSON.stringify(
{
name: 'น้ำมันหอมระเหย',
imageUrl: '/images/categories/essential-oils.jpg',
layoutType: 'split_showcase',
translations: {
th: 'น้ำมันหอมระเหย',
en: 'Essential Oils',
@@ -113,6 +116,7 @@ ${JSON.stringify(
{
name: 'ก้านไม้หอมปรับอากาศ',
imageUrl: '/images/categories/reed-diffusers.jpg',
layoutType: 'editorial_hero',
translations: {
th: 'ก้านไม้หอมปรับอากาศ',
en: 'Reed Diffusers',
@@ -165,6 +169,7 @@ ${JSON.stringify(
id: typeof item.id === 'number' ? item.id : undefined,
name: baseName,
imageUrl: item.imageUrl || null,
layoutType: typeof item.layoutType === 'string' ? item.layoutType : 'split_showcase',
translations: trans,
};
});
apps/admin/src/pages/CategoryEditPage.tsx
+155 -3
View File
@@ -22,7 +22,10 @@ import {
FileJson,
Check,
Code2,
Sparkles
Sparkles,
LayoutTemplate,
Columns,
Grid3X3
} from 'lucide-react'
import MediaLibraryModal from '../components/MediaLibraryModal'
@@ -41,7 +44,7 @@ const SAMPLE_JSON_TEMPLATE = JSON.stringify({
ja: "アロマキャンドル",
zh: "芳香香薰蜡烛",
vi: "Nến thơm thư giãn",
ko: "아로마 캔들",
ko: "아로มา 캔들",
lo: "ທຽນຫອມອາໂຣມາ",
it: "Candele aromatiche profumate"
}, null, 2)
@@ -76,6 +79,7 @@ export default function CategoryEditPage() {
it: '',
})
const [imageUrl, setImageUrl] = useState<string>('')
const [layoutType, setLayoutType] = useState<string>('split_showcase')
const [categoryMeta, setCategoryMeta] = useState<Category | null>(null)
// Media Library Modal
@@ -91,6 +95,7 @@ export default function CategoryEditPage() {
const data = await res.json()
setCategoryMeta(data)
setImageUrl(data.imageUrl || '')
setLayoutType(data.layoutType || 'split_showcase')
if (data.name && typeof data.name === 'object') {
setName(prev => ({ ...prev, ...data.name }))
@@ -278,7 +283,8 @@ export default function CategoryEditPage() {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: masterName,
imageUrl: imageUrl || null
imageUrl: imageUrl || null,
layoutType: layoutType || 'split_showcase'
})
})
@@ -657,6 +663,152 @@ export default function CategoryEditPage() {
)}
</div>
{/* Card: Category Layout Archetype */}
<div className="admin-card p-6 md:p-8 space-y-6">
<div className="flex items-center justify-between border-b border-white/5 pb-4">
<div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-amber-500/10 text-amber-400">
<LayoutTemplate className="w-5 h-5" />
</div>
<div>
<h2 className="text-lg font-bold text-white">Category Layout & Presentation</h2>
<p className="text-xs text-slate-400">Choose how this category displays on Storefront & Website</p>
</div>
</div>
<span className="px-2.5 py-1 rounded-lg text-xs font-mono font-semibold bg-white/5 text-slate-300 border border-white/10">
{layoutType}
</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Option 1: Split Showcase */}
<div
onClick={() => setLayoutType('split_showcase')}
className={`relative p-5 rounded-2xl border-2 transition-all cursor-pointer flex flex-col justify-between group ${
layoutType === 'split_showcase'
? 'bg-cyan-glow/10 border-cyan-glow shadow-lg shadow-cyan-glow/10'
: 'bg-white/[0.02] border-white/10 hover:border-white/20 hover:bg-white/[0.04]'
}`}
>
<div className="space-y-3">
{/* Visual Layout Mockup */}
<div className="w-full h-24 rounded-xl bg-night-950/80 border border-white/10 p-2.5 flex flex-col justify-between overflow-hidden">
<div className="flex items-center gap-2">
<div className="flex-1 space-y-1">
<div className="h-2 w-3/4 bg-white/30 rounded" />
<div className="h-1.5 w-1/2 bg-white/15 rounded" />
</div>
<div className="w-8 h-8 rounded-lg bg-cyan-glow/30 border border-cyan-glow/50 shrink-0" />
</div>
<div className="grid grid-cols-3 gap-1 pt-1">
<div className="h-6 rounded bg-white/10" />
<div className="h-6 rounded bg-white/10" />
<div className="h-6 rounded bg-white/10" />
</div>
</div>
<div>
<div className="flex items-center justify-between">
<h4 className="text-sm font-bold text-white flex items-center gap-1.5">
<Columns className="w-4 h-4 text-cyan-glow" />
Split Showcase
</h4>
{layoutType === 'split_showcase' && (
<CheckCircle2 className="w-4 h-4 text-cyan-glow" />
)}
</div>
<p className="text-[11px] text-cyan-400 font-medium mt-0.5">ค่าเริ่มต้น (Balanced)</p>
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
หัวข้อแบ่ง 2 ฝั่ง (ข้อความซ้าย + รูปเด่นขวา) พร้อมการจัดแสดงสินค้า 3-4 คอลัมน์มาตรฐาน
</p>
</div>
</div>
</div>
{/* Option 2: Editorial Hero */}
<div
onClick={() => setLayoutType('editorial_hero')}
className={`relative p-5 rounded-2xl border-2 transition-all cursor-pointer flex flex-col justify-between group ${
layoutType === 'editorial_hero'
? 'bg-amber-500/10 border-amber-400 shadow-lg shadow-amber-500/10'
: 'bg-white/[0.02] border-white/10 hover:border-white/20 hover:bg-white/[0.04]'
}`}
>
<div className="space-y-3">
{/* Visual Layout Mockup */}
<div className="w-full h-24 rounded-xl bg-night-950/80 border border-white/10 p-2 flex flex-col justify-between overflow-hidden">
<div className="w-full h-10 rounded-lg bg-amber-500/20 border border-amber-500/40 flex flex-col items-center justify-center gap-1">
<div className="h-2 w-16 bg-amber-200/80 rounded" />
<div className="h-1 w-10 bg-amber-200/40 rounded" />
</div>
<div className="grid grid-cols-2 gap-1.5 pt-1">
<div className="h-8 rounded-lg bg-white/10 border border-white/5" />
<div className="h-8 rounded-lg bg-white/10 border border-white/5" />
</div>
</div>
<div>
<div className="flex items-center justify-between">
<h4 className="text-sm font-bold text-white flex items-center gap-1.5">
<Sparkles className="w-4 h-4 text-amber-400" />
Editorial Hero
</h4>
{layoutType === 'editorial_hero' && (
<CheckCircle2 className="w-4 h-4 text-amber-400" />
)}
</div>
<p className="text-[11px] text-amber-400 font-medium mt-0.5">Cinematic & Luxury</p>
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
Hero Banner เต็มจอสไตล์นิตยสารหรูหรา พร้อมการ์ดสินค้าขนาดใหญ่ 2-3 คอลัมน์
</p>
</div>
</div>
</div>
{/* Option 3: Dense Catalog */}
<div
onClick={() => setLayoutType('dense_catalog')}
className={`relative p-5 rounded-2xl border-2 transition-all cursor-pointer flex flex-col justify-between group ${
layoutType === 'dense_catalog'
? 'bg-purple-500/10 border-purple-400 shadow-lg shadow-purple-500/10'
: 'bg-white/[0.02] border-white/10 hover:border-white/20 hover:bg-white/[0.04]'
}`}
>
<div className="space-y-3">
{/* Visual Layout Mockup */}
<div className="w-full h-24 rounded-xl bg-night-950/80 border border-white/10 p-2 flex flex-col justify-between overflow-hidden">
<div className="flex items-center justify-between border-b border-white/10 pb-1">
<div className="h-2 w-12 bg-white/40 rounded" />
<div className="h-2 w-6 bg-purple-400/60 rounded" />
</div>
<div className="grid grid-cols-4 gap-1 pt-1">
<div className="h-6 rounded bg-white/10" />
<div className="h-6 rounded bg-white/10" />
<div className="h-6 rounded bg-white/10" />
<div className="h-6 rounded bg-white/10" />
</div>
</div>
<div>
<div className="flex items-center justify-between">
<h4 className="text-sm font-bold text-white flex items-center gap-1.5">
<Grid3X3 className="w-4 h-4 text-purple-400" />
Dense Catalog
</h4>
{layoutType === 'dense_catalog' && (
<CheckCircle2 className="w-4 h-4 text-purple-400" />
)}
</div>
<p className="text-[11px] text-purple-400 font-medium mt-0.5">High Density Shopper</p>
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
Header ย่อกะทัดรัด พร้อมตารางสินค้าความหนาแน่นสูง 4-5 คอลัมน์ เหมาะสำหรับสินค้าจำนวนมาก
</p>
</div>
</div>
</div>
</div>
</div>
{/* Card 3: Associated Products & Quick Link */}
{!isNew && categoryMeta && (
<div className="admin-card p-6 flex items-center justify-between gap-4">