Project Module

import { OnboardingProject } from '@statisfy/portal-react'

<OnboardingProject configId="onboarding" className="dw-max-w-3xl" />

import { ProjectModule } from '@statisfy/portal-react'

// Inside a portal: configId names the config slot; Settings holds the pinned project id.
<ProjectModule configId="pinned-project" className="dw-max-w-3xl" />

// Outside a portal: pass the project id directly.
<ProjectModule projectId="1102" />

import { useProject } from '@statisfy/portal-react'

function MyProjectView() {
  const {
    project, tasks, milestones, tasksByParent,
    schema, tasksSchema, progress, canEdit,
    loading, error,
    updateTask, updateProject, reload
  } = useProject() // pass a projectId to skip config resolution

  if (loading) return <Spinner />
  if (error) return <button onClick={reload}>Retry ({error.message})</button>
  if (!project) return null

  return (
    <div>
      <h2>{project.display.title}</h2>
      {progress && <p>{progress.completed}/{progress.total} complete</p>}
      {tasks.map((t) => (
        <label key={t.id}>
          {t.display.title}
          {canEdit && (
            <input
              type="checkbox"
              checked={t.status === 'COMPLETED'}
              onChange={(e) =>
                updateTask(t.id, { status: e.target.checked ? 'COMPLETED' : 'TODO' })
              }
            />
          )}
        </label>
      ))}
    </div>
  )
}

import {
  useProject, ProjectHeader, ProjectProgress, MilestoneJourney, TaskList, TaskDetail,
  type ProjectTask
} from '@statisfy/portal-react'
import { useState } from 'react'

function CustomProject() {
  const {
    project, milestones, tasksByParent, tasksSchema, progress, canEdit, updateTask
  } = useProject()
  const [selected, setSelected] = useState<ProjectTask | null>(null)

  if (!project) return null

  return (
    <section>
      <ProjectHeader project={project} />
      <ProjectProgress progress={progress} />
      <MilestoneJourney milestones={milestones} tasksSchema={tasksSchema} />
      <TaskList
        milestones={milestones}
        tasksByParent={tasksByParent}
        tasksSchema={tasksSchema}
        canEdit={canEdit}
        onSelectTask={setSelected}
      />
      {selected && (
        <TaskDetail
          projectId={project.id}
          task={selected}
          tasksSchema={tasksSchema}
          canEdit={canEdit}
          onUpdate={(properties) => updateTask(selected.id, properties)}
          onClose={() => setSelected(null)}
        />
      )}
    </section>
  )
}

import { Comments, useComments } from '@statisfy/portal-react'

// Pre-built thread: project-level, or task-scoped with taskId.
<Comments projectId={project.id} />
<Comments projectId={project.id} taskId={task.id} title="Task notes" />

// Or drive your own UI with the hook.
function MyThread({ projectId }: { projectId: string }) {
  const { comments, loading, error, posting, addComment, reload } = useComments(projectId)
  if (error) return <button onClick={reload}>Retry ({error.message})</button>
  return (
    <ul>
      {comments.map((c) => <li key={c.id}>{c.value}</li>)}
      <button disabled={posting || loading} onClick={() => addComment('Looks good!')}>
        Comment
      </button>
    </ul>
  )
}

import { createProjectClient } from '@statisfy/portal-react'

const projects = createProjectClient({
  baseUrl: 'https://api.statisfy.com',
  getToken: async () => sessionToken,
  publishableKey: 'pk_live_your_key'
})

// Resolve the onboarding project id for the current customer
const config = await projects.getConfig('portal')
const projectId = String(config.data.onboarding_project__c_)

const { data, meta } = await projects.getProject(projectId)
console.log(data.display.title, meta.can_edit)

// Diff-update a task's status
await projects.patchTask(projectId, 'task-uuid', { status: 'COMPLETED' })

interface ProjectData {
  id: string
  properties: Record<string, unknown>   // canonical values
  display: Record<string, string>       // formatted strings for rendering
  schema: ProjectFieldSchema[]          // project-level fields
  progress: ProjectProgress | null
  tasks: ProjectTask[]
  tasks_schema: ProjectFieldSchema[]    // shared task-row fields
}

interface ProjectTask {
  id: string
  parent_id: string | null
  is_milestone: boolean
  status: string | null
  step_status: 'done' | 'current' | 'upcoming' | string
  properties: Record<string, unknown>
  display: Record<string, string>
}

interface ProjectProgress { percent: number | null; completed: number; total: number }
interface ProjectFieldSchema { key: string; label: string; type: ProjectFieldType; editable: boolean; options?: ProjectSelectOption[] }