@actuate-media/cms-admin 0.7.3 → 0.8.1

package/src/views/Redirects.tsx

@@ -1,83 +1,102 @@
-'use client';
+'use client'
 
-import * as Dialog from '@radix-ui/react-dialog';
-import { Pencil, Plus, Trash2, Search, ArrowUpDown, ArrowUp, ArrowDown, ArrowRightLeft, Loader2, AlertTriangle } from 'lucide-react';
-import { useState, useMemo, type FormEvent } from 'react';
-import { toast } from 'sonner';
-import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Pencil,
+  Plus,
+  Trash2,
+  Search,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  ArrowRightLeft,
+  Loader2,
+  AlertTriangle,
+} from 'lucide-react'
+import { useState, useMemo, type FormEvent } from 'react'
+import { toast } from 'sonner'
+import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
-type RedirectSortKey = 'from' | 'to' | 'type' | 'hits' | 'active';
+type RedirectSortKey = 'from' | 'to' | 'type' | 'hits' | 'active'
 
 export interface RedirectsProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 export function Redirects({ onNavigate }: RedirectsProps) {
-  const { data, loading, error, refetch } = useApiData<any[]>('/redirects');
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [newRedirect, setNewRedirect] = useState({ source: '', destination: '', type: '301' as '301' | '302' });
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterType, setFilterType] = useState('all');
-  const [sortConfig, setSortConfig] = useState<SortConfig<RedirectSortKey> | null>(null);
+  const { data, loading, error, refetch } = useApiData<any[]>('/redirects')
+  const [showAddDialog, setShowAddDialog] = useState(false)
+  const [newRedirect, setNewRedirect] = useState({
+    source: '',
+    destination: '',
+    type: '301' as '301' | '302',
+  })
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterType, setFilterType] = useState('all')
+  const [sortConfig, setSortConfig] = useState<SortConfig<RedirectSortKey> | null>(null)
 
-  const redirects = data ?? [];
+  const redirects = data ?? []
 
   const filteredAndSorted = useMemo(() => {
     let results = redirects.filter((r) => {
       const matchesSearch =
         (r.from ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (r.to ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesType = filterType === 'all' || r.type === filterType;
-      return matchesSearch && matchesType;
-    });
+        (r.to ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesType = filterType === 'all' || r.type === filterType
+      return matchesSearch && matchesType
+    })
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (r) => [r.from, r.to]);
+      results = sortByRelevance(results, searchQuery, (r) => [r.from, r.to])
     } else if (sortConfig) {
       results = [...results].sort((a, b) => {
-        let cmp: number;
+        let cmp: number
         if (sortConfig.key === 'hits') {
-          cmp = a.hits - b.hits;
+          cmp = a.hits - b.hits
         } else if (sortConfig.key === 'active') {
-          cmp = Number(a.active) - Number(b.active);
+          cmp = Number(a.active) - Number(b.active)
         } else {
-          cmp = String(a[sortConfig.key]).localeCompare(String(b[sortConfig.key]));
+          cmp = String(a[sortConfig.key]).localeCompare(String(b[sortConfig.key]))
         }
-        return sortConfig.direction === 'asc' ? cmp : -cmp;
-      });
+        return sortConfig.direction === 'asc' ? cmp : -cmp
+      })
     }
-    return results;
-  }, [redirects, searchQuery, filterType, sortConfig]);
+    return results
+  }, [redirects, searchQuery, filterType, sortConfig])
 
   const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
     const res = await cmsApi('/redirects', {
       method: 'POST',
-      body: JSON.stringify({ from: newRedirect.source, to: newRedirect.destination, type: newRedirect.type }),
-    });
+      body: JSON.stringify({
+        from: newRedirect.source,
+        to: newRedirect.destination,
+        type: newRedirect.type,
+      }),
+    })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Redirect added');
-      refetch();
+      toast.success('Redirect added')
+      refetch()
     }
-    setShowAddDialog(false);
-  };
+    setShowAddDialog(false)
+  }
 
   const handleDelete = async (id: number) => {
-    const res = await cmsApi(`/redirects/${id}`, { method: 'DELETE' });
+    const res = await cmsApi(`/redirects/${id}`, { method: 'DELETE' })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Redirect deleted');
-      refetch();
+      toast.success('Redirect deleted')
+      refetch()
     }
-  };
+  }
 
   function SortHeader({ label, sortKey }: { label: string; sortKey: RedirectSortKey }) {
-    const active = sortConfig?.key === sortKey;
+    const active = sortConfig?.key === sortKey
     return (
       <button
         type="button"
@@ -86,12 +105,16 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       >
         {label}
         {active ? (
-          sortConfig!.direction === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
+          sortConfig!.direction === 'asc' ? (
+            <ArrowUp className="w-3 h-3" />
+          ) : (
+            <ArrowDown className="w-3 h-3" />
+          )
         ) : (
           <ArrowUpDown className="w-3 h-3 text-gray-400" />
         )}
       </button>
-    );
+    )
   }
 
   if (loading) {
@@ -99,7 +122,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -108,7 +131,12 @@ export function Redirects({ onNavigate }: RedirectsProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -160,80 +188,102 @@ export function Redirects({ onNavigate }: RedirectsProps) {
           <p className="text-sm text-gray-500">Add your first redirect to get started.</p>
         </div>
       ) : (
-      <div className="rounded-lg border border-gray-200 bg-white">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="border-b border-gray-200 bg-gray-50">
-              <tr>
-                <th className="px-4 py-2 text-left"><SortHeader label="Source URL" sortKey="from" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Destination URL" sortKey="to" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Type" sortKey="type" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Hits" sortKey="hits" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Status" sortKey="active" /></th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200">
-              {filteredAndSorted.map((redirect) => (
-                <tr key={redirect.id} className="transition-colors hover:bg-gray-50">
-                  <td className="px-4 py-3">
-                    <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">{redirect.from}</code>
-                  </td>
-                  <td className="px-4 py-3">
-                    <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">{redirect.to}</code>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span
-                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-                        redirect.type === '301' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'
-                      }`}
-                    >
-                      {redirect.type}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3 text-sm text-gray-600">{redirect.hits.toLocaleString()}</td>
-                  <td className="px-4 py-3">
-                    <span
-                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-                        redirect.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                      }`}
-                    >
-                      {redirect.active ? 'Active' : 'Inactive'}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => onNavigate?.(`/redirects/${redirect.id}/edit`)}
-                        className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                        aria-label="Edit redirect"
+        <div className="rounded-lg border border-gray-200 bg-white">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="border-b border-gray-200 bg-gray-50">
+                <tr>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Source URL" sortKey="from" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Destination URL" sortKey="to" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Type" sortKey="type" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Hits" sortKey="hits" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Status" sortKey="active" />
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {filteredAndSorted.map((redirect) => (
+                  <tr key={redirect.id} className="transition-colors hover:bg-gray-50">
+                    <td className="px-4 py-3">
+                      <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
+                        {redirect.from}
+                      </code>
+                    </td>
+                    <td className="px-4 py-3">
+                      <code className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-900">
+                        {redirect.to}
+                      </code>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                          redirect.type === '301'
+                            ? 'bg-blue-100 text-blue-800'
+                            : 'bg-purple-100 text-purple-800'
+                        }`}
                       >
-                        <Pencil className="h-4 w-4 text-gray-600" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => handleDelete(redirect.id)}
-                        className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                        aria-label="Delete redirect"
+                        {redirect.type}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-600">
+                      {redirect.hits.toLocaleString()}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                          redirect.active
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-gray-100 text-gray-800'
+                        }`}
                       >
-                        <Trash2 className="h-4 w-4 text-red-600" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                        {redirect.active ? 'Active' : 'Inactive'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => onNavigate?.(`/redirects/${redirect.id}/edit`)}
+                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                          aria-label="Edit redirect"
+                        >
+                          <Pencil className="h-4 w-4 text-gray-600" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleDelete(redirect.id)}
+                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                          aria-label="Delete redirect"
+                        >
+                          <Trash2 className="h-4 w-4 text-red-600" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
       )}
 
       <Dialog.Root open={showAddDialog} onOpenChange={setShowAddDialog}>
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
           <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
-            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">Add Redirect</Dialog.Title>
+            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
+              Add Redirect
+            </Dialog.Title>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">Source URL</label>
@@ -247,7 +297,9 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                 />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Destination URL</label>
+                <label className="mb-1 block text-sm font-medium text-gray-700">
+                  Destination URL
+                </label>
                 <input
                   type="text"
                   value={newRedirect.destination}
@@ -258,10 +310,14 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                 />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Redirect Type</label>
+                <label className="mb-1 block text-sm font-medium text-gray-700">
+                  Redirect Type
+                </label>
                 <select
                   value={newRedirect.type}
-                  onChange={(e) => setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })}
+                  onChange={(e) =>
+                    setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })
+                  }
                   className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                 >
                   <option value="301">301 (Permanent)</option>
@@ -289,5 +345,5 @@ export function Redirects({ onNavigate }: RedirectsProps) {
         </Dialog.Portal>
       </Dialog.Root>
     </div>
-  );
+  )
 }

package/src/views/ResetPassword.tsx

@@ -1,21 +1,21 @@
-'use client';
+'use client'
 
-import { useState, type FormEvent } from 'react';
-import { Shield, Eye, EyeOff, Loader2, CheckCircle2, AlertTriangle, XCircle } from 'lucide-react';
-import { cmsApi } from '../lib/api.js';
+import { useState, type FormEvent } from 'react'
+import { Shield, Eye, EyeOff, Loader2, CheckCircle2, AlertTriangle, XCircle } from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
 
 export interface ResetPasswordProps {
-  onNavigate: (path: string) => void;
-  token: string | null;
+  onNavigate: (path: string) => void
+  token: string | null
 }
 
 export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [error, setError] = useState('');
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [error, setError] = useState('')
 
   if (!token) {
     return (
@@ -26,7 +26,9 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
               <XCircle className="w-7 h-7 text-red-600" />
             </div>
             <h1 className="text-2xl font-bold text-gray-900">Invalid Reset Link</h1>
-            <p className="text-gray-600 mt-2">This password reset link is invalid or has expired.</p>
+            <p className="text-gray-600 mt-2">
+              This password reset link is invalid or has expired.
+            </p>
           </div>
           <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm text-center space-y-4">
             <button
@@ -46,37 +48,37 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
-  const passwordsMatch = password === confirmPassword;
-  const meetsLength = password.length >= 8;
-  const canSubmit = password && confirmPassword && passwordsMatch && meetsLength && !submitting;
+  const passwordsMatch = password === confirmPassword
+  const meetsLength = password.length >= 8
+  const canSubmit = password && confirmPassword && passwordsMatch && meetsLength && !submitting
 
   const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (!canSubmit) return;
+    e.preventDefault()
+    if (!canSubmit) return
 
-    setError('');
-    setSubmitting(true);
+    setError('')
+    setSubmitting(true)
 
     try {
       const result = await cmsApi<{ success: boolean }>('/auth/reset-password', {
         method: 'POST',
         body: JSON.stringify({ token, password }),
-      });
+      })
 
       if (result.error) {
-        setError(result.error);
+        setError(result.error)
       } else {
-        setSuccess(true);
+        setSuccess(true)
       }
     } catch {
-      setError('An unexpected error occurred. Please try again.');
+      setError('An unexpected error occurred. Please try again.')
     } finally {
-      setSubmitting(false);
+      setSubmitting(false)
     }
-  };
+  }
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
@@ -100,7 +102,8 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
                 <CheckCircle2 className="w-6 h-6 text-green-600" />
               </div>
               <p className="text-sm text-gray-600">
-                Your password has been successfully reset. All existing sessions have been revoked for security.
+                Your password has been successfully reset. All existing sessions have been revoked
+                for security.
               </p>
               <button
                 type="button"
@@ -120,7 +123,10 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
               )}
 
               <div>
-                <label htmlFor="reset-password" className="block text-sm font-medium text-gray-700 mb-1.5">
+                <label
+                  htmlFor="reset-password"
+                  className="block text-sm font-medium text-gray-700 mb-1.5"
+                >
                   New Password
                 </label>
                 <div className="relative">
@@ -146,12 +152,17 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
                   </button>
                 </div>
                 {password && !meetsLength && (
-                  <p className="mt-1 text-xs text-red-600">Password must be at least 8 characters</p>
+                  <p className="mt-1 text-xs text-red-600">
+                    Password must be at least 8 characters
+                  </p>
                 )}
               </div>
 
               <div>
-                <label htmlFor="reset-confirm" className="block text-sm font-medium text-gray-700 mb-1.5">
+                <label
+                  htmlFor="reset-confirm"
+                  className="block text-sm font-medium text-gray-700 mb-1.5"
+                >
                   Confirm Password
                 </label>
                 <input
@@ -188,5 +199,5 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }