@jhits/dashboard 0.0.6 → 0.0.8

package/src/lib/generate-dashboard-metadata.ts

@@ -0,0 +1,53 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { getWebsiteInfo } from "./get-website-info";
+
+/**
+ * Generates metadata for dashboard and login routes
+ * This function should be used in the client app's layout.tsx
+ * 
+ * @param locale - The locale string
+ * @returns Metadata object for dashboard/login routes, or null if not a dashboard route
+ */
+export async function generateDashboardMetadata(locale: string): Promise<Metadata | null> {
+  // Check if this is a dashboard or login route
+  const headersList = await headers();
+  const pathname = headersList.get('x-pathname') || headersList.get('x-url') || '';
+  const isDashboardRoute = pathname.includes('/dashboard');
+  const isLoginRoute = pathname.includes('/login');
+
+  // Return null if not a dashboard/login route (client app should handle its own metadata)
+  if (!isDashboardRoute && !isLoginRoute) {
+    return null;
+  }
+
+  // Get website info for dashboard metadata
+  try {
+    const websiteInfo = await getWebsiteInfo(locale);
+    const siteName = websiteInfo.name || "Website";
+    const siteTagline = websiteInfo.tagline || "";
+
+    return {
+      title: `${siteName} Dashboard | ${siteTagline || "Platform V2"}`,
+      description: `Manage ${siteName}. Monitor your stats, update your content, or manage your newsletters from one place.`,
+      icons: {
+        icon: [
+          { url: '/logo_black.svg', media: '(prefers-color-scheme: light)' },
+          { url: '/logo_white.svg', media: '(prefers-color-scheme: dark)' },
+        ],
+      },
+    };
+  } catch (e) {
+    // Fallback if DB is down or website info unavailable
+    return {
+      title: "JHITS Dashboard | Platform V2",
+      description: "Your modular ecosystem dashboard. Monitor your stats, update your content, or manage your newsletters from one place.",
+      icons: {
+        icon: [
+          { url: '/logo_black.svg', media: '(prefers-color-scheme: light)' },
+          { url: '/logo_white.svg', media: '(prefers-color-scheme: dark)' },
+        ],
+      },
+    };
+  }
+}

package/src/lib/modules-config.ts

@@ -1,5 +1,3 @@
-import 'server-only';
-
 // src/lib/modules-config.ts
 import { BarChart3, Newspaper, Globe, Users, Mail, type LucideIcon } from 'lucide-react';
 

package/src/lib/plugin-registry.tsx

@@ -11,23 +11,24 @@ const library = pluginData as PluginManifest[];
 // Cache for resolved components to avoid recreating them
 const componentCache = new Map<string, React.ComponentType<PluginProps>>();
 
-// Dynamic plugin loader factory
-// This creates a loader function that dynamically imports plugins based on the JSON configuration
-// Plugins are loaded from @jhits/{repoName} where repoName comes from plugins.json
-function createDynamicPluginLoader(repoName: string): () => Promise<React.ComponentType<PluginProps>> {
-    return async () => {
-        try {
-            // Dynamically import the plugin package
-            // The package name follows the pattern: @jhits/{repoName}
-            const pluginModule = await import(`@jhits/${repoName}`);
-            // Return the default export or Index export
-            return pluginModule.default || pluginModule.Index;
-        } catch (error) {
-            console.error(`Failed to load plugin "${repoName}":`, error);
-            throw new Error(`Plugin "${repoName}" could not be loaded. Make sure it's installed and the package name matches @jhits/${repoName}`);
-        }
-    };
-}
+/**
+ * EXPLICIT LOADER MAP
+ * This is the fix for the "Module Not Found" (tls, net, fs) errors.
+ * By explicitly defining the imports, Turbopack/Webpack knows exactly 
+ * which files to bundle and can safely ignore the /server.ts files.
+ */
+const pluginLoaders: Record<string, () => Promise<any>> = {
+    'plugin-blog': () => import('@jhits/plugin-blog'),
+    'plugin-users': () => import('@jhits/plugin-users'),
+    // Note: plugin-dep is server-only and has no client UI, so it's not included here
+    // It's only used for server-side API routes via @jhits/plugin-dep/server
+    'plugin-telemetry': () => import('@jhits/plugin-telemetry'),
+    'plugin-website': () => import('@jhits/plugin-website'),
+    'plugin-images': () => import('@jhits/plugin-images'),
+    'plugin-content': () => import('@jhits/plugin-content'),
+    'plugin-newsletter': () => import('@jhits/plugin-newsletter'),
+    // Add any other plugins that appear in your plugins.json here
+};
 
 export const PluginRegistry = {
     // Returns the static data from JSON
@@ -35,37 +36,58 @@ export const PluginRegistry = {
         return library.find(p => p.routePrefix === prefix);
     },
 
-    // Resolves the actual React Component with caching
-    // Dynamically loads plugins based on the JSON configuration
-    // No hardcoded plugin list - everything comes from plugins.json
+    /**
+     * Resolves the actual React Component with caching
+     * Uses the explicit loader map to ensure clean bundling
+     */
     resolveComponent: (repoName: string) => {
-        // Check cache first
+        // 1. Check cache first
         if (componentCache.has(repoName)) {
             return componentCache.get(repoName)!;
         }
 
-        // Verify the plugin exists in the JSON configuration
+        // 2. Verify the plugin exists in the JSON configuration
         const pluginManifest = library.find(p => p.repo === repoName);
         if (!pluginManifest) {
-            throw new Error(
-                `Plugin "${repoName}" not found in plugins.json. ` +
-                `Available plugins: ${library.map(p => `${p.repo} (${p.id})`).join(', ')}`
-            );
+            throw new Error(`Plugin "${repoName}" not found in plugins.json.`);
         }
 
         if (!pluginManifest.enabled) {
             throw new Error(`Plugin "${repoName}" is disabled in plugins.json`);
         }
 
-        // Create dynamic loader for this plugin
-        const loader = createDynamicPluginLoader(repoName);
+        // 3. Get the explicit loader
+        const loader = pluginLoaders[repoName];
+
+        if (!loader) {
+            console.error(`[PluginRegistry] No loader found for "${repoName}". Add it to the pluginLoaders map.`);
+            // Fallback component so the whole app doesn't crash
+            return () => (
+                <div className="p-10 border-2 border-dashed border-red-500 text-red-500">
+                    Configuration Error: <b>{repoName}</b> is not registered in the loader map.
+                </div>
+            );
+        }
 
-        // Create and cache the component using dynamic import
+        // 4. Create and cache the component using dynamic import
         const Component = dynamic<PluginProps>(
-            loader,
+            async () => {
+                try {
+                    const pluginModule = await loader();
+                    // Supports both 'export default' and 'export const Index'
+                    return pluginModule.default || pluginModule.Index;
+                } catch (error) {
+                    console.error(`Failed to load plugin "${repoName}":`, error);
+                    throw error;
+                }
+            },
             {
-                loading: () => <div className="p-10 animate-pulse font-black uppercase">Mounting_Module...</div>,
-                ssr: false
+                loading: () => (
+                    <div className="p-10 animate-pulse font-black uppercase text-zinc-500">
+                        Mounting_{repoName.replace('-', '_')}...
+                    </div>
+                ),
+                ssr: false // Prevents server-side Node.js errors during hydration
             }
         );
 

package/src/server.ts

@@ -7,4 +7,5 @@ import 'server-only';
 
 export { handleDashboardApi, createNextRequestFromRequest } from './api/masterRouter';
 export { handlePluginApi, type PluginRouterConfig } from './api/pluginRouter';
+export { generateDashboardMetadata } from './lib/generate-dashboard-metadata';
 

package/src/api/README.md

@@ -1,72 +0,0 @@
-# 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/app/[locale]/layout.tsx

@@ -1,28 +0,0 @@
-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/api/auth/[...nextauth]/route.ts

@@ -1,6 +0,0 @@
-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

@@ -1,96 +0,0 @@
-/**
- * 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

@@ -1,88 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-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/layout.tsx

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