@jhits/plugin-website 0.0.12 → 0.0.13

package/dist/api/handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../src/api/handler.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;GAEG;AACH,wBAAsB,YAAY,CAC9B,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,gBAAgB,GACzB,OAAO,CAAC,YAAY,CAAC,CA6CvB;AAED;;GAEG;AACH,wBAAsB,aAAa,CAC/B,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,gBAAgB,GACzB,OAAO,CAAC,YAAY,CAAC,CAmFvB"}
+{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../src/api/handler.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;GAEG;AACH,wBAAsB,YAAY,CAC9B,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,gBAAgB,GACzB,OAAO,CAAC,YAAY,CAAC,CAuDvB;AAED;;GAEG;AACH,wBAAsB,aAAa,CAC/B,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,gBAAgB,GACzB,OAAO,CAAC,YAAY,CAAC,CAmFvB"}

package/dist/api/handler.js

@@ -28,6 +28,16 @@ export async function GET_SETTINGS(req, config) {
                 maintenanceMode: false,
                 launch_date: '',
                 socials: [],
+                localizedContactInfo: {
+                    en: { physicalAddress: '', phoneNumber: '' },
+                    sv: { physicalAddress: '', phoneNumber: '' },
+                    nl: { physicalAddress: '', phoneNumber: '' },
+                },
+                localizedSocials: {
+                    en: [],
+                    sv: [],
+                    nl: [],
+                },
             });
         }
         // Convert launch_date from Date to ISO string if it exists

package/dist/types/settings.d.ts

@@ -1,6 +1,16 @@
 /**
  * Website Settings Types
  */
+export type SupportedLocale = 'en' | 'sv' | 'nl';
+export interface LocalizedContactInfo {
+    physicalAddress?: string;
+    phoneNumber?: string;
+}
+export interface LocalizedSocialLink {
+    id: number;
+    platform: string;
+    url: string;
+}
 export interface WebsiteSettings {
     identifier: string;
     siteName?: string;
@@ -14,6 +24,8 @@ export interface WebsiteSettings {
     maintenanceMode?: boolean;
     launch_date?: string;
     socials?: SocialLink[];
+    localizedContactInfo?: Partial<Record<SupportedLocale, LocalizedContactInfo>>;
+    localizedSocials?: Partial<Record<SupportedLocale, LocalizedSocialLink[]>>;
     updatedAt?: Date;
     createdAt?: Date;
 }

package/dist/types/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/types/settings.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,CAAA;KAAE,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/types/settings.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,oBAAoB;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,CAAA;KAAE,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}

package/dist/views/SettingsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../src/views/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAmBH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CA2ejE"}
+{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../src/views/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAyBH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CA2kBjE"}

package/dist/views/SettingsView.js

@@ -8,6 +8,11 @@ import { useState, useEffect, useRef } from 'react';
 import { Save, RefreshCw, Globe, Mail, Search, Settings2, Calendar } from 'lucide-react';
 import { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
 import { FaXTwitter } from 'react-icons/fa6';
+const AVAILABLE_LOCALES = [
+    { code: 'en', name: 'English', flag: '🇬🇧' },
+    { code: 'sv', name: 'Swedish', flag: '🇸🇪' },
+    { code: 'nl', name: 'Dutch', flag: '🇳🇱' },
+];
 const AVAILABLE_PLATFORMS = [
     { name: 'Instagram', icon: _jsx(FaInstagram, { size: 18 }) },
     { name: 'Facebook', icon: _jsx(FaFacebook, { size: 18 }) },
@@ -20,6 +25,7 @@ export function SettingsView({ siteId, locale }) {
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
     const [showSuccess, setShowSuccess] = useState(false);
+    const [activeTab, setActiveTab] = useState('en');
     const [settings, setSettings] = useState({
         identifier: 'site_config',
         siteName: '',
@@ -33,6 +39,16 @@ export function SettingsView({ siteId, locale }) {
         maintenanceMode: false,
         launch_date: '',
         socials: [],
+        localizedContactInfo: {
+            en: { physicalAddress: '', phoneNumber: '' },
+            sv: { physicalAddress: '', phoneNumber: '' },
+            nl: { physicalAddress: '', phoneNumber: '' },
+        },
+        localizedSocials: {
+            en: [],
+            sv: [],
+            nl: [],
+        },
     });
     // Fetch settings on load
     useEffect(() => {
@@ -88,6 +104,16 @@ export function SettingsView({ siteId, locale }) {
                         maintenanceMode: data.maintenanceMode ?? false,
                         launch_date: launchDate,
                         socials: data.socials || [],
+                        localizedContactInfo: data.localizedContactInfo || {
+                            en: { physicalAddress: '', phoneNumber: '' },
+                            sv: { physicalAddress: '', phoneNumber: '' },
+                            nl: { physicalAddress: '', phoneNumber: '' },
+                        },
+                        localizedSocials: data.localizedSocials || {
+                            en: [],
+                            sv: [],
+                            nl: [],
+                        },
                     });
                 }
             }
@@ -151,26 +177,58 @@ export function SettingsView({ siteId, locale }) {
             setIsSaving(false);
         }
     };
-    // Add social link
-    const handleAddSocial = () => {
-        const newId = settings.socials?.length ? Math.max(...settings.socials.map(s => s.id)) + 1 : 1;
+    // Remove social link
+    const handleRemoveSocial = (id) => {
         setSettings({
             ...settings,
-            socials: [...(settings.socials || []), { id: newId, platform: '', url: '' }],
+            socials: settings.socials?.filter(social => social.id !== id) || [],
         });
     };
-    // Update social link
-    const handleUpdateSocial = (id, field, value) => {
+    // Update localized contact info
+    const handleUpdateLocalizedContact = (field, value) => {
         setSettings({
             ...settings,
-            socials: settings.socials?.map(social => social.id === id ? { ...social, [field]: value } : social) || [],
+            localizedContactInfo: {
+                ...settings.localizedContactInfo,
+                [activeTab]: {
+                    ...settings.localizedContactInfo?.[activeTab],
+                    [field]: value,
+                },
+            },
         });
     };
-    // Remove social link
-    const handleRemoveSocial = (id) => {
+    // Add localized social link
+    const handleAddLocalizedSocial = () => {
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        const newId = currentSocials.length ? Math.max(...currentSocials.map(s => s.id)) + 1 : 1;
         setSettings({
             ...settings,
-            socials: settings.socials?.filter(social => social.id !== id) || [],
+            localizedSocials: {
+                ...settings.localizedSocials,
+                [activeTab]: [...currentSocials, { id: newId, platform: '', url: '' }],
+            },
+        });
+    };
+    // Update localized social link
+    const handleUpdateLocalizedSocial = (id, field, value) => {
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        setSettings({
+            ...settings,
+            localizedSocials: {
+                ...settings.localizedSocials,
+                [activeTab]: currentSocials.map(social => social.id === id ? { ...social, [field]: value } : social),
+            },
+        });
+    };
+    // Remove localized social link
+    const handleRemoveLocalizedSocial = (id) => {
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        setSettings({
+            ...settings,
+            localizedSocials: {
+                ...settings.localizedSocials,
+                [activeTab]: currentSocials.filter(social => social.id !== id),
+            },
         });
     };
     if (isLoading) {
@@ -180,10 +238,17 @@ export function SettingsView({ siteId, locale }) {
                                 ? 'bg-neutral-400 text-white cursor-not-allowed'
                                 : showSuccess
                                     ? 'bg-green-600 text-white'
-                                    : 'bg-primary text-white hover:bg-primary/90'}`, children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Saving..."] })) : showSuccess ? (_jsxs(_Fragment, { children: [_jsx(Settings2, { className: "w-4 h-4" }), "Saved!"] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), "Save Settings"] })) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Search, { size: 20, className: "text-primary" }), "Website Identity & SEO"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Name" }), _jsx("input", { type: "text", value: settings.siteName || '', onChange: (e) => setSettings({ ...settings, siteName: e.target.value }), placeholder: "e.g., Botanics & You", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Tagline" }), _jsx("input", { type: "text", value: settings.siteTagline || '', onChange: (e) => setSettings({ ...settings, siteTagline: e.target.value }), placeholder: "e.g., Sharing my knowledge with you", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Description" }), _jsx("textarea", { value: settings.siteDescription || '', onChange: (e) => setSettings({ ...settings, siteDescription: e.target.value }), placeholder: "A brief description of your website", rows: 3, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Keywords (comma-separated)" }), _jsx("input", { type: "text", value: settings.keywords || '', onChange: (e) => setSettings({ ...settings, keywords: e.target.value }), placeholder: "keyword1, keyword2, keyword3", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Mail, { size: 20, className: "text-primary" }), "Contact Information"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Contact Email" }), _jsx("input", { type: "email", value: settings.contactEmail || '', onChange: (e) => setSettings({ ...settings, contactEmail: e.target.value }), placeholder: "contact@example.com", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Phone Number" }), _jsx("input", { type: "tel", value: settings.phoneNumber || '', onChange: (e) => setSettings({ ...settings, phoneNumber: e.target.value }), placeholder: "+31 6 12345678", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Physical Address" }), _jsx("textarea", { value: settings.physicalAddress || '', onChange: (e) => setSettings({ ...settings, physicalAddress: e.target.value }), placeholder: "Street address, City, Country", rows: 2, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-dashboard-border pb-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text", children: [_jsx(Globe, { size: 20, className: "text-primary" }), "Social Links"] }), _jsx("button", { onClick: handleAddSocial, className: "px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all", children: "Add Social" })] }), _jsx("div", { className: "space-y-4", children: settings.socials && settings.socials.length > 0 ? (settings.socials.map((social) => {
-                                                const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
-                                                return (_jsxs("div", { className: "flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border", children: [_jsx("div", { className: "flex-shrink-0 text-dashboard-text-secondary", children: platform?.icon || _jsx(Globe, { size: 18 }) }), _jsxs("select", { value: social.platform, onChange: (e) => handleUpdateSocial(social.id, 'platform', e.target.value), className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text", children: [_jsx("option", { value: "", children: "Select Platform" }), AVAILABLE_PLATFORMS.map(p => (_jsx("option", { value: p.name, children: p.name }, p.name)))] }), _jsx("input", { type: "url", value: social.url, onChange: (e) => handleUpdateSocial(social.id, 'url', e.target.value), placeholder: "https://...", className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" }), _jsx("button", { onClick: () => handleRemoveSocial(social.id), className: "px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors", children: "Remove" })] }, social.id));
-                                            })) : (_jsx("p", { className: "text-sm text-dashboard-text-secondary text-center py-8", children: "No social links added yet. Click \"Add Social\" to get started." })) })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Settings2, { size: 18, className: "text-primary" }), "Maintenance"] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block mb-1", children: "Maintenance Mode" }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Show maintenance page to visitors" })] }), _jsx("button", { onClick: () => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode }), className: `relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'}`, children: _jsx("div", { className: `absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}` }) })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Calendar, { size: 18, className: "text-primary" }), "Launch Date"] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Date" }), _jsx("input", { type: "date", value: settings.launch_date ? settings.launch_date.split('T')[0] : '', onChange: (e) => {
+                                    : 'bg-primary text-white hover:bg-primary/90'}`, children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Saving..."] })) : showSuccess ? (_jsxs(_Fragment, { children: [_jsx(Settings2, { className: "w-4 h-4" }), "Saved!"] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), "Save Settings"] })) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Search, { size: 20, className: "text-primary" }), "Website Identity & SEO"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Name" }), _jsx("input", { type: "text", value: settings.siteName || '', onChange: (e) => setSettings({ ...settings, siteName: e.target.value }), placeholder: "e.g., Botanics & You", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Tagline" }), _jsx("input", { type: "text", value: settings.siteTagline || '', onChange: (e) => setSettings({ ...settings, siteTagline: e.target.value }), placeholder: "e.g., Sharing my knowledge with you", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Description" }), _jsx("textarea", { value: settings.siteDescription || '', onChange: (e) => setSettings({ ...settings, siteDescription: e.target.value }), placeholder: "A brief description of your website", rows: 3, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Keywords (comma-separated)" }), _jsx("input", { type: "text", value: settings.keywords || '', onChange: (e) => setSettings({ ...settings, keywords: e.target.value }), placeholder: "keyword1, keyword2, keyword3", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Mail, { size: 20, className: "text-primary" }), "Contact Information"] }), _jsx("div", { className: "flex gap-2 mb-6", children: AVAILABLE_LOCALES.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeTab === loc.code
+                                                    ? 'bg-primary text-white'
+                                                    : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'}`, children: [_jsx("span", { className: "mr-1", children: loc.flag }), loc.code.toUpperCase()] }, loc.code))) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Contact Email (global)" }), _jsx("input", { type: "email", value: settings.contactEmail || '', onChange: (e) => setSettings({ ...settings, contactEmail: e.target.value }), placeholder: "contact@example.com", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: ["Phone Number (", activeTab.toUpperCase(), ")"] }), _jsx("input", { type: "tel", value: settings.localizedContactInfo?.[activeTab]?.phoneNumber || settings.phoneNumber || '', onChange: (e) => handleUpdateLocalizedContact('phoneNumber', e.target.value), placeholder: "+31 6 12345678", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: ["Physical Address (", activeTab.toUpperCase(), ")"] }), _jsx("textarea", { value: settings.localizedContactInfo?.[activeTab]?.physicalAddress || settings.physicalAddress || '', onChange: (e) => handleUpdateLocalizedContact('physicalAddress', e.target.value), placeholder: "Street address, City, Country", rows: 2, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-dashboard-border pb-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text", children: [_jsx(Globe, { size: 20, className: "text-primary" }), "Social Links (", activeTab.toUpperCase(), ")"] }), _jsx("button", { onClick: handleAddLocalizedSocial, className: "px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all", children: "Add Social" })] }), _jsx("div", { className: "flex gap-2 mb-6", children: AVAILABLE_LOCALES.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeTab === loc.code
+                                                    ? 'bg-primary text-white'
+                                                    : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'}`, children: [_jsx("span", { className: "mr-1", children: loc.flag }), loc.code.toUpperCase()] }, loc.code))) }), _jsx("div", { className: "space-y-4", children: (() => {
+                                                const currentSocials = settings.localizedSocials?.[activeTab] || [];
+                                                return currentSocials.length > 0 ? (currentSocials.map((social) => {
+                                                    const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
+                                                    return (_jsxs("div", { className: "flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border", children: [_jsx("div", { className: "flex-shrink-0 text-dashboard-text-secondary", children: platform?.icon || _jsx(Globe, { size: 18 }) }), _jsxs("select", { value: social.platform, onChange: (e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value), className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text", children: [_jsx("option", { value: "", children: "Select Platform" }), AVAILABLE_PLATFORMS.map(p => (_jsx("option", { value: p.name, children: p.name }, p.name)))] }), _jsx("input", { type: "url", value: social.url, onChange: (e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value), placeholder: "https://...", className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" }), _jsx("button", { onClick: () => handleRemoveLocalizedSocial(social.id), className: "px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors", children: "Remove" })] }, social.id));
+                                                })) : (_jsxs("p", { className: "text-sm text-dashboard-text-secondary text-center py-8", children: ["No social links added for ", activeTab.toUpperCase(), ". Click \"Add Social\" to get started."] }));
+                                            })() })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Settings2, { size: 18, className: "text-primary" }), "Maintenance"] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block mb-1", children: "Maintenance Mode" }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Show maintenance page to visitors" })] }), _jsx("button", { onClick: () => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode }), className: `relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'}`, children: _jsx("div", { className: `absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}` }) })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Calendar, { size: 18, className: "text-primary" }), "Launch Date"] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Date" }), _jsx("input", { type: "date", value: settings.launch_date ? settings.launch_date.split('T')[0] : '', onChange: (e) => {
                                                                 const dateValue = e.target.value;
                                                                 const currentTime = settings.launch_date?.includes('T')
                                                                     ? settings.launch_date.split('T')[1]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-website",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Website management and configuration plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"

package/src/api/handler.ts

@@ -40,6 +40,16 @@ export async function GET_SETTINGS(
                 maintenanceMode: false,
                 launch_date: '',
                 socials: [],
+                localizedContactInfo: {
+                    en: { physicalAddress: '', phoneNumber: '' },
+                    sv: { physicalAddress: '', phoneNumber: '' },
+                    nl: { physicalAddress: '', phoneNumber: '' },
+                },
+                localizedSocials: {
+                    en: [],
+                    sv: [],
+                    nl: [],
+                },
             });
         }
 

package/src/types/settings.ts

@@ -2,6 +2,19 @@
  * Website Settings Types
  */
 
+export type SupportedLocale = 'en' | 'sv' | 'nl';
+
+export interface LocalizedContactInfo {
+    physicalAddress?: string;
+    phoneNumber?: string;
+}
+
+export interface LocalizedSocialLink {
+    id: number;
+    platform: string;
+    url: string;
+}
+
 export interface WebsiteSettings {
     identifier: string;
     siteName?: string;
@@ -15,6 +28,8 @@ export interface WebsiteSettings {
     maintenanceMode?: boolean;
     launch_date?: string;
     socials?: SocialLink[];
+    localizedContactInfo?: Partial<Record<SupportedLocale, LocalizedContactInfo>>;
+    localizedSocials?: Partial<Record<SupportedLocale, LocalizedSocialLink[]>>;
     updatedAt?: Date;
     createdAt?: Date;
 }

package/src/views/SettingsView.tsx

@@ -7,10 +7,16 @@
 
 import React, { useState, useEffect, useRef } from 'react';
 import { Save, RefreshCw, Globe, Mail, Phone, MapPin, Search, Settings2, Calendar } from 'lucide-react';
-import { WebsiteSettings, SocialLink } from '../types/settings';
+import { WebsiteSettings, SocialLink, SupportedLocale, LocalizedSocialLink } from '../types/settings';
 import { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
 import { FaXTwitter } from 'react-icons/fa6';
 
+const AVAILABLE_LOCALES: { code: SupportedLocale; name: string; flag: string }[] = [
+    { code: 'en', name: 'English', flag: '🇬🇧' },
+    { code: 'sv', name: 'Swedish', flag: '🇸🇪' },
+    { code: 'nl', name: 'Dutch', flag: '🇳🇱' },
+];
+
 const AVAILABLE_PLATFORMS = [
     { name: 'Instagram', icon: <FaInstagram size={18} /> },
     { name: 'Facebook', icon: <FaFacebook size={18} /> },
@@ -29,6 +35,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
     const [showSuccess, setShowSuccess] = useState(false);
+    const [activeTab, setActiveTab] = useState<SupportedLocale>('en');
     const [settings, setSettings] = useState<WebsiteSettings>({
         identifier: 'site_config',
         siteName: '',
@@ -42,6 +49,16 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
         maintenanceMode: false,
         launch_date: '',
         socials: [],
+        localizedContactInfo: {
+            en: { physicalAddress: '', phoneNumber: '' },
+            sv: { physicalAddress: '', phoneNumber: '' },
+            nl: { physicalAddress: '', phoneNumber: '' },
+        },
+        localizedSocials: {
+            en: [],
+            sv: [],
+            nl: [],
+        },
     });
 
     // Fetch settings on load
@@ -96,6 +113,16 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                         maintenanceMode: data.maintenanceMode ?? false,
                         launch_date: launchDate,
                         socials: data.socials || [],
+                        localizedContactInfo: data.localizedContactInfo || {
+                            en: { physicalAddress: '', phoneNumber: '' },
+                            sv: { physicalAddress: '', phoneNumber: '' },
+                            nl: { physicalAddress: '', phoneNumber: '' },
+                        },
+                        localizedSocials: data.localizedSocials || {
+                            en: [],
+                            sv: [],
+                            nl: [],
+                        },
                     });
                 }
             } catch (error) {
@@ -164,30 +191,64 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
         }
     };
 
-    // Add social link
-    const handleAddSocial = () => {
-        const newId = settings.socials?.length ? Math.max(...settings.socials.map(s => s.id)) + 1 : 1;
+    // Remove social link
+    const handleRemoveSocial = (id: number) => {
         setSettings({
             ...settings,
-            socials: [...(settings.socials || []), { id: newId, platform: '', url: '' }],
+            socials: settings.socials?.filter(social => social.id !== id) || [],
         });
     };
 
-    // Update social link
-    const handleUpdateSocial = (id: number, field: 'platform' | 'url', value: string) => {
+    // Update localized contact info
+    const handleUpdateLocalizedContact = (field: 'physicalAddress' | 'phoneNumber', value: string) => {
         setSettings({
             ...settings,
-            socials: settings.socials?.map(social =>
-                social.id === id ? { ...social, [field]: value } : social
-            ) || [],
+            localizedContactInfo: {
+                ...settings.localizedContactInfo,
+                [activeTab]: {
+                    ...settings.localizedContactInfo?.[activeTab],
+                    [field]: value,
+                },
+            },
         });
     };
 
-    // Remove social link
-    const handleRemoveSocial = (id: number) => {
+    // Add localized social link
+    const handleAddLocalizedSocial = () => {
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        const newId = currentSocials.length ? Math.max(...currentSocials.map(s => s.id)) + 1 : 1;
         setSettings({
             ...settings,
-            socials: settings.socials?.filter(social => social.id !== id) || [],
+            localizedSocials: {
+                ...settings.localizedSocials,
+                [activeTab]: [...currentSocials, { id: newId, platform: '', url: '' }],
+            },
+        });
+    };
+
+    // Update localized social link
+    const handleUpdateLocalizedSocial = (id: number, field: 'platform' | 'url', value: string) => {
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        setSettings({
+            ...settings,
+            localizedSocials: {
+                ...settings.localizedSocials,
+                [activeTab]: currentSocials.map(social =>
+                    social.id === id ? { ...social, [field]: value } : social
+                ),
+            },
+        });
+    };
+
+    // Remove localized social link
+    const handleRemoveLocalizedSocial = (id: number) => {
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        setSettings({
+            ...settings,
+            localizedSocials: {
+                ...settings.localizedSocials,
+                [activeTab]: currentSocials.filter(social => social.id !== id),
+            },
         });
     };
 
@@ -311,10 +372,29 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                 <Mail size={20} className="text-primary" />
                                 Contact Information
                             </div>
+
+                            {/* Language Tabs */}
+                            <div className="flex gap-2 mb-6">
+                                {AVAILABLE_LOCALES.map((loc) => (
+                                    <button
+                                        key={loc.code}
+                                        onClick={() => setActiveTab(loc.code)}
+                                        className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${
+                                            activeTab === loc.code
+                                                ? 'bg-primary text-white'
+                                                : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
+                                        }`}
+                                    >
+                                        <span className="mr-1">{loc.flag}</span>
+                                        {loc.code.toUpperCase()}
+                                    </button>
+                                ))}
+                            </div>
+
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div className="space-y-2">
                                     <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                        Contact Email
+                                        Contact Email (global)
                                     </label>
                                     <input
                                         type="email"
@@ -326,12 +406,12 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                 </div>
                                 <div className="space-y-2">
                                     <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                        Phone Number
+                                        Phone Number ({activeTab.toUpperCase()})
                                     </label>
                                     <input
                                         type="tel"
-                                        value={settings.phoneNumber || ''}
-                                        onChange={(e) => setSettings({ ...settings, phoneNumber: e.target.value })}
+                                        value={settings.localizedContactInfo?.[activeTab]?.phoneNumber || settings.phoneNumber || ''}
+                                        onChange={(e) => handleUpdateLocalizedContact('phoneNumber', e.target.value)}
                                         placeholder="+31 6 12345678"
                                         className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text"
                                     />
@@ -339,11 +419,11 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             </div>
                             <div className="mt-6 space-y-2">
                                 <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                    Physical Address
+                                    Physical Address ({activeTab.toUpperCase()})
                                 </label>
                                 <textarea
-                                    value={settings.physicalAddress || ''}
-                                    onChange={(e) => setSettings({ ...settings, physicalAddress: e.target.value })}
+                                    value={settings.localizedContactInfo?.[activeTab]?.physicalAddress || settings.physicalAddress || ''}
+                                    onChange={(e) => handleUpdateLocalizedContact('physicalAddress', e.target.value)}
                                     placeholder="Street address, City, Country"
                                     rows={2}
                                     className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none"
@@ -351,23 +431,44 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             </div>
                         </section>
 
-                        {/* Social Links */}
+                        {/* Social Links (Localized) */}
                         <section className="bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border">
                             <div className="flex items-center justify-between border-b border-dashboard-border pb-4 mb-6">
                                 <div className="flex items-center gap-2 font-bold text-dashboard-text">
                                     <Globe size={20} className="text-primary" />
-                                    Social Links
+                                    Social Links ({activeTab.toUpperCase()})
                                 </div>
                                 <button
-                                    onClick={handleAddSocial}
+                                    onClick={handleAddLocalizedSocial}
                                     className="px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all"
                                 >
                                     Add Social
                                 </button>
                             </div>
+
+                            {/* Language Tabs for Socials */}
+                            <div className="flex gap-2 mb-6">
+                                {AVAILABLE_LOCALES.map((loc) => (
+                                    <button
+                                        key={loc.code}
+                                        onClick={() => setActiveTab(loc.code)}
+                                        className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${
+                                            activeTab === loc.code
+                                                ? 'bg-primary text-white'
+                                                : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
+                                        }`}
+                                    >
+                                        <span className="mr-1">{loc.flag}</span>
+                                        {loc.code.toUpperCase()}
+                                    </button>
+                                ))}
+                            </div>
+
                             <div className="space-y-4">
-                                {settings.socials && settings.socials.length > 0 ? (
-                                    settings.socials.map((social) => {
+                                {(() => {
+                                    const currentSocials = settings.localizedSocials?.[activeTab] || [];
+                                    return currentSocials.length > 0 ? (
+                                        currentSocials.map((social) => {
                                         const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
                                         return (
                                             <div key={social.id} className="flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border">
@@ -376,7 +477,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                                 </div>
                                                 <select
                                                     value={social.platform}
-                                                    onChange={(e) => handleUpdateSocial(social.id, 'platform', e.target.value)}
+                                                    onChange={(e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value)}
                                                     className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
                                                 >
                                                     <option value="">Select Platform</option>
@@ -387,12 +488,12 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                                 <input
                                                     type="url"
                                                     value={social.url}
-                                                    onChange={(e) => handleUpdateSocial(social.id, 'url', e.target.value)}
+                                                    onChange={(e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value)}
                                                     placeholder="https://..."
                                                     className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
                                                 />
                                                 <button
-                                                    onClick={() => handleRemoveSocial(social.id)}
+                                                    onClick={() => handleRemoveLocalizedSocial(social.id)}
                                                     className="px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors"
                                                 >
                                                     Remove
@@ -402,9 +503,10 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                     })
                                 ) : (
                                     <p className="text-sm text-dashboard-text-secondary text-center py-8">
-                                        No social links added yet. Click "Add Social" to get started.
+                                        No social links added for {activeTab.toUpperCase()}. Click "Add Social" to get started.
                                     </p>
-                                )}
+                                );
+                                })()}
                             </div>
                         </section>
                     </div>