docs: add API endpoint documentation for all role dashboard pages
Documented real backend API connections for: - Company: Jobs, Applications, Shortlisted Candidates - Customer: Requirements, Responses - Professional: Leads, Responses (all profession types) - Job Seeker: Jobs, Applications, Saved Jobs All pages already wired to real data from backend.
This commit is contained in:
Ashwin Kumar
parent
30750f3797
commit
b242161fd7
5 changed files with 976 additions and 339 deletions
|
|
@ -1,7 +1,15 @@
|
||||||
import { For, Show, createSignal, onMount } from 'solid-js';
|
/**
|
||||||
import { BTN_GHOST, BTN_ORANGE, CARD, INPUT, LABEL } from '~/components/DashboardShell';
|
* Company Applications Page - Wired to real backend APIs
|
||||||
|
* Endpoints:
|
||||||
|
* GET /api/companies/jobs - List company's jobs
|
||||||
|
* GET /api/companies/jobs/:id/applications - Get applications for a job
|
||||||
|
* POST /api/companies/applications/:id/contact - Unlock contact info
|
||||||
|
* PATCH /api/companies/applications/:id/status - Update application status
|
||||||
|
*/
|
||||||
|
import { For, Show, createSignal, onMount } from "solid-js";
|
||||||
|
import { BTN_GHOST, BTN_ORANGE, CARD, INPUT, LABEL } from "~/components/DashboardShell";
|
||||||
|
|
||||||
const API = '/api/gateway';
|
const API = "/api/gateway";
|
||||||
|
|
||||||
interface JobItem {
|
interface JobItem {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -32,26 +40,26 @@ interface ContactInfo {
|
||||||
async function apiFetch(path: string, opts?: RequestInit) {
|
async function apiFetch(path: string, opts?: RequestInit) {
|
||||||
return fetch(`${API}${path}`, {
|
return fetch(`${API}${path}`, {
|
||||||
...opts,
|
...opts,
|
||||||
credentials: 'include',
|
credentials: "include",
|
||||||
headers: { 'Content-Type': 'application/json', ...(opts?.headers ?? {}) },
|
headers: { "Content-Type": "application/json", ...(opts?.headers ?? {}) },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CompanyApplicationsPage() {
|
export default function CompanyApplicationsPage() {
|
||||||
const [jobs, setJobs] = createSignal<JobItem[]>([]);
|
const [jobs, setJobs] = createSignal<JobItem[]>([]);
|
||||||
const [selectedJobId, setSelectedJobId] = createSignal('');
|
const [selectedJobId, setSelectedJobId] = createSignal("");
|
||||||
const [applications, setApplications] = createSignal<ApplicationItem[]>([]);
|
const [applications, setApplications] = createSignal<ApplicationItem[]>([]);
|
||||||
const [loading, setLoading] = createSignal(true);
|
const [loading, setLoading] = createSignal(true);
|
||||||
const [loadingApps, setLoadingApps] = createSignal(false);
|
const [loadingApps, setLoadingApps] = createSignal(false);
|
||||||
const [statusFilter, setStatusFilter] = createSignal('');
|
const [statusFilter, setStatusFilter] = createSignal("");
|
||||||
const [actionMsg, setActionMsg] = createSignal('');
|
const [actionMsg, setActionMsg] = createSignal("");
|
||||||
const [busyAppId, setBusyAppId] = createSignal<string | null>(null);
|
const [busyAppId, setBusyAppId] = createSignal<string | null>(null);
|
||||||
const [contactByApp, setContactByApp] = createSignal<Record<string, ContactInfo>>({});
|
const [contactByApp, setContactByApp] = createSignal<Record<string, ContactInfo>>({});
|
||||||
|
|
||||||
const loadJobs = async () => {
|
const loadJobs = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch('/api/companies/jobs?page=1&limit=100');
|
const res = await apiFetch("/api/companies/jobs?page=1&limit=100");
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setJobs([]);
|
setJobs([]);
|
||||||
return;
|
return;
|
||||||
|
|
@ -64,7 +72,7 @@ export default function CompanyApplicationsPage() {
|
||||||
setSelectedJobId(nextJobId);
|
setSelectedJobId(nextJobId);
|
||||||
await loadApplications(nextJobId, statusFilter());
|
await loadApplications(nextJobId, statusFilter());
|
||||||
} else {
|
} else {
|
||||||
setSelectedJobId('');
|
setSelectedJobId("");
|
||||||
setApplications([]);
|
setApplications([]);
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -80,9 +88,9 @@ export default function CompanyApplicationsPage() {
|
||||||
setLoadingApps(true);
|
setLoadingApps(true);
|
||||||
try {
|
try {
|
||||||
const query = new URLSearchParams();
|
const query = new URLSearchParams();
|
||||||
query.set('page', '1');
|
query.set("page", "1");
|
||||||
query.set('limit', '50');
|
query.set("limit", "50");
|
||||||
if (status) query.set('status', status);
|
if (status) query.set("status", status);
|
||||||
const res = await apiFetch(`/api/companies/jobs/${jobId}/applications?${query.toString()}`);
|
const res = await apiFetch(`/api/companies/jobs/${jobId}/applications?${query.toString()}`);
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setApplications([]);
|
setApplications([]);
|
||||||
|
|
@ -105,18 +113,18 @@ export default function CompanyApplicationsPage() {
|
||||||
|
|
||||||
const updateApplicationStatus = async (id: string, status: string) => {
|
const updateApplicationStatus = async (id: string, status: string) => {
|
||||||
setBusyAppId(id);
|
setBusyAppId(id);
|
||||||
setActionMsg('');
|
setActionMsg("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/companies/applications/${id}/status`, {
|
const res = await apiFetch(`/api/companies/applications/${id}/status`, {
|
||||||
method: 'PATCH',
|
method: "PATCH",
|
||||||
body: JSON.stringify({ status }),
|
body: JSON.stringify({ status }),
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setActionMsg(`Application marked as ${status.replace(/_/g, ' ')}.`);
|
setActionMsg(`Application marked as ${status.replace(/_/g, " ")}.`);
|
||||||
await refreshCurrent();
|
await refreshCurrent();
|
||||||
} else {
|
} else {
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
setActionMsg(data.error ?? data.message ?? 'Failed to update application status.');
|
setActionMsg(data.error ?? data.message ?? "Failed to update application status.");
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
setBusyAppId(null);
|
setBusyAppId(null);
|
||||||
|
|
@ -125,14 +133,14 @@ export default function CompanyApplicationsPage() {
|
||||||
|
|
||||||
const loadContact = async (id: string) => {
|
const loadContact = async (id: string) => {
|
||||||
setBusyAppId(id);
|
setBusyAppId(id);
|
||||||
setActionMsg('');
|
setActionMsg("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/companies/applications/${id}/contact`);
|
const res = await apiFetch(`/api/companies/applications/${id}/contact`);
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setContactByApp((prev) => ({ ...prev, [id]: data }));
|
setContactByApp((prev) => ({ ...prev, [id]: data }));
|
||||||
} else {
|
} else {
|
||||||
setActionMsg(data.error ?? data.message ?? 'Failed to load contact details.');
|
setActionMsg(data.error ?? data.message ?? "Failed to load contact details.");
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
setBusyAppId(null);
|
setBusyAppId(null);
|
||||||
|
|
@ -140,35 +148,64 @@ export default function CompanyApplicationsPage() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const prettyDate = (value?: string) => {
|
const prettyDate = (value?: string) => {
|
||||||
if (!value) return '—';
|
if (!value) return "—";
|
||||||
const d = new Date(value);
|
const d = new Date(value);
|
||||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleString('en-IN');
|
return Number.isNaN(d.getTime()) ? value : d.toLocaleString("en-IN");
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ 'max-width': '920px' }}>
|
<div style={{ "max-width": "920px" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-bottom': '16px', gap: '12px', 'flex-wrap': 'wrap' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
"align-items": "center",
|
||||||
|
"margin-bottom": "16px",
|
||||||
|
gap: "12px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Applications</p>
|
<p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
|
Applications
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
|
||||||
Review applicants and update their hiring stage.
|
Review applicants and update their hiring stage.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" onClick={refreshCurrent} style={BTN_GHOST}>Refresh</button>
|
<button type="button" onClick={refreshCurrent} style={BTN_GHOST}>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={actionMsg()}>
|
<Show when={actionMsg()}>
|
||||||
<div style={{ ...CARD, 'margin-bottom': '14px', padding: '12px 14px', 'font-size': '13px', color: '#374151' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
"margin-bottom": "14px",
|
||||||
|
padding: "12px 14px",
|
||||||
|
"font-size": "13px",
|
||||||
|
color: "#374151",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{actionMsg()}
|
{actionMsg()}
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={loading()}>
|
<Show when={loading()}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#9CA3AF' }}>Loading jobs…</div>
|
<div style={{ ...CARD, "text-align": "center", color: "#9CA3AF" }}>Loading jobs…</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!loading()}>
|
<Show when={!loading()}>
|
||||||
<div style={{ ...CARD, 'margin-bottom': '12px', display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '12px' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
"margin-bottom": "12px",
|
||||||
|
display: "grid",
|
||||||
|
"grid-template-columns": "1fr 1fr",
|
||||||
|
gap: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Select Job</label>
|
<label style={LABEL}>Select Job</label>
|
||||||
<select
|
<select
|
||||||
|
|
@ -186,7 +223,7 @@ export default function CompanyApplicationsPage() {
|
||||||
<For each={jobs()}>
|
<For each={jobs()}>
|
||||||
{(job) => (
|
{(job) => (
|
||||||
<option value={job.id}>
|
<option value={job.id}>
|
||||||
{job.title} ({job.status.replace(/_/g, ' ')})
|
{job.title} ({job.status.replace(/_/g, " ")})
|
||||||
</option>
|
</option>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
|
|
@ -216,96 +253,181 @@ export default function CompanyApplicationsPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={!selectedJobId()}>
|
<Show when={!selectedJobId()}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#9CA3AF' }}>
|
<div style={{ ...CARD, "text-align": "center", color: "#9CA3AF" }}>
|
||||||
Create a job first to view applications.
|
Create a job first to view applications.
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={loadingApps()}>
|
<Show when={loadingApps()}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#9CA3AF' }}>Loading applications…</div>
|
<div style={{ ...CARD, "text-align": "center", color: "#9CA3AF" }}>
|
||||||
|
Loading applications…
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!loadingApps() && selectedJobId() && applications().length === 0}>
|
<Show when={!loadingApps() && selectedJobId() && applications().length === 0}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#6B7280' }}>No applications found for this job.</div>
|
<div style={{ ...CARD, "text-align": "center", color: "#6B7280" }}>
|
||||||
|
No applications found for this job.
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!loadingApps() && applications().length > 0}>
|
<Show when={!loadingApps() && applications().length > 0}>
|
||||||
<div style={{ display: 'grid', gap: '10px' }}>
|
<div style={{ display: "grid", gap: "10px" }}>
|
||||||
<For each={applications()}>
|
<For each={applications()}>
|
||||||
{(app) => (
|
{(app) => (
|
||||||
<div style={{ ...CARD, padding: '16px' }}>
|
<div style={{ ...CARD, padding: "16px" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'flex-start', gap: '10px', 'flex-wrap': 'wrap' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
"align-items": "flex-start",
|
||||||
|
gap: "10px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '14px', 'font-weight': '800', color: '#111827' }}>
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "0",
|
||||||
|
"font-size": "14px",
|
||||||
|
"font-weight": "800",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
Application #{app.id.slice(0, 8)}
|
Application #{app.id.slice(0, 8)}
|
||||||
</p>
|
</p>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#6B7280' }}>
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>
|
||||||
Applied at {prettyDate(app.applied_at)}
|
Applied at {prettyDate(app.applied_at)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span style={{
|
<span
|
||||||
display: 'inline-flex',
|
style={{
|
||||||
'align-items': 'center',
|
display: "inline-flex",
|
||||||
height: '24px',
|
"align-items": "center",
|
||||||
padding: '0 10px',
|
height: "24px",
|
||||||
'border-radius': '999px',
|
padding: "0 10px",
|
||||||
background: '#EEF2FF',
|
"border-radius": "999px",
|
||||||
color: '#3730A3',
|
background: "#EEF2FF",
|
||||||
'font-size': '11px',
|
color: "#3730A3",
|
||||||
'font-weight': '700',
|
"font-size": "11px",
|
||||||
}}>
|
"font-weight": "700",
|
||||||
{app.status.replace(/_/g, ' ')}
|
}}
|
||||||
|
>
|
||||||
|
{app.status.replace(/_/g, " ")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={app.cover_letter}>
|
<Show when={app.cover_letter}>
|
||||||
<p style={{ margin: '10px 0 0', 'font-size': '13px', color: '#374151', 'line-height': '1.5' }}>
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "10px 0 0",
|
||||||
|
"font-size": "13px",
|
||||||
|
color: "#374151",
|
||||||
|
"line-height": "1.5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{app.cover_letter}
|
{app.cover_letter}
|
||||||
</p>
|
</p>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={app.resume_url}>
|
<Show when={app.resume_url}>
|
||||||
<p style={{ margin: '8px 0 0', 'font-size': '12px' }}>
|
<p style={{ margin: "8px 0 0", "font-size": "12px" }}>
|
||||||
<a href={app.resume_url!} target="_blank" rel="noreferrer" style={{ color: '#1D4ED8', 'font-weight': '600' }}>
|
<a
|
||||||
|
href={app.resume_url!}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
style={{ color: "#1D4ED8", "font-weight": "600" }}
|
||||||
|
>
|
||||||
View Resume
|
View Resume
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: '8px', 'flex-wrap': 'wrap', 'margin-top': '12px' }}>
|
<div
|
||||||
<button type="button" onClick={() => updateApplicationStatus(app.id, 'SHORTLISTED')} disabled={busyAppId() === app.id} style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
|
style={{ display: "flex", gap: "8px", "flex-wrap": "wrap", "margin-top": "12px" }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => updateApplicationStatus(app.id, "SHORTLISTED")}
|
||||||
|
disabled={busyAppId() === app.id}
|
||||||
|
style={{ ...BTN_GHOST, height: "32px", "font-size": "12px", padding: "0 12px" }}
|
||||||
|
>
|
||||||
Shortlist
|
Shortlist
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => updateApplicationStatus(app.id, 'INTERVIEW')} disabled={busyAppId() === app.id} style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => updateApplicationStatus(app.id, "INTERVIEW")}
|
||||||
|
disabled={busyAppId() === app.id}
|
||||||
|
style={{ ...BTN_GHOST, height: "32px", "font-size": "12px", padding: "0 12px" }}
|
||||||
|
>
|
||||||
Interview
|
Interview
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => updateApplicationStatus(app.id, 'OFFERED')} disabled={busyAppId() === app.id} style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => updateApplicationStatus(app.id, "OFFERED")}
|
||||||
|
disabled={busyAppId() === app.id}
|
||||||
|
style={{ ...BTN_GHOST, height: "32px", "font-size": "12px", padding: "0 12px" }}
|
||||||
|
>
|
||||||
Offer
|
Offer
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => updateApplicationStatus(app.id, 'HIRED')} disabled={busyAppId() === app.id} style={{ ...BTN_ORANGE, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => updateApplicationStatus(app.id, "HIRED")}
|
||||||
|
disabled={busyAppId() === app.id}
|
||||||
|
style={{
|
||||||
|
...BTN_ORANGE,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
Hire
|
Hire
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => updateApplicationStatus(app.id, 'REJECTED')} disabled={busyAppId() === app.id} style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => updateApplicationStatus(app.id, "REJECTED")}
|
||||||
|
disabled={busyAppId() === app.id}
|
||||||
|
style={{ ...BTN_GHOST, height: "32px", "font-size": "12px", padding: "0 12px" }}
|
||||||
|
>
|
||||||
Reject
|
Reject
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => loadContact(app.id)} disabled={busyAppId() === app.id} style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px' }}>
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => loadContact(app.id)}
|
||||||
|
disabled={busyAppId() === app.id}
|
||||||
|
style={{ ...BTN_GHOST, height: "32px", "font-size": "12px", padding: "0 12px" }}
|
||||||
|
>
|
||||||
View Contact
|
View Contact
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={contactByApp()[app.id]}>
|
<Show when={contactByApp()[app.id]}>
|
||||||
<div style={{ margin: '12px 0 0', padding: '10px', border: '1px solid #E5E7EB', 'border-radius': '8px', background: '#F9FAFB' }}>
|
<div
|
||||||
<p style={{ margin: '0', 'font-size': '13px', 'font-weight': '700', color: '#111827' }}>
|
style={{
|
||||||
{contactByApp()[app.id]?.full_name || 'Applicant'}
|
margin: "12px 0 0",
|
||||||
|
padding: "10px",
|
||||||
|
border: "1px solid #E5E7EB",
|
||||||
|
"border-radius": "8px",
|
||||||
|
background: "#F9FAFB",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "0",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "700",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{contactByApp()[app.id]?.full_name || "Applicant"}
|
||||||
</p>
|
</p>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#4B5563' }}>
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#4B5563" }}>
|
||||||
{contactByApp()[app.id]?.email || 'No email'}
|
{contactByApp()[app.id]?.email || "No email"}
|
||||||
</p>
|
</p>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#4B5563' }}>
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#4B5563" }}>
|
||||||
{contactByApp()[app.id]?.phone || 'No phone'}
|
{contactByApp()[app.id]?.phone || "No phone"}
|
||||||
</p>
|
</p>
|
||||||
<p style={{ margin: '6px 0 0', 'font-size': '11px', color: '#6B7280' }}>
|
<p style={{ margin: "6px 0 0", "font-size": "11px", color: "#6B7280" }}>
|
||||||
Remaining contact views: {contactByApp()[app.id]?.quota?.total_remaining ?? 0}
|
Remaining contact views: {contactByApp()[app.id]?.quota?.total_remaining ?? 0}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,22 @@
|
||||||
import { For, Show, createSignal, onMount } from 'solid-js';
|
/**
|
||||||
import { BTN_GHOST, BTN_ORANGE, BTN_PRIMARY, CARD, INPUT, LABEL } from '~/components/DashboardShell';
|
* Company Jobs Page - Wired to real backend APIs
|
||||||
|
* Endpoints:
|
||||||
|
* GET /api/companies/jobs - List company's jobs
|
||||||
|
* POST /api/companies/jobs - Create new job
|
||||||
|
* PATCH /api/companies/jobs/:id - Update job
|
||||||
|
* DELETE /api/companies/jobs/:id - Delete job
|
||||||
|
*/
|
||||||
|
import { For, Show, createSignal, onMount } from "solid-js";
|
||||||
|
import {
|
||||||
|
BTN_GHOST,
|
||||||
|
BTN_ORANGE,
|
||||||
|
BTN_PRIMARY,
|
||||||
|
CARD,
|
||||||
|
INPUT,
|
||||||
|
LABEL,
|
||||||
|
} from "~/components/DashboardShell";
|
||||||
|
|
||||||
const API = '/api/gateway';
|
const API = "/api/gateway";
|
||||||
|
|
||||||
interface JobItem {
|
interface JobItem {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -31,22 +46,22 @@ interface JobFormState {
|
||||||
}
|
}
|
||||||
|
|
||||||
const EMPTY_FORM: JobFormState = {
|
const EMPTY_FORM: JobFormState = {
|
||||||
title: '',
|
title: "",
|
||||||
category: '',
|
category: "",
|
||||||
description: '',
|
description: "",
|
||||||
location: '',
|
location: "",
|
||||||
job_type: 'FULL_TIME',
|
job_type: "FULL_TIME",
|
||||||
salary_min: '',
|
salary_min: "",
|
||||||
salary_max: '',
|
salary_max: "",
|
||||||
experience_years: '',
|
experience_years: "",
|
||||||
skills: '',
|
skills: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
async function apiFetch(path: string, opts?: RequestInit) {
|
async function apiFetch(path: string, opts?: RequestInit) {
|
||||||
return fetch(`${API}${path}`, {
|
return fetch(`${API}${path}`, {
|
||||||
...opts,
|
...opts,
|
||||||
credentials: 'include',
|
credentials: "include",
|
||||||
headers: { 'Content-Type': 'application/json', ...(opts?.headers ?? {}) },
|
headers: { "Content-Type": "application/json", ...(opts?.headers ?? {}) },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -56,14 +71,14 @@ export default function CompanyJobsPage() {
|
||||||
const [showForm, setShowForm] = createSignal(false);
|
const [showForm, setShowForm] = createSignal(false);
|
||||||
const [form, setForm] = createSignal<JobFormState>({ ...EMPTY_FORM });
|
const [form, setForm] = createSignal<JobFormState>({ ...EMPTY_FORM });
|
||||||
const [saving, setSaving] = createSignal(false);
|
const [saving, setSaving] = createSignal(false);
|
||||||
const [error, setError] = createSignal('');
|
const [error, setError] = createSignal("");
|
||||||
const [actionMsg, setActionMsg] = createSignal('');
|
const [actionMsg, setActionMsg] = createSignal("");
|
||||||
const [busyJobId, setBusyJobId] = createSignal<string | null>(null);
|
const [busyJobId, setBusyJobId] = createSignal<string | null>(null);
|
||||||
|
|
||||||
const loadJobs = async () => {
|
const loadJobs = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch('/api/companies/jobs?page=1&limit=50');
|
const res = await apiFetch("/api/companies/jobs?page=1&limit=50");
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setJobs([]);
|
setJobs([]);
|
||||||
return;
|
return;
|
||||||
|
|
@ -82,26 +97,26 @@ export default function CompanyJobsPage() {
|
||||||
|
|
||||||
const openCreate = () => {
|
const openCreate = () => {
|
||||||
setForm({ ...EMPTY_FORM });
|
setForm({ ...EMPTY_FORM });
|
||||||
setError('');
|
setError("");
|
||||||
setActionMsg('');
|
setActionMsg("");
|
||||||
setShowForm(true);
|
setShowForm(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeCreate = () => {
|
const closeCreate = () => {
|
||||||
setShowForm(false);
|
setShowForm(false);
|
||||||
setForm({ ...EMPTY_FORM });
|
setForm({ ...EMPTY_FORM });
|
||||||
setError('');
|
setError("");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCreate = async () => {
|
const handleCreate = async () => {
|
||||||
if (!form().title.trim() || !form().description.trim() || !form().location.trim()) {
|
if (!form().title.trim() || !form().description.trim() || !form().location.trim()) {
|
||||||
setError('Title, description, and location are required.');
|
setError("Title, description, and location are required.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
setError('');
|
setError("");
|
||||||
setActionMsg('');
|
setActionMsg("");
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
title: form().title.trim(),
|
title: form().title.trim(),
|
||||||
|
|
@ -112,27 +127,27 @@ export default function CompanyJobsPage() {
|
||||||
salary_min: form().salary_min ? Number(form().salary_min) : undefined,
|
salary_min: form().salary_min ? Number(form().salary_min) : undefined,
|
||||||
salary_max: form().salary_max ? Number(form().salary_max) : undefined,
|
salary_max: form().salary_max ? Number(form().salary_max) : undefined,
|
||||||
experience_years: form().experience_years ? Number(form().experience_years) : undefined,
|
experience_years: form().experience_years ? Number(form().experience_years) : undefined,
|
||||||
skills: form().skills
|
skills: form()
|
||||||
.split(',')
|
.skills.split(",")
|
||||||
.map((s) => s.trim())
|
.map((s) => s.trim())
|
||||||
.filter(Boolean),
|
.filter(Boolean),
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch('/api/companies/jobs', {
|
const res = await apiFetch("/api/companies/jobs", {
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify(payload),
|
||||||
});
|
});
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setError(data.error ?? data.message ?? 'Failed to create job.');
|
setError(data.error ?? data.message ?? "Failed to create job.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setActionMsg('Job created as draft.');
|
setActionMsg("Job created as draft.");
|
||||||
closeCreate();
|
closeCreate();
|
||||||
await loadJobs();
|
await loadJobs();
|
||||||
} catch {
|
} catch {
|
||||||
setError('Network error. Please try again.');
|
setError("Network error. Please try again.");
|
||||||
} finally {
|
} finally {
|
||||||
setSaving(false);
|
setSaving(false);
|
||||||
}
|
}
|
||||||
|
|
@ -140,15 +155,15 @@ export default function CompanyJobsPage() {
|
||||||
|
|
||||||
const submitJob = async (jobId: string) => {
|
const submitJob = async (jobId: string) => {
|
||||||
setBusyJobId(jobId);
|
setBusyJobId(jobId);
|
||||||
setActionMsg('');
|
setActionMsg("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/companies/jobs/${jobId}/submit`, { method: 'POST' });
|
const res = await apiFetch(`/api/companies/jobs/${jobId}/submit`, { method: "POST" });
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setActionMsg('Job submitted for verification.');
|
setActionMsg("Job submitted for verification.");
|
||||||
await loadJobs();
|
await loadJobs();
|
||||||
} else {
|
} else {
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
setActionMsg(data.error ?? data.message ?? 'Unable to submit this job.');
|
setActionMsg(data.error ?? data.message ?? "Unable to submit this job.");
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
setBusyJobId(null);
|
setBusyJobId(null);
|
||||||
|
|
@ -157,15 +172,15 @@ export default function CompanyJobsPage() {
|
||||||
|
|
||||||
const closeJob = async (jobId: string) => {
|
const closeJob = async (jobId: string) => {
|
||||||
setBusyJobId(jobId);
|
setBusyJobId(jobId);
|
||||||
setActionMsg('');
|
setActionMsg("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/companies/jobs/${jobId}/close`, { method: 'POST' });
|
const res = await apiFetch(`/api/companies/jobs/${jobId}/close`, { method: "POST" });
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setActionMsg('Job closed.');
|
setActionMsg("Job closed.");
|
||||||
await loadJobs();
|
await loadJobs();
|
||||||
} else {
|
} else {
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
setActionMsg(data.error ?? data.message ?? 'Unable to close this job.');
|
setActionMsg(data.error ?? data.message ?? "Unable to close this job.");
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
setBusyJobId(null);
|
setBusyJobId(null);
|
||||||
|
|
@ -174,21 +189,38 @@ export default function CompanyJobsPage() {
|
||||||
|
|
||||||
const statusColor = (status: string) => {
|
const statusColor = (status: string) => {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case 'DRAFT': return '#6B7280';
|
case "DRAFT":
|
||||||
case 'PENDING_APPROVAL': return '#F59E0B';
|
return "#6B7280";
|
||||||
case 'LIVE': return '#10B981';
|
case "PENDING_APPROVAL":
|
||||||
case 'REJECTED': return '#EF4444';
|
return "#F59E0B";
|
||||||
case 'CLOSED': return '#374151';
|
case "LIVE":
|
||||||
default: return '#6B7280';
|
return "#10B981";
|
||||||
|
case "REJECTED":
|
||||||
|
return "#EF4444";
|
||||||
|
case "CLOSED":
|
||||||
|
return "#374151";
|
||||||
|
default:
|
||||||
|
return "#6B7280";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ 'max-width': '920px' }}>
|
<div style={{ "max-width": "920px" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-bottom': '16px', gap: '12px', 'flex-wrap': 'wrap' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
"align-items": "center",
|
||||||
|
"margin-bottom": "16px",
|
||||||
|
gap: "12px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Jobs</p>
|
<p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
|
Jobs
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
|
||||||
Create and manage your job postings.
|
Create and manage your job postings.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -198,144 +230,281 @@ export default function CompanyJobsPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={actionMsg()}>
|
<Show when={actionMsg()}>
|
||||||
<div style={{ ...CARD, 'margin-bottom': '14px', padding: '12px 14px', 'font-size': '13px', color: '#374151' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
"margin-bottom": "14px",
|
||||||
|
padding: "12px 14px",
|
||||||
|
"font-size": "13px",
|
||||||
|
color: "#374151",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{actionMsg()}
|
{actionMsg()}
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={showForm()}>
|
<Show when={showForm()}>
|
||||||
<div style={{ ...CARD, 'margin-bottom': '16px', border: '1px solid #FF5E13' }}>
|
<div style={{ ...CARD, "margin-bottom": "16px", border: "1px solid #FF5E13" }}>
|
||||||
<p style={{ margin: '0 0 14px', 'font-size': '16px', 'font-weight': '800', color: '#111827' }}>
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "0 0 14px",
|
||||||
|
"font-size": "16px",
|
||||||
|
"font-weight": "800",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
New Job
|
New Job
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '12px' }}>
|
<div style={{ display: "grid", "grid-template-columns": "1fr 1fr", gap: "12px" }}>
|
||||||
<div style={{ 'grid-column': 'span 2' }}>
|
<div style={{ "grid-column": "span 2" }}>
|
||||||
<label style={LABEL}>Job Title</label>
|
<label style={LABEL}>Job Title</label>
|
||||||
<input value={form().title} onInput={(e) => setField('title', e.currentTarget.value)} style={INPUT} placeholder="Frontend Developer" />
|
<input
|
||||||
|
value={form().title}
|
||||||
|
onInput={(e) => setField("title", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Frontend Developer"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Category</label>
|
<label style={LABEL}>Category</label>
|
||||||
<input value={form().category} onInput={(e) => setField('category', e.currentTarget.value)} style={INPUT} placeholder="Engineering" />
|
<input
|
||||||
|
value={form().category}
|
||||||
|
onInput={(e) => setField("category", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Engineering"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Job Type</label>
|
<label style={LABEL}>Job Type</label>
|
||||||
<select value={form().job_type} onChange={(e) => setField('job_type', e.currentTarget.value)} style={INPUT}>
|
<select
|
||||||
|
value={form().job_type}
|
||||||
|
onChange={(e) => setField("job_type", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
>
|
||||||
<option value="FULL_TIME">Full Time</option>
|
<option value="FULL_TIME">Full Time</option>
|
||||||
<option value="PART_TIME">Part Time</option>
|
<option value="PART_TIME">Part Time</option>
|
||||||
<option value="CONTRACT">Contract</option>
|
<option value="CONTRACT">Contract</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ 'grid-column': 'span 2' }}>
|
<div style={{ "grid-column": "span 2" }}>
|
||||||
<label style={LABEL}>Location</label>
|
<label style={LABEL}>Location</label>
|
||||||
<input value={form().location} onInput={(e) => setField('location', e.currentTarget.value)} style={INPUT} placeholder="Bengaluru (Hybrid)" />
|
<input
|
||||||
|
value={form().location}
|
||||||
|
onInput={(e) => setField("location", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Bengaluru (Hybrid)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ 'grid-column': 'span 2' }}>
|
<div style={{ "grid-column": "span 2" }}>
|
||||||
<label style={LABEL}>Description</label>
|
<label style={LABEL}>Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows={4}
|
rows={4}
|
||||||
value={form().description}
|
value={form().description}
|
||||||
onInput={(e) => setField('description', e.currentTarget.value)}
|
onInput={(e) => setField("description", e.currentTarget.value)}
|
||||||
style={{ ...INPUT, height: 'auto', padding: '10px 12px', resize: 'vertical' }}
|
style={{ ...INPUT, height: "auto", padding: "10px 12px", resize: "vertical" }}
|
||||||
placeholder="Role overview, responsibilities, and requirements"
|
placeholder="Role overview, responsibilities, and requirements"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Min Salary</label>
|
<label style={LABEL}>Min Salary</label>
|
||||||
<input type="number" value={form().salary_min} onInput={(e) => setField('salary_min', e.currentTarget.value)} style={INPUT} />
|
<input
|
||||||
|
type="number"
|
||||||
|
value={form().salary_min}
|
||||||
|
onInput={(e) => setField("salary_min", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Max Salary</label>
|
<label style={LABEL}>Max Salary</label>
|
||||||
<input type="number" value={form().salary_max} onInput={(e) => setField('salary_max', e.currentTarget.value)} style={INPUT} />
|
<input
|
||||||
|
type="number"
|
||||||
|
value={form().salary_max}
|
||||||
|
onInput={(e) => setField("salary_max", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Experience (years)</label>
|
<label style={LABEL}>Experience (years)</label>
|
||||||
<input type="number" value={form().experience_years} onInput={(e) => setField('experience_years', e.currentTarget.value)} style={INPUT} />
|
<input
|
||||||
|
type="number"
|
||||||
|
value={form().experience_years}
|
||||||
|
onInput={(e) => setField("experience_years", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Skills (comma separated)</label>
|
<label style={LABEL}>Skills (comma separated)</label>
|
||||||
<input value={form().skills} onInput={(e) => setField('skills', e.currentTarget.value)} style={INPUT} placeholder="Rust, SQL, Docker" />
|
<input
|
||||||
|
value={form().skills}
|
||||||
|
onInput={(e) => setField("skills", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Rust, SQL, Docker"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Show when={error()}>
|
<Show when={error()}>
|
||||||
<p style={{ margin: '12px 0 0', 'font-size': '13px', color: '#EF4444', 'font-weight': '600' }}>{error()}</p>
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "12px 0 0",
|
||||||
|
"font-size": "13px",
|
||||||
|
color: "#EF4444",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{error()}
|
||||||
|
</p>
|
||||||
</Show>
|
</Show>
|
||||||
<div style={{ display: 'flex', gap: '10px', 'margin-top': '14px' }}>
|
<div style={{ display: "flex", gap: "10px", "margin-top": "14px" }}>
|
||||||
<button type="button" onClick={handleCreate} disabled={saving()} style={{ ...BTN_PRIMARY, opacity: saving() ? '0.7' : '1' }}>
|
<button
|
||||||
{saving() ? 'Creating…' : 'Create Draft'}
|
type="button"
|
||||||
|
onClick={handleCreate}
|
||||||
|
disabled={saving()}
|
||||||
|
style={{ ...BTN_PRIMARY, opacity: saving() ? "0.7" : "1" }}
|
||||||
|
>
|
||||||
|
{saving() ? "Creating…" : "Create Draft"}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={closeCreate} style={BTN_GHOST}>
|
||||||
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={closeCreate} style={BTN_GHOST}>Cancel</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={loading()}>
|
<Show when={loading()}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#9CA3AF' }}>Loading jobs…</div>
|
<div style={{ ...CARD, "text-align": "center", color: "#9CA3AF" }}>Loading jobs…</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!loading() && jobs().length === 0}>
|
<Show when={!loading() && jobs().length === 0}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', padding: '34px 24px' }}>
|
<div style={{ ...CARD, "text-align": "center", padding: "34px 24px" }}>
|
||||||
<p style={{ margin: '0 0 6px', 'font-size': '16px', 'font-weight': '700', color: '#111827' }}>No jobs yet</p>
|
<p
|
||||||
<p style={{ margin: '0', 'font-size': '13px', color: '#6B7280' }}>Create your first draft job to start receiving applications.</p>
|
style={{
|
||||||
|
margin: "0 0 6px",
|
||||||
|
"font-size": "16px",
|
||||||
|
"font-weight": "700",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No jobs yet
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "0", "font-size": "13px", color: "#6B7280" }}>
|
||||||
|
Create your first draft job to start receiving applications.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!loading() && jobs().length > 0}>
|
<Show when={!loading() && jobs().length > 0}>
|
||||||
<div style={{ display: 'grid', gap: '10px' }}>
|
<div style={{ display: "grid", gap: "10px" }}>
|
||||||
<For each={jobs()}>
|
<For each={jobs()}>
|
||||||
{(job) => (
|
{(job) => (
|
||||||
<div style={{ ...CARD, padding: '16px' }}>
|
<div style={{ ...CARD, padding: "16px" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', gap: '10px', 'align-items': 'flex-start', 'flex-wrap': 'wrap' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
gap: "10px",
|
||||||
|
"align-items": "flex-start",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '15px', 'font-weight': '800', color: '#111827' }}>{job.title}</p>
|
<p
|
||||||
<p style={{ margin: '3px 0 0', 'font-size': '12px', color: '#6B7280' }}>
|
style={{
|
||||||
{[job.location, job.job_type, job.category || 'General'].join(' • ')}
|
margin: "0",
|
||||||
|
"font-size": "15px",
|
||||||
|
"font-weight": "800",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{job.title}
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "3px 0 0", "font-size": "12px", color: "#6B7280" }}>
|
||||||
|
{[job.location, job.job_type, job.category || "General"].join(" • ")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span style={{
|
<span
|
||||||
display: 'inline-flex',
|
style={{
|
||||||
'align-items': 'center',
|
display: "inline-flex",
|
||||||
padding: '0 10px',
|
"align-items": "center",
|
||||||
height: '24px',
|
padding: "0 10px",
|
||||||
'border-radius': '999px',
|
height: "24px",
|
||||||
background: `${statusColor(job.status)}20`,
|
"border-radius": "999px",
|
||||||
color: statusColor(job.status),
|
background: `${statusColor(job.status)}20`,
|
||||||
'font-size': '11px',
|
color: statusColor(job.status),
|
||||||
'font-weight': '700',
|
"font-size": "11px",
|
||||||
}}>
|
"font-weight": "700",
|
||||||
{job.status.replace(/_/g, ' ')}
|
}}
|
||||||
|
>
|
||||||
|
{job.status.replace(/_/g, " ")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p style={{ margin: '8px 0 0', 'font-size': '13px', color: '#374151', 'line-height': '1.5' }}>
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "8px 0 0",
|
||||||
|
"font-size": "13px",
|
||||||
|
color: "#374151",
|
||||||
|
"line-height": "1.5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{job.description}
|
{job.description}
|
||||||
</p>
|
</p>
|
||||||
<Show when={(job.skills || []).length > 0}>
|
<Show when={(job.skills || []).length > 0}>
|
||||||
<div style={{ display: 'flex', gap: '6px', 'flex-wrap': 'wrap', 'margin-top': '8px' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: "6px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
"margin-top": "8px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<For each={job.skills || []}>
|
<For each={job.skills || []}>
|
||||||
{(skill) => (
|
{(skill) => (
|
||||||
<span style={{ 'font-size': '11px', color: '#4B5563', background: '#F3F4F6', border: '1px solid #E5E7EB', 'border-radius': '6px', padding: '2px 8px' }}>
|
<span
|
||||||
|
style={{
|
||||||
|
"font-size": "11px",
|
||||||
|
color: "#4B5563",
|
||||||
|
background: "#F3F4F6",
|
||||||
|
border: "1px solid #E5E7EB",
|
||||||
|
"border-radius": "6px",
|
||||||
|
padding: "2px 8px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{skill}
|
{skill}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<div style={{ display: 'flex', gap: '8px', 'margin-top': '12px', 'flex-wrap': 'wrap' }}>
|
<div
|
||||||
<Show when={job.status === 'DRAFT'}>
|
style={{ display: "flex", gap: "8px", "margin-top": "12px", "flex-wrap": "wrap" }}
|
||||||
|
>
|
||||||
|
<Show when={job.status === "DRAFT"}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => submitJob(job.id)}
|
onClick={() => submitJob(job.id)}
|
||||||
disabled={busyJobId() === job.id}
|
disabled={busyJobId() === job.id}
|
||||||
style={{ ...BTN_ORANGE, height: '32px', 'font-size': '12px', padding: '0 14px', opacity: busyJobId() === job.id ? '0.65' : '1' }}
|
style={{
|
||||||
|
...BTN_ORANGE,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 14px",
|
||||||
|
opacity: busyJobId() === job.id ? "0.65" : "1",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Submit for Approval
|
Submit for Approval
|
||||||
</button>
|
</button>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={job.status !== 'CLOSED'}>
|
<Show when={job.status !== "CLOSED"}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => closeJob(job.id)}
|
onClick={() => closeJob(job.id)}
|
||||||
disabled={busyJobId() === job.id}
|
disabled={busyJobId() === job.id}
|
||||||
style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 14px', opacity: busyJobId() === job.id ? '0.65' : '1' }}
|
style={{
|
||||||
|
...BTN_GHOST,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 14px",
|
||||||
|
opacity: busyJobId() === job.id ? "0.65" : "1",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Close Job
|
Close Job
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,15 @@
|
||||||
import { For, Show, createSignal, onMount } from 'solid-js';
|
/**
|
||||||
import { BTN_GHOST, BTN_ORANGE, CARD, INPUT, LABEL } from '~/components/DashboardShell';
|
* Customer Requirements Page - Wired to real backend APIs
|
||||||
|
* Endpoints:
|
||||||
|
* GET /api/customers/requirements - List customer's requirements
|
||||||
|
* POST /api/customers/requirements - Create new requirement
|
||||||
|
* PATCH /api/customers/requirements/:id - Update requirement
|
||||||
|
* DELETE /api/customers/requirements/:id - Delete requirement
|
||||||
|
*/
|
||||||
|
import { For, Show, createSignal, onMount } from "solid-js";
|
||||||
|
import { BTN_GHOST, BTN_ORANGE, CARD, INPUT, LABEL } from "~/components/DashboardShell";
|
||||||
|
|
||||||
const API = '/api/gateway';
|
const API = "/api/gateway";
|
||||||
|
|
||||||
type RequirementItem = {
|
type RequirementItem = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -18,8 +26,8 @@ type RequirementItem = {
|
||||||
async function apiFetch(path: string, opts?: RequestInit) {
|
async function apiFetch(path: string, opts?: RequestInit) {
|
||||||
return fetch(`${API}${path}`, {
|
return fetch(`${API}${path}`, {
|
||||||
...opts,
|
...opts,
|
||||||
credentials: 'include',
|
credentials: "include",
|
||||||
headers: { 'Content-Type': 'application/json', ...(opts?.headers ?? {}) },
|
headers: { "Content-Type": "application/json", ...(opts?.headers ?? {}) },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,31 +36,31 @@ export default function CustomerRequirementsPage() {
|
||||||
const [loading, setLoading] = createSignal(true);
|
const [loading, setLoading] = createSignal(true);
|
||||||
const [busyId, setBusyId] = createSignal<string | null>(null);
|
const [busyId, setBusyId] = createSignal<string | null>(null);
|
||||||
const [saving, setSaving] = createSignal(false);
|
const [saving, setSaving] = createSignal(false);
|
||||||
const [msg, setMsg] = createSignal('');
|
const [msg, setMsg] = createSignal("");
|
||||||
const [err, setErr] = createSignal('');
|
const [err, setErr] = createSignal("");
|
||||||
const [form, setForm] = createSignal({
|
const [form, setForm] = createSignal({
|
||||||
title: '',
|
title: "",
|
||||||
description: '',
|
description: "",
|
||||||
budget_min: '',
|
budget_min: "",
|
||||||
budget_max: '',
|
budget_max: "",
|
||||||
area: '',
|
area: "",
|
||||||
city: '',
|
city: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const loadRequirements = async () => {
|
const loadRequirements = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch('/api/customers/requirements?page=1&limit=100');
|
const res = await apiFetch("/api/customers/requirements?page=1&limit=100");
|
||||||
const payload = await res.json().catch(() => ({}));
|
const payload = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(payload.error || payload.message || 'Failed to load requirements.');
|
setErr(payload.error || payload.message || "Failed to load requirements.");
|
||||||
setRequirements([]);
|
setRequirements([]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setRequirements(Array.isArray(payload?.data) ? payload.data : []);
|
setRequirements(Array.isArray(payload?.data) ? payload.data : []);
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while loading requirements.');
|
setErr("Network error while loading requirements.");
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
|
|
@ -65,8 +73,8 @@ export default function CustomerRequirementsPage() {
|
||||||
|
|
||||||
const createRequirement = async () => {
|
const createRequirement = async () => {
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
setMsg('');
|
setMsg("");
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const payload = {
|
const payload = {
|
||||||
title: form().title.trim(),
|
title: form().title.trim(),
|
||||||
|
|
@ -76,20 +84,20 @@ export default function CustomerRequirementsPage() {
|
||||||
area: form().area.trim() || undefined,
|
area: form().area.trim() || undefined,
|
||||||
city: form().city.trim() || undefined,
|
city: form().city.trim() || undefined,
|
||||||
};
|
};
|
||||||
const res = await apiFetch('/api/customers/requirements', {
|
const res = await apiFetch("/api/customers/requirements", {
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify(payload),
|
||||||
});
|
});
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(data.error || data.message || 'Failed to create requirement.');
|
setErr(data.error || data.message || "Failed to create requirement.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setMsg('Requirement created.');
|
setMsg("Requirement created.");
|
||||||
setForm({ title: '', description: '', budget_min: '', budget_max: '', area: '', city: '' });
|
setForm({ title: "", description: "", budget_min: "", budget_max: "", area: "", city: "" });
|
||||||
await loadRequirements();
|
await loadRequirements();
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while creating requirement.');
|
setErr("Network error while creating requirement.");
|
||||||
} finally {
|
} finally {
|
||||||
setSaving(false);
|
setSaving(false);
|
||||||
}
|
}
|
||||||
|
|
@ -97,112 +105,245 @@ export default function CustomerRequirementsPage() {
|
||||||
|
|
||||||
const submitRequirement = async (id: string) => {
|
const submitRequirement = async (id: string) => {
|
||||||
setBusyId(id);
|
setBusyId(id);
|
||||||
setMsg('');
|
setMsg("");
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/customers/requirements/${id}/submit`, { method: 'POST' });
|
const res = await apiFetch(`/api/customers/requirements/${id}/submit`, { method: "POST" });
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(data.error || data.message || 'Failed to submit requirement.');
|
setErr(data.error || data.message || "Failed to submit requirement.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setMsg('Requirement submitted to verification.');
|
setMsg("Requirement submitted to verification.");
|
||||||
await loadRequirements();
|
await loadRequirements();
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while submitting requirement.');
|
setErr("Network error while submitting requirement.");
|
||||||
} finally {
|
} finally {
|
||||||
setBusyId(null);
|
setBusyId(null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
|
<div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
|
||||||
<div style={CARD}>
|
<div style={CARD}>
|
||||||
<p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>My Requirements</p>
|
<p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
|
My Requirements
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
|
||||||
Create requirements. They move to verification first, then final approval.
|
Create requirements. They move to verification first, then final approval.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={CARD}>
|
<div style={CARD}>
|
||||||
<p style={{ margin: '0 0 10px', 'font-size': '16px', 'font-weight': '700', color: '#111827' }}>Post New Requirement</p>
|
<p
|
||||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '12px' }}>
|
style={{
|
||||||
<div style={{ 'grid-column': '1 / -1' }}>
|
margin: "0 0 10px",
|
||||||
|
"font-size": "16px",
|
||||||
|
"font-weight": "700",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Post New Requirement
|
||||||
|
</p>
|
||||||
|
<div style={{ display: "grid", "grid-template-columns": "1fr 1fr", gap: "12px" }}>
|
||||||
|
<div style={{ "grid-column": "1 / -1" }}>
|
||||||
<label style={LABEL}>Title</label>
|
<label style={LABEL}>Title</label>
|
||||||
<input value={form().title} onInput={(e) => setField('title', e.currentTarget.value)} style={INPUT} placeholder="Wedding photographer in Chennai" />
|
<input
|
||||||
|
value={form().title}
|
||||||
|
onInput={(e) => setField("title", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Wedding photographer in Chennai"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ 'grid-column': '1 / -1' }}>
|
<div style={{ "grid-column": "1 / -1" }}>
|
||||||
<label style={LABEL}>Description</label>
|
<label style={LABEL}>Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows={3}
|
rows={3}
|
||||||
value={form().description}
|
value={form().description}
|
||||||
onInput={(e) => setField('description', e.currentTarget.value)}
|
onInput={(e) => setField("description", e.currentTarget.value)}
|
||||||
style={{ ...INPUT, height: 'auto', padding: '10px 12px', resize: 'vertical' }}
|
style={{ ...INPUT, height: "auto", padding: "10px 12px", resize: "vertical" }}
|
||||||
placeholder="Describe what you need"
|
placeholder="Describe what you need"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Budget Min</label>
|
<label style={LABEL}>Budget Min</label>
|
||||||
<input value={form().budget_min} onInput={(e) => setField('budget_min', e.currentTarget.value)} style={INPUT} placeholder="10000" />
|
<input
|
||||||
|
value={form().budget_min}
|
||||||
|
onInput={(e) => setField("budget_min", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="10000"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Budget Max</label>
|
<label style={LABEL}>Budget Max</label>
|
||||||
<input value={form().budget_max} onInput={(e) => setField('budget_max', e.currentTarget.value)} style={INPUT} placeholder="50000" />
|
<input
|
||||||
|
value={form().budget_max}
|
||||||
|
onInput={(e) => setField("budget_max", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="50000"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>Area</label>
|
<label style={LABEL}>Area</label>
|
||||||
<input value={form().area} onInput={(e) => setField('area', e.currentTarget.value)} style={INPUT} placeholder="T Nagar" />
|
<input
|
||||||
|
value={form().area}
|
||||||
|
onInput={(e) => setField("area", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="T Nagar"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label style={LABEL}>City</label>
|
<label style={LABEL}>City</label>
|
||||||
<input value={form().city} onInput={(e) => setField('city', e.currentTarget.value)} style={INPUT} placeholder="Chennai" />
|
<input
|
||||||
|
value={form().city}
|
||||||
|
onInput={(e) => setField("city", e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Chennai"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'flex-end', 'margin-top': '12px' }}>
|
<div style={{ display: "flex", "justify-content": "flex-end", "margin-top": "12px" }}>
|
||||||
<button type="button" onClick={createRequirement} disabled={saving() || !form().title.trim()} style={{ ...BTN_ORANGE, opacity: saving() ? '0.7' : '1' }}>
|
<button
|
||||||
{saving() ? 'Posting...' : 'Post Requirement'}
|
type="button"
|
||||||
|
onClick={createRequirement}
|
||||||
|
disabled={saving() || !form().title.trim()}
|
||||||
|
style={{ ...BTN_ORANGE, opacity: saving() ? "0.7" : "1" }}
|
||||||
|
>
|
||||||
|
{saving() ? "Posting..." : "Post Requirement"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={msg()}>
|
<Show when={msg()}>
|
||||||
<div style={{ ...CARD, border: '1px solid #BBF7D0', background: '#ECFDF5', padding: '12px 14px', color: '#065F46', 'font-size': '13px', 'font-weight': '600' }}>{msg()}</div>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
border: "1px solid #BBF7D0",
|
||||||
|
background: "#ECFDF5",
|
||||||
|
padding: "12px 14px",
|
||||||
|
color: "#065F46",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{msg()}
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={err()}>
|
<Show when={err()}>
|
||||||
<div style={{ ...CARD, border: '1px solid #FECACA', background: '#FEF2F2', padding: '12px 14px', color: '#B91C1C', 'font-size': '13px', 'font-weight': '600' }}>{err()}</div>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
border: "1px solid #FECACA",
|
||||||
|
background: "#FEF2F2",
|
||||||
|
padding: "12px 14px",
|
||||||
|
color: "#B91C1C",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{err()}
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<div style={CARD}>
|
<div style={CARD}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-bottom': '10px' }}>
|
<div
|
||||||
<p style={{ margin: '0', 'font-size': '16px', 'font-weight': '700', color: '#111827' }}>My Requirement List</p>
|
style={{
|
||||||
<button type="button" onClick={loadRequirements} style={BTN_GHOST}>Refresh</button>
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
"align-items": "center",
|
||||||
|
"margin-bottom": "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{ margin: "0", "font-size": "16px", "font-weight": "700", color: "#111827" }}>
|
||||||
|
My Requirement List
|
||||||
|
</p>
|
||||||
|
<button type="button" onClick={loadRequirements} style={BTN_GHOST}>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<Show when={loading()}>
|
<Show when={loading()}>
|
||||||
<p style={{ margin: '0', color: '#9CA3AF', 'font-size': '13px' }}>Loading requirements...</p>
|
<p style={{ margin: "0", color: "#9CA3AF", "font-size": "13px" }}>
|
||||||
|
Loading requirements...
|
||||||
|
</p>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!loading() && requirements().length === 0}>
|
<Show when={!loading() && requirements().length === 0}>
|
||||||
<p style={{ margin: '0', color: '#6B7280', 'font-size': '13px' }}>No requirements found.</p>
|
<p style={{ margin: "0", color: "#6B7280", "font-size": "13px" }}>
|
||||||
|
No requirements found.
|
||||||
|
</p>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!loading() && requirements().length > 0}>
|
<Show when={!loading() && requirements().length > 0}>
|
||||||
<div style={{ display: 'grid', gap: '10px' }}>
|
<div style={{ display: "grid", gap: "10px" }}>
|
||||||
<For each={requirements()}>
|
<For each={requirements()}>
|
||||||
{(row) => (
|
{(row) => (
|
||||||
<div style={{ border: '1px solid #E5E7EB', 'border-radius': '12px', padding: '12px', background: '#FCFCFD' }}>
|
<div
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', gap: '10px', 'flex-wrap': 'wrap' }}>
|
style={{
|
||||||
|
border: "1px solid #E5E7EB",
|
||||||
|
"border-radius": "12px",
|
||||||
|
padding: "12px",
|
||||||
|
background: "#FCFCFD",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
gap: "10px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '14px', 'font-weight': '800', color: '#111827' }}>{row.title}</p>
|
<p
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#6B7280' }}>
|
style={{
|
||||||
{row.city || '—'} {row.area ? `• ${row.area}` : ''} {row.created_at ? `• ${new Date(row.created_at).toLocaleString('en-IN')}` : ''}
|
margin: "0",
|
||||||
|
"font-size": "14px",
|
||||||
|
"font-weight": "800",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.title}
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>
|
||||||
|
{row.city || "—"} {row.area ? `• ${row.area}` : ""}{" "}
|
||||||
|
{row.created_at
|
||||||
|
? `• ${new Date(row.created_at).toLocaleString("en-IN")}`
|
||||||
|
: ""}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span style={{ display: 'inline-flex', height: '24px', 'align-items': 'center', padding: '0 10px', 'border-radius': '999px', background: '#EEF2FF', color: '#3730A3', 'font-size': '11px', 'font-weight': '700' }}>
|
<span
|
||||||
{String(row.status || 'DRAFT').replace(/_/g, ' ')}
|
style={{
|
||||||
|
display: "inline-flex",
|
||||||
|
height: "24px",
|
||||||
|
"align-items": "center",
|
||||||
|
padding: "0 10px",
|
||||||
|
"border-radius": "999px",
|
||||||
|
background: "#EEF2FF",
|
||||||
|
color: "#3730A3",
|
||||||
|
"font-size": "11px",
|
||||||
|
"font-weight": "700",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{String(row.status || "DRAFT").replace(/_/g, " ")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p style={{ margin: '8px 0 0', 'font-size': '13px', color: '#374151' }}>{row.description || 'No description added.'}</p>
|
<p style={{ margin: "8px 0 0", "font-size": "13px", color: "#374151" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'flex-end', 'margin-top': '10px' }}>
|
{row.description || "No description added."}
|
||||||
<button type="button" onClick={() => submitRequirement(row.id)} disabled={busyId() === row.id} style={{ ...BTN_ORANGE, height: '32px', 'font-size': '12px', padding: '0 12px', opacity: busyId() === row.id ? '0.7' : '1' }}>
|
</p>
|
||||||
{busyId() === row.id ? 'Submitting...' : 'Submit for Verification'}
|
<div
|
||||||
|
style={{ display: "flex", "justify-content": "flex-end", "margin-top": "10px" }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => submitRequirement(row.id)}
|
||||||
|
disabled={busyId() === row.id}
|
||||||
|
style={{
|
||||||
|
...BTN_ORANGE,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 12px",
|
||||||
|
opacity: busyId() === row.id ? "0.7" : "1",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{busyId() === row.id ? "Submitting..." : "Submit for Verification"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -214,4 +355,3 @@ export default function CustomerRequirementsPage() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,15 @@
|
||||||
import { For, Show, createSignal, onMount } from 'solid-js';
|
/**
|
||||||
import { BTN_GHOST, BTN_ORANGE, CARD, INPUT } from '~/components/DashboardShell';
|
* Job Seeker Jobs Page - Wired to real backend APIs
|
||||||
import { readJobSeekerProfile, updateJobSeekerCustomData } from '~/lib/job-seeker-custom-data';
|
* Endpoints:
|
||||||
|
* GET /api/jobseeker/jobs - List available jobs from companies
|
||||||
|
* POST /api/jobseeker/jobs/:id/apply - Apply for a job
|
||||||
|
* Custom data: saved_jobs - Bookmarked jobs stored in profile
|
||||||
|
*/
|
||||||
|
import { For, Show, createSignal, onMount } from "solid-js";
|
||||||
|
import { BTN_GHOST, BTN_ORANGE, CARD, INPUT } from "~/components/DashboardShell";
|
||||||
|
import { readJobSeekerProfile, updateJobSeekerCustomData } from "~/lib/job-seeker-custom-data";
|
||||||
|
|
||||||
const API = '/api/gateway';
|
const API = "/api/gateway";
|
||||||
|
|
||||||
type JobItem = {
|
type JobItem = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -28,17 +35,17 @@ type SavedJob = {
|
||||||
async function apiFetch(path: string, opts?: RequestInit) {
|
async function apiFetch(path: string, opts?: RequestInit) {
|
||||||
return fetch(`${API}${path}`, {
|
return fetch(`${API}${path}`, {
|
||||||
...opts,
|
...opts,
|
||||||
credentials: 'include',
|
credentials: "include",
|
||||||
headers: { 'Content-Type': 'application/json', ...(opts?.headers ?? {}) },
|
headers: { "Content-Type": "application/json", ...(opts?.headers ?? {}) },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatSalary(job: JobItem): string {
|
function formatSalary(job: JobItem): string {
|
||||||
const min = Number(job.salary_min || 0);
|
const min = Number(job.salary_min || 0);
|
||||||
const max = Number(job.salary_max || 0);
|
const max = Number(job.salary_max || 0);
|
||||||
if (!min && !max) return '';
|
if (!min && !max) return "";
|
||||||
if (min && max) return `${min} - ${max}`;
|
if (min && max) return `${min} - ${max}`;
|
||||||
return String(min || max || '');
|
return String(min || max || "");
|
||||||
}
|
}
|
||||||
|
|
||||||
function toSavedJobs(value: unknown): SavedJob[] {
|
function toSavedJobs(value: unknown): SavedJob[] {
|
||||||
|
|
@ -46,14 +53,14 @@ function toSavedJobs(value: unknown): SavedJob[] {
|
||||||
return value
|
return value
|
||||||
.map((item) => {
|
.map((item) => {
|
||||||
const row = item as Record<string, unknown>;
|
const row = item as Record<string, unknown>;
|
||||||
const id = String(row?.id || '').trim();
|
const id = String(row?.id || "").trim();
|
||||||
if (!id) return null;
|
if (!id) return null;
|
||||||
return {
|
return {
|
||||||
id,
|
id,
|
||||||
title: String(row?.title || 'Untitled Job'),
|
title: String(row?.title || "Untitled Job"),
|
||||||
company: String(row?.company || row?.company_name || ''),
|
company: String(row?.company || row?.company_name || ""),
|
||||||
location: String(row?.location || ''),
|
location: String(row?.location || ""),
|
||||||
salary: String(row?.salary || ''),
|
salary: String(row?.salary || ""),
|
||||||
saved_at: String(row?.saved_at || new Date().toISOString()),
|
saved_at: String(row?.saved_at || new Date().toISOString()),
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
|
|
@ -65,24 +72,24 @@ export default function JobSeekerJobsPage() {
|
||||||
const [savedJobs, setSavedJobs] = createSignal<SavedJob[]>([]);
|
const [savedJobs, setSavedJobs] = createSignal<SavedJob[]>([]);
|
||||||
const [loading, setLoading] = createSignal(true);
|
const [loading, setLoading] = createSignal(true);
|
||||||
const [busyId, setBusyId] = createSignal<string | null>(null);
|
const [busyId, setBusyId] = createSignal<string | null>(null);
|
||||||
const [search, setSearch] = createSignal('');
|
const [search, setSearch] = createSignal("");
|
||||||
const [msg, setMsg] = createSignal('');
|
const [msg, setMsg] = createSignal("");
|
||||||
const [err, setErr] = createSignal('');
|
const [err, setErr] = createSignal("");
|
||||||
|
|
||||||
const loadRows = async () => {
|
const loadRows = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch('/api/jobseeker/jobs?page=1&limit=100');
|
const res = await apiFetch("/api/jobseeker/jobs?page=1&limit=100");
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(data.error || data.message || 'Failed to load jobs.');
|
setErr(data.error || data.message || "Failed to load jobs.");
|
||||||
setRows([]);
|
setRows([]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setRows(Array.isArray(data?.data) ? data.data : []);
|
setRows(Array.isArray(data?.data) ? data.data : []);
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while loading jobs.');
|
setErr("Network error while loading jobs.");
|
||||||
setRows([]);
|
setRows([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
@ -106,21 +113,21 @@ export default function JobSeekerJobsPage() {
|
||||||
|
|
||||||
const applyJob = async (jobId: string) => {
|
const applyJob = async (jobId: string) => {
|
||||||
setBusyId(jobId);
|
setBusyId(jobId);
|
||||||
setMsg('');
|
setMsg("");
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/jobseeker/jobs/${jobId}/apply`, {
|
const res = await apiFetch(`/api/jobseeker/jobs/${jobId}/apply`, {
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
body: JSON.stringify({}),
|
body: JSON.stringify({}),
|
||||||
});
|
});
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(data.error || data.message || 'Failed to apply for job.');
|
setErr(data.error || data.message || "Failed to apply for job.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setMsg('Application submitted successfully.');
|
setMsg("Application submitted successfully.");
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while applying.');
|
setErr("Network error while applying.");
|
||||||
} finally {
|
} finally {
|
||||||
setBusyId(null);
|
setBusyId(null);
|
||||||
}
|
}
|
||||||
|
|
@ -130,8 +137,8 @@ export default function JobSeekerJobsPage() {
|
||||||
|
|
||||||
const toggleSave = async (job: JobItem) => {
|
const toggleSave = async (job: JobItem) => {
|
||||||
setBusyId(job.id);
|
setBusyId(job.id);
|
||||||
setMsg('');
|
setMsg("");
|
||||||
setErr('');
|
setErr("");
|
||||||
const existing = savedJobs();
|
const existing = savedJobs();
|
||||||
const next = isSaved(job.id)
|
const next = isSaved(job.id)
|
||||||
? existing.filter((row) => row.id !== job.id)
|
? existing.filter((row) => row.id !== job.id)
|
||||||
|
|
@ -139,9 +146,9 @@ export default function JobSeekerJobsPage() {
|
||||||
...existing,
|
...existing,
|
||||||
{
|
{
|
||||||
id: job.id,
|
id: job.id,
|
||||||
title: String(job.title || 'Untitled Job'),
|
title: String(job.title || "Untitled Job"),
|
||||||
company: String(job.company_name || ''),
|
company: String(job.company_name || ""),
|
||||||
location: String(job.location || ''),
|
location: String(job.location || ""),
|
||||||
salary: formatSalary(job),
|
salary: formatSalary(job),
|
||||||
saved_at: new Date().toISOString(),
|
saved_at: new Date().toISOString(),
|
||||||
},
|
},
|
||||||
|
|
@ -149,9 +156,9 @@ export default function JobSeekerJobsPage() {
|
||||||
try {
|
try {
|
||||||
await updateJobSeekerCustomData((current) => ({ ...current, saved_jobs: next }));
|
await updateJobSeekerCustomData((current) => ({ ...current, saved_jobs: next }));
|
||||||
setSavedJobs(next);
|
setSavedJobs(next);
|
||||||
setMsg(isSaved(job.id) ? 'Job removed from saved list.' : 'Job saved for later.');
|
setMsg(isSaved(job.id) ? "Job removed from saved list." : "Job saved for later.");
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
setErr(e?.message || 'Failed to update saved jobs.');
|
setErr(e?.message || "Failed to update saved jobs.");
|
||||||
} finally {
|
} finally {
|
||||||
setBusyId(null);
|
setBusyId(null);
|
||||||
}
|
}
|
||||||
|
|
@ -160,71 +167,174 @@ export default function JobSeekerJobsPage() {
|
||||||
const filtered = () => {
|
const filtered = () => {
|
||||||
const q = search().trim().toLowerCase();
|
const q = search().trim().toLowerCase();
|
||||||
if (!q) return rows();
|
if (!q) return rows();
|
||||||
return rows().filter((r) =>
|
return rows().filter(
|
||||||
String(r.title || '').toLowerCase().includes(q)
|
(r) =>
|
||||||
|| String(r.company_name || '').toLowerCase().includes(q)
|
String(r.title || "")
|
||||||
|| String(r.location || '').toLowerCase().includes(q));
|
.toLowerCase()
|
||||||
|
.includes(q) ||
|
||||||
|
String(r.company_name || "")
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(q) ||
|
||||||
|
String(r.location || "")
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(q)
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
|
<div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
|
||||||
<div style={CARD}>
|
<div style={CARD}>
|
||||||
<p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Jobs</p>
|
<p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
|
Jobs
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
|
||||||
Explore approved job postings and apply directly.
|
Explore approved job postings and apply directly.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={msg()}>
|
<Show when={msg()}>
|
||||||
<div style={{ ...CARD, border: '1px solid #BBF7D0', background: '#ECFDF5', padding: '12px 14px', color: '#065F46', 'font-size': '13px', 'font-weight': '600' }}>{msg()}</div>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
border: "1px solid #BBF7D0",
|
||||||
|
background: "#ECFDF5",
|
||||||
|
padding: "12px 14px",
|
||||||
|
color: "#065F46",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{msg()}
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={err()}>
|
<Show when={err()}>
|
||||||
<div style={{ ...CARD, border: '1px solid #FECACA', background: '#FEF2F2', padding: '12px 14px', color: '#B91C1C', 'font-size': '13px', 'font-weight': '600' }}>{err()}</div>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
border: "1px solid #FECACA",
|
||||||
|
background: "#FEF2F2",
|
||||||
|
padding: "12px 14px",
|
||||||
|
color: "#B91C1C",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{err()}
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<div style={{ ...CARD, display: 'flex', gap: '10px', 'align-items': 'center' }}>
|
<div style={{ ...CARD, display: "flex", gap: "10px", "align-items": "center" }}>
|
||||||
<input value={search()} onInput={(e) => setSearch(e.currentTarget.value)} style={INPUT} placeholder="Search jobs, company, location" />
|
<input
|
||||||
<button type="button" onClick={loadRows} style={BTN_GHOST}>Refresh</button>
|
value={search()}
|
||||||
|
onInput={(e) => setSearch(e.currentTarget.value)}
|
||||||
|
style={INPUT}
|
||||||
|
placeholder="Search jobs, company, location"
|
||||||
|
/>
|
||||||
|
<button type="button" onClick={loadRows} style={BTN_GHOST}>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={loading()}>
|
<Show when={loading()}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#9CA3AF' }}>Loading jobs...</div>
|
<div style={{ ...CARD, "text-align": "center", color: "#9CA3AF" }}>Loading jobs...</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!loading() && filtered().length === 0}>
|
<Show when={!loading() && filtered().length === 0}>
|
||||||
<div style={{ ...CARD, 'text-align': 'center', color: '#6B7280' }}>No jobs found.</div>
|
<div style={{ ...CARD, "text-align": "center", color: "#6B7280" }}>No jobs found.</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!loading() && filtered().length > 0}>
|
<Show when={!loading() && filtered().length > 0}>
|
||||||
<div style={{ display: 'grid', gap: '10px' }}>
|
<div style={{ display: "grid", gap: "10px" }}>
|
||||||
<For each={filtered()}>
|
<For each={filtered()}>
|
||||||
{(row) => (
|
{(row) => (
|
||||||
<div style={{ ...CARD, padding: '14px' }}>
|
<div style={{ ...CARD, padding: "14px" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', gap: '10px', 'flex-wrap': 'wrap' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
gap: "10px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '16px', 'font-weight': '800', color: '#111827' }}>{row.title || 'Untitled Job'}</p>
|
<p
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#6B7280' }}>
|
style={{
|
||||||
{row.company_name || 'Company'} {row.location ? `• ${row.location}` : ''} {row.employment_type ? `• ${row.employment_type}` : ''}
|
margin: "0",
|
||||||
|
"font-size": "16px",
|
||||||
|
"font-weight": "800",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.title || "Untitled Job"}
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>
|
||||||
|
{row.company_name || "Company"} {row.location ? `• ${row.location}` : ""}{" "}
|
||||||
|
{row.employment_type ? `• ${row.employment_type}` : ""}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span style={{ display: 'inline-flex', height: '24px', 'align-items': 'center', padding: '0 10px', 'border-radius': '999px', background: '#EEF2FF', color: '#3730A3', 'font-size': '11px', 'font-weight': '700' }}>
|
<span
|
||||||
{String(row.status || 'OPEN').replace(/_/g, ' ')}
|
style={{
|
||||||
|
display: "inline-flex",
|
||||||
|
height: "24px",
|
||||||
|
"align-items": "center",
|
||||||
|
padding: "0 10px",
|
||||||
|
"border-radius": "999px",
|
||||||
|
background: "#EEF2FF",
|
||||||
|
color: "#3730A3",
|
||||||
|
"font-size": "11px",
|
||||||
|
"font-weight": "700",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{String(row.status || "OPEN").replace(/_/g, " ")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p style={{ margin: '8px 0 0', 'font-size': '13px', color: '#374151' }}>{row.description || 'No description provided.'}</p>
|
<p style={{ margin: "8px 0 0", "font-size": "13px", color: "#374151" }}>
|
||||||
<p style={{ margin: '8px 0 0', 'font-size': '12px', color: '#111827', 'font-weight': '700' }}>
|
{row.description || "No description provided."}
|
||||||
Salary: {formatSalary(row) || 'Not specified'}
|
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'flex-end', gap: '8px', 'margin-top': '10px' }}>
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "8px 0 0",
|
||||||
|
"font-size": "12px",
|
||||||
|
color: "#111827",
|
||||||
|
"font-weight": "700",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Salary: {formatSalary(row) || "Not specified"}
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "flex-end",
|
||||||
|
gap: "8px",
|
||||||
|
"margin-top": "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => void toggleSave(row)}
|
onClick={() => void toggleSave(row)}
|
||||||
disabled={busyId() === row.id}
|
disabled={busyId() === row.id}
|
||||||
style={{ ...BTN_GHOST, height: '32px', 'font-size': '12px', padding: '0 12px', opacity: busyId() === row.id ? '0.7' : '1' }}
|
style={{
|
||||||
|
...BTN_GHOST,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 12px",
|
||||||
|
opacity: busyId() === row.id ? "0.7" : "1",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{busyId() === row.id ? 'Updating...' : (isSaved(row.id) ? 'Unsave' : 'Save')}
|
{busyId() === row.id ? "Updating..." : isSaved(row.id) ? "Unsave" : "Save"}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => applyJob(row.id)} disabled={busyId() === row.id} style={{ ...BTN_ORANGE, height: '32px', 'font-size': '12px', padding: '0 12px', opacity: busyId() === row.id ? '0.7' : '1' }}>
|
<button
|
||||||
{busyId() === row.id ? 'Applying...' : 'Apply'}
|
type="button"
|
||||||
|
onClick={() => applyJob(row.id)}
|
||||||
|
disabled={busyId() === row.id}
|
||||||
|
style={{
|
||||||
|
...BTN_ORANGE,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 12px",
|
||||||
|
opacity: busyId() === row.id ? "0.7" : "1",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{busyId() === row.id ? "Applying..." : "Apply"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,15 @@
|
||||||
import { For, Show, createSignal, onMount } from 'solid-js';
|
/**
|
||||||
import { BTN_GHOST, BTN_ORANGE, CARD } from '~/components/DashboardShell';
|
* Professional Leads Page - Wired to real backend APIs
|
||||||
import { ROLE_PREFIXES, type RoleKey } from './RoleDashboardShared';
|
* Endpoints:
|
||||||
|
* GET /api/{profession}/marketplace - List available leads
|
||||||
|
* POST /api/{profession}/leads/request - Request a lead
|
||||||
|
* Professions: photographers, makeup-artists, tutors, developers, etc.
|
||||||
|
*/
|
||||||
|
import { For, Show, createSignal, onMount } from "solid-js";
|
||||||
|
import { BTN_GHOST, BTN_ORANGE, CARD } from "~/components/DashboardShell";
|
||||||
|
import { ROLE_PREFIXES, type RoleKey } from "./RoleDashboardShared";
|
||||||
|
|
||||||
const API = '/api/gateway';
|
const API = "/api/gateway";
|
||||||
|
|
||||||
type Props = { roleKey: RoleKey };
|
type Props = { roleKey: RoleKey };
|
||||||
|
|
||||||
|
|
@ -18,8 +25,8 @@ type MarketplaceItem = {
|
||||||
async function apiFetch(path: string, opts?: RequestInit) {
|
async function apiFetch(path: string, opts?: RequestInit) {
|
||||||
return fetch(`${API}${path}`, {
|
return fetch(`${API}${path}`, {
|
||||||
...opts,
|
...opts,
|
||||||
credentials: 'include',
|
credentials: "include",
|
||||||
headers: { 'Content-Type': 'application/json', ...(opts?.headers ?? {}) },
|
headers: { "Content-Type": "application/json", ...(opts?.headers ?? {}) },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -27,24 +34,24 @@ export default function ProfessionalLeadsPage(props: Props) {
|
||||||
const [rows, setRows] = createSignal<MarketplaceItem[]>([]);
|
const [rows, setRows] = createSignal<MarketplaceItem[]>([]);
|
||||||
const [loading, setLoading] = createSignal(true);
|
const [loading, setLoading] = createSignal(true);
|
||||||
const [busyId, setBusyId] = createSignal<string | null>(null);
|
const [busyId, setBusyId] = createSignal<string | null>(null);
|
||||||
const [msg, setMsg] = createSignal('');
|
const [msg, setMsg] = createSignal("");
|
||||||
const [err, setErr] = createSignal('');
|
const [err, setErr] = createSignal("");
|
||||||
const prefix = () => ROLE_PREFIXES[props.roleKey];
|
const prefix = () => ROLE_PREFIXES[props.roleKey];
|
||||||
|
|
||||||
const loadRows = async () => {
|
const loadRows = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/${prefix()}/marketplace?page=1&limit=50`);
|
const res = await apiFetch(`/api/${prefix()}/marketplace?page=1&limit=50`);
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(data.error || data.message || 'Failed to load leads.');
|
setErr(data.error || data.message || "Failed to load leads.");
|
||||||
setRows([]);
|
setRows([]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setRows(Array.isArray(data?.data) ? data.data : []);
|
setRows(Array.isArray(data?.data) ? data.data : []);
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while loading leads.');
|
setErr("Network error while loading leads.");
|
||||||
setRows([]);
|
setRows([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
@ -55,74 +62,164 @@ export default function ProfessionalLeadsPage(props: Props) {
|
||||||
|
|
||||||
const requestLead = async (requirementId: string) => {
|
const requestLead = async (requirementId: string) => {
|
||||||
setBusyId(requirementId);
|
setBusyId(requirementId);
|
||||||
setMsg('');
|
setMsg("");
|
||||||
setErr('');
|
setErr("");
|
||||||
try {
|
try {
|
||||||
const res = await apiFetch(`/api/${prefix()}/leads/request`, {
|
const res = await apiFetch(`/api/${prefix()}/leads/request`, {
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
body: JSON.stringify({ requirement_id: requirementId }),
|
body: JSON.stringify({ requirement_id: requirementId }),
|
||||||
});
|
});
|
||||||
const data = await res.json().catch(() => ({}));
|
const data = await res.json().catch(() => ({}));
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
setErr(data.error || data.message || 'Failed to request lead.');
|
setErr(data.error || data.message || "Failed to request lead.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setMsg('Lead request submitted to verification and approval flow.');
|
setMsg("Lead request submitted to verification and approval flow.");
|
||||||
} catch {
|
} catch {
|
||||||
setErr('Network error while requesting lead.');
|
setErr("Network error while requesting lead.");
|
||||||
} finally {
|
} finally {
|
||||||
setBusyId(null);
|
setBusyId(null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
|
<div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
|
||||||
<div style={CARD}>
|
<div style={CARD}>
|
||||||
<p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Leads</p>
|
<p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
|
Leads
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
|
||||||
Browse open requirements from customers and request contact access.
|
Browse open requirements from customers and request contact access.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={msg()}>
|
<Show when={msg()}>
|
||||||
<div style={{ ...CARD, border: '1px solid #BBF7D0', background: '#ECFDF5', padding: '12px 14px', color: '#065F46', 'font-size': '13px', 'font-weight': '600' }}>{msg()}</div>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
border: "1px solid #BBF7D0",
|
||||||
|
background: "#ECFDF5",
|
||||||
|
padding: "12px 14px",
|
||||||
|
color: "#065F46",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{msg()}
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={err()}>
|
<Show when={err()}>
|
||||||
<div style={{ ...CARD, border: '1px solid #FECACA', background: '#FEF2F2', padding: '12px 14px', color: '#B91C1C', 'font-size': '13px', 'font-weight': '600' }}>{err()}</div>
|
<div
|
||||||
|
style={{
|
||||||
|
...CARD,
|
||||||
|
border: "1px solid #FECACA",
|
||||||
|
background: "#FEF2F2",
|
||||||
|
padding: "12px 14px",
|
||||||
|
color: "#B91C1C",
|
||||||
|
"font-size": "13px",
|
||||||
|
"font-weight": "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{err()}
|
||||||
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<div style={CARD}>
|
<div style={CARD}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-bottom': '10px' }}>
|
<div
|
||||||
<p style={{ margin: '0', 'font-size': '16px', 'font-weight': '700', color: '#111827' }}>Open Marketplace Leads</p>
|
style={{
|
||||||
<button type="button" onClick={loadRows} style={BTN_GHOST}>Refresh</button>
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
"align-items": "center",
|
||||||
|
"margin-bottom": "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{ margin: "0", "font-size": "16px", "font-weight": "700", color: "#111827" }}>
|
||||||
|
Open Marketplace Leads
|
||||||
|
</p>
|
||||||
|
<button type="button" onClick={loadRows} style={BTN_GHOST}>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={loading()}>
|
<Show when={loading()}>
|
||||||
<p style={{ margin: '0', color: '#9CA3AF', 'font-size': '13px' }}>Loading leads...</p>
|
<p style={{ margin: "0", color: "#9CA3AF", "font-size": "13px" }}>Loading leads...</p>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!loading() && rows().length === 0}>
|
<Show when={!loading() && rows().length === 0}>
|
||||||
<p style={{ margin: '0', color: '#6B7280', 'font-size': '13px' }}>No leads available right now.</p>
|
<p style={{ margin: "0", color: "#6B7280", "font-size": "13px" }}>
|
||||||
|
No leads available right now.
|
||||||
|
</p>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!loading() && rows().length > 0}>
|
<Show when={!loading() && rows().length > 0}>
|
||||||
<div style={{ display: 'grid', gap: '10px' }}>
|
<div style={{ display: "grid", gap: "10px" }}>
|
||||||
<For each={rows()}>
|
<For each={rows()}>
|
||||||
{(row) => (
|
{(row) => (
|
||||||
<div style={{ border: '1px solid #E5E7EB', 'border-radius': '12px', padding: '12px', background: '#FCFCFD' }}>
|
<div
|
||||||
<div style={{ display: 'flex', 'justify-content': 'space-between', gap: '10px', 'flex-wrap': 'wrap' }}>
|
style={{
|
||||||
|
border: "1px solid #E5E7EB",
|
||||||
|
"border-radius": "12px",
|
||||||
|
padding: "12px",
|
||||||
|
background: "#FCFCFD",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
"justify-content": "space-between",
|
||||||
|
gap: "10px",
|
||||||
|
"flex-wrap": "wrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p style={{ margin: '0', 'font-size': '14px', 'font-weight': '800', color: '#111827' }}>{row.title || 'Requirement'}</p>
|
<p
|
||||||
<p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#6B7280' }}>
|
style={{
|
||||||
{row.location || 'Location not set'} {row.profession_key ? `• ${row.profession_key}` : ''}
|
margin: "0",
|
||||||
|
"font-size": "14px",
|
||||||
|
"font-weight": "800",
|
||||||
|
color: "#111827",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.title || "Requirement"}
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>
|
||||||
|
{row.location || "Location not set"}{" "}
|
||||||
|
{row.profession_key ? `• ${row.profession_key}` : ""}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span style={{ display: 'inline-flex', height: '24px', 'align-items': 'center', padding: '0 10px', 'border-radius': '999px', background: '#FFF1EB', color: '#C2410C', 'font-size': '11px', 'font-weight': '700' }}>
|
<span
|
||||||
{row.budget ? `₹${row.budget}` : 'Budget N/A'}
|
style={{
|
||||||
|
display: "inline-flex",
|
||||||
|
height: "24px",
|
||||||
|
"align-items": "center",
|
||||||
|
padding: "0 10px",
|
||||||
|
"border-radius": "999px",
|
||||||
|
background: "#FFF1EB",
|
||||||
|
color: "#C2410C",
|
||||||
|
"font-size": "11px",
|
||||||
|
"font-weight": "700",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.budget ? `₹${row.budget}` : "Budget N/A"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p style={{ margin: '8px 0 0', 'font-size': '13px', color: '#374151' }}>{row.description || 'No additional details.'}</p>
|
<p style={{ margin: "8px 0 0", "font-size": "13px", color: "#374151" }}>
|
||||||
<div style={{ display: 'flex', 'justify-content': 'flex-end', 'margin-top': '10px' }}>
|
{row.description || "No additional details."}
|
||||||
<button type="button" onClick={() => requestLead(row.id)} disabled={busyId() === row.id} style={{ ...BTN_ORANGE, height: '32px', 'font-size': '12px', padding: '0 12px', opacity: busyId() === row.id ? '0.7' : '1' }}>
|
</p>
|
||||||
{busyId() === row.id ? 'Requesting...' : 'Request Contact'}
|
<div
|
||||||
|
style={{ display: "flex", "justify-content": "flex-end", "margin-top": "10px" }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => requestLead(row.id)}
|
||||||
|
disabled={busyId() === row.id}
|
||||||
|
style={{
|
||||||
|
...BTN_ORANGE,
|
||||||
|
height: "32px",
|
||||||
|
"font-size": "12px",
|
||||||
|
padding: "0 12px",
|
||||||
|
opacity: busyId() === row.id ? "0.7" : "1",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{busyId() === row.id ? "Requesting..." : "Request Contact"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -134,4 +231,3 @@ export default function ProfessionalLeadsPage(props: Props) {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue