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-06-21 00:02:55 -04:00
1 parent 73590e06c4
commit f9c4046d35
6 files changed
+148 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/admin/src/pages/SystemSettingsPage.tsx
+97
View File
@@ -2,6 +2,27 @@ import { useState, useEffect } from 'react'
import { API_BASE, type StoreSettings } from '@homaroma/types'
import { Save, Loader2, Landmark, Truck } from 'lucide-react'
const defaultThemeTokens = {
brandPrimary: '#FF6B6B',
brandPrimaryHover: '#FF4500',
brandAccent: '#FFF200',
brandWarm: '#FFA07A',
brandCool: '#E0FFFF',
brandSuccess: '#98FB98',
brandSoft: '#D8BFD8',
surfacePage: '#FFF0F5',
surfaceNavRest: '#F9F8F5',
surfaceCard: '#FFFFFF',
textMain: '#333333',
mutedText: '#666666',
linePrimary: '#00B900',
linePrimaryHover: '#009900',
fontBody: 'system-ui, sans-serif',
fontDisplay: 'system-ui, sans-serif',
shadowCard: '0 10px 25px rgba(0,0,0,0.05)',
shadowCardHover: '0 20px 40px rgba(0,0,0,0.1)',
}
export default function SystemSettingsPage() {
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
@@ -9,6 +30,7 @@ export default function SystemSettingsPage() {
// Form State
const [brandName, setBrandName] = useState('')
const [logoUrl, setLogoUrl] = useState('')
const [themePreset, setThemePreset] = useState('default')
const [shippingFee, setShippingFee] = useState<string>('')
const [bankName, setBankName] = useState('')
const [bankAccountName, setBankAccountName] = useState('')
@@ -26,6 +48,7 @@ export default function SystemSettingsPage() {
const [footerSupportHeading, setFooterSupportHeading] = useState('')
const [footerCopyrightText, setFooterCopyrightText] = useState('')
const [themeTokens, setThemeTokens] = useState<Record<string, string>>(defaultThemeTokens)
useEffect(() => {
fetch(`${API_BASE}/settings`)
@@ -33,6 +56,7 @@ export default function SystemSettingsPage() {
.then((data: StoreSettings) => {
setBrandName(data.brandName || 'HomAroma')
setLogoUrl(data.logoUrl || '')
setThemePreset(data.themePreset || 'default')
setShippingFee(data.shippingFee.toString())
setBankName(data.bankName || '')
setBankAccountName(data.bankAccountName || '')
@@ -48,6 +72,10 @@ export default function SystemSettingsPage() {
setNewsletterButtonText(data.newsletterButtonText || '')
setFooterSupportHeading(data.footerSupportHeading || '')
setFooterCopyrightText(data.footerCopyrightText || '')
setThemeTokens({
...defaultThemeTokens,
...(data.themeTokens && typeof data.themeTokens === 'object' ? data.themeTokens : {}),
})
})
.catch(console.error)
.finally(() => setLoading(false))
@@ -64,6 +92,8 @@ export default function SystemSettingsPage() {
body: JSON.stringify({
brandName,
logoUrl,
themePreset,
themeTokens,
shippingFee: parseFloat(shippingFee) || 0,
bankName,
bankAccountName,
@@ -244,6 +274,20 @@ export default function SystemSettingsPage() {
)}
</div>
<div className="space-y-2">
<label className="text-xs uppercase font-bold tracking-widest text-slate-400">Theme Preset</label>
<select
value={themePreset}
onChange={e => setThemePreset(e.target.value)}
className="admin-input w-full max-w-sm bg-slate-900 border-white/10"
>
<option value="default">Default</option>
<option value="warm">Warm</option>
<option value="minimal">Minimal</option>
</select>
<p className="text-[10px] text-slate-400">Theme preset helps websites choose a starting palette before custom tokens are applied.</p>
</div>
<div className="space-y-2">
<label className="text-xs uppercase font-bold tracking-widest text-slate-400">Footer Description</label>
<textarea
@@ -312,6 +356,59 @@ export default function SystemSettingsPage() {
</div>
</div>
{/* Theme Settings */}
<div className="admin-card p-8 space-y-6">
<div className="flex items-center gap-3 border-b border-white/10 pb-4">
<div className="p-2 bg-cyan-glow/10 rounded-lg">
<span className="text-xl">🎨</span>
</div>
<h2 className="text-lg font-bold uppercase tracking-widest text-white">Theme Tokens</h2>
</div>
<div className="grid gap-6 md:grid-cols-2">
{[
['brandPrimary', 'Brand Primary'],
['brandPrimaryHover', 'Brand Primary Hover'],
['brandAccent', 'Brand Accent'],
['surfacePage', 'Surface Page'],
['surfaceCard', 'Surface Card'],
['textMain', 'Text Main'],
['mutedText', 'Muted Text'],
['linePrimary', 'Line Primary'],
['linePrimaryHover', 'Line Primary Hover'],
].map(([key, label]) => (
<div key={key} className="space-y-2">
<label className="text-xs uppercase font-bold tracking-widest text-slate-400">{label}</label>
<input
type="color"
value={themeTokens[key] || ''}
onChange={e => setThemeTokens((current) => ({ ...current, [key]: e.target.value }))}
className="h-12 w-full max-w-sm rounded-xl border border-white/10 bg-slate-900 p-1"
/>
</div>
))}
</div>
<div className="grid gap-6 md:grid-cols-2">
{[
['fontBody', 'Font Body'],
['fontDisplay', 'Font Display'],
['shadowCard', 'Shadow Card'],
['shadowCardHover', 'Shadow Card Hover'],
].map(([key, label]) => (
<div key={key} className="space-y-2">
<label className="text-xs uppercase font-bold tracking-widest text-slate-400">{label}</label>
<input
type="text"
value={themeTokens[key] || ''}
onChange={e => setThemeTokens((current) => ({ ...current, [key]: e.target.value }))}
className="admin-input w-full"
/>
</div>
))}
</div>
</div>
{/* Newsletter Settings */}
<div className="admin-card p-8 space-y-6">
<div className="flex items-center gap-3 border-b border-white/10 pb-4">
apps/backend/prisma/migrations/20260622000000_add_theme_settings/migration.sql
+6
View File
@@ -0,0 +1,6 @@
-- Add theme support to singleton store settings.
ALTER TABLE "StoreSettings"
ADD COLUMN "themePreset" TEXT NOT NULL DEFAULT 'default';
ALTER TABLE "StoreSettings"
ADD COLUMN "themeTokens" JSONB;
apps/backend/prisma/schema.prisma
+2
View File
@@ -209,6 +209,8 @@ model StoreSettings {
id Int @id @default(1)
brandName String @default("HomAroma")
logoUrl String?
themePreset String @default("default")
themeTokens Json?
shippingFee Float @default(35)
bankName String @default("KASIKORNBANK (KBANK)")
bankAccountName String @default("HomAroma Co., Ltd.")
apps/backend/src/routes/settings.ts
+2
View File
@@ -46,6 +46,8 @@ export const settingsRoute = new Elysia({ prefix: "/settings" })
bankAccountNumber: t.String(),
pointsEarnRate: t.Number(),
logoUrl: t.Optional(t.String()),
themePreset: t.Optional(t.String()),
themeTokens: t.Optional(t.Any()),
facebookUrl: t.Optional(t.String()),
instagramUrl: t.Optional(t.String()),
tiktokUrl: t.Optional(t.String()),
apps/website/src/app/[lang]/layout.tsx
+39 -1
View File
@@ -8,6 +8,7 @@ import { API_BASE } from '@/lib/api';
import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
import type { MenuItem, StoreSettings } from '@homaroma/types';
import { isSupportedLocale } from '@/lib/locales';
import type { CSSProperties } from 'react';
export const metadata: Metadata = {
title: 'HomAroma',
@@ -75,6 +76,41 @@ async function getStoreSettings(lang: string): Promise<StoreSettings | null> {
}
}
function buildThemeStyle(settings: StoreSettings | null): CSSProperties | undefined {
const tokens = settings?.themeTokens
if (!tokens || typeof tokens !== 'object') return undefined
const style: Record<string, string> = {}
const vars: Array<[string, string | undefined]> = [
['--color-brand-primary', tokens.brandPrimary],
['--color-brand-primary-hover', tokens.brandPrimaryHover],
['--color-brand-accent', tokens.brandAccent],
['--color-brand-warm', tokens.brandWarm],
['--color-brand-cool', tokens.brandCool],
['--color-brand-success', tokens.brandSuccess],
['--color-brand-soft', tokens.brandSoft],
['--color-surface-page', tokens.surfacePage],
['--color-surface-nav-rest', tokens.surfaceNavRest],
['--color-surface-card', tokens.surfaceCard],
['--color-text-main', tokens.textMain],
['--color-muted-text', tokens.mutedText],
['--color-line-primary', tokens.linePrimary],
['--color-line-primary-hover', tokens.linePrimaryHover],
['--font-body', tokens.fontBody],
['--font-display', tokens.fontDisplay],
['--shadow-card', tokens.shadowCard],
['--shadow-card-hover', tokens.shadowCardHover],
]
for (const [key, value] of vars) {
if (typeof value === 'string' && value.trim()) {
style[key] = value
}
}
return Object.keys(style).length > 0 ? (style as CSSProperties) : undefined
}
export default async function RootLayout({
children,
params,
@@ -95,9 +131,11 @@ export default async function RootLayout({
getStoreSettings(lang),
]);
const themeStyle = buildThemeStyle(settings)
return (
<html lang={lang} className="scroll-smooth">
<body className="min-h-screen bg-surface-page text-text-main font-sans antialiased">
<body className="min-h-screen bg-surface-page text-text-main font-sans antialiased" style={themeStyle}>
<ClientProviders>
<Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
<main className="global-main">
packages/types/index.ts
+2
View File
@@ -121,6 +121,8 @@ export interface StoreSettings {
id: number
brandName: string
logoUrl?: string | null
themePreset?: string | null
themeTokens?: Record<string, string> | null
shippingFee: number
bankName: string
bankAccountName: string