@actuate-media/cms-admin 0.21.0 → 0.22.0

package/src/components/forms/NotificationsPanel.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+/**
+ * Notifications tab of the Form Schema drawer. Persists per-form notification
+ * settings (recipients, reply-to, subject/message templates, field inclusion,
+ * autoresponder). Actual email/webhook delivery + the "send test" action are
+ * wired in a later phase (PR 6); this panel owns the configuration only.
+ */
+import { useEffect, useState } from 'react'
+import * as Switch from '@radix-ui/react-switch'
+import { toast } from 'sonner'
+import {
+  fetchNotificationSettings,
+  updateNotificationSettings,
+  type FormNotificationSettings,
+} from '../../lib/forms-service.js'
+import { emitFormsChanged } from '../../lib/forms-events.js'
+import { FormsErrorState, FormsLoading, btnPrimary } from './primitives.js'
+
+const inputCls =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function NotificationsPanel({
+  formId,
+  onChanged,
+}: {
+  formId: string
+  /** Called after a successful save so the list can refresh the notify state. */
+  onChanged?: () => void
+}) {
+  const [settings, setSettings] = useState<FormNotificationSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    fetchNotificationSettings(formId)
+      .then((s) => {
+        if (active) setSettings(s)
+      })
+      .catch((e: unknown) => {
+        if (active)
+          setError(e instanceof Error ? e.message : 'Failed to load notification settings')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  function patch(p: Partial<FormNotificationSettings>) {
+    setSettings((cur) => (cur ? { ...cur, ...p } : cur))
+  }
+
+  async function save() {
+    if (!settings) return
+    setSaving(true)
+    const res = await updateNotificationSettings(formId, settings)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) setSettings(res.data)
+    toast.success('Notification settings saved.')
+    emitFormsChanged()
+    onChanged?.()
+  }
+
+  if (loading) return <FormsLoading label="Loading notification settings…" />
+  if (error) return <FormsErrorState message={error} />
+  if (!settings) return null
+
+  return (
+    <div className="space-y-4">
+      <ToggleRow
+        label="Enable notifications"
+        help="Email the recipients below when a new entry arrives."
+        checked={settings.enabled}
+        onChange={(v) => patch({ enabled: v })}
+      />
+
+      <fieldset
+        disabled={!settings.enabled}
+        className="space-y-4 transition-opacity disabled:opacity-50"
+      >
+        <Field label="Recipients" hint="Comma-separated email addresses">
+          <input
+            type="text"
+            value={settings.recipients.join(', ')}
+            onChange={(e) =>
+              patch({
+                recipients: e.target.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              })
+            }
+            placeholder="team@example.com"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field label="Reply-to field key" hint="Field whose value is used as the reply-to address">
+          <input
+            type="text"
+            value={settings.replyToFieldKey ?? ''}
+            onChange={(e) => patch({ replyToFieldKey: e.target.value || null })}
+            placeholder="email"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field label="Subject template">
+          <input
+            type="text"
+            value={settings.subjectTemplate ?? ''}
+            onChange={(e) => patch({ subjectTemplate: e.target.value })}
+            placeholder="New submission from {{name}}"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field label="Message template">
+          <textarea
+            rows={3}
+            value={settings.messageTemplate ?? ''}
+            onChange={(e) => patch({ messageTemplate: e.target.value })}
+            className={inputCls}
+          />
+        </Field>
+
+        <ToggleRow
+          label="Include all fields"
+          help="Append every submitted field to the notification body."
+          checked={settings.includeFields ?? true}
+          onChange={(v) => patch({ includeFields: v })}
+        />
+        <ToggleRow
+          label="Exclude sensitive fields"
+          help="Omit fields marked as sensitive/PII from the email."
+          checked={settings.excludeSensitiveFields ?? false}
+          onChange={(v) => patch({ excludeSensitiveFields: v })}
+        />
+
+        <div className="border-border border-t pt-4">
+          <ToggleRow
+            label="Auto-response email"
+            help="Send a confirmation email back to the submitter."
+            checked={settings.autoresponderEnabled ?? false}
+            onChange={(v) => patch({ autoresponderEnabled: v })}
+          />
+          {settings.autoresponderEnabled && (
+            <div className="mt-3 space-y-3">
+              <Field label="Auto-response subject">
+                <input
+                  type="text"
+                  value={settings.autoresponderSubject ?? ''}
+                  onChange={(e) => patch({ autoresponderSubject: e.target.value })}
+                  className={inputCls}
+                />
+              </Field>
+              <Field label="Auto-response body">
+                <textarea
+                  rows={3}
+                  value={settings.autoresponderBody ?? ''}
+                  onChange={(e) => patch({ autoresponderBody: e.target.value })}
+                  className={inputCls}
+                />
+              </Field>
+            </div>
+          )}
+        </div>
+      </fieldset>
+
+      <p className="text-muted-foreground text-xs">
+        Email &amp; webhook delivery (including the test action) is wired in an upcoming release.
+        Settings saved here apply automatically once delivery is enabled.
+      </p>
+
+      <div className="flex justify-end">
+        <button className={btnPrimary} onClick={save} disabled={saving}>
+          {saving ? 'Saving…' : 'Save notifications'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function ToggleRow({
+  label,
+  help,
+  checked,
+  onChange,
+}: {
+  label: string
+  help: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="min-w-0">
+        <span className="text-foreground block text-sm font-medium">{label}</span>
+        <span className="text-muted-foreground block text-sm">{help}</span>
+      </span>
+      <Switch.Root
+        checked={checked}
+        onCheckedChange={onChange}
+        aria-label={label}
+        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative 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>
+    </div>
+  )
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: string
+  children: React.ReactNode
+}) {
+  return (
+    <label className="block">
+      <span className="text-foreground mb-1 block text-sm font-medium">{label}</span>
+      {children}
+      {hint && <span className="text-muted-foreground mt-1 block text-xs">{hint}</span>}
+    </label>
+  )
+}

package/src/components/forms/primitives.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+/**
+ * Shared Forms UI primitives — token-only, accessible building blocks used
+ * across the Forms list, schema drawer, and (later) the entries views. No raw
+ * palette colours: field-type and status hues map onto the theme's semantic
+ * tokens (success / warning / info / destructive / primary / muted) so they
+ * track light/dark mode and brand overrides automatically.
+ */
+import type { ReactNode } from 'react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
+
+// ─── Field-type badges ─────────────────────────────────────────────────────
+
+/** Map a field type onto a semantic colour pair (background + text). */
+function fieldTypeTone(type: FormFieldType): string {
+  switch (type) {
+    case 'email':
+    case 'url':
+    case 'date':
+    case 'number':
+      return 'bg-info/10 text-info'
+    case 'phone':
+    case 'textarea':
+      return 'bg-primary/10 text-primary'
+    case 'select':
+    case 'multiselect':
+    case 'radio':
+      return 'bg-warning/10 text-warning'
+    case 'checkbox':
+    case 'consent':
+      return 'bg-success/10 text-success'
+    case 'file':
+      return 'bg-destructive/10 text-destructive'
+    default:
+      return 'bg-muted text-muted-foreground'
+  }
+}
+
+const FIELD_TYPE_LABELS: Partial<Record<FormFieldType, string>> = {
+  text: 'TEXT',
+  email: 'EMAIL',
+  phone: 'PHONE',
+  textarea: 'TEXTAREA',
+  select: 'SELECT',
+  multiselect: 'MULTI',
+  radio: 'RADIO',
+  checkbox: 'CHECKBOX',
+  date: 'DATE',
+  number: 'NUMBER',
+  url: 'URL',
+  hidden: 'HIDDEN',
+  file: 'FILE',
+  consent: 'CONSENT',
+  richtext: 'CONTENT',
+  divider: 'DIVIDER',
+  honeypot: 'HONEYPOT',
+}
+
+export function FieldTypeBadge({ type }: { type: FormFieldType }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase ${fieldTypeTone(type)}`}
+    >
+      {FIELD_TYPE_LABELS[type] ?? type}
+    </span>
+  )
+}
+
+// ─── Status badges ─────────────────────────────────────────────────────────
+
+const STATUS_META: Record<FormStatus, { label: string; cls: string; dot: string }> = {
+  active: { label: 'Active', cls: 'bg-success/10 text-success', dot: 'bg-success' },
+  draft: { label: 'Draft', cls: 'bg-warning/10 text-warning', dot: 'bg-warning' },
+  archived: {
+    label: 'Archived',
+    cls: 'bg-muted text-muted-foreground',
+    dot: 'bg-muted-foreground',
+  },
+}
+
+export function FormStatusBadge({ status }: { status: FormStatus }) {
+  const meta = STATUS_META[status] ?? STATUS_META.draft
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.cls}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+      {meta.label}
+    </span>
+  )
+}
+
+/** Small red count badge for unread submissions. Hidden when count is 0. */
+export function UnreadBadge({ count, className = '' }: { count: number; className?: string }) {
+  if (count <= 0) return null
+  return (
+    <span
+      className={`bg-destructive text-destructive-foreground inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums ${className}`}
+      aria-label={`${count} unread`}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  )
+}
+
+// ─── Summary chips ───────────────────────────────────────────────────────
+
+export function SummaryChip({
+  value,
+  label,
+  tone = 'neutral',
+}: {
+  value: ReactNode
+  label: string
+  tone?: 'neutral' | 'success' | 'warning' | 'destructive'
+}) {
+  const valueCls =
+    tone === 'success'
+      ? 'text-success'
+      : tone === 'warning'
+        ? 'text-warning'
+        : tone === 'destructive'
+          ? 'text-destructive'
+          : 'text-foreground'
+  return (
+    <div className="border-border bg-card flex items-baseline gap-1.5 rounded-lg border px-3 py-2">
+      <span className={`text-base font-medium tabular-nums ${valueCls}`}>{value}</span>
+      <span className="text-muted-foreground text-sm">{label}</span>
+    </div>
+  )
+}
+
+// ─── States ──────────────────────────────────────────────────────────────
+
+export function FormsLoading({ label = 'Loading…' }: { label?: string }) {
+  return (
+    <div className="flex h-64 items-center justify-center" role="status" aria-live="polite">
+      <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+      <span className="sr-only">{label}</span>
+    </div>
+  )
+}
+
+export function FormsEmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+}) {
+  return (
+    <div className="border-border flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-12 text-center">
+      {icon && (
+        <div className="text-muted-foreground mb-3" aria-hidden>
+          {icon}
+        </div>
+      )}
+      <h3 className="text-foreground text-base font-medium">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 max-w-md text-sm">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
+
+export function FormsErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div
+      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-3"
+      role="alert"
+    >
+      <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />
+      <span className="text-destructive flex-1 text-sm">{message}</span>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm transition-colors"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ─── Button helpers (token-only) ─────────────────────────────────────────
+
+export const btnPrimary =
+  'inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnSecondary =
+  'inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card px-4 py-2 text-base font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnGhostIcon =
+  'inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'