@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/DocumentEdit.tsx

@@ -1,7 +1,18 @@
 'use client'
 
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { AlertTriangle, Eye, EyeOff, Save, Copy, Loader2, Clock } from 'lucide-react'
+import {
+  AlertTriangle,
+  Calendar,
+  Eye,
+  EyeOff,
+  Save,
+  Copy,
+  Loader2,
+  Clock,
+  Share2,
+  XCircle,
+} from 'lucide-react'
 import { toast } from 'sonner'
 import { FieldRenderer } from '../fields/FieldRenderer.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
@@ -12,6 +23,8 @@ import { VersionHistory } from '../components/VersionHistory.js'
 import { PresenceIndicator } from '../components/PresenceIndicator.js'
 import { SEOPanel } from '../components/SEOPanel.js'
 import type { SEOData } from '../components/SEOPanel.js'
+import { SchedulePublishDialog } from '../components/SchedulePublishDialog.js'
+import { SharePreviewLinkDialog } from '../components/SharePreviewLinkDialog.js'
 import { cmsApi } from '../lib/api.js'
 
 export interface DocumentEditProps {
@@ -40,7 +53,11 @@ export function DocumentEdit({
   const [loading, setLoading] = useState(!isNew)
   const [showPreview, setShowPreview] = useState(false)
   const [showVersions, setShowVersions] = useState(false)
+  const [showSchedule, setShowSchedule] = useState(false)
+  const [showShareLink, setShowShareLink] = useState(false)
   const [docStatus, setDocStatus] = useState<string>('DRAFT')
+  const [scheduledAt, setScheduledAt] = useState<string | null>(null)
+  const [scheduledUnpublishAt, setScheduledUnpublishAt] = useState<string | null>(null)
   const hasLoadedRef = useRef(false)
 
   const collections = config?.collections
@@ -125,6 +142,8 @@ export function DocumentEdit({
       setValues(merged)
       setInitialValues(merged)
       setDocStatus(doc.status ?? 'DRAFT')
+      setScheduledAt(doc.scheduledAt ?? null)
+      setScheduledUnpublishAt(doc.scheduledUnpublishAt ?? null)
 
       const loadedSeo: SEOData = {}
       for (const key of SEO_FIELDS) {
@@ -279,8 +298,8 @@ export function DocumentEdit({
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-[300px]">
-        <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+      <div className="flex min-h-[300px] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
       </div>
     )
   }
@@ -291,12 +310,12 @@ export function DocumentEdit({
         <div className="flex items-center gap-3">
           <h1 className="text-2xl font-bold">{displayTitle}</h1>
           <span
-            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor}`}
+            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor}`}
           >
             {docStatus}
           </span>
           {documentId && <PresenceIndicator documentId={documentId} />}
-          {isDirty && <span className="text-xs text-amber-600 font-medium">Unsaved changes</span>}
+          {isDirty && <span className="text-xs font-medium text-amber-600">Unsaved changes</span>}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -309,6 +328,14 @@ export function DocumentEdit({
           </button>
           {!isNew && (
             <>
+              <button
+                onClick={() => setShowShareLink(true)}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                title="Share a signed preview link for the current draft"
+              >
+                <Share2 className="h-4 w-4" />
+                Share preview
+              </button>
               <button
                 onClick={() => setShowVersions(true)}
                 className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
@@ -333,11 +360,11 @@ export function DocumentEdit({
       <div className={showPreview ? 'grid grid-cols-2 gap-6' : ''}>
         <div className="space-y-6">
           {fields.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center rounded-lg border border-[var(--border)]">
-              <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-                <AlertTriangle className="w-6 h-6 text-gray-400" />
+            <div className="flex flex-col items-center justify-center rounded-lg border border-[var(--border)] py-16 text-center">
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+                <AlertTriangle className="h-6 w-6 text-gray-400" />
               </div>
-              <h3 className="text-sm font-medium text-gray-900 mb-1">
+              <h3 className="mb-1 text-sm font-medium text-gray-900">
                 Collection schema not found
               </h3>
               <p className="text-sm text-gray-500">No fields are defined for this collection.</p>
@@ -379,6 +406,31 @@ export function DocumentEdit({
                         Unpublish
                       </Button>
                     )}
+                    {!isNew && (
+                      <button
+                        onClick={() => setShowSchedule(true)}
+                        className="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[var(--border)] bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                      >
+                        <Calendar className="h-4 w-4" />
+                        {scheduledAt || scheduledUnpublishAt ? 'Reschedule' : 'Schedule'}
+                      </button>
+                    )}
+                    {!isNew && (scheduledAt || scheduledUnpublishAt) && (
+                      <div className="space-y-1 rounded-md border border-blue-100 bg-blue-50 px-3 py-2 text-xs text-blue-900">
+                        {scheduledAt && (
+                          <div className="flex items-center gap-1.5">
+                            <Calendar className="h-3.5 w-3.5" />
+                            Publishes {new Date(scheduledAt).toLocaleString()}
+                          </div>
+                        )}
+                        {scheduledUnpublishAt && (
+                          <div className="flex items-center gap-1.5">
+                            <XCircle className="h-3.5 w-3.5" />
+                            Unpublishes {new Date(scheduledUnpublishAt).toLocaleString()}
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </div>
                 </div>
 
@@ -465,7 +517,7 @@ export function DocumentEdit({
               Cancel
             </Button>
             <Button variant="primary" loading={saving} onClick={handleSave} data-shortcut="save">
-              <Save className="h-4 w-4 mr-1.5" />
+              <Save className="mr-1.5 h-4 w-4" />
               {isNew ? 'Create' : 'Save Changes'}
             </Button>
           </div>
@@ -495,6 +547,34 @@ export function DocumentEdit({
           }}
         />
       )}
+
+      {!isNew && documentId && (
+        <SchedulePublishDialog
+          collectionSlug={collectionSlug}
+          documentId={documentId}
+          scheduledAt={scheduledAt}
+          scheduledUnpublishAt={scheduledUnpublishAt}
+          open={showSchedule}
+          onClose={() => setShowSchedule(false)}
+          onScheduled={(next) => {
+            setDocStatus(next.status)
+            setScheduledAt(next.scheduledAt)
+            setScheduledUnpublishAt(next.scheduledUnpublishAt)
+          }}
+        />
+      )}
+
+      {!isNew && documentId && (
+        <SharePreviewLinkDialog
+          collectionSlug={collectionSlug}
+          documentId={documentId}
+          documentSlug={docSlug}
+          siteUrl={config?.siteUrl}
+          urlPrefix={collection?.urlPrefix ?? collectionSlug}
+          open={showShareLink}
+          onClose={() => setShowShareLink(false)}
+        />
+      )}
     </div>
   )
 }

package/src/views/ForgotPassword.tsx

@@ -42,25 +42,25 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
       <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <div className="mx-auto mb-4 w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center">
-            <Shield className="w-7 h-7 text-white" />
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
+            <Shield className="h-7 w-7 text-white" />
           </div>
           <h1 className="text-2xl font-bold text-gray-900">Reset Password</h1>
-          <p className="text-gray-600 mt-2">
+          <p className="mt-2 text-gray-600">
             {sent
               ? 'Check your inbox for a reset link'
               : "Enter your email and we'll send you a reset link"}
           </p>
         </div>
 
-        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+        <div className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
           {sent ? (
-            <div className="text-center space-y-4">
-              <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
-                <CheckCircle2 className="w-6 h-6 text-green-600" />
+            <div className="space-y-4 text-center">
+              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                <CheckCircle2 className="h-6 w-6 text-green-600" />
               </div>
               <p className="text-sm text-gray-600">
                 If an account exists for <strong>{email}</strong>, you will receive a password reset
@@ -72,7 +72,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <button
                 type="button"
                 onClick={() => onNavigate('/login')}
-                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+                className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700"
               >
                 Back to Sign In
               </button>
@@ -80,8 +80,8 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
               {error && (
-                <div className="flex items-start gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
-                  <AlertTriangle className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
+                <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+                  <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
                   <p className="text-sm text-red-800">{error}</p>
                 </div>
               )}
@@ -89,7 +89,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <div>
                 <label
                   htmlFor="forgot-email"
-                  className="block text-sm font-medium text-gray-700 mb-1.5"
+                  className="mb-1.5 block text-sm font-medium text-gray-700"
                 >
                   Email Address
                 </label>
@@ -99,7 +99,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="admin@example.com"
-                  className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   required
                   autoFocus
                   autoComplete="email"
@@ -109,11 +109,11 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <button
                 type="submit"
                 disabled={!canSubmit}
-                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {submitting ? (
                   <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <Loader2 className="h-4 w-4 animate-spin" />
                     Sending...
                   </>
                 ) : (
@@ -127,9 +127,9 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
             <button
               type="button"
               onClick={() => onNavigate('/login')}
-              className="w-full flex items-center justify-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+              className="flex w-full items-center justify-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-800"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeft className="h-4 w-4" />
               Back to Sign In
             </button>
           )}