@spacemade/ui 0.0.1

package/src/pages/sites/[siteId]/[siteName]/pages/[pageId].tsx

@@ -0,0 +1,243 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { FieldValues, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import { IconPicker } from '@components/common/forms/IconPicker'
+import dynamic from 'next/dynamic'
+import WithAuth from '@components/hoc/WithAuth'
+import Spinner from '@components/common/loading/Spinner'
+import { EntityStatus } from '@store/model'
+import { useGetOnePageQuery, useGetPageTreeQuery, useUpdatePageMutation } from '@store/slice/api/pageApiSlice'
+import { useWatch } from 'react-hook-form'
+
+const HTMLEditor = dynamic(() => import('@components/common/forms/HTMLEditor'), { ssr: false })
+
+interface FormValues extends FieldValues {
+  name: string
+  slug: string
+  parentId: string
+  intro: string
+  content: string
+  icon: string
+  sortOrder: number
+  status: string
+  isHomepage: boolean
+}
+
+const SitePageDetail = () => {
+  const router = useRouter()
+  const siteId = router.query.siteId?.toString() || ''
+  const siteName = router.query.siteName?.toString() || ''
+  const pageId = router.query.pageId?.toString() || ''
+  const isDocsRoute = router.pathname.startsWith('/docs/')
+  const previewBasePath = isDocsRoute
+    ? `/docs/sites/${siteId}/${siteName}/preview`
+    : `/sites/${siteId}/${siteName}`
+
+  const { data: page, isLoading } = useGetOnePageQuery({ id: pageId }, { skip: !pageId })
+  const { data: treeData } = useGetPageTreeQuery({ siteId }, { skip: !siteId })
+  const [updatePage, { isLoading: isSaving }] = useUpdatePageMutation()
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    getValues,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      slug: '',
+      parentId: '',
+      intro: '',
+      content: '',
+      icon: '',
+      sortOrder: 0,
+      status: EntityStatus.draft,
+      isHomepage: false,
+    },
+  })
+  const contentValue = useWatch({ control, name: 'content' }) || ''
+
+  useEffect(() => {
+    if (!page) return
+    reset({
+      name: page.name,
+      slug: page.slug,
+      parentId: page.parentId || '',
+      intro: page.intro || '',
+      content: page.content || '',
+      icon: page.icon || '',
+      sortOrder: page.sortOrder || 0,
+      status: page.status,
+      isHomepage: page.isHomepage,
+    })
+  }, [page, reset])
+
+  const flattenOptions = (items: any[], depth = 0): { label: string; value: string }[] =>
+    items.flatMap((item) => [
+      {
+        label: `${'— '.repeat(depth)}${item.name}`,
+        value: item.id,
+      },
+      ...flattenOptions((item.children || []).filter((child: any) => child.id !== pageId), depth + 1),
+    ])
+
+  const parentOptions = [
+    { label: 'Root', value: '' },
+    ...flattenOptions((treeData?.results || []).filter((item: any) => item.id !== pageId)),
+  ]
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      await updatePage({
+        payload: {
+          id: pageId,
+          siteId,
+          name: data.name,
+          slug: data.slug,
+          parentId: data.parentId || null,
+          intro: data.intro || null,
+          content: data.content || null,
+          icon: data.icon || null,
+          sortOrder: Number(data.sortOrder || 0),
+          status: data.status as EntityStatus,
+          isHomepage: Boolean(data.isHomepage),
+        },
+      }).unwrap()
+      toast.success('Page saved')
+    } catch (error: any) {
+      toast.error(error?.data?.message || 'Failed to save page')
+    }
+  }
+
+  if (isLoading || !page) {
+    return (
+      <AdminLayout>
+        <div className="py-5 d-flex justify-content-center">
+          <Spinner color="primary" />
+        </div>
+      </AdminLayout>
+    )
+  }
+
+  return (
+    <AdminLayout>
+      <div className="d-flex justify-content-between align-items-center">
+        <AppPageTitle title={`Update Page: ${page.name}`} />
+        <Link href={`${previewBasePath}${page.isHomepage ? '' : `/${page.slug}`}`} className="small">
+          Open preview
+        </Link>
+      </div>
+
+      <form className="mt-4" onSubmit={handleSubmit(onSubmit)}>
+        <div className="row g-4">
+          <div className="col-md-6">
+            <Input
+              register={register('name', { required: 'Name is required' })}
+              errors={errors}
+              label="Name"
+              placeholder="Page name"
+              getValues={getValues}
+            />
+          </div>
+          <div className="col-md-6">
+            <Input
+              register={register('slug', { required: 'Slug is required' })}
+              errors={errors}
+              label="Slug"
+              placeholder="page-slug"
+              getValues={getValues}
+            />
+          </div>
+          <div className="col-md-6">
+            <Select
+              name="parentId"
+              control={control}
+              options={parentOptions}
+              label="Parent"
+              getValues={getValues}
+              setFirstAsDefault={false}
+            />
+          </div>
+          <div className="col-md-3">
+            <Input
+              register={register('sortOrder')}
+              errors={errors}
+              label="Order"
+              type="number"
+              getValues={getValues}
+            />
+          </div>
+          <div className="col-md-3">
+            <Select
+              name="status"
+              control={control}
+              options={[
+                { label: 'Draft', value: EntityStatus.draft },
+                { label: 'Live', value: EntityStatus.live },
+              ]}
+              label="Status"
+              getValues={getValues}
+              setFirstAsDefault={false}
+            />
+          </div>
+          <div className="col-md-6">
+            <label className="d-block mb-2">Icon</label>
+            <IconPicker register={register('icon')} control={control} setValue={setValue} />
+          </div>
+          <div className="col-md-6 d-flex align-items-center">
+            <div className="form-check mt-4">
+              <input className="form-check-input" type="checkbox" {...register('isHomepage')} id="isHomepage" />
+              <label className="form-check-label" htmlFor="isHomepage">
+                Use as homepage for this site
+              </label>
+            </div>
+          </div>
+          <div className="col-12">
+            <Textarea
+              register={register('intro')}
+              errors={errors}
+              label="Intro"
+              placeholder="Short summary shown above the body"
+              getValues={getValues}
+            />
+          </div>
+          <div className="col-12">
+            <HTMLEditor
+              name="content"
+              value={contentValue}
+              labelText="Content"
+              onChange={(value) => setValue('content', value, { shouldDirty: true })}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <Button type="submit" color="primary" className="text-white" isLoading={isSaving} disabled={isSaving}>
+            Save Page
+          </Button>
+        </div>
+      </form>
+    </AdminLayout>
+  )
+}
+
+export const getInitialProps = async () => ({
+  pageTitle: 'Update Site Page',
+  isAppNav: true,
+  showDetailTopNav: true,
+})
+
+SitePageDetail.getInitialProps = getInitialProps
+
+export default WithAuth(SitePageDetail)

package/src/pages/sites/[siteId]/[siteName]/pages/index.tsx

@@ -0,0 +1,140 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { toast } from 'react-toastify'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import WithAuth from '@components/hoc/WithAuth'
+import { transformToURLFormat } from '@helpers/string'
+import { useCreatePageMutation, useDeletePageMutation, useGetPageTreeQuery } from '@store/slice/api/pageApiSlice'
+
+const flatten = (items: any[], depth = 0): Array<any & { depth: number }> =>
+  items.flatMap((item) => [
+    { ...item, depth },
+    ...flatten(item.children || [], depth + 1),
+  ])
+
+const SitePagesIndex = () => {
+  const router = useRouter()
+  const siteId = router.query.siteId?.toString() || ''
+  const siteName = router.query.siteName?.toString() || ''
+
+  const { data, isLoading, isFetching } = useGetPageTreeQuery(
+    { siteId },
+    { skip: !siteId }
+  )
+  const [createPage, { isLoading: isCreating }] = useCreatePageMutation()
+  const [deletePage, { isLoading: isDeleting }] = useDeletePageMutation()
+
+  const rows = useMemo(() => flatten(data?.results || []), [data?.results])
+
+  const handleCreatePage = async () => {
+    try {
+      const baseName = 'New Page'
+      const created = await createPage({
+        payload: {
+          siteId,
+          slug: transformToURLFormat(`${baseName}-${Date.now().toString().slice(-5)}`),
+          name: baseName,
+          intro: '',
+          content: '<p>Describe exactly what the user sees on this screen.</p>',
+        },
+      }).unwrap()
+      await router.push(`/sites/${siteId}/${siteName}/pages/${created.id}`)
+    } catch (error: any) {
+      toast.error(error?.data?.message || 'Failed to create page')
+    }
+  }
+
+  const handleDeletePage = async (id: string) => {
+    if (!window.confirm('Delete this page and its children?')) return
+    try {
+      await deletePage({ id, siteId }).unwrap()
+      toast.success('Page deleted')
+    } catch (error: any) {
+      toast.error(error?.data?.message || 'Failed to delete page')
+    }
+  }
+
+  return (
+    <AdminLayout>
+      <div className="d-flex justify-content-between align-items-center">
+        <AppPageTitle title={`Pages: ${siteName}`} />
+        <Button color="primary" className="text-white" onClick={handleCreatePage} disabled={!siteId || isCreating}>
+          Create Page
+        </Button>
+      </div>
+
+      <div className="mt-3">
+        <Link href={`/sites/${siteId}/${siteName}`} className="small">
+          View site preview
+        </Link>
+      </div>
+
+      {isLoading || isFetching ? (
+        <div className="py-5 d-flex justify-content-center">
+          <Spinner color="primary" />
+        </div>
+      ) : (
+        <div className="table-responsive mt-4">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Slug</th>
+                <th>Status</th>
+                <th>Icon</th>
+                <th>Order</th>
+                <th className="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((page) => (
+                <tr key={page.id}>
+                  <td>
+                    <Link href={`/sites/${siteId}/${siteName}/pages/${page.id}`}>
+                      <span style={{ paddingLeft: `${page.depth * 18}px` }}>
+                        {page.depth > 0 ? '↳ ' : ''}
+                        {page.name}
+                      </span>
+                    </Link>
+                  </td>
+                  <td>{page.slug}</td>
+                  <td>{page.status}</td>
+                  <td>{page.icon ? <i className={`bi bi-${page.icon}`} /> : '—'}</td>
+                  <td>{page.sortOrder}</td>
+                  <td className="text-end">
+                    <Button
+                      className="no-min-size border-light-gray"
+                      onClick={() => handleDeletePage(page.id)}
+                      disabled={isDeleting}
+                    >
+                      <span className="bi bi-trash" />
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+              {rows.length === 0 && (
+                <tr>
+                  <td colSpan={6} className="text-center py-5 text-muted">
+                    No pages yet.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </AdminLayout>
+  )
+}
+
+SitePagesIndex.getInitialProps = async () => ({
+  pageTitle: 'Site Pages',
+  isAppNav: true,
+  showDetailTopNav: true,
+})
+
+export default WithAuth(SitePagesIndex)

package/src/pages/sites/host/[[...slug]].tsx

@@ -0,0 +1,75 @@
+import type { GetServerSideProps } from 'next'
+import SiteContentPage, { type SiteTreeNode } from '@components/page/SiteContentPage'
+
+type RenderProps = {
+  pageTitle: string
+  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
+}
+
+const SiteHostPage = ({ site, page, tree, previous, next, currentPath }: RenderProps) => (
+  <SiteContentPage
+    site={site}
+    page={page}
+    tree={tree}
+    previous={previous}
+    next={next}
+    currentPath={currentPath}
+    basePath=""
+  />
+)
+
+const getCurrentOrigin = (context: Parameters<GetServerSideProps>[0]) => {
+  const host = String(context.req.headers['x-forwarded-host'] || context.req.headers.host || '')
+  const forwardedProto = String(context.req.headers['x-forwarded-proto'] || '').toLowerCase()
+  const isLocal = host.includes('localhost') || host.includes('127.0.0.1')
+  const proto = forwardedProto === 'http' || isLocal ? 'http' : 'https'
+  return `${proto}://${host}`
+}
+
+const buildHrefMap = (nodes: any[], parent = ''): Map<string, string> => {
+  const map = new Map<string, string>()
+  for (const node of nodes || []) {
+    const current = node.slug ? `${parent}/${node.slug}` : parent || '/'
+    map.set(node.id, current || '/')
+    const nested = buildHrefMap(node.children || [], current === '/' ? '' : current)
+    nested.forEach((value, key) => map.set(key, value))
+  }
+  return map
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const slug = Array.isArray(context.query.slug) ? context.query.slug.join('/') : ''
+  const response = await fetch(
+    `${getCurrentOrigin(context)}/api/pages/render?slugPath=${encodeURIComponent(slug)}`,
+    {
+      headers: {
+        Accept: 'application/json',
+        Cookie: context.req.headers.cookie || '',
+      },
+    }
+  )
+  const data = await response.json()
+
+  if ((data as any)?.error || !(data as any)?.page) return { notFound: true }
+  const hrefMap = buildHrefMap(data.tree)
+
+  return {
+    props: {
+      pageTitle: data.page.name,
+      site: data.site,
+      page: data.page,
+      tree: data.tree,
+      previous: data.previous ? { href: hrefMap.get(data.previous.id) || '/', name: data.previous.name } : null,
+      next: data.next ? { href: hrefMap.get(data.next.id) || '/', name: data.next.name } : null,
+      currentPath: slug ? `/${slug}` : '/',
+      includeSmallFooter: true,
+    },
+  }
+}
+
+export default SiteHostPage