109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import apiFetch from '../auth/apiFetch.js';
|
|
|
|
export default function CareerProfileList() {
|
|
const [rows, setRows] = useState([]);
|
|
const nav = useNavigate();
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const r = await apiFetch('/api/premium/career-profile/all');
|
|
if (!r.ok) {
|
|
// apiFetch already fires session-expired on 401/403, just bail
|
|
return;
|
|
}
|
|
const d = await r.json();
|
|
setRows(d.careerProfiles || []);
|
|
} catch (e) {
|
|
console.error('Failed to load career profiles:', e);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
async function remove(row) {
|
|
if (!window.confirm('Delete this career profile?')) return;
|
|
try {
|
|
const r = await apiFetch(`/api/premium/career-profile/${encodeURIComponent(row.id)}`, {
|
|
method: 'DELETE'
|
|
});
|
|
if (!r.ok) {
|
|
// 401/403 handled by apiFetch
|
|
const msg = await r.text().catch(() => 'Failed to delete');
|
|
alert(msg || 'Failed to delete');
|
|
return;
|
|
}
|
|
setRows(prev => prev.filter(x => x.id !== row.id));
|
|
} catch (e) {
|
|
console.error('Delete failed:', e);
|
|
alert('Failed to delete');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto space-y-4">
|
|
<h2 className="text-2xl font-semibold">Career Profiles</h2>
|
|
|
|
<button
|
|
onClick={() => nav('/profile/careers/new/edit')}
|
|
className="px-3 py-2 bg-blue-600 text-white rounded"
|
|
>
|
|
+ New Career Profile
|
|
</button>
|
|
|
|
<table className="w-full border mt-4 text-sm">
|
|
<thead className="bg-gray-100">
|
|
<tr>
|
|
<th className="p-2 text-left">Title</th>
|
|
<th className="p-2 text-left">Status</th>
|
|
<th className="p-2">Start</th>
|
|
<th className="p-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map(r => (
|
|
<tr key={r.id} className="border-t">
|
|
<td className="p-2">{r.scenario_title || r.career_name}</td>
|
|
<td className="p-2">{r.status}</td>
|
|
<td className="p-2">{r.start_date}</td>
|
|
<td className="p-2 space-x-2">
|
|
<Link
|
|
to={`/profile/careers/${encodeURIComponent(r.id)}/edit`}
|
|
className="underline text-blue-600"
|
|
>edit</Link>
|
|
<button
|
|
onClick={() => remove(r)}
|
|
className="text-red-600 underline"
|
|
>
|
|
delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{rows.length === 0 && (
|
|
<tr>
|
|
<td colSpan={5} className="p-6">
|
|
<div className="text-center space-y-3">
|
|
<p className="text-gray-600">No career profiles yet.</p>
|
|
<div className="flex justify-center gap-2">
|
|
<Link to="/premium-onboarding" className="px-3 py-2 bg-gray-200 rounded">
|
|
Start Premium Onboarding
|
|
</Link>
|
|
<button
|
|
onClick={() => nav('/profile/careers/new/edit')}
|
|
className="px-3 py-2 bg-blue-600 text-white rounded"
|
|
>
|
|
+ Create first profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|