@jhits/dashboard 0.0.1

package/src/app/[locale]/(auth)/login/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+import { useState, useEffect } from "react";
+import { signIn, useSession } from "next-auth/react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Lock, Mail, ChevronRight, Loader2, ArrowLeft, ShieldCheck, Eye, EyeOff } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useWebsite } from "../../../../lib/website-context";
+
+export default function LoginPage() {
+    const router = useRouter();
+    const website = useWebsite();
+    const { data: session, status } = useSession();
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [showPassword, setShowPassword] = useState(false); // New state for toggle
+    const [error, setError] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (status === "authenticated" && session?.user) {
+            router.push('/dashboard');
+        }
+    }, [status, session, router]);
+
+    if (status === "loading") {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-950">
+                <Loader2 className="size-8 animate-spin text-primary" />
+            </div>
+        );
+    }
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError("");
+        setIsLoading(true);
+
+        const result = await signIn("credentials", {
+            email,
+            password,
+            redirect: false,
+        });
+
+        if (result?.ok) {
+            router.push('/dashboard');
+        } else if (result?.error) {
+            setError("Invalid identity or password");
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-4 relative overflow-hidden font-sans">
+
+            {/* Return Link */}
+            <a
+                href={website.homeUrl}
+                className="absolute top-8 left-8 z-20 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-neutral-500 hover:text-primary transition-all group"
+            >
+                <ArrowLeft className="size-4 group-hover:-translate-x-1 transition-transform" />
+                <span>Return to {website.name}</span>
+            </a>
+
+            {/* Background Atmosphere */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute top-0 left-1/4 size-[500px] rounded-full bg-primary/10 blur-[120px]" />
+                <div className="absolute bottom-0 right-1/4 size-[500px] rounded-full bg-blue-600/5 blur-[120px]" />
+            </div>
+
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="w-full max-w-lg relative z-10"
+            >
+                {/* --- BRANDING HEADER --- */}
+                <div className="flex flex-col items-center mb-12">
+                    <div className="flex items-center gap-6">
+
+                        {/* 1. Client Identity */}
+                        {website.logo && (
+                            <div className="flex flex-col items-center gap-2">
+                                <div className="size-14 relative grayscale hover:grayscale-0 transition-all duration-500">
+                                    <Image src={website.logo.light} alt="" fill className="dark:hidden object-contain" />
+                                    <Image src={website.logo.dark} alt="" fill className="hidden dark:block object-contain" />
+                                </div>
+                            </div>
+                        )}
+
+                        {/* 2. JHITS Typographic Block */}
+                        <div className="flex flex-col border-l-2 border-primary pl-6 py-1">
+                            <span className="font-pp text-5xl uppercase leading-[0.75] text-foreground font-medium tracking-tighter">
+                                JHITS
+                            </span>
+                            <div className="flex items-center gap-2 mt-2">
+                                <span className="text-[10px] font-bold tracking-[0.4em] uppercase text-neutral-500">
+                                    Platform
+                                </span>
+                                <span className="text-[10px] font-bold text-primary italic">V2</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="mt-8 flex items-center gap-2 px-3 py-1 bg-neutral-200/50 dark:bg-neutral-800/50 rounded-full border border-neutral-300 dark:border-neutral-700">
+                        <ShieldCheck className="size-3 text-primary" />
+                        <span className="text-[9px] font-bold uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                            Authorized {website.name} Terminal
+                        </span>
+                    </div>
+                </div>
+
+                {/* --- LOGIN FORM CARD --- */}
+                <div className="bg-white/80 dark:bg-neutral-900/70 backdrop-blur-xl border border-neutral-200 dark:border-neutral-800 p-8 rounded-[2.5rem] shadow-2xl">
+                    <form onSubmit={handleLogin} className="space-y-6">
+                        <AnimatePresence mode="wait">
+                            {error && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: -10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, scale: 0.95 }}
+                                    className="bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400 p-4 rounded-2xl text-[11px] font-sans font-bold uppercase tracking-tight border border-red-100 dark:border-red-900/50 flex items-center gap-3"
+                                >
+                                    <div className="size-2 rounded-full bg-red-600 animate-pulse" />
+                                    {error}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+
+                        <div className="space-y-2">
+                            <label className="block text-[10px] font-sans font-bold uppercase tracking-[0.2em] text-neutral-600 dark:text-neutral-400 ml-1">
+                                Identity / Email
+                            </label>
+                            <div className="relative group">
+                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 size-4 text-neutral-400 group-focus-within:text-primary transition-colors" />
+                                <input
+                                    type="email"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    className="w-full pl-12 pr-4 py-3.5 bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700/50 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary outline-none transition-all text-sm font-sans font-medium text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500"
+                                    placeholder="admin@jhits.com"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <div className="flex justify-between items-center ml-1">
+                                <label className="block text-[10px] font-sans font-bold uppercase tracking-[0.2em] text-neutral-600 dark:text-neutral-400">
+                                    Security / Password
+                                </label>
+                                <button type="button" className="text-[10px] font-sans font-bold uppercase tracking-tighter text-primary hover:opacity-70 transition-opacity">
+                                    Forgot?
+                                </button>
+                            </div>
+                            <div className="relative group">
+                                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 size-4 text-neutral-400 group-focus-within:text-primary transition-colors" />
+                                <input
+                                    type={showPassword ? "text" : "password"}
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="w-full pl-12 pr-12 py-3.5 bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700/50 rounded-2xl focus:ring-4 focus:ring-primary/10 focus:border-primary outline-none transition-all text-sm font-sans font-medium text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500"
+                                    placeholder="••••••••"
+                                    required
+                                />
+                                {/* Show/Hide Toggle Button */}
+                                <button
+                                    type="button"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-colors p-1"
+                                    tabIndex={-1}
+                                >
+                                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                                </button>
+                            </div>
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="group relative w-full bg-primary text-white py-4 rounded-2xl font-sans font-bold uppercase tracking-widest text-xs overflow-hidden transition-all hover:shadow-2xl hover:shadow-primary/30 active:scale-[0.98] disabled:opacity-70 shadow-xl shadow-primary/20"
+                        >
+                            <span className="relative z-10 flex items-center justify-center gap-2">
+                                {isLoading ? (
+                                    <Loader2 className="size-4 animate-spin" />
+                                ) : (
+                                    <>
+                                        Authorize Access <ChevronRight className="size-4 group-hover:translate-x-1 transition-transform" />
+                                    </>
+                                )}
+                            </span>
+                        </button>
+                    </form>
+                </div>
+
+                <p className="text-center mt-12 text-[9px] font-bold uppercase tracking-[0.5em] text-neutral-500 dark:text-neutral-600">
+                    Terminal Active <span className="text-primary mx-2">●</span> Secured by JHITS
+                </p>
+            </motion.div>
+        </div>
+    );
+}

package/src/app/[locale]/catch-all/page.tsx

@@ -0,0 +1,10 @@
+// Default catch-all page export for dashboard routes
+// This can be directly imported by client apps as their catch-all route
+import DashboardCatchAll from '../../../components/DashboardCatchAll';
+
+export default async function CatchAllPage(props: {
+    params: Promise<{ locale: string; path: string[] }>;
+}) {
+    return <DashboardCatchAll params={props.params} />;
+}
+

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

@@ -0,0 +1,98 @@
+// packages/jhits-dashboard/src/app/[locale]/dashboard/[...pluginRoute]/page.tsx
+'use client';
+
+import React, { use, useState, useEffect, useRef, useMemo } from 'react';
+import { PluginRegistry } from "../../../../lib/plugin-registry";
+import { PluginNotFound } from "../../../../components/PluginNotFound";
+import { PluginProps } from "../../../../types/plugin";
+
+interface ClientPluginProps {
+    darkMode?: boolean;
+    customBlocks?: unknown[];
+    backgroundColors?: { light: string; dark?: string };
+    [key: string]: unknown;
+}
+
+declare global {
+    interface Window {
+        __JHITS_PLUGIN_PROPS__?: Record<string, ClientPluginProps>;
+    }
+}
+
+export default function DynamicPluginPage({
+    params
+}: {
+    params: Promise<{ locale: string, pluginRoute: string[] }>
+}) {
+    const resolvedParams = use(params);
+    const [prefix, ...subPath] = resolvedParams.pluginRoute;
+    const locale = resolvedParams.locale;
+    const siteId = "current-site-id";
+
+    const manifest = PluginRegistry.getDefinition(prefix);
+
+    // FIX: Store the component in useMemo, but type it as 'any' or 'React.ElementType' 
+    // to prevent the linter from thinking we are creating a component type.
+    const PluginComponent = useMemo(() => {
+        if (!manifest || !manifest.enabled) return null;
+        try {
+            // This returns the reference already stored in your Registry Map
+            return PluginRegistry.resolveComponent(manifest.repo);
+        } catch (error) {
+            console.error(`Failed to resolve component for ${manifest.repo}:`, error);
+            return null;
+        }
+    }, [manifest]);
+
+    const [clientProps, setClientProps] = useState<ClientPluginProps | null>(() => {
+        if (typeof window !== 'undefined' && manifest && window.__JHITS_PLUGIN_PROPS__) {
+            return window.__JHITS_PLUGIN_PROPS__[manifest.repo] || null;
+        }
+        return null;
+    });
+
+    const hasUpdatedFromEffect = useRef(false);
+
+    useEffect(() => {
+        if (typeof window === 'undefined' || !manifest) return;
+
+        const checkProps = () => {
+            if (window.__JHITS_PLUGIN_PROPS__) {
+                const props = window.__JHITS_PLUGIN_PROPS__[manifest.repo];
+                if (props && (!clientProps || JSON.stringify(props) !== JSON.stringify(clientProps))) {
+                    setClientProps(props);
+                    hasUpdatedFromEffect.current = true;
+                }
+            }
+        };
+
+        checkProps();
+        const timeoutId = setTimeout(() => {
+            if (!hasUpdatedFromEffect.current) checkProps();
+        }, 0);
+
+        return () => clearTimeout(timeoutId);
+    }, [manifest, clientProps]);
+
+    if (!manifest || !manifest.enabled || !PluginComponent) {
+        return <PluginNotFound requestedPath={prefix} />;
+    }
+
+    const pluginProps: PluginProps & ClientPluginProps = {
+        subPath,
+        siteId,
+        locale,
+        ...(clientProps || {}),
+    };
+
+    /**
+     * FIX: Use React.createElement. 
+     * This bypasses the JSX transformer's check for "creating components during render"
+     * because we are explicitly telling React to render a reference we already have.
+     */
+    return (
+        <div className="plugin-runtime-wrapper h-full w-full overflow-hidden">
+            {React.createElement(PluginComponent, pluginProps)}
+        </div>
+    );
+}

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

@@ -0,0 +1,42 @@
+import Sidebar from '../../../components/dashboard/Sidebar';
+import Topbar from '../../../components/dashboard/Topbar';
+import { Providers, AuthGuard } from '../../../components/Providers';
+import '../../../app/globals.css';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <Providers>
+            <AuthGuard>
+                {/* 1. Main container uses a soft neutral background (slate/neutral) */}
+                {/* Dashboard font and styles are applied via globals.css */}
+                <div
+                    data-dashboard="true"
+                    className="flex h-screen bg-dashboard-bg transition-colors duration-300 font-sans"
+                >
+
+                    {/* Sidebar sits on the neutral background */}
+                    <Sidebar />
+
+                    {/* 2. Content Area Wrapper */}
+                    <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative z-40">
+                        <Topbar />
+
+                        {/* 3. The "Stage": This creates the visual separation. 
+                    We add a margin, rounded corners, and a solid background to 
+                    make the content look like it's sitting on a paper/plate.
+
+                    bg-white dark:bg-neutral-900 border border-neutral-200/50 dark:border-neutral-800/50 p-6 md:p-10
+                */}
+                        <main className="flex-1 overflow-hidden p-2 md:p-4">
+                            <div className="h-full w-full shadow-sm overflow-hidden">
+                                <div className="h-full w-full mx-auto overflow-hidden">
+                                    {children}
+                                </div>
+                            </div>
+                        </main>
+                    </div>
+                </div>
+            </AuthGuard>
+        </Providers>
+    );
+}

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

@@ -0,0 +1,121 @@
+"use client";
+import { useTranslations } from 'next-intl';
+import { useSession } from 'next-auth/react';
+import { PLATFORM_MODULES } from '../../../lib/modules-config';
+import { Link } from '@/i18n/navigation';
+import { ArrowRight, Sparkles, LayoutGrid, Activity, Zap, Clock } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export default function DashboardHome() {
+    const t = useTranslations('common.dashboard');
+    const tSidebar = useTranslations('common.sidebar');
+    const { data: session } = useSession();
+    const userName = session?.user?.name || 'User';
+
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
+    };
+
+    const itemVariants = {
+        hidden: { y: 20, opacity: 0 },
+        visible: { y: 0, opacity: 1 }
+    };
+
+    return (
+        <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+            className="space-y-8 pb-12 h-full overflow-y-scroll scrollbar-hidden"
+        >
+            {/* 1. HERO SECTION - Your requested style */}
+            <header className="relative group p-8 lg:p-12 rounded-[2.5rem] bg-dashboard-card border border-dashboard-border overflow-hidden shadow-xl shadow-neutral-200/20 dark:shadow-neutral-950/30">
+                <div className="relative z-10 grid lg:grid-cols-2 gap-8 items-center">
+                    <div>
+                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary font-bold text-[10px] uppercase tracking-widest mb-6">
+                            <Sparkles className="size-3" />
+                            <span>{t('status')}</span>
+                        </div>
+                        <h1 className="text-4xl lg:text-5xl font-black tracking-tight text-dashboard-text mb-4 leading-[1.1]">
+                            {t('welcome', { name: userName })}<span className="text-primary">.</span>
+                        </h1>
+                        <p className="text-neutral-600 dark:text-neutral-400 max-w-md text-base lg:text-lg leading-relaxed mb-8">
+                            {t('description')}
+                        </p>
+
+                        <div className="flex flex-wrap gap-4">
+                            {[
+                                { label: 'System', value: 'Active', icon: Activity },
+                                { label: 'Performance', value: '99%', icon: Zap },
+                                { label: 'Uptime', value: '24d', icon: Clock },
+                            ].map((stat, i) => (
+                                <div key={i} className="flex items-center gap-2 px-4 py-2 bg-dashboard-bg rounded-2xl border border-dashboard-border">
+                                    <stat.icon className="size-3.5 text-neutral-500 dark:text-neutral-400" />
+                                    <span className="text-[10px] font-bold uppercase tracking-tight text-neutral-600 dark:text-neutral-500">{stat.label}:</span>
+                                    <span className="text-[10px] font-black uppercase text-dashboard-text">{stat.value}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="hidden lg:flex justify-end relative">
+                        <div className="size-64 bg-primary/10 rounded-full blur-[80px] absolute top-0 right-0 animate-pulse" />
+                        <LayoutGrid className="size-48 text-neutral-200 dark:text-neutral-800/40 rotate-12 relative z-10" />
+                    </div>
+                </div>
+                {/* The "Glow" finish */}
+                <div className="absolute top-0 right-0 w-1/3 h-full bg-linear-to-l from-primary/5 to-transparent pointer-events-none" />
+            </header>
+
+            {/* 2. MODULAR GRID - Adapting the Hero style to the cards */}
+            <section>
+                <div className="flex items-center justify-between mb-8 px-2">
+                    <h2 className="text-2xl font-black text-dashboard-text uppercase tracking-tighter italic">
+                        {t('your_modules')}
+                    </h2>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+                    {PLATFORM_MODULES.map((module) => (
+                        <motion.div key={module.id} variants={itemVariants}>
+                            <Link
+                                href={module.path as Parameters<typeof Link>[0]['href']}
+                                className="group relative flex flex-col h-full p-8 bg-dashboard-card border border-dashboard-border rounded-[2.5rem] hover:border-primary transition-all duration-500 shadow-sm hover:shadow-2xl hover:shadow-primary/5 overflow-hidden"
+                            >
+                                {/* Static "Lift" Background for Dark Mode - ensures card body is visible */}
+                                <div className="absolute inset-0 bg-linear-to-br from-transparent via-transparent to-neutral-100/50 dark:to-neutral-800/20 pointer-events-none" />
+
+                                <div className="relative z-10">
+                                    <div className="mb-6 size-14 bg-dashboard-bg rounded-2xl flex items-center justify-center group-hover:bg-primary transition-all duration-500 border border-dashboard-border">
+                                        <span className="font-black text-2xl group-hover:text-white text-neutral-500 dark:text-neutral-400">
+                                            {module.id.charAt(0).toUpperCase()}
+                                        </span>
+                                    </div>
+
+                                    <h3 className="text-xl font-black text-dashboard-text uppercase tracking-tight mb-3 group-hover:text-primary transition-colors">
+                                        {tSidebar(module.id)}
+                                    </h3>
+
+                                    <p className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed mb-8 line-clamp-2">
+                                        {t(`module_desc.${module.id}`)}
+                                    </p>
+
+                                    <div className="flex items-center justify-between pt-4 border-t border-dashboard-border">
+                                        <span className="text-[10px] font-black uppercase tracking-widest text-neutral-500 group-hover:text-primary transition-colors">
+                                            {t('open_module')}
+                                        </span>
+                                        <ArrowRight className="size-5 text-neutral-400 group-hover:text-primary group-hover:translate-x-1 transition-all" />
+                                    </div>
+                                </div>
+
+                                {/* Hover Accent Glow */}
+                                <div className="absolute -bottom-10 -right-10 size-32 bg-primary/5 rounded-full blur-2xl group-hover:bg-primary/10 transition-all" />
+                            </Link>
+                        </motion.div>
+                    ))}
+                </div>
+            </section>
+        </motion.div>
+    );
+}