7b28301793
All checks were successful
build-and-release / build (push) Successful in 1m48s
- After registerRole() succeeds, fetch existing profile for identity doc pre-fill and immediately launch RoleWizard inline (same pattern as SwitchServicesPage) - Wizard header shows role name + back arrow; main card grid hides - On wizard submission: show approval-pending message and reload roles - Card status now uses /api/me/roles (returns status field) so Pending roles show 'Under Review' badge instead of 'Switch' button - Main roles (Company, Job Seeker, Customer) also go through the wizard - StatusBadge component uses reactive accessor thunks (fixes solid/reactivity warning) - Remove unused BTN_PRIMARY import Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
441 lines
21 KiB
TypeScript
441 lines
21 KiB
TypeScript
import { For, Show, createMemo, createSignal, onMount } from "solid-js";
|
|
import { ArrowLeft, Camera, Scissors, GraduationCap, Code2, Clapperboard, PenTool, Megaphone, Dumbbell, UtensilsCrossed, Globe, Users, UserCircle, FileText, TrendingUp, Award, BarChart3, ShieldCheck } from "lucide-solid";
|
|
import { BTN_GHOST, CARD } from "~/components/DashboardShell";
|
|
import RoleWizard from "~/components/dashboard/RoleWizard";
|
|
import { roleKeyToPrefix } from "~/lib/role-utils";
|
|
|
|
const NAVY = "#0D0D2A";
|
|
const ORANGE = "#FF5E13";
|
|
|
|
const API = "";
|
|
|
|
const MAIN_ROLES = [
|
|
{ key: "COMPANY", name: "Company", Icon: Users, subtitle: "Hire talent, post jobs, and manage applications in one path." },
|
|
{ key: "JOB_SEEKER", name: "Job Seeker", Icon: UserCircle, subtitle: "Explore opportunities and apply to roles with your profile." },
|
|
{ key: "CUSTOMER", name: "Service Seeker", Icon: FileText, subtitle: "Post requirements and connect with verified professionals." },
|
|
];
|
|
|
|
const PROFESSIONAL_ROLES = [
|
|
{ key: "PHOTOGRAPHER", name: "Photographer", Icon: Camera },
|
|
{ key: "MAKEUP_ARTIST", name: "Makeup Artist", Icon: Scissors },
|
|
{ key: "TUTOR", name: "Tutor", Icon: GraduationCap },
|
|
{ key: "DEVELOPER", name: "Developer", Icon: Code2 },
|
|
{ key: "VIDEO_EDITOR", name: "Video Editor", Icon: Clapperboard },
|
|
{ key: "UGC_CONTENT_CREATOR", name: "UGC Content Creator", Icon: Clapperboard },
|
|
{ key: "GRAPHIC_DESIGNER", name: "Graphic Designer", Icon: PenTool },
|
|
{ key: "SOCIAL_MEDIA_MANAGER", name: "Social Media Manager", Icon: Megaphone },
|
|
{ key: "FITNESS_TRAINER", name: "Fitness Trainer", Icon: Dumbbell },
|
|
{ key: "CATERING_SERVICES", name: "Catering Services", Icon: UtensilsCrossed },
|
|
];
|
|
|
|
type RoleCard = {
|
|
key: string;
|
|
title: string;
|
|
subtitle: string;
|
|
/** "Register" | "Switch" | "Current Role" | "Under Review" */
|
|
action: string;
|
|
Icon: (props: { size: number; color: string; strokeWidth: number }) => unknown;
|
|
status: "Active" | "Pending" | "Registered" | "Available";
|
|
};
|
|
|
|
type UserRoleItem = {
|
|
role_key: string;
|
|
status?: string;
|
|
};
|
|
|
|
async function apiFetch(path: string, opts?: RequestInit) {
|
|
const token =
|
|
typeof window !== "undefined"
|
|
? window.sessionStorage.getItem("nxtgauge_access_token") || ""
|
|
: "";
|
|
return fetch(`${API}${path}`, {
|
|
...opts,
|
|
credentials: "include",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
|
...(opts?.headers ?? {}),
|
|
},
|
|
});
|
|
}
|
|
|
|
function toTitle(value: string): string {
|
|
return String(value || "")
|
|
.toLowerCase()
|
|
.replace(/_/g, " ")
|
|
.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
}
|
|
|
|
function StatusBadge(props: { status: "Active" | "Pending" | "Registered" | "Available" }) {
|
|
const dotColor = () => props.status === "Active" ? ORANGE : props.status === "Pending" ? "#F59E0B" : "#9CA3AF";
|
|
const bg = () => props.status === "Active" ? "#FFF1EB" : props.status === "Pending" ? "#FFFBEB" : "#F3F4F6";
|
|
const border = () => props.status === "Active" ? "#FFD8C2" : props.status === "Pending" ? "#FDE68A" : "#D1D5DB";
|
|
const color = () => props.status === "Active" ? ORANGE : props.status === "Pending" ? "#A16207" : "#4B5563";
|
|
const label = () => props.status === "Active" ? "Active" : props.status === "Pending" ? "Under Review" : props.status;
|
|
return (
|
|
<span style={{ display: "inline-flex", "align-items": "center", "border-radius": "9999px", border: `1px solid ${border()}`, background: bg(), color: color(), padding: "2px 10px", "font-size": "12px", "font-weight": "500" }}>
|
|
<span style={{ display: "inline-block", width: "6px", height: "6px", "border-radius": "50%", background: dotColor(), "margin-right": "5px", "flex-shrink": "0" }} />
|
|
{label()}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** Fetch the user's existing profile data to pass as pre-fill candidates to RoleWizard. */
|
|
async function fetchExistingProfile(activeRoleKey: string): Promise<Record<string, string>> {
|
|
if (!activeRoleKey) return {};
|
|
try {
|
|
const res = await apiFetch(`/api/profile?roleKey=${activeRoleKey}`);
|
|
if (!res.ok) return {};
|
|
const data = await res.json().catch(() => ({}));
|
|
const profile: Record<string, unknown> = data?.profile_data ?? data ?? {};
|
|
const result: Record<string, string> = {};
|
|
for (const [key, val] of Object.entries(profile)) {
|
|
if (typeof val === "string" && val) result[key] = val;
|
|
}
|
|
return result;
|
|
} catch {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
export default function ExploreServicesPage() {
|
|
const [roleItems, setRoleItems] = createSignal<UserRoleItem[]>([]);
|
|
const [currentRole, setCurrentRole] = createSignal("");
|
|
const [loading, setLoading] = createSignal(true);
|
|
const [busyRoleKey, setBusyRoleKey] = createSignal<string | null>(null);
|
|
const [msg, setMsg] = createSignal("");
|
|
const [err, setErr] = createSignal("");
|
|
|
|
// ── wizard state ──────────────────────────────────────────────────────────
|
|
const [wizardRole, setWizardRole] = createSignal<string | null>(null);
|
|
const [wizardLabel, setWizardLabel] = createSignal("");
|
|
const [sharedDocs, setSharedDocs] = createSignal<Record<string, string>>({});
|
|
|
|
const approvedRoleSet = createMemo(() =>
|
|
new Set(
|
|
roleItems()
|
|
.filter((r) => {
|
|
const s = String(r.status || "").toUpperCase();
|
|
return s === "APPROVED" || s === "ACTIVE" || s === "";
|
|
})
|
|
.map((r) => String(r.role_key || "").toUpperCase()),
|
|
),
|
|
);
|
|
|
|
const pendingRoleSet = createMemo(() =>
|
|
new Set(
|
|
roleItems()
|
|
.filter((r) => String(r.status || "").toUpperCase() === "PENDING")
|
|
.map((r) => String(r.role_key || "").toUpperCase()),
|
|
),
|
|
);
|
|
|
|
const cards = createMemo((): RoleCard[] =>
|
|
PROFESSIONAL_ROLES.map(({ key, name, Icon }) => {
|
|
const isCurrent = currentRole() === key;
|
|
const isApproved = approvedRoleSet().has(key);
|
|
const isPending = pendingRoleSet().has(key);
|
|
|
|
let status: RoleCard["status"] = "Available";
|
|
if (isCurrent) status = "Active";
|
|
else if (isPending) status = "Pending";
|
|
else if (isApproved) status = "Registered";
|
|
|
|
const action = isCurrent ? "Current Role"
|
|
: isPending ? "Under Review"
|
|
: isApproved ? "Switch"
|
|
: "Register";
|
|
|
|
const subtitle = isCurrent ? "This is your current active role."
|
|
: isPending ? "Submitted for verification. Awaiting admin approval."
|
|
: isApproved ? "Role is approved. Switch instantly."
|
|
: "Add this role to unlock its dashboard and workflows.";
|
|
|
|
return { key, title: name, subtitle, action, Icon, status };
|
|
}),
|
|
);
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
setErr("");
|
|
try {
|
|
if (typeof window !== "undefined") {
|
|
const raw =
|
|
window.sessionStorage.getItem("nxtgauge_auth_user") ||
|
|
window.sessionStorage.getItem("nxtgauge_user") ||
|
|
window.localStorage.getItem("nxtgauge_auth_user") ||
|
|
window.localStorage.getItem("nxtgauge_user");
|
|
if (raw) {
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
setCurrentRole(String(parsed?.active_role || parsed?.role || "").toUpperCase());
|
|
} catch { setCurrentRole(""); }
|
|
}
|
|
}
|
|
// Use /api/me/roles which returns status info
|
|
const res = await apiFetch("/api/me/roles");
|
|
const data = await res.json().catch(() => []);
|
|
if (res.ok) {
|
|
const items: UserRoleItem[] = Array.isArray(data) ? data : [];
|
|
setRoleItems(items.map((r) => ({
|
|
role_key: String(r.role_key || "").toUpperCase(),
|
|
status: String(r.status || "").toUpperCase(),
|
|
})));
|
|
} else {
|
|
setRoleItems([]);
|
|
}
|
|
} catch {
|
|
setRoleItems([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
onMount(() => { void load(); });
|
|
|
|
const registerRole = async (roleKey: string, label: string) => {
|
|
setBusyRoleKey(roleKey);
|
|
setMsg("");
|
|
setErr("");
|
|
try {
|
|
const res = await apiFetch("/api/me/roles/register", {
|
|
method: "POST",
|
|
body: JSON.stringify({ role_key: roleKey }),
|
|
});
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
setErr(String(data?.error || data?.message || "Failed to register role."));
|
|
return;
|
|
}
|
|
// Fetch existing profile for identity-doc pre-fill in the wizard
|
|
const existing = await fetchExistingProfile(currentRole());
|
|
setSharedDocs(existing);
|
|
await load();
|
|
setWizardLabel(label);
|
|
setWizardRole(roleKey);
|
|
} catch {
|
|
setErr("Network error while registering role.");
|
|
} finally {
|
|
setBusyRoleKey(null);
|
|
}
|
|
};
|
|
|
|
const switchRole = async (roleKey: string) => {
|
|
setBusyRoleKey(roleKey);
|
|
setMsg("");
|
|
setErr("");
|
|
try {
|
|
const res = await apiFetch("/api/auth/switch-role", {
|
|
method: "POST",
|
|
body: JSON.stringify({ role_key: roleKey }),
|
|
});
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
setErr(String(data?.error || data?.message || "Failed to switch role."));
|
|
return;
|
|
}
|
|
const accessToken = String(data?.access_token || "").trim();
|
|
if (typeof window !== "undefined" && accessToken) {
|
|
window.sessionStorage.setItem("nxtgauge_access_token", accessToken);
|
|
window.sessionStorage.setItem("nxtgauge_frontend_access_token", accessToken);
|
|
}
|
|
if (typeof window !== "undefined") {
|
|
const keys = ["nxtgauge_auth_user", "nxtgauge_user", "nxtgauge_signup_profile_v1"];
|
|
for (const key of keys) {
|
|
const raw = window.localStorage.getItem(key);
|
|
if (!raw) continue;
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
window.localStorage.setItem(key, JSON.stringify({ ...parsed, active_role: roleKey, role: roleKey.toLowerCase(), roleKey: roleKey.toLowerCase() }));
|
|
} catch { /* ignore */ }
|
|
}
|
|
}
|
|
setMsg(`Switched to ${toTitle(roleKey)}. Redirecting...`);
|
|
setTimeout(() => { window.location.href = "/dashboard"; }, 250);
|
|
} catch {
|
|
setErr("Network error while switching role.");
|
|
} finally {
|
|
setBusyRoleKey(null);
|
|
}
|
|
};
|
|
|
|
const exitWizard = () => {
|
|
setWizardRole(null);
|
|
setSharedDocs({});
|
|
setWizardLabel("");
|
|
};
|
|
|
|
const onWizardSubmitted = async (_status: string) => {
|
|
exitWizard();
|
|
await load();
|
|
setMsg("Verification submitted. We'll review and notify you once approved.");
|
|
};
|
|
|
|
// ── render ────────────────────────────────────────────────────────────────
|
|
return (
|
|
<div style={{ display: "grid", gap: "14px", "max-width": "1080px" }}>
|
|
{/* Header */}
|
|
<div style={{ background: NAVY, "border-radius": "12px", padding: "16px 20px", display: "flex", "align-items": "center", gap: "12px" }}>
|
|
<Show
|
|
when={wizardRole()}
|
|
fallback={<span style={{ color: ORANGE }}><Globe size={24} /></span>}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={exitWizard}
|
|
style={{ background: "none", border: "none", cursor: "pointer", color: ORANGE, display: "flex", "align-items": "center", padding: "0" }}
|
|
aria-label="Back to Explore Services"
|
|
>
|
|
<ArrowLeft size={24} />
|
|
</button>
|
|
</Show>
|
|
<div>
|
|
<h1 style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#fff", "line-height": "1.2" }}>
|
|
<Show when={wizardRole()} fallback="Explore Nxtgauge">
|
|
{wizardLabel()} — Verification
|
|
</Show>
|
|
</h1>
|
|
<p style={{ margin: "4px 0 0", "font-size": "13px", color: "rgba(255,255,255,0.65)" }}>
|
|
<Show when={wizardRole()} fallback="Discover services, connect with verified users, and expand into additional roles.">
|
|
Complete your profile to submit for admin approval.
|
|
</Show>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Inline wizard — shown immediately after registration */}
|
|
<Show when={wizardRole()}>
|
|
<RoleWizard
|
|
roleKey={wizardRole()!}
|
|
rolePrefix={roleKeyToPrefix(wizardRole()!)}
|
|
prefilledDocs={sharedDocs()}
|
|
onSubmitted={onWizardSubmitted}
|
|
/>
|
|
</Show>
|
|
|
|
{/* Main content — hidden while wizard is open */}
|
|
<Show when={!wizardRole()}>
|
|
<Show when={msg()}>
|
|
<div style={{ ...CARD, border: "1px solid #BBF7D0", background: "#ECFDF5", padding: "12px 16px", color: "#065F46", "font-size": "13px", "font-weight": "600" }}>{msg()}</div>
|
|
</Show>
|
|
<Show when={err()}>
|
|
<div style={{ ...CARD, border: "1px solid #FECACA", background: "#FEF2F2", padding: "12px 16px", color: "#B91C1C", "font-size": "13px", "font-weight": "600" }}>{err()}</div>
|
|
</Show>
|
|
|
|
{/* Main Roles */}
|
|
<div style={CARD}>
|
|
<p style={{ margin: "0 0 16px", "font-size": "20px", "font-weight": "800", color: "#111827" }}>
|
|
Explore opportunities on Nxtgauge
|
|
</p>
|
|
<div style={{ display: "grid", "grid-template-columns": "repeat(3, minmax(0, 1fr))", gap: "12px" }}>
|
|
<For each={MAIN_ROLES}>
|
|
{(role) => {
|
|
const isCurrent = () => currentRole() === role.key;
|
|
const isApproved = () => approvedRoleSet().has(role.key);
|
|
const isPending = () => pendingRoleSet().has(role.key);
|
|
return (
|
|
<div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "16px", padding: "16px", display: "flex", "flex-direction": "column", gap: "10px", "box-shadow": "0 1px 4px rgba(0,0,0,0.06)" }}>
|
|
<div style={{ width: "40px", height: "40px", "border-radius": "10px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center" }}>
|
|
<role.Icon size={20} color={ORANGE} strokeWidth={2} />
|
|
</div>
|
|
<p style={{ margin: "0", "font-size": "16px", "font-weight": "700", color: "#111827" }}>{role.name}</p>
|
|
<p style={{ margin: "0", "font-size": "12px", color: "#6B7280", "line-height": "1.5" }}>{role.subtitle}</p>
|
|
<button
|
|
type="button"
|
|
disabled={isCurrent() || isPending() || busyRoleKey() === role.key}
|
|
onClick={() => isApproved() && !isCurrent() ? void switchRole(role.key) : void registerRole(role.key, role.name)}
|
|
style={{ height: "32px", "border-radius": "8px", border: "none", background: isCurrent() || isPending() ? "#E5E7EB" : NAVY, color: isCurrent() || isPending() ? "#4B5563" : "#fff", padding: "0 10px", "font-size": "12px", "font-weight": "700", cursor: isCurrent() || isPending() ? "not-allowed" : "pointer", "margin-top": "auto" }}
|
|
>
|
|
{isCurrent() ? "Current Role" : isPending() ? "Under Review" : isApproved() ? "Switch" : `Register as ${role.name}`}
|
|
</button>
|
|
</div>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Professional Services */}
|
|
<Show
|
|
when={!loading()}
|
|
fallback={
|
|
<div style={{ ...CARD, "text-align": "center", padding: "48px 24px" }}>
|
|
<p style={{ margin: "0", "font-size": "15px", "font-weight": "600", color: "#111827" }}>Loading services...</p>
|
|
</div>
|
|
}
|
|
>
|
|
<div style={CARD}>
|
|
<div style={{ display: "flex", "justify-content": "space-between", "align-items": "center", "margin-bottom": "16px" }}>
|
|
<p style={{ margin: "0", "font-size": "16px", "font-weight": "700", color: "#111827" }}>Professional Services</p>
|
|
<button type="button" onClick={() => void load()} style={BTN_GHOST}>Refresh</button>
|
|
</div>
|
|
<div style={{ display: "grid", "grid-template-columns": "repeat(auto-fill, minmax(280px, 1fr))", gap: "14px" }}>
|
|
<For each={cards()}>
|
|
{(card) => {
|
|
const busy = () => busyRoleKey() === card.key;
|
|
const disabled = () => busy() || card.action === "Current Role" || card.action === "Under Review";
|
|
return (
|
|
<div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "16px", padding: "16px", display: "flex", "flex-direction": "column", gap: "10px", "box-shadow": "0 1px 4px rgba(0,0,0,0.06)" }}>
|
|
<div style={{ display: "flex", "align-items": "flex-start", "justify-content": "space-between" }}>
|
|
<div style={{ width: "40px", height: "40px", "border-radius": "10px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center", "flex-shrink": "0" }}>
|
|
<card.Icon size={20} color={ORANGE} strokeWidth={2} />
|
|
</div>
|
|
<StatusBadge status={card.status} />
|
|
</div>
|
|
<div>
|
|
<p style={{ margin: "0", "font-size": "16px", "font-weight": "700", color: "#111827" }}>{card.title}</p>
|
|
<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280", "line-height": "1.5" }}>{card.subtitle}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
disabled={disabled()}
|
|
onClick={() => card.action === "Register" ? void registerRole(card.key, card.title) : card.action === "Switch" ? void switchRole(card.key) : undefined}
|
|
style={{
|
|
height: "34px", "border-radius": "8px", border: card.action === "Register" ? "none" : "1px solid #E5E7EB",
|
|
background: card.action === "Register" ? NAVY : disabled() ? "#F3F4F6" : "#fff",
|
|
color: card.action === "Register" ? "#fff" : disabled() ? "#9CA3AF" : "#374151",
|
|
padding: "0 14px", "font-size": "12px", "font-weight": "700",
|
|
cursor: disabled() ? "not-allowed" : "pointer",
|
|
opacity: busy() ? "0.6" : "1", "margin-top": "auto",
|
|
}}
|
|
>
|
|
{busy() ? (card.action === "Register" ? "Registering..." : "Switching...") : card.action}
|
|
</button>
|
|
</div>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
|
|
{/* Why Add More Services */}
|
|
<div style={{ border: "1px solid #E5E7EB", background: "linear-gradient(180deg, #FFFFFF 0%, #FFFAF7 100%)", "border-radius": "20px", padding: "18px", "box-shadow": "0 8px 20px rgba(15,23,42,0.06)", "margin-top": "14px" }}>
|
|
<p style={{ margin: "0", "font-size": "12px", "letter-spacing": "0.08em", "text-transform": "uppercase", "font-weight": "700", color: ORANGE, "text-align": "center" }}>Growth Advantage</p>
|
|
<p style={{ margin: "4px 0 0", "font-size": "24px", "font-weight": "800", color: "#111827", "text-align": "center", "line-height": "1.1" }}>Why Add More Services?</p>
|
|
<p style={{ margin: "8px auto 0", "font-size": "13px", "line-height": "1.5", color: "#6B7280", "text-align": "center", "max-width": "760px" }}>
|
|
A multi-service profile helps you acquire more opportunities, improve trust, and scale consistently on a single platform.
|
|
</p>
|
|
<div style={{ display: "grid", "grid-template-columns": "repeat(4, minmax(0, 1fr))", gap: "12px", "margin-top": "14px" }}>
|
|
<For each={[
|
|
{ Icon: TrendingUp, title: "Reach More Buyers", body: "Get discovered by customers across multiple demand categories." },
|
|
{ Icon: Award, title: "Increase Revenue Paths", body: "Offer additional services and create new income streams." },
|
|
{ Icon: ShieldCheck,title: "Strengthen Credibilities",body: "Verified multi-service profiles build confidence and improve conversion." },
|
|
{ Icon: BarChart3, title: "Scale Faster", body: "Grow your business from one unified account and workflow." },
|
|
]}>
|
|
{(item) => (
|
|
<div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "14px", padding: "14px", "box-shadow": "0 2px 6px rgba(0,0,0,0.05)" }}>
|
|
<div style={{ width: "34px", height: "34px", "border-radius": "999px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center" }}>
|
|
<item.Icon size={16} color={ORANGE} />
|
|
</div>
|
|
<p style={{ margin: "10px 0 0", "font-size": "15px", "font-weight": "800", color: "#111827" }}>{item.title}</p>
|
|
<p style={{ margin: "6px 0 0", "font-size": "12px", color: "#6B7280", "line-height": "1.45" }}>{item.body}</p>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</Show>
|
|
</div>
|
|
);
|
|
}
|