Skip to content

Commit 69a40d4

Browse files
leopu00claude
leopu00
and
claude
committed
feat(applications): pagina candidature — timeline espandibile, documenti allegati, filtri stato con conteggio
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 6f4fb7d commit 69a40d4

1 file changed

Lines changed: 114 additions & 0 deletions

File tree

‎web/app/applications/page.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
'use client'
2+
3+
import Link from 'next/link'
4+
import { useEffect, useState, useCallback } from 'react'
5+
6+
type TimelineEntry = { status: string; date: number; note?: string }
7+
type Doc = { name: string; type: string }
8+
type Application = { id: string; jobTitle: string; company: string; status: string; sentAt: number; updatedAt: number; docs: Doc[]; timeline: TimelineEntry[] }
9+
10+
const STATUS_CFG: Record<string, { color: string; bg: string; label: string }> = {
11+
draft: { color: 'var(--color-dim)', bg: 'transparent', label: 'bozza' },
12+
sent: { color: '#61affe', bg: 'rgba(97,175,254,0.08)', label: 'inviata' },
13+
viewed: { color: 'var(--color-yellow)', bg: 'rgba(255,193,7,0.08)', label: 'vista' },
14+
interview: { color: '#fca130', bg: 'rgba(252,161,48,0.08)', label: 'colloquio' },
15+
offer: { color: 'var(--color-green)', bg: 'rgba(0,200,83,0.08)', label: 'offerta' },
16+
rejected: { color: 'var(--color-red)', bg: 'rgba(255,69,96,0.08)', label: 'rifiutata' },
17+
}
18+
const DOC_CLR: Record<string, string> = { cv: 'var(--color-green)', 'cover-letter': '#61affe', portfolio: '#fca130', other: 'var(--color-dim)' }
19+
20+
function timeAgo(ts: number): string {
21+
const m = Math.floor((Date.now() - ts) / 60000);
22+
if (m < 60) return `${m}m fa`; if (m < 1440) return `${Math.floor(m / 60)}h fa`; return `${Math.floor(m / 1440)}g fa`;
23+
}
24+
25+
function AppRow({ a, expanded, onToggle }: { a: Application; expanded: boolean; onToggle: () => void }) {
26+
const cfg = STATUS_CFG[a.status] ?? STATUS_CFG.draft;
27+
return (
28+
<div className="border-b border-[var(--color-border)]">
29+
<div className="flex items-center gap-3 px-5 py-3 hover:bg-[var(--color-row)] transition-colors cursor-pointer" onClick={onToggle}>
30+
<div className="flex-1 min-w-0">
31+
<p className="text-[11px] text-[var(--color-bright)] font-medium truncate">{a.jobTitle}</p>
32+
<p className="text-[9px] text-[var(--color-dim)]">{a.company}</p>
33+
</div>
34+
<div className="flex gap-1">{a.docs.map((d, i) => <span key={i} className="text-[8px] px-1.5 py-0.5 rounded font-mono" style={{ color: DOC_CLR[d.type] ?? 'var(--color-dim)', border: `1px solid ${DOC_CLR[d.type] ?? 'var(--color-dim)'}30` }}>{d.type}</span>)}</div>
35+
<span className="text-[9px] text-[var(--color-dim)] w-14 text-right">{timeAgo(a.updatedAt)}</span>
36+
<span className="badge text-[9px] w-20 text-center py-0.5 rounded" style={{ color: cfg.color, background: cfg.bg, border: `1px solid ${cfg.color}40` }}>{cfg.label}</span>
37+
</div>
38+
{expanded && (
39+
<div className="px-5 pb-3 pl-8">
40+
<p className="text-[9px] text-[var(--color-dim)] mb-2 font-semibold">Timeline:</p>
41+
<div className="flex flex-col gap-1 ml-2 border-l border-[var(--color-border)] pl-3">
42+
{a.timeline.map((t, i) => {
43+
const tc = STATUS_CFG[t.status] ?? STATUS_CFG.draft;
44+
return (
45+
<div key={i} className="flex items-start gap-2">
46+
<span className="w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0" style={{ background: tc.color }} />
47+
<span className="text-[9px] font-semibold w-16" style={{ color: tc.color }}>{tc.label}</span>
48+
<span className="text-[9px] text-[var(--color-dim)]">{timeAgo(t.date)}</span>
49+
{t.note && <span className="text-[9px] text-[var(--color-muted)]">— {t.note}</span>}
50+
</div>
51+
)
52+
})}
53+
</div>
54+
<div className="flex gap-2 mt-2">{a.docs.map((d, i) => <span key={i} className="text-[9px] font-mono text-[var(--color-muted)]">{d.name}</span>)}</div>
55+
</div>
56+
)}
57+
</div>
58+
)
59+
}
60+
61+
export default function ApplicationsPage() {
62+
const [apps, setApps] = useState<Application[]>([])
63+
const [total, setTotal] = useState(0)
64+
const [counts, setCounts] = useState<Record<string, number>>({})
65+
const [statusFilter, setStatusFilter] = useState('all')
66+
const [expandedId, setExpandedId] = useState<string | null>(null)
67+
68+
const fetchData = useCallback(async () => {
69+
const params = new URLSearchParams();
70+
if (statusFilter !== 'all') params.set('status', statusFilter);
71+
const q = params.toString() ? `?${params}` : '';
72+
const res = await fetch(`/api/applications${q}`).catch(() => null);
73+
if (!res?.ok) return;
74+
const data = await res.json();
75+
setApps(data.applications ?? []); setTotal(data.total ?? 0); setCounts(data.counts ?? {});
76+
}, [statusFilter])
77+
78+
useEffect(() => { fetchData() }, [fetchData])
79+
80+
const FILTERS = [
81+
{ key: 'all', label: 'tutte' }, { key: 'draft', label: 'bozze' }, { key: 'sent', label: 'inviate' },
82+
{ key: 'viewed', label: 'viste' }, { key: 'interview', label: 'colloqui' }, { key: 'offer', label: 'offerte' }, { key: 'rejected', label: 'rifiutate' },
83+
];
84+
85+
return (
86+
<div style={{ animation: 'fade-in 0.35s ease both' }}>
87+
<div className="mb-8 pb-6 border-b border-[var(--color-border)]">
88+
<div className="flex items-center gap-2 mb-1">
89+
<Link href="/dashboard" className="text-[10px] text-[var(--color-dim)] hover:text-[var(--color-muted)] no-underline transition-colors">Dashboard</Link>
90+
<span className="text-[var(--color-border)]">/</span>
91+
<span className="text-[10px] text-[var(--color-muted)]">Candidature</span>
92+
</div>
93+
<h1 className="text-2xl font-bold tracking-tight text-[var(--color-white)] mt-3">Candidature</h1>
94+
<p className="text-[var(--color-muted)] text-[11px] mt-1">{total} candidature · {counts.interview ?? 0} colloqui · {counts.offer ?? 0} offerte</p>
95+
</div>
96+
97+
<div className="flex gap-1 mb-4">
98+
{FILTERS.map(f => (
99+
<button key={f.key} onClick={() => setStatusFilter(f.key)}
100+
className="px-2.5 py-1 rounded text-[9px] font-semibold tracking-widest uppercase cursor-pointer transition-colors"
101+
style={{ background: statusFilter === f.key ? 'var(--color-row)' : 'transparent', color: statusFilter === f.key ? (STATUS_CFG[f.key]?.color ?? 'var(--color-bright)') : 'var(--color-dim)', border: `1px solid ${statusFilter === f.key ? 'var(--color-border-glow)' : 'transparent'}` }}>
102+
{f.label}{counts[f.key] ? ` (${counts[f.key]})` : ''}
103+
</button>
104+
))}
105+
</div>
106+
107+
<div className="border border-[var(--color-border)] rounded-lg overflow-hidden bg-[var(--color-panel)]">
108+
{apps.length === 0
109+
? <div className="py-12 text-center"><p className="text-[var(--color-dim)] text-[12px]">Nessuna candidatura trovata.</p></div>
110+
: apps.map(a => <AppRow key={a.id} a={a} expanded={expandedId === a.id} onToggle={() => setExpandedId(expandedId === a.id ? null : a.id)} />)}
111+
</div>
112+
</div>
113+
)
114+
}

0 commit comments

Comments
 (0)