mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user