@jhits/dashboard 0.0.1

package/src/app/[locale]/dashboard/preferences/page.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useTheme } from "next-themes";
+import { motion } from "framer-motion";
+import { createPortal } from "react-dom";
+import {
+    Sun, Globe, Save, Settings, LayoutDashboard,
+    Shield, EyeOff, AlertTriangle, Download, Bell, ChevronDown
+} from "lucide-react";
+
+import { routing } from '@/i18n/routing';
+import { getPreferences, updatePreferences } from "../../../actions/preferences";
+import { UserPreferences } from "../../../../types/preferences";
+import Image from "next/image";
+
+// --- LOGIC HELPERS ---
+const getFlagUrl = (localeCode: string) => {
+    try {
+        const region = new Intl.Locale(localeCode).maximize().region ||
+            (localeCode === 'en' ? 'US' : localeCode.toUpperCase());
+        return `https://purecatamphetamine.github.io/country-flag-icons/3x2/${region}.svg`;
+    } catch (e) {
+        return `https://purecatamphetamine.github.io/country-flag-icons/3x2/UN.svg`;
+    }
+};
+
+const getLanguageLabel = (code: string) => {
+    try {
+        const displayNames = new Intl.DisplayNames([code], { type: 'language' });
+        const name = displayNames.of(code);
+        return name ? name.charAt(0).toUpperCase() + name.slice(1) : code.toUpperCase();
+    } catch (e) {
+        return code.toUpperCase();
+    }
+};
+
+// --- SUB-COMPONENTS ---
+
+function LocalizationDropdown({ value, onChange }: { value: string, onChange: (v: string) => void }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
+
+    useEffect(() => {
+        setTimeout(() => {
+            setMounted(true);
+        }, 0);
+        if (isOpen && containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            setCoords({ top: rect.bottom + window.scrollY, left: rect.left + window.scrollX, width: rect.width });
+        }
+    }, [isOpen]);
+
+    const availableLocales = routing.locales;
+
+    return (
+        <div className="relative" ref={containerRef}>
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-full bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-2xl p-4 flex items-center justify-between group hover:border-primary transition-all"
+            >
+                <div className="flex items-center gap-4">
+                    <div className="w-8 h-6 rounded-md overflow-hidden border border-neutral-200 dark:border-neutral-800 shadow-sm shrink-0">
+                        <Image src={getFlagUrl(value)} alt={value} className="w-full h-full object-cover" width={32} height={24} />
+                    </div>
+                    <span className="text-[10px] font-black uppercase tracking-widest text-neutral-900 dark:text-neutral-100">
+                        {getLanguageLabel(value)}
+                    </span>
+                </div>
+                <ChevronDown className={`size-4 text-neutral-400 group-hover:text-primary transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
+            </button>
+
+            {mounted && isOpen && createPortal(
+                <>
+                    <div className="fixed inset-0 z-9998" onClick={() => setIsOpen(false)} />
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 5 }}
+                        exit={{ opacity: 0, y: 10 }}
+                        style={{ top: coords.top, left: coords.left, width: coords.width }}
+                        className="fixed z-9999 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl shadow-2xl p-2 max-h-60 overflow-y-auto custom-scrollbar"
+                    >
+                        {availableLocales.map((locale) => (
+                            <button
+                                key={locale}
+                                type="button"
+                                onClick={() => { onChange(locale); setIsOpen(false); }}
+                                className={`w-full text-left p-3 rounded-xl flex items-center gap-4 transition-colors ${value === locale ? 'bg-primary text-white' : 'hover:bg-neutral-100 dark:hover:bg-neutral-700 text-neutral-500 dark:text-neutral-400'}`}
+                            >
+                                <div className="w-7 h-5 rounded-sm overflow-hidden shrink-0 border border-black/10">
+                                    <Image src={getFlagUrl(locale)} alt={locale} className="w-full h-full object-cover" width={28} height={20} />
+                                </div>
+                                <span className="text-[10px] font-black uppercase tracking-widest">{getLanguageLabel(locale)}</span>
+                            </button>
+                        ))}
+                    </motion.div>
+                </>,
+                document.body
+            )}
+        </div>
+    );
+}
+
+function PreferenceToggle({ icon, title, description, enabled, onChange }: { icon: React.ReactNode, title: string, description: string, enabled: boolean, onChange: (v: boolean) => void }) {
+    return (
+        <div className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-neutral-900/40 border border-neutral-200 dark:border-neutral-700/50">
+            <div className="flex items-center gap-4">
+                <div className="size-10 rounded-xl bg-white dark:bg-neutral-800 flex items-center justify-center border border-neutral-200 dark:border-neutral-700 shadow-sm text-neutral-500">
+                    {icon}
+                </div>
+                <div>
+                    <p className="text-xs font-black uppercase text-neutral-900 dark:text-neutral-100">{title}</p>
+                    <p className="text-[9px] text-neutral-400 font-bold uppercase tracking-tight">{description}</p>
+                </div>
+            </div>
+            <button
+                type="button"
+                onClick={() => onChange(!enabled)}
+                className={`w-12 h-6 rounded-full transition-colors relative ${enabled ? 'bg-emerald-500' : 'bg-neutral-300 dark:bg-neutral-700'}`}
+            >
+                <motion.div
+                    animate={{ x: enabled ? 26 : 4 }}
+                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                    className="absolute top-1 size-4 bg-white rounded-full shadow-sm"
+                />
+            </button>
+        </div>
+    );
+}
+
+export default function PreferencesPage() {
+    const [prefs, setPrefs] = useState<UserPreferences | null>(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const { theme, setTheme } = useTheme();
+
+    // 1. Listen for global theme changes (e.g. from Topbar) and sync local state
+    useEffect(() => {
+        if (prefs && theme && prefs.theme !== theme) {
+            setPrefs({ ...prefs, theme: theme as UserPreferences['theme'] });
+        }
+    }, [theme, prefs]);
+
+    useEffect(() => { getPreferences().then(setPrefs); }, []);
+
+    const handleSave = async () => {
+        if (!prefs) return;
+        setIsSaving(true);
+        try { await updatePreferences(prefs); alert("Preferences Saved"); } finally { setIsSaving(false); }
+    };
+
+    if (!prefs) return <div className="p-8 text-[10px] font-black uppercase text-neutral-400 animate-pulse">Synchronizing Engine...</div>;
+
+    return (
+        <div className="max-w-6xl mx-auto space-y-8">
+            {/* Header */}
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-3xl font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tighter flex items-center gap-3">
+                        <Settings className="size-8 text-primary" />
+                        Settings
+                    </h1>
+                    <p className="text-xs font-bold text-neutral-400 uppercase tracking-widest mt-1">Environment Configuration</p>
+                </div>
+
+                <motion.button
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={handleSave}
+                    disabled={isSaving}
+                    className="bg-primary text-white px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-primary/20 flex items-center gap-2"
+                >
+                    {isSaving ? <div className="size-3 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Save className="size-4" />}
+                    {isSaving ? "Saving..." : "Save Changes"}
+                </motion.button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {/* Visual Environment */}
+                <section className="p-8 rounded-4xl bg-neutral-100 dark:bg-neutral-700/30 border border-neutral-300 dark:border-neutral-700 shadow-sm overflow-hidden">
+                    <h2 className="text-lg font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight mb-8 flex items-center gap-2">
+                        <Sun className="size-5 text-primary" /> Appearance
+                    </h2>
+                    <div className="grid grid-cols-3 gap-2 p-1.5 bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800">
+                        {(['light', 'dark', 'system'] as const).map((t) => (
+                            <button
+                                key={t}
+                                type="button"
+                                onClick={() => { setPrefs({ ...prefs, theme: t }); setTheme(t); }}
+                                className={`py-3 text-[10px] font-black uppercase rounded-xl transition-all ${prefs.theme === t
+                                    ? 'bg-primary text-white shadow-lg'
+                                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-300'
+                                    }`}
+                            >
+                                {t}
+                            </button>
+                        ))}
+                    </div>
+                </section>
+
+                {/* Regional Settings */}
+                <section className="p-8 rounded-4xl bg-neutral-100 dark:bg-neutral-700/30 border border-neutral-300 dark:border-neutral-700 shadow-sm">
+                    <h2 className="text-lg font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight mb-8 flex items-center gap-2">
+                        <Globe className="size-5 text-primary" /> Localization
+                    </h2>
+                    <LocalizationDropdown
+                        value={prefs.language}
+                        onChange={(v) => setPrefs({ ...prefs, language: v })}
+                    />
+                </section>
+
+                {/* Workspace Management */}
+                <section className="p-8 rounded-4xl bg-neutral-100 dark:bg-neutral-700/30 border border-neutral-300 dark:border-neutral-700 shadow-sm">
+                    <h2 className="text-lg font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight mb-8 flex items-center gap-2">
+                        <LayoutDashboard className="size-5 text-primary" /> Workspace
+                    </h2>
+                    <div className="flex gap-4">
+                        {(['grid', 'list'] as const).map((view) => (
+                            <button
+                                key={view}
+                                type="button"
+                                onClick={() => setPrefs({ ...prefs, dashboardView: view })}
+                                className={`flex-1 py-4 rounded-2xl border-2 text-[10px] font-black uppercase transition-all ${prefs.dashboardView === view
+                                    ? 'border-primary bg-primary/10 text-primary'
+                                    : 'border-white dark:border-neutral-800 bg-white dark:bg-neutral-900 text-neutral-400'
+                                    }`}
+                            >
+                                {view} Layout
+                            </button>
+                        ))}
+                    </div>
+                </section>
+
+                {/* Privacy & Visibility */}
+                <section className="p-8 rounded-4xl bg-neutral-100 dark:bg-neutral-700/30 border border-neutral-300 dark:border-neutral-700 shadow-sm">
+                    <h2 className="text-lg font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight mb-8 flex items-center gap-2">
+                        <Shield className="size-5 text-primary" /> Privacy
+                    </h2>
+                    <PreferenceToggle
+                        icon={<EyeOff className="size-4" />}
+                        title="Stealth Mode"
+                        description="Hide active status"
+                        enabled={prefs.privacy.stealthMode}
+                        onChange={(v: boolean) => setPrefs({ ...prefs, privacy: { ...prefs.privacy, stealthMode: v } })}
+                    />
+                </section>
+
+                {/* Notification Hub */}
+                <section className="md:col-span-2 p-8 rounded-4xl bg-neutral-100 dark:bg-neutral-700/30 border border-neutral-300 dark:border-neutral-700 shadow-sm">
+                    <h2 className="text-lg font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight mb-8 flex items-center gap-2">
+                        <Bell className="size-5 text-primary" /> Notification Hub
+                    </h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <PreferenceToggle
+                            icon={<Shield className="size-4 text-emerald-500" />}
+                            title="Security Alerts"
+                            description="Critical login updates"
+                            enabled={prefs.notifications.security}
+                            onChange={(v: boolean) => setPrefs({ ...prefs, notifications: { ...prefs.notifications, security: v } })}
+                        />
+                        <PreferenceToggle
+                            icon={<Bell className="size-4 text-primary" />}
+                            title="Product Intel"
+                            description="Feature releases"
+                            enabled={prefs.notifications.marketing}
+                            onChange={(v: boolean) => setPrefs({ ...prefs, notifications: { ...prefs.notifications, marketing: v } })}
+                        />
+                    </div>
+                </section>
+
+                {/* Danger Zone */}
+                <section className="md:col-span-2 p-8 rounded-4xl bg-red-500/5 dark:bg-red-500/10 border border-red-500/20 shadow-sm">
+                    <div className="flex flex-col md:flex-row justify-between items-center gap-6 text-center md:text-left">
+                        <div>
+                            <h2 className="text-[10px] font-black uppercase text-red-500 flex items-center gap-2 mb-1 justify-center md:justify-start">
+                                <AlertTriangle className="size-4" /> Danger Zone
+                            </h2>
+                            <p className="text-[10px] text-neutral-500 dark:text-neutral-400 font-bold uppercase">Irreversible account & data operations</p>
+                        </div>
+                        <div className="flex gap-4 w-full md:w-auto">
+                            <button className="flex-1 md:flex-none px-6 py-3 rounded-xl bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 text-[10px] font-black uppercase transition-all hover:bg-neutral-50">
+                                <Download className="size-3 mr-2 inline" /> Export Data
+                            </button>
+                            <button className="flex-1 md:flex-none px-6 py-3 rounded-xl bg-red-500 text-white text-[10px] font-black uppercase hover:bg-red-600 transition-all shadow-lg shadow-red-500/20">
+                                Delete Account
+                            </button>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+}