@spacemade/ui 0.0.1

package/src/components/docs/table/DocsPagesTable.tsx

@@ -0,0 +1,163 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { toast } from 'react-toastify'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+import { FullDateFormat } from '@helpers/date'
+import { useSearchAndFilterCommon } from '@hooks'
+import { Page } from '@store/model'
+import {
+	useDeletePageMutation,
+	useGetPagesQuery,
+} from '@store/slice/api/pageApiSlice'
+import { useRouter } from '@lib/next-router'
+
+const getDocsSitePagePath = (siteId: string, siteName: string, pageId: string) =>
+	`/docs/sites/${encodeURIComponent(siteId)}/${encodeURIComponent(siteName)}/pages/${encodeURIComponent(pageId)}`
+
+export const DocsPagesTable = ({
+	siteId,
+	siteName,
+}: {
+	siteId: string
+	siteName: string
+}) => {
+	const {
+		query: { limit, page: queryPage },
+	} = useRouter()
+	const { getLimitFromQuery, calculateProperPageNumber } = useSearchAndFilterCommon()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const [activePage, setActivePage] = useState<Page | null>(null)
+	const [deletePage, { isLoading: isDeleting }] = useDeletePageMutation()
+
+	const { data, isFetching, isLoading } = useGetPagesQuery(
+		{
+			siteId,
+			limit: getLimitFromQuery(limit),
+			page: calculateProperPageNumber(queryPage),
+		},
+		{ skip: !siteId }
+	)
+
+	const openDeleteDialog = (pageRecord: Page) => {
+		setActivePage(pageRecord)
+		onOpenDialog()
+	}
+
+	const removePage = async () => {
+		if (!activePage) {
+			return
+		}
+
+		await deletePage({ id: activePage.id, siteId }).unwrap()
+		toast.success('Page deleted')
+	}
+
+	return (
+		<>
+			<div>
+				<table className='table'>
+					<thead>
+						<tr>
+							<th scope='col' className='w-lg-90-down'>
+								Name
+							</th>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								Slug
+							</th>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								Status
+							</th>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								Updated
+							</th>
+							<th scope='col' className='w-xs-100p opacity-0'>
+								Actions
+							</th>
+						</tr>
+					</thead>
+
+					<tbody>
+						{data &&
+							!isFetching &&
+							data.results.map((pageRecord) => {
+								const editPath = getDocsSitePagePath(siteId, siteName, pageRecord.id)
+
+								return (
+									<tr key={pageRecord.id}>
+										<td className='align-middle'>
+											<Link href={editPath} className='fw-semibold'>
+												{pageRecord.name}
+											</Link>
+										</td>
+
+										<td className='d-none d-lg-table-cell align-middle'>
+											{pageRecord.slug}
+										</td>
+
+										<td className='d-none d-lg-table-cell align-middle'>
+											{pageRecord.status}
+										</td>
+
+										<td className='d-none d-lg-table-cell align-middle'>
+											{pageRecord.updatedAt ? FullDateFormat(pageRecord.updatedAt) : '-'}
+										</td>
+
+										<td className='text-end align-middle'>
+											<div className='d-inline-flex gap-2'>
+												<Link href={editPath} className='btn btn-sm btn-outline-secondary'>
+													Edit
+												</Link>
+												<Button
+													className='no-min-size w-xs-50p h-100 bg-hover-background'
+													onClick={() => openDeleteDialog(pageRecord)}
+													disabled={isDeleting}
+												>
+													<span className='bi bi-trash'></span>
+												</Button>
+											</div>
+										</td>
+									</tr>
+								)
+							})}
+					</tbody>
+				</table>
+
+				{isFetching && (
+					<div className='w-100 d-flex justify-content-center py-4'>
+						<Spinner color='primary' />
+					</div>
+				)}
+
+				{!isLoading && !isFetching && isEmpty(data?.results) && (
+					<div className='d-flex flex-column align-items-center justify-content-center text-center py-4'>
+						<p>{`This docs site does not have any pages yet`}</p>
+					</div>
+				)}
+
+				{!isEmpty(data?.results) && data?.count !== undefined && (
+					<TablePaging totalCount={data.count} />
+				)}
+			</div>
+
+			{activePage && (
+				<DeleteDialog
+					isOpen={isDialogOpen}
+					onClose={onCloseDialog}
+					entityDescription={activePage.name}
+					onDelete={removePage}
+				/>
+			)}
+		</>
+	)
+}

package/src/components/docs/table/DocsSitesTable.tsx

@@ -0,0 +1,109 @@
+import Link from 'next/link'
+import { useMemo } from 'react'
+import isEmpty from 'lodash/isEmpty'
+import { toast } from 'react-toastify'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+import { useSearchAndFilterCommon } from '@hooks'
+import { useRouter } from '@lib/next-router'
+import { Site } from '@store/model'
+import { useDeleteSiteMutation, useGetSitesQuery } from '@store/slice/api/siteApiSlice'
+
+const getDocsSiteBasePath = (siteId: string, siteName: string) =>
+	`/docs/sites/${encodeURIComponent(siteId)}/${encodeURIComponent(siteName)}`
+const getDocsSitePreviewPath = (siteId: string, siteName: string) =>
+	`${getDocsSiteBasePath(siteId, siteName)}/preview`
+
+export const DocsSitesTable = () => {
+	const {
+		query: { limit, page, nameLike },
+	} = useRouter()
+	const { getLimitFromQuery, calculateProperPageNumber } = useSearchAndFilterCommon()
+
+	const { data, isLoading, isFetching } = useGetSitesQuery({
+		nameLike: nameLike?.toString(),
+		limit: getLimitFromQuery(limit),
+		page: calculateProperPageNumber(page),
+	})
+	const [deleteSite, { isLoading: isDeleting }] = useDeleteSiteMutation()
+	const sites = useMemo(() => data?.results || [], [data?.results])
+
+	const handleDelete = async (site: Site) => {
+		if (!window.confirm(`Delete docs site "${site.name}"?`)) {
+			return
+		}
+
+		try {
+			await deleteSite({ site }).unwrap()
+			toast.success('Docs site deleted')
+		} catch (error: any) {
+			toast.error(error?.data?.message || 'Failed to delete docs site')
+		}
+	}
+
+	return (
+		<div>
+			{isLoading || isFetching ? (
+				<div className='py-5 d-flex justify-content-center'>
+					<Spinner color='primary' />
+				</div>
+			) : (
+				<div className='row g-4'>
+					{sites.map((site) => (
+						<div className='col-md-6 col-xl-4' key={site.id}>
+							<div className='border rounded-4 p-4 h-100 bg-white'>
+								<div className='d-flex justify-content-between align-items-start gap-3'>
+									<div>
+										<div className='small text-muted mb-1'>Docs Site</div>
+										<h3 className='h5 mb-1'>{site.name}</h3>
+										<div className='small text-muted'>
+											Updated {new Date(site.updatedAt).toLocaleString()}
+										</div>
+									</div>
+									<span className='bi bi-journal-richtext fs-3 text-primary' />
+								</div>
+
+								<div className='d-flex gap-2 mt-4'>
+									<Link
+										href={getDocsSiteBasePath(site.id, site.name)}
+										className='btn btn-primary text-white'
+									>
+										Open
+									</Link>
+									<Link
+										href={getDocsSitePreviewPath(site.id, site.name)}
+										className='btn btn-outline-secondary'
+									>
+										Preview
+									</Link>
+									<Button
+										className='border-light-gray'
+										onClick={() => handleDelete(site)}
+										disabled={isDeleting}
+									>
+										<span className='bi bi-trash' />
+									</Button>
+								</div>
+							</div>
+						</div>
+					))}
+
+					{sites.length === 0 ? (
+						<div className='col-12'>
+							<div className='border rounded-4 p-5 text-center bg-white text-muted'>
+								{nameLike
+									? 'There are no docs sites to show that match your search'
+									: 'No docs sites yet.'}
+							</div>
+						</div>
+					) : null}
+				</div>
+			)}
+
+			{!isEmpty(data?.results) && data?.count !== undefined && (
+				<TablePaging totalCount={data.count} />
+			)}
+		</div>
+	)
+}

package/src/components/groups/block/GroupInitialAvatar.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+const GROUP_AVATAR_COLOR_CLASSES = [
+  'group-avatar-color-orange',
+  'group-avatar-color-green',
+  'group-avatar-color-peach',
+  'group-avatar-color-burnt',
+  'group-avatar-color-gold',
+  'group-avatar-color-magenta',
+  'group-avatar-color-blue',
+  'group-avatar-color-mint',
+] as const
+
+export const MEMBER_PILL_COLOR_CLASSES = [
+  'group-member-pill-color-orange',
+  'group-member-pill-color-green',
+  'group-member-pill-color-peach',
+  'group-member-pill-color-burnt',
+  'group-member-pill-color-gold',
+  'group-member-pill-color-magenta',
+  'group-member-pill-color-blue',
+  'group-member-pill-color-mint',
+] as const
+
+export const getAvatarColorClass = (seed: string) => {
+  const normalizedSeed = seed.trim()
+  const hash = Array.from(normalizedSeed).reduce((total, char) => total + char.charCodeAt(0), 0)
+  return GROUP_AVATAR_COLOR_CLASSES[hash % GROUP_AVATAR_COLOR_CLASSES.length]
+}
+
+const getGroupInitial = (name: string) => name.trim().charAt(0).toUpperCase()
+
+export const GroupInitialAvatar = ({
+  name,
+  size = 'sm',
+  className,
+}: {
+  name: string
+  size?: 'sm' | 'lg'
+  className?: string
+}) => (
+  <span
+    className={[
+      'group-initial-avatar',
+      `group-initial-avatar--${size}`,
+      getAvatarColorClass(name),
+      className,
+    ].filter(Boolean).join(' ')}
+    aria-hidden="true"
+  >
+    {getGroupInitial(name)}
+  </span>
+)

package/src/components/groups/grid/OrgGroupMembersGrid.tsx

@@ -0,0 +1,253 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { getUserNameFromUser } from '@helpers/string'
+import type { OrgMembership } from '@store/model'
+import { getAvatarColorClass } from '@components/groups/block/GroupInitialAvatar'
+
+const PAGE_SIZE_OPTIONS = [10, 15, 25, 50]
+
+const normalizeText = (value: string) => value.trim().toLowerCase()
+
+const memberDisplayName = (membership: OrgMembership): string => {
+  const user = membership.user
+  if (user) {
+    const name = getUserNameFromUser(user)
+    if (name) return name
+    if (user.name) return user.name
+    if (user.email) return user.email
+    if (user.id) return user.id
+  }
+  return membership.userId
+}
+
+const memberInitials = (membership: OrgMembership) =>
+  memberDisplayName(membership)
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('')
+
+const OrgGroupMembersGrid = ({
+  members,
+  isRemovingMember,
+  onRemoveMember,
+}: {
+  members: OrgMembership[]
+  isRemovingMember?: boolean
+  onRemoveMember: (membershipId: string) => void
+}) => {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(15)
+  const filteredMembers = useMemo(() => {
+    const normalizedSearch = normalizeText(searchQuery)
+    if (!normalizedSearch) return members
+
+    return members.filter((membership) => {
+      const user = membership.user
+      const displayName = memberDisplayName(membership)
+      const haystack = normalizeText(
+        [membership.id, membership.userId, displayName, user?.email, membership.status].filter(Boolean).join(' ')
+      )
+      return haystack.includes(normalizedSearch)
+    })
+  }, [members, searchQuery])
+  const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize))
+  const visibleMembers = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredMembers.slice(start, start + pageSize)
+  }, [filteredMembers, page, pageSize])
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+
+  return (
+    <section className="group-detail-section group-detail-users-section">
+      <div className="group-detail-users-grid">
+        <div className="group-detail-users-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">Users in group</h2>
+              <span className="small text-muted">
+                {filteredMembers.length.toLocaleString('en-US')} users
+              </span>
+            </div>
+          </div>
+
+          <div className="group-detail-users-toolbar-controls">
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search by user, email, status, or id"
+              value={searchQuery}
+              onChange={(event) => {
+                setSearchQuery(event.target.value)
+                setPage(1)
+              }}
+              aria-label="Search users in group"
+            />
+
+            <button
+              type="button"
+              className="btn btn-light"
+              onClick={() => {
+                setSearchQuery('')
+                setPage(1)
+              }}
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        <div className="group-detail-users-table-shell">
+          <div className="table-responsive group-detail-users-table-scroll custom-scroll-bar">
+            <table className="table align-middle mb-0 group-detail-users-table">
+              <colgroup>
+                <col className="group-detail-users-col-user" />
+                <col className="group-detail-users-col-status" />
+                <col className="group-detail-users-col-action" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th scope="col" className="group-member-user-cell">User</th>
+                  <th
+                    scope="col"
+                    className="group-member-status-cell"
+                  >
+                    Status
+                  </th>
+                  <th
+                    scope="col"
+                    className="group-member-action-cell"
+                  >
+                    Action
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {visibleMembers.map((membership) => {
+                  const displayName = memberDisplayName(membership)
+                  const status = membership.status
+
+                  return (
+                    <tr key={membership.id}>
+                      <td className="align-middle group-member-user-cell">
+                        <div className="group-member-cell">
+                          <span
+                            className={`group-member-avatar ${getAvatarColorClass(displayName)}`}
+                            aria-hidden="true"
+                          >
+                            {memberInitials(membership)}
+                          </span>
+                          <span className="group-member-name">{displayName}</span>
+                        </div>
+                      </td>
+                      <td className="align-middle group-member-status-cell">
+                        <span className="badge rounded-pill bg-light text-dark border px-3">
+                          {status}
+                        </span>
+                      </td>
+                      <td className="align-middle group-member-action-cell">
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-outline-danger rounded-pill group-member-remove-button"
+                          aria-label={`Remove ${displayName} from group`}
+                          title="Remove"
+                          disabled={isRemovingMember}
+                          onClick={() => onRemoveMember(membership.id)}
+                        >
+                          <i className="bi bi-trash" aria-hidden="true" />
+                        </button>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {visibleMembers.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 group-detail-users-empty-icon">
+                <i className="bi bi-people text-dark" />
+              </div>
+              <h5 className="mb-2">Users</h5>
+              <p className="text-muted mb-0 group-detail-users-empty-copy">
+                {searchQuery ? 'No users match the current filters.' : 'No users in this group yet.'}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {filteredMembers.length > 0 && (
+          <div className="group-detail-users-paging">
+            <div className="d-flex align-items-center gap-2">
+              <span className="small text-muted">Rows</span>
+              <select
+                className="form-select form-select-sm"
+                value={pageSize}
+                onChange={(event) => {
+                  setPageSize(Number(event.target.value))
+                  setPage(1)
+                }}
+                style={{ width: 90 }}
+                aria-label="Rows per page"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>
+                    {size}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="d-flex align-items-center gap-2">
+              <span className="small text-muted">
+                Page {page} of {totalPages}
+              </span>
+              <button
+                type="button"
+                className="btn btn-sm btn-light"
+                onClick={() => setPage(1)}
+                disabled={page <= 1}
+              >
+                {'<<'}
+              </button>
+              <button
+                type="button"
+                className="btn btn-sm btn-light"
+                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                disabled={page <= 1}
+              >
+                {'<'}
+              </button>
+              <button
+                type="button"
+                className="btn btn-sm btn-light"
+                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                disabled={page >= totalPages}
+              >
+                {'>'}
+              </button>
+              <button
+                type="button"
+                className="btn btn-sm btn-light"
+                onClick={() => setPage(totalPages)}
+                disabled={page >= totalPages}
+              >
+                {'>>'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default OrgGroupMembersGrid