@spacemade/ui 0.0.1

package/src/pages/users/[userId]/[name].tsx

@@ -0,0 +1,791 @@
+'use client'
+
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  useDisclosure,
+} from '@chakra-ui/react'
+
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import { UpdateUserDetailsModal } from '@components/user/modal/UpdateUserDetailsModal'
+import { UserPermissionsModal } from '@components/user/modal/UserPermissionsModal'
+
+import type { PageProps } from '@helpers/types/page-props'
+import { APIHelpers } from '@helpers/api'
+import { FullDateFormat } from '@helpers/date'
+import {
+  APP_PERMISSION_DEFS,
+  rowsToPermissionTree,
+} from '@helpers/permissions'
+import { createAgentSlug } from '@helpers/slugUtils'
+import { getUserNameFromUser } from '@helpers/string'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useAppDispatch } from '@store/hooks'
+import {
+  GroupInitialAvatar,
+  getAvatarColorClass,
+} from '@components/groups/block/GroupInitialAvatar'
+
+import type { OrgGroup, PermissionRole, User } from '@store/model'
+import { UserSystemRoles } from '@store/model'
+import { useRemoveOrgMemberMutation } from '@store/slice/api/orgApiSlice'
+import {
+  useGetUserByIdOrNameQuery,
+  useGetUserPermissionsQuery,
+  userApiSlice,
+} from '@store/slice/api/userApiSlice'
+
+type UserDetailPageProps = PageProps & {
+  initialUser: User
+}
+
+type UserProfileFields = {
+  jobTitle?: string | null
+  title?: string | null
+}
+
+const getUserDisplayName = (user: User) =>
+  getUserNameFromUser(user) || user.name || user.email || user.id
+
+const getProfileValue = (value?: string | null) => value?.trim() || ''
+
+const roleLabel = (role: PermissionRole) =>
+  role.charAt(0).toUpperCase() + role.slice(1)
+
+const getUserInitials = (user: User) =>
+  getUserDisplayName(user)
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('')
+
+const UserDetailPage: NextPage<UserDetailPageProps> = ({ initialUser }) => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const { user: authUser, activeOrgId } = useUserAuthContext()
+  const {
+    isOpen: isPermissionsOpen,
+    onOpen: onOpenPermissions,
+    onClose: onClosePermissions,
+  } = useDisclosure()
+  const {
+    isOpen: isEditOpen,
+    onOpen: onOpenEdit,
+    onClose: onCloseEdit,
+  } = useDisclosure()
+  const {
+    isOpen: isDeleteOpen,
+    onOpen: onOpenDelete,
+    onClose: onCloseDelete,
+  } = useDisclosure()
+  const [removeOrgMember] = useRemoveOrgMemberMutation()
+  const safeId =
+    typeof router.query.userId === 'string'
+      ? router.query.userId
+      : initialUser?.id
+
+  const { data: userData } = useGetUserByIdOrNameQuery(
+    { idOrName: safeId || '' },
+    { skip: !safeId }
+  )
+  const { data: permissionData } = useGetUserPermissionsQuery(
+    { userId: safeId || '' },
+    { skip: !safeId }
+  )
+
+  const user = userData || initialUser
+  const targetMembership = useMemo(
+    () =>
+      activeOrgId
+        ? user.orgMemberships?.find((membership) => membership.orgId === activeOrgId) || null
+        : null,
+    [activeOrgId, user.orgMemberships]
+  )
+
+  const displayName = useMemo(
+    () => getUserDisplayName(user),
+    [user]
+  )
+
+  const userTimezone = useMemo(
+    () => getProfileValue(user.timezone) || getProfileValue(user.timeZone),
+    [user.timeZone, user.timezone]
+  )
+
+  const profileRows = useMemo(() => {
+    const profileUser = user as User & UserProfileFields
+    const activeMembership = activeOrgId
+      ? user.orgMemberships?.find((membership) => membership.orgId === activeOrgId)
+      : null
+    const userTitle =
+      getProfileValue(profileUser.jobTitle) ||
+      getProfileValue(profileUser.title)
+    const orgName = getProfileValue(activeMembership?.org?.name)
+
+    return [
+      userTitle ? { icon: 'bi bi-briefcase-fill', value: userTitle } : null,
+      orgName ? { icon: 'bi bi-house-fill', value: orgName } : null,
+    ].filter((row): row is { icon: string; value: string } => Boolean(row))
+  }, [activeOrgId, user])
+
+  const groupRows = useMemo(() => {
+    const groupsById = new Map<string, OrgGroup>()
+
+    for (const membership of user.orgMemberships || []) {
+      const legacyGroup = membership.group
+      if (legacyGroup?.id) groupsById.set(legacyGroup.id, legacyGroup)
+
+      for (const group of membership.groups || []) {
+        if (group?.id) groupsById.set(group.id, group)
+      }
+    }
+
+    return Array.from(groupsById.values()).sort((a, b) =>
+      a.name.localeCompare(b.name)
+    )
+  }, [user.orgMemberships])
+
+  const permissionTree = useMemo(
+    () => rowsToPermissionTree(permissionData?.permissions || user.permissions || []),
+    [permissionData?.permissions, user.permissions]
+  )
+  const assignedApps = useMemo(
+    () =>
+      APP_PERMISSION_DEFS.map((app) => ({
+        ...app,
+        role: (permissionTree.apps?.[app.key]?.role ?? 'none') as PermissionRole,
+      })).filter((app) => app.role !== 'none'),
+    [permissionTree]
+  )
+
+  const openGroup = (group: OrgGroup) => {
+    router.push(`/groups/${group.id}/${encodeURIComponent(createAgentSlug(group.name))}`)
+  }
+
+  const canManagePermissions = useMemo(() => {
+    if (!authUser) return false
+    if (authUser.systemRole === UserSystemRoles.admin) return true
+    if (!activeOrgId) return false
+
+    const activeMembership =
+      (authUser.orgMemberships || []).find((m) => m.orgId === activeOrgId) ||
+      null
+
+    const isOrgAdmin =
+      activeMembership?.role === 'admin' ||
+      activeMembership?.org?.ownerId === authUser.id
+    if (isOrgAdmin) return true
+
+    const permissionRows = authUser.permissions || []
+    return permissionRows.some(
+      (row) =>
+        row.orgId === activeOrgId &&
+        row.appKey === 'users' &&
+        row.action === 'permissions.update' &&
+        row.allowed === true
+    )
+  }, [activeOrgId, authUser])
+
+  const canUpdateUser = useMemo(() => {
+    if (!authUser) return false
+    if (authUser.id === user.id) return true
+    if (authUser.systemRole === UserSystemRoles.admin) return true
+    if (!activeOrgId) return false
+
+    const activeMembership =
+      (authUser.orgMemberships || []).find((m) => m.orgId === activeOrgId) ||
+      null
+
+    const isOrgAdmin =
+      activeMembership?.role === 'admin' ||
+      activeMembership?.org?.ownerId === authUser.id
+    if (isOrgAdmin) return true
+
+    return (authUser.permissions || []).some(
+      (row) =>
+        row.orgId === activeOrgId &&
+        row.appKey === 'users' &&
+        row.action === 'update' &&
+        row.allowed === true
+    )
+  }, [activeOrgId, authUser, user.id])
+
+  const canRemoveUser = useMemo(() => {
+    if (!authUser?.id || !targetMembership?.id) return false
+    if (targetMembership.org?.ownerId && targetMembership.org.ownerId === user.id) return false
+
+    const currentMembership =
+      (authUser.orgMemberships || []).find((m) => m.orgId === (activeOrgId || '')) ||
+      null
+
+    return (
+      targetMembership.org?.ownerId === authUser.id ||
+      currentMembership?.role === 'admin' ||
+      (authUser.permissions || []).some(
+        (row) =>
+          row.orgId === (activeOrgId || '') &&
+          row.appKey === 'users' &&
+          row.action === 'delete' &&
+          row.allowed === true
+      )
+    )
+  }, [activeOrgId, authUser, targetMembership, user.id])
+
+  const onRemoveUser = async () => {
+    if (!activeOrgId || !targetMembership?.id) return
+    await removeOrgMember({ orgId: activeOrgId, membershipId: targetMembership.id }).unwrap()
+    dispatch(userApiSlice.util.invalidateTags(['LocalUsers']))
+    router.push('/users')
+  }
+
+  if (!safeId) return null
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Users</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title="Back to Users">
+              <Link href="/users" className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+      renderMainNav={() => null}
+    >
+      <div className="group-detail-page">
+        <div className="group-detail-header">
+          <div className="group-detail-title-row">
+            <div className="group-detail-identity">
+              <span
+                className={`group-initial-avatar group-initial-avatar--lg ${getAvatarColorClass(displayName)} group-detail-avatar`}
+                aria-hidden="true"
+              >
+                {getUserInitials(user)}
+              </span>
+              <div className="group-detail-copy">
+                <nav className="group-detail-breadcrumb" aria-label="Breadcrumb">
+                  <Link href="/users">Users</Link>
+                  <span aria-hidden="true">/</span>
+                  <span className="group-detail-name">{displayName}</span>
+                </nav>
+                <div className="group-detail-meta">
+                  <span>
+                    <strong>Added:</strong> {FullDateFormat(user.createdAt)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {(canUpdateUser || canManagePermissions || canRemoveUser) && (
+              <div className="group-detail-actions">
+                <Menu placement="bottom-end">
+                  {({ isOpen, onClose }) => (
+                    <>
+                      <MenuButton
+                        as={IconButton}
+                        aria-label="User actions"
+                        className={`btn btn-outline-light-gray d-flex align-items-center justify-content-center no-min-size w-xs-30p h-xs-30p rounded-pill border-0 text-dark ${
+                          isOpen ? 'bg-light-gray' : ''
+                        }`}
+                        icon={<span className="bi bi-three-dots-vertical fs-5" aria-hidden="true" />}
+                      />
+
+                      <MenuList className="bg-white p-1 shadow rounded-md menu-list-container group-detail-menu-list">
+                        {canUpdateUser && (
+                          <MenuItem
+                            className="border-0 bg-white bg-hover-background rounded-md px-3 group-detail-menu-item"
+                            icon={<span className="bi bi-pencil-square" />}
+                            onClick={() => {
+                              onClose()
+                              onOpenEdit()
+                            }}
+                          >
+                            Modify
+                          </MenuItem>
+                        )}
+
+                        {canManagePermissions && (
+                          <MenuItem
+                            className="border-0 bg-white bg-hover-background rounded-md px-3 group-detail-menu-item"
+                            icon={<span className="bi bi-shield-lock" />}
+                            onClick={() => {
+                              onClose()
+                              onOpenPermissions()
+                            }}
+                          >
+                            Permissions
+                          </MenuItem>
+                        )}
+
+                        {canRemoveUser && (
+                          <MenuItem
+                            className="border-0 bg-white bg-hover-background rounded-md px-3 group-detail-menu-item text-danger"
+                            icon={<span className="bi bi-trash" />}
+                            onClick={() => {
+                              onClose()
+                              onOpenDelete()
+                            }}
+                          >
+                            Delete
+                          </MenuItem>
+                        )}
+                      </MenuList>
+                    </>
+                  )}
+                </Menu>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="user-detail-main-grid">
+          <div className="user-detail-left-column">
+            <div className="user-detail-profile-summary-row">
+              <span
+                className={`user-detail-profile-avatar ${getAvatarColorClass(displayName)}`}
+                aria-hidden="true"
+              >
+                {getUserInitials(user)}
+              </span>
+              <div className="user-detail-profile-summary-copy">
+                <strong>{displayName}</strong>
+                {user.email && <span>{user.email}</span>}
+              </div>
+            </div>
+
+            <div className="user-detail-info-column">
+              <div className="card user-detail-info-card">
+                <div className="card-body">
+                  <h5 className="user-detail-info-card-title">About</h5>
+                  <p className="user-detail-info-card-text">
+                    {user.bio?.trim() || 'No bio provided yet.'}
+                  </p>
+                  {userTimezone && (
+                    <div className="user-detail-about-timezone">
+                      <i className="bi bi-clock" aria-hidden="true" />
+                      <span>{userTimezone}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {!!profileRows.length && (
+                <div className="card user-detail-info-card">
+                  <div className="card-body">
+                    <h5 className="user-detail-info-card-title">Profile</h5>
+                    <div className="user-detail-profile-list">
+                      {profileRows.map((row) => (
+                        <div className="user-detail-profile-row" key={`${row.icon}-${row.value}`}>
+                          <i className={row.icon} aria-hidden="true" />
+                          <span>{row.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="user-detail-related-column">
+            <section className="group-detail-section user-detail-related-section">
+              <div className="group-detail-section-header">
+                <h2>Groups the user is part of</h2>
+              </div>
+
+              {!!groupRows.length && (
+                <div className="groups-fullscreen-table user-detail-groups-grid">
+                  <div className="groups-table-shell">
+                    <div className="table-responsive groups-table-scroll custom-scroll-bar">
+                      <table className="table align-middle mb-0 groups-table-modern">
+                        <tbody>
+                          {groupRows.map((group) => (
+                            <tr
+                              key={group.id}
+                              className="cursor-pointer"
+                              onClick={() => openGroup(group)}
+                            >
+                              <td>
+                                <div className="d-flex align-items-center gap-3 min-width-0">
+                                  <GroupInitialAvatar name={group.name} size="sm" />
+                                  <span className="fw-semibold text-truncate d-block">
+                                    {group.name}
+                                  </span>
+                                </div>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </section>
+
+            <section className="group-detail-section group-detail-access-section user-detail-related-section">
+              <div className="group-detail-section-header">
+                <h2>Apps the user has access to</h2>
+              </div>
+
+              {assignedApps.length ? (
+                <div className="table-responsive">
+                  <table className="table mb-0 group-detail-table">
+                    <thead>
+                      <tr>
+                        <th scope="col">App</th>
+                        <th scope="col" className="group-detail-table-col-access">Access</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {assignedApps.map((app) => (
+                        <tr key={app.key}>
+                          <td className="align-middle">{app.label}</td>
+                          <td className="align-middle fw-semibold group-detail-access-cell">
+                            {roleLabel(app.role)}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                canManagePermissions && (
+                  <button
+                    type="button"
+                    className="btn btn-primary group-detail-manage-button"
+                    onClick={onOpenPermissions}
+                  >
+                    Apps
+                  </button>
+                )
+              )}
+            </section>
+          </div>
+        </div>
+      </div>
+
+      {canUpdateUser && (
+        <UpdateUserDetailsModal
+          user={user}
+          isOpen={isEditOpen}
+          onClose={onCloseEdit}
+          canEditDetails
+          showAdminSettings={false}
+        />
+      )}
+
+      {canManagePermissions && safeId && (
+        <UserPermissionsModal
+          userId={safeId}
+          isOpen={isPermissionsOpen}
+          onClose={onClosePermissions}
+        />
+      )}
+
+      {canRemoveUser && (
+        <DeleteDialog
+          isOpen={isDeleteOpen}
+          onClose={onCloseDelete}
+          titleOverride={`Remove "${displayName}" User?`}
+          descriptionOverride="This will remove the user from the active organization."
+          entityDescription="User"
+          onDelete={onRemoveUser}
+        />
+      )}
+
+      <style jsx>{`
+        .user-detail-main-grid {
+          align-items: flex-start;
+          display: grid;
+          gap: 1.5rem;
+          grid-template-columns: 1fr;
+          margin-top: 1.5rem;
+        }
+
+        .user-detail-left-column {
+          min-width: 0;
+        }
+
+        .user-detail-related-column {
+          min-width: 0;
+        }
+
+        .user-detail-related-section {
+          border-top: 0;
+          padding-top: 0;
+        }
+
+        .user-detail-related-section + .user-detail-related-section {
+          margin-top: 1.25rem;
+        }
+
+        .user-detail-related-section .group-detail-manage-button {
+          margin-top: 1rem;
+        }
+
+        .user-detail-profile-summary-row {
+          align-items: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          margin: 0 0 1.75rem;
+          text-align: center;
+          width: 100%;
+        }
+
+        .user-detail-profile-avatar {
+          align-items: center;
+          border-radius: 999px;
+          color: #fff;
+          display: inline-flex;
+          font-size: 3rem;
+          font-weight: 700;
+          height: 170px;
+          justify-content: center;
+          line-height: 1;
+          width: 170px;
+        }
+
+        .user-detail-profile-summary-copy {
+          color: #1f2937;
+          display: grid;
+          font-size: 1rem;
+          gap: 0.75rem;
+          line-height: 1.2;
+          margin-top: 1.5rem;
+        }
+
+        .user-detail-profile-summary-copy strong {
+          font-weight: 700;
+        }
+
+        .user-detail-profile-summary-copy span {
+          font-size: 1rem;
+          overflow-wrap: anywhere;
+        }
+
+        .user-detail-info-column {
+          max-width: 100%;
+          width: 100%;
+        }
+
+        .user-detail-info-card {
+          border: 1px solid #dbe3ee;
+          border-radius: 0;
+          box-shadow: none;
+          width: 100%;
+        }
+
+        .user-detail-info-card + .user-detail-info-card {
+          margin-top: 1.5rem;
+        }
+
+        .user-detail-info-card .card-body {
+          padding: 1.5rem;
+        }
+
+        .user-detail-info-card-title {
+          color: #1f2937;
+          font-size: 1.25rem;
+          font-weight: 700;
+          line-height: 1.2;
+          margin: 0 0 1.25rem;
+        }
+
+        .user-detail-info-card-text {
+          color: #6b7280;
+          font-size: 1rem;
+          line-height: 1.4;
+          margin: 0;
+        }
+
+        .user-detail-about-timezone {
+          align-items: center;
+          color: #1f2937;
+          display: flex;
+          font-size: 1rem;
+          gap: 1rem;
+          margin-top: 1.25rem;
+          min-width: 0;
+        }
+
+        .user-detail-about-timezone i {
+          color: #1f2937;
+          flex: 0 0 18px;
+          font-size: 1rem;
+          line-height: 1;
+          text-align: center;
+        }
+
+        .user-detail-profile-list {
+          display: grid;
+          gap: 1.35rem;
+        }
+
+        .user-detail-profile-row {
+          align-items: center;
+          color: #1f2937;
+          display: flex;
+          font-size: 1rem;
+          gap: 1rem;
+          min-width: 0;
+        }
+
+        .user-detail-profile-row i {
+          color: #1f2937;
+          flex: 0 0 18px;
+          font-size: 1rem;
+          line-height: 1;
+          text-align: center;
+        }
+
+        .user-detail-profile-row span {
+          min-width: 0;
+          overflow-wrap: anywhere;
+        }
+
+        .groups-fullscreen-table {
+          display: grid;
+          gap: 0.85rem;
+          width: 100%;
+        }
+
+        .groups-table-shell {
+          background: #fff;
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          overflow: hidden;
+        }
+
+        .groups-table-scroll {
+          max-height: none;
+          min-height: 154px;
+          overflow: auto;
+        }
+
+        :global(.groups-table-modern thead th) {
+          background: #f2f5f9;
+          border-bottom: 1px solid #dce3eb;
+          color: #2a3a51;
+          font-size: 0.76rem;
+          letter-spacing: 0.03em;
+          position: sticky;
+          text-transform: uppercase;
+          top: 0;
+          z-index: 1;
+        }
+
+        :global(.groups-table-modern tbody tr:hover) {
+          background: #f7fafe;
+        }
+
+        :global(.groups-table-modern tbody td) {
+          border-color: #edf1f6;
+        }
+
+        :global(.min-width-0) {
+          min-width: 0;
+        }
+
+        @media (min-width: 992px) {
+          .user-detail-main-grid {
+            gap: 2rem;
+            grid-template-columns: 352px minmax(0, 1fr);
+            margin-top: 2rem;
+          }
+
+          .user-detail-related-column {
+            padding-top: 0.25rem;
+          }
+
+          .user-detail-profile-avatar {
+            font-size: 3.8rem;
+            height: 205px;
+            width: 205px;
+          }
+
+          .user-detail-info-column {
+            flex: 0 0 352px;
+            max-width: 352px;
+            width: 352px;
+          }
+
+          .groups-table-scroll {
+            max-height: calc(100vh - 350px);
+          }
+        }
+      `}</style>
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<UserDetailPageProps> = async (
+  context
+) => {
+  const { userId, name } = context.query
+  const cookie = context.req.headers.cookie || ''
+
+  const authUserData = await APIHelpers.get('/auth/user', { Cookie: cookie })
+  if (!authUserData?.user) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    }
+  }
+
+  const data = await APIHelpers.get(`/users/${userId}`, {
+    Cookie: cookie,
+  })
+
+  const user = (data as any)?.user as User | undefined
+
+  if (!data || (data as any).error || !user) {
+    return {
+      redirect: {
+        destination: '/users',
+        permanent: false,
+      },
+    }
+  }
+
+  const displayName = getUserNameFromUser(user) || user.name || user.email || user.id
+  const correctSlug = createAgentSlug(displayName)
+  const requestedSlug =
+    typeof name === 'string' ? name : Array.isArray(name) ? name[0] : undefined
+
+  if (requestedSlug !== correctSlug) {
+    return {
+      redirect: {
+        destination: `/users/${user.id}/${correctSlug}`,
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: {
+      pageTitle: displayName,
+      initialUser: user,
+    },
+  }
+}
+
+export default WithAuth(UserDetailPage)