@spacemade/ui 0.0.1

package/src/components/settings/SettingsSidebarNav.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { useSettingsNavItems } from './settingsNav'
+
+export const SettingsSidebarNav = () => {
+  const { pathname } = useRouter()
+  const navItems = useSettingsNavItems()
+
+  const isActive = (href: string) => {
+    return pathname === href || pathname.startsWith(`${href}/`)
+  }
+
+  return (
+    <>
+      <h2 className="sidebar-heading">Main</h2>
+      <ul className="sidebar-list mb-2">
+        <li className="sidebar-item">
+          <Link href="/" className="sidebar-link">
+            <i className="bi bi-arrow-left-circle" />
+            <span>Back</span>
+          </Link>
+        </li>
+      </ul>
+
+      <h2 className="sidebar-heading">Settings</h2>
+      <ul className="sidebar-list">
+        {navItems.map((item) => (
+          <li
+            key={item.href}
+            className={`sidebar-item ${isActive(item.href) ? 'settings-sidebar-item-active' : ''}`}
+            title={item.label}
+          >
+            <Link href={item.href} className="sidebar-link">
+              <i className={item.icon} />
+              <span>{item.label}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+
+      <style jsx>{`
+        .settings-sidebar-item-active {
+          background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
+        }
+
+        .settings-sidebar-item-active .sidebar-link {
+          color: var(--bs-primary, #0d6efd);
+          font-weight: 600;
+        }
+      `}</style>
+    </>
+  )
+}

package/src/components/settings/settingsNav.ts

@@ -0,0 +1,96 @@
+import { useMemo } from 'react'
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+import { useGetActiveOrgQuery, useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+
+export type SettingsNavItem = {
+  label: string
+  href: string
+  icon: string
+  personalOnly?: boolean
+  businessAdminOnly?: boolean
+}
+
+export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
+  {
+    label: 'Profile',
+    href: '/settings/profile',
+    icon: 'bi bi-person-circle',
+  },
+  {
+    label: 'Billing',
+    href: '/settings/billing',
+    icon: 'bi bi-wallet2',
+    businessAdminOnly: true,
+  },
+  {
+    label: 'Usage',
+    href: '/settings/usage',
+    icon: 'bi bi-bar-chart-line',
+    businessAdminOnly: true,
+  },
+  {
+    label: 'Organizations',
+    href: '/settings/organizations',
+    icon: 'bi bi-buildings',
+    personalOnly: true,
+    businessAdminOnly: true,
+  },
+  {
+    label: 'Sites',
+    href: '/settings/sites',
+    icon: 'bi bi-globe2',
+    businessAdminOnly: true,
+  },
+  {
+    label: 'Subscriptions',
+    href: '/settings/subscriptions',
+    icon: 'bi bi-collection',
+    businessAdminOnly: true,
+  },
+  {
+    label: 'Tokens',
+    href: '/settings/tokens',
+    icon: 'bi bi-key',
+  },
+]
+
+export const useSettingsNavItems = () => {
+  const { activeOrgId, user } = useAppSelector(selectAccountState)
+  const { data: orgMemberships } = useListOrgsQuery(undefined, { skip: !user?.id })
+  const { data: activeOrgData } = useGetActiveOrgQuery(undefined, { skip: !!activeOrgId })
+
+  return useMemo(() => {
+    const resolvedActiveOrgId = activeOrgId ?? activeOrgData?.orgId ?? null
+    const activeMembership = orgMemberships?.find((m) => m.orgId === resolvedActiveOrgId)
+    const activeOrg = activeMembership?.org
+    const activeRole = String(activeMembership?.role || '').toLowerCase()
+    const orgType = activeOrg?.orgType
+    const isPersonal =
+      !resolvedActiveOrgId ||
+      (!!orgMemberships &&
+        (orgType === 'personal' ||
+          (!orgType && !!activeOrg?.slug && !!user?.name && activeOrg.slug === user.name)))
+
+    if (isPersonal) return SETTINGS_NAV_ITEMS
+    const isSystemAdmin =
+      user?.isSystemAdmin === true ||
+      String(user?.systemRole || '').toUpperCase() === 'ADMIN'
+    const isOrgOwner = !!activeOrg?.ownerId && activeOrg.ownerId === user?.id
+    const isBusinessOrgAdmin = activeRole === 'admin' || isOrgOwner || isSystemAdmin
+
+    return SETTINGS_NAV_ITEMS.filter((item) => {
+      if (item.personalOnly) return false
+      if (item.businessAdminOnly && !isBusinessOrgAdmin) return false
+      return true
+    })
+  }, [
+    activeOrgId,
+    activeOrgData?.orgId,
+    orgMemberships,
+    user?.id,
+    user?.name,
+    user?.isSystemAdmin,
+    user?.systemRole,
+  ])
+}

package/src/components/site/modal/UpdateSiteModal.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Site, SitePayload } from '@store/model'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE, DOMAIN_REGEX } from '@helpers/constants'
+import { removeProtocolPortAndPathFromUrl } from '@helpers/string'
+import { useSiteStore } from '@hooks'
+
+interface FormValues extends FieldValues {
+	name: string
+}
+
+export const UpdateSiteModal = ({
+	site,
+	isOpen,
+	onClose,
+}: {
+	site?: Site
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const {
+		saveSite,
+		isSiteNameAvailable
+	} = useSiteStore()
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		getValues,
+		setValue,
+		clearErrors,
+		reset,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>({
+		defaultValues: {
+			name: site?.name || '',
+		},
+	})
+
+	useEffect(() => {
+		reset({
+			name: site?.name || '',
+		})
+	}, [site, reset])
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			await saveSite(!site, { id: site?.id, ...data } as SitePayload)
+			reset()
+			toast.success('Your site has been saved successfully')
+			onClose()
+		} catch (error: any) {
+			toast.error(
+				error.status !== HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? error.data.message
+					: DEFAULT_ERROR_MESSAGE
+			)
+			setError('server-error', { type: 'custom', message: 'server-error' })
+		}
+	}
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>{!site ? 'Add' : 'Update'} Site</DrawerHeader>
+
+				<DrawerBody>
+					<form id='site-update-form' onSubmit={handleSubmit(onSubmit)}>
+						<div className='w-100 mt-3'>
+							<label htmlFor="model_id">Domain</label>
+							<p className='small mt-1 text-muted'>The website address used for your site content</p>
+							<Input
+								register={register('name', {
+									required: 'This field is required',
+									validate: async (value) => {
+										if (!DOMAIN_REGEX.test(value)) {
+											return 'Please enter a valid domain in one of the following formats: "domain.com" or "subdomain.domain.com".'
+										}
+
+										return await isSiteNameAvailable(value, site) || 'You already have a site with that name created.'
+									},
+									onBlur: () => {
+										// Try cleaning up the URL in case it has been copied/pasted
+										const cleanValue  = removeProtocolPortAndPathFromUrl(getValues('name'));
+										setValue('name', cleanValue);
+									}
+								})}
+								errors={errors}
+								placeholder='example.com'
+								label='Enter your website domain'
+								getValues={getValues}
+							/>
+						</div>
+					</form>
+				</DrawerBody>
+
+				<DrawerFooter>
+					<Button ariaLabel='Cancel' onClick={onClose}>
+						Cancel
+					</Button>
+					<Button
+						type='submit'
+						className='text-white'
+						ariaLabel='Save site changes'
+						color='primary'
+						form='site-update-form'
+						isLoading={isSubmitting}
+						disabled={isSubmitting}
+						onClick={() => clearErrors(['server-error'])}
+					>
+						Save
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	)
+}

package/src/components/site/table/SiteTable.tsx

@@ -0,0 +1,198 @@
+/* eslint-disable @next/next/no-img-element */
+import { ReactNode, SyntheticEvent, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { Site } from '@store/model'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import { truncateString } from '@helpers/string'
+import { useSiteStore, useSearchAndFilterCommon } from '@hooks'
+import { useGetSitesQuery } from '@store/slice/api/siteApiSlice'
+import { UpdateSiteModal } from '../modal/UpdateSiteModal'
+import TablePaging from '@components/common/table/TablePaging'
+import Link from 'next/link'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { FullDateFormat } from '@helpers/date'
+import { defaultAvatar } from '@helpers/images'
+
+export const SiteTable = ({
+	defaultLimit,
+	skipPaging = false,
+	isShortTable = false,
+	onEmptyStateChange,
+	renderEmptyState,
+} : {
+	defaultLimit?: number
+	skipPaging?: boolean
+	isShortTable?: boolean
+	onEmptyStateChange?: (isEmptyState: boolean) => void
+	renderEmptyState?: ReactNode
+}) => {
+	const {
+		query: { nameLike, limit, page },
+	} = useRouter()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const {
+		isOpen: isOpenUpdateModal,
+		onOpen: onOpenUpdateModal,
+		onClose: onCloseUpdateModal,
+	} = useDisclosure()
+
+	const {
+		getLimitFromQuery,
+		calculateProperPageNumber,
+	} = useSearchAndFilterCommon()
+	const defaultPageLimit = defaultLimit ?? 50
+	const pageLimit = getLimitFromQuery(limit ?? defaultPageLimit, defaultPageLimit)
+
+	const { removeSite } = useSiteStore()
+
+	const {
+		data,
+		isFetching,
+		isLoading,
+	} = useGetSitesQuery({
+		nameLike: nameLike?.toString(),
+		limit: pageLimit,
+		page: calculateProperPageNumber(page),
+	})
+
+	const [activeSite, setActiveSite] = useState<Site | null>(null)
+
+	useEffect(() => {
+		if (!onEmptyStateChange) return
+		if (isLoading || isFetching) return
+		onEmptyStateChange(isEmpty(data?.results))
+	}, [data?.results, isFetching, isLoading, onEmptyStateChange])
+
+	const onRowClick = (event: SyntheticEvent, site: Site) => {
+		const target = event.target as HTMLElement
+		setActiveSite(site)
+
+		if (target.closest('[data-type="action"]')) return
+
+		onOpenUpdateModal()
+	}
+
+	return (
+		<>
+			<div>
+				<table className='table'>
+					<tbody>
+						{data &&
+							!isFetching &&
+							data.results.map((site) => (
+								<tr
+									key={site.id}
+									className='pointer'
+									onClick={(e) => onRowClick(e, site)}
+								>
+									<td className='d-none d-lg-table-cell'>
+										<div
+											className='bg-light rounded d-flex align-items-center justify-content-center'
+											style={{ width: 100, height: 50 }}
+										>
+											<i className='bi bi-globe2 text-dark' />
+										</div>
+									</td>
+
+									<td>{truncateString(site.name, 120)}</td>
+
+									<td className='d-none d-lg-table-cell'>
+										<OptimizedImage
+											src={site.user?.profileMedia?.media?.sourceUrl || defaultAvatar}
+											alt={site.user?.name || ''}
+											width={35}
+											height={35}
+											className='object-fit-cover rounded-pill'
+										/>
+									</td>
+
+									<td className='d-none d-lg-table-cell'>
+										{site.updatedAt ? FullDateFormat(site.updatedAt) : '-'}
+									</td>
+									{!isShortTable && (
+										<td
+											className='d-none d-lg-table-cell text-end align-middle'
+											data-type='action'
+											onClick={(e) => e.stopPropagation()}
+										>
+											<div className='d-flex justify-content-end'>
+												<Button
+													className='no-min-size w-xs-50p h-100 bg-hover-background'
+													data-type='action'
+													onClick={() => {
+														setActiveSite(site)
+														onOpenDialog()
+													}}
+												>
+													<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) && (
+					<>
+						{renderEmptyState || (
+							<div className='d-flex flex-column align-items-center justify-content-center text-center py-4'>
+								{nameLike ? (
+									<p>{`There are no sites to show that match your search`}</p>
+								) : (
+									<p>{`You don't have any sites yet`}</p>
+								)}
+							</div>
+						)}
+					</>
+				)}
+
+				{!isShortTable && !isEmpty(data?.results) && data?.count !== undefined && !skipPaging && data.count >= defaultPageLimit && (
+					<TablePaging
+						totalCount={data.count}
+						defaultLimit={defaultPageLimit}
+					/>
+				)}
+
+				{isShortTable && (
+					<div className='text-end'>
+						<Link href='/settings/sites' className='text-primary'>View All</Link>
+					</div>
+				)}
+			</div>
+
+			{activeSite && (
+				<>
+					<UpdateSiteModal
+						site={activeSite}
+						isOpen={isOpenUpdateModal}
+						onClose={onCloseUpdateModal}
+					/>
+					<DeleteDialog
+						isOpen={isDialogOpen}
+						onClose={onCloseDialog}
+						entityDescription={`${activeSite.name}`}
+						onDelete={() => removeSite(activeSite)}
+					/>
+				</>
+			)}
+		</>
+	)
+}

package/src/components/starter/list-panel.tsx

@@ -0,0 +1,12 @@
+export function ListPanel({ title, items }: { title: string; items: string[] }) {
+  return (
+    <article className="border rounded p-3 h-100">
+      <h2 className="h6 mb-2">{title}</h2>
+      <ul className="mb-0">
+        {items.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </article>
+  )
+}

package/src/components/starter/starter-overview.tsx

@@ -0,0 +1,32 @@
+import { ListPanel } from '@/components/starter/list-panel'
+import { StatsGrid } from '@/components/starter/stats-grid'
+
+export function StarterOverview() {
+  return (
+    <section className="mt-4 d-flex flex-column gap-3">
+      <StatsGrid />
+      <div className="row g-3">
+        <div className="col-lg-6">
+          <ListPanel
+            title="Included foundation"
+            items={[
+              'Organizations and users',
+              'Projects and providers',
+              'Products and billing',
+            ]}
+          />
+        </div>
+        <div className="col-lg-6">
+          <ListPanel
+            title="Typical next steps"
+            items={[
+              'Connect real API endpoints',
+              'Add permissions and org rules',
+              'Enable optional modules as needed',
+            ]}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/starter/stats-grid.tsx

@@ -0,0 +1,20 @@
+export function StatsGrid() {
+  const stats = [
+    { label: 'Core modules', value: '20+' },
+    { label: 'Optional modules', value: '2+' },
+    { label: 'Content modules', value: '2+' },
+  ]
+
+  return (
+    <div className="row g-3">
+      {stats.map((item) => (
+        <div className="col-sm-4" key={item.label}>
+          <div className="border rounded p-3 text-center">
+            <div className="h5 mb-1">{item.value}</div>
+            <div className="small text-muted">{item.label}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/storage/VectorStoreFileDeleteButton.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import { useDeleteVectorStoreFileMutation } from '@store/slice/api/vectorStoreFileApiSlice'
+
+type Props = {
+  file: { id: string; fileName: string }
+  vectorStoreId: string
+  onDone?: () => void
+}
+
+export default function VectorStoreFileDeleteButton({
+  file,
+  vectorStoreId,
+  onDone,
+}: Props) {
+  const deleteDialog = useDisclosure()
+  const [deleteFile] = useDeleteVectorStoreFileMutation()
+  const [File, setFile] = useState<{ id: string; name: string } | null>(null)
+
+  const handleOpen = (e: React.MouseEvent) => {
+    e.stopPropagation() // ✅ IMPORTANT
+    setFile({ id: file.id, name: file.fileName })
+    deleteDialog.onOpen()
+  }
+
+  const handleConfirmDelete = async () => {
+    if (!File) return
+
+    try {
+      await deleteFile({
+        vectorStoreId,
+        fileId: File.id,
+      }).unwrap()
+
+      toast.success('File deleted successfully')
+      onDone?.() // closes dropdown
+    } catch {
+      toast.error('Failed to delete file')
+    }
+
+    deleteDialog.onClose()
+    setFile(null)
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={handleOpen}
+        className="dropdown-item text-danger d-flex align-items-center gap-2"
+      >
+        <i className="bi bi-trash text-danger"></i>
+        Delete
+      </button>
+
+      <DeleteDialog
+        isOpen={deleteDialog.isOpen}
+        onClose={deleteDialog.onClose}
+        titleOverride={
+          File ? `Delete ${File.name} from Storage?` : undefined
+        }
+        entityDescription="file"
+        onDelete={handleConfirmDelete}
+      />
+    </>
+  )
+}

package/src/components/storage/actions/VectorStoreActionsMenu.tsx

@@ -0,0 +1,70 @@
+import { useState, useRef, useEffect } from 'react';
+
+interface VectorStoreActionsMenuProps {
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+const VectorStoreActionsMenu: React.FC<VectorStoreActionsMenuProps> = ({
+  onEdit,
+  onDelete,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleAction = (fn: () => void) => {
+    fn();
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="dropdown" ref={menuRef}>
+      <button
+        className="btn btn-link text-secondary p-0 border-0"
+        style={{ minWidth: 0 }}
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <i className="bi bi-three-dots-vertical fs-5"></i>
+      </button>
+
+      <ul
+        className={`dropdown-menu dropdown-menu-end ${isOpen ? 'show' : ''}`}
+        style={{
+          position: 'absolute',
+          top: '0',
+          right: '100%',
+          transform: 'translateY(0)',
+        }}
+      >
+        <li>
+          <button className="dropdown-item" onClick={() => handleAction(onEdit)}>
+            <i className="bi bi-pencil me-2 text-secondary"></i> Modify
+          </button>
+        </li>
+        <li>
+          <hr className="dropdown-divider" />
+        </li>
+        <li>
+          <button className="dropdown-item text-danger" onClick={() => handleAction(onDelete)}>
+            <i className="bi bi-trash me-2 text-danger"></i> Delete
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default VectorStoreActionsMenu;