@@ -31,3 +27,11 @@ export default function AuthPageRoute() {
)
}
+
+export default function AuthPageRoute() {
+ return (
+
+
+
+ )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2b442e2..298070c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { AuthProvider } from "@/contexts/auth-context"
import { AppLayout } from "@/components/layout/app-layout"
import { ToastProvider } from "@/components/ui/toast"
import "./globals.css"
+import "@tldraw/tldraw/tldraw.css"
const poppins = Poppins({
subsets: ["latin"],
diff --git a/src/components/admin/admin-templates-list.tsx b/src/components/admin/admin-templates-list.tsx
index 40e12c8..95198ef 100644
--- a/src/components/admin/admin-templates-list.tsx
+++ b/src/components/admin/admin-templates-list.tsx
@@ -2,7 +2,9 @@
import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip } from '@/components/ui/tooltip'
import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -21,7 +23,9 @@ import {
GraduationCap,
Plus,
Save,
- X
+ X,
+ ChevronLeft,
+ ChevronRight
} from 'lucide-react'
import { adminApi, formatDate, getComplexityColor } from '@/lib/api/admin'
import { BACKEND_URL } from '@/config/backend'
@@ -43,6 +47,13 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
const [selectedTemplate, setSelectedTemplate] = useState
(null)
const [showFeatureSelection, setShowFeatureSelection] = useState(false)
const [showCreateModal, setShowCreateModal] = useState(false)
+ const [showEditModal, setShowEditModal] = useState(false)
+ const [editingTemplate, setEditingTemplate] = useState(null)
+ // Pagination state
+ const [page, setPage] = useState(1)
+ const [limit, setLimit] = useState(6)
+ const [hasMore, setHasMore] = useState(false)
+ const [totalTemplates, setTotalTemplates] = useState(null)
// Create template form state
const [newTemplate, setNewTemplate] = useState({
@@ -83,15 +94,19 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
console.log('Loading admin templates data...')
+ const offset = (page - 1) * limit
+ const effectiveCategory = categoryFilter === 'all' ? undefined : categoryFilter
const [templatesResponse, statsResponse] = await Promise.all([
- adminApi.getAdminTemplates(50, 0, categoryFilter, searchQuery),
+ adminApi.getAdminTemplates(limit, offset, effectiveCategory, searchQuery),
adminApi.getAdminTemplateStats()
])
console.log('Admin templates response:', templatesResponse)
console.log('Admin template stats response:', statsResponse)
- setTemplates(templatesResponse || [])
+ setTemplates((templatesResponse?.templates) || [])
+ setHasMore(Boolean(templatesResponse?.pagination?.hasMore ?? ((templatesResponse?.templates?.length || 0) === limit)))
+ setTotalTemplates(templatesResponse?.pagination?.total ?? (statsResponse as any)?.total_templates ?? null)
setStats(statsResponse)
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load admin templates')
@@ -103,7 +118,7 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
useEffect(() => {
loadData()
- }, [categoryFilter, searchQuery])
+ }, [page, categoryFilter, searchQuery])
// Handle template selection for features
const handleManageFeatures = (template: AdminTemplate) => {
@@ -124,6 +139,24 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
setShowFeatureSelection(true)
}
+ // Handle edit template
+ const handleEditTemplate = (template: AdminTemplate) => {
+ setEditingTemplate(template)
+ setShowEditModal(true)
+ }
+
+ // Handle delete template
+ const handleDeleteTemplate = async (template: AdminTemplate) => {
+ if (!confirm(`Delete template "${template.title}"? This cannot be undone.`)) return
+ try {
+ await adminApi.deleteAdminTemplate(template.id)
+ await loadData()
+ } catch (err) {
+ console.error('Delete failed', err)
+ alert('Failed to delete template')
+ }
+ }
+
// Handle create template form submission
const handleCreateTemplate = async (e: React.FormEvent) => {
e.preventDefault()
@@ -279,57 +312,102 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
return matchesSearch && matchesCategory
})
- const TemplateCard = ({ template }: { template: AdminTemplate }) => (
-
-
-
-
-
- {template.title}
-
-
-
- {template.type}
-
-
- {template.category}
-
+ const MAX_TITLE_CHARS = 25
+ const MAX_DESCRIPTION_PREVIEW_CHARS = 220
+
+ const TemplateCard = ({ template }: { template: AdminTemplate }) => {
+ const [descExpanded, setDescExpanded] = useState(false)
+
+ const title = template.title || ''
+ const truncatedTitle = title.length > MAX_TITLE_CHARS ? `${title.slice(0, MAX_TITLE_CHARS - 1)}…` : title
+
+ const fullDesc = template.description || ''
+ const needsClamp = fullDesc.length > MAX_DESCRIPTION_PREVIEW_CHARS
+ const shownDesc = descExpanded || !needsClamp
+ ? fullDesc
+ : `${fullDesc.slice(0, MAX_DESCRIPTION_PREVIEW_CHARS)}…`
+
+ return (
+
handleManageFeatures(template)}
+ tabIndex={0}
+ onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleManageFeatures(template) } }}
+ >
+
+
+
+
+
+ {truncatedTitle}
+
+
+
+
+ {template.type}
+
+
+ {template.category}
+
+
+
+
e.stopPropagation()}>
+
+
+
+
+
+
+ handleEditTemplate(template)} className="cursor-pointer">Edit
+ handleDeleteTemplate(template)} className="text-red-400 focus:text-red-400 cursor-pointer">Delete
+
+
- {template.description && (
-
{template.description}
- )}
-
+ {fullDesc && (
+
+ {shownDesc}
+ {needsClamp && (
+
+ )}
+
+ )}
+
-
-
-
-
-
{(template as any).feature_count || 0} features
+
+
+
+
+ {(template as any).feature_count || 0} features
+
+
+ {template.created_at && formatDate(template.created_at)}
+
- {template.created_at && formatDate(template.created_at)}
-
-
- {template.gradient && (
-
- Style: {template.gradient}
-
- )}
-
-
- )
+ {template.gradient && (
+
+ Style: {template.gradient}
+
+ )}
+
+
+ )
+ }
if (loading) {
return (
@@ -407,7 +485,7 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
- {(stats as any).total_templates || templates.length}
+ {totalTemplates ?? (stats as any).total_templates ?? templates.length}
@@ -453,12 +531,12 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
setSearchQuery(e.target.value)}
+ onChange={(e) => { setSearchQuery(e.target.value); setPage(1) }}
className="pl-10 bg-white/5 border-white/10 text-white"
/>
-
diff --git a/src/components/admin/admin-templates-manager.tsx b/src/components/admin/admin-templates-manager.tsx
index 5f7ffad..97d60a8 100644
--- a/src/components/admin/admin-templates-manager.tsx
+++ b/src/components/admin/admin-templates-manager.tsx
@@ -22,7 +22,9 @@ import {
Plus,
Save,
Files,
- Settings
+ Settings,
+ ChevronLeft,
+ ChevronRight
} from 'lucide-react'
import { adminApi, formatDate, getStatusColor, getComplexityColor } from '@/lib/api/admin'
import { AdminTemplate, AdminStats } from '@/types/admin.types'
@@ -35,7 +37,7 @@ import { useAdminNotifications } from '@/contexts/AdminNotificationContext'
export function AdminTemplatesManager() {
const [activeTab, setActiveTab] = useState("admin-templates")
const [customTemplates, setCustomTemplates] = useState