@spacemade/ui 0.0.1

package/src/pages/groups/[groupId]/[name].tsx

@@ -0,0 +1,337 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo } from 'react'
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  useDisclosure,
+} from '@chakra-ui/react'
+
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import { RenameDialog } from '@components/common/dialog/RenameDialog'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { GroupInitialAvatar } from '@components/groups/block/GroupInitialAvatar'
+import OrgGroupMembersGrid from '@components/groups/grid/OrgGroupMembersGrid'
+import { OrgGroupMembersModal } from '@components/groups/modal/OrgGroupMembersModal'
+import { OrgGroupPermissionsModal } from '@components/groups/modal/OrgGroupPermissionsModal'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { FullDateFormat } from '@helpers/date'
+import { APP_PERMISSION_DEFS, rowsToPermissionTree } from '@helpers/permissions'
+import { createAgentSlug } from '@helpers/slugUtils'
+import type { OrgGroup, PermissionRole } from '@store/model'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+import {
+  useDeleteOrgGroupMutation,
+  useGetOrgGroupPermissionsQuery,
+  useGetOrgGroupQuery,
+  useRemoveOrgGroupMemberMutation,
+  useUpdateOrgGroupMutation,
+} from '@store/slice/api/orgGroupApiSlice'
+
+const roleLabel = (role: PermissionRole) =>
+  role === 'none' ? 'No access' : role.charAt(0).toUpperCase() + role.slice(1)
+
+const GroupDetailPage = () => {
+  const router = useRouter()
+  const { user, activeOrgId } = useUserAuthContext()
+  const renameDialog = useDisclosure()
+  const deleteDialog = useDisclosure()
+  const membersModal = useDisclosure()
+  const permissionsModal = useDisclosure()
+
+  const groupId =
+    typeof router.query.groupId === 'string'
+      ? router.query.groupId
+      : ''
+
+  const { data: orgMembershipsData, isLoading: isLoadingOrgs } = useListOrgsQuery(undefined, {
+    skip: !user?.id,
+  })
+  const orgMemberships = useMemo(
+    () => orgMembershipsData ?? user?.orgMemberships ?? [],
+    [orgMembershipsData, user?.orgMemberships]
+  )
+  const activeMembership = useMemo(() => {
+    if (!orgMemberships.length) return null
+    return (
+      orgMemberships.find((m) => m.orgId === activeOrgId) ||
+      orgMemberships.find((m) => m.org?.orgType === 'personal') ||
+      orgMemberships[0] ||
+      null
+    )
+  }, [activeOrgId, orgMemberships])
+
+  const activeOrg = activeMembership?.org
+  const resolvedOrgId = activeMembership?.orgId || activeOrgId
+  const isPersonalOrg =
+    activeOrg?.orgType === 'personal' ||
+    (!!activeOrg?.slug && !!user?.name && activeOrg.slug === user.name)
+
+  const {
+    data: group,
+    isLoading: isLoadingGroup,
+    isError: isGroupError,
+  } = useGetOrgGroupQuery(
+    { orgId: resolvedOrgId!, groupId },
+    { skip: !resolvedOrgId || !groupId || isPersonalOrg }
+  )
+  const { data: permissionRows } = useGetOrgGroupPermissionsQuery(
+    { orgId: resolvedOrgId!, groupId },
+    { skip: !resolvedOrgId || !groupId || isPersonalOrg }
+  )
+  const [updateGroup] = useUpdateOrgGroupMutation()
+  const [deleteGroup] = useDeleteOrgGroupMutation()
+  const [removeMember, { isLoading: isRemovingMember }] = useRemoveOrgGroupMemberMutation()
+
+  const members = useMemo(
+    () => (group?.memberships || []).filter((membership) => membership?.userId),
+    [group?.memberships]
+  )
+  const permissionTree = useMemo(
+    () => rowsToPermissionTree(permissionRows || group?.permissions || []),
+    [group?.permissions, permissionRows]
+  )
+  const assignedApps = useMemo(
+    () =>
+      APP_PERMISSION_DEFS.map((app) => ({
+        ...app,
+        role: (permissionTree.apps?.[app.key]?.role ?? 'none') as PermissionRole,
+      })).filter((app) => app.role !== 'none'),
+    [permissionTree]
+  )
+
+  useEffect(() => {
+    if (!user?.id || isLoadingOrgs) return
+    if (isPersonalOrg) {
+      router.replace('/')
+    }
+  }, [isLoadingOrgs, isPersonalOrg, router, user?.id, user?.name])
+
+  useEffect(() => {
+    if (!group?.id || !group.name) return
+    const requestedSlug =
+      typeof router.query.name === 'string'
+        ? router.query.name
+        : ''
+    const correctSlug = createAgentSlug(group.name)
+    if (requestedSlug && requestedSlug !== correctSlug) {
+      router.replace(`/groups/${group.id}/${encodeURIComponent(correctSlug)}`)
+    }
+  }, [group?.id, group?.name, router])
+
+  const onRenameGroup = async (name: string) => {
+    if (!group || !resolvedOrgId) return
+    const updated = await updateGroup({
+      orgId: resolvedOrgId,
+      groupId: group.id,
+      name: name.trim(),
+      description: group.description ?? null,
+    }).unwrap()
+    router.replace(`/groups/${updated.id}/${encodeURIComponent(createAgentSlug(updated.name))}`)
+  }
+
+  const onDeleteGroup = async () => {
+    if (!group || !resolvedOrgId) return
+    await deleteGroup({ orgId: resolvedOrgId, groupId: group.id }).unwrap()
+    router.push('/groups')
+  }
+
+  const onRemoveMember = async (membershipId: string) => {
+    if (!group || !resolvedOrgId) return
+    await removeMember({ orgId: resolvedOrgId, groupId: group.id, membershipId }).unwrap()
+  }
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Groups</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title="Back to Groups">
+              <Link href="/groups" className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+      renderMainNav={() => null}
+    >
+      <div className="group-detail-page">
+        {isGroupError && <div className="group-detail-error text-danger">Group not found.</div>}
+        {group && (
+          <>
+            <div className="group-detail-header">
+              <div className="group-detail-title-row">
+                <div className="group-detail-identity">
+                  <GroupInitialAvatar name={group.name} size="lg" className="group-detail-avatar" />
+                  <div className="group-detail-copy">
+                    <nav className="group-detail-breadcrumb" aria-label="Breadcrumb">
+                      <Link href="/groups">Groups</Link>
+                      <span aria-hidden="true">/</span>
+                      <span className="group-detail-name">{group.name}</span>
+                    </nav>
+                    <div className="group-detail-meta">
+                      <span>
+                        <strong>Added:</strong> {FullDateFormat(group.createdAt)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="group-detail-actions">
+                  <button
+                    type="button"
+                    className="btn btn-primary btn-sm rounded-pill fw-bold px-3"
+                    onClick={membersModal.onOpen}
+                  >
+                    + Add User
+                  </button>
+
+                  <Menu placement="bottom-end">
+                    {({ isOpen, onClose }) => (
+                      <>
+                        <MenuButton
+                          as={IconButton}
+                          aria-label="Group 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">
+                          <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()
+                              renameDialog.onOpen()
+                            }}
+                          >
+                            Modify
+                          </MenuItem>
+
+                          <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()
+                              deleteDialog.onOpen()
+                            }}
+                          >
+                            Delete
+                          </MenuItem>
+
+                          <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()
+                              permissionsModal.onOpen()
+                            }}
+                          >
+                            Permissions
+                          </MenuItem>
+                        </MenuList>
+                      </>
+                    )}
+                  </Menu>
+                </div>
+              </div>
+            </div>
+
+            <div className="group-detail-sections">
+              <OrgGroupMembersGrid
+                members={members}
+                isRemovingMember={isRemovingMember}
+                onRemoveMember={onRemoveMember}
+              />
+
+              <section className="group-detail-section group-detail-access-section">
+                <div className="group-detail-section-header">
+                  <h2>Apps the group 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>
+                ) : (
+                  <>
+                    <p className="group-detail-access-empty">
+                      This group does not have assigned permissions
+                    </p>
+                  </>
+                )}
+              </section>
+            </div>
+
+            <OrgGroupMembersModal
+              orgId={resolvedOrgId!}
+              group={group as OrgGroup}
+              isOpen={membersModal.isOpen}
+              onClose={membersModal.onClose}
+            />
+
+            <OrgGroupPermissionsModal
+              orgId={resolvedOrgId!}
+              groupId={group.id}
+              groupName={group.name}
+              isOpen={permissionsModal.isOpen}
+              onClose={permissionsModal.onClose}
+            />
+
+            <RenameDialog
+              isOpen={renameDialog.isOpen}
+              onClose={renameDialog.onClose}
+              title="Modify"
+              entityDescription="Group"
+              initialName={group.name}
+              placeholder="Group Name"
+              onRename={onRenameGroup}
+            />
+
+            <DeleteDialog
+              isOpen={deleteDialog.isOpen}
+              onClose={deleteDialog.onClose}
+              titleOverride="Delete"
+              entityDescription="Group"
+              onDelete={onDeleteGroup}
+            />
+          </>
+        )}
+      </div>
+    </SideNavLayout>
+  )
+}
+
+GroupDetailPage.getInitialProps = async () => ({
+  pageTitle: 'Group',
+})
+
+export default WithAuth(GroupDetailPage)

package/src/pages/groups/index.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useEffect, useMemo } from 'react'
+import { useRouter } from 'next/router'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import OrgGroupsTable from '@components/groups/table/OrgGroupsTable'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+
+const Groups = () => {
+  const router = useRouter()
+  const { user, activeOrgId } = useUserAuthContext()
+  const { data: orgMembershipsData, isLoading: isLoadingOrgs } = useListOrgsQuery(undefined, {
+    skip: !user?.id,
+  })
+
+  const orgMemberships = useMemo(
+    () => orgMembershipsData ?? user?.orgMemberships ?? [],
+    [orgMembershipsData, user?.orgMemberships]
+  )
+
+  const activeMembership = useMemo(() => {
+    if (!orgMemberships.length) return null
+    return (
+      orgMemberships.find((m) => m.orgId === activeOrgId) ||
+      orgMemberships.find((m) => m.org?.orgType === 'personal') ||
+      orgMemberships[0] ||
+      null
+    )
+  }, [orgMemberships, activeOrgId])
+
+  const activeOrg = activeMembership?.org
+  const resolvedOrgId = activeMembership?.orgId || activeOrgId
+  const isPersonalOrg =
+    activeOrg?.orgType === 'personal' ||
+    (!!activeOrg?.slug && !!user?.name && activeOrg.slug === user.name)
+
+  useEffect(() => {
+    if (!user?.id || isLoadingOrgs) return
+    if (isPersonalOrg) {
+      router.replace('/')
+    }
+  }, [isLoadingOrgs, isPersonalOrg, router, user?.id, user?.name])
+
+  return (
+    <SideNavLayout useMainContentAreaId={false}>
+      <div className="mt-3 w-100">
+        <h1 className="mb-4">Groups</h1>
+        {activeOrg?.orgType === 'business' && resolvedOrgId && (
+          <OrgGroupsTable orgId={resolvedOrgId} />
+        )}
+      </div>
+    </SideNavLayout>
+  )
+}
+
+Groups.getInitialProps = async () => ({
+  pageTitle: 'Groups',
+})
+
+export default WithAuth(Groups)

package/src/pages/healthcheck.tsx

@@ -0,0 +1,7 @@
+import type { NextPage } from 'next'
+
+const Healthcheck: NextPage = () => {
+  return <h1>Alive</h1>
+}
+
+export default Healthcheck