@spacemade/ui 0.0.1

package/src/components/common/forms/UserInvitePicker.tsx

@@ -0,0 +1,600 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { EMAIL_REGEX } from '@helpers/constants'
+import { colorCirclePNG } from '@helpers/images'
+import { getUserNameFromUser } from '@helpers/string'
+import { useListOrgGroupsQuery } from '@store/slice/api/orgGroupApiSlice'
+import { useLazySearchUsersQuery } from '@store/slice/api/userApiSlice'
+import type { OrgGroup, User } from '@store/model'
+
+export type UserInviteSelection = {
+  type: 'user' | 'email' | 'group'
+  user?: User
+  email?: string
+  group?: OrgGroup
+  role?: string
+}
+
+type RoleOption = {
+  value: string
+  label: string
+}
+
+type Props = {
+  inputId: string
+  label: string
+  value: UserInviteSelection[]
+  onChange: (next: UserInviteSelection[]) => void
+  placeholder?: string
+  helperText?: string
+  selectedTitle?: string
+  roleOptions?: RoleOption[]
+  defaultRole?: string
+  searchLimit?: number
+  compactList?: boolean
+  variant?: 'default' | 'inline'
+  orgId?: string
+  includeGroups?: boolean
+  allowEmailInvite?: boolean
+  excludeUserIds?: string[]
+}
+
+const normalizeSearchInput = (value: string) => String(value || '').trim()
+
+const normalizeHandleSearch = (value: string) => {
+  const normalized = normalizeSearchInput(value)
+  return normalized.startsWith('@') ? normalized.slice(1) : normalized
+}
+
+const getDisplayName = (selection: UserInviteSelection) => {
+  if (selection.type === 'user' && selection.user) {
+    return (
+      getUserNameFromUser(selection.user) ||
+      selection.user.name ||
+      selection.user.email ||
+      'user'
+    )
+  }
+  if (selection.type === 'group' && selection.group) {
+    return selection.group.name || 'group'
+  }
+  return selection.email || 'unknown'
+}
+
+const getSecondaryLabel = (selection: UserInviteSelection) => {
+  if (selection.type === 'user' && selection.user) {
+    const fullName = getUserNameFromUser(selection.user)
+    const primary = getDisplayName(selection)
+    if (fullName && fullName !== primary) return fullName
+    const email = String(selection.user.email || '').trim()
+    return email && email !== primary ? email : null
+  }
+  if (selection.type === 'group' && selection.group) {
+    return selection.group.description || 'Group from this organization'
+  }
+  return 'Invite by email'
+}
+
+const getAvatarUrl = (selection: UserInviteSelection) =>
+  selection.type === 'user'
+    ? selection.user?.profileMedia?.media?.sourceUrl || colorCirclePNG
+    : colorCirclePNG
+
+export default function UserInvitePicker({
+  inputId,
+  label,
+  value,
+  onChange,
+  placeholder = 'email@example.com',
+  helperText,
+  selectedTitle = 'Invites',
+  roleOptions,
+  defaultRole,
+  searchLimit = 6,
+  compactList = false,
+  variant = 'default',
+  orgId,
+  includeGroups = false,
+  allowEmailInvite = true,
+  excludeUserIds = [],
+}: Props) {
+  const [searchValue, setSearchValue] = useState('')
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const [searchUsers, { data: searchResults, isFetching }] = useLazySearchUsersQuery()
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const { data: orgGroupsData } = useListOrgGroupsQuery(
+    { orgId: orgId || '', limit: 200, page: 1 },
+    { skip: !includeGroups || !orgId }
+  )
+
+  const normalizedSearch = normalizeSearchInput(searchValue)
+  const normalizedLookup = normalizeHandleSearch(searchValue)
+
+  const results = useMemo(() => {
+    const raw = (searchResults as any)?.results as User[] | undefined
+    const list = raw || []
+    const selectedUserIds = new Set(
+      value
+        .filter((item) => item.type === 'user' && item.user?.id)
+        .map((item) => item.user?.id as string)
+    )
+    const excludedUserIds = new Set(excludeUserIds)
+
+    return list.filter((user) => !selectedUserIds.has(user.id) && !excludedUserIds.has(user.id))
+  }, [excludeUserIds, searchResults, value])
+  const groupResults = useMemo(() => {
+    if (!includeGroups) return []
+    const rawGroups = ((orgGroupsData as any)?.results || []) as OrgGroup[]
+    const selectedGroupIds = new Set(
+      value
+        .filter((item) => item.type === 'group' && item.group?.id)
+        .map((item) => item.group?.id as string)
+    )
+    const lookup = normalizedLookup.toLowerCase()
+    return rawGroups.filter((group) => {
+      if (!group?.id || selectedGroupIds.has(group.id)) return false
+      if (!lookup) return true
+      return (
+        String(group.name || '').toLowerCase().includes(lookup) ||
+        String(group.description || '').toLowerCase().includes(lookup)
+      )
+    })
+  }, [includeGroups, normalizedLookup, orgGroupsData, value])
+
+  const isEmail = useMemo(() => {
+    if (!normalizedSearch) return false
+    return EMAIL_REGEX.test(normalizedSearch.toLowerCase())
+  }, [normalizedSearch])
+
+  const showInviteByEmail = useMemo(() => {
+    if (!allowEmailInvite) return false
+    if (!isEmail) return false
+    const selectedEmails = new Set(
+      value
+        .map((item) => item.email)
+        .filter((email): email is string => !!email)
+        .map((email) => email.toLowerCase())
+    )
+    const hasExactUser = results.some(
+      (user) => (user.email || '').toLowerCase() === normalizedSearch.toLowerCase()
+    )
+    return !selectedEmails.has(normalizedSearch.toLowerCase()) && !hasExactUser
+  }, [allowEmailInvite, isEmail, normalizedSearch, results, value])
+
+  useEffect(() => {
+    if (!normalizedLookup || normalizedLookup.length < 1) {
+      setIsDropdownOpen(false)
+      return
+    }
+
+    const timeout = setTimeout(() => {
+      searchUsers({
+        nameLike: normalizedLookup,
+        limit: searchLimit,
+        ...(orgId ? { orgId } : {}),
+      })
+      setIsDropdownOpen(true)
+    }, 200)
+
+    return () => clearTimeout(timeout)
+  }, [normalizedLookup, orgId, searchLimit, searchUsers])
+
+  const updateSelections = (next: UserInviteSelection[]) => {
+    onChange(next)
+  }
+
+  const addEmailInvite = (email: string) => {
+    updateSelections([
+      ...value,
+      { type: 'email', email, ...(defaultRole ? { role: defaultRole } : {}) },
+    ])
+    setSearchValue('')
+    setIsDropdownOpen(false)
+  }
+
+  const addUserInvite = (user: User) => {
+    updateSelections([
+      ...value,
+      {
+        type: 'user',
+        user,
+        email: user.email ?? undefined,
+        ...(defaultRole ? { role: defaultRole } : {}),
+      },
+    ])
+    setSearchValue('')
+    setIsDropdownOpen(false)
+  }
+
+  const addGroupInvite = (group: OrgGroup) => {
+    updateSelections([
+      ...value,
+      {
+        type: 'group',
+        group,
+        ...(defaultRole ? { role: defaultRole } : {}),
+      },
+    ])
+    setSearchValue('')
+    setIsDropdownOpen(false)
+  }
+
+  const removeInvite = (invite: UserInviteSelection) => {
+    updateSelections(
+      value.filter((item) => {
+        if (invite.type === 'email' && item.type === 'email') {
+          return String(item.email || '').toLowerCase() !== String(invite.email || '').toLowerCase()
+        }
+        if (invite.type === 'user' && item.type === 'user') {
+          return item.user?.id !== invite.user?.id
+        }
+        if (invite.type === 'group' && item.type === 'group') {
+          return item.group?.id !== invite.group?.id
+        }
+        return true
+      })
+    )
+  }
+
+  const updateInviteRole = (invite: UserInviteSelection, role: string) => {
+    updateSelections(
+      value.map((item) => {
+        if (invite.type === 'email' && item.type === 'email') {
+          if (String(item.email || '').toLowerCase() !== String(invite.email || '').toLowerCase()) {
+            return item
+          }
+          return { ...item, role }
+        }
+        if (invite.type === 'user' && item.type === 'user') {
+          if (item.user?.id !== invite.user?.id) return item
+          return { ...item, role }
+        }
+        if (invite.type === 'group' && item.type === 'group') {
+          if (item.group?.id !== invite.group?.id) return item
+          return { ...item, role }
+        }
+        return item
+      })
+    )
+  }
+
+  const isInline = variant === 'inline'
+
+  return (
+    <div className={`${isInline ? 'mb-2' : 'mb-4'} position-relative`}>
+      <label
+        htmlFor={inputId}
+        className={`form-label fw-semibold${isInline ? ' visually-hidden' : ''}`}
+      >
+        {label}
+      </label>
+      {!isInline && helperText ? (
+        <p className="text-muted mb-2">{helperText}</p>
+      ) : null}
+      <div className="d-flex align-items-stretch gap-2">
+        <div
+          className="form-control d-flex flex-wrap align-items-center gap-2"
+          style={{ minHeight: '46px', cursor: 'text' }}
+          onClick={() => inputRef.current?.focus()}
+        >
+          {value.map((invite) => {
+            const isUser = invite.type === 'user'
+            const isGroup = invite.type === 'group'
+            const displayName = getDisplayName(invite)
+            const secondary = getSecondaryLabel(invite)
+            const avatarSrc = getAvatarUrl(invite)
+
+            return (
+              <div
+                key={
+                  isUser
+                    ? `user-${invite.user?.id}`
+                    : isGroup
+                      ? `group-${invite.group?.id}`
+                      : `email-${invite.email}`
+                }
+                className="d-inline-flex align-items-center gap-2 px-2 py-1"
+                style={{
+                  background: '#eef3ff',
+                  border: '1px solid #bcd3ff',
+                  borderRadius: '6px',
+                }}
+              >
+                {isUser ? (
+                  <OptimizedImage
+                    src={avatarSrc}
+                    alt={displayName}
+                    width={20}
+                    height={20}
+                    className="rounded-circle"
+                  />
+                ) : isGroup ? (
+                  <span
+                    className="d-flex align-items-center justify-content-center"
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: '4px',
+                      background: '#e7f6ec',
+                      color: '#1c7c43',
+                      fontSize: '12px',
+                    }}
+                  >
+                    <i className="bi bi-people" />
+                  </span>
+                ) : (
+                  <span
+                    className="d-flex align-items-center justify-content-center"
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: '4px',
+                      background: '#d6e4ff',
+                      color: '#2f5fd7',
+                      fontSize: '12px',
+                    }}
+                  >
+                    <i className="bi bi-envelope" />
+                  </span>
+                )}
+                <div className="d-flex flex-column" style={{ lineHeight: 1.1 }}>
+                  <span className="fw-semibold small text-truncate">{displayName}</span>
+                  {secondary ? (
+                    <span className="text-muted" style={{ fontSize: '11px' }}>
+                      {secondary}
+                    </span>
+                  ) : null}
+                </div>
+                <button
+                  type="button"
+                  className="btn btn-link p-0 text-muted"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    removeInvite(invite)
+                  }}
+                >
+                  <i className="bi bi-x" />
+                </button>
+              </div>
+            )
+          })}
+
+          <input
+            id={inputId}
+            ref={inputRef}
+            type="text"
+            className="border-0 flex-grow-1"
+            placeholder={placeholder}
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onFocus={() => setIsDropdownOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === 'Backspace' && !searchValue && value.length) {
+                removeInvite(value[value.length - 1])
+                return
+              }
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                if (allowEmailInvite && isEmail) {
+                  addEmailInvite(normalizedSearch.toLowerCase())
+                  return
+                }
+                if (results.length > 0) {
+                  addUserInvite(results[0])
+                  return
+                }
+                if (groupResults.length > 0) {
+                  addGroupInvite(groupResults[0])
+                }
+              }
+            }}
+            style={{ minWidth: '180px', outline: 'none' }}
+          />
+        </div>
+      </div>
+
+      {isDropdownOpen && (results.length > 0 || groupResults.length > 0 || showInviteByEmail || isFetching) ? (
+        <div
+          className="list-group position-absolute w-100 shadow-sm"
+          style={{ zIndex: 20, marginTop: '6px' }}
+        >
+          {results.map((user) => {
+            const avatarSrc = user?.profileMedia?.media?.sourceUrl || colorCirclePNG
+            const displayName =
+              getUserNameFromUser(user) || user.name || user.email || 'user'
+            const fullName = getUserNameFromUser(user)
+
+            return (
+              <button
+                key={user.id}
+                type="button"
+                className="list-group-item list-group-item-action d-flex align-items-center gap-2"
+                onClick={() => addUserInvite(user)}
+              >
+                <OptimizedImage
+                  src={avatarSrc}
+                  alt={displayName}
+                  width={24}
+                  height={24}
+                  className="rounded-circle"
+                />
+                <div className="d-flex flex-column text-start">
+                  <span className="fw-semibold small">{displayName}</span>
+                  {fullName && fullName !== displayName ? (
+                    <span className="text-muted" style={{ fontSize: '12px' }}>
+                      {fullName}
+                    </span>
+                  ) : null}
+                </div>
+              </button>
+            )
+          })}
+
+          {groupResults.map((group) => (
+            <button
+              key={group.id}
+              type="button"
+              className="list-group-item list-group-item-action d-flex align-items-center gap-2"
+              onClick={() => addGroupInvite(group)}
+            >
+              <span
+                className="d-flex align-items-center justify-content-center"
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: '6px',
+                  background: '#e7f6ec',
+                  color: '#1c7c43',
+                  fontSize: '12px',
+                }}
+              >
+                <i className="bi bi-people" />
+              </span>
+              <div className="d-flex flex-column text-start">
+                <span className="fw-semibold small">{group.name}</span>
+                <span className="text-muted" style={{ fontSize: '12px' }}>
+                  {group.description || 'Group from this organization'}
+                </span>
+              </div>
+            </button>
+          ))}
+
+          {showInviteByEmail ? (
+            <button
+              type="button"
+              className="list-group-item list-group-item-action d-flex align-items-center gap-2"
+              onClick={() => addEmailInvite(normalizedSearch.toLowerCase())}
+            >
+              <span
+                className="d-flex align-items-center justify-content-center"
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: '4px',
+                  background: '#d6e4ff',
+                  color: '#2f5fd7',
+                  fontSize: '12px',
+                }}
+              >
+                <i className="bi bi-envelope" />
+              </span>
+              <div className="d-flex flex-column text-start">
+                <span className="fw-semibold small">{normalizedSearch.toLowerCase()}</span>
+                <span className="text-muted" style={{ fontSize: '12px' }}>
+                  Invite by email
+                </span>
+              </div>
+            </button>
+          ) : null}
+
+          {isFetching ? (
+            <div className="list-group-item text-muted small">Searching...</div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {!isInline && value.length > 0 ? (
+        <div className="mt-4">
+          <h6 className="mb-3">{selectedTitle}</h6>
+          <div className="d-flex flex-column gap-2">
+            {value.map((invite) => {
+              const isUser = invite.type === 'user'
+              const isGroup = invite.type === 'group'
+              const displayName = getDisplayName(invite)
+              const secondary = getSecondaryLabel(invite)
+              const avatarSrc = getAvatarUrl(invite)
+
+              return (
+                <div
+                  key={
+                    isUser
+                      ? `list-user-${invite.user?.id}`
+                      : isGroup
+                        ? `list-group-${invite.group?.id}`
+                        : `list-email-${invite.email}`
+                  }
+                  className={`d-flex align-items-center justify-content-between border rounded px-3 ${
+                    compactList ? 'py-2' : 'py-3'
+                  }`}
+                >
+                  <div className="d-flex align-items-center gap-2">
+                    {isUser ? (
+                      <OptimizedImage
+                        src={avatarSrc}
+                        alt={displayName}
+                        width={28}
+                        height={28}
+                        className="rounded-circle"
+                      />
+                    ) : isGroup ? (
+                      <span
+                        className="d-flex align-items-center justify-content-center"
+                        style={{
+                          width: 28,
+                          height: 28,
+                          borderRadius: '6px',
+                          background: '#e7f6ec',
+                          color: '#1c7c43',
+                          fontSize: '12px',
+                        }}
+                      >
+                        <i className="bi bi-people" />
+                      </span>
+                    ) : (
+                      <span
+                        className="d-flex align-items-center justify-content-center"
+                        style={{
+                          width: 28,
+                          height: 28,
+                          borderRadius: '6px',
+                          background: '#d6e4ff',
+                          color: '#2f5fd7',
+                          fontSize: '12px',
+                        }}
+                      >
+                        <i className="bi bi-envelope" />
+                      </span>
+                    )}
+                    <div className="d-flex flex-column" style={{ lineHeight: 1.1 }}>
+                      <span className="fw-semibold small">{displayName}</span>
+                      {secondary ? (
+                        <span className="text-muted" style={{ fontSize: '12px' }}>
+                          {secondary}
+                        </span>
+                      ) : null}
+                    </div>
+                  </div>
+                  <div className="d-flex align-items-center gap-2">
+                    {roleOptions?.length ? (
+                      <select
+                        className="form-select form-select-sm"
+                        value={invite.role || defaultRole || roleOptions[0]?.value}
+                        onChange={(e) => updateInviteRole(invite, e.target.value)}
+                      >
+                        {roleOptions.map((role) => (
+                          <option key={role.value} value={role.value}>
+                            {role.label}
+                          </option>
+                        ))}
+                      </select>
+                    ) : null}
+                    <button
+                      type="button"
+                      className="btn btn-link p-0 text-muted"
+                      onClick={() => removeInvite(invite)}
+                    >
+                      <i className="bi bi-x" />
+                    </button>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/common/header/AppPageTitle.tsx

@@ -0,0 +1,34 @@
+import { UrlObject } from 'url'
+import Link from 'next/link'
+import { SiteLogoIcon } from '@helpers/images'
+
+const AppPageTitle = ({
+	title,
+	backUrl,
+	sizeAs = 'h2',
+	align = 'start',
+	showOnMobile = false,
+}: {
+	title: string
+	backUrl?: string | UrlObject
+	align?: 'center' | 'start' | 'end'
+	showOnMobile?: boolean
+	sizeAs?: 'h1' | 'h2'
+}) => (
+	<div
+		className={`page-title text-${align} ${
+			!showOnMobile ? 'd-none' : ''
+		} d-lg-block`}
+	>
+		{backUrl && (
+			<Link href={backUrl} className='me-4 text-dark text-start d-none d-lg-block'>
+				<span className='bi bi-arrow-left  me-2 mb-2'></span>
+				Back
+			</Link>
+		)}
+		<h1 className={`text-capitalize fw-bold mb-0 ${sizeAs}`}>{title}</h1>
+		<hr className='text-light-gray opacity-100 my-4'/>
+	</div>
+)
+
+export default AppPageTitle

package/src/components/common/header/SubtitleAccordion.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react'
+import {
+	Accordion,
+	AccordionButton,
+	AccordionIcon,
+	AccordionItem,
+	AccordionPanel,
+} from '@chakra-ui/react'
+
+const SubtitleAccordion = ({
+	children,
+	title,
+	isCard,
+	titleClassName,
+	includeSeparatorInCard = true,
+}: {
+	children: ReactNode
+	title: string
+	isCard?: boolean | undefined
+	titleClassName?: string
+	includeSeparatorInCard?: boolean
+}) =>
+	isCard ? (
+		<div className='mt-3'>
+			<h2 className={`fw-bold fs-4 mb-0 ${titleClassName}`}>{title}</h2>
+			{includeSeparatorInCard && (
+				<hr className='mt-3 text-light-gray opacity-100' />
+			)}
+			{children}
+		</div>
+	) : (
+		<>
+			<Accordion
+				className='accordion-group border-0 d-block d-lg-none'
+				allowToggle
+			>
+				<AccordionItem className='w-100'>
+					<AccordionButton className='border-0 ps-0 d-flex justify-content-between'>
+						<h2 className={`fw-bold fs-4 text-dark mb-0 ${titleClassName}`}>
+							{title}
+						</h2>
+						<div>
+							<AccordionIcon className='fs-lg text-medium-gray fw-bold' />
+						</div>
+					</AccordionButton>
+					<hr className='d-lg-none mt-1 text-light-gray opacity-100' />
+					<AccordionPanel className='border-0 p-0 mb-4'>
+						{children}
+					</AccordionPanel>
+				</AccordionItem>
+			</Accordion>
+
+			<div className='d-none d-lg-block'>
+				<h2 className={`fw-bold mt-3 fs-4 ${titleClassName}`}>{title}</h2>
+				{includeSeparatorInCard && (
+					<hr className='mt-3 text-light-gray opacity-100' />
+				)}
+				{children}
+			</div>
+		</>
+	)
+
+export default SubtitleAccordion