@qwickapps/server 1.6.1 → 1.7.0

package/ui/src/components/tenants/MemberListDialog.tsx

@@ -0,0 +1,290 @@
+/**
+ * MemberListDialog Component
+ *
+ * Dialog for viewing and managing tenant members.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  IconButton,
+  Chip,
+  Alert,
+  LinearProgress,
+  Box,
+  Tooltip,
+} from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Text } from '@qwickapps/react-framework';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import AddIcon from '@mui/icons-material/Add';
+import { MemberInviteDialog } from './MemberInviteDialog';
+import { MemberRoleDialog } from './MemberRoleDialog';
+
+export interface Tenant {
+  id: string;
+  name: string;
+  type: string;
+  owner_id: string;
+}
+
+export interface TenantMembership {
+  id: string;
+  tenant_id: string;
+  user_id: string;
+  role: string;
+  joined_at: string;
+}
+
+export interface MemberListDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Tenant to show members for */
+  tenant: Tenant;
+  /** API base URL */
+  apiBaseUrl: string;
+  /** Callback when dialog is closed */
+  onClose: () => void;
+}
+
+export function MemberListDialog({
+  open,
+  tenant,
+  apiBaseUrl,
+  onClose,
+}: MemberListDialogProps) {
+  const [members, setMembers] = useState<TenantMembership[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [editMember, setEditMember] = useState<TenantMembership | null>(null);
+
+  const loadMembers = useCallback(async () => {
+    if (!open || !tenant) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${apiBaseUrl}/${tenant.id}/members`);
+
+      if (!response.ok) {
+        throw new Error(`Failed to load members: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      setMembers(data.members || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load members');
+      console.error('Failed to load members:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [open, tenant, apiBaseUrl]);
+
+  useEffect(() => {
+    loadMembers();
+  }, [loadMembers]);
+
+  const handleAddMember = async (data: { user_id: string; role: string }) => {
+    try {
+      const response = await fetch(`${apiBaseUrl}/${tenant.id}/members`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to add member');
+      }
+
+      setInviteDialogOpen(false);
+      await loadMembers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to add member');
+    }
+  };
+
+  const handleUpdateRole = async (userId: string, role: string) => {
+    try {
+      const response = await fetch(`${apiBaseUrl}/${tenant.id}/members/${userId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ role }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to update role');
+      }
+
+      setEditMember(null);
+      await loadMembers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update role');
+    }
+  };
+
+  const handleRemoveMember = async (userId: string) => {
+    if (!confirm('Are you sure you want to remove this member from the tenant?')) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${apiBaseUrl}/${tenant.id}/members/${userId}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to remove member');
+      }
+
+      await loadMembers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove member');
+    }
+  };
+
+  const getRoleColor = (role: string): 'primary' | 'secondary' | 'success' | 'warning' | 'info' => {
+    switch (role) {
+      case 'owner':
+        return 'primary';
+      case 'admin':
+        return 'secondary';
+      case 'member':
+        return 'info';
+      case 'viewer':
+        return 'success';
+      default:
+        return 'info';
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+        <DialogTitle>
+          Manage Members: {tenant.name}
+        </DialogTitle>
+        <DialogContent>
+          {error && (
+            <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+              {error}
+            </Alert>
+          )}
+
+          {loading && <LinearProgress sx={{ mb: 2 }} />}
+
+          <Box sx={{ mb: 2 }}>
+            <Button
+              variant="contained"
+              icon={<AddIcon />}
+              onClick={() => setInviteDialogOpen(true)}
+              buttonSize="small"
+            >
+              Add Member
+            </Button>
+          </Box>
+
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>User ID</TableCell>
+                  <TableCell>Role</TableCell>
+                  <TableCell>Joined</TableCell>
+                  <TableCell align="right">Actions</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {members.length === 0 && !loading ? (
+                  <TableRow>
+                    <TableCell colSpan={4} align="center">
+                      <Text variant="body2" color="textSecondary">
+                        No members found
+                      </Text>
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  members.map((member) => (
+                    <TableRow key={member.id}>
+                      <TableCell>
+                        <Text variant="body2" sx={{ fontFamily: 'monospace', fontSize: '0.75rem' }}>
+                          {member.user_id.substring(0, 16)}...
+                        </Text>
+                      </TableCell>
+                      <TableCell>
+                        <Chip
+                          label={member.role}
+                          size="small"
+                          color={getRoleColor(member.role)}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        {new Date(member.joined_at).toLocaleDateString()}
+                      </TableCell>
+                      <TableCell align="right">
+                        <Tooltip title="Change Role">
+                          <IconButton
+                            size="small"
+                            onClick={() => setEditMember(member)}
+                          >
+                            <EditIcon />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Remove Member">
+                          <IconButton
+                            size="small"
+                            color="error"
+                            onClick={() => handleRemoveMember(member.user_id)}
+                            disabled={member.role === 'owner'}
+                          >
+                            <DeleteIcon />
+                          </IconButton>
+                        </Tooltip>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          <Text variant="body2" color="textSecondary" sx={{ mt: 2 }}>
+            Total members: {members.length}
+          </Text>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose}>Close</Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* Add Member Dialog */}
+      <MemberInviteDialog
+        open={inviteDialogOpen}
+        tenantName={tenant.name}
+        onClose={() => setInviteDialogOpen(false)}
+        onSubmit={handleAddMember}
+      />
+
+      {/* Edit Role Dialog */}
+      {editMember && (
+        <MemberRoleDialog
+          open={!!editMember}
+          member={editMember}
+          onClose={() => setEditMember(null)}
+          onSubmit={(role) => handleUpdateRole(editMember.user_id, role)}
+        />
+      )}
+    </>
+  );
+}

package/ui/src/components/tenants/MemberRoleDialog.tsx

@@ -0,0 +1,133 @@
+/**
+ * MemberRoleDialog Component
+ *
+ * Dialog for changing a member's role.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  FormHelperText,
+} from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Text } from '@qwickapps/react-framework';
+
+export interface TenantMembership {
+  id: string;
+  tenant_id: string;
+  user_id: string;
+  role: string;
+  joined_at: string;
+}
+
+export interface MemberRoleDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Member to edit */
+  member: TenantMembership;
+  /** Callback when dialog is closed */
+  onClose: () => void;
+  /** Callback when role is changed */
+  onSubmit: (role: string) => void | Promise<void>;
+}
+
+export function MemberRoleDialog({
+  open,
+  member,
+  onClose,
+  onSubmit,
+}: MemberRoleDialogProps) {
+  const [role, setRole] = useState<string>(member.role);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  // Reset form when member changes
+  useEffect(() => {
+    setRole(member.role);
+    setErrors({});
+    setSubmitting(false);
+  }, [member]);
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!role) {
+      newErrors.role = 'Role is required';
+    }
+
+    if (role === member.role) {
+      newErrors.role = 'Role has not changed';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      await onSubmit(role);
+      onClose();
+    } catch (err) {
+      setErrors({
+        submit: err instanceof Error ? err.message : 'Failed to update role',
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Change Member Role</DialogTitle>
+      <DialogContent>
+        <Text variant="body2" color="textSecondary" sx={{ mb: 2 }}>
+          User: {member.user_id.substring(0, 16)}...
+        </Text>
+
+        <FormControl fullWidth margin="normal" error={!!errors.role}>
+          <InputLabel>Role</InputLabel>
+          <Select
+            value={role}
+            label="Role"
+            onChange={(e) => setRole(e.target.value)}
+            autoFocus
+          >
+            <MenuItem value="owner">Owner - Full control</MenuItem>
+            <MenuItem value="admin">Admin - Manage members</MenuItem>
+            <MenuItem value="member">Member - Standard access</MenuItem>
+            <MenuItem value="viewer">Viewer - Read-only</MenuItem>
+          </Select>
+          {errors.role && <FormHelperText>{errors.role}</FormHelperText>}
+        </FormControl>
+
+        {errors.submit && (
+          <FormHelperText error sx={{ mt: 2 }}>
+            {errors.submit}
+          </FormHelperText>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={submitting}>
+          Cancel
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          variant="contained"
+          disabled={submitting}
+        >
+          {submitting ? 'Updating...' : 'Update Role'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/ui/src/components/tenants/TenantCard.tsx

@@ -0,0 +1,140 @@
+/**
+ * TenantCard Component
+ *
+ * Displays tenant information in a card format.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Card, CardContent, CardActions, Chip, IconButton, Box, Tooltip } from '@mui/material';
+import { Text } from '@qwickapps/react-framework';
+import BusinessIcon from '@mui/icons-material/Business';
+import GroupIcon from '@mui/icons-material/Group';
+import PersonIcon from '@mui/icons-material/Person';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import PeopleIcon from '@mui/icons-material/People';
+
+export interface Tenant {
+  id: string;
+  name: string;
+  type: 'user' | 'organization' | 'group' | 'department';
+  owner_id: string;
+  metadata?: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TenantCardProps {
+  /** Tenant data */
+  tenant: Tenant;
+  /** Callback when edit is clicked */
+  onEdit?: (tenant: Tenant) => void;
+  /** Callback when delete is clicked */
+  onDelete?: (tenant: Tenant) => void;
+  /** Callback when manage members is clicked */
+  onManageMembers?: (tenant: Tenant) => void;
+  /** Whether to show actions */
+  showActions?: boolean;
+}
+
+export function TenantCard({
+  tenant,
+  onEdit,
+  onDelete,
+  onManageMembers,
+  showActions = true,
+}: TenantCardProps) {
+  const getTenantIcon = () => {
+    switch (tenant.type) {
+      case 'organization':
+        return <BusinessIcon color="primary" />;
+      case 'group':
+        return <GroupIcon color="secondary" />;
+      case 'department':
+        return <BusinessIcon color="info" />;
+      case 'user':
+        return <PersonIcon color="success" />;
+      default:
+        return <BusinessIcon />;
+    }
+  };
+
+  const getTenantTypeColor = (): 'primary' | 'secondary' | 'success' | 'warning' | 'info' => {
+    switch (tenant.type) {
+      case 'organization':
+        return 'primary';
+      case 'group':
+        return 'secondary';
+      case 'department':
+        return 'info';
+      case 'user':
+        return 'success';
+      default:
+        return 'primary';
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+          {getTenantIcon()}
+          <Box sx={{ flexGrow: 1 }}>
+            <Text variant="h6" component="div">
+              {tenant.name}
+            </Text>
+            <Text variant="body2" color="textSecondary">
+              ID: {tenant.id.substring(0, 8)}...
+            </Text>
+          </Box>
+          <Chip
+            label={tenant.type}
+            size="small"
+            color={getTenantTypeColor()}
+          />
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+          <Text variant="body2" color="textSecondary">
+            <strong>Owner:</strong> {tenant.owner_id.substring(0, 8)}...
+          </Text>
+          <Text variant="body2" color="textSecondary">
+            <strong>Created:</strong> {new Date(tenant.created_at).toLocaleDateString()}
+          </Text>
+          {tenant.metadata && Object.keys(tenant.metadata).length > 0 && (
+            <Text variant="body2" color="textSecondary">
+              <strong>Metadata:</strong> {Object.keys(tenant.metadata).length} fields
+            </Text>
+          )}
+        </Box>
+      </CardContent>
+
+      {showActions && (
+        <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
+          {onManageMembers && (
+            <Tooltip title="Manage Members">
+              <IconButton size="small" onClick={() => onManageMembers(tenant)}>
+                <PeopleIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {onEdit && (
+            <Tooltip title="Edit">
+              <IconButton size="small" onClick={() => onEdit(tenant)}>
+                <EditIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {onDelete && (
+            <Tooltip title="Delete">
+              <IconButton size="small" color="error" onClick={() => onDelete(tenant)}>
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+        </CardActions>
+      )}
+    </Card>
+  );
+}