@prenta/admin 1.5.1 → 1.6.1

package/src/components/RequestChangesDialog.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import { Modal } from './ui/Modal.js'
+import { Button } from './ui/Button.js'
+
+export function RequestChangesDialog({
+  open,
+  onClose,
+  onConfirm,
+}: {
+  open: boolean
+  onClose: () => void
+  onConfirm: (note: string) => void
+}) {
+  const [note, setNote] = useState('')
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Request changes"
+      description="Optional note for the author. The page returns to draft."
+      initialFocusRef={inputRef}
+      actions={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              onConfirm(note.trim())
+              setNote('')
+              onClose()
+            }}
+          >
+            Send back
+          </Button>
+        </>
+      }
+    >
+      <label className="text-foreground block text-sm font-medium" htmlFor="review-note">
+        Note
+      </label>
+      <textarea
+        id="review-note"
+        ref={inputRef}
+        value={note}
+        onChange={(e) => setNote(e.target.value)}
+        rows={4}
+        className="border-border bg-input-background mt-1 w-full rounded-md border px-3 py-2 text-sm"
+      />
+    </Modal>
+  )
+}

package/src/lib/page-audit-input.ts

@@ -95,7 +95,7 @@ export function withPostAuditSlots(sections: PageSection[], post?: PostAuditExtr
     })
   }
   const image = post.featuredImage?.trim() ?? ''
-  if (image) {
+  if (image && (image.startsWith('/') || /^https?:\/\//i.test(image))) {
     extras.push({
       id: POST_IMAGE_SECTION_ID,
       sectionType: 'feature',

package/src/lib/page-editor-service.ts

@@ -39,6 +39,7 @@ import {
 import { validateSlug } from '@prenta/core/client'
 
 import { missingCollectionFields } from './collection-schema.js'
+import { SUBMIT_BEFORE_PUBLISH_ERROR, type WorkflowStage } from './workflow-chrome.js'
 
 export type { PageSection } from '@prenta/core/page-sections'
 
@@ -68,6 +69,8 @@ export interface EditorPage {
   slug: string
   path: string
   status: PageStatus
+  workflowStage: WorkflowStage
+  reviewNote: string | null
   /**
    * Parent page for the tree hierarchy (`data.parentPageId`), or null for
    * a top-level page. Preselected when arriving via "Add sub-page"
@@ -186,6 +189,8 @@ interface DocumentApiRow {
   title: string | null
   slug: string | null
   status: PageStatus
+  workflowStage?: WorkflowStage
+  reviewNote?: string | null
   publishedAt: string | null
   scheduledAt?: string | null
   scheduledUnpublishAt?: string | null
@@ -211,6 +216,8 @@ function rowToEditorPage(doc: DocumentApiRow): EditorPage {
     slug,
     path: typeof data.path === 'string' && data.path ? data.path : slug ? `/${slug}` : '/',
     status: doc.status ?? 'DRAFT',
+    workflowStage: (doc.workflowStage as WorkflowStage | undefined) ?? 'DRAFT',
+    reviewNote: typeof doc.reviewNote === 'string' ? doc.reviewNote : null,
     parentPageId:
       typeof data.parentPageId === 'string' && data.parentPageId ? data.parentPageId : null,
     // Preserve unknown (externally-managed) sections so the editor can show
@@ -290,17 +297,23 @@ export async function savePageDraft(page: EditorPage): Promise<EditorPage> {
   return rowToEditorPage(res.data)
 }
 
-/** Publish: persist the latest content and flip status to PUBLISHED. */
-export async function publishPage(page: EditorPage): Promise<EditorPage> {
-  const endpoint = page.id
-    ? `/collections/${PAGES_COLLECTION}/${page.id}`
-    : `/collections/${PAGES_COLLECTION}`
-  const res = await cmsApi<DocumentApiRow>(endpoint, {
-    method: page.id ? 'PUT' : 'POST',
-    body: toWriteBody(page, { status: 'PUBLISHED' }),
-  })
-  if (res.error || !res.data) throw new Error(res.error ?? 'Failed to publish page')
-  return rowToEditorPage(res.data)
+export async function transitionPageWorkflow(
+  page: EditorPage,
+  stage: WorkflowStage,
+  note?: string,
+): Promise<EditorPage> {
+  if (!page.id) throw new Error('Save the page before changing review state')
+  const res = await cmsApi<{ success: boolean }>(
+    `/collections/${PAGES_COLLECTION}/${page.id}/workflow`,
+    { method: 'POST', body: JSON.stringify({ stage, note }) },
+  )
+  if (res.error) throw new Error(res.error)
+  return fetchPageForEditor(page.id)
+}
+
+/** Leftover callers must not skip review — use `transitionPageWorkflow`. */
+export async function publishPage(_page: EditorPage): Promise<EditorPage> {
+  throw new Error(SUBMIT_BEFORE_PUBLISH_ERROR)
 }
 
 /**
@@ -314,6 +327,8 @@ export function emptyPage(parentPageId: string | null = null): EditorPage {
     slug: '',
     path: '',
     status: 'DRAFT',
+    workflowStage: 'DRAFT',
+    reviewNote: null,
     parentPageId,
     sections: [],
     seoTitle: '',

package/src/lib/post-editor-service.ts

@@ -21,6 +21,7 @@
  */
 import { cmsApi } from './api.js'
 import { missingCollectionFields } from './collection-schema.js'
+import { SUBMIT_BEFORE_PUBLISH_ERROR, type WorkflowStage } from './workflow-chrome.js'
 import {
   getSectionType,
   generateSectionId,
@@ -73,12 +74,17 @@ export interface EditorPost {
   title: string
   slug: string
   excerpt: string
+  /** Persist identity — media id when present so usage tracking survives (#671). */
   featuredImage: string
+  /** Public URL for `<img src>` and the details input. Empty when only an id is known. */
+  featuredImageUrl: string
   body: string
   category: string
   /** Editorial tags as plain strings (stored as `[{ tag }]` rows, see {@link parseTags}). */
   tags: string[]
   status: PostStatus
+  workflowStage: WorkflowStage
+  reviewNote: string | null
   publishDate: string | null
   /** When set and status is SCHEDULED, the cron publishes at this time. */
   scheduledAt: string | null
@@ -199,6 +205,8 @@ interface DocumentApiRow {
   title: string | null
   slug: string | null
   status: PostStatus
+  workflowStage?: WorkflowStage
+  reviewNote?: string | null
   publishedAt: string | null
   scheduledAt?: string | null
   scheduledUnpublishAt?: string | null
@@ -211,20 +219,49 @@ function dataStr(data: Record<string, unknown>, key: string): string {
   return typeof v === 'string' ? v : ''
 }
 
+export interface FeaturedImageRef {
+  /** Persist this — media id when present so usage tracking survives (#671). */
+  id: string
+  /** Use this for `<img src>` and the details input. Empty when only an id is known. */
+  url: string
+}
+
+/** True for paths and http(s) URLs — never a bare media cuid. */
+export function isDisplayableImageSrc(value: string): boolean {
+  const v = value.trim()
+  return v.startsWith('/') || /^https?:\/\//i.test(v)
+}
+
+function asDisplayUrl(value: unknown): string {
+  if (typeof value !== 'string') return ''
+  const v = value.trim()
+  return isDisplayableImageSrc(v) ? v : ''
+}
+
 /**
- * Media fields are stored denormalized as `{ id, url, alt, … }` after headless
- * writes / admin picker. The editor state is a string (id or URL). Never coerce
- * an object to `""` — that wiped featured images on the next save (#671).
+ * Split a stored featured-image value into persist identity and display URL.
+ *
+ * Media fields are denormalized as `{ id, url, alt, … }` after headless writes
+ * / the admin picker. Never coerce an object to `""` — that wiped featured
+ * images on the next save (#671).
  */
-export function parseFeaturedImage(raw: unknown): string {
-  if (typeof raw === 'string') return raw.trim()
+export function parseFeaturedImageRef(raw: unknown): FeaturedImageRef {
+  if (typeof raw === 'string') {
+    const value = raw.trim()
+    return { id: value, url: asDisplayUrl(value) }
+  }
   if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
     const obj = raw as Record<string, unknown>
-    if (typeof obj.id === 'string' && obj.id.trim()) return obj.id.trim()
-    const url = obj.url ?? obj.publicUrl ?? obj.src
-    if (typeof url === 'string' && url.trim()) return url.trim()
+    const id = typeof obj.id === 'string' ? obj.id.trim() : ''
+    const url = asDisplayUrl(obj.url ?? obj.publicUrl ?? obj.src)
+    return { id: id || url, url }
   }
-  return ''
+  return { id: '', url: '' }
+}
+
+/** Persist identity only — prefer `id` so a save does not drop the media link. */
+export function parseFeaturedImage(raw: unknown): string {
+  return parseFeaturedImageRef(raw).id
 }
 
 /**
@@ -250,6 +287,7 @@ export function parseTags(raw: unknown): string[] {
 function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
   const data = doc.data ?? {}
   const dataTitle = dataStr(data, 'title')
+  const featured = parseFeaturedImageRef(data.featuredImage)
   return {
     id: doc.id,
     postType,
@@ -258,11 +296,14 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     title: dataTitle || (doc.title ?? ''),
     slug: doc.slug ?? dataStr(data, 'slug'),
     excerpt: dataStr(data, 'excerpt'),
-    featuredImage: parseFeaturedImage(data.featuredImage),
+    featuredImage: featured.id,
+    featuredImageUrl: featured.url,
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
     tags: parseTags(data.tags),
     status: doc.status ?? 'DRAFT',
+    workflowStage: (doc.workflowStage as WorkflowStage | undefined) ?? 'DRAFT',
+    reviewNote: typeof doc.reviewNote === 'string' ? doc.reviewNote : null,
     publishDate: (data.publishDate as string) ?? doc.scheduledAt ?? null,
     scheduledAt: doc.scheduledAt ?? null,
     scheduledUnpublishAt: doc.scheduledUnpublishAt ?? null,
@@ -410,16 +451,23 @@ export async function savePostDraft(post: EditorPost): Promise<EditorPost> {
   return rowToEditorPost(post.postType, res.data)
 }
 
-export async function publishPost(post: EditorPost): Promise<EditorPost> {
-  const endpoint = post.id
-    ? `/collections/${encodeURIComponent(post.postType)}/${post.id}`
-    : `/collections/${encodeURIComponent(post.postType)}`
-  const res = await cmsApi<DocumentApiRow>(endpoint, {
-    method: post.id ? 'PUT' : 'POST',
-    body: toWriteBody(post, { status: 'PUBLISHED' }),
-  })
-  if (res.error || !res.data) throw new Error(res.error ?? 'Failed to publish post')
-  return rowToEditorPost(post.postType, res.data)
+export async function transitionPostWorkflow(
+  post: EditorPost,
+  stage: WorkflowStage,
+  note?: string,
+): Promise<EditorPost> {
+  if (!post.id) throw new Error('Save the post before changing review state')
+  const res = await cmsApi<{ success: boolean }>(
+    `/collections/${encodeURIComponent(post.postType)}/${post.id}/workflow`,
+    { method: 'POST', body: JSON.stringify({ stage, note }) },
+  )
+  if (res.error) throw new Error(res.error)
+  return fetchPostForEditor(post.postType, post.id)
+}
+
+/** Leftover callers must not skip review — use `transitionPostWorkflow`. */
+export async function publishPost(_post: EditorPost): Promise<EditorPost> {
+  throw new Error(SUBMIT_BEFORE_PUBLISH_ERROR)
 }
 
 /** A blank post scaffold seeded with the post type's template sections. */
@@ -443,10 +491,13 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     slug: '',
     excerpt: '',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],
     status: 'DRAFT',
+    workflowStage: 'DRAFT',
+    reviewNote: null,
     publishDate: null,
     scheduledAt: null,
     scheduledUnpublishAt: null,

package/src/lib/version-history.ts

@@ -9,6 +9,7 @@
  * response and no second request per row is needed.
  */
 import { cmsApi } from './api.js'
+import { parseFeaturedImageRef } from './post-editor-service.js'
 import { coerceSections, type PageSection } from '@prenta/core/page-sections'
 
 /**
@@ -97,13 +98,8 @@ function optionalString(value: unknown): string | undefined {
 }
 
 function optionalFeaturedImage(value: unknown): string | undefined {
-  if (typeof value === 'string') return value
-  if (value && typeof value === 'object' && !Array.isArray(value)) {
-    const obj = value as Record<string, unknown>
-    const url = obj.url ?? obj.publicUrl ?? obj.src
-    if (typeof url === 'string') return url
-  }
-  return undefined
+  const url = parseFeaturedImageRef(value).url
+  return url || undefined
 }
 
 export function toPageVersion(row: VersionApiRow): PageVersion {

package/src/lib/workflow-chrome.ts

@@ -0,0 +1,105 @@
+export type WorkflowStage = 'DRAFT' | 'IN_REVIEW' | 'APPROVED' | 'ARCHIVED' | 'PUBLISHED'
+
+export type WorkflowChromeAction = 'submit' | 'approve' | 'waiting'
+
+export const SUBMIT_FOR_REVIEW_LABEL = 'Submit for review'
+export const APPROVE_LABEL = 'Approve'
+export const REQUEST_CHANGES_LABEL = 'Request changes'
+export const WAITING_FOR_REVIEW_LABEL = 'Waiting for review.'
+export const REVIEWER_NOTE_PREFIX = 'Reviewer note:'
+export const SUBMIT_BEFORE_PUBLISH_ERROR = 'Submit for review before publishing.'
+
+const REVIEWER_ROLES = new Set(['ADMIN', 'EDITOR'])
+const SUBMIT_ROLES = new Set(['ADMIN', 'EDITOR', 'AUTHOR'])
+
+const STATUS_PILL: Record<WorkflowStage | 'SCHEDULED', { label: string; className: string }> = {
+  DRAFT: { label: 'Draft', className: 'text-warning' },
+  IN_REVIEW: { label: 'In review', className: 'text-warning' },
+  APPROVED: { label: 'Approved', className: 'text-warning' },
+  PUBLISHED: { label: 'Published', className: 'text-success' },
+  ARCHIVED: { label: 'Archived', className: 'text-muted-foreground' },
+  SCHEDULED: { label: 'Scheduled', className: 'text-warning' },
+}
+
+export function resolveWorkflowChrome(input: {
+  stage: WorkflowStage
+  status: 'DRAFT' | 'PUBLISHED' | 'SCHEDULED' | 'ARCHIVED'
+  role: string
+  canEdit: boolean
+}): {
+  primary: WorkflowChromeAction | null
+  showRequestChanges: boolean
+  showSchedule: boolean
+  waitingLabel?: string
+  statusLabel: string
+  statusClassName: string
+} {
+  const role = input.role.toUpperCase()
+  const published = input.status === 'PUBLISHED'
+  const scheduled = input.status === 'SCHEDULED'
+  const pillKey = published ? 'PUBLISHED' : scheduled ? 'SCHEDULED' : input.stage
+  const pill = STATUS_PILL[pillKey]
+
+  if (!input.canEdit || published) {
+    return {
+      primary: null,
+      showRequestChanges: false,
+      showSchedule: false,
+      statusLabel: pill.label,
+      statusClassName: pill.className,
+    }
+  }
+
+  const reviewer = REVIEWER_ROLES.has(role)
+  const canSubmit = SUBMIT_ROLES.has(role)
+  const inReview = input.stage === 'IN_REVIEW' || input.stage === 'APPROVED'
+
+  if (scheduled) {
+    return {
+      primary: null,
+      showRequestChanges: reviewer,
+      showSchedule: reviewer,
+      statusLabel: pill.label,
+      statusClassName: pill.className,
+    }
+  }
+
+  if (input.stage === 'DRAFT' && canSubmit) {
+    return {
+      primary: 'submit',
+      showRequestChanges: false,
+      showSchedule: false,
+      statusLabel: pill.label,
+      statusClassName: pill.className,
+    }
+  }
+
+  if (inReview && reviewer) {
+    return {
+      primary: 'approve',
+      showRequestChanges: true,
+      showSchedule: true,
+      statusLabel: pill.label,
+      statusClassName: pill.className,
+    }
+  }
+
+  if (inReview && canSubmit) {
+    return {
+      primary: 'waiting',
+      showRequestChanges: false,
+      showSchedule: false,
+      waitingLabel: WAITING_FOR_REVIEW_LABEL,
+      statusLabel: pill.label,
+      statusClassName: pill.className,
+    }
+  }
+
+  return {
+    primary: null,
+    showRequestChanges: false,
+    showSchedule: false,
+    statusLabel: pill.label,
+    statusClassName: pill.className,
+  }
+}