@spacemade/ui 0.0.1

package/src/components/common/layout/account/AccountLayout.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable @next/next/no-img-element */
+import dynamic from 'next/dynamic'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { NavOption } from '@helpers/types'
+import Link from 'next/link'
+import { SiteLogoIcon } from '@helpers/images'
+import { useNavOptions } from '@hooks'
+
+const NameSearch = dynamic(
+	() => import('@components/common/filters/NameSearch'),
+	{
+		ssr: false,
+	}
+)
+
+export const AccountLayout = ({
+	children,
+	title,
+	headerImageUrl,
+	showSearch,
+	addMaxWidth = true,
+	leftNavOptions,
+	leftNavHeaderOption,
+	backUrl,
+} : {
+	title: string
+	children: React.ReactNode
+	headerImageUrl?: string
+	showSearch?: boolean
+	addMaxWidth?: boolean
+	leftNavOptions?: NavOption[]
+	leftNavHeaderOption?: string
+	backUrl?: string
+}) => {
+	const { isNavActive } = useNavOptions()
+
+	return (
+		<div className='container-lg py-8 py-lg-5 navbar-height'>
+		<div className={`${ addMaxWidth ? 'mw-lg-1000p' : '' } mx-auto`}>
+			{headerImageUrl && (
+				<div className='text-center mb-2'>
+					<img src={headerImageUrl} alt='header image' className='w-xs-100p h-xs-100p object-fit-contain' />
+				</div>
+			)}
+			<AppPageTitle title={title} align='center' sizeAs='h1' showOnMobile backUrl={backUrl}/>
+			{showSearch && (
+				<div className='mt-4'>
+					<NameSearch onSearchChange={() => {}} />
+				</div>
+			)}
+
+			{leftNavOptions ? (
+				<div className='row'>
+					<div className='col-lg-2 pe-lg-0'>
+						<ul className='nav flex-column'>
+							<li>
+								<Link
+									href={`/u`}
+									className={`d-block text-dark-900 fw-600 py-2 px-3 mb-2`}
+									aria-label={`Link to Console`}
+								>
+									<span className={`bi bi-arrow-left-circle me-1 icon-fw`}></span>{' '}
+									<span>AI Console</span>
+								</Link>
+							</li>
+							<span className='fw-bold small d-block mb-2 px-3 mt-3'>
+								{leftNavHeaderOption}
+							</span>
+								{leftNavOptions.map((item, key) => (
+									<li key={key}>
+										<Link
+											href={item.path}
+											className={`d-block text-dark-900 fw-600 py-2 px-3 mb-2 ${
+												isNavActive(item.path, item.hasChildrenRoutes)
+													? 'bg-alice-blue'
+													: ''
+											}`}
+											aria-label={`Link to ${item.label}`}
+										>
+											<span className={`${item.icon} me-1 icon-fw`}></span>{' '}
+											<span>{item.label}</span>
+										</Link>
+									</li>
+								))}
+							</ul>
+					</div>
+					<div className='col-lg-10 border-start ps-lg-5'>
+						{ children }
+					</div>
+				</div>
+			) : (
+				<>
+					{ children }
+				</>
+			)}
+		</div>
+	</div>
+	)
+}

package/src/components/common/layout/admin/AdminLayout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { AdminLeftNav } from '@components/admin/nav/AdminLeftNav'
+
+export const AdminLayout = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<div className='position-absolute top-0 left-0 right-0'>
+			<div className='position-relative px-2 ps-lg-0 pe-lg-4'>
+				<div className='d-none d-lg-block position-fixed'>
+					<AdminLeftNav />
+				</div>
+				<div className='ms-lg-280p overflow-y-auto vh-100'>
+					<div className='pt-7 pb-8 pb-lg-5 pt-lg-4'>{children}</div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/common/layout/explore/ExploreLayout.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const ExploreLayout = ({
+	title,
+	subText,
+	children,
+	textAlign = 'center',
+}: {
+	title: string
+	subText?: string
+	children: React.ReactNode
+	textAlign?: string
+}) => {
+	return (
+		<div className='container-lg'>
+			<h1 className={`text-${textAlign}`}>{title}</h1>
+			{subText && <p className={`text-${textAlign}`}>{subText}</p>}
+			<div className='row mt-lg-4'>{children}</div>
+		</div>
+	)
+}
+
+export default ExploreLayout

package/src/components/common/layout/explore/ExploreLayoutContent.tsx

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react'
+
+const ExploreLayoutContent = ({
+	children,
+	searchComponent,
+	cols = 9,
+}: {
+	children?: React.ReactNode
+	searchComponent?: JSX.Element
+	cols?: number
+}) => {
+	return (
+		<div className={`col-lg-${cols} pb-9 pb-lg-0`}>
+			<div className='d-none d-lg-block'>{searchComponent}</div>
+			<div className={`${searchComponent ? 'mt-4' : ''}`}>{children}</div>
+		</div>
+	)
+}
+
+export default ExploreLayoutContent

package/src/components/common/layout/explore/ExploreLayoutFilters.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import MobileFiltersDrawer from '@components/common/dialog/MobileFiltersDrawer'
+
+const ExploreLayoutFilters = ({
+	children,
+	className,
+	showFiltersOnMobile = true,
+	cols = 3,
+}: {
+	children: React.ReactNode
+	className?: string
+	showFiltersOnMobile?: boolean
+	cols?: number
+}) => {
+	return (
+		<>
+			<div className={`d-none d-lg-block col-lg-${cols} ${className}`}>
+				<div className='px-3 rounded-md'>{children}</div>
+			</div>
+
+			{showFiltersOnMobile && (
+				<MobileFiltersDrawer>{children}</MobileFiltersDrawer>
+			)}
+		</>
+	)
+}
+
+export default ExploreLayoutFilters

package/src/components/common/loading/LoadingScreen.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import type { NextPage } from 'next'
+import { useRouter } from '@lib/next-router'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import { OsirusHorizontalBlueLogo } from '@helpers/images'
+
+interface Props {
+	showMessage?: boolean
+	messageTitle?: string
+	actionLabel?: string
+	action?: () => void
+	callActionOnInit?: boolean
+	showCancelAction?: boolean
+	showSpinner?: boolean
+	bottomMessage?: JSX.Element
+}
+
+const LoadingScreen: NextPage<Props> = ({
+	messageTitle,
+	showMessage = false,
+	actionLabel,
+	action,
+	callActionOnInit = false,
+	showCancelAction = true,
+	showSpinner = true,
+	bottomMessage,
+}) => {
+	const router = useRouter()
+
+	useEffect(() => {
+		if (callActionOnInit) {
+			action && action()
+		}
+	}, [action, callActionOnInit])
+
+	return (
+		<div className='h-fix-screen d-flex align-items-center justify-content-center'>
+			<div
+				className={`minw-md-450p d-flex align-items-center justify-content-center flex-column p-4 rounded-md position-relative ${
+					showMessage ? 'shadow bg-white' : ''
+				}`}
+			>
+				{showCancelAction && showMessage && (
+					<Button
+						ariaLabel='Navigate back to home'
+						className='no-min-size position-absolute top-0 right-0 m-2 text-white'
+						onClick={() => router.back()}
+					>
+						<span className='bi bi-x'></span>
+					</Button>
+				)}
+
+				{showMessage && (
+					<img
+						alt='Osirus AI Logo'
+						src={OsirusHorizontalBlueLogo}
+						className='w-xs-220p img-fluid'
+					/>
+				)}
+				{showSpinner && (
+					<div className='my-3'>
+						<Spinner />
+					</div>
+				)}
+				{showMessage && (
+					<div className='text-center mt-4 mw-xs-500p'>
+						<h4 className='mb-4'>{messageTitle}</h4>
+						<Button
+							ariaLabel='sign up'
+							className='ms-2 text-white fw-bold h-50 rounded-xl'
+							color='primary'
+							onClick={() => action && action()}
+						>
+							{actionLabel}
+						</Button>
+					</div>
+				)}
+				<div className='mt-3'>{bottomMessage}</div>
+			</div>
+		</div>
+	)
+}
+
+export default LoadingScreen

package/src/components/common/loading/Spinner.tsx

@@ -0,0 +1,12 @@
+const Spinner = ({
+  color = 'primary',
+  size = 'md',
+}: {
+  color?: string
+  size?: 'sm' | 'md' | 'lg' | string
+}) => {
+  const sizeClass = size === 'md' ? '' : `spinner-${size}`
+  return <div className={`spinner spinner-${color} ${sizeClass}`.trim()}></div>
+}
+
+export default Spinner

package/src/components/common/state/InvalidInviteCard.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable @next/next/no-img-element */
+import { SiteLogoIcon } from '@helpers/images'
+
+type InvalidInviteCardProps = {
+  title?: string
+  description?: string
+}
+
+export default function InvalidInviteCard({
+  title = 'This invitation is no longer valid',
+  description = 'The invite may have expired or already been accepted.',
+}: InvalidInviteCardProps) {
+  return (
+    <div className="d-flex justify-content-center mt-5">
+      <div
+        className="bg-white border rounded-md p-4 p-md-5"
+        style={{ maxWidth: 520, width: '100%' }}
+      >
+        <div className="text-center mb-4">
+          <img
+            src={SiteLogoIcon}
+            alt="Osirus AI"
+            style={{ height: 48 }}
+            className="invert-filter"
+          />
+        </div>
+        <h2 className="text-center mb-3">{title}</h2>
+        <p className="text-center text-muted">{description}</p>
+      </div>
+    </div>
+  )
+}

package/src/components/common/table/TableFilter.tsx

@@ -0,0 +1,205 @@
+// TableFilter.tsx
+import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'
+import { useRouter } from '@lib/next-router'
+import { debounce } from 'lodash'
+import { FieldValues, useForm } from 'react-hook-form'
+import { EntityStatus } from '@store/model'
+import { ProductType } from '@store/model' 
+import { useGetPostCategoriesQuery } from '@store/slice/api/categoriesApiSlice'
+import {
+  SearchState,
+  useSearchAndFilterCommon,
+} from '@hooks'
+import Input from '@components/common/forms/Input'
+import Select, { OptionType } from '@components/common/forms/Select'
+
+interface FormValues extends FieldValues {
+  name: string
+  status: string
+  categoryId: string
+  productType: string // 🆕
+}
+
+const TableFilter = ({
+  type,
+  isStatusFilterHidden = false,
+  isCategoryFilterHidden = false,
+  isProductTypeFilterHidden = false, // 🆕 optional toggle
+  excludedProductTypes = [],
+  setSearchState,
+}: {
+  type:
+    | 'ad'
+    | 'post'
+    | 'product'
+    | 'tag'
+    | 'user'
+    | 'slide'
+    | 'category'
+    | 'campaign'
+  isStatusFilterHidden?: boolean
+  isCategoryFilterHidden?: boolean
+  isProductTypeFilterHidden?: boolean // 🆕
+  excludedProductTypes?: ProductType[]
+  setSearchState?: Dispatch<SetStateAction<SearchState>>
+}) => {
+  const {
+    query: { categoryId, status, nameLike, type: queryType }, // 🆕 read ?type from URL
+  } = useRouter()
+  const { updateURL } = useSearchAndFilterCommon()
+
+  const { data: categories = [] } = useGetPostCategoriesQuery({
+    mode: 'options',
+  })
+
+  const { register, getValues, control } = useForm<FormValues>({
+    defaultValues: {
+      name: nameLike?.toString() || '',
+      status: status?.toString() || 'all',
+      categoryId: categoryId?.toString() || 'all',
+      productType: queryType?.toString() || 'all', // 🆕
+    },
+  })
+
+  const nameFilterChangeHandler = () => {
+    const value = getValues('name').trim()
+    if (setSearchState) {
+      setSearchState((prev) => ({ ...prev, nameLike: value }))
+    } else {
+      updateURL('nameLike', value)
+    }
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedChangeNameHandler = useCallback(
+    debounce(nameFilterChangeHandler, 300),
+    []
+  )
+
+  // Columns: base 1 + status + category + productType (when product)
+  const handleNumberOfCols = useMemo(() => {
+    let cols = 1
+    if (!isCategoryFilterHidden) cols += 1
+    if (!isStatusFilterHidden) cols += 1
+    if (type === 'product' && !isProductTypeFilterHidden) cols += 1 // 🆕
+    return cols
+  }, [type, isCategoryFilterHidden, isStatusFilterHidden, isProductTypeFilterHidden])
+
+  const productTypeOptions: OptionType[] = useMemo(() => {
+    const allOptions: OptionType[] = [
+      { label: 'All', value: 'all' },
+      { label: 'Item', value: ProductType.Item },
+      { label: 'Plan', value: ProductType.Plan },
+      { label: 'Add-on', value: ProductType.AddOn },
+    ]
+    if (!excludedProductTypes.length) return allOptions
+    const excluded = new Set(excludedProductTypes.map((item) => String(item)))
+    return allOptions.filter(
+      (option) => option.value === 'all' || !excluded.has(String(option.value))
+    )
+  }, [excludedProductTypes])
+
+  return (
+    <form
+      onSubmit={(e) => e.preventDefault()}
+      className={`row row-cols-1 row-cols-md-${handleNumberOfCols} g-3`}
+    >
+      <div className='col'>
+        <Input
+          register={register('name')}
+          placeholder={`Enter ${type} name to filter`}
+          label='Filter by name'
+          getValues={getValues}
+          onKeyUp={debouncedChangeNameHandler}
+        />
+      </div>
+
+      {!isCategoryFilterHidden && (
+        <div className='col'>
+          <Select
+            name='categoryId'
+            label='Category to filter'
+            options={[
+              { label: 'All', value: 'all' },
+              ...(categories as OptionType[]),
+            ]}
+            control={control}
+            getValues={getValues}
+            onSelectChange={(value) => {
+              const valueAsString = value?.toString()
+              if (setSearchState) {
+                setSearchState((prev) => ({
+                  ...prev,
+                  categoryId:
+                    !valueAsString || valueAsString === 'all'
+                      ? undefined
+                      : valueAsString,
+                }))
+              } else {
+                updateURL('categoryId', valueAsString)
+              }
+            }}
+          />
+        </div>
+      )}
+
+      {!isStatusFilterHidden && (
+        <div className='col'>
+          <Select
+            name='status'
+            label='Status to filter'
+            options={[
+              { label: 'All', value: 'all' },
+              { label: 'Live', value: EntityStatus.live },
+              { label: 'Draft', value: EntityStatus.draft },
+            ]}
+            control={control}
+            getValues={getValues}
+            onSelectChange={(value) => {
+              const valueAsString = value?.toString()
+              if (setSearchState) {
+                const nextStatus =
+                  !valueAsString || valueAsString === 'all'
+                    ? undefined
+                    : (valueAsString as EntityStatus)
+                setSearchState((prev) => ({
+                  ...prev,
+                  status: nextStatus,
+                }))
+              } else {
+                updateURL('status', valueAsString)
+              }
+            }}
+          />
+        </div>
+      )}
+
+      {type === 'product' && !isProductTypeFilterHidden && (
+        <div className='col'>
+          <Select
+            name='productType'
+            label='Product type'
+            options={productTypeOptions}
+            control={control}
+            getValues={getValues}
+            onSelectChange={(value) => {
+              const valueAsString = value?.toString()
+              // store in URL as ?type=...
+              if (setSearchState) {
+                setSearchState((prev) => ({
+                  ...prev,
+                  // if your SearchState has a field, map it here; otherwise just use URL
+                }))
+              }
+              // Always keep URL in sync for server queries
+              // "all" clears the filter
+              updateURL('type', valueAsString)
+            }}
+          />
+        </div>
+      )}
+    </form>
+  )
+}
+
+export default TableFilter

package/src/components/common/table/TableHeader.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Button from '@components/common/button/Button'
+
+export const TableHeader = ({
+	title,
+	onButtonClick,
+	icon = 'bi bi-plus',
+	extraLink,
+}: {
+	title: string
+	onButtonClick?: () => void
+	icon?: string
+	extraLink?: JSX.Element
+}) => {
+	return (
+		<div className='d-flex align-items-center justify-content-between my-4 w-100'>
+			<h2 className='h3 mb-0'>{title}</h2>
+			<div className='pe-0 d-flex justify-content-end align-items-center gap-3'>
+				{extraLink}
+				{onButtonClick && (
+					<Button
+						type='button'
+						className='no-min-size w-xs-80p rounded-xl h-50 text-white fw-bold'
+						color='primary'
+						onClick={onButtonClick}
+					>
+						<i className={icon}></i>
+					</Button>
+				)}
+			</div>
+		</div>
+	)
+}