@jhits/plugin-website 0.0.16 → 0.0.17

package/dist/views/SettingsView.js

@@ -1,270 +1,67 @@
 /**
  * Website Settings View
- * Main interface for managing website settings
+ * Refactored modular interface with sidebar navigation
  */
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { Save, RefreshCw, Globe, Globe2, Mail, Search, Settings2, Calendar, Plus, Trash2, X, Edit3 } 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 }) },
-    { name: 'Twitter', icon: _jsx(FaXTwitter, { size: 18 }) },
-    { name: 'Pinterest', icon: _jsx(FaPinterest, { size: 18 }) },
-    { name: 'LinkedIn', icon: _jsx(FaLinkedin, { size: 18 }) },
-    { name: 'TikTok', icon: _jsx(FaTiktok, { size: 18 }) },
-];
-function DomainLanguagesCard({ config, onEdit }) {
-    return (_jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsx("div", { className: "flex items-center justify-between border-b border-dashboard-border pb-4 mb-4", children: _jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text", children: [_jsx(Globe2, { size: 18, className: "text-primary" }), "Domain Languages"] }) }), _jsx("div", { className: "space-y-2", children: config && config.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: config.map((entry, index) => (_jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1.5 bg-dashboard-card rounded-full border border-dashboard-border text-xs", children: [_jsx("span", { className: "font-medium text-dashboard-text", children: entry.domain }), _jsx("span", { className: "text-dashboard-text-secondary", children: "\u2192" }), _jsx("span", { children: AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag }), _jsx("span", { className: "text-dashboard-text-secondary", children: entry.allowUserOverride ? '' : '🔒' })] }, index))) })) : (_jsx("p", { className: "text-xs text-dashboard-text-secondary", children: "No domain languages configured." })) }), _jsxs("button", { onClick: onEdit, className: "mt-4 w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors", children: [_jsx(Edit3, { size: 14 }), config?.length ? 'Edit Domains' : 'Add Domains'] })] }));
-}
-function DomainLanguagesModal({ isOpen, config, onSave, onClose, onSaveAndClose, isSaving = false }) {
-    const [tempConfig, setTempConfig] = useState(config);
-    const [expandedIndex, setExpandedIndex] = useState(null);
-    useEffect(() => {
-        setTempConfig(config);
-        setExpandedIndex(null);
-    }, [config, isOpen]);
-    if (!isOpen)
-        return null;
-    const handleAdd = () => {
-        setTempConfig([...tempConfig, { domain: '', locale: 'en', allowUserOverride: true }]);
-        setExpandedIndex(tempConfig.length);
-    };
-    const handleUpdate = (index, field, value) => {
-        const updated = [...tempConfig];
-        updated[index] = { ...updated[index], [field]: value };
-        setTempConfig(updated);
-    };
-    const handleRemove = (index) => {
-        setTempConfig(tempConfig.filter((_, i) => i !== index));
-        if (expandedIndex === index)
-            setExpandedIndex(null);
-    };
-    const toggleExpand = (index) => {
-        setExpandedIndex(expandedIndex === index ? null : index);
-    };
-    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", children: _jsxs("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border w-full max-w-lg max-h-[80vh] overflow-hidden flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between p-6 border-b border-dashboard-border", children: [_jsx("h2", { className: "text-xl font-bold text-dashboard-text", children: "Domain Languages" }), _jsx("button", { onClick: onClose, className: "p-2 text-dashboard-text-secondary hover:text-dashboard-text transition-colors", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-6 space-y-4", children: [tempConfig.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider", children: "Current Config" }), tempConfig.map((entry, index) => (_jsxs("div", { className: "bg-dashboard-card rounded-xl border border-dashboard-border overflow-hidden", children: [_jsxs("div", { onClick: () => toggleExpand(index), className: "w-full flex items-center justify-between p-3 text-left hover:bg-dashboard-border/50 transition-colors cursor-pointer", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-dashboard-text", children: entry.domain || '(no domain)' }), _jsx("span", { className: "text-dashboard-text-secondary", children: "\u2192" }), _jsx("span", { children: AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag }), entry.allowUserOverride === false && _jsx("span", { className: "text-dashboard-text-secondary", children: "\uD83D\uDD12" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: (e) => { e.stopPropagation(); handleRemove(index); }, className: "p-1 text-red-500 hover:bg-red-500/10 rounded transition-colors", title: "Remove", children: _jsx(Trash2, { size: 14 }) }), _jsx("span", { className: "text-dashboard-text-secondary text-xs", children: expandedIndex === index ? '▲' : '▼' })] })] }), expandedIndex === index && (_jsxs("div", { className: "p-3 pt-0 space-y-3 border-t border-dashboard-border", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider", children: "Domain" }), _jsx("input", { type: "text", value: entry.domain, onChange: (e) => handleUpdate(index, 'domain', e.target.value), placeholder: "example.com", className: "w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("label", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider", children: "Language" }), _jsx("select", { value: entry.locale, onChange: (e) => handleUpdate(index, 'locale', e.target.value), className: "w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm", children: AVAILABLE_LOCALES.map(loc => (_jsxs("option", { value: loc.code, children: [loc.flag, " ", loc.name] }, loc.code))) })] }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-[10px] text-dashboard-text-secondary", children: "Allow user to change" }), _jsx("button", { onClick: () => handleUpdate(index, 'allowUserOverride', !entry.allowUserOverride), className: `relative w-10 h-5 rounded-full transition-colors ${entry.allowUserOverride ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-600'}`, children: _jsx("div", { className: `absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${entry.allowUserOverride ? 'translate-x-5' : 'translate-x-0'}` }) })] })] }))] }, index)))] })), _jsxs("div", { className: "border-t border-dashboard-border pt-4", children: [_jsx("p", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider mb-3", children: "Add New Domain" }), _jsxs("button", { onClick: handleAdd, className: "w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-dashboard-border text-dashboard-text-secondary hover:border-primary hover:text-primary rounded-xl transition-colors", children: [_jsx(Plus, { size: 16 }), "Add Domain"] })] }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary text-center pt-2", children: "Configure which language to use per domain. E.g., botanicsandyou.nl \u2192 Dutch, botanicsandyou.se \u2192 Swedish." })] }), _jsxs("div", { className: "flex gap-3 p-6 border-t border-dashboard-border", children: [_jsx("button", { onClick: onClose, className: "flex-1 px-4 py-2 bg-dashboard-card text-dashboard-text rounded-xl text-sm font-bold hover:bg-dashboard-border transition-colors", children: "Cancel" }), _jsx("button", { onClick: () => onSaveAndClose(tempConfig), disabled: isSaving, className: "flex-1 px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-colors disabled:opacity-50", children: isSaving ? 'Saving...' : 'Save' })] })] }) }));
-}
-// =============================================================================
-// Main Component
-// =============================================================================
-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 [showDomainModal, setShowDomainModal] = useState(false);
-    const [settings, setSettings] = useState({
-        identifier: 'site_config',
-        siteName: '',
-        siteTagline: '',
-        siteDescription: '',
-        keywords: '',
-        contactEmail: '',
-        phoneNumber: '',
-        physicalAddress: '',
-        smtpUser: '',
-        maintenanceMode: false,
-        launch_date: '',
-        socials: [],
-        localizedContactInfo: {
-            en: { physicalAddress: '', phoneNumber: '' },
-            sv: { physicalAddress: '', phoneNumber: '' },
-            nl: { physicalAddress: '', phoneNumber: '' },
-        },
-        localizedSocials: {
-            en: [],
-            sv: [],
-            nl: [],
-        },
-        domainLocaleConfig: [],
-    });
-    // Fetch settings on load
-    useEffect(() => {
-        const fetchSettings = async () => {
-            try {
-                setIsLoading(true);
-                const response = await fetch('/api/plugin-website/settings', { credentials: 'include' });
-                if (!response.ok)
-                    throw new Error('Failed to fetch settings');
-                const data = await response.json();
-                if (data.siteName !== undefined) {
-                    let launchDate = '';
-                    if (data.launch_date) {
-                        const date = new Date(data.launch_date);
-                        if (!isNaN(date.getTime())) {
-                            const year = date.getFullYear();
-                            const month = String(date.getMonth() + 1).padStart(2, '0');
-                            const day = String(date.getDate()).padStart(2, '0');
-                            const hours = String(date.getHours()).padStart(2, '0');
-                            const minutes = String(date.getMinutes()).padStart(2, '0');
-                            launchDate = `${year}-${month}-${day}T${hours}:${minutes}`;
-                        }
-                    }
-                    setSettings({
-                        identifier: 'site_config',
-                        siteName: data.siteName || '',
-                        siteTagline: data.siteTagline || '',
-                        siteDescription: data.siteDescription || '',
-                        keywords: data.keywords || '',
-                        contactEmail: data.contactEmail || '',
-                        phoneNumber: data.phoneNumber || '',
-                        physicalAddress: data.physicalAddress || '',
-                        smtpUser: data.smtpUser || '',
-                        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: [] },
-                        domainLocaleConfig: data.domainLocaleConfig || [],
-                    });
-                }
-            }
-            catch (error) {
-                console.error('Failed to load settings:', error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        fetchSettings();
-    }, []);
-    // Use ref to always get latest state
-    const settingsRef = useRef(settings);
-    useEffect(() => { settingsRef.current = settings; }, [settings]);
-    // Save settings
-    const handleSave = async () => {
-        try {
-            setIsSaving(true);
-            const currentSettings = settingsRef.current;
-            const settingsToSave = { ...currentSettings };
-            if (currentSettings.launch_date && currentSettings.launch_date.trim() !== '') {
-                settingsToSave.launch_date = currentSettings.launch_date;
-            }
-            else {
-                delete settingsToSave.launch_date;
-            }
-            const response = await fetch('/api/plugin-website/settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify(settingsToSave),
-            });
-            if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.error || 'Failed to save settings');
-            }
-            setShowSuccess(true);
-            setTimeout(() => setShowSuccess(false), 3000);
-        }
-        catch (error) {
-            console.error('Failed to save settings:', error);
-            alert(error.message || 'Failed to save settings');
-        }
-        finally {
-            setIsSaving(false);
-        }
-    };
-    // Update localized contact info
-    const handleUpdateLocalizedContact = (field, value) => {
-        setSettings({
-            ...settings,
-            localizedContactInfo: {
-                ...settings.localizedContactInfo,
-                [activeTab]: { ...settings.localizedContactInfo?.[activeTab], [field]: value },
-            },
-        });
-    };
-    // Social links handlers
-    const handleAddLocalizedSocial = () => {
-        const currentSocials = settings.localizedSocials?.[activeTab] || [];
-        const newId = currentSocials.length ? Math.max(...currentSocials.map(s => s.id)) + 1 : 1;
-        setSettings({
-            ...settings,
-            localizedSocials: {
-                ...settings.localizedSocials,
-                [activeTab]: [...currentSocials, { id: newId, platform: '', url: '' }],
-            },
-        });
-    };
-    const handleUpdateLocalizedSocial = (id, field, value) => {
-        const currentSocials = settings.localizedSocials?.[activeTab] || [];
-        setSettings({
-            ...settings,
-            localizedSocials: {
-                ...settings.localizedSocials,
-                [activeTab]: currentSocials.map(s => s.id === id ? { ...s, [field]: value } : s),
-            },
-        });
-    };
-    const handleRemoveLocalizedSocial = (id) => {
-        const currentSocials = settings.localizedSocials?.[activeTab] || [];
-        setSettings({
-            ...settings,
-            localizedSocials: {
-                ...settings.localizedSocials,
-                [activeTab]: currentSocials.filter(s => s.id !== id),
-            },
-        });
-    };
-    // Domain locale handlers
-    const openDomainModal = () => setShowDomainModal(true);
-    const closeDomainModal = () => setShowDomainModal(false);
-    const saveDomainConfig = (config) => {
-        setSettings({ ...settings, domainLocaleConfig: config });
-        setShowDomainModal(false);
-    };
-    const saveDomainConfigAndClose = async (config) => {
-        setSettings({ ...settings, domainLocaleConfig: config });
-        setShowDomainModal(false);
-        // Immediately save to API
-        try {
-            const response = await fetch('/api/plugin-website/settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ ...settings, domainLocaleConfig: config }),
-            });
-            if (response.ok) {
-                setShowSuccess(true);
-                setTimeout(() => setShowSuccess(false), 3000);
-            }
-        }
-        catch (error) {
-            console.error('Failed to save domain config:', error);
-        }
-    };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Save, RefreshCw, Settings2, Globe, Search, Mail, Check, Lock as LockIcon } from 'lucide-react';
+import { useWebsiteSettings } from './Settings/hooks/useWebsiteSettings';
+import { FlagIcon } from './Settings/components/FlagIcon';
+// Sub-components
+import { SeoIdentitySection } from './Settings/components/SeoIdentitySection';
+import { LocalizedContentSection } from './Settings/components/LocalizedContentSection';
+import { LocalesManagementCard } from './Settings/components/LocalesManagementCard';
+import { StatusSection } from './Settings/components/StatusSection';
+import { LaunchDateSection } from './Settings/components/LaunchDateSection';
+import { DomainLanguagesCard } from './Settings/components/DomainLanguagesCard';
+import { DomainLanguagesModal } from './Settings/components/DomainLanguagesModal';
+export function SettingsView({ siteId }) {
+    const [currentTab, setCurrentTab] = useState('general');
+    const { settings, isLoading, isSaving, isDirty, showSuccess, activeTab, setActiveTab, activeLocales, showDomainModal, setShowDomainModal, handleUpdateSettings, handleUpdateLocalizedIdentity, handleUpdateLocalizedContact, handleAddLocalizedSocial, handleUpdateLocalizedSocial, handleRemoveLocalizedSocial, handleUpdateLocales, handleSave, handleReset, saveDomainConfigAndClose } = useWebsiteSettings(siteId);
     if (isLoading) {
         return (_jsx("div", { className: "h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx(RefreshCw, { className: "w-8 h-8 animate-spin text-primary mx-auto mb-4" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Loading settings..." })] }) }));
     }
-    return (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-dashboard-card p-8 overflow-y-auto", children: [_jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Website Settings" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Manage your website identity, contact information, and social links" })] }), _jsx("button", { onClick: handleSave, disabled: isSaving, className: `inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving ? '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"] }), _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 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] : '00:00';
-                                                                    setSettings(prev => ({ ...prev, launch_date: dateValue ? `${dateValue}T${currentTime}` : '' }));
-                                                                }, className: "w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Time (24-hour format)" }), _jsx("input", { type: "time", step: "60", value: settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00', onChange: (e) => {
-                                                                    const timeValue = e.target.value;
-                                                                    const currentDate = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[0] : new Date().toISOString().split('T')[0];
-                                                                    setSettings(prev => ({ ...prev, launch_date: timeValue ? `${currentDate}T${timeValue}` : '' }));
-                                                                }, className: "w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" })] }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Used for countdown timers." })] })] }), _jsx(DomainLanguagesCard, { config: settings.domainLocaleConfig || [], onEdit: openDomainModal })] })] })] }), _jsx(DomainLanguagesModal, { isOpen: showDomainModal, config: settings.domainLocaleConfig || [], onSave: saveDomainConfig, onSaveAndClose: saveDomainConfigAndClose, onClose: closeDomainModal, isSaving: isSaving })] }));
+    const hasLocales = settings.supportedLocales && settings.supportedLocales.length > 0;
+    const navigationItems = [
+        { id: 'general', label: 'General', icon: Settings2, description: 'Status & Launch Date', localized: false },
+        { id: 'localization', label: 'Localization', icon: Globe, description: 'Languages & Domains', localized: false },
+        { id: 'seo', label: 'Identity & SEO', icon: Search, description: 'Site Name & Meta', localized: true },
+        { id: 'contact', label: 'Contact & Social', icon: Mail, description: 'Address & Links', localized: true },
+    ];
+    const renderMissingLocalesState = () => (_jsx("div", { className: "h-full flex items-center justify-center p-12", children: _jsxs("div", { className: "max-w-md w-full text-center space-y-8", children: [_jsx("div", { className: "size-24 bg-primary/15 rounded-[2rem] flex items-center justify-center mx-auto shadow-2xl shadow-primary/10 border border-primary/30", children: _jsx(Globe, { size: 48, className: "text-primary animate-pulse" }) }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-3xl font-bold text-dashboard-text tracking-tight", children: "Configuration Required" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary font-medium leading-relaxed opacity-80", children: "To manage localized content like site names and contact info, you first need to define which languages your website supports." })] }), _jsx("button", { onClick: () => setCurrentTab('localization'), className: "inline-flex items-center gap-3 px-8 py-4 bg-primary text-white rounded-2xl text-xs font-bold uppercase tracking-wider hover:bg-primary/90 transition-all shadow-lg shadow-primary/25 active:scale-95", children: "Setup Languages Now" })] }) }));
+    const renderContent = () => {
+        // If trying to access localized tab without locales, show prompt
+        const activeItem = navigationItems.find(i => i.id === currentTab);
+        if (activeItem?.localized && !hasLocales) {
+            return renderMissingLocalesState();
+        }
+        switch (currentTab) {
+            case 'general':
+                return (_jsxs("div", { className: "space-y-10 max-w-3xl", children: [_jsx(StatusSection, { settings: settings, onUpdate: handleUpdateSettings }), _jsx(LaunchDateSection, { settings: settings, onUpdate: handleUpdateSettings })] }));
+            case 'localization':
+                return (_jsxs("div", { className: "space-y-10 max-w-3xl", children: [_jsx(LocalesManagementCard, { supportedLocales: settings.supportedLocales, onUpdate: handleUpdateLocales }), _jsx(DomainLanguagesCard, { config: settings.domainLocaleConfig || [], onEdit: () => setShowDomainModal(true) })] }));
+            case 'seo':
+                return (_jsx("div", { className: "max-w-3xl", children: _jsx(SeoIdentitySection, { settings: settings, activeTab: activeTab, onUpdateLocalized: handleUpdateLocalizedIdentity }) }));
+            case 'contact':
+                return (_jsx("div", { className: "max-w-3xl", children: _jsx(LocalizedContentSection, { settings: settings, activeTab: activeTab, onUpdateContact: handleUpdateLocalizedContact, onAddSocial: handleAddLocalizedSocial, onUpdateSocial: handleUpdateLocalizedSocial, onRemoveSocial: handleRemoveLocalizedSocial }) }));
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("div", { className: "absolute inset-0 w-full flex overflow-hidden bg-dashboard-bg/50", children: [_jsxs("aside", { className: "w-80 bg-dashboard-card/40 backdrop-blur-2xl border-r border-dashboard-border/60 flex flex-col p-6 flex-shrink-0 h-full", children: [_jsxs("div", { className: "mb-12 px-2 shrink-0 pt-8", children: [_jsxs("h1", { className: "text-3xl font-bold text-dashboard-text tracking-tight flex items-center gap-3", children: [_jsx("div", { className: "size-8 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/20", children: _jsx(Settings2, { size: 18, className: "text-white" }) }), "Settings"] }), _jsxs("div", { className: "flex items-center gap-2 mt-3 ml-11", children: [_jsx("p", { className: "text-[10px] font-bold text-primary/80 uppercase tracking-widest", children: "Website Engine" }), isDirty && (_jsx("span", { className: "flex size-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]", title: "Unsaved changes" }))] })] }), _jsx("nav", { className: "space-y-2 flex-1 overflow-y-auto custom-scrollbar pr-2", children: navigationItems.map((item) => {
+                            const Icon = item.icon;
+                            const isActive = currentTab === item.id;
+                            const isLocked = item.localized && !hasLocales;
+                            return (_jsxs("button", { onClick: () => !isLocked && setCurrentTab(item.id), className: `w-full flex items-center gap-4 p-4 rounded-2xl transition-all text-left group relative ${isActive
+                                    ? 'bg-primary text-white shadow-xl shadow-primary/25 border border-primary/20'
+                                    : 'hover:bg-primary/8 text-dashboard-text-secondary hover:text-primary border border-transparent'} ${isLocked ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`, children: [_jsx("div", { className: `flex items-center justify-center shrink-0 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`, children: _jsx(Icon, { size: 20, className: isActive ? 'text-white' : 'text-primary/60 group-hover:text-primary' }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: `block text-sm font-semibold tracking-tight truncate ${isActive ? 'text-white' : 'text-dashboard-text'}`, children: item.label }), isLocked && _jsx(LockIcon, { size: 12, className: "text-dashboard-text-secondary opacity-50" })] }), _jsx("span", { className: `text-[10px] font-medium opacity-70 truncate block mt-0.5 ${isActive ? 'text-white/80' : 'text-dashboard-text-secondary'}`, children: item.description })] })] }, item.id));
+                        }) }), _jsxs("div", { className: "mt-auto space-y-4 pt-8 border-t border-dashboard-border/40", children: [isDirty && (_jsx("button", { onClick: handleReset, className: "w-full py-3 rounded-xl text-xs font-bold text-dashboard-text-secondary hover:text-dashboard-text hover:bg-dashboard-card/60 transition-all active:scale-[0.98]", children: "Discard Changes" })), _jsxs("button", { onClick: handleSave, disabled: isSaving, className: `w-full flex items-center justify-center gap-3 py-4 rounded-2xl text-sm font-bold transition-all active:scale-[0.98] ${isSaving ? 'bg-neutral-200 dark:bg-neutral-800 text-neutral-400 cursor-not-allowed' :
+                                    showSuccess ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' :
+                                        isDirty ? 'bg-primary text-white hover:bg-primary/90 shadow-xl shadow-primary/30' :
+                                            'bg-neutral-100 dark:bg-neutral-800/40 text-dashboard-text-secondary opacity-40 cursor-not-allowed'}`, children: [isSaving ? _jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }) :
+                                        showSuccess ? _jsx(Check, { className: "w-4 h-4" }) :
+                                            _jsx(Save, { className: "w-4 h-4" }), isSaving ? 'Saving...' : showSuccess ? 'Saved!' : 'Save Changes'] })] })] }), _jsxs("main", { className: "flex-1 flex flex-col min-w-0 bg-transparent", children: [_jsxs("div", { className: "h-24 px-12 flex items-center justify-between shrink-0 z-10 bg-dashboard-bg/20 backdrop-blur-sm border-b border-dashboard-border/30", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx("div", { className: "h-10 w-1.5 bg-primary rounded-full shadow-[0_0_10px_rgba(var(--color-primary),0.3)]" }), _jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-dashboard-text tracking-tight leading-none mb-1.5", children: navigationItems.find(i => i.id === currentTab)?.label }), _jsx("p", { className: "text-xs font-medium text-dashboard-text-secondary opacity-80", children: navigationItems.find(i => i.id === currentTab)?.description })] })] }), (currentTab === 'seo' || currentTab === 'contact') && (_jsx("div", { className: "flex gap-1.5 p-1.5 bg-dashboard-card/50 backdrop-blur-md rounded-2xl border border-dashboard-border/40 shadow-sm", children: activeLocales.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-2.5 ${activeTab === loc.code
+                                        ? 'bg-primary text-white shadow-md'
+                                        : 'text-dashboard-text-secondary hover:text-dashboard-text hover:bg-dashboard-card/80'}`, children: [_jsx(FlagIcon, { code: loc.code, countryCode: loc.countryCode }), loc.code.toUpperCase()] }, loc.code))) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto px-12 pb-12 pt-6 custom-scrollbar", children: _jsx("div", { className: "max-w-4xl", children: renderContent() }) })] }), _jsx(DomainLanguagesModal, { isOpen: showDomainModal, config: settings.domainLocaleConfig || [], supportedLocales: activeLocales, onClose: () => setShowDomainModal(false), onSaveAndClose: saveDomainConfigAndClose, isSaving: isSaving })] }));
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@jhits/plugin-website",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Website management and configuration plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "import": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./src": {
       "types": "./src/index.tsx",
@@ -19,16 +19,19 @@
       "default": "./src/index.tsx"
     },
     "./server": {
-      "types": "./src/index.server.ts",
-      "import": "./src/index.server.ts",
-      "default": "./src/index.server.ts"
+      "types": "./dist/index.server.d.ts",
+      "import": "./dist/index.server.js",
+      "default": "./dist/index.server.js"
     }
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.34.0",
     "lucide-react": "^0.577.0",
     "mongodb": "^7.1.0",
     "next-auth": "^4.24.13",
     "react-icons": "^5.6.0",
+    "tailwind-merge": "^3.5.0",
     "@jhits/plugin-core": "0.0.10"
   },
   "peerDependencies": {
@@ -51,6 +54,7 @@
     "package.json"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "build:federation": "PLUGIN_NAME=pluginWebsite PLUGIN_DIR=$(pwd) npx webpack --config ../federation.webpack.config.js --mode production && PLUGIN_NAME=pluginWebsite PLUGIN_DIR=$(pwd) npx webpack --config ../federation.server.webpack.config.js --mode production"
   }
 }

package/src/api/handler.ts

@@ -55,12 +55,49 @@ export async function GET_SETTINGS(
 
         // Convert launch_date from Date to ISO string if it exists
         const responseData: any = { ...siteConfig };
+        let launchDateObj: Date | null = null;
+
         if (responseData.launch_date instanceof Date) {
-            responseData.launch_date = responseData.launch_date.toISOString();
+            launchDateObj = responseData.launch_date;
+            responseData.launch_date = (launchDateObj as Date).toISOString();
         } else if (responseData.launch_date) {
-            // If it's already a string, keep it as is
-            responseData.launch_date = responseData.launch_date;
-        } else {
+            const parsed = new Date(responseData.launch_date);
+            if (!isNaN(parsed.getTime())) {
+                launchDateObj = parsed;
+            }
+        }
+
+        // AUTO-RELEASE LOGIC:
+        // If there is a launch date and it has passed, force launched state to true 
+        // and maintenance to false regardless of what is in the DB.
+        if (launchDateObj && launchDateObj.getTime() <= Date.now()) {
+            responseData.launched = true;
+            responseData.maintenanceMode = false;
+
+            // PERSIST the auto-release back to database IMMEDIATELY
+            const currentLaunched = siteConfig.launched === true;
+            const currentMaintenance = siteConfig.maintenanceMode === true;
+            
+            if (!currentLaunched || currentMaintenance) {
+                try {
+                    console.log(`[WebsiteAPI] PERSISTING AUTO-RELEASE: ${siteConfig.siteName || 'site_config'}`);
+                    await settings.updateOne(
+                        { identifier: 'site_config' },
+                        { 
+                            $set: { 
+                                launched: true, 
+                                maintenanceMode: false,
+                                updatedAt: new Date()
+                            } 
+                        }
+                    );
+                } catch (e) {
+                    console.error('[WebsiteAPI] Failed to persist auto-release:', e);
+                }
+            }
+        }
+
+        if (!responseData.launch_date) {
             responseData.launch_date = '';
         }
 

package/src/types/settings.ts

@@ -2,11 +2,18 @@
  * Website Settings Types
  */
 
-export type SupportedLocale = 'en' | 'sv' | 'nl';
+// Basic supported locales, but can be expanded dynamically
+export type SupportedLocale = string;
+
+export interface LocaleDefinition {
+    code: string;
+    name: string;
+    countryCode: string;
+}
 
 export interface DomainLocaleConfig {
     domain: string;
-    locale: SupportedLocale;
+    locale: string;
     allowUserOverride?: boolean;
 }
 
@@ -15,6 +22,13 @@ export interface LocalizedContactInfo {
     phoneNumber?: string;
 }
 
+export interface LocalizedIdentity {
+    siteName?: string;
+    siteTagline?: string;
+    siteDescription?: string;
+    keywords?: string;
+}
+
 export interface LocalizedSocialLink {
     id: number;
     platform: string;
@@ -23,19 +37,21 @@ export interface LocalizedSocialLink {
 
 export interface WebsiteSettings {
     identifier: string;
-    siteName?: string;
-    siteTagline?: string;
-    siteDescription?: string;
-    keywords?: string;
-    contactEmail?: string;
-    phoneNumber?: string;
-    physicalAddress?: string;
+    // Global settings
+    contactEmail?: string; // Usually stays global for system notifications
     smtpUser?: string;
     maintenanceMode?: boolean;
+    launched?: boolean;
     launch_date?: string;
-    socials?: SocialLink[];
-    localizedContactInfo?: Partial<Record<SupportedLocale, LocalizedContactInfo>>;
-    localizedSocials?: Partial<Record<SupportedLocale, LocalizedSocialLink[]>>;
+    
+    // Supported languages
+    supportedLocales: LocaleDefinition[];
+    
+    // Localized data buckets
+    localizedIdentity: Record<string, LocalizedIdentity>;
+    localizedContactInfo: Record<string, LocalizedContactInfo>;
+    localizedSocials: Record<string, LocalizedSocialLink[]>;
+    
     domainLocaleConfig?: DomainLocaleConfig[];
     updatedAt?: Date;
     createdAt?: Date;