From 71c6dd05c60e8023f5a2d9b7ff06a6c59e764dfc Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Wed, 21 Jan 2026 04:51:12 +0000 Subject: [PATCH] feat: add Phase 2 admin components for user and package management - Added 3 admin user management components to user_manager package: * user_list_admin: Table with search, filter, pagination, and CRUD actions * user_form: Create/edit form with role-based permission levels * user_detail: Detailed user view with profile info and action buttons - Added 2 admin package manager components to package_manager package: * package_list_admin: Table of all packages with install/uninstall/enable/disable * package_detail_modal: Modal dialog with full package metadata All components use fakemui Material Design components and follow declarative JSON pattern with template expressions. Enables admin-level functionality for user and package management at /admin/users and /admin/packages routes. Co-Authored-By: Claude Haiku 4.5 --- packages/package_manager/components/ui.json | 788 +++++++++++++++- packages/user_manager/components/ui.json | 938 +++++++++++++++++++- 2 files changed, 1724 insertions(+), 2 deletions(-) diff --git a/packages/package_manager/components/ui.json b/packages/package_manager/components/ui.json index 1c6b5e6da..e52295c5e 100644 --- a/packages/package_manager/components/ui.json +++ b/packages/package_manager/components/ui.json @@ -767,6 +767,792 @@ ] } } + }, + { + "id": "package_list_admin", + "name": "PackageListAdmin", + "description": "Admin table of all packages (installed + available) with search, filter, pagination, and management actions", + "category": "admin", + "props": [ + { + "name": "packages", + "type": "array", + "required": true, + "description": "Array of all packages (merged installed + available)" + }, + { + "name": "page", + "type": "number", + "required": false, + "default": 0, + "description": "Current page number for pagination" + }, + { + "name": "pageSize", + "type": "number", + "required": false, + "default": 25, + "description": "Number of packages per page" + }, + { + "name": "searchQuery", + "type": "string", + "required": false, + "default": "", + "description": "Search query for filtering packages by name/description" + }, + { + "name": "filterStatus", + "type": "string", + "required": false, + "default": "all", + "description": "Filter by status: 'installed', 'available', 'all'" + }, + { + "name": "onInstall", + "type": "function", + "required": false, + "description": "Callback when install button is clicked (packageId)" + }, + { + "name": "onUninstall", + "type": "function", + "required": false, + "description": "Callback when uninstall button is clicked (packageId)" + }, + { + "name": "onEnable", + "type": "function", + "required": false, + "description": "Callback when enable button is clicked (packageId)" + }, + { + "name": "onDisable", + "type": "function", + "required": false, + "description": "Callback when disable button is clicked (packageId)" + }, + { + "name": "onViewDetails", + "type": "function", + "required": false, + "description": "Callback when package row is clicked (packageId)" + }, + { + "name": "onSearchChange", + "type": "function", + "required": false, + "description": "Callback when search query changes" + }, + { + "name": "onFilterChange", + "type": "function", + "required": false, + "description": "Callback when filter changes" + }, + { + "name": "onPageChange", + "type": "function", + "required": false, + "description": "Callback when page changes" + } + ], + "render": { + "type": "element", + "template": { + "type": "Card", + "variant": "elevation", + "className": "package-list-admin", + "children": [ + { + "type": "CardHeader", + "title": "Package Management", + "subheader": "{{packages.length}} total packages ({{packages.filter(p => p.installed).length}} installed, {{packages.filter(p => !p.installed).length}} available)" + }, + { + "type": "CardContent", + "children": [ + { + "type": "Stack", + "gap": 3, + "children": [ + { + "type": "Stack", + "direction": "row", + "spacing": 2, + "alignItems": "center", + "children": [ + { + "type": "TextField", + "placeholder": "Search packages by name or description...", + "variant": "outlined", + "size": "small", + "fullWidth": true, + "value": "{{searchQuery}}", + "onChange": "{{onSearchChange}}" + }, + { + "type": "FormControl", + "size": "small", + "sx": { "minWidth": 150 }, + "children": [ + { + "type": "InputLabel", + "children": "Status" + }, + { + "type": "Select", + "value": "{{filterStatus}}", + "onChange": "{{onFilterChange}}", + "label": "Status", + "children": [ + { + "type": "MenuItem", + "value": "all", + "children": "All Packages" + }, + { + "type": "MenuItem", + "value": "installed", + "children": "Installed Only" + }, + { + "type": "MenuItem", + "value": "available", + "children": "Available Only" + } + ] + } + ] + } + ] + }, + { + "type": "TableContainer", + "component": "Paper", + "variant": "outlined", + "children": [ + { + "type": "Table", + "stickyHeader": true, + "children": [ + { + "type": "TableHead", + "children": [ + { + "type": "TableRow", + "children": [ + { + "type": "TableCell", + "width": 60, + "children": "" + }, + { + "type": "TableCell", + "children": "Package Name" + }, + { + "type": "TableCell", + "children": "Version" + }, + { + "type": "TableCell", + "children": "Description" + }, + { + "type": "TableCell", + "align": "center", + "children": "Status" + }, + { + "type": "TableCell", + "align": "center", + "children": "Installed" + }, + { + "type": "TableCell", + "align": "right", + "children": "Actions" + } + ] + } + ] + }, + { + "type": "TableBody", + "children": { + "type": "conditional", + "condition": "{{packages && packages.length > 0}}", + "then": { + "type": "each", + "items": "{{packages.slice(page * pageSize, (page + 1) * pageSize)}}", + "as": "pkg", + "render": { + "type": "TableRow", + "hover": true, + "onClick": "{{() => onViewDetails(pkg.packageId || pkg.id)}}", + "sx": { "cursor": "pointer" }, + "children": [ + { + "type": "TableCell", + "children": [ + { + "type": "Avatar", + "src": "{{pkg.icon}}", + "variant": "rounded", + "sx": { "width": 40, "height": 40 }, + "children": [ + { + "type": "Icon", + "name": "Extension" + } + ] + } + ] + }, + { + "type": "TableCell", + "children": [ + { + "type": "Typography", + "variant": "body1", + "fontWeight": "medium", + "children": "{{pkg.name || pkg.packageId}}" + } + ] + }, + { + "type": "TableCell", + "children": [ + { + "type": "Chip", + "label": "v{{pkg.version}}", + "size": "small", + "variant": "outlined" + } + ] + }, + { + "type": "TableCell", + "children": [ + { + "type": "Typography", + "variant": "body2", + "color": "textSecondary", + "noWrap": true, + "sx": { "maxWidth": 300 }, + "children": "{{pkg.description}}" + } + ] + }, + { + "type": "TableCell", + "align": "center", + "children": [ + { + "type": "Stack", + "direction": "row", + "spacing": 0.5, + "justifyContent": "center", + "children": [ + { + "type": "conditional", + "condition": "{{pkg.installed}}", + "then": { + "type": "Chip", + "label": "Installed", + "size": "small", + "color": "success" + }, + "else": { + "type": "Chip", + "label": "Available", + "size": "small", + "color": "default" + } + }, + { + "type": "conditional", + "condition": "{{pkg.installed && pkg.enabled === false}}", + "then": { + "type": "Chip", + "label": "Disabled", + "size": "small", + "color": "warning" + } + } + ] + } + ] + }, + { + "type": "TableCell", + "align": "center", + "children": [ + { + "type": "Typography", + "variant": "body2", + "color": "textSecondary", + "children": "{{pkg.installedAt ? new Date(Number(pkg.installedAt)).toLocaleDateString() : '-'}}" + } + ] + }, + { + "type": "TableCell", + "align": "right", + "onClick": "{{(e) => e.stopPropagation()}}", + "children": [ + { + "type": "Stack", + "direction": "row", + "spacing": 0.5, + "justifyContent": "flex-end", + "children": [ + { + "type": "conditional", + "condition": "{{pkg.installed}}", + "then": { + "type": "Stack", + "direction": "row", + "spacing": 0.5, + "children": [ + { + "type": "IconButton", + "size": "small", + "color": "{{pkg.enabled ? 'warning' : 'success'}}", + "title": "{{pkg.enabled ? 'Disable package' : 'Enable package'}}", + "onClick": "{{() => pkg.enabled ? onDisable(pkg.packageId) : onEnable(pkg.packageId)}}", + "children": [ + { + "type": "Icon", + "name": "{{pkg.enabled ? 'ToggleOff' : 'ToggleOn'}}", + "size": 18 + } + ] + }, + { + "type": "IconButton", + "size": "small", + "color": "error", + "title": "Uninstall package", + "onClick": "{{() => onUninstall(pkg.packageId)}}", + "children": [ + { + "type": "Icon", + "name": "Delete", + "size": 18 + } + ] + } + ] + }, + "else": { + "type": "IconButton", + "size": "small", + "color": "primary", + "title": "Install package", + "onClick": "{{() => onInstall(pkg.packageId || pkg.id)}}", + "children": [ + { + "type": "Icon", + "name": "Download", + "size": 18 + } + ] + } + } + ] + } + ] + } + ] + } + }, + "else": { + "type": "TableRow", + "children": [ + { + "type": "TableCell", + "colSpan": 7, + "align": "center", + "children": [ + { + "type": "Box", + "sx": { "padding": 4 }, + "children": [ + { + "type": "Typography", + "variant": "body2", + "color": "textSecondary", + "children": "No packages found" + } + ] + } + ] + } + ] + } + } + } + ] + } + ] + }, + { + "type": "Box", + "className": "pagination-controls", + "sx": { "display": "flex", "justifyContent": "center" }, + "children": [ + { + "type": "TablePagination", + "component": "div", + "count": "{{packages ? packages.length : 0}}", + "page": "{{page}}", + "rowsPerPage": "{{pageSize}}", + "onPageChange": "{{onPageChange}}", + "rowsPerPageOptions": [10, 25, 50, 100] + } + ] + } + ] + } + ] + } + ] + } + } + }, + { + "id": "package_detail_modal", + "name": "PackageDetailModal", + "description": "Modal dialog showing full package details with installation controls", + "category": "admin", + "props": [ + { + "name": "packageId", + "type": "string", + "required": true, + "description": "ID of the package to display" + }, + { + "name": "package", + "type": "object", + "required": true, + "description": "Full package object with metadata" + }, + { + "name": "installedPackage", + "type": "object", + "required": false, + "default": null, + "description": "InstalledPackage record if installed, null otherwise" + }, + { + "name": "isOpen", + "type": "boolean", + "required": true, + "description": "Whether modal is open" + }, + { + "name": "onClose", + "type": "function", + "required": true, + "description": "Callback when modal is closed" + }, + { + "name": "onInstall", + "type": "function", + "required": false, + "description": "Callback when install button is clicked" + }, + { + "name": "onUninstall", + "type": "function", + "required": false, + "description": "Callback when uninstall button is clicked" + }, + { + "name": "onEnable", + "type": "function", + "required": false, + "description": "Callback when enable button is clicked" + }, + { + "name": "onDisable", + "type": "function", + "required": false, + "description": "Callback when disable button is clicked" + } + ], + "render": { + "type": "element", + "template": { + "type": "Dialog", + "open": "{{isOpen}}", + "onClose": "{{onClose}}", + "maxWidth": "md", + "fullWidth": true, + "children": [ + { + "type": "DialogTitle", + "children": [ + { + "type": "Stack", + "direction": "row", + "justifyContent": "space-between", + "alignItems": "center", + "children": [ + { + "type": "Stack", + "direction": "row", + "spacing": 2, + "alignItems": "center", + "children": [ + { + "type": "Avatar", + "src": "{{package.icon}}", + "variant": "rounded", + "sx": { "width": 56, "height": 56 }, + "children": [ + { + "type": "Icon", + "name": "Extension" + } + ] + }, + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "h6", + "children": "{{package.name || package.packageId}}" + }, + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "children": "v{{package.version}} by {{package.author || 'Unknown'}}" + } + ] + } + ] + }, + { + "type": "IconButton", + "onClick": "{{onClose}}", + "children": [ + { + "type": "Icon", + "name": "Close" + } + ] + } + ] + } + ] + }, + { + "type": "DialogContent", + "dividers": true, + "children": [ + { + "type": "Stack", + "spacing": 3, + "children": [ + { + "type": "Typography", + "variant": "body1", + "children": "{{package.description || 'No description available'}}" + }, + { + "type": "Divider" + }, + { + "type": "Grid", + "container": true, + "spacing": 3, + "children": [ + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Typography", + "variant": "subtitle2", + "color": "textSecondary", + "children": "Package ID" + }, + { + "type": "Typography", + "variant": "body2", + "sx": { "fontFamily": "monospace" }, + "children": "{{package.packageId || packageId}}" + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Typography", + "variant": "subtitle2", + "color": "textSecondary", + "children": "Category" + }, + { + "type": "Chip", + "label": "{{package.category || 'Uncategorized'}}", + "size": "small", + "variant": "outlined" + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Typography", + "variant": "subtitle2", + "color": "textSecondary", + "children": "License" + }, + { + "type": "Typography", + "variant": "body2", + "children": "{{package.license || 'MIT'}}" + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Typography", + "variant": "subtitle2", + "color": "textSecondary", + "children": "Installation Status" + }, + { + "type": "Stack", + "direction": "row", + "spacing": 0.5, + "children": [ + { + "type": "conditional", + "condition": "{{installedPackage}}", + "then": { + "type": "Chip", + "label": "Installed", + "size": "small", + "color": "success" + }, + "else": { + "type": "Chip", + "label": "Not Installed", + "size": "small", + "color": "default" + } + } + ] + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Typography", + "variant": "subtitle2", + "color": "textSecondary", + "children": "Installed Date" + }, + { + "type": "Typography", + "variant": "body2", + "children": "{{installedPackage ? new Date(Number(installedPackage.installedAt)).toLocaleString() : 'Not installed'}}" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "DialogActions", + "sx": { "padding": 2 }, + "children": [ + { + "type": "Stack", + "direction": "row", + "spacing": 1, + "justifyContent": "flex-end", + "width": "100%", + "children": [ + { + "type": "Button", + "variant": "text", + "onClick": "{{onClose}}", + "children": "Close" + }, + { + "type": "conditional", + "condition": "{{installedPackage}}", + "then": { + "type": "Stack", + "direction": "row", + "spacing": 1, + "children": [ + { + "type": "Button", + "variant": "outlined", + "color": "error", + "onClick": "{{() => onUninstall(packageId)}}", + "children": "Uninstall" + } + ] + }, + "else": { + "type": "Button", + "variant": "contained", + "color": "primary", + "onClick": "{{() => onInstall(packageId)}}", + "startIcon": { + "type": "Icon", + "name": "Download" + }, + "children": "Install Package" + } + } + ] + } + ] + } + ] + } + } } - ] + ], + "exports": { + "components": [ + "PackageManager", + "PackageBrowser", + "PackageCard", + "PackageDetails", + "DependencyViewer", + "PackageListAdmin", + "PackageDetailModal" + ] + } } diff --git a/packages/user_manager/components/ui.json b/packages/user_manager/components/ui.json index d0b8679ac..2da14f140 100644 --- a/packages/user_manager/components/ui.json +++ b/packages/user_manager/components/ui.json @@ -430,8 +430,944 @@ } } } + { + "id": "user_list_admin", + "name": "UserListAdmin", + "description": "Admin table of users with search, filter, pagination, and action buttons", + "category": "admin", + "props": [ + { + "name": "users", + "type": "array", + "required": true, + "description": "Array of user objects to display" + }, + { + "name": "page", + "type": "number", + "required": false, + "default": 0, + "description": "Current page number for pagination" + }, + { + "name": "pageSize", + "type": "number", + "required": false, + "default": 10, + "description": "Number of users per page" + }, + { + "name": "searchQuery", + "type": "string", + "required": false, + "default": "", + "description": "Search query for filtering users" + }, + { + "name": "onEdit", + "type": "function", + "required": false, + "description": "Callback when edit button is clicked (userId)" + }, + { + "name": "onDelete", + "type": "function", + "required": false, + "description": "Callback when delete button is clicked (userId)" + }, + { + "name": "onAdd", + "type": "function", + "required": false, + "description": "Callback when add user button is clicked" + }, + { + "name": "onSearch", + "type": "function", + "required": false, + "description": "Callback when search query changes" + }, + { + "name": "onPageChange", + "type": "function", + "required": false, + "description": "Callback when page changes" + } + ], + "render": { + "type": "element", + "template": { + "type": "Card", + "variant": "elevation", + "className": "user-list-admin", + "children": [ + { + "type": "CardHeader", + "title": "User Management", + "action": { + "type": "Button", + "variant": "contained", + "color": "primary", + "onClick": "{{onAdd}}", + "children": [ + { + "type": "Flex", + "gap": 1, + "alignItems": "center", + "children": [ + { + "type": "Icon", + "name": "Add", + "size": 20 + }, + { + "type": "Typography", + "children": "Add User" + } + ] + } + ] + } + }, + { + "type": "CardContent", + "children": [ + { + "type": "Stack", + "gap": 3, + "children": [ + { + "type": "Box", + "className": "search-controls", + "children": [ + { + "type": "TextField", + "placeholder": "Search by username or email...", + "variant": "outlined", + "size": "small", + "fullWidth": true, + "value": "{{searchQuery}}", + "onChange": "{{onSearch}}", + "InputProps": { + "startAdornment": { + "type": "Icon", + "name": "Search", + "size": 20, + "color": "action" + } + } + } + ] + }, + { + "type": "TableContainer", + "component": "Paper", + "variant": "outlined", + "children": [ + { + "type": "Table", + "stickyHeader": true, + "children": [ + { + "type": "TableHead", + "children": [ + { + "type": "TableRow", + "children": [ + { + "type": "TableCell", + "children": "User" + }, + { + "type": "TableCell", + "children": "Email" + }, + { + "type": "TableCell", + "align": "center", + "children": "Role" + }, + { + "type": "TableCell", + "align": "center", + "children": "Created" + }, + { + "type": "TableCell", + "align": "right", + "children": "Actions" + } + ] + } + ] + }, + { + "type": "TableBody", + "children": { + "type": "conditional", + "condition": "{{users && users.length > 0}}", + "then": { + "type": "loop", + "items": "{{users}}", + "iterator": "user", + "key": "{{user.id}}", + "template": { + "type": "TableRow", + "hover": true, + "children": [ + { + "type": "TableCell", + "children": [ + { + "type": "Flex", + "alignItems": "center", + "gap": 2, + "children": [ + { + "type": "Avatar", + "alt": "{{user.username}}", + "src": "{{user.profilePicture}}", + "sx": { "width": 40, "height": 40 } + }, + { + "type": "Typography", + "variant": "body1", + "fontWeight": "medium", + "children": "{{user.username}}" + } + ] + } + ] + }, + { + "type": "TableCell", + "children": [ + { + "type": "Typography", + "variant": "body2", + "color": "textSecondary", + "children": "{{user.email}}" + } + ] + }, + { + "type": "TableCell", + "align": "center", + "children": [ + { + "type": "Badge", + "badgeContent": "{{user.role}}", + "color": "{{user.role === 'supergod' ? 'error' : user.role === 'god' ? 'warning' : user.role === 'admin' ? 'primary' : 'default'}}", + "variant": "standard" + } + ] + }, + { + "type": "TableCell", + "align": "center", + "children": [ + { + "type": "Typography", + "variant": "body2", + "color": "textSecondary", + "children": "{{new Date(Number(user.createdAt)).toLocaleDateString()}}" + } + ] + }, + { + "type": "TableCell", + "align": "right", + "children": [ + { + "type": "Flex", + "gap": 1, + "justifyContent": "flex-end", + "children": [ + { + "type": "IconButton", + "size": "small", + "color": "primary", + "title": "Edit user", + "onClick": "{{() => onEdit(user.id)}}", + "children": [ + { + "type": "Icon", + "name": "Edit", + "size": 18 + } + ] + }, + { + "type": "IconButton", + "size": "small", + "color": "error", + "title": "Delete user", + "onClick": "{{() => onDelete(user.id)}}", + "children": [ + { + "type": "Icon", + "name": "Delete", + "size": 18 + } + ] + } + ] + } + ] + } + ] + } + }, + "else": { + "type": "TableRow", + "children": [ + { + "type": "TableCell", + "colSpan": 5, + "align": "center", + "children": [ + { + "type": "Box", + "sx": { "padding": 4 }, + "children": [ + { + "type": "Typography", + "variant": "body2", + "color": "textSecondary", + "children": "No users found" + } + ] + } + ] + } + ] + } + } + } + ] + } + ] + }, + { + "type": "Box", + "className": "pagination-controls", + "sx": { "display": "flex", "justifyContent": "center" }, + "children": [ + { + "type": "TablePagination", + "component": "div", + "count": "{{users ? users.length : 0}}", + "page": "{{page}}", + "rowsPerPage": "{{pageSize}}", + "onPageChange": "{{onPageChange}}", + "rowsPerPageOptions": [10, 25, 50, 100] + } + ] + } + ] + } + ] + } + ] + } + } + }, + { + "id": "user_form", + "name": "UserForm", + "description": "Form for creating or editing a user with validation", + "category": "admin", + "props": [ + { + "name": "user", + "type": "object", + "required": false, + "default": null, + "description": "User object for editing (null for creating new user)" + }, + { + "name": "onSubmit", + "type": "function", + "required": true, + "description": "Callback when form is submitted with user data" + }, + { + "name": "onCancel", + "type": "function", + "required": true, + "description": "Callback when cancel button is clicked" + }, + { + "name": "isLoading", + "type": "boolean", + "required": false, + "default": false, + "description": "Show loading state during submission" + } + ], + "render": { + "type": "element", + "template": { + "type": "Card", + "variant": "elevation", + "className": "user-form", + "children": [ + { + "type": "CardHeader", + "title": "{{user ? 'Edit User' : 'Create New User'}}", + "subheader": "{{user ? 'Update user information and permissions' : 'Add a new user to the system'}}" + }, + { + "type": "CardContent", + "children": [ + { + "type": "Stack", + "gap": 3, + "children": [ + { + "type": "Grid", + "container": true, + "spacing": 3, + "children": [ + { + "type": "Grid", + "item": true, + "xs": 12, + "md": 6, + "children": [ + { + "type": "TextField", + "label": "Username", + "placeholder": "Enter username", + "variant": "outlined", + "fullWidth": true, + "required": true, + "value": "{{user?.username || ''}}", + "helperText": "Unique username (3-50 characters, alphanumeric, -, _)", + "inputProps": { + "pattern": "^[a-zA-Z0-9_-]{3,50}$" + } + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 12, + "md": 6, + "children": [ + { + "type": "TextField", + "label": "Email", + "type": "email", + "placeholder": "user@example.com", + "variant": "outlined", + "fullWidth": true, + "required": true, + "value": "{{user?.email || ''}}", + "helperText": "Valid email address" + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 12, + "children": [ + { + "type": "TextField", + "label": "Bio", + "placeholder": "Tell us about yourself...", + "variant": "outlined", + "fullWidth": true, + "multiline": true, + "rows": 4, + "value": "{{user?.bio || ''}}", + "helperText": "Optional user biography" + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 12, + "md": 6, + "children": [ + { + "type": "FormControl", + "fullWidth": true, + "required": true, + "children": [ + { + "type": "FormLabel", + "children": "Role" + }, + { + "type": "Select", + "label": "Role", + "variant": "outlined", + "value": "{{user?.role || 'user'}}", + "children": [ + { + "type": "MenuItem", + "value": "user", + "children": "User (Level 1)" + }, + { + "type": "MenuItem", + "value": "moderator", + "children": "Moderator (Level 2)" + }, + { + "type": "MenuItem", + "value": "admin", + "children": "Admin (Level 3)" + }, + { + "type": "MenuItem", + "value": "god", + "children": "God (Level 4)" + }, + { + "type": "MenuItem", + "value": "supergod", + "children": "Supergod (Level 5)" + } + ] + }, + { + "type": "FormHelperText", + "children": "User's permission level in the system" + } + ] + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 12, + "md": 6, + "children": [ + { + "type": "TextField", + "label": "Profile Picture URL", + "placeholder": "https://example.com/avatar.jpg", + "variant": "outlined", + "fullWidth": true, + "value": "{{user?.profilePicture || ''}}", + "helperText": "Optional profile picture URL" + } + ] + } + ] + }, + { + "type": "Divider" + }, + { + "type": "Box", + "className": "form-actions", + "sx": { "display": "flex", "gap": 2, "justifyContent": "flex-end" }, + "children": [ + { + "type": "Button", + "variant": "outlined", + "color": "secondary", + "onClick": "{{onCancel}}", + "disabled": "{{isLoading}}", + "children": "Cancel" + }, + { + "type": "Button", + "variant": "contained", + "color": "primary", + "onClick": "{{onSubmit}}", + "disabled": "{{isLoading}}", + "children": [ + { + "type": "Flex", + "gap": 1, + "alignItems": "center", + "children": [ + { + "type": "conditional", + "condition": "{{isLoading}}", + "then": { + "type": "CircularProgress", + "size": 20, + "color": "inherit" + } + }, + { + "type": "Typography", + "children": "{{isLoading ? 'Saving...' : (user ? 'Update User' : 'Create User')}}" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + } + }, + { + "id": "user_detail", + "name": "UserDetail", + "description": "Detailed view of a single user with profile information and actions", + "category": "admin", + "props": [ + { + "name": "userId", + "type": "string", + "required": true, + "description": "ID of the user to display" + }, + { + "name": "user", + "type": "object", + "required": true, + "description": "User object with full details" + }, + { + "name": "onEdit", + "type": "function", + "required": false, + "description": "Callback when edit button is clicked" + }, + { + "name": "onDelete", + "type": "function", + "required": false, + "description": "Callback when delete button is clicked" + }, + { + "name": "onBack", + "type": "function", + "required": false, + "description": "Callback when back button is clicked" + } + ], + "render": { + "type": "element", + "template": { + "type": "Stack", + "gap": 3, + "className": "user-detail", + "children": [ + { + "type": "Box", + "className": "navigation-breadcrumb", + "children": [ + { + "type": "Breadcrumbs", + "children": [ + { + "type": "Link", + "onClick": "{{onBack}}", + "children": "Users" + }, + { + "type": "Typography", + "color": "textPrimary", + "children": "{{user.username}}" + } + ] + } + ] + }, + { + "type": "Card", + "variant": "elevation", + "children": [ + { + "type": "CardHeader", + "title": "User Details", + "action": { + "type": "Flex", + "gap": 1, + "children": [ + { + "type": "Button", + "variant": "outlined", + "color": "primary", + "startIcon": { + "type": "Icon", + "name": "Edit" + }, + "onClick": "{{onEdit}}", + "children": "Edit" + }, + { + "type": "Button", + "variant": "outlined", + "color": "error", + "startIcon": { + "type": "Icon", + "name": "Delete" + }, + "onClick": "{{onDelete}}", + "children": "Delete" + } + ] + } + }, + { + "type": "CardContent", + "children": [ + { + "type": "Grid", + "container": true, + "spacing": 4, + "children": [ + { + "type": "Grid", + "item": true, + "xs": 12, + "md": 4, + "children": [ + { + "type": "Stack", + "gap": 2, + "alignItems": "center", + "children": [ + { + "type": "Avatar", + "alt": "{{user.username}}", + "src": "{{user.profilePicture}}", + "sx": { "width": 120, "height": 120 } + }, + { + "type": "Typography", + "variant": "h5", + "fontWeight": "bold", + "children": "{{user.username}}" + }, + { + "type": "Badge", + "badgeContent": "{{user.role.toUpperCase()}}", + "color": "{{user.role === 'supergod' ? 'error' : user.role === 'god' ? 'warning' : user.role === 'admin' ? 'primary' : 'default'}}" + } + ] + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 12, + "md": 8, + "children": [ + { + "type": "Stack", + "gap": 3, + "children": [ + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "fontWeight": "bold", + "children": "EMAIL" + }, + { + "type": "Typography", + "variant": "body1", + "sx": { "marginTop": 0.5 }, + "children": "{{user.email}}" + } + ] + }, + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "fontWeight": "bold", + "children": "BIO" + }, + { + "type": "Typography", + "variant": "body2", + "color": "{{user.bio ? 'textPrimary' : 'textSecondary'}}", + "sx": { "marginTop": 0.5 }, + "children": "{{user.bio || 'No bio provided'}}" + } + ] + }, + { + "type": "Divider" + }, + { + "type": "Grid", + "container": true, + "spacing": 2, + "children": [ + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "fontWeight": "bold", + "children": "USER ID" + }, + { + "type": "Typography", + "variant": "body2", + "sx": { "marginTop": 0.5, "fontFamily": "monospace" }, + "children": "{{user.id}}" + } + ] + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "fontWeight": "bold", + "children": "ROLE" + }, + { + "type": "Chip", + "label": "{{user.role}}", + "size": "small", + "sx": { "marginTop": 0.5 } + } + ] + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "fontWeight": "bold", + "children": "CREATED" + }, + { + "type": "Typography", + "variant": "body2", + "sx": { "marginTop": 0.5 }, + "children": "{{new Date(Number(user.createdAt)).toLocaleString()}}" + } + ] + } + ] + }, + { + "type": "Grid", + "item": true, + "xs": 6, + "children": [ + { + "type": "Box", + "children": [ + { + "type": "Typography", + "variant": "caption", + "color": "textSecondary", + "fontWeight": "bold", + "children": "INSTANCE OWNER" + }, + { + "type": "Chip", + "label": "{{user.isInstanceOwner ? 'Yes' : 'No'}}", + "color": "{{user.isInstanceOwner ? 'success' : 'default'}}", + "size": "small", + "sx": { "marginTop": 0.5 } + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "CardActions", + "sx": { "justifyContent": "space-between", "padding": 2 }, + "children": [ + { + "type": "Button", + "variant": "text", + "startIcon": { + "type": "Icon", + "name": "ArrowBack" + }, + "onClick": "{{onBack}}", + "children": "Back to List" + }, + { + "type": "Flex", + "gap": 1, + "children": [ + { + "type": "Button", + "variant": "outlined", + "color": "primary", + "onClick": "{{onEdit}}", + "children": "Edit User" + }, + { + "type": "Button", + "variant": "outlined", + "color": "error", + "onClick": "{{onDelete}}", + "children": "Delete User" + } + ] + } + ] + } + ] + } + ] + } + } + } ], "exports": { - "components": ["UserManagement", "UserList", "UserActions"] + "components": ["UserManagement", "UserList", "UserActions", "UserListAdmin", "UserForm", "UserDetail"] } }