[PT2025BMHW-119][SuperAdminUI,SharedUI] feat: Implement Global Users Management Page

Frontend/apps/superadmin/src/components/tenants/AssignAdminModal.tsx

@@ -0,0 +1,163 @@
+import { Button, Icon, Modal, Spinner, features } from '@ngo-platform/shared';
+import { type FC, useState } from 'react';
+
+// We'll reimplement a simple Combobox here since the shared one might be more complex
+// or require specific props we don't want to deal with right now.
+// Ideally we should reuse the shared Combobox.
+
+interface AssignAdminModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tenantId: string;
+  onCreateNew: () => void; // Callback to switch to "Create New" modal
+}
+
+export const AssignAdminModal: FC<AssignAdminModalProps> = ({
+  isOpen,
+  onClose,
+  tenantId,
+  onCreateNew,
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+
+  // Queries
+  const { data: usersData, isLoading: isUsersLoading } = features.useUsers({
+    pageNumber: 1,
+    pageSize: 5,
+    searchTerm: searchTerm,
+    isActive: true,
+  });
+
+  const assignAdmin = features.useAssignTenantAdmin();
+
+  const handleAssign = async () => {
+    if (!selectedUser) return;
+    try {
+      await assignAdmin.mutateAsync({
+        tenantId,
+        adminId: selectedUser,
+      });
+      onClose();
+      setSearchTerm('');
+      setSelectedUser(null);
+    } catch {
+       // Error handled by mutation
+    }
+  };
+
+  const users = usersData?.items || [];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Assign Administrator"
+      size="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={assignAdmin.isPending}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleAssign}
+            loading={assignAdmin.isPending}
+            disabled={!selectedUser}
+          >
+            Assign Selected
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-6">
+        <div className="bg-primary-50 dark:bg-primary-900/10 p-4 rounded-lg flex items-start gap-3">
+            <Icon name="info" className="text-primary-600 dark:text-primary-400 mt-0.5" size={18} />
+            <div>
+                <h4 className="text-sm font-semibold text-primary-800 dark:text-primary-300">
+                    Assign Existing User
+                </h4>
+                <p className="text-sm text-primary-700 dark:text-primary-400 mt-1">
+                    Search for an existing user to assign them as an admin for this tenant.
+                    If the user doesn't exist, create a new one instead.
+                </p>
+            </div>
+        </div>
+
+        <div className="space-y-2">
+            <label className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+                Search Users
+            </label>
+            <div className="relative">
+                <Icon name="search" className="absolute left-3 top-2.5 text-neutral-400" size={18} />
+                <input
+                    type="text"
+                    className="w-full pl-10 pr-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none transition-all"
+                    placeholder="Search by name or email..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                />
+            </div>
+
+            <div className="mt-2 border border-neutral-200 dark:border-neutral-700 rounded-lg max-h-60 overflow-y-auto">
+                {isUsersLoading ? (
+                    <div className="p-4 flex justify-center">
+                        <Spinner size="sm" />
+                    </div>
+                ) : users.length === 0 ? (
+                    <div className="p-4 text-center text-sm text-neutral-500">
+                        {searchTerm ? 'No users found.' : 'Type to search users...'}
+                    </div>
+                ) : (
+                    <ul className="divide-y divide-neutral-100 dark:divide-neutral-800">
+                        {users.map((user) => (
+                            <li
+                                key={user.id}
+                                className={`
+                                    p-3 cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors flex items-center justify-between
+                                    ${selectedUser === user.id ? 'bg-primary-50 dark:bg-primary-900/20' : ''}
+                                `}
+                                onClick={() => setSelectedUser(user.id)}
+                            >
+                                <div className="flex items-center gap-3">
+                                    <div className="w-8 h-8 rounded-full bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-xs font-bold">
+                                        {user.firstName.charAt(0)}
+                                    </div>
+                                    <div>
+                                        <p className="text-sm font-medium text-neutral-900 dark:text-white">
+                                            {user.fullName}
+                                        </p>
+                                        <p className="text-xs text-neutral-500">
+                                            {user.email}
+                                        </p>
+                                    </div>
+                                </div>
+                                {selectedUser === user.id && (
+                                    <Icon name="check" className="text-primary-600" size={16} />
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </div>
+
+        <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t border-neutral-200 dark:border-neutral-700" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-white dark:bg-neutral-900 px-2 text-neutral-500">
+                    Or
+                </span>
+            </div>
+        </div>
+
+        <Button variant="outline" fullWidth onClick={onCreateNew}>
+            <Icon name="plus" className="mr-2" size={16} />
+            Create New Admin User
+        </Button>
+      </div>
+    </Modal>
+  );
+};

Frontend/apps/superadmin/src/components/tenants/DeleteTenantDialog.tsx

@@ -0,0 +1,126 @@
+import { Alert, Button, Icon, Input, Modal, Spinner, features, useToast, type Tenant } from '@ngo-platform/shared';
+import { type FC, useEffect, useState } from 'react';
+
+interface DeleteTenantDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: (tenantId: string) => void;
+    tenant: Tenant;
+}
+
+export const DeleteTenantDialog: FC<DeleteTenantDialogProps> = ({
+    isOpen,
+    onClose,
+    onSuccess,
+    tenant,
+}) => {
+    const { success, error } = useToast();
+    const [confirmName, setConfirmName] = useState('');
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    // Reset state when dialog opens/closes
+    useEffect(() => {
+        if (isOpen) {
+            setConfirmName('');
+        }
+    }, [isOpen]);
+
+    const deleteTenantMutation = features.useDeleteTenant();
+    const isNameMatch = confirmName === tenant.name;
+
+    const handleDelete = async () => {
+        if (!isNameMatch) return;
+
+        setIsDeleting(true);
+        try {
+            await deleteTenantMutation.mutateAsync(tenant.id);
+            success('Tenant deleted', `${tenant.name} has been permanently deleted.`);
+            onSuccess(tenant.id);
+            onClose();
+        } catch (err) {
+            error('Failed to delete tenant', err instanceof Error ? err.message : 'Unknown error occurred');
+        } finally {
+            setIsDeleting(false);
+        }
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title="Delete Tenant"
+            size="lg"
+        >
+            <div className="space-y-6">
+                <div className="flex items-center gap-2 text-error-600 mb-4">
+                    <Icon name="alertTriangle" size={24} />
+                    <span className="text-lg font-semibold">Warning: Irreversible Action</span>
+                </div>
+                <Alert variant="danger" title="Warning: Irreversible Action">
+                    <p>
+                        You are about to permanently delete <strong>{tenant.name}</strong>.
+                        This action cannot be undone. All associated data, including users, settings, and historical records, will be removed.
+                    </p>
+                </Alert>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex flex-col items-center justify-center text-center">
+                        <Icon name="users" size={24} className="text-neutral-400 mb-2" />
+                        <span className="text-2xl font-bold text-neutral-900 dark:text-white">
+                            {tenant.userCount ?? 0}
+                        </span>
+                        <span className="text-xs text-neutral-500 uppercase tracking-wide">Active Users</span>
+                    </div>
+                    <div className="p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex flex-col items-center justify-center text-center">
+                         {/* Placeholder for tasks until backend supports it */}
+                        <Icon name="checkCircle" size={24} className="text-neutral-400 mb-2" />
+                        <span className="text-2xl font-bold text-neutral-900 dark:text-white">N/A</span>
+                        <span className="text-xs text-neutral-500 uppercase tracking-wide">Pending Tasks</span>
+                    </div>
+                    <div className="p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex flex-col items-center justify-center text-center">
+                        <Icon name="calendar" size={24} className="text-neutral-400 mb-2" />
+                        <span className="text-base font-semibold text-neutral-900 dark:text-white">
+                             {new Date(tenant.createdAt).toLocaleDateString()}
+                        </span>
+                        <span className="text-xs text-neutral-500 uppercase tracking-wide">Created</span>
+                    </div>
+                </div>
+
+                <div className="space-y-3">
+                    <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+                        To confirm, type <span className="font-bold select-all">{tenant.name}</span> below:
+                    </label>
+                    <div className="relative">
+                        <Input
+                            value={confirmName}
+                            onChange={(e) => setConfirmName(e.target.value)}
+                            placeholder={tenant.name}
+                            className={isNameMatch ? 'border-success-500 focus:border-success-500 focus:ring-success-500' : ''}
+                            disabled={isDeleting}
+                        />
+                        {isNameMatch && (
+                            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-500 animate-in fade-in zoom-in duration-200">
+                                <Icon name="check" size={18} />
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex justify-end gap-3 pt-2">
+                    <Button variant="ghost" onClick={onClose} disabled={isDeleting}>
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="danger"
+                        onClick={handleDelete}
+                        disabled={!isNameMatch || isDeleting}
+                        className="min-w-[120px]"
+                    >
+                        {isDeleting ? <Spinner size="sm" className="mr-2" /> : <Icon name="trash" size={16} className="mr-2" />}
+                        {isDeleting ? 'Deleting...' : 'Delete Tenant'}
+                    </Button>
+                </div>
+            </div>
+        </Modal>
+    );
+};