@jhits/plugin-website 0.0.1

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@jhits/plugin-website",
+  "version": "0.0.1",
+  "description": "Website management and configuration plugin for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "@jhits/plugin-core": "^0.0.1",
+    "lucide-react": "^0.562.0",
+    "mongodb": "^7.0.0",
+    "next-auth": "^4.24.13",
+    "react-icons": "^5.5.0"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.27",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ]
+}

package/src/api/handler.ts

@@ -0,0 +1,157 @@
+/**
+ * Website Settings API Handler
+ * Handles GET and POST requests for website settings
+ */
+
+'use server';
+
+import { NextRequest, NextResponse } from 'next/server';
+import { WebsiteApiConfig } from '../types/settings';
+
+// Re-export for router
+export type { WebsiteApiConfig } from '../types/settings';
+
+/**
+ * GET /api/plugin-website/settings - Get website settings
+ */
+export async function GET_SETTINGS(
+    req: NextRequest,
+    config: WebsiteApiConfig
+): Promise<NextResponse> {
+    try {
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const settings = db.collection('settings');
+
+        const siteConfig = await settings.findOne({ identifier: 'site_config' });
+        
+        if (!siteConfig) {
+            // Return default settings if none exist
+            return NextResponse.json({
+                identifier: 'site_config',
+                siteName: '',
+                siteTagline: '',
+                siteDescription: '',
+                keywords: '',
+                contactEmail: '',
+                phoneNumber: '',
+                physicalAddress: '',
+                smtpUser: '',
+                maintenanceMode: false,
+                launch_date: '',
+                socials: [],
+            });
+        }
+
+        // Convert launch_date from Date to ISO string if it exists
+        const responseData: any = { ...siteConfig };
+        if (responseData.launch_date instanceof Date) {
+            responseData.launch_date = responseData.launch_date.toISOString();
+        } else if (responseData.launch_date) {
+            // If it's already a string, keep it as is
+            responseData.launch_date = responseData.launch_date;
+        } else {
+            responseData.launch_date = '';
+        }
+
+        return NextResponse.json(responseData);
+    } catch (error: any) {
+        console.error('[WebsiteAPI] GET_SETTINGS error:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch settings', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-website/settings - Update website settings
+ */
+export async function POST_SETTINGS(
+    req: NextRequest,
+    config: WebsiteApiConfig
+): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId?.(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await req.json();
+        console.log('[WebsiteAPI] POST_SETTINGS received body:', {
+            launch_date: body.launch_date,
+            launch_date_type: typeof body.launch_date,
+            has_launch_date: 'launch_date' in body,
+            body_keys: Object.keys(body),
+        });
+        
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const settings = db.collection('settings');
+
+        // Remove _id and launch_date from updateData (we'll handle launch_date separately)
+        const { _id, launch_date, ...updateData } = body;
+
+        // Prepare base update operations
+        const updateOps: any = {
+            $set: {
+                identifier: 'site_config',
+                ...updateData,
+                updatedAt: new Date(),
+            }
+        };
+
+        // Handle launch_date separately
+        if (launch_date !== undefined && launch_date !== null && launch_date !== '') {
+            // Convert launch_date from datetime-local string to Date if provided
+            const date = new Date(launch_date);
+            console.log('[WebsiteAPI] Date conversion:', {
+                input: launch_date,
+                parsed: date,
+                isValid: !isNaN(date.getTime()),
+                iso: !isNaN(date.getTime()) ? date.toISOString() : 'invalid',
+            });
+            
+            if (!isNaN(date.getTime())) {
+                updateOps.$set.launch_date = date;
+                console.log('[WebsiteAPI] Setting launch_date to:', date.toISOString());
+            } else {
+                console.warn('[WebsiteAPI] Invalid date, removing launch_date field');
+                updateOps.$unset = { launch_date: '' };
+            }
+        } else {
+            // Remove launch_date field if it's empty, undefined, or null
+            console.log('[WebsiteAPI] launch_date is empty/undefined, removing field');
+            updateOps.$unset = { launch_date: '' };
+        }
+
+        console.log('[WebsiteAPI] Update operations:', JSON.stringify(updateOps, (key, value) => {
+            if (value instanceof Date) {
+                return value.toISOString();
+            }
+            return value;
+        }, 2));
+
+        // Upsert settings
+        const result = await settings.updateOne(
+            { identifier: 'site_config' },
+            updateOps,
+            { upsert: true }
+        );
+        
+        console.log('[WebsiteAPI] Update result:', {
+            matchedCount: result.matchedCount,
+            modifiedCount: result.modifiedCount,
+            upsertedCount: result.upsertedCount,
+        });
+
+        return NextResponse.json({ success: true, message: 'Settings updated successfully' });
+    } catch (error: any) {
+        console.error('[WebsiteAPI] POST_SETTINGS error:', error);
+        return NextResponse.json(
+            { error: 'Failed to update settings', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api/router.ts

@@ -0,0 +1,47 @@
+/**
+ * Website Plugin API Router
+ * Routes API requests to appropriate handlers
+ */
+
+'use server';
+
+import { NextRequest, NextResponse } from 'next/server';
+import { WebsiteApiConfig } from '../types/settings';
+import { GET_SETTINGS, POST_SETTINGS } from './handler';
+
+/**
+ * Handle website API requests
+ */
+export async function handleWebsiteApi(
+    req: NextRequest,
+    path: string[],
+    config: WebsiteApiConfig
+): Promise<NextResponse> {
+    const method = req.method;
+    const route = path[0] || '';
+
+    try {
+        // Route: /api/plugin-website/settings
+        if (route === 'settings') {
+            if (method === 'GET') {
+                return await GET_SETTINGS(req, config);
+            }
+            if (method === 'POST' || method === 'PUT') {
+                return await POST_SETTINGS(req, config);
+            }
+        }
+
+        // Method not allowed
+        return NextResponse.json(
+            { error: `Method ${method} not allowed for route: ${route || '/'}` },
+            { status: 405 }
+        );
+    } catch (error: any) {
+        console.error('[WebsiteApiRouter] Error:', error);
+        return NextResponse.json(
+            { error: error.message || 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/index.server.ts

@@ -0,0 +1,10 @@
+/**
+ * Plugin Website - Server-Only Entry Point
+ * This file exports only server-side API handlers
+ * Used by the dynamic plugin router via @jhits/plugin-website/server
+ */
+
+export { handleWebsiteApi as handleApi } from './api/router';
+export { handleWebsiteApi } from './api/router'; // Keep original export for backward compatibility
+export type { WebsiteApiConfig } from './types/settings';
+

package/src/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * Plugin Website - Client Entry Point
+ * Main settings management interface for website configuration
+ */
+
+'use client';
+
+import React from 'react';
+import { SettingsView } from './views/SettingsView';
+
+export interface PluginProps {
+    subPath: string[];
+    siteId: string;
+    locale: string;
+}
+
+export default function WebsitePlugin({ subPath, siteId, locale }: PluginProps) {
+    const route = subPath[0] || 'settings';
+
+    switch (route) {
+        case 'settings':
+            return <SettingsView siteId={siteId} locale={locale} />;
+        default:
+            return <SettingsView siteId={siteId} locale={locale} />;
+    }
+}
+
+// Export for use as default
+export { WebsitePlugin as Index };
+

package/src/types/settings.ts

@@ -0,0 +1,36 @@
+/**
+ * Website Settings Types
+ */
+
+export interface WebsiteSettings {
+    identifier: string;
+    siteName?: string;
+    siteTagline?: string;
+    siteDescription?: string;
+    keywords?: string;
+    contactEmail?: string;
+    phoneNumber?: string;
+    physicalAddress?: string;
+    smtpUser?: string;
+    maintenanceMode?: boolean;
+    launch_date?: string;
+    socials?: SocialLink[];
+    updatedAt?: Date;
+    createdAt?: Date;
+}
+
+export interface SocialLink {
+    id: number;
+    platform: string;
+    url: string;
+}
+
+export interface WebsiteApiConfig {
+    getDb: () => Promise<{ db: () => any }>;
+    getUserId?: (req: any) => Promise<string | null>;
+    mongoClient?: Promise<any>;
+    authOptions?: any;
+    jwtSecret?: string;
+    [key: string]: any; // Allow additional config properties
+}
+

package/src/views/SettingsView.tsx

@@ -0,0 +1,519 @@
+/**
+ * Website Settings View
+ * Main interface for managing website settings
+ */
+
+'use client';
+
+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 { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
+
+const AVAILABLE_PLATFORMS = [
+    { name: 'Instagram', icon: <FaInstagram size={18} /> },
+    { name: 'Facebook', icon: <FaFacebook size={18} /> },
+    { name: 'Twitter', icon: <FaXTwitter size={18} /> },
+    { name: 'Pinterest', icon: <FaPinterest size={18} /> },
+    { name: 'LinkedIn', icon: <FaLinkedin size={18} /> },
+    { name: 'TikTok', icon: <FaTiktok size={18} /> },
+];
+
+export interface SettingsViewProps {
+    siteId: string;
+    locale: string;
+}
+
+export function SettingsView({ siteId, locale }: SettingsViewProps) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [showSuccess, setShowSuccess] = useState(false);
+    const [settings, setSettings] = useState<WebsiteSettings>({
+        identifier: 'site_config',
+        siteName: '',
+        siteTagline: '',
+        siteDescription: '',
+        keywords: '',
+        contactEmail: '',
+        phoneNumber: '',
+        physicalAddress: '',
+        smtpUser: '',
+        maintenanceMode: false,
+        launch_date: '',
+        socials: [],
+    });
+
+    // 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) {
+                    // Convert launch_date to datetime-local format if it exists
+                    let launchDate = '';
+                    if (data.launch_date) {
+                        // If it's a Date object or ISO string, convert to datetime-local format
+                        const date = new Date(data.launch_date);
+                        if (!isNaN(date.getTime())) {
+                            // Format as YYYY-MM-DDTHH:mm for datetime-local input (24-hour format)
+                            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}`;
+                        } else {
+                            // If it's already a string in the correct format, use it
+                            // Ensure it has time component, default to 00:00 if missing
+                            if (data.launch_date.includes('T') && data.launch_date.split('T')[1]) {
+                                launchDate = data.launch_date;
+                            } else if (data.launch_date.includes('T')) {
+                                launchDate = `${data.launch_date.split('T')[0]}T00:00`;
+                            } else {
+                                launchDate = `${data.launch_date}T00:00`;
+                            }
+                        }
+                    }
+
+                    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 || [],
+                    });
+                }
+            } 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);
+
+            // Get the latest state from ref
+            const currentSettings = settingsRef.current;
+
+            // Prepare settings for API - ensure launch_date is properly formatted
+            const settingsToSave: any = {
+                ...currentSettings,
+            };
+
+            // Handle launch_date - keep it if it has a value, otherwise don't include it
+            if (currentSettings.launch_date && currentSettings.launch_date.trim() !== '') {
+                settingsToSave.launch_date = currentSettings.launch_date;
+            } else {
+                // Don't include launch_date if it's empty
+                delete settingsToSave.launch_date;
+            }
+
+            console.log('[SettingsView] Saving settings:', {
+                launch_date: settingsToSave.launch_date,
+                launch_date_type: typeof settingsToSave.launch_date,
+                has_launch_date: 'launch_date' in settingsToSave,
+                currentState_launch_date: currentSettings.launch_date,
+                all_keys: Object.keys(settingsToSave),
+            });
+
+            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: any) {
+            console.error('Failed to save settings:', error);
+            alert(error.message || 'Failed to save settings');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    // Add social link
+    const handleAddSocial = () => {
+        const newId = settings.socials?.length ? Math.max(...settings.socials.map(s => s.id)) + 1 : 1;
+        setSettings({
+            ...settings,
+            socials: [...(settings.socials || []), { id: newId, platform: '', url: '' }],
+        });
+    };
+
+    // Update social link
+    const handleUpdateSocial = (id: number, field: 'platform' | 'url', value: string) => {
+        setSettings({
+            ...settings,
+            socials: settings.socials?.map(social =>
+                social.id === id ? { ...social, [field]: value } : social
+            ) || [],
+        });
+    };
+
+    // Remove social link
+    const handleRemoveSocial = (id: number) => {
+        setSettings({
+            ...settings,
+            socials: settings.socials?.filter(social => social.id !== id) || [],
+        });
+    };
+
+    if (isLoading) {
+        return (
+            <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
+                <div className="text-center">
+                    <RefreshCw className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading settings...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="h-full rounded-[2.5rem] w-full bg-dashboard-card text-dashboard-text overflow-y-auto">
+            <div className="max-w-6xl mx-auto p-8">
+                {/* Header */}
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                            Website Settings
+                        </h1>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                            Manage your website identity, contact information, and social links
+                        </p>
+                    </div>
+                    <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 ${isSaving
+                                ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                : showSuccess
+                                    ? 'bg-green-600 text-white'
+                                    : 'bg-primary text-white hover:bg-primary/90'
+                            }`}
+                    >
+                        {isSaving ? (
+                            <>
+                                <RefreshCw className="w-4 h-4 animate-spin" />
+                                Saving...
+                            </>
+                        ) : showSuccess ? (
+                            <>
+                                <Settings2 className="w-4 h-4" />
+                                Saved!
+                            </>
+                        ) : (
+                            <>
+                                <Save className="w-4 h-4" />
+                                Save Settings
+                            </>
+                        )}
+                    </button>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    {/* Main Content */}
+                    <div className="lg:col-span-2 space-y-8">
+                        {/* SEO & Website Identity */}
+                        <section className="bg-dashboard-sidebar p-8 rounded-3xl border border-dashboard-border">
+                            <div className="flex items-center gap-2 font-bold text-neutral-950 dark:text-white border-b border-dashboard-border pb-4 mb-6">
+                                <Search size={20} className="text-primary" />
+                                Website Identity & SEO
+                            </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-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                        Website Name
+                                    </label>
+                                    <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"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                        Website Tagline
+                                    </label>
+                                    <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"
+                                    />
+                                </div>
+                            </div>
+                            <div className="mt-6 space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                    Website Description
+                                </label>
+                                <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"
+                                />
+                            </div>
+                            <div className="mt-6 space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                    Keywords (comma-separated)
+                                </label>
+                                <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"
+                                />
+                            </div>
+                        </section>
+
+                        {/* Contact Information */}
+                        <section className="bg-dashboard-sidebar p-8 rounded-3xl border border-dashboard-border">
+                            <div className="flex items-center gap-2 font-bold text-neutral-950 dark:text-white border-b border-dashboard-border pb-4 mb-6">
+                                <Mail size={20} className="text-primary" />
+                                Contact Information
+                            </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-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                        Contact Email
+                                    </label>
+                                    <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"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                        Phone Number
+                                    </label>
+                                    <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"
+                                    />
+                                </div>
+                            </div>
+                            <div className="mt-6 space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest">
+                                    Physical Address
+                                </label>
+                                <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"
+                                />
+                            </div>
+                        </section>
+
+                        {/* Social Links */}
+                        <section className="bg-dashboard-sidebar 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-neutral-950 dark:text-white">
+                                    <Globe size={20} className="text-primary" />
+                                    Social Links
+                                </div>
+                                <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"
+                                >
+                                    Add Social
+                                </button>
+                            </div>
+                            <div className="space-y-4">
+                                {settings.socials && settings.socials.length > 0 ? (
+                                    settings.socials.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">
+                                                <div className="flex-shrink-0 text-neutral-500 dark:text-neutral-400">
+                                                    {platform?.icon || <Globe size={18} />}
+                                                </div>
+                                                <select
+                                                    value={social.platform}
+                                                    onChange={(e) => handleUpdateSocial(social.id, 'platform', e.target.value)}
+                                                    className="flex-1 px-4 py-2 bg-dashboard-sidebar border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
+                                                >
+                                                    <option value="">Select Platform</option>
+                                                    {AVAILABLE_PLATFORMS.map(p => (
+                                                        <option key={p.name} value={p.name}>{p.name}</option>
+                                                    ))}
+                                                </select>
+                                                <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-sidebar border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
+                                                />
+                                                <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"
+                                                >
+                                                    Remove
+                                                </button>
+                                            </div>
+                                        );
+                                    })
+                                ) : (
+                                    <p className="text-sm text-neutral-500 dark:text-neutral-400 text-center py-8">
+                                        No social links added yet. Click "Add Social" to get started.
+                                    </p>
+                                )}
+                            </div>
+                        </section>
+                    </div>
+
+                    {/* Sidebar */}
+                    <div className="space-y-8">
+                        {/* Maintenance Mode */}
+                        <section className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                            <div className="flex items-center gap-2 font-bold text-neutral-950 dark:text-white border-b border-dashboard-border pb-4 mb-6">
+                                <Settings2 size={18} className="text-primary" />
+                                Maintenance
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <label className="text-xs font-bold text-neutral-700 dark:text-neutral-300 block mb-1">
+                                        Maintenance Mode
+                                    </label>
+                                    <p className="text-[10px] text-neutral-500 dark:text-neutral-400">
+                                        Show maintenance page to visitors
+                                    </p>
+                                </div>
+                                <button
+                                    onClick={() => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode })}
+                                    className={`relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-700'
+                                        }`}
+                                >
+                                    <div className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'
+                                        }`} />
+                                </button>
+                            </div>
+                        </section>
+
+                        {/* Launch Date */}
+                        <section className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                            <div className="flex items-center gap-2 font-bold text-neutral-950 dark:text-white border-b border-dashboard-border pb-4 mb-6">
+                                <Calendar size={18} className="text-primary" />
+                                Launch Date
+                            </div>
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <label className="text-xs font-bold text-neutral-700 dark:text-neutral-300 block">
+                                        Date
+                                    </label>
+                                    <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';
+
+                                            const newLaunchDate = dateValue ? `${dateValue}T${currentTime}` : '';
+
+                                            console.log('[SettingsView] Date changed:', {
+                                                dateValue,
+                                                currentTime,
+                                                newLaunchDate,
+                                            });
+
+                                            setSettings(prev => ({
+                                                ...prev,
+                                                launch_date: newLaunchDate,
+                                            }));
+                                        }}
+                                        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"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-xs font-bold text-neutral-700 dark:text-neutral-300 block">
+                                        Time (24-hour format)
+                                    </label>
+                                    <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];
+
+                                            const newLaunchDate = timeValue ? `${currentDate}T${timeValue}` : '';
+
+                                            console.log('[SettingsView] Time changed:', {
+                                                timeValue,
+                                                currentDate,
+                                                newLaunchDate,
+                                            });
+
+                                            setSettings(prev => ({
+                                                ...prev,
+                                                launch_date: newLaunchDate,
+                                            }));
+                                        }}
+                                        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"
+                                    />
+                                </div>
+                                <p className="text-[10px] text-neutral-500 dark:text-neutral-400">
+                                    Used for countdown timers. Time defaults to 00:00 if not specified.
+                                </p>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+