feat(admin): add jobs and verification parity routes
This commit is contained in:
Ashwin Kumar
parent
7e65337c60
commit
6c6667b8be
5 changed files with 407 additions and 0 deletions
118
src/routes/admin/jobs/[id].tsx
Normal file
118
src/routes/admin/jobs/[id].tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import { A, useParams } from '@solidjs/router';
|
||||
import { createMemo, createResource, Show } from 'solid-js';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
type Job = {
|
||||
id: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
requiredSkills?: string[];
|
||||
required_skills?: string[];
|
||||
experienceLevel?: string;
|
||||
experience_level?: string;
|
||||
status?: string;
|
||||
clientName?: string;
|
||||
client_name?: string;
|
||||
companyName?: string;
|
||||
company_name?: string;
|
||||
location?: string;
|
||||
hourlyRateMin?: number;
|
||||
hourlyRateMax?: number;
|
||||
hourly_rate_min?: number;
|
||||
hourly_rate_max?: number;
|
||||
availability?: string;
|
||||
durationDays?: number;
|
||||
duration_days?: number;
|
||||
};
|
||||
|
||||
async function fetchJob(id: string): Promise<Job | null> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/jobs/${id}`);
|
||||
if (!res.ok) return null;
|
||||
const data = await res.json();
|
||||
return data.job || data;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function JobDetailPage() {
|
||||
const params = useParams();
|
||||
const [job] = createResource(() => params.id, fetchJob);
|
||||
|
||||
const skills = createMemo(() => job()?.requiredSkills || job()?.required_skills || []);
|
||||
const client = createMemo(() => job()?.clientName || job()?.client_name || job()?.companyName || job()?.company_name || '—');
|
||||
const exp = createMemo(() => job()?.experienceLevel || job()?.experience_level || '—');
|
||||
const rateMin = createMemo(() => job()?.hourlyRateMin ?? job()?.hourly_rate_min);
|
||||
const rateMax = createMemo(() => job()?.hourlyRateMax ?? job()?.hourly_rate_max);
|
||||
const duration = createMemo(() => job()?.durationDays ?? job()?.duration_days);
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="page-hero-card page-actions">
|
||||
<div>
|
||||
<h1 class="page-title">Job Management</h1>
|
||||
<p class="page-subtitle">Review one live backend job in the same detail-first style as other admin modules.</p>
|
||||
</div>
|
||||
<A class="btn" href="/admin/jobs">Back to Jobs</A>
|
||||
</div>
|
||||
|
||||
<Show when={job.loading}>
|
||||
<div class="card"><p class="notice">Loading job...</p></div>
|
||||
</Show>
|
||||
|
||||
<Show when={!job.loading && !job()}>
|
||||
<div class="card"><p class="notice">Job not found.</p></div>
|
||||
</Show>
|
||||
|
||||
<Show when={job()}>
|
||||
<section class="card">
|
||||
<div class="field-grid-2">
|
||||
<div>
|
||||
<p class="hint">Title</p>
|
||||
<p style="margin:6px 0 0;font-weight:700;color:#0f172a">{job()!.title || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Status</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{job()!.status || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Client</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{client()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Experience</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{exp()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Rate</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{rateMin() != null ? `₹${rateMin()} - ₹${rateMax() ?? rateMin()}` : '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Location</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{job()!.location || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Availability</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{job()!.availability || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="hint">Duration</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{duration() != null ? `${duration()} days` : '—'}</p>
|
||||
</div>
|
||||
<div style="grid-column:1/-1">
|
||||
<p class="hint">Required Skills</p>
|
||||
<p style="margin:6px 0 0;color:#334155">{skills().length > 0 ? skills().join(', ') : '—'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:18px">
|
||||
<p class="hint">Description</p>
|
||||
<p style="margin:6px 0 0;color:#334155;white-space:pre-wrap">{job()!.description || '—'}</p>
|
||||
</div>
|
||||
</section>
|
||||
</Show>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
101
src/routes/admin/verification-status.tsx
Normal file
101
src/routes/admin/verification-status.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import { A } from '@solidjs/router';
|
||||
import { createMemo, createResource, For, Show } from 'solid-js';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
type ApprovalRow = {
|
||||
id: string;
|
||||
requestType?: string;
|
||||
type?: string;
|
||||
requestStatus?: string;
|
||||
status?: string;
|
||||
requester?: { name?: string; email?: string };
|
||||
requesterName?: string;
|
||||
requesterEmail?: string;
|
||||
createdAt?: string;
|
||||
created_at?: string;
|
||||
};
|
||||
|
||||
async function fetchApprovals(): Promise<ApprovalRow[]> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/approvals`);
|
||||
if (!res.ok) return [];
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : (data.approvals || []);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default function VerificationStatusPage() {
|
||||
const [rows] = createResource(fetchApprovals);
|
||||
|
||||
const normalized = createMemo(() => (rows() || []).map((r) => ({
|
||||
...r,
|
||||
status: (r.requestStatus || r.status || 'UNKNOWN').toUpperCase(),
|
||||
type: (r.requestType || r.type || 'PROFILE').toUpperCase(),
|
||||
requesterName: r.requester?.name || r.requesterName || 'Unknown',
|
||||
requesterEmail: r.requester?.email || r.requesterEmail || '—',
|
||||
createdAt: r.createdAt || r.created_at || '',
|
||||
})));
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="page-hero-card page-actions">
|
||||
<div>
|
||||
<h1 class="page-title">Verification Status</h1>
|
||||
<p class="page-subtitle">Track request status states and open a specific record for follow-up.</p>
|
||||
</div>
|
||||
<A class="btn" href="/admin/approval">Open Approval Center</A>
|
||||
</div>
|
||||
|
||||
<section class="card" style="padding:0;overflow:hidden">
|
||||
<div class="table-wrap">
|
||||
<table class="list-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Type</th>
|
||||
<th>Requester</th>
|
||||
<th>Status</th>
|
||||
<th>Submitted</th>
|
||||
<th class="align-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<Show when={rows.loading}>
|
||||
<tr><td colspan="6" style="text-align:center;padding:32px;color:#64748b">Loading verification statuses...</td></tr>
|
||||
</Show>
|
||||
<Show when={!rows.loading && normalized().length === 0}>
|
||||
<tr><td colspan="6" style="text-align:center;padding:32px;color:#94a3b8">No verification status records found.</td></tr>
|
||||
</Show>
|
||||
<Show when={!rows.loading && normalized().length > 0}>
|
||||
<For each={normalized()}>
|
||||
{(item) => (
|
||||
<tr>
|
||||
<td style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#64748b">{item.id.slice(0, 8)}...</td>
|
||||
<td style="color:#475569">{item.type}</td>
|
||||
<td>
|
||||
<div style="font-weight:600;color:#0f172a">{item.requesterName}</div>
|
||||
<div style="font-size:12px;color:#64748b">{item.requesterEmail}</div>
|
||||
</td>
|
||||
<td><span class="status-chip">{item.status}</span></td>
|
||||
<td style="color:#475569">{item.createdAt ? new Date(item.createdAt).toLocaleString() : '—'}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<A class="action-icon-btn" href={`/admin/verification-status/${item.id}`} title="Open Status Detail">↗</A>
|
||||
<A class="action-icon-btn" href={`/admin/approval/${item.id}`} title="Open Approval Detail">👁</A>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
84
src/routes/admin/verification-status/[id].tsx
Normal file
84
src/routes/admin/verification-status/[id].tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { A, useParams } from '@solidjs/router';
|
||||
import { createMemo, createResource, Show } from 'solid-js';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
type ApprovalDetail = {
|
||||
id: string;
|
||||
requestType?: string;
|
||||
type?: string;
|
||||
requestStatus?: string;
|
||||
status?: string;
|
||||
requester?: { name?: string; email?: string };
|
||||
requesterName?: string;
|
||||
requesterEmail?: string;
|
||||
createdAt?: string;
|
||||
created_at?: string;
|
||||
requestReason?: string;
|
||||
};
|
||||
|
||||
async function fetchApproval(id: string): Promise<ApprovalDetail | null> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/approvals/${id}`);
|
||||
if (!res.ok) return null;
|
||||
return res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function VerificationStatusDetailPage() {
|
||||
const params = useParams();
|
||||
const [detail] = createResource(() => params.id, fetchApproval);
|
||||
|
||||
const status = createMemo(() => (detail()?.requestStatus || detail()?.status || 'UNKNOWN').toUpperCase());
|
||||
const type = createMemo(() => (detail()?.requestType || detail()?.type || 'PROFILE').toUpperCase());
|
||||
const requester = createMemo(() => detail()?.requester?.name || detail()?.requesterName || 'Unknown');
|
||||
const email = createMemo(() => detail()?.requester?.email || detail()?.requesterEmail || '—');
|
||||
const submitted = createMemo(() => detail()?.createdAt || detail()?.created_at || '');
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="page-hero-card page-actions">
|
||||
<div>
|
||||
<h1 class="page-title">Verification Status Detail</h1>
|
||||
<p class="page-subtitle">Open one verification status request and jump into approval review when needed.</p>
|
||||
</div>
|
||||
<div class="page-actions-right">
|
||||
<A class="btn" href="/admin/verification-status">Back to Status List</A>
|
||||
<A class="btn navy" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={detail.loading}>
|
||||
<div class="card"><p class="notice">Loading verification status...</p></div>
|
||||
</Show>
|
||||
|
||||
<Show when={!detail.loading && !detail()}>
|
||||
<div class="card"><p class="notice">Verification status record not found.</p></div>
|
||||
</Show>
|
||||
|
||||
<Show when={detail()}>
|
||||
<div class="grid" style="margin-top:0">
|
||||
<section class="card">
|
||||
<h2 style="margin-bottom:8px">Request</h2>
|
||||
<p class="notice" style="margin:0"><strong>ID:</strong> {detail()!.id}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Type:</strong> {type()}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Status:</strong> {status()}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Submitted:</strong> {submitted() ? new Date(submitted()).toLocaleString() : '—'}</p>
|
||||
</section>
|
||||
<section class="card">
|
||||
<h2 style="margin-bottom:8px">Requester</h2>
|
||||
<p class="notice" style="margin:0"><strong>Name:</strong> {requester()}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Email:</strong> {email()}</p>
|
||||
</section>
|
||||
</div>
|
||||
<section class="card" style="margin-top:16px">
|
||||
<h2 style="margin-bottom:10px">Request Reason Payload</h2>
|
||||
<pre class="json">{detail()!.requestReason || 'No requestReason payload found.'}</pre>
|
||||
</section>
|
||||
</Show>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
24
src/routes/admin/verification.tsx
Normal file
24
src/routes/admin/verification.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { A } from '@solidjs/router';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
export default function VerificationManagementPage() {
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="page-hero-card">
|
||||
<h1 class="page-title">Approval Management</h1>
|
||||
<p class="page-subtitle" style="margin-top:8px">
|
||||
Admin review now lives under Approval Management. Verification remains a user-facing status concept.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="card">
|
||||
<p class="notice" style="margin:0">
|
||||
Use Approval Management to review companies, customers, candidates, and professional submissions.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<A class="btn navy" href="/admin/approval">Open Approval Management</A>
|
||||
</div>
|
||||
</section>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
80
src/routes/admin/verification/[id].tsx
Normal file
80
src/routes/admin/verification/[id].tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import { A, useParams } from '@solidjs/router';
|
||||
import { createMemo, createResource, Show } from 'solid-js';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
type Approval = {
|
||||
id: string;
|
||||
requestStatus?: string;
|
||||
status?: string;
|
||||
requestType?: string;
|
||||
type?: string;
|
||||
requester?: { name?: string; email?: string };
|
||||
requesterName?: string;
|
||||
requesterEmail?: string;
|
||||
requestReason?: string;
|
||||
};
|
||||
|
||||
async function fetchApproval(id: string): Promise<Approval | null> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/approvals/${id}`);
|
||||
if (!res.ok) return null;
|
||||
return res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function VerificationDetailPage() {
|
||||
const params = useParams();
|
||||
const [approval] = createResource(() => params.id, fetchApproval);
|
||||
|
||||
const status = createMemo(() => (approval()?.requestStatus || approval()?.status || 'PENDING').toUpperCase());
|
||||
const type = createMemo(() => (approval()?.requestType || approval()?.type || 'PROFILE').toUpperCase());
|
||||
const requester = createMemo(() => approval()?.requester?.name || approval()?.requesterName || 'Unknown');
|
||||
const email = createMemo(() => approval()?.requester?.email || approval()?.requesterEmail || '—');
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="page-hero-card page-actions">
|
||||
<div>
|
||||
<h1 class="page-title">Verification Review</h1>
|
||||
<p class="page-subtitle">Review submission context, documents, and verification decision state.</p>
|
||||
</div>
|
||||
<div class="page-actions-right">
|
||||
<A class="btn" href="/admin/verification">Back to Verification</A>
|
||||
<A class="btn navy" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={approval.loading}>
|
||||
<div class="card"><p class="notice">Loading verification detail...</p></div>
|
||||
</Show>
|
||||
<Show when={!approval.loading && !approval()}>
|
||||
<div class="card"><p class="notice">Verification request not found.</p></div>
|
||||
</Show>
|
||||
<Show when={approval()}>
|
||||
<div class="grid" style="margin-top:0">
|
||||
<section class="card">
|
||||
<h2 style="margin-bottom:8px">Summary</h2>
|
||||
<p class="notice" style="margin:0"><strong>Approval ID:</strong> {approval()!.id}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Type:</strong> {type()}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Status:</strong> {status()}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Requester:</strong> {requester()}</p>
|
||||
<p class="notice" style="margin:8px 0 0"><strong>Email:</strong> {email()}</p>
|
||||
</section>
|
||||
<section class="card">
|
||||
<h2 style="margin-bottom:8px">Remark Snapshot</h2>
|
||||
<p class="notice" style="margin:0">
|
||||
This route mirrors the Next.js verification detail entry point and delegates action workflow to Approval Management.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<A class="btn primary" href={`/admin/approval/${params.id}`}>Review & Take Action</A>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Show>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue