@spacemade/ui 0.0.1

package/src/components/user/grid/UserGrid.tsx

@@ -0,0 +1,475 @@
+'use client'
+/* eslint-disable @next/next/no-img-element */
+import { SyntheticEvent, useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/router'
+
+import { OrgMemberRole, OrgMembership, User } from '@store/model'
+import { useGetUsersQuery } from '@store/slice/api/userApiSlice'
+import { useListOrgMembershipsQuery, useRemoveOrgMemberMutation } from '@store/slice/api/orgApiSlice'
+import { useUserAuthContext } from '@context/UserAuthContext'
+
+import Badge from '@components/common/badge/Badge'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+
+import { defaultAvatar } from '@helpers/images'
+import { createAgentSlug } from '@helpers/slugUtils'
+import { getUserNameFromUser, truncateString } from '@helpers/string'
+import { useSearchAndFilterCommon } from '@hooks'
+
+type UserRow =
+  | { type: 'user'; user: User }
+  | { type: 'invite'; user: User; membership: OrgMembership }
+
+const normalizeText = (value?: string) => (value || '').trim().toLowerCase()
+
+const toTime = (value?: string) => {
+  const ms = new Date(String(value || '')).getTime()
+  return Number.isFinite(ms) ? ms : 0
+}
+
+const formatTimestamp = (value?: string) => {
+  const ms = toTime(value)
+  if (!ms) return '-'
+  return new Date(ms).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const toRoleLabel = (role?: OrgMemberRole | null, groupNames: string[] = []) => {
+  if (groupNames.length > 1) return 'Multiple groups'
+  if (groupNames.length === 1) return groupNames[0]
+  if (!role) return 'Unassigned'
+  return role.charAt(0).toUpperCase() + role.slice(1)
+}
+
+const getUserStatusBadge = ({
+  isInvite,
+  isOwner,
+  roleLabel,
+}: {
+  isInvite: boolean
+  isOwner: boolean
+  roleLabel: string
+}) => {
+  if (isOwner) {
+    return { bgColor: 'primary', textColor: 'white', label: 'Owner' }
+  }
+  if (isInvite) {
+    return { bgColor: 'warning', textColor: 'dark', label: roleLabel }
+  }
+  return { bgColor: 'secondary', textColor: 'white', label: roleLabel }
+}
+
+const UserGrid = ({
+  skipPaging = false,
+  onCreate,
+  onEmptyStateChange,
+  orgId,
+  orgOwnerId,
+}: {
+  skipPaging?: boolean
+  onCreate?: () => void
+  onEmptyStateChange?: (isEmptyState: boolean) => void
+  orgId?: string | null
+  orgOwnerId?: string | null
+}) => {
+  const { push: redirect } = useRouter()
+  const { user: authUser, activeOrgId } = useUserAuthContext()
+  const { searchState, setSearchState } = useSearchAndFilterCommon()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [removeOrgMember, { isLoading: isRemovingMember }] = useRemoveOrgMemberMutation()
+
+  const { data, isLoading, isFetching, refetch: refetchUsers } = useGetUsersQuery({
+    orgId: orgId || undefined,
+    limit: 500,
+    page: 1,
+  }, { skip: !orgId })
+  const {
+    data: orgMembershipsData,
+    isLoading: isMembershipsLoading,
+    isFetching: isMembershipsFetching,
+    refetch: refetchOrgMemberships,
+  } = useListOrgMembershipsQuery(
+    { orgId: orgId || '', limit: 500, page: 1 },
+    { skip: !orgId }
+  )
+
+  const activeUsers = data?.results ?? []
+  const activeUserIds = new Set(activeUsers.map((u) => u.id))
+  const membershipByUserId = new Map(
+    (orgMembershipsData?.results ?? [])
+      .filter((membership) => membership.userId)
+      .map((membership) => [membership.userId, membership])
+  )
+  const inferredOwnerId =
+    orgOwnerId ||
+    (orgMembershipsData?.results ?? []).find((membership) => membership.org?.ownerId)?.org
+      ?.ownerId ||
+    null
+  const permissionOrgId = orgId || activeOrgId || ''
+  const currentMembership =
+    (authUser?.orgMemberships || []).find((m) => m.orgId === permissionOrgId) ||
+    null
+  const canManageUsers =
+    !!authUser?.id &&
+    (!!inferredOwnerId && inferredOwnerId === authUser.id ||
+      currentMembership?.role === 'admin' ||
+      (authUser.permissions || []).some(
+        (row) =>
+          row.orgId === permissionOrgId &&
+          row.appKey === 'users' &&
+          row.action === 'delete' &&
+          row.allowed === true
+      ))
+  const pendingMemberships = (orgMembershipsData?.results ?? []).filter(
+    (membership) => membership.status === 'pending' || membership.inviteAccepted === false
+  )
+  const invitedRows: UserRow[] = pendingMemberships
+    .filter((membership) => membership.user && !activeUserIds.has(membership.user.id))
+    .map((membership) => ({
+      type: 'invite',
+      user: membership.user as User,
+      membership,
+    }))
+  const rows: UserRow[] = [
+    ...invitedRows,
+    ...activeUsers.map((user) => ({ type: 'user', user })),
+  ]
+  const isInitialLoading =
+    (isLoading && !data?.results) ||
+    (isMembershipsLoading && !orgMembershipsData?.results)
+  const isGridFetching = isFetching || isMembershipsFetching
+
+  const filteredRows = useMemo(() => {
+    const normalizedSearch = normalizeText(searchQuery)
+    return rows.filter((row) => {
+      if (!normalizedSearch) return true
+      const user = row.user
+      const membership =
+        row.type === 'invite'
+          ? row.membership
+          : membershipByUserId.get(user.id) || null
+      const displayName = getUserNameFromUser(user) || user.name || user.email || 'User'
+      const bio = row.type === 'invite' ? user.email || 'Invitation pending' : user.shortBio || user.bio
+      const groupNames = Array.from(
+        new Map(
+          [
+            ...(membership?.groups || []),
+            ...(membership?.group ? [membership.group] : []),
+          ]
+            .filter((group) => group?.id && group?.name)
+            .map((group) => [group.id, group.name])
+        ).values()
+      )
+      const roleLabel = toRoleLabel(membership?.role, groupNames)
+
+      const haystack = normalizeText(
+        `${user.id} ${displayName} ${user.email || ''} ${bio || ''} ${roleLabel} ${row.type}`
+      )
+      return haystack.includes(normalizedSearch)
+    })
+  }, [membershipByUserId, rows, searchQuery])
+
+  const pageSize = searchState.limit || 10
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize))
+  const page = Math.min(searchState.page || 1, totalPages)
+
+  useEffect(() => {
+    if ((searchState.page || 1) > totalPages) {
+      setSearchState((prev) => ({
+        ...prev,
+        page: totalPages,
+      }))
+    }
+  }, [searchState.page, setSearchState, totalPages])
+
+  const visibleRows = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredRows.slice(start, start + pageSize)
+  }, [filteredRows, page, pageSize])
+
+  const handleRemoveUser = async (membership: OrgMembership) => {
+    if (!orgId || !membership?.id) return
+    const membershipUserId = String(membership.userId || '').trim()
+    const ownerId = String(inferredOwnerId || '').trim()
+    if (membershipUserId && ownerId && membershipUserId === ownerId) return
+    const ok = window.confirm('Remove this user from the organization?')
+    if (!ok) return
+    await removeOrgMember({ orgId, membershipId: membership.id }).unwrap()
+    await Promise.all([refetchUsers(), refetchOrgMemberships()])
+  }
+
+  const onRowClick = (event: SyntheticEvent, user: User) => {
+    const parent = (event.target as HTMLElement).closest('[data-type="action"]')
+    if (parent) return
+
+    const displayName = getUserNameFromUser(user) || user.name || 'user'
+    redirect(`/users/${user.id}/${encodeURIComponent(createAgentSlug(displayName))}`)
+  }
+
+  useEffect(() => {
+    if (!onEmptyStateChange) return
+    if (isInitialLoading) return
+    onEmptyStateChange(rows.length === 0)
+  }, [isInitialLoading, onEmptyStateChange, rows.length])
+
+  return (
+    <div className="users-fullscreen-table">
+      <div className="users-table-toolbar">
+        <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
+          <div className="d-flex align-items-center gap-2">
+            <h2 className="h6 mb-0 fw-bold text-dark">User Directory</h2>
+            <span className="small text-muted">{filteredRows.length.toLocaleString('en-US')} users</span>
+          </div>
+          {onCreate && (
+            <button
+              type="button"
+              onClick={onCreate}
+              className="btn btn-primary btn-sm rounded-pill fw-bold px-3"
+            >
+              + Add User
+            </button>
+          )}
+        </div>
+
+        <div className="toolbar-controls">
+          <input
+            type="search"
+            className="form-control"
+            placeholder="Search by user, email, role, id, or bio"
+            value={searchQuery}
+            onChange={(event) => {
+              setSearchQuery(event.target.value)
+              setSearchState((prev) => ({
+                ...prev,
+                page: 1,
+              }))
+            }}
+            aria-label="Search users"
+          />
+
+          <button
+            type="button"
+            className="btn btn-light"
+            onClick={() => {
+              setSearchQuery('')
+              setSearchState((prev) => ({
+                ...prev,
+                page: 1,
+              }))
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="users-table-shell">
+        <div className="table-responsive users-table-scroll custom-scroll-bar">
+          <table className="table align-middle mb-0 users-table-modern">
+            <thead>
+              <tr>
+                <th style={{ minWidth: 340 }}>User</th>
+                <th style={{ minWidth: 190 }}>Joined</th>
+                <th style={{ minWidth: 130 }}>Status</th>
+                <th style={{ minWidth: 120 }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visibleRows.map((row) => {
+                const user = row.user
+                const isInvite = row.type === 'invite'
+                const membership =
+                  row.type === 'invite'
+                    ? row.membership
+                    : membershipByUserId.get(user.id) || null
+                const isOwner = !!inferredOwnerId && user.id === inferredOwnerId
+                const displayName =
+                  getUserNameFromUser(user) || user.name || user.email || 'User'
+                const bio = isInvite
+                  ? user.email || 'Invitation pending'
+                  : user.shortBio || user.bio
+                const groupNames = Array.from(
+                  new Map(
+                    [
+                      ...(membership?.groups || []),
+                      ...(membership?.group ? [membership.group] : []),
+                    ]
+                      .filter((group) => group?.id && group?.name)
+                      .map((group) => [group.id, group.name])
+                  ).values()
+                )
+                const roleLabel = isOwner ? 'Owner' : toRoleLabel(membership?.role, groupNames)
+                const joinedAt = isInvite ? membership?.createdAt : user.createdAt
+
+                return (
+                  <tr
+                    key={`${row.type}-${user.id}`}
+                    className={isInvite ? '' : 'cursor-pointer'}
+                    onClick={(e) => {
+                      if (isInvite) return
+                      onRowClick(e, user)
+                    }}
+                  >
+                    <td>
+                      <div className="d-flex align-items-center gap-3 min-width-0">
+                        <OptimizedImage
+                          src={user.profileMedia?.media?.sourceUrl || defaultAvatar}
+                          alt={user.profileMedia?.media?.details?.altText || displayName}
+                          width={36}
+                          height={36}
+                          className="object-fit-cover rounded-pill flex-shrink-0"
+                        />
+                          <div className="d-flex flex-column min-width-0">
+                            <span className="fw-semibold text-truncate">{displayName}</span>
+                            <span className="text-muted small text-truncate">
+                              {groupNames.length
+                                ? `${groupNames.join(', ')} • ${bio ? truncateString(bio, 100) : 'No bio yet'}`
+                                : bio
+                                  ? truncateString(bio, 120)
+                                  : 'No bio yet'}
+                            </span>
+                          </div>
+                      </div>
+                    </td>
+                    <td className="text-muted">
+                      {formatTimestamp(joinedAt)}
+                    </td>
+                    <td>
+                      <Badge
+                        className="px-3"
+                        {...getUserStatusBadge({ isInvite, isOwner, roleLabel })}
+                      />
+                    </td>
+                    <td>
+                      {canManageUsers && membership && !isOwner ? (
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-outline-danger"
+                          data-type="action"
+                          disabled={isRemovingMember}
+                          onClick={async (event) => {
+                            event.stopPropagation()
+                            await handleRemoveUser(membership)
+                          }}
+                        >
+                          Remove
+                        </button>
+                      ) : (
+                        <span className="text-muted small">—</span>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {isInitialLoading && (
+          <div className="d-flex justify-content-center py-4">
+            <Spinner size="sm" />
+          </div>
+        )}
+
+        {!isInitialLoading && !isGridFetching && visibleRows.length === 0 && (
+          <div className="d-flex flex-column align-items-center justify-content-center text-center py-4">
+            <div
+              className="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3"
+              style={{ width: 48, height: 48 }}
+            >
+              <i className="bi bi-people text-dark" />
+            </div>
+            <h5 className="mb-2">Users</h5>
+            <p className="text-muted mb-0" style={{ maxWidth: 420 }}>
+              {searchQuery
+                ? 'No users match the current filters.'
+                : 'No users to show yet. Once users are created, they will appear here.'}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {!skipPaging && (
+        <TablePaging totalCount={filteredRows.length} setSearchState={setSearchState} />
+      )}
+
+      <style jsx>{`
+        .users-fullscreen-table {
+          width: 100%;
+          display: grid;
+          gap: 0.85rem;
+        }
+
+        .users-table-toolbar {
+          border: 1px solid #dde3ea;
+          border-radius: 14px;
+          background: linear-gradient(180deg, #f9fbfd 0%, #f4f7fb 100%);
+          padding: 0.85rem;
+          display: grid;
+          gap: 0.75rem;
+        }
+
+        .toolbar-controls {
+          display: grid;
+          gap: 0.65rem;
+          grid-template-columns: minmax(260px, 1fr) auto;
+        }
+
+        .users-table-shell {
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .users-table-scroll {
+          max-height: calc(100vh - 350px);
+          min-height: 260px;
+          overflow: auto;
+        }
+
+        :global(.users-table-modern thead th) {
+          position: sticky;
+          top: 0;
+          background: #f2f5f9;
+          border-bottom: 1px solid #dce3eb;
+          color: #2a3a51;
+          font-size: 0.76rem;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          z-index: 1;
+        }
+
+        :global(.users-table-modern tbody tr:hover) {
+          background: #f7fafe;
+        }
+
+        :global(.users-table-modern tbody td) {
+          border-color: #edf1f6;
+        }
+
+        :global(.min-width-0) {
+          min-width: 0;
+        }
+
+        @media (max-width: 920px) {
+          .toolbar-controls {
+            grid-template-columns: 1fr;
+          }
+
+          .users-table-scroll {
+            max-height: none;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default UserGrid

package/src/components/user/modal/AddUserModal.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import Button from '@components/common/button/Button'
+import UserInvitePicker, {
+  type UserInviteSelection,
+} from '@components/common/forms/UserInvitePicker'
+import { useInviteOrgMemberMutation } from '@store/slice/api/orgApiSlice'
+import { useListOrgGroupsQuery } from '@store/slice/api/orgGroupApiSlice'
+import type { OrgGroup, OrgMemberRole } from '@store/model'
+
+export default function AddUserModal({
+  isOpen,
+  onClose,
+  orgId,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  orgId?: string | null
+}) {
+  const [inviteOrgMember, { isLoading }] = useInviteOrgMemberMutation()
+  const [selectedInvites, setSelectedInvites] = useState<UserInviteSelection[]>([])
+  const [selectedGroupId, setSelectedGroupId] = useState('')
+  const { data: groupsData } = useListOrgGroupsQuery(
+    { orgId: orgId || '', limit: 200, page: 1 },
+    { skip: !orgId }
+  )
+  const groups = (groupsData?.results || []) as OrgGroup[]
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSelectedInvites([])
+      setSelectedGroupId('')
+    }
+  }, [isOpen])
+  const handleInvite = async () => {
+    if (!orgId) {
+      toast.error('No organization selected')
+      return
+    }
+
+    if (!selectedInvites.length) {
+      toast.error('Add at least one user or email to invite')
+      return
+    }
+    if (!selectedGroupId) {
+      toast.error('Select a group first')
+      return
+    }
+
+    try {
+      await Promise.all(
+        selectedInvites.map((invite) => {
+          if (invite.type === 'user' && invite.user?.id) {
+            return inviteOrgMember({
+              orgId,
+              userId: invite.user.id,
+              role: (invite.role || 'member') as OrgMemberRole,
+              orgGroupId: selectedGroupId,
+              captcha: null,
+            }).unwrap()
+          }
+
+          return inviteOrgMember({
+            orgId,
+            email: String(invite.email || '').toLowerCase(),
+            role: (invite.role || 'member') as OrgMemberRole,
+            orgGroupId: selectedGroupId,
+            captcha: null,
+          }).unwrap()
+        })
+      )
+
+      toast.success(
+        `Invitation${selectedInvites.length > 1 ? 's' : ''} sent successfully!`
+      )
+      setSelectedInvites([])
+      onClose()
+    } catch (err: any) {
+      toast.error(err?.data?.message || 'Failed to send invitation')
+    }
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size="lg">
+      <DrawerOverlay />
+      <DrawerContent className="drawer">
+        <DrawerCloseButton />
+        <DrawerHeader>Add users</DrawerHeader>
+
+        <DrawerBody>
+          <div className="mt-3">
+            <p className="text-muted mb-4">
+              Invite people by selecting an existing user or adding an email address.
+            </p>
+
+            <div className="mb-4 position-relative">
+              <label htmlFor="invite-group" className="form-label fw-semibold">
+                Group
+              </label>
+              <select
+                id="invite-group"
+                className="form-select mb-3"
+                value={selectedGroupId}
+                onChange={(e) => setSelectedGroupId(e.target.value)}
+              >
+                <option value="">Select a group</option>
+                {groups.map((group) => (
+                  <option key={group.id} value={group.id}>
+                    {group.name}
+                  </option>
+                ))}
+              </select>
+              {!groups.length && (
+                <div className="small text-muted mb-3">
+                  Create a group first so invited users get permissions immediately.
+                </div>
+              )}
+
+              <UserInvitePicker
+                inputId="user-search"
+                label="Search by username, full name or email address"
+                value={selectedInvites}
+                onChange={setSelectedInvites}
+                defaultRole="member"
+                selectedTitle="Invites"
+              />
+              {selectedInvites.length > 0 ? (
+                <div className="small text-muted mt-n2 mb-1">
+                  Selected users will inherit the chosen group access when they accept.
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleInvite}
+            color="primary"
+            className="text-white"
+            isLoading={isLoading}
+            disabled={isLoading || !selectedGroupId || !groups.length}
+          >
+            Send invites
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}