@jhits/plugin-website 0.0.16 → 0.0.17

package/src/views/Settings/components/ContactInfoSection.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Mail, Smartphone, MapPin, Globe } from 'lucide-react';
+import { WebsiteSettings, LocaleDefinition } from '../../../types/settings';
+import { FlagIcon } from './FlagIcon';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface ContactInfoSectionProps {
+    settings: WebsiteSettings;
+    activeTab: string;
+    onTabChange: (code: string) => void;
+    activeLocales: LocaleDefinition[];
+    onUpdate: (updates: Partial<WebsiteSettings>) => void;
+    onUpdateLocalized: (field: string, value: string) => void;
+}
+
+export function ContactInfoSection({
+    settings,
+    activeTab,
+    onTabChange,
+    activeLocales,
+    onUpdate,
+    onUpdateLocalized
+}: ContactInfoSectionProps) {
+    return (
+        <motion.section 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="bg-dashboard-card/50 border border-dashboard-border/40 p-8 rounded-[2rem] space-y-6 relative overflow-hidden"
+        >
+            <div className="absolute top-0 right-0 w-64 h-64 blur-3xl opacity-5 bg-primary pointer-events-none" />
+            
+            <div className="flex items-center gap-3 relative z-10 border-b border-dashboard-border/40 pb-4">
+                <div className="size-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Mail size={16} />
+                </div>
+                <h3 className="text-xl font-bold text-dashboard-text leading-none tracking-tight">
+                    Core <span className="text-primary">Intelligence</span>
+                </h3>
+            </div>
+            
+            <div className="flex gap-2 relative z-10 overflow-x-auto pb-2 custom-scrollbar">
+                {activeLocales.map((loc) => (
+                    <button
+                        key={loc.code}
+                        onClick={() => onTabChange(loc.code)}
+                        className={cn(
+                            "px-4 py-2 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all flex items-center gap-2 shrink-0 border",
+                            activeTab === loc.code 
+                                ? "bg-primary text-white border-primary shadow-lg shadow-primary/10" 
+                                : "bg-dashboard-bg/30 text-dashboard-text-secondary/50 border-dashboard-border/40 hover:border-primary/30"
+                        )}
+                    >
+                        <FlagIcon code={loc.code} countryCode={loc.countryCode} />
+                        <span>{loc.code}</span>
+                    </button>
+                ))}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
+                <div className="space-y-2">
+                    <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Global Sync Email</label>
+                    <div className="relative group">
+                        <Globe className="absolute left-5 top-1/2 -translate-y-1/2 size-4 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors" />
+                        <input
+                            type="email"
+                            value={settings.contactEmail || ''}
+                            onChange={(e) => onUpdate({ contactEmail: e.target.value })}
+                            placeholder="SYNC_EMAIL_ENDPOINT"
+                            className="w-full pl-12 pr-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                        />
+                    </div>
+                </div>
+                <div className="space-y-2">
+                    <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Regional Phone ({activeTab})</label>
+                    <div className="relative group">
+                        <Smartphone className="absolute left-5 top-1/2 -translate-y-1/2 size-4 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors" />
+                        <input
+                            type="tel"
+                            value={settings.localizedContactInfo?.[activeTab]?.phoneNumber || ''}
+                            onChange={(e) => onUpdateLocalized('phoneNumber', e.target.value)}
+                            placeholder="INITIALIZE_PHONE"
+                            className="w-full pl-12 pr-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                        />
+                    </div>
+                </div>
+            </div>
+            
+            <div className="space-y-2 relative z-10">
+                <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Geospatial Protocol ({activeTab})</label>
+                <div className="relative group">
+                    <MapPin className="absolute left-5 top-5 size-4 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors" />
+                    <textarea
+                        value={settings.localizedContactInfo?.[activeTab]?.physicalAddress || ''}
+                        onChange={(e) => onUpdateLocalized('physicalAddress', e.target.value)}
+                        placeholder="STREET_ADDRESS_ORCHESTRATION"
+                        rows={3}
+                        className="w-full pl-12 pr-6 py-4 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-medium leading-relaxed outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30 resize-none"
+                    />
+                </div>
+            </div>
+        </motion.section>
+    );
+}

package/src/views/Settings/components/DomainLanguagesCard.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Globe2, Edit3, ArrowRight, ShieldCheck } from 'lucide-react';
+import { DomainLocaleConfig } from '../../../types/settings';
+import { FlagIcon } from './FlagIcon';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface DomainLanguagesCardProps {
+    config: DomainLocaleConfig[];
+    onEdit: () => void;
+}
+
+export function DomainLanguagesCard({ config, onEdit }: DomainLanguagesCardProps) {
+    return (
+        <section className="space-y-8">
+            <div className="flex items-center gap-4">
+                <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Globe2 size={20} />
+                </div>
+                <h3 className="text-2xl lg:text-3xl font-bold text-dashboard-text leading-none tracking-tight">
+                    Domain <span className="text-primary">Strategy</span>
+                </h3>
+            </div>
+
+            <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="bg-dashboard-card/50 border border-dashboard-border/40 p-8 rounded-[2rem] relative overflow-hidden"
+            >
+                <div className="space-y-6">
+                    {config && config.length > 0 ? (
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            {config.map((entry, index) => (
+                                <motion.div 
+                                    initial={{ opacity: 0, scale: 0.95 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    transition={{ delay: index * 0.1 }}
+                                    key={index} 
+                                    className="flex items-center justify-between p-4 bg-dashboard-bg/30 border border-dashboard-border/40 rounded-xl group hover:border-primary/30 transition-all duration-500 shadow-sm"
+                                >
+                                    <div className="flex items-center gap-4">
+                                        <div className="size-10 rounded-lg bg-dashboard-card/50 flex items-center justify-center border border-dashboard-border/40 group-hover:bg-primary/10 group-hover:border-primary/20 transition-all duration-500 shadow-inner">
+                                            <FlagIcon code={entry.locale} />
+                                        </div>
+                                        <div className="flex flex-col">
+                                            <span className="text-sm font-bold text-dashboard-text/90 group-hover:text-primary transition-colors">{entry.domain}</span>
+                                            <div className="flex items-center gap-2 mt-0.5">
+                                                <ArrowRight size={10} className="text-primary opacity-40" />
+                                                <p className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-widest">
+                                                    Primary Region
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    {!entry.allowUserOverride && (
+                                        <div className="size-8 bg-dashboard-card/50 flex items-center justify-center text-dashboard-text-secondary/50 rounded-lg border border-dashboard-border/40" title="Locked to this language">
+                                            <ShieldCheck size={14} />
+                                        </div>
+                                    )}
+                                </motion.div>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="py-12 text-center bg-dashboard-card/30 border-dashed border border-dashboard-border/40 rounded-2xl">
+                            <p className="text-[10px] text-dashboard-text-secondary/40 font-bold uppercase tracking-[0.2em]">No domain-specific routing configured</p>
+                        </div>
+                    )}
+                </div>
+
+                <div className="mt-8 pt-8 border-t border-dashboard-border/40 flex flex-col items-center">
+                    <button
+                        onClick={onEdit}
+                        className="w-full max-w-sm relative group/btn flex items-center justify-center gap-4 px-8 py-3 bg-primary text-white rounded-xl text-[10px] font-bold uppercase tracking-[0.2em] transition-all shadow-xl shadow-primary/10 hover:shadow-primary/20 active:scale-[0.98] overflow-hidden"
+                    >
+                        <div className="absolute inset-0 bg-linear-to-br from-white/20 to-transparent opacity-0 group-hover/btn:opacity-100 transition-opacity" />
+                        <Edit3 size={16} />
+                        <span>{config?.length ? 'Update Configurations' : 'Configure Domain Routing'}</span>
+                    </button>
+                    <p className="text-[10px] text-dashboard-text-secondary/60 text-center mt-6 font-medium max-w-md">
+                        Domain-based routing allows you to orchestrate specific regional delivery protocols based on the incoming hostname.
+                    </p>
+                </div>
+            </motion.div>
+        </section>
+    );
+}

package/src/views/Settings/components/DomainLanguagesModal.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Trash2, Plus, Globe2, Shield, ArrowRight, Save } from 'lucide-react';
+import { DomainLocaleConfig, LocaleDefinition } from '../../../types/settings';
+import { FlagIcon } from './FlagIcon';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface DomainLanguagesModalProps {
+    isOpen: boolean;
+    config: DomainLocaleConfig[];
+    supportedLocales: LocaleDefinition[];
+    onClose: () => void;
+    onSaveAndClose: (config: DomainLocaleConfig[]) => void;
+    isSaving?: boolean;
+}
+
+export function DomainLanguagesModal({ 
+    isOpen, 
+    config, 
+    supportedLocales, 
+    onClose, 
+    onSaveAndClose, 
+    isSaving = false 
+}: DomainLanguagesModalProps) {
+    const [tempConfig, setTempConfig] = useState<DomainLocaleConfig[]>(config);
+    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+    useEffect(() => {
+        setTempConfig(config);
+        setExpandedIndex(null);
+    }, [config, isOpen]);
+
+    if (!isOpen) return null;
+
+    const handleAdd = () => {
+        setTempConfig([...tempConfig, { domain: '', locale: supportedLocales[0]?.code || 'en', allowUserOverride: true }]);
+        setExpandedIndex(tempConfig.length);
+    };
+
+    const handleUpdate = (index: number, field: keyof DomainLocaleConfig, value: any) => {
+        const updated = [...tempConfig];
+        updated[index] = { ...updated[index], [field]: value };
+        setTempConfig(updated);
+    };
+
+    const handleRemove = (index: number) => {
+        setTempConfig(tempConfig.filter((_, i) => i !== index));
+        if (expandedIndex === index) setExpandedIndex(null);
+    };
+
+    const toggleExpand = (index: number) => {
+        setExpandedIndex(expandedIndex === index ? null : index);
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+            <motion.div 
+                initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                className="bg-dashboard-card/50 w-full max-w-xl rounded-[2rem] border border-dashboard-border/40 shadow-2xl flex flex-col max-h-[90vh] overflow-hidden relative"
+            >
+                <div className="absolute top-0 right-0 w-64 h-64 blur-3xl opacity-5 bg-primary pointer-events-none" />
+                
+                <div className="flex items-center justify-between p-6 border-b border-dashboard-border/40 relative z-10">
+                    <div className="flex items-center gap-3">
+                        <div className="size-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                            <Globe2 size={16} />
+                        </div>
+                        <h2 className="text-xl font-bold text-dashboard-text/90">
+                            Domain <span className="text-primary">Routing</span>
+                        </h2>
+                    </div>
+                    <button onClick={onClose} className="p-2 text-dashboard-text-secondary/50 hover:text-dashboard-text transition-all hover:bg-white/5 rounded-lg">
+                        <X size={18} />
+                    </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-6 space-y-4 relative z-10 custom-scrollbar">
+                    <AnimatePresence mode="popLayout">
+                        {tempConfig.length > 0 ? (
+                            <div className="space-y-3">
+                                <span className="text-[10px] font-bold text-primary/60 uppercase tracking-[0.2em] ml-2">Active Configurations</span>
+                                {tempConfig.map((entry, index) => (
+                                    <motion.div 
+                                        layout
+                                        initial={{ opacity: 0, x: -20 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        exit={{ opacity: 0, x: 20 }}
+                                        key={index} 
+                                        className="bg-dashboard-bg/30 rounded-xl border border-dashboard-border/40 overflow-hidden transition-all duration-300 hover:border-primary/20"
+                                    >
+                                        <div
+                                            onClick={() => toggleExpand(index)}
+                                            className="w-full flex items-center justify-between p-3.5 text-left hover:bg-primary/5 transition-all cursor-pointer"
+                                        >
+                                            <div className="flex items-center gap-3">
+                                                <span className="text-sm font-bold text-dashboard-text/90">{entry.domain || 'UNCONFIGURED_HOST'}</span>
+                                                <ArrowRight size={12} className="text-primary opacity-40" />
+                                                <div className="px-2 py-0.5 bg-dashboard-card/50 border border-dashboard-border/40 rounded-full flex items-center gap-2 bg-primary/5">
+                                                    <FlagIcon code={entry.locale} />
+                                                    <span className="text-[9px] font-bold uppercase tracking-wider text-primary">{entry.locale}</span>
+                                                </div>
+                                                {entry.allowUserOverride === false && <Shield size={10} className="text-dashboard-text-secondary/50" />}
+                                            </div>
+                                            <div className="flex items-center gap-2">
+                                                <button
+                                                    onClick={(e) => { e.stopPropagation(); handleRemove(index); }}
+                                                    className="p-1.5 text-dashboard-text-secondary/40 hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
+                                                >
+                                                    <Trash2 size={14} />
+                                                </button>
+                                                <div className={cn("transition-transform duration-300", expandedIndex === index && "rotate-180")}>
+                                                    <X size={12} className="text-dashboard-text-secondary/40 rotate-45" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <AnimatePresence>
+                                            {expandedIndex === index && (
+                                                <motion.div 
+                                                    initial={{ height: 0, opacity: 0 }}
+                                                    animate={{ height: 'auto', opacity: 1 }}
+                                                    exit={{ height: 0, opacity: 0 }}
+                                                    className="overflow-hidden"
+                                                >
+                                                    <div className="p-4 pt-0 space-y-4 border-t border-dashboard-border/40 bg-dashboard-card/20">
+                                                        <div className="space-y-1.5 mt-4">
+                                                            <label className="text-[10px] font-bold text-dashboard-text-secondary/60 uppercase tracking-[0.15em] ml-1">Hostname Protocol</label>
+                                                            <input
+                                                                type="text"
+                                                                value={entry.domain}
+                                                                onChange={(e) => handleUpdate(index, 'domain', e.target.value)}
+                                                                placeholder="e.g. jhits.tech"
+                                                                className="w-full px-4 py-2 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-lg text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                                                            />
+                                                        </div>
+                                                        
+                                                        <div className="flex items-center gap-4">
+                                                            <div className="flex-1 space-y-1.5">
+                                                                <label className="text-[10px] font-bold text-dashboard-text-secondary/60 uppercase tracking-[0.15em] ml-1">Regional Node</label>
+                                                                <select
+                                                                    value={entry.locale}
+                                                                    onChange={(e) => handleUpdate(index, 'locale', e.target.value)}
+                                                                    className="w-full px-4 py-2 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-lg text-sm font-bold uppercase tracking-wider outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text cursor-pointer appearance-none"
+                                                                >
+                                                                    {supportedLocales.map(loc => (
+                                                                        <option key={loc.code} value={loc.code} className="bg-neutral-900">{loc.name}</option>
+                                                                    ))}
+                                                                </select>
+                                                            </div>
+                                                            <div className="shrink-0 flex flex-col items-center gap-1.5 pt-4">
+                                                                <label className="text-[9px] font-bold text-dashboard-text-secondary/50 uppercase tracking-widest">User Override</label>
+                                                                <button
+                                                                    onClick={() => handleUpdate(index, 'allowUserOverride', !entry.allowUserOverride)}
+                                                                    className={cn(
+                                                                        "relative w-10 h-5 rounded-full transition-all duration-300 p-0.5",
+                                                                        entry.allowUserOverride ? "bg-primary" : "bg-neutral-700"
+                                                                    )}
+                                                                >
+                                                                    <div className={cn(
+                                                                        "w-4 h-4 bg-white rounded-full transition-transform duration-300 shadow-sm",
+                                                                        entry.allowUserOverride ? "translate-x-5" : "translate-x-0"
+                                                                    )} />
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </motion.div>
+                                            )}
+                                        </AnimatePresence>
+                                    </motion.div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="py-12 text-center bg-dashboard-card/20 border-dashed border border-dashboard-border/40 rounded-2xl">
+                                <p className="text-[10px] text-dashboard-text-secondary/40 font-bold uppercase tracking-[0.2em]">No domain-specific routing configured</p>
+                            </div>
+                        )}
+                    </AnimatePresence>
+
+                    <div className="pt-2">
+                        <button
+                            onClick={handleAdd}
+                            className="w-full flex items-center justify-center gap-2 px-4 py-3 border border-dashed border-dashboard-border/40 text-dashboard-text-secondary/50 hover:border-primary/40 hover:text-primary rounded-xl transition-all duration-500 font-bold uppercase text-[10px] tracking-[0.2em]"
+                        >
+                            <Plus size={16} />
+                            Add System Domain
+                        </button>
+                    </div>
+                </div>
+                
+                <div className="flex gap-3 p-6 border-t border-dashboard-border/40 relative z-10">
+                    <button onClick={onClose} className="flex-1 px-4 py-2.5 bg-dashboard-card/30 hover:bg-white/5 text-dashboard-text/80 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all border border-dashboard-border/40">
+                        Cancel
+                    </button>
+                    <button
+                        onClick={() => onSaveAndClose(tempConfig)}
+                        disabled={isSaving}
+                        className="flex-1 px-4 py-2.5 bg-primary text-white rounded-xl text-[10px] font-bold uppercase tracking-[0.15em] transition-all shadow-xl shadow-primary/10 hover:shadow-primary/20 disabled:opacity-50 flex items-center justify-center gap-2"
+                    >
+                        {isSaving ? (
+                            <div className="size-3.5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                        ) : <Save size={14} />}
+                        <span>{isSaving ? 'Syncing...' : 'Deploy Config'}</span>
+                    </button>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

package/src/views/Settings/components/FlagIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { GLOBAL_LOCALE_DATABASE } from '../constants';
+
+export function FlagIcon({ code, countryCode, className = "w-4 h-3" }: { code?: string; countryCode?: string; className?: string }) {
+    let finalCountryCode = countryCode;
+    
+    if (!finalCountryCode && code) {
+        finalCountryCode = GLOBAL_LOCALE_DATABASE.find(l => l.code === code)?.countryCode || code;
+    }
+
+    if (!finalCountryCode) return null;
+
+    return (
+        <img 
+            src={`https://flagcdn.com/w20/${finalCountryCode.toLowerCase()}.png`} 
+            alt={code || finalCountryCode}
+            className={`${className} object-contain rounded-xs shadow-xs`}
+        />
+    );
+}

package/src/views/Settings/components/LaunchDateSection.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Calendar, Timer, Info } from 'lucide-react';
+import { WebsiteSettings } from '../../../types/settings';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface LaunchDateSectionProps {
+    settings: WebsiteSettings;
+    onUpdate: (updates: Partial<WebsiteSettings>) => void;
+}
+
+export function LaunchDateSection({ settings, onUpdate }: LaunchDateSectionProps) {
+    if (settings.launched) {
+        return (
+            <section className="space-y-12">
+                <div className="flex items-center gap-6">
+                    <div className="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                        <Calendar size={28} />
+                    </div>
+                    <h3 className="text-4xl lg:text-5xl font-bold text-dashboard-text leading-none">
+                        Launch <span className="text-primary">History</span>
+                    </h3>
+                </div>
+                
+                <motion.div 
+                    initial={{ opacity: 0, scale: 0.98 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className="bg-dashboard-card/50 border border-dashboard-border/50 p-10 rounded-[3rem] flex items-center gap-8 relative overflow-hidden group"
+                >
+                    <div className="absolute top-0 right-0 w-48 h-48 blur-3xl opacity-5 bg-emerald-500 pointer-events-none" />
+                    
+                    <div className="size-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20 shadow-inner shrink-0">
+                        <div className="size-5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_20px_rgba(16,185,129,0.4)]" />
+                    </div>
+                    <div>
+                        <span className="text-[10px] font-bold text-emerald-500 uppercase tracking-[0.3em] mb-2 block opacity-60">System Temporal Status</span>
+                        <h4 className="text-2xl font-bold text-dashboard-text">System Fully Operational</h4>
+                        {settings.launch_date && (
+                            <p className="text-sm text-neutral-500 dark:text-neutral-400 font-medium mt-2">
+                                Initial Deployment Sequence: {new Date(settings.launch_date).toLocaleDateString(undefined, { dateStyle: 'long' })}
+                            </p>
+                        )}
+                    </div>
+                </motion.div>
+            </section>
+        );
+    }
+
+    return (
+        <section className="space-y-12">
+            <div className="flex items-center gap-6">
+                <div className="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Timer size={28} />
+                </div>
+                <h3 className="text-4xl lg:text-5xl font-bold text-dashboard-text leading-none">
+                    Launch <span className="text-primary">Sequence</span>
+                </h3>
+            </div>
+
+            <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="bg-dashboard-card/50 border border-dashboard-border/50 p-10 rounded-[3rem] space-y-10 relative overflow-hidden"
+            >
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+                    <div className="space-y-4">
+                        <label className="text-[10px] font-bold text-primary uppercase tracking-[0.3em] ml-2 opacity-60">Deployment 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';
+                                onUpdate({ launch_date: dateValue ? `${dateValue}T${currentTime}` : '' });
+                            }}
+                            className="w-full px-8 py-5 bg-dashboard-card/50 border border-dashboard-border/50 rounded-[2rem] text-sm font-bold outline-none focus:ring-4 focus:ring-primary/10 transition-all text-dashboard-text placeholder:text-neutral-500"
+                        />
+                    </div>
+                    <div className="space-y-4">
+                        <label className="text-[10px] font-bold text-primary uppercase tracking-[0.3em] ml-2 opacity-60">Synchronization Time (24h)</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];
+                                onUpdate({ launch_date: timeValue ? `${currentDate}T${timeValue}` : '' });
+                            }}
+                            className="w-full px-8 py-5 bg-dashboard-card/50 border border-dashboard-border/50 rounded-[2rem] text-sm font-bold outline-none focus:ring-4 focus:ring-primary/10 transition-all text-dashboard-text placeholder:text-neutral-500"
+                        />
+                    </div>
+                </div>
+
+                <div className="bg-dashboard-card/50 border border-dashboard-border/50 p-8 rounded-[2rem] bg-primary/5 flex items-start gap-5 group">
+                    <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary shrink-0 border border-primary/20">
+                        <Info size={18} />
+                    </div>
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400 font-medium leading-relaxed">
+                        The temporal countdown will be active on the system frontend. Upon reaching the zero-point, the architecture will automatically transition to an active production state.
+                    </p>
+                </div>
+            </motion.div>
+        </section>
+    );
+}