@jhits/dashboard 0.0.1

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

@@ -0,0 +1,491 @@
+"use client";
+
+import { useEffect, useState, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useSession } from 'next-auth/react';
+import {
+    User, Shield, Bell, Camera, Check,
+    ChevronRight, Key, CreditCard,
+    Activity, Trash2, X, Laptop, Smartphone, Globe
+} from 'lucide-react';
+
+import {
+    changePassword,
+    getUserProfile,
+    getUserSessions,
+    revokeSession,
+    updateProfileFields,
+    updateProfileImage
+} from '../../../actions/user';
+import { createPortal } from 'react-dom';
+import Image from 'next/image';
+
+// --- TYPES ---
+interface UserData {
+    name: string;
+    email: string;
+    image?: string;
+    role?: string;
+}
+
+interface SessionLog {
+    id: string;
+    device: string;
+    browser: string;
+    location: string;
+    isCurrent: boolean;
+    lastActive: string;
+}
+
+export default function ProfilePage() {
+    const t = useTranslations('common.profile');
+    const { data: session, update } = useSession();
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // Global States
+    const [user, setUser] = useState<UserData | null>(null);
+    const [originalUser, setOriginalUser] = useState<UserData | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [sessions, setSessions] = useState<SessionLog[]>([]);
+
+    // Feature States
+    const [showPasswordModal, setShowPasswordModal] = useState(false);
+    const [isChangingPwd, setIsChangingPwd] = useState(false);
+    const [passwords, setPasswords] = useState({ current: '', new: '', confirm: '' });
+
+    useEffect(() => { loadData(); }, []);
+
+    async function loadData() {
+        setLoading(true);
+        try {
+            const [profile, activeSessions] = await Promise.all([
+                getUserProfile(),
+                getUserSessions()
+            ]);
+            setUser(profile);
+            setOriginalUser(profile);
+            setSessions(activeSessions);
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    const handleRevokeSession = async (id: string) => {
+        try {
+            const result = await revokeSession(id);
+            if (result.success) {
+                setSessions(prev => prev.filter(s => s.id !== id));
+            }
+        } catch (error: unknown) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to revoke session";
+            alert(errorMessage);
+        }
+    };
+
+    const handleUpdateProfile = async () => {
+        if (!user) return;
+        setIsSaving(true);
+        try {
+            const result = await updateProfileFields(user.name, user.email);
+            if (result.success) {
+                await update({ user: { ...session?.user, name: result.name, email: result.email } });
+                setOriginalUser({ ...user });
+                alert("Profile updated!");
+            }
+        } catch (error: unknown) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to update profile";
+            alert(errorMessage);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        setIsUploading(true);
+        const reader = new FileReader();
+        reader.onloadend = async () => {
+            try {
+                const result = await updateProfileImage(reader.result as string);
+                if (result.success) {
+                    await update({ user: { ...session?.user, image: result.image } });
+                    await loadData();
+                }
+            } catch (error) { alert("Upload failed"); } finally { setIsUploading(false); }
+        };
+        reader.readAsDataURL(file);
+    };
+
+    const handleRemoveImage = async (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!confirm("Remove photo?")) return;
+        setIsUploading(true);
+        try {
+            const result = await updateProfileImage(null);
+            if (result.success) {
+                await update({ user: { ...session?.user, image: null } });
+                await loadData();
+            }
+        } catch (error) { console.error(error); } finally { setIsUploading(false); }
+    };
+
+    const handlePasswordChange = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (passwords.new !== passwords.confirm) return alert("Passwords mismatch");
+        setIsChangingPwd(true);
+        try {
+            const result = await changePassword(passwords.current, passwords.new);
+            if (result.success) {
+                setShowPasswordModal(false);
+                setPasswords({ current: '', new: '', confirm: '' });
+                alert("Password updated");
+            }
+        } catch (error: unknown) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to change password";
+            alert(errorMessage);
+        } finally { setIsChangingPwd(false); }
+    };
+
+    if (loading) return <LoadingSpinner />;
+
+    return (
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-8 pb-12">
+
+            <ProfileHero
+                user={user}
+                isUploading={isUploading}
+                fileInputRef={fileInputRef as React.RefObject<HTMLInputElement>}
+                onImageChange={handleImageChange}
+                onRemoveImage={handleRemoveImage}
+            />
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div className="lg:col-span-2 space-y-8">
+                    <PersonalInfoSection
+                        user={user}
+                        setUser={setUser}
+                        originalUser={originalUser}
+                        isSaving={isSaving}
+                        onSave={handleUpdateProfile}
+                    />
+                    <SessionHistorySection
+                        sessions={sessions}
+                        onRevoke={handleRevokeSession}
+                    />
+                </div>
+
+                <div className="space-y-6">
+                    <SecurityActions onPasswordClick={() => setShowPasswordModal(true)} />
+                    <StatusCard />
+                </div>
+            </div>
+
+            <AnimatePresence>
+                {showPasswordModal && (
+                    <PasswordModal
+                        passwords={passwords}
+                        setPasswords={setPasswords}
+                        isChanging={isChangingPwd}
+                        onClose={() => setShowPasswordModal(false)}
+                        onSubmit={handlePasswordChange}
+                    />
+                )}
+            </AnimatePresence>
+        </motion.div>
+    );
+}
+
+// --- MODULAR SUB-COMPONENTS ---
+
+function PersonalInfoSection({ user, setUser, originalUser, isSaving, onSave }: { user: UserData | null, setUser: (user: UserData) => void, originalUser: UserData | null, isSaving: boolean, onSave: () => void }) {
+    const hasChanges = user?.name !== originalUser?.name || user?.email !== originalUser?.email;
+
+    return (
+        <section className="p-8 rounded-4xl bg-neutral-100 dark:bg-neutral-700/30 border border-neutral-300 dark:border-neutral-700 shadow-sm transition-all overflow-hidden">
+            <motion.div layout className="flex items-center justify-between mb-8">
+                <h2 className="text-lg font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight flex items-center gap-2">
+                    <User className="size-5 text-primary" />
+                    Personal Information
+                </h2>
+
+                <AnimatePresence mode="wait">
+                    {(hasChanges || isSaving) && (
+                        <motion.button
+                            key="save-button"
+                            layout
+                            initial={{ opacity: 0, scale: 0.9, x: 20 }}
+                            animate={{ opacity: 1, scale: 1, x: 0 }}
+                            exit={{ opacity: 0, scale: 0.9, x: 10 }}
+                            transition={{ type: "spring", stiffness: 400, damping: 30 }}
+                            onClick={onSave}
+                            disabled={isSaving}
+                            className="relative px-6 py-2.5 bg-primary text-white text-[10px] font-black uppercase tracking-widest rounded-xl hover:scale-[1.05] active:scale-95 shadow-lg shadow-primary/20 flex items-center justify-center min-w-[120px]"
+                        >
+                            <AnimatePresence mode="wait">
+                                {isSaving ? (
+                                    <motion.div key="updating" initial={{ y: 15, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -15, opacity: 0 }} className="flex items-center gap-2">
+                                        <div className="size-3 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                        <span>Updating</span>
+                                    </motion.div>
+                                ) : (
+                                    <motion.span key="save" initial={{ y: 15, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -15, opacity: 0 }}>
+                                        Save Changes
+                                    </motion.span>
+                                )}
+                            </AnimatePresence>
+                        </motion.button>
+                    )}
+                </AnimatePresence>
+            </motion.div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <InputGroup
+                    label="Full Name"
+                    value={user?.name}
+                    onChange={(v: string) => setUser({ ...user, name: v } as UserData)}
+                />
+                <InputGroup
+                    label="Email Address"
+                    value={user?.email}
+                    onChange={(v: string) => setUser({ ...user, email: v } as UserData)}
+                />
+            </div>
+        </section>
+    );
+}
+
+function ProfileHero({ user, isUploading, fileInputRef, onImageChange, onRemoveImage }: { user: UserData | null, isUploading: boolean, fileInputRef: React.RefObject<HTMLInputElement>, onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void, onRemoveImage: (e: React.MouseEvent) => void }) {
+    const initials = user?.name?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
+    return (
+        <header className="relative p-8 lg:p-10 rounded-[2.5rem] bg-neutral-100 dark:bg-neutral-700/50 border border-neutral-300 dark:border-neutral-700 overflow-hidden shadow-xl">
+            <div className="relative z-10 flex flex-col md:flex-row items-center gap-8">
+                <div className="relative group">
+                    <input type="file" ref={fileInputRef} onChange={onImageChange} className="hidden" accept="image/*" />
+                    <div onClick={() => fileInputRef.current?.click()} className={`size-32 lg:size-40 rounded-[2.5rem] bg-primary flex items-center justify-center text-white text-4xl font-black shadow-2xl overflow-hidden cursor-pointer transition-all ${isUploading ? 'opacity-50 grayscale' : ''}`}>
+                        {user?.image ? <Image src={user.image} className="w-full h-full object-cover" alt="Profile" width={128} height={128} /> : initials}
+                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"><Camera className="size-8" /></div>
+                    </div>
+                    {user?.image && (
+                        <button onClick={onRemoveImage} className="absolute -top-2 -right-2 size-10 rounded-2xl bg-red-500 border-4 border-neutral-100 dark:border-neutral-800 flex items-center justify-center shadow-lg"><Trash2 className="size-4 text-white" /></button>
+                    )}
+                    <div className="absolute -bottom-2 -right-2 size-10 rounded-2xl bg-emerald-500 border-4 border-neutral-100 dark:border-neutral-800 flex items-center justify-center shadow-lg"><Check className="size-5 text-white" strokeWidth={3} /></div>
+                </div>
+                <div className="text-center md:text-left">
+                    <h1 className="text-3xl lg:text-4xl font-black text-neutral-950 dark:text-neutral-50 uppercase tracking-tight">{user?.name || 'User'}<span className="text-primary">.</span></h1>
+                    <p className="text-neutral-600 dark:text-neutral-400 font-medium mb-3">{user?.email}</p>
+                    <div className="flex gap-2 justify-center md:justify-start">
+                        <span className="px-3 py-1 rounded-full bg-neutral-200 dark:bg-neutral-900 text-[10px] font-black uppercase text-neutral-500 dark:text-neutral-400">{user?.role || 'User'}</span>
+                        <span className="px-3 py-1 rounded-full bg-primary/10 text-primary text-[10px] font-black uppercase tracking-widest">Verified Account</span>
+                    </div>
+                </div>
+            </div>
+            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -mr-20 -mt-20" />
+        </header>
+    );
+}
+
+function SessionHistorySection({ sessions, onRevoke }: { sessions: SessionLog[], onRevoke: (id: string) => void }) {
+    const [revokingId, setRevokingId] = useState<string | null>(null);
+
+    const handleRevoke = async (id: string) => {
+        if (!confirm("Are you sure you want to terminate this session?")) return;
+        setRevokingId(id);
+        try { await onRevoke(id); } finally { setRevokingId(null); }
+    };
+
+    return (
+        <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-6 flex items-center gap-2">
+                <Activity className="size-5 text-primary" />
+                Login Activity
+            </h2>
+
+            <div className="space-y-4">
+                <AnimatePresence mode="popLayout">
+                    {sessions.map((sess: SessionLog) => (
+                        <motion.div
+                            key={sess.id}
+                            layout
+                            initial={{ opacity: 0, scale: 0.95 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            exit={{ opacity: 0, scale: 0.95, x: -20 }}
+                            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">
+                                    {sess.device.toLowerCase().includes('phone') ? (
+                                        <Smartphone className="size-5 text-neutral-500" />
+                                    ) : (
+                                        <Laptop className="size-5 text-neutral-500" />
+                                    )}
+                                </div>
+                                <div>
+                                    <div className="flex items-center gap-2">
+                                        <p className="text-xs font-black uppercase text-neutral-900 dark:text-neutral-100">
+                                            {sess.device} • {sess.browser}
+                                        </p>
+                                        {sess.isCurrent && (
+                                            <span className="text-[8px] bg-emerald-500/10 text-emerald-500 px-2 py-0.5 rounded-full border border-emerald-500/20 font-black uppercase">
+                                                Current
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-[10px] font-bold text-neutral-400 uppercase flex items-center gap-1 mt-0.5">
+                                        <Globe className="size-3" /> {sess.location} • {sess.lastActive}
+                                    </p>
+                                </div>
+                            </div>
+
+                            {!sess.isCurrent && (
+                                <button
+                                    onClick={() => handleRevoke(sess.id)}
+                                    disabled={revokingId === sess.id}
+                                    className="text-[10px] font-black uppercase text-red-500 px-3 py-1.5 hover:bg-red-500/10 rounded-lg transition-all"
+                                >
+                                    {revokingId === sess.id ? (
+                                        <div className="size-3 border-2 border-red-500 border-t-transparent rounded-full animate-spin" />
+                                    ) : (
+                                        'Revoke'
+                                    )}
+                                </button>
+                            )}
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+            </div>
+        </section>
+    );
+}
+
+function SecurityActions({ onPasswordClick }: { onPasswordClick: () => void }) {
+    return (
+        <section className="p-8 rounded-4xl bg-neutral-200 dark:bg-neutral-700/20 border border-neutral-300 dark:border-neutral-700">
+            <h2 className="text-sm font-black text-neutral-950 dark:text-neutral-50 uppercase mb-6">Security & Access</h2>
+            <div className="space-y-3">
+                <ActionButton label="Change Password" icon={Key} onClick={onPasswordClick} />
+                <ActionButton label="Two-Factor Auth" icon={Shield} onClick={() => {}} />
+                <ActionButton label="Billing Details" icon={CreditCard} onClick={() => {}} />
+            </div>
+        </section>
+    );
+}
+
+function ActionButton({ label, icon: Icon, onClick }: { label: string, icon: React.ElementType, onClick: () => void }) {
+    return (
+        <button onClick={onClick} className="w-full flex items-center justify-between p-4 rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700/50 hover:border-primary transition-all group">
+            <div className="flex items-center gap-3">
+                <div className="size-8 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center group-hover:bg-primary/10 transition-colors"><Icon className="size-4 text-neutral-500 group-hover:text-primary" /></div>
+                <span className="text-xs font-bold text-neutral-700 dark:text-neutral-300 uppercase">{label}</span>
+            </div>
+            <ChevronRight className="size-4 text-neutral-300 group-hover:translate-x-1 transition-transform" />
+        </button>
+    );
+}
+
+function InputGroup({ label, value, onChange, type = "text" }: { label: string, value: string | undefined, onChange: (v: string) => void, type?: string }) {
+    return (
+        <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-widest text-neutral-400">{label}</label>
+            <input
+                type={type} value={value || ""} onChange={(e) => onChange(e.target.value)}
+                className="w-full bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100"
+            />
+        </div>
+    );
+}
+
+function PasswordModal({ passwords, setPasswords, isChanging, onClose, onSubmit }: { passwords: { current: string, new: string, confirm: string }, setPasswords: (passwords: { current: string, new: string, confirm: string }) => void, isChanging: boolean, onClose: () => void, onSubmit: (e: React.FormEvent) => void }) {
+    // 1. Ensure this only runs on the client
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setMounted(true);
+        }, 0);
+    }, []);
+
+    if (!mounted) return null;
+
+    // 2. Use createPortal to mount at the bottom of <body>
+    return createPortal(
+        <div
+            // 3. Handle background click to exit
+            onClick={onClose}
+            className="fixed inset-0 z-9999 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md cursor-pointer"
+        >
+            <motion.div
+                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                // 4. Prevent clicks inside the modal from closing it
+                onClick={(e) => e.stopPropagation()}
+                className="w-full max-w-md bg-white dark:bg-neutral-800 rounded-[2.5rem] p-8 shadow-2xl relative border border-neutral-300 dark:border-white/10 cursor-default"
+            >
+                <button
+                    onClick={onClose}
+                    className="absolute top-6 right-6 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+                >
+                    <X className="size-6" />
+                </button>
+
+                <h3 className="text-xl font-black uppercase mb-6 flex items-center gap-2 dark:text-white text-neutral-950">
+                    <Key className="size-5 text-primary" />
+                    Security Update
+                </h3>
+
+                <form onSubmit={onSubmit} className="space-y-4">
+                    <InputGroup
+                        label="Current Password"
+                        type="password"
+                        value={passwords.current}
+                        onChange={(v: string) => setPasswords({ ...passwords, current: v })}
+                    />
+                    <InputGroup
+                        label="New Password"
+                        type="password"
+                        value={passwords.new}
+                        onChange={(v: string) => setPasswords({ ...passwords, current: passwords.current, new: v })}
+                    />
+                    <InputGroup
+                        label="Confirm New Password"
+                        type="password"
+                        value={passwords.confirm}
+                        onChange={(v: string) => setPasswords({ ...passwords, confirm: v })}
+                    />
+
+                    <button
+                        type="submit"
+                        disabled={isChanging}
+                        className="w-full py-4 mt-4 bg-primary text-white text-xs font-black uppercase rounded-xl shadow-lg shadow-primary/20 transition-all hover:scale-[1.02] active:scale-95 disabled:opacity-50"
+                    >
+                        {isChanging ? 'Updating...' : 'Update Password'}
+                    </button>
+                </form>
+            </motion.div>
+        </div>,
+        document.body
+    );
+}
+
+function StatusCard() {
+    return (
+        <div className="p-6 rounded-4xl bg-primary flex items-center justify-between overflow-hidden relative">
+            <div className="relative z-10"><p className="text-[10px] font-black uppercase text-white/60 tracking-widest">Global Status</p><h3 className="text-lg font-black text-white uppercase italic">System Notifications</h3></div>
+            <div className="size-12 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center z-10"><Bell className="size-6 text-white animate-ring" /></div>
+            <div className="absolute -left-4 -bottom-4 size-24 bg-white/10 rounded-full blur-2xl" />
+        </div>
+    );
+}
+
+function LoadingSpinner() {
+    return (
+        <div className="flex h-[60vh] items-center justify-center">
+            <div className="size-12 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+        </div>
+    );
+}

package/src/app/[locale]/layout.tsx

@@ -0,0 +1,28 @@
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import { Providers } from "../../components/Providers";
+import "../globals.css";
+
+export default async function LocaleLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  // 1. Unwrapping the params (Required for Next.js 15)
+  const { locale } = await props.params;
+
+  // 2. Extracting children from props
+  const children = props.children;
+
+  // 3. Getting the translations
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <body className="antialiased">
+        <NextIntlClientProvider messages={messages} locale={locale}>
+          <Providers>{children}</Providers>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/actions/preferences.ts

@@ -0,0 +1,40 @@
+"use server";
+
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../lib/auth";
+import clientPromise from "../../lib/mongodb";
+import { UserPreferences } from "../../types/preferences";
+
+const DEFAULT_PREFS: UserPreferences = {
+    theme: 'system',
+    language: 'en',
+    dashboardView: 'grid',
+    notifications: { marketing: false, security: true },
+    privacy: { stealthMode: false, publicSearch: true }
+};
+
+export async function getPreferences() {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.email) return DEFAULT_PREFS;
+
+    const client = await clientPromise;
+    const db = client.db();
+    const user = await db.collection("users").findOne({ email: session.user.email });
+
+    return (user?.preferences as UserPreferences) || DEFAULT_PREFS;
+}
+
+export async function updatePreferences(data: UserPreferences) {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.email) throw new Error("Unauthorized");
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    await db.collection("users").updateOne(
+        { email: session.user.email },
+        { $set: { preferences: data } }
+    );
+
+    return { success: true };
+}