mirror of
https://github.com/velocitatem/cvfs.git
synced 2026-05-31 16:53:38 +00:00
feat(dashboard): complete CV branching dashboard with auth and full editing workflow
- Visual branch heritage tree with colored dots and connecting lines, depth-aware expand/collapse - Dashboard 3-tab layout: Content (inline block editing + patch staging), Patches (diff view), Submissions (AI suggestions) - Inline block editing: click to edit any CV block, stage edits, save as named branch with pre-filled patches - Submissions tab: create applications, request AI tailoring suggestions, accept/reject per suggestion - Simple hardcoded login (username/password via env vars LOGIN_USER/LOGIN_PASS, defaults admin/admin) - Authentik OIDC integration: authorize redirect + callback exchange, configurable via NEXT_PUBLIC_AUTHENTIK_* - Middleware protecting /dashboard with session cookie verification (HMAC-SHA256) - Auth API routes: /api/auth/login, /api/auth/logout, /api/auth/callback, /api/auth/token - Backend: GET/PATCH submission routes for listing submissions and accepting/rejecting AI suggestions - API client: OIDC bearer token forwarding from client-readable cookie https://claude.ai/code/session_01CdisLhbC2kVt2hxfJ7TNPf
This commit is contained in:
Claude
@@ -6,25 +6,25 @@ import DiffViewer from '@/components/cv/DiffViewer';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
createBranch, createSubmission, Document, downloadVersionUrl,
|
||||
fetchDocuments, publishVersion, uploadDocument, Version,
|
||||
fetchDocuments, fetchSubmissions, publishVersion, requestAiSuggestions,
|
||||
Submission, StructuredBlock, Suggestion, updateSuggestion, uploadDocument, Version,
|
||||
} from '@/libs/api';
|
||||
|
||||
// ─── tiny helpers ────────────────────────────────────────────────────────────
|
||||
// ── helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function fmt(iso: string) {
|
||||
return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
}
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="label" style={{ padding: '0 0 8px' }}>{title}</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
function statusBadge(status: string) {
|
||||
const cls = ({
|
||||
draft: 'badge-draft', tailoring: 'badge-submitted', pending_review: 'badge-interviewing',
|
||||
published: 'badge-public', archived: 'badge-closed',
|
||||
} as Record<string, string>)[status] ?? 'badge-draft';
|
||||
return <span className={`badge ${cls}`}>{status.replace('_', ' ')}</span>;
|
||||
}
|
||||
|
||||
// ─── modals ───────────────────────────────────────────────────────────────────
|
||||
// ── modals ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function UploadModal({ onClose, onDone }: { onClose: () => void; onDone: (doc: Document) => void }) {
|
||||
const [title, setTitle] = useState('');
|
||||
@@ -46,17 +46,18 @@ function UploadModal({ onClose, onDone }: { onClose: () => void; onDone: (doc: D
|
||||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-title">Upload CV</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<input placeholder="Title (e.g. My Resume)" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
<input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} autoFocus />
|
||||
<input placeholder="Description (optional)" value={desc} onChange={e => setDesc(e.target.value)} />
|
||||
<div
|
||||
onClick={() => ref.current?.click()}
|
||||
style={{ border: '1px dashed var(--border-strong)', borderRadius: 5, padding: '18px 0', textAlign: 'center', cursor: 'pointer', fontSize: 13, color: file ? 'var(--text)' : 'var(--text-muted)' }}
|
||||
>
|
||||
{file ? file.name : 'Click to select .docx file'}
|
||||
<div onClick={() => ref.current?.click()} style={{
|
||||
border: '1px dashed var(--border-strong)', borderRadius: 5, padding: '16px 0',
|
||||
textAlign: 'center', cursor: 'pointer', fontSize: 13,
|
||||
color: file ? 'var(--text)' : 'var(--text-muted)',
|
||||
}}>
|
||||
{file ? file.name : 'Click to select .docx'}
|
||||
</div>
|
||||
<input ref={ref} type="file" accept=".docx" style={{ display: 'none' }} onChange={e => setFile(e.target.files?.[0] ?? null)} />
|
||||
{error && <div style={{ fontSize: 12, color: '#dc2626' }}>{error}</div>}
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-ghost" style={{ flex: 1 }} onClick={onClose}>Cancel</button>
|
||||
<button className="btn btn-primary" style={{ flex: 1 }} onClick={submit} disabled={loading}>
|
||||
{loading ? 'Uploading…' : 'Upload'}
|
||||
@@ -68,31 +69,51 @@ function UploadModal({ onClose, onDone }: { onClose: () => void; onDone: (doc: D
|
||||
);
|
||||
}
|
||||
|
||||
function BranchModal({ version, onClose, onDone }: { version: Version; onClose: () => void; onDone: (v: Version) => void }) {
|
||||
function BranchModal({
|
||||
version, initialPatches, onClose, onDone,
|
||||
}: {
|
||||
version: Version;
|
||||
initialPatches?: Array<{ target_path: string; operation: string; old_value: string; new_value: string }>;
|
||||
onClose: () => void;
|
||||
onDone: (v: Version) => void;
|
||||
}) {
|
||||
const [name, setName] = useState('');
|
||||
const [label, setLabel] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const patches = initialPatches ?? [];
|
||||
|
||||
const submit = async () => {
|
||||
if (!name.trim()) { setError('Branch name required.'); return; }
|
||||
setLoading(true); setError('');
|
||||
try { onDone(await createBranch(version.id, name.trim(), label.trim() || null)); }
|
||||
try { onDone(await createBranch(version.id, name.trim(), label.trim() || null, patches as Record<string, unknown>[])); }
|
||||
catch (e: unknown) { setError(e instanceof Error ? e.message : 'Failed'); setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overlay" onClick={onClose}>
|
||||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-title">New branch from <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 400 }}>{version.branch_name}</span></div>
|
||||
<div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
|
||||
<div className="modal-title">
|
||||
New branch from <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 400 }}>{version.branch_name}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<input placeholder="Branch name (e.g. ml-engineer)" value={name} onChange={e => setName(e.target.value)} />
|
||||
<input placeholder="Branch name (e.g. ml-engineer)" value={name} onChange={e => setName(e.target.value)} autoFocus />
|
||||
<input placeholder="Label (optional)" value={label} onChange={e => setLabel(e.target.value)} />
|
||||
{patches.length > 0 && (
|
||||
<div style={{ padding: '8px 10px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}>
|
||||
<div className="label" style={{ marginBottom: 6 }}>Staged edits ({patches.length})</div>
|
||||
{patches.map((p, i) => (
|
||||
<div key={i} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>
|
||||
± {p.target_path}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{error && <div style={{ fontSize: 12, color: '#dc2626' }}>{error}</div>}
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-ghost" style={{ flex: 1 }} onClick={onClose}>Cancel</button>
|
||||
<button className="btn btn-primary" style={{ flex: 1 }} onClick={submit} disabled={loading}>
|
||||
{loading ? 'Creating…' : 'Create'}
|
||||
{loading ? 'Creating…' : 'Create branch'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,30 +122,38 @@ function BranchModal({ version, onClose, onDone }: { version: Version; onClose:
|
||||
);
|
||||
}
|
||||
|
||||
function SubmissionModal({ version, onClose, onDone }: { version: Version; onClose: () => void; onDone: () => void }) {
|
||||
function SubmissionModal({ version, onClose, onDone }: { version: Version; onClose: () => void; onDone: (s: Submission) => void }) {
|
||||
const [company, setCompany] = useState('');
|
||||
const [role, setRole] = useState('');
|
||||
const [url, setUrl] = useState('');
|
||||
const [jd, setJd] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const submit = async () => {
|
||||
if (!company.trim() || !role.trim()) { setError('Company and role required.'); return; }
|
||||
setLoading(true); setError('');
|
||||
try { await createSubmission(version.id, company.trim(), role.trim(), url.trim() || null); onDone(); }
|
||||
try { onDone(await createSubmission(version.id, company.trim(), role.trim(), url.trim() || null, jd.trim() || null)); }
|
||||
catch (e: unknown) { setError(e instanceof Error ? e.message : 'Failed'); setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overlay" onClick={onClose}>
|
||||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
|
||||
<div className="modal-title">New submission from <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 400 }}>{version.branch_name}</span></div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<input placeholder="Company name" value={company} onChange={e => setCompany(e.target.value)} />
|
||||
<input placeholder="Role title" value={role} onChange={e => setRole(e.target.value)} />
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<input placeholder="Company" value={company} onChange={e => setCompany(e.target.value)} autoFocus />
|
||||
<input placeholder="Role title" value={role} onChange={e => setRole(e.target.value)} />
|
||||
</div>
|
||||
<input placeholder="Job URL (optional)" value={url} onChange={e => setUrl(e.target.value)} />
|
||||
<textarea
|
||||
placeholder="Paste job description (used for AI tailoring)"
|
||||
value={jd} onChange={e => setJd(e.target.value)}
|
||||
style={{ height: 100, resize: 'vertical' }}
|
||||
/>
|
||||
{error && <div style={{ fontSize: 12, color: '#dc2626' }}>{error}</div>}
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-ghost" style={{ flex: 1 }} onClick={onClose}>Cancel</button>
|
||||
<button className="btn btn-primary" style={{ flex: 1 }} onClick={submit} disabled={loading}>
|
||||
{loading ? 'Saving…' : 'Create'}
|
||||
@@ -154,12 +183,12 @@ function PublishModal({ version, onClose, onDone }: { version: Version; onClose:
|
||||
<div className="modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-title">Publish version</div>
|
||||
<p style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 12 }}>
|
||||
Creates an immutable public artifact. The link stays stable even if you edit further.
|
||||
Freezes an immutable public artifact. Existing shares remain stable.
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<input placeholder="Custom slug (optional)" value={slug} onChange={e => setSlug(e.target.value)} />
|
||||
<input placeholder="Custom slug (optional)" value={slug} onChange={e => setSlug(e.target.value)} autoFocus />
|
||||
{error && <div style={{ fontSize: 12, color: '#dc2626' }}>{error}</div>}
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-ghost" style={{ flex: 1 }} onClick={onClose}>Cancel</button>
|
||||
<button className="btn btn-primary" style={{ flex: 1 }} onClick={submit} disabled={loading}>
|
||||
{loading ? 'Publishing…' : 'Publish'}
|
||||
@@ -171,9 +200,275 @@ function PublishModal({ version, onClose, onDone }: { version: Version; onClose:
|
||||
);
|
||||
}
|
||||
|
||||
// ─── main dashboard ───────────────────────────────────────────────────────────
|
||||
// ── content tab with inline editing ──────────────────────────────────────────
|
||||
|
||||
type PendingEdit = { old_value: string; new_value: string };
|
||||
|
||||
function ContentTab({
|
||||
blocks,
|
||||
pendingEdits,
|
||||
onEdit,
|
||||
}: {
|
||||
blocks: StructuredBlock[];
|
||||
pendingEdits: Map<string, PendingEdit>;
|
||||
onEdit: (path: string, oldVal: string, newVal: string) => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState<string | null>(null);
|
||||
const [draft, setDraft] = useState('');
|
||||
|
||||
const startEdit = (b: StructuredBlock) => {
|
||||
setEditing(b.path);
|
||||
setDraft(pendingEdits.get(b.path)?.new_value ?? b.text);
|
||||
};
|
||||
|
||||
const saveEdit = (b: StructuredBlock) => {
|
||||
if (draft.trim() && draft !== b.text) {
|
||||
onEdit(b.path, b.text, draft.trim());
|
||||
}
|
||||
setEditing(null);
|
||||
};
|
||||
|
||||
const cancelEdit = () => setEditing(null);
|
||||
|
||||
if (!blocks.length) return (
|
||||
<div style={{ padding: '20px 0', color: 'var(--text-faint)', fontSize: 13 }}>No content blocks parsed.</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{blocks.map((b) => {
|
||||
const pending = pendingEdits.get(b.path);
|
||||
const isEditing = editing === b.path;
|
||||
return (
|
||||
<div key={b.path} style={{
|
||||
borderBottom: '1px solid var(--border)',
|
||||
padding: '6px 0',
|
||||
background: pending ? '#fffbeb' : 'transparent',
|
||||
}}>
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
|
||||
<span style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-faint)',
|
||||
flexShrink: 0, width: 100, paddingTop: 3,
|
||||
}}>
|
||||
{b.path}
|
||||
</span>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
{isEditing ? (
|
||||
<>
|
||||
<textarea
|
||||
value={draft}
|
||||
onChange={e => setDraft(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter' && e.metaKey) saveEdit(b); if (e.key === 'Escape') cancelEdit(); }}
|
||||
style={{ width: '100%', minHeight: 60, fontSize: 13, resize: 'vertical', marginBottom: 6 }}
|
||||
autoFocus
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<button className="btn btn-primary" style={{ fontSize: 11, padding: '3px 8px' }} onClick={() => saveEdit(b)}>
|
||||
Stage edit
|
||||
</button>
|
||||
<button className="btn btn-ghost" style={{ fontSize: 11, padding: '3px 8px' }} onClick={cancelEdit}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
|
||||
<span style={{
|
||||
fontSize: 13, color: pending ? '#92400e' : 'var(--text)',
|
||||
lineHeight: 1.5, flex: 1,
|
||||
}}>
|
||||
{pending ? pending.new_value : b.text}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
style={{ fontSize: 11, padding: '2px 7px', flexShrink: 0 }}
|
||||
onClick={() => startEdit(b)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── submissions tab ───────────────────────────────────────────────────────────
|
||||
|
||||
function SubmissionsTab({
|
||||
submissions, loading, versionId,
|
||||
onNewSubmission, onRefresh,
|
||||
}: {
|
||||
submissions: Submission[];
|
||||
loading: boolean;
|
||||
versionId: string;
|
||||
onNewSubmission: () => void;
|
||||
onRefresh: () => void;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState<string | null>(null);
|
||||
const [aiLoading, setAiLoading] = useState<string | null>(null);
|
||||
const [aiJd, setAiJd] = useState<Record<string, string>>({});
|
||||
const [suggestions, setSuggestions] = useState<Record<string, Suggestion[]>>({});
|
||||
|
||||
const loadAi = async (s: Submission) => {
|
||||
const jd = aiJd[s.id] ?? s.job_description ?? '';
|
||||
if (!jd.trim()) return;
|
||||
setAiLoading(s.id);
|
||||
try {
|
||||
const res = await requestAiSuggestions(s.id, jd);
|
||||
setSuggestions(prev => ({ ...prev, [s.id]: res }));
|
||||
onRefresh();
|
||||
} catch { /* ignore */ }
|
||||
finally { setAiLoading(null); }
|
||||
};
|
||||
|
||||
const toggleSuggestion = async (sub: Submission, sug: Suggestion, accepted: boolean) => {
|
||||
try {
|
||||
await updateSuggestion(sub.id, sug.id, accepted);
|
||||
setSuggestions(prev => ({
|
||||
...prev,
|
||||
[sub.id]: (prev[sub.id] ?? sub.suggestions).map(s => s.id === sug.id ? { ...s, accepted } : s),
|
||||
}));
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ padding: '20px 0', color: 'var(--text-faint)', fontSize: 13 }}>Loading…</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{submissions.length} submission{submissions.length !== 1 ? 's' : ''}</span>
|
||||
<button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={onNewSubmission}>+ New submission</button>
|
||||
</div>
|
||||
|
||||
{submissions.length === 0 && (
|
||||
<div style={{ padding: '20px 0', color: 'var(--text-faint)', fontSize: 13 }}>
|
||||
No submissions yet. Create one to track a job application and get AI tailoring suggestions.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{submissions.map(s => {
|
||||
const isOpen = expanded === s.id;
|
||||
const sugs = suggestions[s.id] ?? s.suggestions;
|
||||
|
||||
return (
|
||||
<div key={s.id} style={{ border: '1px solid var(--border)', borderRadius: 6, overflow: 'hidden' }}>
|
||||
{/* header row */}
|
||||
<div
|
||||
onClick={() => setExpanded(isOpen ? null : s.id)}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
|
||||
cursor: 'pointer', background: isOpen ? 'var(--hover)' : 'transparent',
|
||||
}}
|
||||
>
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" style={{ color: 'var(--text-faint)', transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform 0.12s', flexShrink: 0 }}>
|
||||
<path d="M2 1l4 3-4 3V1z" />
|
||||
</svg>
|
||||
<span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>
|
||||
{s.company_name} — {s.role_title}
|
||||
</span>
|
||||
{statusBadge(s.status)}
|
||||
<span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{fmt(s.created_at)}</span>
|
||||
</div>
|
||||
|
||||
{/* expanded body */}
|
||||
{isOpen && (
|
||||
<div style={{ padding: '12px 14px', borderTop: '1px solid var(--border)', background: 'var(--surface)' }}>
|
||||
{s.job_url && (
|
||||
<a href={s.job_url} target="_blank" rel="noreferrer" style={{ fontSize: 12, color: 'var(--text-muted)', display: 'block', marginBottom: 10 }}>
|
||||
{s.job_url}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* AI tailoring */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div className="label" style={{ marginBottom: 6 }}>AI tailoring</div>
|
||||
<textarea
|
||||
placeholder="Paste or edit job description for AI suggestions…"
|
||||
value={aiJd[s.id] ?? s.job_description ?? ''}
|
||||
onChange={e => setAiJd(prev => ({ ...prev, [s.id]: e.target.value }))}
|
||||
style={{ height: 80, resize: 'vertical', fontSize: 12, marginBottom: 6 }}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
style={{ fontSize: 12 }}
|
||||
disabled={aiLoading === s.id || !(aiJd[s.id] ?? s.job_description)}
|
||||
onClick={() => loadAi(s)}
|
||||
>
|
||||
{aiLoading === s.id ? 'Generating…' : sugs.length > 0 ? 'Regenerate suggestions' : 'Get AI suggestions'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* suggestions list */}
|
||||
{sugs.length > 0 && (
|
||||
<div>
|
||||
<div className="label" style={{ marginBottom: 8 }}>Suggestions ({sugs.length})</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{sugs.map(sug => (
|
||||
<div key={sug.id} style={{
|
||||
borderLeft: `3px solid ${sug.accepted === true ? '#22c55e' : sug.accepted === false ? '#ef4444' : 'var(--border-strong)'}`,
|
||||
paddingLeft: 10,
|
||||
}}>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 3 }}>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>
|
||||
± {sug.target_path}
|
||||
</span>
|
||||
{sug.metadata_json?.confidence !== undefined && (
|
||||
<span style={{ fontSize: 10, color: 'var(--text-faint)' }}>
|
||||
{Math.round((sug.metadata_json.confidence as number) * 100)}% conf
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{sug.proposed_text && (
|
||||
<div style={{ fontSize: 12, color: 'var(--text)', marginBottom: 4, lineHeight: 1.4 }}>
|
||||
{sug.proposed_text}
|
||||
</div>
|
||||
)}
|
||||
{sug.rationale && (
|
||||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 6, fontStyle: 'italic' }}>
|
||||
{sug.rationale}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
style={{ fontSize: 11, padding: '2px 8px', color: sug.accepted === true ? '#166534' : 'var(--text-muted)', borderColor: sug.accepted === true ? '#86efac' : 'var(--border)' }}
|
||||
onClick={() => toggleSuggestion(s, sug, true)}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
style={{ fontSize: 11, padding: '2px 8px', color: sug.accepted === false ? '#991b1b' : 'var(--text-muted)', borderColor: sug.accepted === false ? '#fca5a5' : 'var(--border)' }}
|
||||
onClick={() => toggleSuggestion(s, sug, false)}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── main dashboard ────────────────────────────────────────────────────────────
|
||||
|
||||
type Modal = 'upload' | 'branch' | 'submission' | 'publish' | null;
|
||||
type Tab = 'content' | 'patches' | 'submissions';
|
||||
|
||||
export default function Dashboard() {
|
||||
const [docs, setDocs] = useState<Document[]>([]);
|
||||
@@ -183,24 +478,46 @@ export default function Dashboard() {
|
||||
const [error, setError] = useState('');
|
||||
const [modal, setModal] = useState<Modal>(null);
|
||||
const [publishedUrl, setPublishedUrl] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<Tab>('content');
|
||||
const [submissions, setSubmissions] = useState<Submission[]>([]);
|
||||
const [subsLoading, setSubsLoading] = useState(false);
|
||||
const [pendingEdits, setPendingEdits] = useState<Map<string, { old_value: string; new_value: string }>>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
fetchDocuments()
|
||||
.then(d => { setDocs(d); if (d.length) { setSelectedDocId(d[0].id); setSelectedVersionId(d[0].root_version_id ?? null); } })
|
||||
.then(d => {
|
||||
setDocs(d);
|
||||
if (d.length) { setSelectedDocId(d[0].id); setSelectedVersionId(d[0].root_version_id ?? null); }
|
||||
})
|
||||
.catch(e => setError(e.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setPendingEdits(new Map());
|
||||
}, [selectedVersionId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab !== 'submissions' || !selectedVersionId) return;
|
||||
setSubsLoading(true);
|
||||
fetchSubmissions(selectedVersionId)
|
||||
.then(setSubmissions)
|
||||
.catch(() => { })
|
||||
.finally(() => setSubsLoading(false));
|
||||
}, [activeTab, selectedVersionId]);
|
||||
|
||||
const selectedDoc = docs.find(d => d.id === selectedDocId) ?? null;
|
||||
const selectedVersion = selectedDoc?.versions.find(v => v.id === selectedVersionId) ?? null;
|
||||
|
||||
const refreshDocs = async () => {
|
||||
try {
|
||||
const fresh = await fetchDocuments();
|
||||
setDocs(fresh);
|
||||
const doc = fresh.find(d => d.id === selectedDocId) ?? fresh[0] ?? null;
|
||||
if (doc) { setSelectedDocId(doc.id); }
|
||||
} catch { /* silent */ }
|
||||
const fresh = await fetchDocuments().catch(() => docs);
|
||||
setDocs(fresh);
|
||||
return fresh;
|
||||
};
|
||||
|
||||
const refreshSubs = () => {
|
||||
if (!selectedVersionId) return;
|
||||
fetchSubmissions(selectedVersionId).then(setSubmissions).catch(() => { });
|
||||
};
|
||||
|
||||
const onUploadDone = (doc: Document) => {
|
||||
@@ -210,26 +527,62 @@ export default function Dashboard() {
|
||||
setModal(null);
|
||||
};
|
||||
|
||||
const onBranchDone = (v: Version) => {
|
||||
refreshDocs().then(() => setSelectedVersionId(v.id));
|
||||
const onBranchDone = async (v: Version) => {
|
||||
const fresh = await refreshDocs();
|
||||
const doc = fresh.find(d => d.id === selectedDocId);
|
||||
if (doc?.versions.find(x => x.id === v.id)) setSelectedVersionId(v.id);
|
||||
setPendingEdits(new Map());
|
||||
setModal(null);
|
||||
};
|
||||
|
||||
const onSubmissionDone = (s: Submission) => {
|
||||
setSubmissions(prev => [s, ...prev]);
|
||||
setModal(null);
|
||||
setActiveTab('submissions');
|
||||
};
|
||||
|
||||
const stageEdit = (path: string, old_value: string, new_value: string) => {
|
||||
setPendingEdits(prev => new Map(prev).set(path, { old_value, new_value }));
|
||||
};
|
||||
|
||||
const discardEdits = () => setPendingEdits(new Map());
|
||||
|
||||
const pendingCount = pendingEdits.size;
|
||||
const stagedPatches = [...pendingEdits.entries()].map(([path, { old_value, new_value }]) => ({
|
||||
target_path: path, operation: 'replace_text', old_value, new_value,
|
||||
}));
|
||||
|
||||
const logout = async () => {
|
||||
await fetch('/api/auth/logout', { method: 'POST' });
|
||||
window.location.href = '/login';
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden', background: 'var(--bg)' }}>
|
||||
{/* top bar */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', height: 44, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '0 16px', height: 44, borderBottom: '1px solid var(--border)', flexShrink: 0,
|
||||
}}>
|
||||
<Link href="/" style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', textDecoration: 'none' }}>
|
||||
Resume Branches
|
||||
</Link>
|
||||
<button className="btn btn-primary" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setModal('upload')}>
|
||||
+ Upload CV
|
||||
</button>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<button className="btn btn-primary" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setModal('upload')}>
|
||||
+ Upload CV
|
||||
</button>
|
||||
<button className="btn btn-ghost" style={{ padding: '4px 10px', fontSize: 12 }} onClick={logout}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
{/* left panel */}
|
||||
<div style={{ width: 240, flexShrink: 0, borderRight: '1px solid var(--border)', background: 'var(--surface)', overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{
|
||||
width: 240, flexShrink: 0, borderRight: '1px solid var(--border)',
|
||||
background: 'var(--surface)', overflow: 'auto', display: 'flex', flexDirection: 'column',
|
||||
}}>
|
||||
{loading && <div style={{ padding: 16, fontSize: 13, color: 'var(--text-faint)' }}>Loading…</div>}
|
||||
{error && <div style={{ padding: 16, fontSize: 13, color: '#dc2626' }}>{error}</div>}
|
||||
|
||||
@@ -244,30 +597,39 @@ export default function Dashboard() {
|
||||
|
||||
{docs.length > 0 && (
|
||||
<>
|
||||
{/* document selector */}
|
||||
<div style={{ padding: '10px 12px 6px' }}>
|
||||
<div className="label" style={{ marginBottom: 6 }}>Documents</div>
|
||||
{docs.map(d => (
|
||||
<div
|
||||
key={d.id}
|
||||
onClick={() => { setSelectedDocId(d.id); setSelectedVersionId(d.root_version_id ?? null); }}
|
||||
style={{ padding: '5px 8px', borderRadius: 4, cursor: 'pointer', fontSize: 13, fontWeight: d.id === selectedDocId ? 600 : 400, background: d.id === selectedDocId ? 'var(--selected-bg)' : 'transparent' }}
|
||||
onClick={() => {
|
||||
setSelectedDocId(d.id);
|
||||
setSelectedVersionId(d.root_version_id ?? null);
|
||||
setActiveTab('content');
|
||||
}}
|
||||
style={{
|
||||
padding: '5px 8px', borderRadius: 4, cursor: 'pointer',
|
||||
fontSize: 13, fontWeight: d.id === selectedDocId ? 600 : 400,
|
||||
background: d.id === selectedDocId ? 'var(--selected-bg)' : 'transparent',
|
||||
}}
|
||||
>
|
||||
{d.title}
|
||||
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.title}</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 1 }}>
|
||||
{d.versions.length} version{d.versions.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<hr className="divider" style={{ margin: '6px 0' }} />
|
||||
<hr className="divider" style={{ margin: '4px 0' }} />
|
||||
|
||||
{/* version tree */}
|
||||
{selectedDoc && (
|
||||
<div style={{ padding: '6px 0' }}>
|
||||
<div className="label" style={{ padding: '0 12px 6px' }}>Versions</div>
|
||||
<div className="label" style={{ padding: '0 12px 6px' }}>Branches</div>
|
||||
<CVTree
|
||||
versions={selectedDoc.versions}
|
||||
selectedVersionId={selectedVersionId}
|
||||
onSelect={setSelectedVersionId}
|
||||
onSelect={id => { setSelectedVersionId(id); setActiveTab('content'); }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -275,85 +637,130 @@ export default function Dashboard() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* main content */}
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
|
||||
{/* main panel */}
|
||||
<div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
|
||||
{!selectedVersion && !loading && (
|
||||
<div style={{ paddingTop: 60, textAlign: 'center', color: 'var(--text-faint)', fontSize: 13 }}>
|
||||
Select a version to view details.
|
||||
Select a branch to view details.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedVersion && (
|
||||
<div style={{ maxWidth: 680 }}>
|
||||
<>
|
||||
{/* version header */}
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>
|
||||
{selectedVersion.version_label || selectedVersion.branch_name}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-muted)' }}>
|
||||
{selectedVersion.parent_version_id && (
|
||||
<span>
|
||||
branched from{' '}
|
||||
<span style={{ fontFamily: 'var(--font-mono)' }}>
|
||||
{selectedDoc?.versions.find(v => v.id === selectedVersion.parent_version_id)?.branch_name ?? '…'}
|
||||
</span>
|
||||
<div style={{ padding: '16px 24px 0', flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 12 }}>
|
||||
<div>
|
||||
<h2 style={{ fontSize: 17, fontWeight: 600, marginBottom: 3 }}>
|
||||
{selectedVersion.version_label || selectedVersion.branch_name}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--text-muted)', flexWrap: 'wrap' }}>
|
||||
{selectedVersion.parent_version_id ? (
|
||||
<span>
|
||||
branched from{' '}
|
||||
<span style={{ fontFamily: 'var(--font-mono)' }}>
|
||||
{selectedDoc?.versions.find(v => v.id === selectedVersion.parent_version_id)?.branch_name ?? '…'}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="badge badge-draft" style={{ fontFamily: 'var(--font-mono)' }}>root</span>
|
||||
)}
|
||||
<span>{fmt(selectedVersion.created_at)}</span>
|
||||
{selectedVersion.patches.length > 0 && (
|
||||
<span>{selectedVersion.patches.length} patch{selectedVersion.patches.length !== 1 ? 'es' : ''}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* action buttons */}
|
||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
||||
<button className="btn btn-ghost" onClick={() => setModal('branch')}>Branch</button>
|
||||
<button className="btn btn-ghost" onClick={() => { setModal('submission'); }}>Submit</button>
|
||||
<button className="btn btn-ghost" onClick={() => setModal('publish')}>Publish</button>
|
||||
{selectedVersion.artifact_docx_key && selectedDoc && (
|
||||
<a href={downloadVersionUrl(selectedDoc.id, selectedVersion.id)} download className="btn btn-ghost">
|
||||
↓ DOCX
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{publishedUrl && (
|
||||
<div style={{
|
||||
padding: '8px 12px', background: '#f0fdf4', border: '1px solid #bbf7d0',
|
||||
borderRadius: 5, marginBottom: 12, fontSize: 13, display: 'flex', gap: 8, alignItems: 'center',
|
||||
}}>
|
||||
<span style={{ color: '#166534' }}>Published:</span>
|
||||
<a href={publishedUrl} target="_blank" rel="noreferrer" style={{ color: '#166534', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{publishedUrl}</a>
|
||||
<button onClick={() => setPublishedUrl(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#166534', fontSize: 16, lineHeight: 1 }}>×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* staged edits bar */}
|
||||
{pendingCount > 0 && (
|
||||
<div style={{
|
||||
padding: '8px 12px', background: '#fffbeb', border: '1px solid #fde68a',
|
||||
borderRadius: 5, marginBottom: 12, fontSize: 13, display: 'flex', gap: 10, alignItems: 'center',
|
||||
}}>
|
||||
<span style={{ color: '#92400e', flex: 1 }}>
|
||||
{pendingCount} staged edit{pendingCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
{!selectedVersion.parent_version_id && <span style={{ fontFamily: 'var(--font-mono)' }}>root</span>}
|
||||
<span>{fmt(selectedVersion.created_at)}</span>
|
||||
{selectedVersion.patches.length > 0 && (
|
||||
<span>{selectedVersion.patches.length} patch{selectedVersion.patches.length !== 1 ? 'es' : ''}</span>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ fontSize: 12, padding: '3px 10px', background: '#92400e', borderColor: '#92400e' }}
|
||||
onClick={() => setModal('branch')}
|
||||
>
|
||||
Save as branch
|
||||
</button>
|
||||
<button className="btn btn-ghost" style={{ fontSize: 12, padding: '3px 8px' }} onClick={discardEdits}>
|
||||
Discard
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* tabs */}
|
||||
<div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border)' }}>
|
||||
{(['content', 'patches', 'submissions'] as Tab[]).map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setActiveTab(t)}
|
||||
style={{
|
||||
padding: '6px 14px', fontSize: 13, background: 'none', border: 'none',
|
||||
cursor: 'pointer', color: activeTab === t ? 'var(--text)' : 'var(--text-muted)',
|
||||
borderBottom: activeTab === t ? '2px solid var(--text)' : '2px solid transparent',
|
||||
fontWeight: activeTab === t ? 500 : 400,
|
||||
marginBottom: -1, transition: 'color 0.1s',
|
||||
}}
|
||||
>
|
||||
{t === 'patches' ? `Patches (${selectedVersion.patches.length})` : t.charAt(0).toUpperCase() + t.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* action bar */}
|
||||
<div style={{ display: 'flex', gap: 6, marginBottom: 24, flexWrap: 'wrap' }}>
|
||||
<button className="btn btn-ghost" onClick={() => setModal('branch')}>New branch</button>
|
||||
<button className="btn btn-ghost" onClick={() => setModal('submission')}>New submission</button>
|
||||
<button className="btn btn-ghost" onClick={() => setModal('publish')}>Publish</button>
|
||||
{selectedVersion.artifact_docx_key && selectedDoc && (
|
||||
<a
|
||||
href={downloadVersionUrl(selectedDoc.id, selectedVersion.id)}
|
||||
download
|
||||
className="btn btn-ghost"
|
||||
>
|
||||
↓ DOCX
|
||||
</a>
|
||||
{/* tab content */}
|
||||
<div style={{ padding: '16px 24px', flex: 1, overflow: 'auto' }}>
|
||||
{activeTab === 'content' && (
|
||||
<ContentTab
|
||||
blocks={selectedVersion.structured_blocks ?? []}
|
||||
pendingEdits={pendingEdits}
|
||||
onEdit={stageEdit}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'patches' && (
|
||||
<DiffViewer patches={selectedVersion.patches} />
|
||||
)}
|
||||
{activeTab === 'submissions' && (
|
||||
<SubmissionsTab
|
||||
submissions={submissions}
|
||||
loading={subsLoading}
|
||||
versionId={selectedVersionId!}
|
||||
onNewSubmission={() => setModal('submission')}
|
||||
onRefresh={refreshSubs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{publishedUrl && (
|
||||
<div style={{ padding: '10px 12px', background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 5, marginBottom: 20, fontSize: 13 }}>
|
||||
Published:{' '}
|
||||
<a href={publishedUrl} target="_blank" rel="noreferrer" style={{ color: '#166534', wordBreak: 'break-all' }}>{publishedUrl}</a>
|
||||
<button onClick={() => setPublishedUrl(null)} style={{ float: 'right', background: 'none', border: 'none', cursor: 'pointer', color: '#166534', fontSize: 14 }}>×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<hr className="divider" style={{ marginBottom: 24 }} />
|
||||
|
||||
{/* structured blocks */}
|
||||
{(selectedVersion.structured_blocks?.length ?? 0) > 0 && (
|
||||
<Section title={`Content (${selectedVersion.structured_blocks!.length} blocks)`}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 24 }}>
|
||||
{selectedVersion.structured_blocks!.map((b, i) => (
|
||||
<div key={i} style={{ display: 'flex', gap: 12, padding: '4px 0', borderBottom: '1px solid var(--border)' }}>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-faint)', flexShrink: 0, width: 110, paddingTop: 1 }}>{b.path}</span>
|
||||
<span style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.5, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
|
||||
{b.text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* patches */}
|
||||
<Section title={`Patches (${selectedVersion.patches.length} changes from parent)`}>
|
||||
<DiffViewer patches={selectedVersion.patches} />
|
||||
</Section>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -363,10 +770,15 @@ export default function Dashboard() {
|
||||
<UploadModal onClose={() => setModal(null)} onDone={onUploadDone} />
|
||||
)}
|
||||
{modal === 'branch' && selectedVersion && (
|
||||
<BranchModal version={selectedVersion} onClose={() => setModal(null)} onDone={onBranchDone} />
|
||||
<BranchModal
|
||||
version={selectedVersion}
|
||||
initialPatches={stagedPatches}
|
||||
onClose={() => setModal(null)}
|
||||
onDone={onBranchDone}
|
||||
/>
|
||||
)}
|
||||
{modal === 'submission' && selectedVersion && (
|
||||
<SubmissionModal version={selectedVersion} onClose={() => setModal(null)} onDone={() => { setModal(null); }} />
|
||||
<SubmissionModal version={selectedVersion} onClose={() => setModal(null)} onDone={onSubmissionDone} />
|
||||
)}
|
||||
{modal === 'publish' && selectedVersion && (
|
||||
<PublishModal
|
||||
|
||||
Reference in New Issue
Block a user