@spacemade/ui 0.0.1

package/src/pages/openapi/index.tsx

@@ -0,0 +1,77 @@
+// pages/u/[username]/api-docs.tsx
+import type { GetServerSideProps, NextPage } from 'next'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { useRouter } from 'next/router'
+import 'swagger-ui-react/swagger-ui.css'
+import { PageProps } from '@helpers/types/page-props'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+
+// Disable SSR for Swagger UI
+const SwaggerUI = dynamic(() => import('swagger-ui-react'), { ssr: false })
+
+const SPEC_URL = process.env.NEXT_PUBLIC_OPENAPI_JSON_URL || '/api/docs'
+
+const ApiDocsPage: NextPage<PageProps> = () => {
+  const router = useRouter()
+  const isApiTokens = router.pathname.startsWith('/u/me/api-tokens')
+
+  const swaggerUiStyles = useMemo(
+    () => ({
+      background: 'transparent',
+      minHeight: '70vh',
+      borderRadius: '12px',
+      padding: '8px',
+      width: '100%',
+      fontSize: '14px'
+    }),
+    []
+  )
+
+  return (
+    <SideNavLayout
+      sidebarContent={(isCollapsed /*, setIsCollapsed */) => (
+        <>
+          <h2 className="mt-5 sidebar-heading">API</h2>
+          <ul className="sidebar-list">
+            <li
+              className={`sidebar-item ${isApiTokens ? 'active' : ''}`}
+              title="API Tokens"
+              role="button"
+            >
+              <Link href="/openapi/tokens" className="sidebar-link">
+                <i className="bi bi-key" aria-hidden />
+                {!isCollapsed && <span className="ms-2">API Tokens</span>}
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+    >
+      <div style={swaggerUiStyles}>
+        <SwaggerUI
+          url={SPEC_URL}
+          docExpansion="list"
+          defaultModelsExpandDepth={1}
+          defaultModelExpandDepth={1}
+          tryItOutEnabled
+          displayOperationId
+          deepLinking
+        />
+      </div>
+
+      {/* CSS override to neutralize scheme-container block */}
+      <style jsx global>{`
+        .swagger-ui .scheme-container {
+          background: unset !important;
+          box-shadow: unset !important;
+        }
+      `}</style>
+    </SideNavLayout>
+  )
+}
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: { pageTitle: 'API Docs' },
+})
+export default ApiDocsPage;

package/src/pages/openapi/tokens/index.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import ApiTokenCreateModal from '@components/openapi/actions/ApiTokenCreateModal'
+import ApiTokenActions from '@components/openapi/actions/ApiTokenActionsMenu'
+import {
+  useGetApiTokensQuery,
+  useCreateApiTokenMutation,
+} from '@store/slice/api/apiTokenSlice'
+
+export default function TokensPage() {
+  const router = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  /** ✅ RTK Query hooks */
+  const { data: list = [], isLoading, refetch } = useGetApiTokensQuery()
+  const [createToken] = useCreateApiTokenMutation()
+
+  const [justCreated, setJustCreated] = useState<{ id: string; token: string } | null>(null)
+  const [showToken, setShowToken] = useState(false)
+
+  const handleCreate = async (name: string) => {
+    const res = await createToken({ name, scopes: ['projects.read'], expiresAt: null }).unwrap()
+    setJustCreated({ id: res.id, token: (res as any).token })
+    setShowToken(false)
+    onClose()
+  }
+
+  return (
+    <SideNavLayout
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">API</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title="Back to API">
+              <Link href="/openapi" className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+      renderMainNav={() => null}
+    >
+      <div className="mt-5 w-100">
+        <div className="d-flex justify-content-between align-items-center mb-4">
+          <h2 className="mb-0">API Tokens</h2>
+          <button onClick={onOpen} className="btn btn-primary rounded-pill fw-bold px-4">+</button>
+        </div>
+
+        {justCreated && (
+          <div className="alert alert-warning mb-4">
+            <div className="fw-bold mb-2">
+              <i className="bi bi-exclamation-triangle-fill me-2"></i>
+              Copy your new token now — you won&apos;t see it again:
+            </div>
+            <div className="position-relative mb-2">
+              <code className="d-block p-3 bg-white rounded pe-5" style={{ userSelect: showToken ? 'all' : 'none' }}>
+                {showToken ? justCreated.token : '••••••••••••••••••••••••••••••••••••••••'}
+              </code>
+              <button
+                className="btn btn-sm btn-link position-absolute top-50 end-0 translate-middle-y text-dark"
+                onClick={() => setShowToken(!showToken)}
+                style={{ textDecoration: 'none', paddingRight: '0.75rem' }}
+                title={showToken ? 'Hide token' : 'Show token'}
+              >
+                <i className={`bi ${showToken ? 'bi-eye-slash-fill' : 'bi-eye-fill'}`}></i>
+              </button>
+            </div>
+            <button
+              className="btn btn-sm btn-dark"
+              onClick={() => {
+                navigator.clipboard.writeText(justCreated.token)
+                setJustCreated(null)
+                setShowToken(false)
+              }}
+            >
+              <i className="bi bi-clipboard me-2"></i>Copy & Dismiss
+            </button>
+          </div>
+        )}
+
+        <div style={{ overflowX: 'auto' }}>
+          {isLoading ? (
+            <div className="text-center py-5">
+              <div className="spinner-border" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </div>
+            </div>
+          ) : (
+            <table className="table table-hover align-middle">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Status</th>
+                  <th>Expires</th>
+                  <th className="text-end">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {list.map((t) => (
+                  <tr key={t.id}>
+                    <td><strong>{t.name}</strong></td>
+                    <td>
+                      {t.revokedAt ? (
+                        <span className="badge bg-danger">Inactive</span>
+                      ) : (
+                        <span className="badge bg-success">Active</span>
+                      )}
+                    </td>
+                    <td>{t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : '—'}</td>
+                    <td className="text-end">
+                      <ApiTokenActions token={t} onUpdate={refetch} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        <ApiTokenCreateModal isOpen={isOpen} onClose={onClose} onCreate={handleCreate} />
+      </div>
+    </SideNavLayout>
+  )
+}

package/src/pages/org/[name]/settings.tsx

@@ -0,0 +1,14 @@
+import type { GetServerSideProps, NextPage } from 'next'
+import WithAuth from '@components/hoc/WithAuth'
+import { OrgJumpRedirect } from '@components/orgs/OrgJumpRedirect'
+import { PageProps } from '@helpers/types/page-props'
+
+const OrgSettingsJumpPage: NextPage<PageProps> = () => {
+  return <OrgJumpRedirect />
+}
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+  pageTitle: 'Organization Settings',
+},
+})
+export default WithAuth(OrgSettingsJumpPage)

package/src/pages/org/[name]/token/index.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+
+import { WithReCaptcha } from '@components/hoc/WithReCaptcha'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import InvalidInviteCard from '@components/common/state/InvalidInviteCard'
+import { PageProps } from '@helpers/types/page-props'
+import { useAcceptOrgInviteMutation } from '@store/slice/api/orgApiSlice'
+import { UserTokenAction } from '@store/slice/api/authApiSlice'
+
+type OrgInviteProps = PageProps & {
+  isValid: boolean
+  token?: string
+  orgId?: string
+}
+
+const OrgInvite: NextPage<OrgInviteProps> = WithReCaptcha(
+  ({ isValid, token, orgId }) => {
+    const router = useRouter()
+    const [hasError, setHasError] = useState(false)
+
+    const [acceptInvite, { isLoading }] = useAcceptOrgInviteMutation()
+    const hasRunRef = useRef(false)
+
+    useEffect(() => {
+      if (!isValid || !token || !orgId) {
+        setHasError(true)
+        return
+      }
+
+      if (hasRunRef.current) return
+      hasRunRef.current = true
+
+      const consumeInvite = async () => {
+        try {
+          const response = await acceptInvite({
+            token,
+            orgId,
+          }).unwrap()
+
+          if (response.needsProfileUpdate) {
+            const query = new URLSearchParams({
+              token,
+              action: UserTokenAction.org_invite,
+              orgId,
+            })
+            router.replace(`/update?${query.toString()}`)
+            return
+          }
+
+          router.replace(`/org/${encodeURIComponent(orgId)}/settings`)
+        } catch (err: any) {
+          setHasError(true)
+          toast.error(err?.data?.message ?? 'Unable to accept invite')
+        }
+      }
+
+      consumeInvite()
+    }, [isValid, token, orgId, acceptInvite, router])
+
+    if (isLoading) return <LoadingScreen />
+
+    if (hasError) return <InvalidInviteCard />
+    return <LoadingScreen />
+  }
+)
+
+export default OrgInvite
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { name } = context.query
+  const tokenParam = context.query.token
+
+  const token =
+    typeof tokenParam === 'string'
+      ? tokenParam
+      : Array.isArray(tokenParam)
+        ? tokenParam[0]
+        : undefined
+
+  const orgIdStr =
+    typeof name === 'string'
+      ? name
+      : Array.isArray(name)
+        ? name[0]
+        : undefined
+
+  if (!token || !orgIdStr) {
+    return {
+      props: {
+        pageTitle: 'Org Invite',
+        isValid: false,
+        excludeTopNav: true,
+      },
+    }
+  }
+
+  return {
+    props: {
+      pageTitle: 'Org Invite',
+      isValid: true,
+      token,
+      orgId: orgIdStr,
+      excludeTopNav: true,
+    },
+  }
+}

package/src/pages/pricing.tsx

@@ -0,0 +1,242 @@
+// pages/pricing.tsx
+'use client';
+
+import type { NextPage } from 'next';
+import Link from 'next/link';
+import SideNavLayout from '@components/common/layout/SideNavLayout';
+import { wrapper } from '@store/store';
+import {
+  getProducts,
+  useGetProductsQuery,
+  getRunningQueriesThunk,
+} from '@store/slice/api/productsApiSlice';
+import { PageProps } from '@helpers/types/page-props';
+import { AddOnRow } from '@components/pricing/block/AddOnRow';
+import { useGetSubscriptionQuery } from '@store/slice/api/stripeApiSlice';
+import { Product, ProductPlan, ProductType } from '@store/model';
+import { useUserAuthContext } from '@context';
+import { useMemo } from 'react';
+import ProductPricingCard from '@components/pricing/card/PricingCard';
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice';
+
+const getPlanAmount = (plan?: Partial<ProductPlan> & { price?: { unitAmount?: number } }): number => {
+  if (!plan) return Number.POSITIVE_INFINITY;
+  const amt = (plan as any)?.amount;
+  if (typeof amt === 'number') return amt;                // dollars
+  if (typeof amt === 'string') {
+    const n = Number(amt);
+    return Number.isNaN(n) ? Number.POSITIVE_INFINITY : n; // dollars
+  }
+  const unitAmount = plan?.price?.unitAmount;              // cents
+  if (typeof unitAmount === 'number') return unitAmount / 100;
+  return Number.POSITIVE_INFINITY;
+};
+
+const minProductPrice = (p: Product): number => {
+  const plans = Array.isArray((p as any)?.plans) ? ((p as any).plans as ProductPlan[]) : [];
+  if (plans.length === 0) return Number.POSITIVE_INFINITY;
+  return plans.reduce((min, pl) => Math.min(min, getPlanAmount(pl)), Number.POSITIVE_INFINITY);
+};
+
+const Pricing: NextPage<PageProps> = () => {
+  const { activeOrgId, isConnected } = useUserAuthContext();
+  const { data: orgMemberships } = useListOrgsQuery();
+
+  const isBusinessOrg = useMemo(() => {
+    if (!orgMemberships || !activeOrgId) return false;
+    const membership = orgMemberships.find((m) => m.orgId === activeOrgId);
+    return membership?.org?.orgType === 'business';
+  }, [orgMemberships, activeOrgId]);
+
+  // Add-ons
+  const { data: addOnProducts } = useGetProductsQuery({
+    isAdmin: false,
+    type: ProductType.AddOn,
+  });
+  const addOnList = addOnProducts?.results ?? [];
+  const hasAddOns = addOnList.length > 0;
+
+  // Subscription products (+plans, +plan.usageTiers, +product.featureEntitlements)
+  // Business orgs see business plans (is_public=false), personal orgs see personal plans (is_public=true)
+  const { data: subscriptionProducts } = useGetProductsQuery({
+    isAdmin: false,
+    type: ProductType.Plan,
+    include: ['plans', 'plans.usageTiers', 'featureEntitlements'],
+    orderBy: 'rank',
+    sort: 'asc',
+    isPublic: !isBusinessOrg,
+  });
+
+  const products: Product[] = useMemo(() => {
+    const list = subscriptionProducts?.results ?? [];
+    const visible = list
+      .filter((p) => {
+        const isPublic = typeof p.isPublic === 'boolean' ? p.isPublic : true;
+        return isBusinessOrg ? !isPublic : isPublic;
+      })
+      .map((product) => {
+        if (!isBusinessOrg) return product;
+        const plans = Array.isArray((product as any)?.plans) ? ((product as any).plans as ProductPlan[]) : [];
+        const filteredPlans = plans.filter((plan: any) => !plan?.isDefaultPlanForUsers);
+        return {
+          ...product,
+          plans: filteredPlans,
+        };
+      })
+      .filter((product) => {
+        const plans = Array.isArray((product as any)?.plans) ? (product as any).plans : [];
+        return plans.length > 0;
+      });
+
+    // Sort by cheapest plan first (0, then 1, 2, ...; products without plans go last)
+    return visible
+      .slice()
+      .sort((a, b) => {
+        const aMin = minProductPrice(a);
+        const bMin = minProductPrice(b);
+        if (aMin !== bMin) return aMin - bMin;
+        // tie-breakers: by product.rank then name
+        const ar = (a as any)?.rank ?? 9999;
+        const br = (b as any)?.rank ?? 9999;
+        if (ar !== br) return ar - br;
+        return (a.name || '').localeCompare(b.name || '');
+      });
+  }, [subscriptionProducts, isBusinessOrg]);
+
+  // NEW: derive current platform subscription from array shape
+  const { data: subscriptionData } = useGetSubscriptionQuery();
+  const subscriptionsArr = Array.isArray((subscriptionData as any)?.subscriptions)
+    ? (subscriptionData as any).subscriptions
+    : [];
+
+  const primarySub = useMemo(() => {
+    return (
+      subscriptionsArr.find(
+        (s: any) =>
+          (s?.status === 'active' || s?.status === 'trialing') &&
+          Array.isArray(s?.productPlans) &&
+          s.productPlans.some((p: any) => (p?.product?.type ?? p?.type) === 'plan')
+      ) ?? null
+    );
+  }, [subscriptionsArr]);
+
+  // Current plan price in DOLLARS (amount is cents in your payload)
+  const currentPriceDollars: number = useMemo(() => {
+    if (!primarySub) return 0;
+    const cents = typeof primarySub.amount === 'number'
+      ? primarySub.amount
+      : Number(primarySub.amount ?? 0);
+    return (Number.isFinite(cents) ? cents : 0) / 100;
+  }, [primarySub]);
+
+  // The current plan's product slug.
+  const currentProductSlug: string | null = useMemo(() => {
+    if (!primarySub) return null;
+    const plan = (primarySub.productPlans || [])[0];
+    const product = plan?.product ?? null;
+    return product?.slug ? String(product.slug).toLowerCase() : null;
+  }, [primarySub]);
+
+  const hasAnySubscription = !!primarySub;
+
+  const backHref = '/settings/subscriptions';
+
+  return (
+    <SideNavLayout
+      sidebarTopContent={(_isCollapsed, _setIsCollapsed) => (
+        <>
+          <h2 className="sidebar-heading">Subscriptions</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title="Back to Projects">
+              <Link href={backHref} className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+      renderMainNav={() => null}
+    >
+      <div className="container">
+        <div className="mx-auto text-center pt-8">
+          <h1 className="fw-bold mb-0">{isConnected ? 'Subscriptions' : 'Pricing'}</h1>
+        </div>
+        <div className="mw-lg-1220p mx-auto">
+          {/* One card per PRODUCT, with its plans inside */}
+          <div className="row mt-5">
+            {products.map((product) => (
+              <div key={product.id} className="col-md-4">
+                <ProductPricingCard
+                  product={product}
+                  // price-driven selection inputs:
+                  hasAnySubscription={hasAnySubscription}
+                  currentPriceDollars={currentPriceDollars}
+                  currentProductSlug={currentProductSlug}
+                />
+              </div>
+            ))}
+          </div>
+
+          {/* Add-ons (hidden if none) */}
+          {hasAddOns && (
+            <>
+              <h2 className="mt-6">Add-ons</h2>
+              <hr className="text-light-gray opacity-100 mb-4 mt-1 pt-2" />
+              {addOnList.map((product, key) => (
+                <AddOnRow key={product.id ?? key} product={product} />
+              ))}
+            </>
+          )}
+
+          {!isConnected && (
+            <>
+              {/* <div className="row justify-content-center">
+                <div className="col-lg-6 text-center">
+                  <h2 className="mt-5">Need more capacity? Go Enterprise.</h2>
+                  <p>
+                    Looking for a solution with real enterprise scale and dedicated support? Talk to one of
+                    our AI specialists about a custom package.
+                  </p>
+                  <Link href="" className="btn btn-pink text-white rounded-0 w-xs-200p py-2 mt-4">
+                    Contact Us
+                  </Link>
+                </div>
+              </div> */}
+            </>
+          )}
+        </div>
+      </div>
+    </SideNavLayout>
+  );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps((store) => async () => {
+  // Prefetch add-ons
+  store.dispatch(
+    getProducts.initiate({
+      type: ProductType.AddOn,
+    })
+  );
+
+  // Prefetch subscription products with nested includes
+  store.dispatch(
+    getProducts.initiate({
+      type: ProductType.Plan,
+      include: ['plans', 'plans.usageTiers', 'featureEntitlements'],
+      orderBy: 'rank',
+      sort: 'asc',
+    })
+  );
+
+  await Promise.all(store.dispatch(getRunningQueriesThunk()));
+
+  return {
+    props: {
+      pageTitle: 'Pricing',
+      includeSmallFooter: true,
+      excludeBottomNav: true,
+    },
+  };
+});
+
+export default Pricing;

package/src/pages/projects/[projectId]/[name]/files/index.tsx

@@ -0,0 +1,121 @@
+import { useMemo } from 'react'
+import type { NextPage, GetServerSideProps } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import WithAuth from '@components/hoc/WithAuth'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import Spinner from '@components/common/loading/Spinner'
+
+import { APIHelpers } from '@helpers/api'
+import { createProjectSlug } from '@helpers/slugUtils'
+
+import { ProjectProvider, useProjectContext } from '@context/ProjectContext'
+import ProjectFileGrid from '@components/projects/actions/ProjectFileGrid'
+
+const asStr = (v: string | string[] | undefined) =>
+    Array.isArray(v) ? v[0] : v
+
+const ProjectFilesInner: NextPage = () => {
+    const router = useRouter()
+    const projectId = asStr(router.query.projectId)
+    const slugUrl = asStr(router.query.name) || ''
+
+    const { project, isProjectError } = useProjectContext()
+
+    const projectSlug = useMemo(
+        () =>
+            project?.name
+                ? createProjectSlug(project.name)
+                : slugUrl || 'project',
+        [project?.name, slugUrl]
+    )
+
+    if (!projectId) return null
+
+    if (isProjectError || !project) {
+        return (
+            <SideNavLayout renderMainNav={() => null}>
+                <div className="text-danger p-4">Failed to load project</div>
+            </SideNavLayout>
+        )
+    }
+
+    return (
+        <SideNavLayout
+            renderMainNav={() => null}
+            sidebarTopContent={() => (
+                <>
+                    <h2 className="sidebar-heading">Projects</h2>
+                    <ul className="sidebar-list mb-5">
+                        <li className="sidebar-item">
+                            <Link
+                                href={`/projects/${project.id}/${projectSlug}`}
+                                className="sidebar-link"
+                            >
+                                <i className="bi bi-arrow-left" /> <span>Back</span>
+                            </Link>
+                        </li>
+                    </ul>
+                </>
+            )}
+            sidebarContent={() => null}
+        >
+            <div className="container-fluid px-4">
+                <h3 className="mb-4">Files</h3>
+                <ProjectFileGrid projectId={projectId} />
+            </div>
+        </SideNavLayout>
+    )
+}
+
+const ProjectFilesPage: NextPage = () => {
+    const router = useRouter()
+    const projectId = asStr(router.query.projectId)
+    if (!projectId) return null
+
+    return (
+        <ProjectProvider projectId={projectId}>
+            <ProjectFilesInner />
+        </ProjectProvider>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+    const cookie = ctx.req.headers.cookie || ''
+    const { projectId, name } = ctx.query
+
+    const auth = await APIHelpers.get('/auth/user', { Cookie: cookie })
+    if (!auth?.user) {
+        return { redirect: { destination: '/login', permanent: false } }
+    }
+
+    const data = await APIHelpers.get(`/projects/${projectId}`, {
+        Cookie: cookie,
+    })
+
+    const project = (data as any)?.project || (data as any)?.data
+    if (!project) {
+        return { redirect: { destination: '/projects', permanent: false } }
+    }
+
+    const canonicalSlug = createProjectSlug(project.name || '')
+    const requestedSlug = typeof name === 'string' ? name : name?.[0]
+
+    if (requestedSlug !== canonicalSlug) {
+        return {
+            redirect: {
+                destination: `/projects/${projectId}/${canonicalSlug}/files`,
+                permanent: false,
+            },
+        }
+    }
+
+    return {
+        props: {
+            pageTitle: `${project.name} – Files`,
+        },
+    }
+}
+
+export default WithAuth(ProjectFilesPage)