@jhits/plugin-users 0.0.1

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@jhits/plugin-users",
+  "version": "0.0.1",
+  "description": "User management and authentication plugin for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "@jhits/plugin-core": "^0.0.1",
+    "bcrypt": "^6.0.0",
+    "bcryptjs": "^2.4.3",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.562.0",
+    "mongodb": "^7.0.0",
+    "next-auth": "^4.24.13"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/bcrypt": "^6.0.0",
+    "@types/bcryptjs": "^2.4.6",
+    "@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",
+    "package.json"
+  ]
+}

package/src/api/auth.ts

@@ -0,0 +1,83 @@
+/**
+ * Plugin Users - Auth API Handler
+ * NextAuth API route handler for App Router
+ * 
+ * This is a core plugin that provides authentication functionality.
+ * authOptions should be passed from the client app (typically from @jhits/dashboard/lib/auth)
+ */
+
+import NextAuth from 'next-auth';
+import type { NextAuthOptions } from 'next-auth';
+
+// Store authOptions - will be initialized by the client app
+let authOptionsInstance: NextAuthOptions | null = null;
+
+/**
+ * Initialize the auth handler with authOptions
+ * This should be called by the client app before handling auth requests
+ */
+export function initAuthHandler(authOptions: NextAuthOptions) {
+    authOptionsInstance = authOptions;
+}
+
+/**
+ * Get the NextAuth handler
+ * Throws an error if authOptions haven't been initialized
+ */
+function getHandler() {
+    if (!authOptionsInstance) {
+        throw new Error(
+            'Auth handler not initialized. Call initAuthHandler() with authOptions from @jhits/dashboard/lib/auth'
+        );
+    }
+    return NextAuth(authOptionsInstance);
+}
+
+// Export handlers - NextAuth handler works for both GET and POST
+// NextAuth expects the route to be /api/auth/[...nextauth] with path segments in context.params.nextauth
+export async function GET(req: any, context?: { params?: Promise<{ nextauth?: string[] }> }) {
+    const handler = getHandler();
+    
+    // Use context if provided, otherwise extract from URL
+    let nextauthPath: string[] = [];
+    if (context?.params) {
+        const resolvedParams = await context.params;
+        nextauthPath = resolvedParams.nextauth || [];
+    } else {
+        // Fallback: extract from URL
+        const url = new URL(req.url);
+        const pathSegments = url.pathname.split('/').filter(Boolean);
+        // Path: /api/auth/session -> segments: ['api', 'auth', 'session'] -> nextauth: ['session']
+        nextauthPath = pathSegments.length > 2 ? pathSegments.slice(2) : [];
+    }
+    
+    // Create context with nextauth parameter (NextAuth expects this)
+    const nextauthContext = {
+        params: Promise.resolve({ nextauth: nextauthPath })
+    };
+    
+    return handler(req, nextauthContext);
+}
+
+export async function POST(req: any, context?: { params?: Promise<{ nextauth?: string[] }> }) {
+    const handler = getHandler();
+    
+    // Use context if provided, otherwise extract from URL
+    let nextauthPath: string[] = [];
+    if (context?.params) {
+        const resolvedParams = await context.params;
+        nextauthPath = resolvedParams.nextauth || [];
+    } else {
+        // Fallback: extract from URL
+        const url = new URL(req.url);
+        const pathSegments = url.pathname.split('/').filter(Boolean);
+        nextauthPath = pathSegments.length > 2 ? pathSegments.slice(2) : [];
+    }
+    
+    const nextauthContext = {
+        params: Promise.resolve({ nextauth: nextauthPath })
+    };
+    
+    return handler(req, nextauthContext);
+}
+

package/src/api/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Plugin Users API Exports
+ */
+
+// Auth exports
+export { GET, POST, initAuthHandler } from './auth';
+
+// Users API exports
+export { handleUsersApi } from './router';
+export type { UsersApiConfig } from './users';
+

package/src/api/router.ts

@@ -0,0 +1,100 @@
+'use server';
+
+/**
+ * Plugin Users API Router
+ * Centralized API handler for all users plugin routes
+ * 
+ * This router handles requests to:
+ * - /api/auth/[...nextauth] (NextAuth routes)
+ * - /api/users (user management routes)
+ * - /api/plugin-users/* (plugin-specific routes)
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { UsersApiConfig } from './users';
+import { GET_USERS, POST_USERS, PATCH_USER, DELETE_USER } from './users';
+import { GET as AuthGET, POST as AuthPOST, initAuthHandler } from './auth';
+
+/**
+ * Handle users API requests
+ * Routes requests to appropriate handlers based on path
+ * Handles both NextAuth routes (/api/auth) and user management routes (/api/users)
+ */
+export async function handleUsersApi(
+    req: NextRequest,
+    path: string[],
+    config: UsersApiConfig
+): Promise<NextResponse> {
+    const method = req.method;
+    const route = path && path.length > 0 ? path[0] : '';
+
+    try {
+        // Initialize auth handler if authOptions are provided
+        if (config.authOptions) {
+            initAuthHandler(config.authOptions);
+        }
+
+        // Route: /api/auth/[...nextauth] - NextAuth routes
+        // When routed from /api/auth, the path contains the nextauth segments
+        // Path structure: /api/auth/session -> path: ['session']
+        // Path structure: /api/auth/signin -> path: ['signin']
+        // Path structure: /api/auth -> path: [] (empty)
+        // We handle this by checking if route is empty (root /api/auth) or if it's a known NextAuth route
+        const isNextAuthRoute = route === '' || 
+            ['session', 'signin', 'signout', 'callback', 'csrf', 'providers', 'error'].includes(route);
+        
+        if (isNextAuthRoute) {
+            // This is a NextAuth route - use the path as nextauth segments
+            // For /api/auth, path is [] -> nextauthPath is []
+            // For /api/auth/session, path is ['session'] -> nextauthPath is ['session']
+            const nextauthPath = path;
+            
+            // Create NextAuth context
+            const nextauthContext = {
+                params: Promise.resolve({ nextauth: nextauthPath })
+            };
+
+            if (method === 'GET') {
+                return await AuthGET(req, nextauthContext);
+            }
+            if (method === 'POST') {
+                return await AuthPOST(req, nextauthContext);
+            }
+        }
+
+        // Route: /api/users or /api/plugin-users/users (user management)
+        if (route === 'users') {
+            if (path.length === 1) {
+                // /api/users or /api/plugin-users/users
+                if (method === 'GET') {
+                    return await GET_USERS(req, config);
+                }
+                if (method === 'POST') {
+                    return await POST_USERS(req, config);
+                }
+            } else if (path.length === 2) {
+                // /api/users/[id] or /api/plugin-users/users/[id]
+                const userId = path[1];
+                if (method === 'PATCH') {
+                    return await PATCH_USER(req, userId, config);
+                }
+                if (method === 'DELETE') {
+                    return await DELETE_USER(req, userId, config);
+                }
+            }
+        }
+
+        // Method not allowed
+        return NextResponse.json(
+            { error: `Method ${method} not allowed for route: ${route || '/'}` },
+            { status: 405 }
+        );
+    } catch (error: any) {
+        console.error('[UsersApiRouter] Error:', error);
+        return NextResponse.json(
+            { error: error.message || 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api/users.ts

@@ -0,0 +1,208 @@
+/**
+ * Plugin Users - Users API Handler
+ * Handles user management API routes
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { ObjectId } from 'mongodb';
+import bcrypt from 'bcryptjs';
+
+export interface UsersApiConfig {
+    /** MongoDB client promise */
+    getDb: () => Promise<{ db: () => any }>;
+    /** Collection name (default: 'users') */
+    collectionName?: string;
+    /** NextAuth options for authentication routes */
+    authOptions?: any;
+}
+
+/**
+ * GET /api/plugin-users/users - List all users
+ */
+export async function GET_USERS(req: NextRequest, config: UsersApiConfig): Promise<NextResponse> {
+    try {
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const users = db.collection(config.collectionName || 'users');
+        
+        // Exclude passwords for security
+        const userList = await users
+            .find({}, { projection: { password: 0 } })
+            .toArray();
+
+        return NextResponse.json(userList);
+    } catch (err: any) {
+        console.error('[UsersAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to fetch users', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-users/users - Create new user
+ */
+export async function POST_USERS(req: NextRequest, config: UsersApiConfig): Promise<NextResponse> {
+    try {
+        const { email, name, role, password } = await req.json();
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const users = db.collection(config.collectionName || 'users');
+
+        // Validation
+        if (!password || password.length < 6) {
+            return NextResponse.json(
+                { error: 'Password too short (minimum 6 characters)' },
+                { status: 400 }
+            );
+        }
+
+        const exists = await users.findOne({ email });
+        if (exists) {
+            return NextResponse.json(
+                { error: 'User already exists' },
+                { status: 400 }
+            );
+        }
+
+        // Hash the password
+        const hashedPassword = await bcrypt.hash(password, 12);
+
+        // Save to DB
+        const result = await users.insertOne({
+            email,
+            name,
+            role: role || 'editor',
+            password: hashedPassword,
+            createdAt: new Date(),
+        });
+
+        return NextResponse.json({
+            _id: result.insertedId,
+            email,
+            name,
+            role: role || 'editor',
+            createdAt: new Date()
+        }, { status: 201 });
+    } catch (err: any) {
+        console.error('[UsersAPI] POST error:', err);
+        return NextResponse.json(
+            { error: 'Failed to create user', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * PATCH /api/plugin-users/users/[id] - Update user
+ */
+export async function PATCH_USER(
+    req: NextRequest,
+    userId: string,
+    config: UsersApiConfig
+): Promise<NextResponse> {
+    try {
+        const { role, name, password, currentPassword } = await req.json();
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const users = db.collection(config.collectionName || 'users');
+
+        // Prepare the update object
+        const updateData: any = { updatedAt: new Date() };
+        if (role) updateData.role = role;
+        if (name) updateData.name = name;
+
+        // Handle Password Update Logic
+        if (password) {
+            // Find the user first to verify identity
+            const user = await users.findOne({ _id: new ObjectId(userId) });
+
+            if (!user) {
+                return NextResponse.json({ error: 'User not found' }, { status: 404 });
+            }
+
+            // Safety Check: Verify current password before allowing change
+            if (!currentPassword) {
+                return NextResponse.json(
+                    { error: 'Current password is required' },
+                    { status: 400 }
+                );
+            }
+
+            const isCorrect = await bcrypt.compare(currentPassword, user.password);
+            if (!isCorrect) {
+                return NextResponse.json(
+                    { error: 'Current password is incorrect' },
+                    { status: 401 }
+                );
+            }
+
+            // Hash the NEW password
+            if (password.length < 6) {
+                return NextResponse.json(
+                    { error: 'New password too short (minimum 6 characters)' },
+                    { status: 400 }
+                );
+            }
+            updateData.password = await bcrypt.hash(password, 12);
+        }
+
+        // Execute the Update
+        const result = await users.updateOne(
+            { _id: new ObjectId(userId) },
+            { $set: updateData }
+        );
+
+        if (result.matchedCount === 0) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
+        return NextResponse.json({ message: 'Update successful' });
+    } catch (err: any) {
+        console.error('[UsersAPI] PATCH error:', err);
+        return NextResponse.json(
+            { error: 'Update failed', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * DELETE /api/plugin-users/users/[id] - Delete user
+ */
+export async function DELETE_USER(
+    req: NextRequest,
+    userId: string,
+    config: UsersApiConfig
+): Promise<NextResponse> {
+    try {
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const users = db.collection(config.collectionName || 'users');
+
+        // Safety check: Prevent deleting developer account
+        const user = await users.findOne({ _id: new ObjectId(userId) });
+        if (user?.role === 'dev') {
+            return NextResponse.json(
+                { error: 'Cannot delete developer account' },
+                { status: 403 }
+            );
+        }
+
+        const result = await users.deleteOne({ _id: new ObjectId(userId) });
+        
+        if (result.deletedCount === 0) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
+        return NextResponse.json({ message: 'User deleted' });
+    } catch (err: any) {
+        console.error('[UsersAPI] DELETE error:', err);
+        return NextResponse.json(
+            { error: 'Delete failed', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+

package/src/api-server.ts

@@ -0,0 +1,11 @@
+/**
+ * Plugin Users - Server-Only API Exports
+ * This file is only imported in server-side code (API routes)
+ * 
+ * IMPORTANT: This file uses Node.js modules and should NEVER
+ * be imported in client-side code. Only use in server-side API routes.
+ */
+
+// Re-export everything from the API index
+export * from './api';
+

package/src/index.server.ts

@@ -0,0 +1,12 @@
+/**
+ * Plugin Users - Server-Only Entry Point
+ * This file exports only server-side API handlers
+ * Used by the dynamic plugin router via @jhits/plugin-users/server
+ * 
+ * Note: This file is server-only (no 'use server' needed - that's only for Server Actions)
+ */
+
+export { handleUsersApi as handleApi } from './api/router';
+export { handleUsersApi } from './api/router'; // Keep original export for backward compatibility
+export type { UsersApiConfig } from './api/users';
+

package/src/index.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React from 'react';
+import UserManagement from './views/UserManagement';
+
+// User Management Plugin - Always enabled by default
+export const Index: React.FC<any> = ({ subPath = [], siteId, locale: dashboardLocale = 'en' }) => {
+    return (
+        <div className="w-full h-full flex flex-col overflow-hidden">
+            <div className="flex-1 overflow-y-auto">
+                <UserManagement locale={dashboardLocale} />
+            </div>
+        </div>
+    );
+};
+
+export default Index;
+
+// Note: API handlers are server-only and exported from ./index.ts (server entry point)
+// They are NOT exported here to prevent client/server context mixing
+

package/src/locales/en.json

@@ -0,0 +1,25 @@
+{
+  "title": "User Management",
+  "description": "Manage who has access to the dashboard.",
+  "newUser": "New User",
+  "searchUsers": "Search users...",
+  "user": "User",
+  "role": "Role",
+  "since": "Since",
+  "actions": "Actions",
+  "noUsersFound": "No users found matching your search.",
+  "addUser": "Add User",
+  "name": "Name",
+  "email": "Email Address",
+  "temporaryPassword": "Temporary Password",
+  "generateNewPassword": "Generate new password",
+  "editor": "Editor (Content only)",
+  "dev": "Developer",
+  "admin": "Admin (All settings)",
+  "cannotDeleteDev": "Cannot delete developer account.",
+  "confirmDelete": "Are you sure you want to delete this user?",
+  "errorDeleting": "Error deleting user.",
+  "failedToCreate": "Failed to create user",
+  "networkError": "Network error while creating user"
+}
+

package/src/locales/nl.json

@@ -0,0 +1,25 @@
+{
+  "title": "Gebruikersbeheer",
+  "description": "Beheer wie toegang heeft tot het dashboard.",
+  "newUser": "Nieuwe Gebruiker",
+  "searchUsers": "Zoek gebruikers...",
+  "user": "Gebruiker",
+  "role": "Rol",
+  "since": "Sinds",
+  "actions": "Acties",
+  "noUsersFound": "Geen gebruikers gevonden die voldoen aan je zoekopdracht.",
+  "addUser": "Gebruiker Toevoegen",
+  "name": "Naam",
+  "email": "E-mailadres",
+  "temporaryPassword": "Tijdelijk Wachtwoord",
+  "generateNewPassword": "Genereer nieuw wachtwoord",
+  "editor": "Editor (Alleen content)",
+  "dev": "Developer",
+  "admin": "Admin (Alle instellingen)",
+  "cannotDeleteDev": "Developer kan niet verwijderd worden.",
+  "confirmDelete": "Weet je zeker dat je deze gebruiker wilt verwijderen?",
+  "errorDeleting": "Fout bij verwijderen.",
+  "failedToCreate": "Aanmaken mislukt",
+  "networkError": "Netwerkfout bij aanmaken gebruiker"
+}
+

package/src/locales/sv.json

@@ -0,0 +1,25 @@
+{
+  "title": "Användarhantering",
+  "description": "Hantera vem som har tillgång till instrumentpanelen.",
+  "newUser": "Ny Användare",
+  "searchUsers": "Sök användare...",
+  "user": "Användare",
+  "role": "Roll",
+  "since": "Sedan",
+  "actions": "Åtgärder",
+  "noUsersFound": "Inga användare hittades som matchar din sökning.",
+  "addUser": "Lägg till Användare",
+  "name": "Namn",
+  "email": "E-postadress",
+  "temporaryPassword": "Tillfälligt Lösenord",
+  "generateNewPassword": "Generera nytt lösenord",
+  "editor": "Redaktör (Endast innehåll)",
+  "dev": "Utvecklare",
+  "admin": "Administratör (Alla inställningar)",
+  "cannotDeleteDev": "Kan inte ta bort utvecklarkonto.",
+  "confirmDelete": "Är du säker på att du vill ta bort denna användare?",
+  "errorDeleting": "Fel vid borttagning av användare.",
+  "failedToCreate": "Misslyckades med att skapa användare",
+  "networkError": "Nätverksfel vid skapande av användare"
+}
+

package/src/views/UserManagement.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import {
+    Users, UserPlus, Shield,
+    Trash2, Key, Search, Loader2, X, Eye, EyeOff, Copy, Check, Calendar
+} from "lucide-react";
+
+interface User {
+    _id: string;
+    name: string;
+    email: string;
+    role: 'dev' | 'admin' | 'editor';
+    createdAt: string;
+}
+
+export default function UserManagement({ locale = 'en' }: { locale?: string }) {
+    const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState("");
+
+    // Modal State
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isCreating, setIsCreating] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    // Form State
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+        password: "",
+        role: "editor" as const
+    });
+
+    const fetchUsers = async () => {
+        try {
+            setLoading(true);
+            const res = await fetch('/api/users');
+            const data = await res.json();
+            if (Array.isArray(data)) setUsers(data);
+        } catch (err) {
+            console.error("Failed to load users", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => { fetchUsers(); }, []);
+
+    const generateTempPassword = () => {
+        const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%";
+        let retVal = "";
+        for (let i = 0, n = charset.length; i < 10; ++i) {
+            retVal += charset.charAt(Math.floor(Math.random() * n));
+        }
+        setFormData({ ...formData, password: retVal });
+    };
+
+    const handleCreateUser = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsCreating(true);
+        try {
+            const res = await fetch('/api/users', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData)
+            });
+
+            if (res.ok) {
+                const newUser = await res.json();
+                setUsers([...users, newUser]);
+                setIsModalOpen(false);
+                setFormData({ name: "", email: "", password: "", role: "editor" });
+            } else {
+                const err = await res.json();
+                alert(err.error || "Failed to create user");
+            }
+        } catch (err) {
+            alert("Network error while creating user");
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(formData.password);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    const handleDelete = async (userId: string, userRole: string) => {
+        if (userRole === 'dev') return alert("Cannot delete developer account.");
+        if (!confirm("Are you sure you want to delete this user?")) return;
+
+        try {
+            const res = await fetch(`/api/users/${userId}`, { method: 'DELETE' });
+            if (res.ok) setUsers(users.filter(u => u._id !== userId));
+        } catch (err) { alert("Error deleting user."); }
+    };
+
+    const filteredUsers = users.filter(user =>
+        user.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        user.email?.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+        <div className="p-4 rounded-[2.5rem] sm:p-8 space-y-6 sm:space-y-8 animate-in fade-in duration-500 max-w-[1400px] mx-auto">
+            {/* Header */}
+            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-4">
+                <div>
+                    <h1 className="text-2xl sm:text-3xl font-pp uppercase font-bold text-neutral-900 dark:text-neutral-100">User Management</h1>
+                    <p className="text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium">Manage who has access to the dashboard.</p>
+                </div>
+                <button
+                    onClick={() => { setIsModalOpen(true); generateTempPassword(); }}
+                    className="flex items-center justify-center gap-2 px-5 py-3 bg-primary text-white rounded-xl font-bold hover:bg-primary/90 transition-all shadow-lg text-sm sm:text-base"
+                >
+                    <UserPlus size={18} /> New User
+                </button>
+            </div>
+
+            {/* Toolbar */}
+            <div className="bg-dashboard-card rounded-2xl sm:rounded-[2rem] border border-dashboard-border shadow-sm overflow-hidden">
+                <div className="p-4 sm:p-6 border-b border-dashboard-border flex items-center justify-between bg-dashboard-bg">
+                    <div className="relative w-full sm:w-72">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" size={16} />
+                        <input
+                            type="text"
+                            placeholder="Search users..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="w-full pl-10 pr-4 py-2 bg-dashboard-card border border-dashboard-border rounded-lg text-sm outline-none focus:ring-2 focus:ring-primary/20 transition-all text-dashboard-text"
+                        />
+                    </div>
+                    {loading && <Loader2 className="animate-spin text-primary ml-4" size={20} />}
+                </div>
+
+                {/* Desktop Table */}
+                <div className="hidden md:block overflow-x-auto">
+                    <table className="w-full text-left border-collapse">
+                        <thead>
+                            <tr className="text-[11px] font-bold text-neutral-400 uppercase tracking-widest border-b border-dashboard-border">
+                                <th className="px-8 py-4">User</th>
+                                <th className="px-8 py-4">Role</th>
+                                <th className="px-8 py-4">Since</th>
+                                <th className="px-8 py-4 text-right">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-neutral-100 dark:divide-neutral-800">
+                            {filteredUsers.map((user) => (
+                                <tr key={user._id} className="group hover:bg-dashboard-bg transition-colors">
+                                    <td className="px-8 py-5">
+                                        <div className="flex items-center gap-3">
+                                            <div className="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold border border-primary/20">
+                                                {user.name?.[0] || 'U'}
+                                            </div>
+                                            <div>
+                                                <p className="font-bold text-dashboard-text text-sm">{user.name}</p>
+                                                <p className="text-xs text-neutral-400">{user.email}</p>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-8 py-5">
+                                        <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider ${user.role === 'dev' ? 'bg-primary text-white' : 'bg-dashboard-bg text-dashboard-text'
+                                            }`}>
+                                            <Shield size={10} /> {user.role}
+                                        </span>
+                                    </td>
+                                    <td className="px-8 py-5 text-sm text-neutral-500 dark:text-neutral-400">
+                                        {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}
+                                    </td>
+                                    <td className="px-8 py-5 text-right">
+                                        <button
+                                            onClick={() => handleDelete(user._id, user.role)}
+                                            className="p-2 text-neutral-300 dark:text-neutral-600 hover:text-red-500 transition-colors disabled:opacity-0"
+                                            disabled={user.role === 'dev'}
+                                        >
+                                            <Trash2 size={16} />
+                                        </button>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* Mobile Card List */}
+                <div className="md:hidden divide-y divide-neutral-100 dark:divide-neutral-800">
+                    {filteredUsers.map((user) => (
+                        <div key={user._id} className="p-5 space-y-4">
+                            <div className="flex justify-between items-start">
+                                <div className="flex items-center gap-3">
+                                    <div className="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold border border-primary/20">
+                                        {user.name?.[0] || 'U'}
+                                    </div>
+                                    <div className="min-w-0">
+                                        <p className="font-bold text-neutral-900 dark:text-neutral-100 text-sm truncate">{user.name}</p>
+                                        <p className="text-[11px] text-neutral-400 truncate">{user.email}</p>
+                                    </div>
+                                </div>
+                                <button
+                                    onClick={() => handleDelete(user._id, user.role)}
+                                    className={`p-2 rounded-lg bg-red-50 dark:bg-red-950/20 text-red-400 ${user.role === 'dev' ? 'hidden' : 'block'}`}
+                                >
+                                    <Trash2 size={16} />
+                                </button>
+                            </div>
+
+                            <div className="flex items-center justify-between pt-2 border-t border-neutral-100 dark:border-neutral-800">
+                                <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-wider ${user.role === 'dev' ? 'bg-primary text-white' : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300'
+                                    }`}>
+                                    <Shield size={10} /> {user.role}
+                                </span>
+                                <div className="flex items-center gap-1.5 text-[10px] text-neutral-400 font-medium">
+                                    <Calendar size={12} />
+                                    {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {filteredUsers.length === 0 && !loading && (
+                    <div className="p-12 text-center text-neutral-400 text-sm">
+                        No users found matching your search.
+                    </div>
+                )}
+            </div>
+
+            {/* Create User Modal */}
+            {isModalOpen && (
+                <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/20 backdrop-blur-sm animate-in fade-in duration-200">
+                    <div className="bg-white dark:bg-neutral-900 w-full max-w-md rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl overflow-hidden animate-in slide-in-from-bottom sm:zoom-in-95 duration-300 max-h-[90vh] overflow-y-auto">
+                        <div className="p-6 sm:p-8 bg-primary text-white flex justify-between items-center sticky top-0 z-10">
+                            <h2 className="text-xl sm:text-2xl font-pp uppercase font-bold">New User</h2>
+                            <button onClick={() => setIsModalOpen(false)} className="hover:rotate-90 transition-transform p-2">
+                                <X size={24} />
+                            </button>
+                        </div>
+
+                        <form onSubmit={handleCreateUser} className="p-6 sm:p-8 space-y-5">
+                            <div className="space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest ml-1">Name</label>
+                                <input
+                                    required
+                                    className="w-full px-5 py-3 bg-dashboard-bg border-none rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm transition-all text-dashboard-text"
+                                    value={formData.name}
+                                    onChange={e => setFormData({ ...formData, name: e.target.value })}
+                                    placeholder="e.g. John Doe"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest ml-1">Email Address</label>
+                                <input
+                                    required
+                                    type="email"
+                                    className="w-full px-5 py-3 bg-dashboard-bg border-none rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm transition-all text-dashboard-text"
+                                    value={formData.email}
+                                    onChange={e => setFormData({ ...formData, email: e.target.value })}
+                                    placeholder="email@example.com"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest ml-1">Temporary Password</label>
+                                <div className="relative">
+                                    <input
+                                        required
+                                        type={showPassword ? "text" : "password"}
+                                        className="w-full px-5 py-3 bg-neutral-100 dark:bg-neutral-800 border-none rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm transition-all font-mono text-neutral-900 dark:text-neutral-100"
+                                        value={formData.password}
+                                        onChange={e => setFormData({ ...formData, password: e.target.value })}
+                                    />
+                                    <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                                        <button type="button" onClick={() => setShowPassword(!showPassword)} className="p-1.5 text-neutral-400 hover:text-primary">
+                                            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                                        </button>
+                                        <button type="button" onClick={copyToClipboard} className="p-1.5 text-neutral-400 hover:text-primary">
+                                            {copied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} />}
+                                        </button>
+                                    </div>
+                                </div>
+                                <button
+                                    type="button"
+                                    onClick={generateTempPassword}
+                                    className="text-[10px] text-primary font-bold uppercase tracking-wider hover:underline ml-1"
+                                >
+                                    Generate new password
+                                </button>
+                            </div>
+
+                            <div className="space-y-2">
+                                <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest ml-1">Role</label>
+                                <div className="relative">
+                                    <select
+                                        className="w-full px-5 py-3 bg-neutral-100 dark:bg-neutral-800 border-none rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm appearance-none cursor-pointer text-neutral-900 dark:text-neutral-100"
+                                        value={formData.role}
+                                        onChange={e => setFormData({ ...formData, role: e.target.value as any })}
+                                    >
+                                        <option value="editor">Editor (Content only)</option>
+                                        <option value="dev">Developer</option>
+                                        <option value="admin">Admin (All settings)</option>
+                                    </select>
+                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
+                                        <Shield size={16} />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <button
+                                type="submit"
+                                disabled={isCreating}
+                                className="w-full py-4 bg-primary text-white rounded-2xl font-bold shadow-lg shadow-primary/20 hover:bg-primary/90 transition-all mt-4 flex items-center justify-center gap-2"
+                            >
+                                {isCreating ? <Loader2 className="animate-spin" size={20} /> : "Add User"}
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+