@spacemade/ui 0.0.1

package/src/components/groups/table/OrgGroupsTable.tsx

@@ -0,0 +1,470 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useDisclosure } from '@chakra-ui/react'
+
+import type { OrgGroup, OrgMembership, User } from '@store/model'
+import {
+  useCreateOrgGroupMutation,
+  useListOrgGroupsQuery,
+} from '@store/slice/api/orgGroupApiSlice'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+import AddGroupModal from '@components/groups/modal/AddGroupModal'
+import {
+  GroupInitialAvatar,
+  MEMBER_PILL_COLOR_CLASSES,
+} from '@components/groups/block/GroupInitialAvatar'
+import { createAgentSlug } from '@helpers/slugUtils'
+import { getUserNameFromUser } from '@helpers/string'
+import { useSearchAndFilterCommon } from '@hooks'
+
+const MEMBER_PILL_DEPTH_CLASSES = [
+  'group-member-pill-depth-0',
+  'group-member-pill-depth-1',
+  'group-member-pill-depth-2',
+  'group-member-pill-depth-3',
+  'group-member-pill-depth-4',
+]
+const normalizeText = (value: string) => value.trim().toLowerCase()
+
+const formatTimestamp = (value: string) => {
+  return new Date(value).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const getInitials = (user: User) => {
+  const first = user.firstName?.trim()
+  const last = user.lastName?.trim()
+  if (first || last) {
+    return [first?.charAt(0), last?.charAt(0)].filter(Boolean).join('').toUpperCase()
+  }
+
+  const name = user.name?.trim()
+  if (name) {
+    const parts = name.split(/\s+/).filter(Boolean)
+    return parts.slice(0, 2).map((part) => part[0]).join('').toUpperCase()
+  }
+
+  const email = user.email?.trim()
+  if (email) return email.charAt(0).toUpperCase()
+
+  return user.id.slice(0, 2).toUpperCase()
+}
+
+type GroupMember = OrgMembership & { user: User }
+
+const getGroupMembers = (group: OrgGroup): GroupMember[] =>
+  (group.memberships ?? []).filter(
+    (membership): membership is GroupMember =>
+      !!membership?.user && membership.inviteAccepted && membership.status === 'active'
+  )
+
+const getGroupMemberName = (membership: GroupMember) =>
+  getUserNameFromUser(membership.user) || membership.user.name || membership.user.email || membership.user.id
+
+const getMemberPillColorClass = (membership: GroupMember) => {
+  const seed = getGroupMemberName(membership)
+  const hash = Array.from(seed).reduce((total, char) => total + char.charCodeAt(0), 0)
+  return MEMBER_PILL_COLOR_CLASSES[hash % MEMBER_PILL_COLOR_CLASSES.length]
+}
+
+const getGroupSearchText = (group: OrgGroup) => {
+  const members = getGroupMembers(group)
+  const memberNames = members.map(getGroupMemberName).join(' ')
+  return normalizeText([group.name, group.description?.trim(), memberNames, String(members.length)].filter(Boolean).join(' '))
+}
+
+const GroupMemberStack = ({ group }: { group: OrgGroup }) => {
+  const members = getGroupMembers(group)
+  const visibleMembers = members.slice(0, 5)
+  const overflowCount = members.length - visibleMembers.length
+
+  if (!members.length) return null
+
+  return (
+    <div className="group-member-stack" aria-label={`${members.length} group members`}>
+      {visibleMembers.map((membership, index) => {
+        const displayName = getGroupMemberName(membership)
+        return (
+          <span
+            key={membership.id}
+            className={`group-member-pill ${getMemberPillColorClass(membership)} ${MEMBER_PILL_DEPTH_CLASSES[index]}`}
+            title={displayName}
+          >
+            {getInitials(membership.user)}
+          </span>
+        )
+      })}
+      {overflowCount > 0 && (
+        <span
+          className="group-member-pill group-member-pill-overflow"
+          title={`${overflowCount} more members`}
+        >
+          +{overflowCount}
+        </span>
+      )}
+    </div>
+  )
+}
+
+const OrgGroupsTable = ({ orgId }: { orgId: string }) => {
+  const router = useRouter()
+  const { searchState, setSearchState } = useSearchAndFilterCommon()
+  const { data, isLoading, isFetching } = useListOrgGroupsQuery(
+    { orgId, limit: 500, page: 1 },
+    { skip: !orgId }
+  )
+  const [createGroup, { isLoading: isCreating }] = useCreateOrgGroupMutation()
+  const groupModal = useDisclosure()
+
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const groups = useMemo(() => data?.results ?? [], [data])
+  const isInitialLoading = isLoading && !data?.results
+
+  const filteredGroups = useMemo(() => {
+    const normalizedSearch = normalizeText(searchQuery)
+    return groups.filter((group) => {
+      if (!normalizedSearch) return true
+      return getGroupSearchText(group).includes(normalizedSearch)
+    })
+  }, [groups, searchQuery])
+
+  const pageSize = searchState.limit || 10
+  const totalPages = Math.max(1, Math.ceil(filteredGroups.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 visibleGroups = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredGroups.slice(start, start + pageSize)
+  }, [filteredGroups, page, pageSize])
+
+  const openCreate = () => {
+    groupModal.onOpen()
+  }
+
+  const openGroup = (group: OrgGroup) => {
+    router.push(`/groups/${group.id}/${encodeURIComponent(createAgentSlug(group.name))}`)
+  }
+
+  const onSubmitGroup = async (name: string, description: string | null) => {
+    await createGroup({ orgId, name: name.trim(), description }).unwrap()
+  }
+
+  return (
+    <div className="groups-fullscreen-table">
+      <div className="groups-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">Group Directory</h2>
+            <span className="small text-muted">{filteredGroups.length.toLocaleString('en-US')} groups</span>
+          </div>
+          <button
+            type="button"
+            onClick={openCreate}
+            className="btn btn-primary btn-sm rounded-pill fw-bold px-3"
+            disabled={isCreating}
+          >
+            + Add Group
+          </button>
+        </div>
+
+        <div className="groups-toolbar-controls">
+          <input
+            type="search"
+            className="form-control"
+            placeholder="Search by group name, member, description, or count"
+            value={searchQuery}
+            onChange={(event) => {
+              const nextValue = event.target.value
+              setSearchQuery(nextValue)
+              setSearchState((prev) => ({
+                ...prev,
+                page: 1,
+              }))
+            }}
+            aria-label="Search groups"
+          />
+
+          <button
+            type="button"
+            className="btn btn-light"
+            onClick={() => {
+              setSearchQuery('')
+              setSearchState((prev) => ({
+                ...prev,
+                page: 1,
+              }))
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <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">
+            <thead>
+              <tr>
+                <th className="groups-col-name">Group Name</th>
+                <th className="groups-col-created">Created</th>
+                <th className="groups-col-members">Members</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visibleGroups.map((group) => {
+                return (
+                  <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>
+                    <td className="text-muted">{formatTimestamp(group.createdAt)}</td>
+                    <td>
+                      <div className="d-flex align-items-center">
+                        <GroupMemberStack group={group} />
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {isInitialLoading && (
+          <div className="d-flex justify-content-center py-4">
+            <Spinner size="sm" />
+          </div>
+        )}
+
+        {!isInitialLoading && !isFetching && visibleGroups.length === 0 && (
+          <div className="d-flex flex-column align-items-center justify-content-center text-center py-4">
+            <div className="groups-empty-icon bg-light rounded-circle d-flex align-items-center justify-content-center mb-3">
+              <i className="bi bi-diagram-3 text-dark" />
+            </div>
+            <h5 className="mb-2">Groups</h5>
+            <p className="groups-empty-copy text-muted mb-0">
+              {searchQuery
+                ? 'No groups match the current filters.'
+                : 'No groups to show yet. Create one and it will appear here.'}
+            </p>
+          </div>
+        )}
+      </div>
+
+      <TablePaging totalCount={filteredGroups.length} setSearchState={setSearchState} />
+
+      <AddGroupModal
+        isOpen={groupModal.isOpen}
+        onClose={() => {
+          groupModal.onClose()
+        }}
+        onAddGroup={onSubmitGroup}
+        isLoading={isCreating}
+      />
+
+      <style jsx>{`
+        .groups-fullscreen-table {
+          width: 100%;
+          display: grid;
+          gap: 0.85rem;
+        }
+
+        .groups-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;
+        }
+
+        .groups-toolbar-controls {
+          display: grid;
+          gap: 0.65rem;
+          grid-template-columns: minmax(260px, 1fr) auto;
+        }
+
+        .groups-table-shell {
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .groups-table-scroll {
+          max-height: calc(100vh - 350px);
+          min-height: 260px;
+          overflow: auto;
+        }
+
+        :global(.groups-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(.groups-table-modern tbody tr:hover) {
+          background: #f7fafe;
+        }
+
+        :global(.groups-table-modern tbody td) {
+          border-color: #edf1f6;
+        }
+
+        :global(.min-width-0) {
+          min-width: 0;
+        }
+
+        .groups-col-name {
+          min-width: 320px;
+        }
+
+        .groups-col-created {
+          min-width: 180px;
+        }
+
+        .groups-col-members {
+          min-width: 220px;
+        }
+
+        .groups-empty-icon {
+          width: 48px;
+          height: 48px;
+        }
+
+        .groups-empty-copy {
+          max-width: 420px;
+        }
+
+        :global(.group-member-stack) {
+          display: flex;
+          align-items: center;
+          padding-left: 0;
+          min-height: 34px;
+        }
+
+        :global(.group-member-pill) {
+          width: 34px;
+          height: 34px;
+          border-radius: 999px;
+          border: 0;
+          color: #fff;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 0.82rem;
+          font-weight: 700;
+          margin-left: -2px;
+          box-shadow: none;
+        }
+
+        :global(.group-member-pill:first-child) {
+          margin-left: 0;
+        }
+
+        :global(.group-member-pill-color-orange) {
+          background: #e7a05a;
+        }
+
+        :global(.group-member-pill-color-green) {
+          background: #287b3c;
+        }
+
+        :global(.group-member-pill-color-peach) {
+          background: #efbd9a;
+        }
+
+        :global(.group-member-pill-color-burnt) {
+          background: #cc6330;
+        }
+
+        :global(.group-member-pill-color-gold) {
+          background: #e4a813;
+        }
+
+        :global(.group-member-pill-color-magenta) {
+          background: #c70055;
+        }
+
+        :global(.group-member-pill-color-blue) {
+          background: #1c29c9;
+        }
+
+        :global(.group-member-pill-color-mint) {
+          background: #c8ddb6;
+          color: #fff;
+        }
+
+        :global(.group-member-pill-overflow) {
+          background: #55518d;
+        }
+
+        :global(.group-member-pill-depth-0) {
+          z-index: 5;
+        }
+
+        :global(.group-member-pill-depth-1) {
+          z-index: 4;
+        }
+
+        :global(.group-member-pill-depth-2) {
+          z-index: 3;
+        }
+
+        :global(.group-member-pill-depth-3) {
+          z-index: 2;
+        }
+
+        :global(.group-member-pill-depth-4) {
+          z-index: 1;
+        }
+
+        :global(.group-member-pill-overflow) {
+          z-index: 0;
+        }
+
+        @media (max-width: 920px) {
+          .groups-toolbar-controls {
+            grid-template-columns: 1fr;
+          }
+
+          .groups-table-scroll {
+            max-height: none;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default OrgGroupsTable

package/src/components/head/DefaultMetadata.tsx

@@ -0,0 +1,135 @@
+import { useRouter } from '@lib/next-router'
+import { DefaultSeo, LogoJsonLd, SiteLinksSearchBoxJsonLd } from 'next-seo'
+
+const DEFAULT_TITLE =
+	'Osirus AI'
+const DEFAULT_DESCRIPTION = `Osirus AI is the easiest way to AI. Powered by AWS using Amazon Bedrock, OpenAI, and Huggingface, Osirus AI allows you to scale your AI with ease. Looking for the answers? Ask: Osirus AI.`
+
+const DEFAULT_BASE_URL = () => {
+	const configuredBaseUrl = process.env.NEXT_PUBLIC_SITE_URL || process.env.SITE_URL
+	if (configuredBaseUrl) return configuredBaseUrl.replace(/\/$/, '')
+	if (typeof window !== 'undefined') return window.location.origin
+	return 'http://localhost:3000'
+}
+
+const DefaultMetadata = () => {
+	const router = useRouter()
+	const defaultBaseUrl = DEFAULT_BASE_URL()
+	const furlImageUrl = `${defaultBaseUrl}/images/content/Osirus-Hero-Homepage.png`
+
+	const color = '#ffffff'
+	const companyName = 'Osirus AI'
+	const logo = defaultBaseUrl + '/images/logo/Osirus-Logo-Horizontal.svg'
+	const keywords = ['Osirus AI', 'CMS', 'News', 'Posts']
+
+	return (
+		<>
+			<DefaultSeo
+				defaultTitle={DEFAULT_TITLE}
+				description={DEFAULT_DESCRIPTION}
+				canonical={defaultBaseUrl + router.asPath}
+				openGraph={{
+					title: DEFAULT_TITLE,
+					description: DEFAULT_DESCRIPTION,
+					url: defaultBaseUrl + router.asPath,
+					type: 'website',
+					locale: 'en_US',
+					siteName: 'Osirus AI',
+					images: [
+						{
+							url: furlImageUrl,
+							alt: 'Social Media Image',
+						},
+					],
+				}}
+				twitter={{
+					cardType: 'summary_large_image',
+				}}
+				additionalLinkTags={[
+					{
+						rel: 'shortcut icon',
+						href: `${defaultBaseUrl}/favicon.ico`,
+						type: 'image/x-icon',
+					},
+					{
+						rel: 'icon',
+						type: 'image/png',
+						sizes: '16x16',
+						href: `${defaultBaseUrl}/favicon-16x16.png`,
+					},
+					{
+						rel: 'icon',
+						type: 'image/png',
+						sizes: '32x32',
+						href: `${defaultBaseUrl}/favicon-32x32.png`,
+					},
+					{
+						rel: 'apple-touch-icon',
+						type: 'image/png',
+						sizes: '180x180',
+						href: `${defaultBaseUrl}/apple-touch-icon.png`,
+					},
+					{
+						rel: 'manifest',
+						href: `${defaultBaseUrl}/site.webmanifest`,
+					},
+					{
+						rel: 'alternate',
+						type: 'application/rss+xml',
+						title: 'Osirus AI | RSS Feed',
+						href: `${defaultBaseUrl}/feed`,
+					} as any,
+				]}
+				additionalMetaTags={[
+					{
+						httpEquiv: 'x-ua-compatible',
+						content: 'IE=edge',
+					},
+					{
+						name: 'viewport',
+						content: 'width=device-width, initial-scale=1.0',
+					},
+					{
+						name: 'msapplication-TileColor',
+						content: color,
+					},
+					{
+						name: 'theme-color',
+						content: color,
+					},
+					{
+						name: 'keywords',
+						content: keywords.join(', '),
+					},
+					{
+						name: 'author',
+						content: companyName,
+					},
+					{
+						name: 'https',
+						content: '1',
+					},
+				]}
+			/>
+
+			<SiteLinksSearchBoxJsonLd
+				url={defaultBaseUrl || 'https://osirus.ai'}
+				name='Osirus AI'
+				potentialActions={[
+					{
+						target: defaultBaseUrl + '/blog?nameLike',
+						queryInput: 'search_term_string',
+					},
+				]}
+			/>
+
+			<LogoJsonLd
+				logo={logo}
+				url={defaultBaseUrl || 'https://osirus.ai'}
+				name='Osirus AI'
+			/>
+		</>
+	)
+}
+
+export default DefaultMetadata