326 lines
21 KiB
TypeScript
326 lines
21 KiB
TypeScript
import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
|
||
import type { CrudRecord } from '~/lib/admin/types';
|
||
|
||
const API = '';
|
||
|
||
type CandidateRecord = CrudRecord & {
|
||
email: string;
|
||
phone?: string;
|
||
location?: string;
|
||
experience?: string;
|
||
skills?: string[];
|
||
status: 'ACTIVE' | 'INACTIVE' | 'PENDING';
|
||
registeredDate?: string;
|
||
};
|
||
|
||
function StatusBadge(props: { status: string }) {
|
||
const active = () => props.status === 'ACTIVE';
|
||
const pending = () => props.status === 'PENDING';
|
||
return (
|
||
<span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : pending() ? '#F6D78F' : '#D1D5DB'};background:${active() ? '#FFF1EB' : pending() ? '#FFF3D6' : '#F3F4F6'};color:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
|
||
<span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
|
||
{props.status.charAt(0) + props.status.slice(1).toLowerCase()}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
export default function CandidateManagementPage() {
|
||
const [listTab, setListTab] = createSignal<'all' | 'active' | 'pending' | 'view'>('all');
|
||
const [detailTab, setDetailTab] = createSignal<'overview' | 'experience' | 'skills'>('overview');
|
||
|
||
const [search, setSearch] = createSignal('');
|
||
const [statusFilter, setStatusFilter] = createSignal('all');
|
||
const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'registered_desc' | 'registered_asc'>('name_asc');
|
||
const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
|
||
const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
|
||
const [rows, setRows] = createSignal<CandidateRecord[]>([]);
|
||
const [isLoading, setIsLoading] = createSignal(false);
|
||
const [loadError, setLoadError] = createSignal('');
|
||
const [selectedCandidate, setSelectedCandidate] = createSignal<CandidateRecord | null>(null);
|
||
const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
|
||
|
||
const load = async () => {
|
||
setIsLoading(true);
|
||
setLoadError('');
|
||
try {
|
||
const res = await fetch(`${API}/api/admin/users?role=JOB_SEEKER`);
|
||
if (!res.ok) throw new Error('Fetch failed');
|
||
const data = await res.json();
|
||
const list = (Array.isArray(data) ? data : []).map((u: any) => ({
|
||
id: u.id,
|
||
name: u.full_name || u.email.split('@')[0],
|
||
email: u.email,
|
||
status: (u.status || 'ACTIVE').toUpperCase(),
|
||
registeredDate: u.created_at ? new Date(u.created_at).toLocaleDateString() : '—',
|
||
updatedAt: u.updated_at || u.created_at || '—',
|
||
location: 'Not Specified',
|
||
experience: 'Not Specified'
|
||
} as CandidateRecord));
|
||
setRows(list);
|
||
} catch (e) {
|
||
console.error('Candidate load error:', e);
|
||
setLoadError('Failed to load candidates.');
|
||
setRows([]);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
onMount(() => void load());
|
||
|
||
const filteredRows = createMemo(() => {
|
||
let r = rows();
|
||
if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
|
||
const q = search().toLowerCase();
|
||
if (q) {
|
||
r = r.filter(it => it.name.toLowerCase().includes(q) || it.email.toLowerCase().includes(q));
|
||
}
|
||
const sorted = [...r];
|
||
const mode = sortBy();
|
||
sorted.sort((a, b) => {
|
||
if (mode === 'name_desc') return b.name.localeCompare(a.name);
|
||
if (mode === 'registered_desc') return (b.registeredDate || '').localeCompare(a.registeredDate || '');
|
||
if (mode === 'registered_asc') return (a.registeredDate || '').localeCompare(b.registeredDate || '');
|
||
return a.name.localeCompare(b.name);
|
||
});
|
||
return sorted;
|
||
});
|
||
|
||
const exportCsv = () => {
|
||
const headers = ['Candidate Name', 'Email', 'Location', 'Registered', 'Status'];
|
||
const body = filteredRows().map((row) => [
|
||
row.name || '',
|
||
row.email || '',
|
||
row.location || '',
|
||
row.registeredDate || '',
|
||
row.status || '',
|
||
]);
|
||
const csv = [headers, ...body]
|
||
.map((line) => line.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
|
||
.join('\n');
|
||
|
||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
||
const url = URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = 'candidates.csv';
|
||
link.click();
|
||
URL.revokeObjectURL(url);
|
||
};
|
||
|
||
const openDetail = (row: CandidateRecord) => { setSelectedCandidate(row); setListTab('view'); setOpenMenuId(null); };
|
||
|
||
return (
|
||
<div class="w-full space-y-6 pb-8">
|
||
<div style="margin-bottom: 1.5rem">
|
||
<h1 class="text-[28px] font-bold leading-tight text-[#111827]">Candidate Management</h1>
|
||
<p class="mt-1 text-[14px] text-[#6B7280]">Manage and monitor all job seeker accounts on the platform</p>
|
||
</div>
|
||
|
||
{/* ── LIST VIEW ── */}
|
||
<div>
|
||
{/* Tabs */}
|
||
<div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
|
||
{([
|
||
{ key: 'all', label: 'All Candidates', action: () => { setListTab('all'); setStatusFilter('all'); } },
|
||
{ key: 'active', label: 'Active', action: () => { setListTab('active'); setStatusFilter('active'); } },
|
||
{ key: 'pending', label: 'Pending', action: () => { setListTab('pending'); setStatusFilter('pending'); } },
|
||
{ key: 'view', label: 'View Profile', action: () => setListTab('view') },
|
||
] as const).map((tab) => (
|
||
<button
|
||
type="button"
|
||
onClick={tab.action}
|
||
style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* View Profile panel */}
|
||
<Show when={listTab() === 'view'}>
|
||
<Show
|
||
when={!selectedCandidate()}
|
||
>
|
||
<div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
|
||
<p style="font-size:15px;font-weight:600;color:#111827">No candidate selected</p>
|
||
<p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any candidate row and choose <strong>View Profile</strong>.</p>
|
||
</div>
|
||
</Show>
|
||
<Show when={selectedCandidate()}>
|
||
<div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
|
||
<div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
|
||
<div>
|
||
<h2 style="font-size:18px;font-weight:700;color:#111827">{selectedCandidate()!.name}</h2>
|
||
<p style="margin-top:2px;font-size:13px;color:#6B7280">{selectedCandidate()!.email} • Joined {selectedCandidate()!.registeredDate}</p>
|
||
</div>
|
||
<StatusBadge status={selectedCandidate()!.status} />
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
|
||
{(['overview', 'experience', 'skills'] as const).map((tab, i) => {
|
||
const labels = ['Overview', 'Work Experience', 'Skills & Education'];
|
||
const active = () => detailTab() === tab;
|
||
return (
|
||
<button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
|
||
{labels[i]}
|
||
<Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div style="padding:24px">
|
||
<Show when={detailTab() === 'overview'}>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
|
||
<div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
|
||
<h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Candidate Info</h3>
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
{[
|
||
{ l: 'Location', v: selectedCandidate()!.location || '—' },
|
||
{ l: 'Experience', v: selectedCandidate()!.experience || '—' },
|
||
{ l: 'Phone', v: selectedCandidate()!.phone || '—' },
|
||
{ l: 'Last Active', v: selectedCandidate()!.updatedAt || '—' },
|
||
].map(item => (
|
||
<div style="display:flex;justify-content:space-between">
|
||
<span style="font-size:13px;color:#6B7280">{item.l}</span>
|
||
<span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
|
||
<button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Profile</button>
|
||
<button type="button" onClick={() => { setSelectedCandidate(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
</Show>
|
||
|
||
<div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
|
||
<div style="position:relative;margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:visible;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
||
<div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
|
||
<input
|
||
value={search()}
|
||
onInput={(e) => setSearch(e.currentTarget.value)}
|
||
placeholder="Search candidates..."
|
||
style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
|
||
/>
|
||
<div style="position:relative">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
|
||
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
|
||
>
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
|
||
Sort
|
||
</button>
|
||
<Show when={sortMenuOpen()}>
|
||
<div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
|
||
{(['name_asc', 'name_desc', 'registered_desc', 'registered_asc'] as const).map((s, i) => (
|
||
<button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
|
||
{['Name (A-Z)', 'Name (Z-A)', 'Joined (Newest)', 'Joined (Oldest)'][i]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
<div style="position:relative">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
|
||
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
|
||
>
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
|
||
Filters
|
||
</button>
|
||
<Show when={filterMenuOpen()}>
|
||
<div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
|
||
{(['all', 'active', 'pending', 'inactive'] as const).map((s) => (
|
||
<button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
|
||
{s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'pending' ? 'Pending' : 'Inactive'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={exportCsv}
|
||
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer"
|
||
>
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
Export
|
||
</button>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full">
|
||
<thead>
|
||
<tr style="background:#0D0D2A;text-align:left">
|
||
{['Candidate Name', 'Email', 'Location', 'Registered', 'Status', 'Actions'].map(h => (
|
||
<th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<Show when={isLoading()}>
|
||
<tr><td colSpan={6} style="padding:32px;text-align:center;color:#64748b">Loading...</td></tr>
|
||
</Show>
|
||
<Show when={!isLoading() && !!loadError()}>
|
||
<tr><td colSpan={6} style="padding:32px;text-align:center;color:#b91c1c">{loadError()}</td></tr>
|
||
</Show>
|
||
<Show when={!isLoading() && !loadError() && filteredRows().length === 0}>
|
||
<tr><td colSpan={6} style="padding:32px;text-align:center;color:#94a3b8">No candidates found.</td></tr>
|
||
</Show>
|
||
<Show when={!isLoading() && !loadError() && filteredRows().length > 0}>
|
||
<For each={filteredRows()}>
|
||
{(row) => (
|
||
<tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
|
||
<td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
|
||
<td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.email}</td>
|
||
<td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.location || '—'}</td>
|
||
<td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.registeredDate}</td>
|
||
<td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
|
||
<td style="padding:12px 20px;position:relative">
|
||
<button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
|
||
</button>
|
||
<Show when={openMenuId() === row.id}>
|
||
<div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
|
||
<button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Profile</button>
|
||
<button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Deactivate</button>
|
||
</div>
|
||
</Show>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</For>
|
||
</Show>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<Show when={!isLoading() && !loadError() && filteredRows().length > 0}>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F3F4F6;padding:12px 20px">
|
||
<p style="font-size:13px;color:#6B7280">
|
||
Showing <strong style="font-weight:600;color:#111827">1–{filteredRows().length}</strong> of <strong style="font-weight:600;color:#111827">{filteredRows().length}</strong> candidates
|
||
</p>
|
||
<div style="display:flex;align-items:center;gap:4px">
|
||
<button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#6B7280;cursor:pointer;font-size:15px">‹</button>
|
||
<button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;background:#FF5E13;color:white;font-size:13px;font-weight:600;border:none;cursor:pointer">1</button>
|
||
<button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:13px;font-weight:500;cursor:pointer">2</button>
|
||
<button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:13px;font-weight:500;cursor:pointer">3</button>
|
||
<button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#6B7280;cursor:pointer;font-size:15px">›</button>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|