@jhits/dashboard 0.0.1

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/next.config.ts

@@ -0,0 +1,32 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin(
+  './src/i18n/request.ts' // Path to your config file
+);
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+  allowedDevOrigins: ["localhost:3000", "192.168.68.104:3000"],
+  // Exclude server-only modules from client bundles
+  serverComponentsExternalPackages: [
+    '@jhits/plugin-telemetry/api/handler'
+  ],
+  webpack: (config, { isServer }) => {
+    // Ensure handler is only bundled on server
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        path: false,
+      };
+    }
+    return config;
+  },
+};
+
+export default withNextIntl(nextConfig);

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@jhits/dashboard",
+  "version": "0.0.1",
+  "description": "A comprehensive dashboard system built to manage custom built websites - plugin based SaaS system.",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./config": {
+      "types": "./src/config.ts",
+      "default": "./src/config.ts"
+    },
+    "./server": {
+      "types": "./src/server.ts",
+      "default": "./src/server.ts",
+      "node": "./src/server.ts"
+    },
+    "./catch-all": {
+      "types": "./src/app/[locale]/catch-all/page.tsx",
+      "default": "./src/app/[locale]/catch-all/page.tsx"
+    },
+    "./components/*": "./src/components/*",
+    "./lib/*": "./src/lib/*",
+    "./lib/auth": {
+      "types": "./src/lib/auth.ts",
+      "default": "./src/lib/auth.ts"
+    }
+  },
+  "scripts": {
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@jhits/plugin-blog": "^0.0.1",
+    "@jhits/plugin-content": "^0.0.1",
+    "@jhits/plugin-dep": "^0.0.1",
+    "@jhits/plugin-images": "^0.0.1",
+    "@jhits/plugin-telemetry": "^0.0.1",
+    "@jhits/plugin-users": "^0.0.1",
+    "@jhits/plugin-website": "^0.0.1",
+    "@jhits/plugin-newsletter": "^0.0.1",
+    "@types/jsonwebtoken": "^9.0.10",
+    "bcrypt": "^6.0.0",
+    "framer-motion": "^12.23.26",
+    "jsonwebtoken": "^9.0.3",
+    "lucide-react": "^0.562.0",
+    "mongodb": "^7.0.0",
+    "next-auth": "^4.24.13",
+    "next-intl": "^4.6.1",
+    "next-themes": "^0.4.6"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/bcrypt": "^6.0.0",
+    "@types/node": "^20.19.27",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "next.config.ts",
+    "postcss.config.mjs",
+    "tailwind.config.ts"
+  ]
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/src/api/README.md

@@ -0,0 +1,72 @@
+# Dashboard API Master Router
+
+Centralized API routing system for all dashboard plugin endpoints.
+
+## Overview
+
+The master router automatically routes API requests to the appropriate plugin handler based on the URL path prefix. This eliminates the need for the client app to know about individual plugin endpoints.
+
+## Architecture
+
+```
+Client App
+  └── /api/dashboard/[...path]/route.ts (catch-all)
+       └── handleDashboardApi() (master router)
+            ├── /telemetry → @jhits/plugin-telemetry/api/route
+            ├── /blog → @jhits/plugin-blog/api/route (TODO)
+            └── /users → @jhits/plugin-users/api/route (TODO)
+```
+
+## Usage
+
+### In Client App
+
+Create a catch-all route at `src/app/api/dashboard/[...path]/route.ts`:
+
+```typescript
+import { NextRequest } from 'next/server';
+import { handleDashboardApi } from '@jhits/dashboard/server';
+
+export async function POST(
+    req: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
+    const { path } = await params;
+    return handleDashboardApi(req, path);
+}
+
+// Add GET, PUT, DELETE, PATCH as needed
+```
+
+### Adding New Plugin Handlers
+
+1. Create your plugin handler in `@jhits/plugin-{name}/api/route.ts`:
+   ```typescript
+   import { NextRequest, NextResponse } from 'next/server';
+   
+   export async function POST(req: NextRequest): Promise<NextResponse> {
+       // Your handler logic
+   }
+   ```
+
+2. Add routing logic in `masterRouter.ts`:
+   ```typescript
+   if (pluginId === 'your-plugin') {
+       const { POST: yourPluginPOST } = await import('@jhits/plugin-your-plugin/api/route');
+       return await yourPluginPOST(req);
+   }
+   ```
+
+## Endpoints
+
+- `POST /api/dashboard/telemetry` - Telemetry logging
+- `POST /api/dashboard/blog` - Blog API (TODO)
+- `POST /api/dashboard/users` - Users API (TODO)
+
+## Benefits
+
+1. **Centralized Routing**: All plugin APIs go through one entry point
+2. **Easy Plugin Addition**: Add new plugins without modifying client app
+3. **Type Safety**: Full TypeScript support
+4. **Server-Only**: Handlers are only imported on the server side
+

package/src/api/masterRouter.ts

@@ -0,0 +1,150 @@
+/**
+ * Master Dashboard API Router
+ * Centralized router for all plugin API endpoints
+ * 
+ * This router automatically routes requests to the appropriate plugin handler
+ * based on the path prefix (e.g., /api/dashboard/telemetry -> telemetry handler)
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Extract user/session info from request headers or cookies
+ * Helper function for extracting context from NextRequest
+ */
+function extractContext(request: NextRequest): { userId?: string; sessionId?: string } {
+    // Try to get user ID from headers (custom header)
+    const userId = request.headers.get('x-user-id') || 
+                   request.headers.get('x-userid') ||
+                   undefined;
+    
+    // Try to get session ID from headers or cookies
+    const sessionId = request.headers.get('x-session-id') ||
+                      request.headers.get('x-sessionid') ||
+                      request.cookies.get('sessionId')?.value ||
+                      request.cookies.get('session')?.value ||
+                      undefined;
+
+    return { userId, sessionId };
+}
+
+/**
+ * Handle dashboard API requests
+ * Routes requests to appropriate plugin handlers based on path prefix
+ * 
+ * @param req - The incoming request
+ * @param path - Array of path segments from the catch-all route
+ * @returns Response from the appropriate plugin handler
+ */
+export async function handleDashboardApi(
+    req: NextRequest,
+    path: string[]
+): Promise<NextResponse> {
+    // Extract the first path segment as the plugin identifier
+    const pluginId = path[0] || '';
+
+    try {
+        // Route to telemetry handler
+        if (pluginId === 'telemetry') {
+            const { telemetryHandler } = await import('@jhits/plugin-telemetry/server');
+            
+            // Extract context from request
+            const { userId, sessionId } = extractContext(req);
+            
+            // Parse request body (handle empty bodies for GET requests)
+            let data: unknown;
+            try {
+                // Try to parse JSON body, but handle cases where body might be empty
+                const text = await req.text();
+                data = text ? JSON.parse(text) : null;
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            } catch (error) {
+                // If parsing fails, return error
+                return NextResponse.json(
+                    { success: false, error: 'Invalid JSON in request body' },
+                    { status: 400 }
+                );
+            }
+            
+            // Call telemetry handler with data and context
+            const result = await telemetryHandler(data, { userId, sessionId });
+            
+            // Return appropriate response based on result
+            if (result.success) {
+                return NextResponse.json(result);
+            } else {
+                return NextResponse.json(result, { status: 400 });
+            }
+        }
+
+        // Route to blog handler
+        if (pluginId === 'blog') {
+            // TODO: Import and call blog API handler when available
+            // For now, return a placeholder
+            return NextResponse.json(
+                { 
+                    success: false, 
+                    error: 'Blog API handler not yet implemented',
+                    path: path.join('/')
+                },
+                { status: 501 }
+            );
+        }
+
+        // Route to users handler (if needed)
+        if (pluginId === 'users') {
+            // Users API is already handled by separate routes
+            // This could be used for plugin-specific user operations
+            return NextResponse.json(
+                { 
+                    success: false, 
+                    error: 'Users API handler not yet implemented',
+                    path: path.join('/')
+                },
+                { status: 501 }
+            );
+        }
+
+        // Unknown plugin
+        return NextResponse.json(
+            { 
+                success: false, 
+                error: `Unknown plugin: ${pluginId}`,
+                availablePlugins: ['telemetry', 'blog', 'users'],
+                path: path.join('/')
+            },
+            { status: 404 }
+        );
+    } catch (error) {
+        console.error('[Master Router] Error routing request:', error);
+        return NextResponse.json(
+            { 
+                success: false, 
+                error: 'Internal server error',
+                message: error instanceof Error ? error.message : String(error)
+            },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * Convert standard Request to NextRequest for compatibility
+ * This is a helper for when the router is called from non-Next.js contexts
+ */
+export function createNextRequestFromRequest(
+    req: Request,
+    path: string[]
+): NextRequest {
+    // Create a new URL with the path
+    const url = new URL(req.url);
+    url.pathname = `/api/dashboard/${path.join('/')}`;
+    
+    // Create NextRequest from the modified request
+    return new NextRequest(url, {
+        method: req.method,
+        headers: req.headers,
+        body: req.body,
+    });
+}
+

package/src/api/pluginRouter.ts

@@ -0,0 +1,135 @@
+/**
+ * Unified Plugin API Router (Core Engine)
+ * Location: packages/jhits-dashboard/src/api/pluginRouter.ts
+ */
+import { NextRequest, NextResponse } from 'next/server';
+import { getToken } from 'next-auth/jwt';
+
+export interface PluginRouterConfig {
+    mongoClient?: Promise<MongoClient>;
+    authOptions?: AuthOptions;
+    jwtSecret?: string;
+    baseUrl?: string;
+    localesDir?: string;
+    uploadsDir?: string;
+    emailConfig?: {
+        host: string; port: number; user: string; password: string; from: string;
+    };
+    deploymentPaths?: { flagPath: string; scriptPath: string; };
+    githubWebhookSecret?: string;
+    plugins?: Record<string, unknown>;
+}
+
+/**
+ * Helper function to get user ID from request
+ * Uses NextAuth's getToken to extract user ID from session
+ */
+async function getUserIdFromRequest(req: NextRequest, jwtSecret?: string): Promise<string | null> {
+    try {
+        // Use NextAuth's getToken to get the session token
+        // This works with NextAuth's cookie-based sessions
+        const token = await getToken({ 
+            req, 
+            secret: process.env.NEXTAUTH_SECRET || jwtSecret 
+        });
+        
+        if (!token || !token.sub) return null;
+        
+        // NextAuth stores user ID in token.sub
+        return token.sub;
+    } catch {
+        return null;
+    }
+}
+
+/**
+ * Helper function to create getDb function from mongoClient
+ */
+import type { MongoClient, Db } from 'mongodb';
+import { AuthOptions } from 'next-auth';
+
+function createGetDb(mongoClient?: Promise<MongoClient>) {
+    return async () => {
+        if (!mongoClient) {
+            throw new Error('MongoDB client not configured');
+        }
+        const client = await mongoClient;
+        return { db: (dbName?: string): Db => client.db(dbName) };
+    };
+}
+
+/**
+ * Static import map for Turbopack compatibility
+ * 
+ * NOTE: Turbopack has a known limitation with subpath exports and relative imports
+ * in workspace packages. If /server imports fail, we fall back to root imports.
+ */
+const PLUGIN_SERVER_MAP: Record<string, () => Promise<unknown>> = {
+    'plugin-blog': () => import('@jhits/plugin-blog/server'),
+    'plugin-dep': () => import('@jhits/plugin-dep/server'),
+    'plugin-images': () => import('@jhits/plugin-images/server'),
+    'plugin-users': () => import('@jhits/plugin-users/server'),
+    'plugin-content': () => import('@jhits/plugin-content/server'),
+    'plugin-website': () => import('@jhits/plugin-website/server'),
+    'plugin-newsletter': () => import('@jhits/plugin-newsletter/server'),
+};
+
+/**
+ * Main Handler
+ * Expects normalized pluginIds (e.g., 'plugin-blog')
+ */
+export async function handlePluginApi(
+    req: NextRequest,
+    pluginId: string,
+    path: string[],
+    config: PluginRouterConfig
+): Promise<NextResponse> {
+    try {
+        const normalizedId = pluginId.startsWith('plugin-') ? pluginId : `plugin-${pluginId}`;
+
+        // Try server subpath export first
+        const importFn = PLUGIN_SERVER_MAP[normalizedId];
+
+        if (!importFn) {
+            console.error(`[PluginRouter] Unknown plugin: ${normalizedId}`);
+            return NextResponse.json({ error: `Plugin ${normalizedId} not found` }, { status: 404 });
+        }
+
+        let pluginModule;
+        try {
+            pluginModule = await importFn();
+        } catch (serverImportError: unknown) {
+            const message = serverImportError instanceof Error ? serverImportError.message : String(serverImportError);
+            // Turbopack workaround: If /server import fails, try root import
+            // This happens because Turbopack can't resolve relative imports in subpath exports
+            console.warn(`[PluginRouter] Server import failed for ${normalizedId}, trying root import:`, message);
+            pluginModule = await import(`@jhits/${normalizedId}`);
+        }
+
+        const handler = pluginModule.handleApi;
+
+        if (typeof handler !== 'function') {
+            return NextResponse.json({ error: "Handler not found" }, { status: 500 });
+        }
+
+        // Adapt config for plugins that need getDb, getUserId, authOptions, emailConfig, or baseUrl
+        const adaptedConfig = {
+            ...config,
+            // Add getDb if mongoClient is available (for plugin-blog, plugin-users, plugin-newsletter)
+            getDb: config.mongoClient ? createGetDb(config.mongoClient) : undefined,
+            // Add getUserId - uses NextAuth session token (works with or without jwtSecret)
+            getUserId: (req: NextRequest) => getUserIdFromRequest(req, config.jwtSecret),
+            // authOptions is already in config, but ensure it's passed through for plugin-users
+            // emailConfig and baseUrl are already in config, but ensure they're passed through for plugin-newsletter
+            emailConfig: config.emailConfig,
+            baseUrl: config.baseUrl,
+        };
+
+        return await handler(req, path, adaptedConfig);
+
+    } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(`[PluginRouter] Resolution Error:`, message);
+        return NextResponse.json({ error: "Plugin load failure" }, { status: 404 });
+    }
+}

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

@@ -0,0 +1,30 @@
+"use client";
+import React from 'react';
+import { motion } from 'framer-motion';
+import '../../globals.css';
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center p-4 relative overflow-hidden font-sans">
+
+            {/* 1. Ambient Background Glows */}
+            <div className="absolute inset-0 pointer-events-none">
+                <div className="absolute -top-[10%] -left-[10%] size-[50%] rounded-full bg-primary/5 blur-[120px] dark:bg-primary/10" />
+                <div className="absolute -bottom-[10%] -right-[10%] size-[50%] rounded-full bg-purple-500/5 blur-[120px] dark:bg-purple-500/10" />
+            </div>
+
+            {/* 2. Structural Wrapper */}
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.5 }}
+                className="w-full relative z-10"
+            >
+                {children}
+            </motion.div>
+
+            {/* 3. Subtle Grid Overlay (Optional - adds a technical "blueprint" feel) */}
+            <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))] pointer-events-none opacity-[0.03] dark:opacity-[0.05]" />
+        </div>
+    );
+}