@actuate-media/cms-admin 0.22.0 → 0.24.0

package/src/views/Forms.tsx

@@ -9,7 +9,7 @@
  */
 import { ChevronRight, ClipboardList, Plus, Search, Settings2 } from 'lucide-react'
 import * as Switch from '@radix-ui/react-switch'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { toast } from 'sonner'
 import { sortByRelevance } from '../lib/search.js'
 import {
@@ -28,11 +28,14 @@ import {
   FormsEmptyState,
   FormsErrorState,
   FormsLoading,
+  FormsPagination,
   SummaryChip,
   UnreadBadge,
   btnPrimary,
 } from '../components/forms/primitives.js'
 
+const PAGE_SIZE = 10
+
 export interface FormsProps {
   onNavigate?: (path: string) => void
 }
@@ -72,6 +75,7 @@ export function Forms({ onNavigate }: FormsProps) {
   const [error, setError] = useState<string | null>(null)
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<StatusFilter>('all')
+  const [page, setPage] = useState(1)
   const [schemaForm, setSchemaForm] = useState<FormListItem | null>(null)
   const [schemaOpen, setSchemaOpen] = useState(false)
 
@@ -121,6 +125,18 @@ export function Forms({ onNavigate }: FormsProps) {
     return results
   }, [forms, filter, search])
 
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
+
+  // Keep the page in range when the filtered set shrinks (filters, refresh).
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+
+  const paged = useMemo(
+    () => filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [filtered, page],
+  )
+
   const openSchema = useCallback((form: FormListItem) => {
     setSchemaForm(form)
     setSchemaOpen(true)
@@ -176,7 +192,10 @@ export function Forms({ onNavigate }: FormsProps) {
             type="search"
             placeholder="Search forms…"
             value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            onChange={(e) => {
+              setSearch(e.target.value)
+              setPage(1)
+            }}
             aria-label="Search forms"
             className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus-visible:ring-2 focus-visible:outline-none"
           />
@@ -186,7 +205,10 @@ export function Forms({ onNavigate }: FormsProps) {
             <button
               key={f.id}
               type="button"
-              onClick={() => setFilter(f.id)}
+              onClick={() => {
+                setFilter(f.id)
+                setPage(1)
+              }}
               aria-pressed={filter === f.id}
               className={`rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
                 filter === f.id
@@ -226,6 +248,7 @@ export function Forms({ onNavigate }: FormsProps) {
               onClick={() => {
                 setSearch('')
                 setFilter('all')
+                setPage(1)
               }}
               className="text-primary text-sm font-medium hover:underline"
             >
@@ -235,11 +258,21 @@ export function Forms({ onNavigate }: FormsProps) {
         />
       ) : (
         <FormsTable
-          forms={filtered}
+          forms={paged}
           onOpenForm={(id) => onNavigate?.(`/forms/${id}/edit`)}
           onOpenEntries={(id) => onNavigate?.(`/forms/${id}/submissions`)}
           onOpenSchema={openSchema}
           onNotifyToggle={handleNotifyToggle}
+          footer={
+            <FormsPagination
+              page={page}
+              pageSize={PAGE_SIZE}
+              total={filtered.length}
+              onPageChange={setPage}
+              noun="form"
+              label="Forms pagination"
+            />
+          }
         />
       )}
 
@@ -259,117 +292,122 @@ function FormsTable({
   onOpenEntries,
   onOpenSchema,
   onNotifyToggle,
+  footer,
 }: {
   forms: FormListItem[]
   onOpenForm: (id: string) => void
   onOpenEntries: (id: string) => void
   onOpenSchema: (form: FormListItem) => void
   onNotifyToggle: (form: FormListItem, next: boolean) => void
+  footer?: ReactNode
 }) {
   return (
-    <div className="border-border bg-card overflow-x-auto rounded-lg border">
-      <table className="w-full min-w-[760px] text-sm" aria-label="Forms">
-        <thead>
-          <tr className="border-border text-muted-foreground border-b text-left text-xs">
-            <th scope="col" className="px-4 py-2.5 font-medium">
-              Form
-            </th>
-            <th scope="col" className="px-4 py-2.5 font-medium">
-              Fields
-            </th>
-            <th scope="col" className="px-4 py-2.5 font-medium">
-              Status
-            </th>
-            <th scope="col" className="px-4 py-2.5 font-medium">
-              Entries
-            </th>
-            <th scope="col" className="px-4 py-2.5 font-medium">
-              Last Entry
-            </th>
-            <th scope="col" className="px-4 py-2.5 text-center font-medium">
-              Notify
-            </th>
-            <th scope="col" className="px-4 py-2.5 text-right font-medium">
-              <span className="sr-only">Schema</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {forms.map((form) => {
-            const fieldCount = form.fieldCount ?? form.fields.length
-            const unread = form.unreadEntries ?? 0
-            const muted = form.status === 'archived'
-            return (
-              <tr
-                key={form.id}
-                className={`border-border hover:bg-accent/40 border-b transition-colors last:border-b-0 ${muted ? 'opacity-60' : ''}`}
-              >
-                <td className="px-4 py-3">
-                  <button
-                    type="button"
-                    onClick={() => onOpenForm(form.id)}
-                    className="block max-w-xs text-left"
-                  >
-                    <span className="text-foreground block truncate font-medium hover:underline">
-                      {form.name}
-                    </span>
-                    <span className="text-muted-foreground block truncate text-xs">
-                      /{form.slug}
-                      {form.description ? ` · ${form.description}` : ''}
-                    </span>
-                  </button>
-                </td>
-                <td className="px-4 py-3">
-                  <div className="flex flex-wrap items-center gap-1">
-                    {form.fields.slice(0, 4).map((field) => (
-                      <FieldTypeBadge key={field.id} type={field.type} />
-                    ))}
-                    <span className="text-muted-foreground text-xs">{fieldCount} fields</span>
-                  </div>
-                </td>
-                <td className="px-4 py-3">
-                  <FormStatusBadge status={form.status} />
-                </td>
-                <td className="px-4 py-3">
-                  <button
-                    type="button"
-                    onClick={() => onOpenEntries(form.id)}
-                    className="text-foreground hover:text-primary focus-visible:ring-ring inline-flex items-center gap-1.5 rounded font-medium tabular-nums focus-visible:ring-2 focus-visible:outline-none"
-                    aria-label={`View ${form.totalEntries ?? 0} entries for ${form.name}`}
-                  >
-                    {form.totalEntries ?? 0}
-                    <UnreadBadge count={unread} />
-                    <ChevronRight className="text-muted-foreground h-3.5 w-3.5" aria-hidden />
-                  </button>
-                </td>
-                <td className="text-muted-foreground px-4 py-3 whitespace-nowrap">
-                  {formatRelative(form.lastEntryAt)}
-                </td>
-                <td className="px-4 py-3 text-center">
-                  <Switch.Root
-                    checked={form.notifyEnabled ?? false}
-                    onCheckedChange={(v) => onNotifyToggle(form, v)}
-                    aria-label={`Notifications for ${form.name}`}
-                    className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative inline-flex h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                  >
-                    <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-                  </Switch.Root>
-                </td>
-                <td className="px-4 py-3 text-right">
-                  <button
-                    type="button"
-                    onClick={() => onOpenSchema(form)}
-                    className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                  >
-                    <Settings2 className="h-3.5 w-3.5" aria-hidden />
-                    Schema
-                  </button>
-                </td>
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
+    <div className="border-border bg-card rounded-lg border">
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[760px] text-sm" aria-label="Forms">
+          <thead>
+            <tr className="border-border text-muted-foreground border-b text-left text-xs">
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Form
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Fields
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Status
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Entries
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Last Entry
+              </th>
+              <th scope="col" className="px-4 py-2.5 text-center font-medium">
+                Notify
+              </th>
+              <th scope="col" className="px-4 py-2.5 text-right font-medium">
+                <span className="sr-only">Schema</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {forms.map((form) => {
+              const fieldCount = form.fieldCount ?? form.fields.length
+              const unread = form.unreadEntries ?? 0
+              const muted = form.status === 'archived'
+              return (
+                <tr
+                  key={form.id}
+                  className={`border-border hover:bg-accent/40 border-b transition-colors last:border-b-0 ${muted ? 'opacity-60' : ''}`}
+                >
+                  <td className="px-4 py-3">
+                    <button
+                      type="button"
+                      onClick={() => onOpenForm(form.id)}
+                      className="block max-w-xs text-left"
+                    >
+                      <span className="text-foreground block truncate font-medium hover:underline">
+                        {form.name}
+                      </span>
+                      <span className="text-muted-foreground block truncate text-xs">
+                        /{form.slug}
+                        {form.description ? ` · ${form.description}` : ''}
+                      </span>
+                    </button>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex flex-wrap items-center gap-1">
+                      {form.fields.slice(0, 4).map((field) => (
+                        <FieldTypeBadge key={field.id} type={field.type} />
+                      ))}
+                      <span className="text-muted-foreground text-xs">{fieldCount} fields</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <FormStatusBadge status={form.status} />
+                  </td>
+                  <td className="px-4 py-3">
+                    <button
+                      type="button"
+                      onClick={() => onOpenEntries(form.id)}
+                      className="text-foreground hover:text-primary focus-visible:ring-ring inline-flex items-center gap-1.5 rounded font-medium tabular-nums focus-visible:ring-2 focus-visible:outline-none"
+                      aria-label={`View ${form.totalEntries ?? 0} entries for ${form.name}`}
+                    >
+                      {form.totalEntries ?? 0}
+                      <UnreadBadge count={unread} />
+                      <ChevronRight className="text-muted-foreground h-3.5 w-3.5" aria-hidden />
+                    </button>
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3 whitespace-nowrap">
+                    {formatRelative(form.lastEntryAt)}
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <Switch.Root
+                      checked={form.notifyEnabled ?? false}
+                      onCheckedChange={(v) => onNotifyToggle(form, v)}
+                      aria-label={`Notifications for ${form.name}`}
+                      className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative inline-flex h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                    >
+                      <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
+                    </Switch.Root>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      type="button"
+                      onClick={() => onOpenSchema(form)}
+                      className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                    >
+                      <Settings2 className="h-3.5 w-3.5" aria-hidden />
+                      Schema
+                    </button>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      {footer}
     </div>
   )
 }