@jhits/plugin-users 0.0.5 → 0.0.7

package/dist/api/auth.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 type { NextAuthOptions } from 'next-auth';
+/**
+ * Initialize the auth handler with authOptions
+ * This should be called by the client app before handling auth requests
+ */
+export declare function initAuthHandler(authOptions: NextAuthOptions): void;
+export declare function GET(req: any, context?: {
+    params?: Promise<{
+        nextauth?: string[];
+    }>;
+}): Promise<any>;
+export declare function POST(req: any, context?: {
+    params?: Promise<{
+        nextauth?: string[];
+    }>;
+}): Promise<any>;
+//# sourceMappingURL=auth.d.ts.map

package/dist/api/auth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../src/api/auth.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAKjD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,WAAW,EAAE,eAAe,QAE3D;AAiBD,wBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAA;CAAE,gBAsB1F;AAED,wBAAsB,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAA;CAAE,gBAoB3F"}

package/dist/api/auth.js

@@ -0,0 +1,69 @@
+/**
+ * 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';
+// Store authOptions - will be initialized by the client app
+let authOptionsInstance = null;
+/**
+ * Initialize the auth handler with authOptions
+ * This should be called by the client app before handling auth requests
+ */
+export function initAuthHandler(authOptions) {
+    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, context) {
+    const handler = getHandler();
+    // Use context if provided, otherwise extract from URL
+    let nextauthPath = [];
+    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, context) {
+    const handler = getHandler();
+    // Use context if provided, otherwise extract from URL
+    let nextauthPath = [];
+    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/dist/api/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Plugin Users API Exports
+ */
+export { GET, POST, initAuthHandler } from './auth';
+export { handleUsersApi } from './router';
+export type { UsersApiConfig } from './users';
+//# sourceMappingURL=index.d.ts.map

package/dist/api/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/api/index.js

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

package/dist/api/router.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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';
+/**
+ * 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 declare function handleUsersApi(req: NextRequest, path: string[], config: UsersApiConfig): Promise<NextResponse>;
+//# sourceMappingURL=router.d.ts.map

package/dist/api/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/api/router.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC;;;;GAIG;AACH,wBAAsB,cAAc,CAChC,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,MAAM,EAAE,EACd,MAAM,EAAE,cAAc,GACvB,OAAO,CAAC,YAAY,CAAC,CAwEvB"}

package/dist/api/router.js

@@ -0,0 +1,80 @@
+'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 { NextResponse } from 'next/server';
+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, path, config) {
+    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) {
+        console.error('[UsersApiRouter] Error:', error);
+        return NextResponse.json({ error: error.message || 'Internal server error' }, { status: 500 });
+    }
+}

package/dist/api/users.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Plugin Users - Users API Handler
+ * Handles user management API routes
+ */
+import { NextRequest, NextResponse } from 'next/server';
+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 declare function GET_USERS(req: NextRequest, config: UsersApiConfig): Promise<NextResponse>;
+/**
+ * POST /api/plugin-users/users - Create new user
+ */
+export declare function POST_USERS(req: NextRequest, config: UsersApiConfig): Promise<NextResponse>;
+/**
+ * PATCH /api/plugin-users/users/[id] - Update user
+ */
+export declare function PATCH_USER(req: NextRequest, userId: string, config: UsersApiConfig): Promise<NextResponse>;
+/**
+ * DELETE /api/plugin-users/users/[id] - Delete user
+ */
+export declare function DELETE_USER(req: NextRequest, userId: string, config: UsersApiConfig): Promise<NextResponse>;
+//# sourceMappingURL=users.d.ts.map

package/dist/api/users.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"users.d.ts","sourceRoot":"","sources":["../../src/api/users.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,CAAA;KAAE,CAAC,CAAC;IACxC,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,WAAW,CAAC,EAAE,GAAG,CAAC;CACrB;AAED;;GAEG;AACH,wBAAsB,SAAS,CAAC,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAmB/F;AAED;;GAEG;AACH,wBAAsB,UAAU,CAAC,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAiDhG;AAED;;GAEG;AACH,wBAAsB,UAAU,CAC5B,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,cAAc,GACvB,OAAO,CAAC,YAAY,CAAC,CAiEvB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAC7B,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,cAAc,GACvB,OAAO,CAAC,YAAY,CAAC,CA6BvB"}

package/dist/api/users.js

@@ -0,0 +1,138 @@
+/**
+ * Plugin Users - Users API Handler
+ * Handles user management API routes
+ */
+import { NextResponse } from 'next/server';
+import { ObjectId } from 'mongodb';
+import bcrypt from 'bcryptjs';
+/**
+ * GET /api/plugin-users/users - List all users
+ */
+export async function GET_USERS(req, config) {
+    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) {
+        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, config) {
+    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) {
+        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, userId, config) {
+    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 = { 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) {
+        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, userId, config) {
+    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) {
+        console.error('[UsersAPI] DELETE error:', err);
+        return NextResponse.json({ error: 'Delete failed', detail: err.message }, { status: 500 });
+    }
+}

package/dist/api-server.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export * from './api';
+//# sourceMappingURL=api-server.d.ts.map

package/dist/api-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-server.d.ts","sourceRoot":"","sources":["../src/api-server.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,OAAO,CAAC"}

package/dist/api-server.js

@@ -0,0 +1,9 @@
+/**
+ * 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/dist/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Index: React.FC<any>;
+export default Index;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAQ/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import UserManagement from './views/UserManagement';
+// User Management Plugin - Always enabled by default
+export const Index = ({ subPath = [], siteId, locale: dashboardLocale = 'en' }) => {
+    return (_jsx("div", { className: "w-full h-full flex flex-col overflow-hidden", children: _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(UserManagement, { locale: dashboardLocale }) }) }));
+};
+export default Index;

package/dist/index.server.d.ts

@@ -0,0 +1,12 @@
+import 'server-only';
+/**
+ * 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';
+export type { UsersApiConfig } from './api/users';
+//# sourceMappingURL=index.server.d.ts.map

package/dist/index.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../src/index.server.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB;;;;;;GAMG;AAEH,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.server.js

@@ -0,0 +1,10 @@
+import 'server-only';
+/**
+ * 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

package/dist/views/UserManagement.d.ts

@@ -0,0 +1,4 @@
+export default function UserManagement({ locale }: {
+    locale?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserManagement.d.ts.map

package/dist/views/UserManagement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserManagement.d.ts","sourceRoot":"","sources":["../../src/views/UserManagement.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAa,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,2CA0T5E"}

package/dist/views/UserManagement.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { UserPlus, Shield, Trash2, Search, Loader2, X, Eye, EyeOff, Copy, Check, Calendar } from "lucide-react";
+export default function UserManagement({ locale = 'en' }) {
+    const [users, setUsers] = useState([]);
+    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"
+    });
+    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) => {
+        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, userRole) => {
+        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 (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-dashboard-card dark:bg-neutral-900 p-8 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "User Management" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Manage who has access to the dashboard." })] }), _jsxs("button", { onClick: () => { setIsModalOpen(true); generateTempPassword(); }, className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20", children: [_jsx(UserPlus, { size: 16 }), "New User"] })] }), _jsxs("div", { className: "bg-dashboard-bg dark:bg-neutral-800/50 rounded-2xl sm:rounded-[2rem] border border-dashboard-border overflow-hidden", children: [_jsxs("div", { className: "p-4 sm:p-6 border-b border-dashboard-border flex items-center justify-between", children: [_jsxs("div", { className: "relative w-full sm:w-72", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-dashboard-text-secondary", size: 16 }), _jsx("input", { type: "text", placeholder: "Search users...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full pl-10 pr-4 py-2.5 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 placeholder:text-dashboard-text-secondary" })] }), loading && _jsx(Loader2, { className: "animate-spin text-primary ml-4", size: 20 })] }), _jsx("div", { className: "hidden md:block overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-[11px] font-bold text-dashboard-text-secondary uppercase tracking-widest border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-4", children: "User" }), _jsx("th", { className: "px-8 py-4", children: "Role" }), _jsx("th", { className: "px-8 py-4", children: "Since" }), _jsx("th", { className: "px-8 py-4 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredUsers.map((user) => (_jsxs("tr", { className: "group hover:bg-dashboard-card transition-colors", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold border border-primary/20", children: user.name?.[0] || 'U' }), _jsxs("div", { children: [_jsx("p", { className: "font-bold text-dashboard-text text-sm", children: user.name }), _jsx("p", { className: "text-xs text-dashboard-text-secondary", children: user.email })] })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsxs("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'}`, children: [_jsx(Shield, { size: 10 }), " ", user.role] }) }), _jsx("td", { className: "px-8 py-5 text-sm text-dashboard-text-secondary", children: user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-' }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsx("button", { onClick: () => handleDelete(user._id, user.role), className: "p-2 text-dashboard-text-secondary hover:text-red-500 transition-colors disabled:opacity-0", disabled: user.role === 'dev', children: _jsx(Trash2, { size: 16 }) }) })] }, user._id))) })] }) }), _jsx("div", { className: "md:hidden divide-y divide-dashboard-border", children: filteredUsers.map((user) => (_jsxs("div", { className: "p-5 space-y-4", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold border border-primary/20", children: user.name?.[0] || 'U' }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-bold text-dashboard-text text-sm truncate", children: user.name }), _jsx("p", { className: "text-[11px] text-dashboard-text-secondary truncate", children: user.email })] })] }), _jsx("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'}`, children: _jsx(Trash2, { size: 16 }) })] }), _jsxs("div", { className: "flex items-center justify-between pt-2 border-t border-dashboard-border", children: [_jsxs("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-dashboard-bg text-dashboard-text'}`, children: [_jsx(Shield, { size: 10 }), " ", user.role] }), _jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-dashboard-text-secondary font-medium", children: [_jsx(Calendar, { size: 12 }), user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'] })] })] }, user._id))) }), filteredUsers.length === 0 && !loading && (_jsx("div", { className: "p-12 text-center text-dashboard-text-secondary text-sm", children: "No users found matching your search." }))] }), isModalOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-200", children: _jsxs("div", { className: "bg-dashboard-card 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 border border-dashboard-border", children: [_jsxs("div", { className: "p-6 sm:p-8 bg-primary text-white flex justify-between items-center sticky top-0 z-10", children: [_jsx("h2", { className: "text-xl sm:text-2xl font-black uppercase tracking-tighter", children: "New User" }), _jsx("button", { onClick: () => setIsModalOpen(false), className: "hover:rotate-90 transition-transform p-2", children: _jsx(X, { size: 24 }) })] }), _jsxs("form", { onSubmit: handleCreateUser, className: "p-6 sm:p-8 space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest ml-1", children: "Name" }), _jsx("input", { required: true, className: "w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border 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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest ml-1", children: "Email Address" }), _jsx("input", { required: true, type: "email", className: "w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border 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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest ml-1", children: "Temporary Password" }), _jsxs("div", { className: "relative", children: [_jsx("input", { required: true, type: showPassword ? "text" : "password", className: "w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm transition-all font-mono text-dashboard-text", value: formData.password, onChange: e => setFormData({ ...formData, password: e.target.value }) }), _jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "p-1.5 text-dashboard-text-secondary hover:text-primary", children: showPassword ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) }), _jsx("button", { type: "button", onClick: copyToClipboard, className: "p-1.5 text-dashboard-text-secondary hover:text-primary", children: copied ? _jsx(Check, { size: 16, className: "text-emerald-500" }) : _jsx(Copy, { size: 16 }) })] })] }), _jsx("button", { type: "button", onClick: generateTempPassword, className: "text-[10px] text-primary font-bold uppercase tracking-wider hover:underline ml-1", children: "Generate new password" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest ml-1", children: "Role" }), _jsxs("div", { className: "relative", children: [_jsxs("select", { className: "w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm appearance-none cursor-pointer text-dashboard-text", value: formData.role, onChange: e => setFormData({ ...formData, role: e.target.value }), children: [_jsx("option", { value: "editor", children: "Editor (Content only)" }), _jsx("option", { value: "dev", children: "Developer" }), _jsx("option", { value: "admin", children: "Admin (All settings)" })] }), _jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-dashboard-text-secondary", children: _jsx(Shield, { size: 16 }) })] })] }), _jsx("button", { type: "submit", disabled: isCreating, className: "w-full py-4 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg shadow-primary/20 hover:bg-primary/90 transition-all mt-4 flex items-center justify-center gap-2", children: isCreating ? _jsx(Loader2, { className: "animate-spin", size: 20 }) : "Add User" })] })] }) }))] }));
+}

package/package.json

@@ -1,34 +1,37 @@
 {
   "name": "@jhits/plugin-users",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "User management and authentication plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./src/index.tsx",
-  "types": "./src/index.tsx",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./server": {
-      "types": "./src/index.server.ts",
-      "default": "./src/index.server.ts"
+      "types": "./dist/index.server.d.ts",
+      "default": "./dist/index.server.js"
     }
   },
+  "scripts": {
+    "build": "tsc"
+  },
   "dependencies": {
     "@jhits/plugin-core": "^0.0.2",
     "bcrypt": "^6.0.0",
     "bcryptjs": "^3.0.3",
-    "framer-motion": "^12.27.5",
-    "lucide-react": "^0.562.0",
-    "mongodb": "^7.0.0",
+    "framer-motion": "^12.34.0",
+    "lucide-react": "^0.564.0",
+    "mongodb": "^7.1.0",
     "next-auth": "^4.24.13",
     "@types/bcrypt": "^6.0.0",
     "@types/bcryptjs": "^3.0.0",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.9",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3"
   },
   "peerDependencies": {
@@ -38,16 +41,17 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
-    "eslint": "^9.39.2",
-    "eslint-config-next": "16.1.4",
-    "next": "16.1.4",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "eslint": "^10.0.0",
+    "eslint-config-next": "16.1.6",
+    "next": "16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"
   },
   "files": [
+    "dist",
     "src",
     "package.json"
   ]
-}
+}

package/src/views/UserManagement.tsx

@@ -105,32 +105,38 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
     );
 
     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 className="h-full w-full rounded-[2.5rem] bg-dashboard-card dark:bg-neutral-900 p-8 overflow-y-auto">
+            {/* Header Section */}
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
                 <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>
+                    <h1 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2">
+                        User Management
+                    </h1>
+                    <p className="text-sm text-dashboard-text-secondary">
+                        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"
+                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20"
                 >
-                    <UserPlus size={18} /> New User
+                    <UserPlus size={16} />
+                    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="bg-dashboard-bg dark:bg-neutral-800/50 rounded-2xl sm:rounded-[2rem] border border-dashboard-border overflow-hidden">
+                <div className="p-4 sm:p-6 border-b border-dashboard-border flex items-center justify-between">
                     <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} />
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-dashboard-text-secondary" 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"
+                            className="w-full pl-10 pr-4 py-2.5 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 placeholder:text-dashboard-text-secondary"
                         />
                     </div>
                     {loading && <Loader2 className="animate-spin text-primary ml-4" size={20} />}
@@ -140,16 +146,16 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                 <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">
+                            <tr className="text-[11px] font-bold text-dashboard-text-secondary 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">
+                        <tbody className="divide-y divide-dashboard-border">
                             {filteredUsers.map((user) => (
-                                <tr key={user._id} className="group hover:bg-dashboard-bg transition-colors">
+                                <tr key={user._id} className="group hover:bg-dashboard-card 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">
@@ -157,7 +163,7 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                                             </div>
                                             <div>
                                                 <p className="font-bold text-dashboard-text text-sm">{user.name}</p>
-                                                <p className="text-xs text-neutral-400">{user.email}</p>
+                                                <p className="text-xs text-dashboard-text-secondary">{user.email}</p>
                                             </div>
                                         </div>
                                     </td>
@@ -167,13 +173,13 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                                             <Shield size={10} /> {user.role}
                                         </span>
                                     </td>
-                                    <td className="px-8 py-5 text-sm text-neutral-500 dark:text-neutral-400">
+                                    <td className="px-8 py-5 text-sm text-dashboard-text-secondary">
                                         {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"
+                                            className="p-2 text-dashboard-text-secondary hover:text-red-500 transition-colors disabled:opacity-0"
                                             disabled={user.role === 'dev'}
                                         >
                                             <Trash2 size={16} />
@@ -186,7 +192,7 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                 </div>
 
                 {/* Mobile Card List */}
-                <div className="md:hidden divide-y divide-neutral-100 dark:divide-neutral-800">
+                <div className="md:hidden divide-y divide-dashboard-border">
                     {filteredUsers.map((user) => (
                         <div key={user._id} className="p-5 space-y-4">
                             <div className="flex justify-between items-start">
@@ -195,8 +201,8 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                                         {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>
+                                        <p className="font-bold text-dashboard-text text-sm truncate">{user.name}</p>
+                                        <p className="text-[11px] text-dashboard-text-secondary truncate">{user.email}</p>
                                     </div>
                                 </div>
                                 <button
@@ -207,12 +213,12 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                                 </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'
+                            <div className="flex items-center justify-between pt-2 border-t border-dashboard-border">
+                                <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-dashboard-bg text-dashboard-text'
                                     }`}>
                                     <Shield size={10} /> {user.role}
                                 </span>
-                                <div className="flex items-center gap-1.5 text-[10px] text-neutral-400 font-medium">
+                                <div className="flex items-center gap-1.5 text-[10px] text-dashboard-text-secondary font-medium">
                                     <Calendar size={12} />
                                     {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}
                                 </div>
@@ -222,7 +228,7 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                 </div>
 
                 {filteredUsers.length === 0 && !loading && (
-                    <div className="p-12 text-center text-neutral-400 text-sm">
+                    <div className="p-12 text-center text-dashboard-text-secondary text-sm">
                         No users found matching your search.
                     </div>
                 )}
@@ -230,10 +236,10 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
 
             {/* 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="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-200">
+                    <div className="bg-dashboard-card 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 border border-dashboard-border">
                         <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>
+                            <h2 className="text-xl sm:text-2xl font-black uppercase tracking-tighter">New User</h2>
                             <button onClick={() => setIsModalOpen(false)} className="hover:rotate-90 transition-transform p-2">
                                 <X size={24} />
                             </button>
@@ -241,10 +247,10 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
 
                         <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>
+                                <label className="text-xs font-bold text-dashboard-text-secondary 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"
+                                    className="w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border 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"
@@ -252,11 +258,11 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                             </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>
+                                <label className="text-xs font-bold text-dashboard-text-secondary 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"
+                                    className="w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border 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"
@@ -264,20 +270,20 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                             </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>
+                                <label className="text-xs font-bold text-dashboard-text-secondary 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"
+                                        className="w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm transition-all font-mono text-dashboard-text"
                                         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">
+                                        <button type="button" onClick={() => setShowPassword(!showPassword)} className="p-1.5 text-dashboard-text-secondary 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">
+                                        <button type="button" onClick={copyToClipboard} className="p-1.5 text-dashboard-text-secondary hover:text-primary">
                                             {copied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} />}
                                         </button>
                                     </div>
@@ -292,10 +298,10 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                             </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>
+                                <label className="text-xs font-bold text-dashboard-text-secondary 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"
+                                        className="w-full px-5 py-3 bg-dashboard-bg border border-dashboard-border rounded-2xl focus:ring-2 focus:ring-primary outline-none text-sm appearance-none cursor-pointer text-dashboard-text"
                                         value={formData.role}
                                         onChange={e => setFormData({ ...formData, role: e.target.value as any })}
                                     >
@@ -303,7 +309,7 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                                         <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">
+                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-dashboard-text-secondary">
                                         <Shield size={16} />
                                     </div>
                                 </div>
@@ -312,7 +318,7 @@ export default function UserManagement({ locale = 'en' }: { locale?: string }) {
                             <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"
+                                className="w-full py-4 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest 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>