@spacemade/ui 0.0.1

package/src/components/orgs/OrgCreateModal.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+
+interface FormValues extends FieldValues {
+  name: string
+  slug?: string
+}
+
+export default function OrgCreateModal({
+  isOpen,
+  onClose,
+  onCreate,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCreate: (data: { name: string; slug?: string }) => Promise<any> | void
+}) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      slug: '',
+    },
+  })
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await onCreate({
+        name: data.name,
+        slug: data.slug || undefined,
+      })
+      reset()
+      onClose()
+    } catch (err) {
+      // Error is handled in parent
+    }
+  }
+
+  const handleClose = () => {
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} size="lg">
+      <ModalOverlay />
+      <ModalContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <ModalHeader>Create New Organization</ModalHeader>
+          <ModalCloseButton />
+          
+          <ModalBody>
+            <div className="mb-3">
+              <Input
+                label="Organization Name"
+                placeholder="My Organization"
+                {...register('name', {
+                  required: 'Organization name is required',
+                  maxLength: {
+                    value: 120,
+                    message: 'Name must be 120 characters or less',
+                  },
+                })}
+                error={errors.name?.message}
+              />
+            </div>
+
+            <div className="mb-3">
+              <Input
+                label="URL Slug (optional)"
+                placeholder="my-organization"
+                {...register('slug', {
+                  maxLength: {
+                    value: 120,
+                    message: 'Slug must be 120 characters or less',
+                  },
+                  pattern: {
+                    value: /^[a-z0-9-]*$/,
+                    message: 'Slug can only contain lowercase letters, numbers, and hyphens',
+                  },
+                })}
+                error={errors.slug?.message}
+                helperText="If left empty, will be generated from the name"
+              />
+            </div>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              variant="outline"
+              onClick={handleClose}
+              className="me-2"
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              color="primary"
+              isLoading={isSubmitting}
+            >
+              Create Organization
+            </Button>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/components/orgs/OrgJumpRedirect.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { SettingsLayout } from '@components/settings/SettingsLayout'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useListOrgsQuery, useSetActiveOrgMutation } from '@store/slice/api/orgApiSlice'
+import { colorCirclePNG } from '@helpers/images'
+import { OrgMembership } from '@store/model'
+import { useAppDispatch } from '@store/hooks'
+import { stripeApiSlice } from '@store/slice/api/stripeApiSlice'
+import { invoiceApiSlice } from '@store/slice/api/invoiceApiSlice'
+import { siteApiSlice } from '@store/slice/api/siteApiSlice'
+import { apiTokenApiSlice } from '@store/slice/api/apiTokenSlice'
+import { productsApiSlice } from '@store/slice/api/productsApiSlice'
+import { projectApiSlice } from '@store/slice/api/projectApiSlice'
+
+const getNormalized = (value: string | undefined) => (value || '').trim().toLowerCase()
+
+const OrgSwitchLoader = ({ membership }: { membership?: OrgMembership | null }) => {
+  const orgName = membership?.org?.name
+  const orgLogo =
+    membership?.org?.profileMedia?.media?.sourceUrl ||
+    membership?.org?.profileImageUrl ||
+    colorCirclePNG
+
+  return (
+    <div
+      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center flex-column"
+      style={{ zIndex: 2000, background: '#fff', animation: 'fadeIn .15s ease-out' }}
+    >
+      <style>{`
+        @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+        @keyframes orgRingSpin { to { transform: rotate(360deg) } }
+        .org-switch-ring {
+          position: relative;
+          width: 72px;
+          height: 72px;
+        }
+        .org-switch-ring::before {
+          content: '';
+          position: absolute;
+          inset: -4px;
+          border-radius: 50%;
+          border: 3px solid #e9ecef;
+          border-top-color: #3b82f6;
+          animation: orgRingSpin .8s linear infinite;
+        }
+        .org-switch-ring img {
+          width: 72px;
+          height: 72px;
+          border-radius: 50%;
+          object-fit: cover;
+        }
+      `}</style>
+
+      <div className="org-switch-ring">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={orgLogo} alt={orgName || 'Organization'} />
+      </div>
+
+      {orgName && (
+        <p className="mt-3 mb-0 text-muted fw-medium" style={{ fontSize: '0.9rem' }}>
+          Switching to <strong>{orgName}</strong>
+        </p>
+      )}
+    </div>
+  )
+}
+
+export const OrgJumpRedirect = () => {
+  const router = useRouter()
+  const jumpName = useMemo(() => {
+    const raw = router.query.name
+    if (Array.isArray(raw)) return raw[0]
+    return raw
+  }, [router.query.name])
+
+  const dispatch = useAppDispatch()
+  const { data: memberships, isLoading } = useListOrgsQuery()
+  const [setActiveOrg] = useSetActiveOrgMutation()
+  const { activeOrgId, setActiveOrgId } = useUserAuthContext()
+  const [error, setError] = useState<string | null>(null)
+  const [targetMembership, setTargetMembership] = useState<OrgMembership | null>(null)
+  const hasRunRef = useRef(false)
+
+  useEffect(() => {
+    if (!router.isReady || !jumpName || !memberships || hasRunRef.current) return
+
+    const normalizedName = getNormalized(decodeURIComponent(jumpName))
+    const matchedMembership = memberships.find((membership) => {
+      const slug = getNormalized(membership.org?.slug)
+      const name = getNormalized(membership.org?.name)
+      const id = getNormalized(membership.orgId)
+      return slug === normalizedName || name === normalizedName || id === normalizedName
+    })
+
+    if (!matchedMembership?.orgId) {
+      setError(`Organization "${decodeURIComponent(jumpName)}" was not found.`)
+      return
+    }
+
+    setTargetMembership(matchedMembership)
+    hasRunRef.current = true
+
+    const redirectToTarget = async () => {
+      try {
+        if (activeOrgId !== matchedMembership.orgId) {
+          const result = await setActiveOrg({ orgId: matchedMembership.orgId }).unwrap()
+          setActiveOrgId(result.orgId)
+
+          // Clear all org-scoped API caches so pages refetch with new org context
+          dispatch(stripeApiSlice.util.resetApiState())
+          dispatch(invoiceApiSlice.util.resetApiState())
+          dispatch(siteApiSlice.util.resetApiState())
+          dispatch(apiTokenApiSlice.util.resetApiState())
+          dispatch(productsApiSlice.util.resetApiState())
+          dispatch(projectApiSlice.util.resetApiState())
+        }
+
+        const isBusiness = matchedMembership.org?.orgType === 'business'
+        const redirectParam = typeof router.query.redirect === 'string' ? router.query.redirect : null
+        const destination = redirectParam || (isBusiness ? '/' : '/settings/profile')
+
+        router.replace(destination)
+      } catch {
+        setError('Unable to switch organization right now. Please try again.')
+      }
+    }
+
+    redirectToTarget()
+  }, [activeOrgId, jumpName, memberships, router, setActiveOrg, setActiveOrgId])
+
+  if (error) {
+    return (
+      <SettingsLayout>
+        <div className="container py-5">
+          <h1 className="h4 mb-2">Organization Switch Failed</h1>
+          <p className="text-muted mb-4">{error}</p>
+          <Link href="/settings/organizations" className="btn btn-outline-primary">
+            Back to Organizations
+          </Link>
+        </div>
+      </SettingsLayout>
+    )
+  }
+
+  return <OrgSwitchLoader membership={targetMembership} />
+}

package/src/components/page/SiteContentPage.tsx

@@ -0,0 +1,129 @@
+import Link from 'next/link'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+
+export type SiteTreeNode = {
+  id: string
+  slug: string
+  name: string
+  icon?: string | null
+  children?: SiteTreeNode[]
+}
+
+type Props = {
+  site: { id: string; name: string }
+  page: { name: string; intro: string | null; content: string | null }
+  tree: SiteTreeNode[]
+  previous: { href: string; name: string } | null
+  next: { href: string; name: string } | null
+  currentPath: string
+  basePath: string
+  hideMainNav?: boolean
+  backHref?: string
+  backLabel?: string
+  showPageTree?: boolean
+}
+
+const flattenPath = (
+  nodes: SiteTreeNode[],
+  path = '',
+  depth = 0
+): Array<SiteTreeNode & { href: string; depth: number }> =>
+  nodes.flatMap((node) => {
+    const href = node.slug ? `${path}/${node.slug}` : path || '/'
+    return [
+      { ...node, href, depth },
+      ...flattenPath(node.children || [], href === '/' ? '' : href, depth + 1),
+    ]
+  })
+
+export const SiteContentPage = ({
+  site,
+  page,
+  tree,
+  previous,
+  next,
+  currentPath,
+  basePath,
+  hideMainNav = false,
+  backHref,
+  backLabel = 'Back',
+  showPageTree = true,
+}: Props) => {
+  const items = flattenPath(tree)
+  const resolveHref = (href: string) => {
+    const path = href === '/' ? '' : href
+    return `${basePath}${path}` || '/'
+  }
+
+  return (
+    <SideNavLayout
+      renderMainNav={hideMainNav ? () => null : undefined}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">{site.name}</h2>
+          {backHref ? (
+            <ul className="sidebar-list mb-5">
+              <li className="sidebar-item" title={backLabel}>
+                <Link href={backHref} className="sidebar-link">
+                  <i className="bi bi-arrow-left" /> <span>{backLabel}</span>
+                </Link>
+              </li>
+            </ul>
+          ) : null}
+        </>
+      )}
+      sidebarContent={(isCollapsed) =>
+        !isCollapsed && showPageTree ? (
+          <nav className="sidebar-section mb-4 mt-5">
+            <h3 className="sidebar-heading">Pages</h3>
+            <ul className="sidebar-list">
+              {items.map((item) => {
+                const targetHref = resolveHref(item.href)
+                const isActive = currentPath === item.href
+                return (
+                  <li className="sidebar-item" key={item.id}>
+                    <Link href={targetHref} className={`sidebar-link ${isActive ? 'fw-bold text-dark' : ''}`}>
+                      <span style={{ paddingLeft: `${item.depth * 14}px` }}>
+                        {item.icon ? <i className={`bi bi-${item.icon} me-2`} /> : null}
+                        <span>{item.name}</span>
+                      </span>
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </nav>
+        ) : null
+      }
+    >
+      <div className="container py-4">
+        <h1>{page.name}</h1>
+        {page.intro ? <p className="lead mt-3">{page.intro}</p> : null}
+        <div className="mt-4" dangerouslySetInnerHTML={{ __html: page.content || '' }} />
+
+        <div className="mt-5 pt-4 border-top">
+          <div className="row g-3">
+            <div className="col-md-6">
+              {previous ? (
+                <Link href={resolveHref(previous.href)} className="d-block border rounded p-3">
+                  Previous
+                  <div className="fw-bold">{previous.name}</div>
+                </Link>
+              ) : null}
+            </div>
+            <div className="col-md-6 text-md-end">
+              {next ? (
+                <Link href={resolveHref(next.href)} className="d-block border rounded p-3">
+                  Next
+                  <div className="fw-bold">{next.name}</div>
+                </Link>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </SideNavLayout>
+  )
+}
+
+export default SiteContentPage

package/src/components/post/accordion/FilterPostCategoriesAccordion.tsx

@@ -0,0 +1,126 @@
+import { useMemo } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import {
+	Accordion,
+	AccordionButton,
+	AccordionIcon,
+	AccordionItem,
+	AccordionPanel,
+	Menu,
+	MenuButton,
+	MenuItem,
+	MenuList,
+	useDisclosure,
+} from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { useGetPostCategoriesQuery } from '@store/slice/api/categoriesApiSlice'
+
+const FilterPostCategoriesAccordion = ({
+	parentPath = 'blog',
+	entity,
+	isAccordion,
+	openFistByDefault = true,
+}: {
+	parentPath?: string
+	openFistByDefault?: boolean
+	isAccordion?: boolean
+	entity: 'post' | 'product'
+}) => {
+	const {
+		query: { categorySlug },
+	} = useRouter()
+	const { data: categories } = useGetPostCategoriesQuery({
+		excludeCategoriesWithoutLiveEntities: true,
+		entity,
+	})
+
+	const categorySelected = useMemo(() => {
+		return (
+			categories?.find((category) => category.slug === categorySlug) || null
+		)
+	}, [categories, categorySlug])
+
+	if (!categories || isEmpty(categories)) {
+		return <></>
+	}
+
+	return (
+		<div>
+			{isAccordion ? (
+				<Accordion
+					className='accordion-group border-0 bg-lighter-gray w-100'
+					defaultIndex={openFistByDefault ? [0] : undefined}
+					allowToggle
+				>
+					<AccordionItem>
+						<AccordionButton className='border-0 text-dark fw-bold h-xs-45p'>
+							<span>
+								<span className='bi bi-tags me-2'></span> Categories
+							</span>
+							<AccordionIcon />
+						</AccordionButton>
+						<AccordionPanel>
+							<Link href={`/${parentPath}`}>
+								<span className='d-block text-hover-black pb-3'>All</span>
+							</Link>
+							{categories.map((category, key) => (
+								<Link href={`/${parentPath}/c/${category.slug}`} key={key}>
+									<span
+										className={`d-block text-hover-black pb-3 ${
+											category.slug === categorySlug
+												? 'text-dark fw-bold'
+												: 'text-dark-gray'
+										}`}
+									>
+										{category.name}
+									</span>
+								</Link>
+							))}
+						</AccordionPanel>
+					</AccordionItem>
+				</Accordion>
+			) : (
+				<div className='position-relative w-100 minw-md-400p z-index-3 categories-dropdown'>
+					<Menu closeOnSelect={true}>
+						<MenuButton className='btn btn-lighter-gray no-min-size w-100 h-xs-45p rounded-md'>
+							<span className='w-100 d-flex align-items-center justify-content-between px-2'>
+								<span className='d-flex align-items-center'>
+									<span className='bi bi-tags me-2'></span>
+									<strong>
+										{categorySelected ? categorySelected.name : 'Categories'}
+									</strong>
+								</span>
+								<span className='bi bi-chevron-down fs-5'></span>
+							</span>
+						</MenuButton>
+						<MenuList className='bg-lighter-gray w-100 rounded-md overflow-hidden p-3'>
+							<Link href={`/${parentPath}`}>
+								<span className='d-block text-hover-black pb-3'>All</span>
+							</Link>
+							{categories.map((category, key) => (
+								<MenuItem key={key} as='span'>
+									<Link href={`/${parentPath}/c/${category.slug}`}>
+										<span
+											className={`d-block text-hover-black ${
+												key !== categories.length - 1 ? 'pb-3' : ''
+											} ${
+												category.slug === categorySlug
+													? 'text-dark fw-bold'
+													: 'text-dark-gray'
+											}`}
+										>
+											{category.name}
+										</span>
+									</Link>
+								</MenuItem>
+							))}
+						</MenuList>
+					</Menu>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default FilterPostCategoriesAccordion

package/src/components/post/block/FeaturedProductCard.tsx

@@ -0,0 +1,31 @@
+// components/post/block/FeaturedProductCard.tsx
+import React from 'react'
+import {
+  Product,
+} from '@store/model'
+import { ProductCard } from '@components/marketplace/card/ProductCard'
+
+export const FeaturedProductCard = ({
+  product,
+  isLoggedIn,
+}: {
+  product: Product
+  isLoggedIn: boolean
+}) => {
+  const basePath = '/products'
+
+  return (
+    <div className="mt-4">
+      <h2 className="h3 mb-3">Featured Product</h2>
+
+      {/* Use your existing card so button logic stays centralized */}
+      <div className="row row-cols-1 g-3">
+        <ProductCard
+          product={product}
+          basePath={basePath}
+          isLoggedIn={isLoggedIn}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/post/block/FeaturedProviderCard.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from 'next/link'
+import type { ModelProviderEntity } from '@store/model/provider.model'
+import { createAgentSlug as createSlug } from '@helpers/slugUtils'
+import { SiteLogoIcon } from '@helpers/images'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+
+export const FeaturedProviderCard = ({ provider }: { provider: ModelProviderEntity }) => {
+  const name = provider?.label || provider?.key || 'Provider'
+  const slug = createSlug(name)
+  const image =
+    provider?.iconMedia?.media?.sourceUrl ||
+    provider?.featuredMedia?.media?.sourceUrl ||
+    provider?.logoUrl ||
+    SiteLogoIcon
+
+  const alt =
+    provider?.iconMedia?.media?.details?.altText ||
+    provider?.featuredMedia?.media?.details?.altText ||
+    `${name} icon`
+
+  return (
+    <div className='mt-4'>
+      <h2 className='h3 mb-3'>Provider</h2>
+      <Link
+        href={`/providers/${slug}`}
+        className='d-flex align-items-center gap-3 p-3 border border-light-gray rounded-md text-decoration-none'
+        aria-label={`Open provider ${name}`}
+      >
+        <div
+          className='border border-light-gray bg-white d-flex align-items-center justify-content-center rounded'
+          style={{ width: 56, height: 56, padding: 6 }}
+        >
+          <OptimizedImage
+            src={image}
+            alt={alt}
+            width={40}
+            height={40}
+            className='object-fit-contain'
+          />
+        </div>
+        <div className='flex-grow-1'>
+          <div className='fw-semibold text-dark'>{name}</div>
+          {provider?.description ? (
+            <div className='text-muted small'>{provider.description}</div>
+          ) : null}
+        </div>
+      </Link>
+    </div>
+  )
+}

package/src/components/post/block/InTheNews.tsx

@@ -0,0 +1,77 @@
+import { useGetApprovedPostsQuery } from '@store/slice/api/postApiSlice'
+import InTheNewsCard from '@components/post/card/InTheNewsCard'
+
+export const InTheNews = ({
+	skipPostIds,
+	limit = 5,
+	categoryIds,
+	tagIds,
+	ownerId,
+	providerId,
+	productId,
+	titleClasses,
+	getForTagOnly,
+	title = 'People Also Read:',
+	backgroundColor = 'alice-blue',
+	maxLimitedTo4,
+}: {
+	limit?: number
+	skipPostIds?: string[]
+	categoryIds?: string[]
+	tagIds?: string[]
+	ownerId?: string
+	providerId?: string
+	productId?: string
+	title?: string
+	backgroundColor?: string
+	titleClasses?: string
+	getForTagOnly?: boolean
+	maxLimitedTo4?: boolean
+}) => {
+	const { data: posts } = useGetApprovedPostsQuery({
+		limit,
+		categoryIds,
+		tagIds,
+		ownerId,
+		providerId,
+		productId,
+		skipPostIds: skipPostIds,
+		getForTagOnly,
+	})
+	const computedContainerClasses =
+		backgroundColor === 'transparent' ? 'mt-5 mb-5' : 'mt-5 py-5'
+
+	if (!posts?.count) {
+		return <></>
+	}
+
+	return (
+		<div className={`bg-${backgroundColor} ${computedContainerClasses}`}>
+			<div className="container">
+				<h2
+					className={[
+						'fw-bolder',
+						'fs-4',
+						titleClasses,
+					]
+						.filter(Boolean)
+						.join(' ')}
+				>
+					{title}
+				</h2>
+				<div
+					className={`news-cards-grid general-cards general-cards-one-row mt-4 ${
+						maxLimitedTo4 ? 'general-cards-limit-n1' : ''
+					}`}
+				>
+					{posts &&
+						posts.results.map((post, key) => (
+							<div key={post.id || key}>
+								<InTheNewsCard post={post} />
+							</div>
+						))}
+				</div>
+			</div>
+		</div>
+	)
+}