feat(19-02): templates list page with create-template modal
- Server component at /portal/templates queries documentTemplates with LEFT JOIN to formTemplates - TemplatesListClient renders list rows with name, form name, field count, last updated - Create modal POSTs to /api/templates and navigates to /portal/templates/[id] on success - Empty state with CTA when no templates exist - Gold #C9A84C accent, navy #1B2B4B headings, inline styles matching portal patterns
This commit is contained in:
Chandler Copeland
@@ -0,0 +1,283 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { SignatureFieldData } from '@/lib/db/schema';
|
||||
|
||||
interface TemplateRow {
|
||||
id: string;
|
||||
name: string;
|
||||
formName: string | null;
|
||||
signatureFields: SignatureFieldData[] | null;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
interface FormOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface TemplatesListClientProps {
|
||||
templates: TemplateRow[];
|
||||
forms: FormOption[];
|
||||
}
|
||||
|
||||
export function TemplatesListClient({ templates, forms }: TemplatesListClientProps) {
|
||||
const router = useRouter();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [templateName, setTemplateName] = useState('');
|
||||
const [formTemplateId, setFormTemplateId] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!templateName.trim() || !formTemplateId) {
|
||||
setCreateError('Please provide a template name and select a form.');
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
setCreateError(null);
|
||||
try {
|
||||
const res = await fetch('/api/templates', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: templateName.trim(), formTemplateId }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: 'Failed to create template' }));
|
||||
setCreateError(err.error ?? 'Failed to create template');
|
||||
return;
|
||||
}
|
||||
const data = await res.json() as { id: string };
|
||||
router.push(`/portal/templates/${data.id}`);
|
||||
} catch {
|
||||
setCreateError('Failed to create template. Please try again.');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FAF9F7', minHeight: '100vh', padding: 32 }}>
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24 }}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#1B2B4B', margin: 0 }}>
|
||||
Templates
|
||||
</h1>
|
||||
<p style={{ fontSize: 14, fontWeight: 400, color: '#6B7280', margin: '4px 0 0' }}>
|
||||
{templates.length} template{templates.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setShowModal(true); setCreateError(null); setTemplateName(''); setFormTemplateId(''); }}
|
||||
style={{
|
||||
backgroundColor: '#C9A84C',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
height: 36,
|
||||
padding: '0 16px',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
+ New Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
{templates.length === 0 ? (
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 8,
|
||||
padding: '48px 32px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #E5E7EB',
|
||||
}}>
|
||||
<h2 style={{ fontSize: 16, fontWeight: 600, color: '#1B2B4B', marginBottom: 8 }}>
|
||||
No templates yet
|
||||
</h2>
|
||||
<p style={{ fontSize: 14, color: '#6B7280', marginBottom: 24 }}>
|
||||
Create a template to reuse field placements across documents.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => { setShowModal(true); setCreateError(null); setTemplateName(''); setFormTemplateId(''); }}
|
||||
style={{
|
||||
backgroundColor: '#C9A84C',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
height: 36,
|
||||
padding: '0 16px',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
+ Create your first template
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{templates.map((template) => {
|
||||
const count = (template.signatureFields ?? []).length;
|
||||
return (
|
||||
<div
|
||||
key={template.id}
|
||||
onClick={() => router.push(`/portal/templates/${template.id}`)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '12px 16px',
|
||||
backgroundColor: 'white',
|
||||
borderBottom: '1px solid #E5E7EB',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.backgroundColor = '#F0EDE8'; }}
|
||||
onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.backgroundColor = 'white'; }}
|
||||
>
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: '#1B2B4B' }}>
|
||||
{template.name}
|
||||
</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 400, color: '#6B7280', marginTop: 2 }}>
|
||||
{template.formName ?? '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', flexShrink: 0 }}>
|
||||
<div style={{ fontSize: 12, fontWeight: 400, color: '#6B7280' }}>
|
||||
{count} field{count !== 1 ? 's' : ''}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, fontWeight: 400, color: '#6B7280', marginTop: 2 }}>
|
||||
{new Date(template.updatedAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create Template Modal */}
|
||||
{showModal && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
zIndex: 50,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setShowModal(false); }}
|
||||
>
|
||||
<div style={{
|
||||
backgroundColor: '#F9FAFB',
|
||||
borderRadius: 8,
|
||||
padding: 24,
|
||||
maxWidth: 400,
|
||||
width: '100%',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
|
||||
}}>
|
||||
<h2 style={{ fontSize: 18, fontWeight: 700, color: '#1B2B4B', marginBottom: 20 }}>
|
||||
New Template
|
||||
</h2>
|
||||
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
|
||||
Template name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={templateName}
|
||||
onChange={(e) => setTemplateName(e.target.value)}
|
||||
placeholder="e.g. Buyer Representation Agreement"
|
||||
style={{
|
||||
width: '100%',
|
||||
fontSize: 14,
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #E5E7EB',
|
||||
borderRadius: 6,
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') handleCreate(); }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
|
||||
Select form
|
||||
</label>
|
||||
<select
|
||||
value={formTemplateId}
|
||||
onChange={(e) => setFormTemplateId(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
fontSize: 14,
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #E5E7EB',
|
||||
borderRadius: 6,
|
||||
outline: 'none',
|
||||
backgroundColor: 'white',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<option value="">-- Select a form --</option>
|
||||
{forms.map((form) => (
|
||||
<option key={form.id} value={form.id}>{form.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{createError && (
|
||||
<p style={{ fontSize: 13, color: '#DC2626', marginBottom: 12 }}>{createError}</p>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
padding: '8px 16px',
|
||||
border: '1px solid #E5E7EB',
|
||||
borderRadius: 6,
|
||||
backgroundColor: 'white',
|
||||
cursor: 'pointer',
|
||||
color: '#374151',
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={creating}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#C9A84C',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
cursor: creating ? 'not-allowed' : 'pointer',
|
||||
opacity: creating ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{creating ? 'Creating...' : 'Create Template'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { db } from '@/lib/db';
|
||||
import { documentTemplates, formTemplates } from '@/lib/db/schema';
|
||||
import { eq, isNull, desc } from 'drizzle-orm';
|
||||
import { TemplatesListClient } from './TemplatesListClient';
|
||||
|
||||
export default async function TemplatesPage() {
|
||||
const templates = await db
|
||||
.select({
|
||||
id: documentTemplates.id,
|
||||
name: documentTemplates.name,
|
||||
formName: formTemplates.name,
|
||||
signatureFields: documentTemplates.signatureFields,
|
||||
updatedAt: documentTemplates.updatedAt,
|
||||
})
|
||||
.from(documentTemplates)
|
||||
.leftJoin(formTemplates, eq(documentTemplates.formTemplateId, formTemplates.id))
|
||||
.where(isNull(documentTemplates.archivedAt))
|
||||
.orderBy(desc(documentTemplates.updatedAt));
|
||||
|
||||
const forms = await db
|
||||
.select({ id: formTemplates.id, name: formTemplates.name })
|
||||
.from(formTemplates)
|
||||
.orderBy(formTemplates.name);
|
||||
|
||||
return <TemplatesListClient templates={templates} forms={forms} />;
|
||||
}
|
||||
Reference in New Issue
Block a user