@jhits/dashboard 0.0.1

package/src/app/actions/user.ts

@@ -0,0 +1,191 @@
+"use server";
+
+import clientPromise from "../../lib/mongodb";
+import { getServerSession } from "next-auth";
+import { revalidatePath } from "next/cache";
+import fs from "fs/promises";
+import path from "path";
+import bcrypt from "bcrypt";
+import { authOptions } from "../../lib/auth";
+import { ObjectId } from "mongodb";
+import { headers } from "next/headers";
+
+/**
+ * FETCH USER PROFILE
+ */
+export async function getUserProfile() {
+    const session = await getServerSession();
+    if (!session?.user?.email) return null;
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    const user = await db.collection("users").findOne(
+        { email: session.user.email },
+        { projection: { password: 0 } }
+    );
+
+    return user ? JSON.parse(JSON.stringify(user)) : null;
+}
+
+export async function revokeSession(activityId: string) {
+    const session = await getServerSession(authOptions);
+    if (!session?.user) throw new Error("Unauthorized");
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    const result = await db.collection("user_activities").deleteOne({
+        _id: new ObjectId(activityId),
+        userId: (session.user as { id: string }).id
+    });
+
+    if (result.deletedCount === 0) {
+        throw new Error("Could not find session to revoke.");
+    }
+
+    return { success: true };
+}
+
+/**
+ * Helper to turn ugly User Agent strings into clean names
+ */
+function parseUA(ua: string): string {
+    if (ua.includes("Firefox")) return "Firefox";
+    if (ua.includes("Edg")) return "Edge";
+    // Brave often hides inside the Chrome string, so we check for both
+    if (ua.includes("Chrome")) {
+        if (ua.includes("Brave") || ua.includes("brave")) return "Brave";
+        return "Chrome";
+    }
+    if (ua.includes("Safari") && !ua.includes("Chrome")) return "Safari";
+    return "Unknown Browser";
+}
+
+export async function getUserSessions() {
+    const session = await getServerSession(authOptions);
+    const headersList = await headers();
+    const currentUa = headersList.get("user-agent") || "";
+
+    if (!session?.user) return [];
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    const activities = await db.collection("user_activities")
+        .find({ userId: (session.user as { id: string }).id })
+        .sort({ lastActive: -1 })
+        .toArray();
+
+    return activities.map(a => ({
+        id: a._id.toString(),
+        device: a.userAgent.includes("Mobi") ? "Mobile Device" : "Desktop Computer",
+        browser: parseUA(a.userAgent), // Now this will work!
+        location: a.ip || "Unknown IP",
+        isCurrent: a.userAgent === currentUa,
+        lastActive: "Active Now"
+    }));
+}
+
+/**
+ * UPDATE TEXT FIELDS (Name & Email)
+ */
+export async function updateProfileFields(name: string, email: string) {
+    const session = await getServerSession();
+    const currentEmail = session?.user?.email;
+    if (!currentEmail) throw new Error("Unauthorized");
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    // Check if new email is already taken by someone else
+    if (email !== currentEmail) {
+        const existingUser = await db.collection("users").findOne({ email });
+        if (existingUser) throw new Error("Email already in use");
+    }
+
+    await db.collection("users").updateOne(
+        { email: currentEmail },
+        { $set: { name, email, updatedAt: new Date() } }
+    );
+
+    revalidatePath("/profile");
+    return { success: true, name, email };
+}
+
+/**
+ * UPDATE OR DELETE PROFILE IMAGE
+ * Handles physical file cleanup on the Raspberry Pi
+ */
+export async function updateProfileImage(base64Image: string | null) {
+    const session = await getServerSession();
+    const currentEmail = session?.user?.email;
+    if (!currentEmail) throw new Error("Unauthorized");
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    // 1. Get current user for cleanup
+    const user = await db.collection("users").findOne({ email: currentEmail });
+    const oldImagePath = user?.image;
+    let newPath: string | null = oldImagePath;
+
+    const uploadDir = path.join(process.cwd(), "data/uploads");
+
+    // 2. Process New Upload
+    if (base64Image && base64Image.startsWith('data:image')) {
+        await fs.mkdir(uploadDir, { recursive: true });
+        const base64Data = base64Image.replace(/^data:image\/\w+;base64,/, "");
+        const filename = `avatar-${Date.now()}.jpg`;
+        await fs.writeFile(path.join(uploadDir, filename), Buffer.from(base64Data, 'base64'));
+        newPath = `/api/uploads/${filename}`;
+    }
+    // 3. Handle Deletion
+    else if (base64Image === null) {
+        newPath = null;
+    }
+
+    // 4. Physical Cleanup (Delete old file if path changed or removed)
+    if (oldImagePath && oldImagePath !== newPath && oldImagePath.startsWith('/api/uploads/')) {
+        const oldFile = oldImagePath.split('/').pop();
+        if (oldFile) {
+            try { await fs.unlink(path.join(uploadDir, oldFile)); } catch (e) { }
+        }
+    }
+
+    // 5. Update DB
+    await db.collection("users").updateOne(
+        { email: currentEmail },
+        { $set: { image: newPath, updatedAt: new Date() } }
+    );
+
+    revalidatePath("/profile");
+    return { success: true, image: newPath };
+};
+
+export async function changePassword(currentPassword: string, newPassword: string) {
+    const session = await getServerSession();
+    if (!session?.user?.email) throw new Error("Unauthorized");
+
+    const client = await clientPromise;
+    const db = client.db();
+
+    // 1. Find user to get the current hashed password
+    const user = await db.collection("users").findOne({ email: session.user.email });
+    if (!user) throw new Error("User not found");
+
+    // 2. Verify current password
+    const isMatch = await bcrypt.compare(currentPassword, user.password);
+    if (!isMatch) throw new Error("Current password is incorrect");
+
+    // 3. Hash the new password
+    const hashedNewPassword = await bcrypt.hash(newPassword, 12);
+
+    // 4. Update the database
+    await db.collection("users").updateOne(
+        { email: session.user.email },
+        { $set: { password: hashedNewPassword, updatedAt: new Date() } }
+    );
+
+    return { success: true };
+}

package/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import { authOptions } from "../../../../lib/auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

package/src/app/api/plugin-images/list/route.ts

@@ -0,0 +1,96 @@
+/**
+ * Image List API Route
+ * Returns paginated list of uploaded images for plugin-images
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { readdir, stat } from 'fs/promises';
+import path from 'path';
+
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+
+export async function GET(request: NextRequest) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const page = parseInt(searchParams.get('page') || '1');
+        const limit = parseInt(searchParams.get('limit') || '20');
+        const search = searchParams.get('search') || '';
+
+        // Read uploads directory
+        let files: string[] = [];
+        try {
+            files = await readdir(uploadsDir);
+        } catch (error) {
+            // Directory doesn't exist yet
+            return NextResponse.json({
+                images: [],
+                total: 0,
+                page: 1,
+                limit,
+            });
+        }
+
+        // Filter image files and get metadata
+        const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif'];
+        const imageFiles = files.filter(file => {
+            const ext = path.extname(file).toLowerCase();
+            return imageExtensions.includes(ext);
+        });
+
+        // Apply search filter if provided
+        const filteredFiles = search
+            ? imageFiles.filter(file => file.toLowerCase().includes(search.toLowerCase()))
+            : imageFiles;
+
+        // Sort by modification time (newest first)
+        const filesWithStats = await Promise.all(
+            filteredFiles.map(async (filename) => {
+                const filePath = path.join(uploadsDir, filename);
+                const stats = await stat(filePath);
+                return {
+                    filename,
+                    mtime: stats.mtime,
+                    size: stats.size,
+                };
+            })
+        );
+
+        filesWithStats.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
+
+        // Paginate
+        const start = (page - 1) * limit;
+        const end = start + limit;
+        const paginatedFiles = filesWithStats.slice(start, end);
+
+        // Build image metadata
+        const images = paginatedFiles.map(({ filename, mtime, size }) => {
+            const ext = path.extname(filename).toLowerCase();
+            const mimeType = ext === '.png' ? 'image/png' : 
+                           ext === '.webp' ? 'image/webp' :
+                           ext === '.gif' ? 'image/gif' : 'image/jpeg';
+
+            return {
+                id: filename,
+                filename,
+                url: `/api/uploads/${filename}`,
+                size,
+                mimeType,
+                uploadedAt: mtime.toISOString(),
+            };
+        });
+
+        return NextResponse.json({
+            images,
+            total: filteredFiles.length,
+            page,
+            limit,
+        });
+    } catch (error) {
+        console.error('List images error:', error);
+        return NextResponse.json(
+            { error: 'Failed to list images' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/app/api/plugin-images/upload/route.ts

@@ -0,0 +1,88 @@
+/**
+ * Image Upload API Route
+ * Handles image file uploads for plugin-images
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile, mkdir } from 'fs/promises';
+import path from 'path';
+import { randomBytes } from 'crypto';
+
+// Ensure uploads directory exists
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+
+async function ensureUploadsDir() {
+    try {
+        await mkdir(uploadsDir, { recursive: true });
+    } catch (error) {
+        // Directory might already exist
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        await ensureUploadsDir();
+
+        const formData = await request.formData();
+        const file = formData.get('file') as File;
+
+        if (!file) {
+            return NextResponse.json(
+                { success: false, error: 'No file provided' },
+                { status: 400 }
+            );
+        }
+
+        // Validate file type
+        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
+        if (!allowedTypes.includes(file.type)) {
+            return NextResponse.json(
+                { success: false, error: 'Invalid file type. Only images are allowed.' },
+                { status: 400 }
+            );
+        }
+
+        // Validate file size (max 10MB)
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        if (file.size > maxSize) {
+            return NextResponse.json(
+                { success: false, error: 'File size exceeds 10MB limit' },
+                { status: 400 }
+            );
+        }
+
+        // Generate unique filename
+        const ext = path.extname(file.name);
+        const uniqueId = randomBytes(16).toString('hex');
+        const timestamp = Date.now();
+        const uniqueFilename = `${timestamp}-${uniqueId}${ext}`;
+        const filePath = path.join(uploadsDir, uniqueFilename);
+
+        // Save file
+        const bytes = await file.arrayBuffer();
+        const buffer = Buffer.from(bytes);
+        await writeFile(filePath, buffer);
+
+        // Get image dimensions (basic - could use sharp for better handling)
+        const imageMetadata = {
+            id: uniqueFilename,
+            filename: file.name,
+            url: `/api/uploads/${uniqueFilename}`,
+            size: file.size,
+            mimeType: file.type,
+            uploadedAt: new Date().toISOString(),
+        };
+
+        return NextResponse.json({
+            success: true,
+            image: imageMetadata,
+        });
+    } catch (error) {
+        console.error('Upload error:', error);
+        return NextResponse.json(
+            { success: false, error: 'Failed to upload image' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/app/api/telemetry/log/route.ts

@@ -0,0 +1,10 @@
+/**
+ * Telemetry API Route (Legacy)
+ * This route is kept for backward compatibility but redirects to /api/telemetry
+ * Plugin-mounted API route using the telemetry handler
+ */
+import { POST } from '@jhits/plugin-telemetry/api/route';
+
+// Re-export the POST handler from the plugin
+export { POST };
+

package/src/app/api/telemetry/route.ts

@@ -0,0 +1,12 @@
+/**
+ * Telemetry API Route
+ * Plugin-mounted API route using the telemetry handler
+ * Mounted at /api/telemetry
+ * 
+ * IMPORTANT: This route file is server-only and should never be imported in client code.
+ */
+import { POST } from '@jhits/plugin-telemetry/api/route';
+
+// Re-export the POST handler from the plugin
+export { POST };
+

package/src/app/api/uploads/[filename]/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ filename: string }> } // 1. Define params as a Promise
+) {
+    // 2. Await the params to unwrap them
+    const { filename } = await params;
+
+    // 3. Security: Prevent directory traversal (only allow the filename)
+    const sanitizedFilename = path.basename(filename);
+    const filePath = path.join(process.cwd(), "data/uploads", sanitizedFilename);
+
+    try {
+        const fileBuffer = await fs.readFile(filePath);
+
+        // Determine content type based on extension
+        const ext = path.extname(sanitizedFilename).toLowerCase();
+        const contentType = ext === '.png' ? 'image/png' : 'image/jpeg';
+
+        return new NextResponse(fileBuffer, {
+            headers: {
+                'Content-Type': contentType,
+                'Cache-Control': 'public, max-age=31536000, immutable',
+            },
+        });
+    } catch (e) {
+        console.error("File serving error:", e);
+        return new NextResponse("File not found", { status: 404 });
+    }
+}

package/src/app/globals.css

@@ -0,0 +1,181 @@
+@import "tailwindcss";
+@source "../../../**/*.{ts,tsx}";
+
+/* Dashboard-specific styles with higher specificity to override client app styles */
+/* These styles apply globally when dashboard CSS is loaded */
+.dashboard-html,
+.dashboard-body,
+[data-dashboard="true"],
+[data-dashboard="true"] * {
+  /* Ensure dashboard styles take precedence */
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: "PP Neue Corp Tight";
+  src: url("https://cdn.prod.website-files.com/673af51dea86ab95d124c3ee/673b0f5784f7060c0ac05534_PPNeueCorp-TightUltrabold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme {
+  --font-pp: "PP Neue Corp Tight";
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  /* REMOVE QUOTES AROUND VALUES HERE */
+  --breakpoint-xs: 420px;
+
+  --color-primary: var(--color-violet-700);
+  --color-secondary: var(--color-amber-600);
+  --color-tertiary: var(--color-slate-500);
+
+  /* Your Brand Palette */
+  --color-neutral-100: oklch(100% 0 0);
+  --color-neutral-200: oklch(94.93% 0.0029 84.56);
+  --color-neutral-300: oklch(91.05% 0.0046 78.3);
+  --color-neutral-400: oklch(83.43% 0.0053 67.75);
+  --color-neutral-500: oklch(60.29% 0.0015 106.44);
+  --color-neutral-600: oklch(29.31% 0 0);
+  --color-neutral-700: oklch(23.93% 0 0);
+  --color-neutral-800: oklch(18.67% 0 0);
+  --color-neutral-900: oklch(10.67% 0 0);
+
+  /* Dashboard Mapping */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-border: var(--border);
+
+  /* Dashboard Semantic Variables */
+  --color-dashboard-bg: var(--background);
+  --color-dashboard-card: var(--card);
+  --color-dashboard-text: var(--foreground);
+  --color-dashboard-sidebar: var(--card);
+  --color-dashboard-border: var(--border);
+}
+
+:root {
+  /* Light Mode: Soft warm off-white base with deep charcoal text */
+  --background: var(--color-neutral-50);
+  --foreground: var(--color-neutral-800);
+  --card: var(--color-neutral-50);
+  --border: var(--color-neutral-200);
+  /* Dashboard sidebar uses card color in light mode */
+  --color-dashboard-sidebar: var(--card);
+}
+
+/* Ensure this is exactly as Tailwind v4 expects for dark mode */
+@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Dark Mode: Deep midnight base with neutral-800 for cards/sidebars */
+  --background: var(--color-neutral-950);
+  --foreground: var(--color-neutral-100);
+  --card: var(--color-neutral-800);
+  --border: var(--color-neutral-700);
+  /* Dashboard sidebar uses card color in dark mode for depth */
+  --color-dashboard-sidebar: var(--card);
+}
+
+/* --- Utilities --- */
+@utility scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(155, 155, 155, 0.2);
+  border-radius: 10px;
+}
+
+/* Fixing the container logic that caused the crash */
+@layer base {
+  /* Dashboard-specific container - scoped to dashboard */
+  [data-dashboard="true"] .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (min-width: 420px) {
+    [data-dashboard="true"] .container {
+      max-width: 420px;
+    }
+  }
+
+  /* Dashboard body styles - scoped to dashboard container */
+  [data-dashboard="true"] {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
+  }
+
+  /* Auth pages (login) should also use dashboard fonts */
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+
+  .font-pp {
+    font-family: var(--font-pp);
+  }
+}
+
+/* Dashboard-specific utility classes with higher specificity */
+@layer utilities {
+  [data-dashboard="true"] .scrollbar-hidden {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  [data-dashboard="true"] .scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-dashboard="true"] .custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  [data-dashboard="true"] .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(155, 155, 155, 0.2);
+    border-radius: 10px;
+  }
+}
+
+/* Standardize theme transition duration across the entire dashboard */
+@layer base {
+  /* Apply consistent 300ms transition to all theme-related color changes */
+  /* This ensures smooth, synchronized theme switching */
+  /* Only target color-related properties to avoid interfering with layout animations */
+  [data-dashboard="true"],
+  [data-dashboard="true"] *,
+  [data-dashboard="true"] *::before,
+  [data-dashboard="true"] *::after {
+    /* Set default transition for color properties only */
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+  }
+  
+  /* Force all transition-colors to use 300ms for theme consistency */
+  [data-dashboard="true"] [class*="transition-colors"] {
+    transition-duration: 300ms !important;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+  
+  /* For transition-all: ensure consistent 300ms for theme synchronization */
+  /* When theme changes, all properties should transition together at the same speed */
+  /* This ensures visual consistency during theme switching */
+  [data-dashboard="true"] [class*="transition-all"] {
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,4 @@
+// This file just passes through to the [locale] layout
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return children;
+}

package/src/assets/locales/en/common.json

@@ -0,0 +1,47 @@
+{
+    "sidebar": {
+        "users": "Users",
+        "website": "Site",
+        "blog": "Blog",
+        "newsletter": "Newsletter",
+        "stats": "Analytics",
+        "logout": "Logout",
+        "logging_out": "Logging out..."
+    },
+    "dashboard": {
+        "status": "PLATFORM ACTIVE",
+        "welcome": "Welcome back, {name}",
+        "description": "Your modular ecosystem is ready. Monitor your stats, update your content, or manage your newsletters from one place.",
+        "your_modules": "Installed Modules",
+        "open_module": "Launch Module",
+        "module_desc": {
+            "users": "Manage user accounts, roles, and permissions.",
+            "website": "Configure site settings, pages, and navigation.",
+            "stats": "View real-time traffic and engagement data.",
+            "blog": "Publish and edit your latest articles.",
+            "newsletter": "Manage your subscribers and campaigns."
+        }
+    },
+    "profile": {
+        "personal_information": "Personal Information",
+        "full_name": "Full Name",
+        "email_address": "Email Address",
+        "save_changes": "Save Changes",
+        "updating": "Updating",
+        "verified_account": "Verified Account",
+        "login_activity": "Login Activity",
+        "current": "Current",
+        "revoke": "Revoke",
+        "revoking": "Revoking...",
+        "security_access": "Security & Access",
+        "change_password": "Change Password",
+        "two_factor_auth": "Two-Factor Auth",
+        "billing_details": "Billing Details",
+        "security_update": "Security Update",
+        "new_password": "New Password",
+        "confirm_new_password": "Confirm New Password",
+        "update_password": "Update Password",
+        "updating_password": "Updating...",
+        "terminate_session_confirm": "Are you sure you want to terminate this session?"
+    }
+}