@spacemade/ui 0.0.1

package/src/components/user/table/UserTable.tsx

@@ -0,0 +1,202 @@
+/* eslint-disable @next/next/no-img-element */
+import { SyntheticEvent, useMemo, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { User, UserSystemRoles } from '@store/model'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+import {
+	useDeleteUserForAdminMutation,
+	useGetUsersForAdminQuery,
+} from '@store/slice/api/userApiSlice'
+import { useSearchAndFilterCommon } from '@hooks'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Badge from '@components/common/badge/Badge'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import TableFilter from '@components/common/table/TableFilter'
+import TablePaging from '@components/common/table/TablePaging'
+import { BadgesBlock } from '@components/user/block/BadgesBlock'
+import { UpdateUserDetailsModal } from '@components/user/modal/UpdateUserDetailsModal'
+import { defaultAvatar } from '@helpers/images'
+import { getUserNameFromUser } from '@helpers/string'
+import { ApiEntityNames } from '@helpers/types'
+
+export const UserTable = () => {
+	const {
+		query: { limit, page, nameLike, orgId },
+	} = useRouter()
+	const { getLimitFromQuery, calculateProperPageNumber, updateURL } =
+		useSearchAndFilterCommon()
+	const { data: orgMemberships = [] } = useListOrgsQuery()
+
+	const [deleteUser] = useDeleteUserForAdminMutation()
+
+	const {
+		isOpen: isOpenUpdateModal,
+		onOpen: onOpenUpdateModal,
+		onClose: onCloseUpdateModal,
+	} = useDisclosure()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const { data, isFetching, isLoading } = useGetUsersForAdminQuery({
+		limit: getLimitFromQuery(limit),
+		page: calculateProperPageNumber(page),
+		nameLike: nameLike?.toString(),
+		orgId: orgId?.toString(),
+		include: [ApiEntityNames.address],
+	})
+
+	const orgOptions = useMemo(() => {
+		return [...orgMemberships]
+			.filter((membership) => !!membership.orgId && membership.org?.orgType !== 'personal')
+			.sort((a, b) => String(a.org?.name || '').localeCompare(String(b.org?.name || '')))
+	}, [orgMemberships])
+
+	const [activeUser, setActiveUser] = useState<User | null>(null)
+
+	const onRowClick = (event: SyntheticEvent, user: User) => {
+		const parent = (event.target as HTMLElement).closest('[data-type]')
+		const type = parent?.getAttribute('data-type')
+		setActiveUser(user)
+
+		if (type === 'action') {
+			onOpenDialog()
+			return
+		}
+
+		onOpenUpdateModal()
+	}
+
+	return (
+		<>
+			<div className='mb-3'>
+				<label htmlFor='user-org-filter' className='form-label small text-muted mb-1'>
+					Filter by org
+				</label>
+				<select
+					id='user-org-filter'
+					className='form-select form-select-sm'
+					value={orgId?.toString() || 'all'}
+					onChange={(event) => {
+						const value = event.target.value
+						updateURL('orgId', value === 'all' ? undefined : value)
+					}}
+				>
+					<option value='all'>All orgs</option>
+					{orgOptions.map((membership) => (
+						<option key={membership.orgId} value={membership.orgId}>
+							{membership.org?.name || membership.orgId}
+						</option>
+					))}
+				</select>
+			</div>
+
+			<TableFilter type='user' isStatusFilterHidden isCategoryFilterHidden />
+
+			<div className='mt-4'>
+				<table className='table'>
+					<thead>
+						<tr>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								<span className='opacity-0'>Image</span>
+							</th>
+							<th scope='col' className='w-lg-90-down'>
+								Name
+							</th>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								Email
+							</th>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								<span className='opacity-0'>Badges</span>
+							</th>
+							<th scope='col' className='opacity-0 w-xs-100p'>
+								Actions
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{data &&
+							!isFetching &&
+							data.results.map((user, key) => (
+								<tr
+									key={key}
+									className='pointer'
+									onClick={(e) => onRowClick(e, user)}
+								>
+									<td className='d-none d-lg-table-cell'>
+										<OptimizedImage
+											src={user.profileMedia?.media.sourceUrl || defaultAvatar}
+											alt={user.profileMedia?.media.details?.altText || ''}
+											width={40}
+											height={40}
+											className='object-fit-cover rounded-pill'
+										/>
+									</td>
+									<td className='align-middle'>{getUserNameFromUser(user)}</td>
+									<td className='d-none d-lg-table-cell align-middle'>
+										{user.email}
+									</td>
+									<td className='d-none d-lg-table-cell align-middle w-xs-350p'>
+										<BadgesBlock user={user} align='end' />
+									</td>
+									<td className='text-center align-middle'>
+										<Button
+											className='no-min-size w-xs-50p h-100 bg-hover-background'
+											data-type='action'
+										>
+											<span className='bi bi-trash'></span>
+										</Button>
+									</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'>
+						{nameLike ? (
+							<p>{`There are no users to show that match your search`}</p>
+						) : (
+							<p>{`You don't have any users yet`}</p>
+						)}
+					</div>
+				)}
+
+				{!isEmpty(data?.results) && data?.count !== undefined && (
+					<TablePaging totalCount={data.count} />
+				)}
+			</div>
+
+			{activeUser && (
+				<>
+					<UpdateUserDetailsModal
+						user={activeUser}
+						isOpen={isOpenUpdateModal}
+						onClose={onCloseUpdateModal}
+					/>
+					<DeleteDialog
+						isOpen={isDialogOpen}
+						onClose={onCloseDialog}
+						entityDescription={`${getUserNameFromUser(activeUser)}`}
+						onDelete={async () =>
+							await deleteUser({ user: activeUser }).unwrap()
+						}
+					/>
+				</>
+			)}
+		</>
+	)
+}

package/src/config/app.ts

@@ -0,0 +1,16 @@
+const normalizeBasePath = (value?: string) => {
+  const raw = String(value || '').trim()
+  if (!raw || raw === '/') return ''
+  return raw.startsWith('/') ? raw.replace(/\/+$/, '') : `/${raw.replace(/\/+$/, '')}`
+}
+
+export const appConfig = {
+  name: process.env.NEXT_PUBLIC_APP_NAME || 'Osirax',
+  tagline:
+    process.env.NEXT_PUBLIC_APP_TAGLINE ||
+    'Reusable SaaS foundation with optional product modules.',
+  description:
+    process.env.NEXT_PUBLIC_APP_DESCRIPTION ||
+    'Start with projects, providers, users, and billing. Turn advanced modules on only when a product needs them.',
+  basePath: normalizeBasePath(process.env.NEXT_PUBLIC_APP_BASE_PATH),
+}

package/src/config/modules.ts

@@ -0,0 +1,100 @@
+export type ModuleKey =
+  | 'activity'
+  | 'addresses'
+  | 'forms'
+  | 'invoices'
+  | 'media'
+  | 'marketplace'
+  | 'orgs'
+  | 'posts'
+  | 'pricing'
+  | 'products'
+  | 'projects'
+  | 'providers'
+  | 'purchases'
+  | 'settings'
+  | 'sites'
+  | 'subscriptions'
+  | 'tags'
+  | 'tickets'
+  | 'usage'
+  | 'users'
+  | 'admin'
+  | 'storage'
+  | 'blog'
+  | 'story'
+
+export type ModuleDef = {
+  key: ModuleKey
+  title: string
+  description: string
+  href: string
+  category: 'core' | 'optional' | 'content'
+}
+
+export const moduleDefs: ModuleDef[] = [
+  { key: 'activity', title: 'Activity', description: 'Audit logs, lifecycle events, and operator history.', href: '/activity', category: 'core' },
+  { key: 'addresses', title: 'Addresses', description: 'Reusable business and billing addresses.', href: '/addresses', category: 'core' },
+  { key: 'forms', title: 'Forms', description: 'Submission workflows and intake surfaces.', href: '/forms', category: 'core' },
+  { key: 'invoices', title: 'Invoices', description: 'Open, paid, and void billing records.', href: '/invoices', category: 'core' },
+  { key: 'marketplace', title: 'Marketplace', description: 'Browse available products, plans, and add-ons.', href: '/marketplace', category: 'core' },
+  { key: 'media', title: 'Media', description: 'Files, attachments, and asset lifecycle management.', href: '/media', category: 'core' },
+  { key: 'orgs', title: 'Organizations', description: 'Tenant boundaries, memberships, and ownership.', href: '/orgs', category: 'core' },
+  { key: 'posts', title: 'Posts', description: 'Structured content and publishing entries.', href: '/posts', category: 'core' },
+  { key: 'pricing', title: 'Pricing', description: 'Subscriptions, checkout, and billing operations surfaces.', href: '/pricing', category: 'core' },
+  { key: 'products', title: 'Products', description: 'Sellable products and billing catalog management.', href: '/products', category: 'core' },
+  { key: 'projects', title: 'Projects', description: 'Collaboration spaces, ownership, and app scoping.', href: '/projects', category: 'core' },
+  { key: 'providers', title: 'Providers', description: 'Connection records for external vendors and services.', href: '/providers', category: 'core' },
+  { key: 'purchases', title: 'Purchases', description: 'Orders and one-time transactions.', href: '/purchases', category: 'core' },
+  { key: 'settings', title: 'Settings', description: 'User, workspace, and operational configuration surfaces.', href: '/settings', category: 'core' },
+  { key: 'sites', title: 'Sites', description: 'Managed sites and primary domain routing.', href: '/sites', category: 'core' },
+  { key: 'subscriptions', title: 'Subscriptions', description: 'Recurring billing relationships and renewal state.', href: '/subscriptions', category: 'core' },
+  { key: 'tags', title: 'Tags', description: 'Cross-domain taxonomy for content, ops, and support.', href: '/tags', category: 'core' },
+  { key: 'tickets', title: 'Tickets', description: 'Support and operational request management.', href: '/tickets', category: 'core' },
+  { key: 'usage', title: 'Usage', description: 'Metered events and billable consumption summaries.', href: '/usage', category: 'core' },
+  { key: 'users', title: 'Users', description: 'Membership, invites, access control, and account management.', href: '/users', category: 'core' },
+  { key: 'admin', title: 'Admin', description: 'Operations, support, and system review workspace.', href: '/admin', category: 'core' },
+  { key: 'storage', title: 'Storage', description: 'Vector stores, files, or knowledge repositories.', href: '/storage', category: 'optional' },
+  { key: 'blog', title: 'Blog', description: 'Content and SEO pages for marketing-driven apps.', href: '/blog', category: 'content' },
+  { key: 'story', title: 'Story', description: 'Narrative or about pages for brand positioning.', href: '/story', category: 'content' },
+]
+
+export const defaultEnabledModules: ModuleKey[] = moduleDefs
+  .filter((module) => module.category === 'core')
+  .map((module) => module.key)
+
+const tokenize = (value?: string): string[] =>
+  String(value || '')
+    .split(',')
+    .map((item) => item.trim().toLowerCase())
+    .filter(Boolean)
+
+export const getEnabledModules = (): ModuleKey[] => {
+  const tokens = tokenize(process.env.NEXT_PUBLIC_ENABLED_MODULES)
+  if (!tokens.length || tokens.includes('all')) {
+    return defaultEnabledModules
+  }
+
+  const allowed = moduleDefs
+    .filter((item) => tokens.includes(item.key))
+    .map((item) => item.key)
+
+  return allowed.length ? allowed : defaultEnabledModules
+}
+
+export const enabledModules = getEnabledModules()
+
+export const isModuleEnabled = (key: ModuleKey): boolean =>
+  enabledModules.includes(key)
+
+export const enabledModuleDefs = moduleDefs.filter((item) =>
+  enabledModules.includes(item.key)
+)
+
+export const coreModuleDefs = enabledModuleDefs.filter(
+  (item) => item.category === 'core'
+)
+
+export const optionalModuleDefs = enabledModuleDefs.filter(
+  (item) => item.category === 'optional'
+)

package/src/config/navigation.ts

@@ -0,0 +1,28 @@
+export type StarterNavItem = {
+  href: string
+  label: string
+  description: string
+}
+
+export const starterNavItems: StarterNavItem[] = [
+  {
+    href: '/admin',
+    label: 'Overview',
+    description: 'System summary and starter status.',
+  },
+  {
+    href: '/projects',
+    label: 'Projects',
+    description: 'Delivery and operational workspaces.',
+  },
+  {
+    href: '/users',
+    label: 'Users',
+    description: 'Members, roles, and access.',
+  },
+  {
+    href: '/settings',
+    label: 'Settings',
+    description: 'Environment and billing controls.',
+  },
+]

package/src/config/runtime.ts

@@ -0,0 +1,3 @@
+export const publicRuntimeConfig = {
+  appEnvironment: process.env.NEXT_PUBLIC_APP_ENV,
+}

package/src/context/CheckoutContext.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useEffect, useMemo, useState } from 'react'
+import { useUserAuthContext } from './UserAuthContext'
+import { PaymentMethod } from '@store/model'
+import { useGetUserPaymentMethodQuery } from '@store/slice/api/userApiSlice'
+
+interface CheckoutContextInterface {
+  billing: {
+    name: string | null
+    address: {
+      city: string | null | undefined
+      country: string | null | undefined
+      line1: string | null | undefined
+      line2: string | null | undefined
+      postalCode: string | null | undefined
+      state: string | null | undefined
+    }
+  }
+  setBillingInfo: Dispatch<SetStateAction<CheckoutContextInterface['billing']>>
+  isBillingCompleted: boolean
+  paymentMethod: PaymentMethod | null | undefined
+  couponCode: string
+  setCouponCode: Dispatch<SetStateAction<string>>
+  appliedCoupon: {
+    code: string
+    subtotal: number
+    discountAmount: number
+    total: number
+    coupon?: any
+  } | null
+  setAppliedCoupon: Dispatch<SetStateAction<CheckoutContextInterface['appliedCoupon']>>
+}
+
+export const CheckoutContext = createContext<CheckoutContextInterface | undefined>(undefined)
+
+export const useCheckoutContext = () => {
+  const checkoutContext = useContext(CheckoutContext)
+  if (!checkoutContext) {
+    throw new Error('No CheckoutContext.Provider found when calling useCheckoutContext.')
+  }
+
+  return checkoutContext
+}
+
+export const CheckoutContextProvider = ({ children }: { children: ReactNode }) => {
+  const { user } = useUserAuthContext()
+  const { data: paymentMethod, isLoading } = useGetUserPaymentMethodQuery(
+    {
+      userId: user?.id || '',
+    },
+    {
+      skip: !user?.id,
+    }
+  )
+
+  const [billingInfo, setBillingInfo] = useState<CheckoutContextInterface['billing']>({
+    name: paymentMethod?.cardName || (user?.firstName || '') + ' ' + (user?.lastName || ''),
+    address: {
+      city: user?.address?.city,
+      country: user?.address?.country,
+      line1: user?.address?.streetAddress,
+      line2: user?.address?.streetAddress2,
+      postalCode: user?.address?.postalCode,
+      state: user?.address?.state,
+    },
+  })
+  const [couponCode, setCouponCode] = useState('')
+  const [appliedCoupon, setAppliedCoupon] = useState<CheckoutContextInterface['appliedCoupon']>(null)
+
+  useEffect(() => {
+    if (paymentMethod) {
+      setBillingInfo((state) => ({
+        ...state,
+        name: paymentMethod.cardName || (user?.firstName || '') + ' ' + (user?.lastName || ''),
+      }))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paymentMethod])
+
+  const isBillingCompleted = useMemo(() => {
+    const requiredBillingFields = {
+      line1: billingInfo.address.line1,
+      city: billingInfo.address.city,
+      state: billingInfo.address.state,
+      postalCode: billingInfo.address.postalCode,
+      country: billingInfo.address.country,
+    }
+
+    return !Object.values(requiredBillingFields).some(
+      (item) => item === null || item === undefined || item === ''
+    )
+  }, [
+    billingInfo.address.city,
+    billingInfo.address.country,
+    billingInfo.address.line1,
+    billingInfo.address.postalCode,
+    billingInfo.address.state,
+  ])
+
+  return (
+    <CheckoutContext.Provider
+      value={{
+        billing: billingInfo,
+        setBillingInfo,
+        isBillingCompleted,
+        paymentMethod,
+        couponCode,
+        setCouponCode,
+        appliedCoupon,
+        setAppliedCoupon,
+      }}
+    >
+      {isLoading ? (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <span className="spinner-border text-primary" role="status" aria-hidden="true" />
+        </div>
+      ) : (
+        children
+      )}
+    </CheckoutContext.Provider>
+  )
+}

package/src/context/ProjectContext.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+  useState,
+  useCallback,
+  PropsWithChildren,
+} from 'react'
+import {
+  useGetActiveProjectQuery,
+  useGetOneProjectQuery,
+  useSetActiveProjectMutation,
+} from '@store/slice/api/projectApiSlice'
+import type { Project } from '@store/model'   // ✅ USE REAL PROJECT MODEL
+
+// ---------- Types ----------
+type AnyChat = {
+  id: string
+  name: string
+  created?: string
+  createdAt?: string
+  updatedAt?: string
+  lastMessageAt?: string
+  projectId?: string | null
+}
+
+// ---------- Context Shape ----------
+type ProjectContextShape = {
+  projectId: string
+  project?: Project | null
+  isProjectLoading: boolean
+  isProjectFetching: boolean
+  isProjectError: boolean
+  refetchProject: () => void
+
+  // Chats “history”-style API
+  chats: AnyChat[]
+  isFetchingChats: boolean
+  hasNextChats: boolean
+  loadNextChats: () => void
+  chatsSearchTerm: string
+  setChatsSearchTerm: (s: string) => void
+}
+
+const ProjectContext = createContext<ProjectContextShape | undefined>(undefined)
+
+export const useProjectContext = () => {
+  const ctx = useContext(ProjectContext)
+  if (!ctx) {
+    throw new Error('useProjectContext must be used within <ProjectProvider>')
+  }
+  return ctx
+}
+
+type ProviderProps = PropsWithChildren<{ projectId: string }>
+
+// ---------- Provider ----------
+export const ProjectProvider: React.FC<ProviderProps> = ({
+  projectId,
+  children,
+}) => {
+  const { data: activeProjectData } = useGetActiveProjectQuery()
+  const [setActiveProject] = useSetActiveProjectMutation()
+
+  useEffect(() => {
+    if (!projectId) return
+    const activeProjectId =
+      typeof activeProjectData?.projectId === 'string'
+        ? activeProjectData.projectId
+        : null
+    if (activeProjectId === projectId) return
+    void setActiveProject({ projectId }).unwrap().catch(() => {})
+  }, [activeProjectData?.projectId, projectId, setActiveProject])
+
+  // 1) Project fetch
+  const {
+    data: rawProject,
+    isLoading: isProjectLoading,
+    isFetching: isProjectFetching,
+    isError: isProjectError,
+    refetch: refetchProject,
+  } = useGetOneProjectQuery(
+    { id: projectId },
+    { skip: !projectId }
+  )
+
+  // ✅ Project is now the real Project model (includes vectorStoreId)
+  const project: Project | null = useMemo(() => {
+    if (!rawProject) return null
+    return (rawProject as any)?.data ?? rawProject
+  }, [rawProject])
+
+  // ---------- Chats ----------
+  const [chatsSearchTerm, setChatsSearchTerm] = useState('')
+  const chats: AnyChat[] = useMemo(() => [], [])
+  const hasNextChats = false
+  const loadNextChats = useCallback(() => {}, [])
+
+  const value: ProjectContextShape = {
+    projectId,
+    project,
+    isProjectLoading,
+    isProjectFetching,
+    isProjectError,
+    refetchProject,
+
+    chats,
+    isFetchingChats: false,
+    hasNextChats,
+    loadNextChats,
+    chatsSearchTerm,
+    setChatsSearchTerm,
+  }
+
+  return (
+    <ProjectContext.Provider value={value}>
+      {children}
+    </ProjectContext.Provider>
+  )
+}