From c4350538107f36fab4c676d0f319204cad3f1d96 Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Thu, 19 Mar 2026 00:30:33 +0100 Subject: [PATCH] feat(frontend): finalize onboarding, otp verification, and roleless dashboard flow --- src/app.css | 244 +++++++++++++++-- src/components/CaptchaCanvas.tsx | 82 ++++++ src/components/PublicHeader.tsx | 8 +- src/components/dashboard/DashboardLayout.tsx | 27 +- src/lib/auth.ts | 4 +- src/lib/form-validation.ts | 219 +++++++++++++++ src/lib/runtime/seed.ts | 216 +-------------- src/lib/server/gateway.ts | 10 + src/routes/about.tsx | 52 +++- src/routes/api/gateway/[...path].ts | 83 ++++++ src/routes/api/runtime-config.ts | 24 ++ src/routes/api/runtime/onboarding/complete.ts | 95 ++++++- src/routes/api/runtime/onboarding/progress.ts | 25 +- src/routes/api/runtime/onboarding/schema.ts | 27 +- src/routes/api/runtime/onboarding/state.ts | 38 +-- src/routes/api/runtime/onboarding/status.ts | 32 +++ src/routes/api/users/auth/check-email.ts | 39 +++ src/routes/api/users/auth/logout.ts | 41 +++ src/routes/api/users/auth/refresh.ts | 38 +++ src/routes/api/users/auth/session.ts | 24 ++ src/routes/api/users/auth/switch-role.ts | 32 +++ .../api/users/auth/verification/resend-otp.ts | 40 +++ src/routes/api/users/roles/register.ts | 40 +++ src/routes/auth/login/index.tsx | 48 ++-- src/routes/auth/register/index.tsx | 258 +++++++++++++----- src/routes/auth/verification/index.tsx | 6 +- src/routes/choose-role.tsx | 4 +- src/routes/dashboard/explore.tsx | 15 + src/routes/dashboard/index.tsx | 10 + src/routes/dashboard/leads/accepted.tsx | 10 + src/routes/dashboard/packages.tsx | 15 + src/routes/dashboard/profile.tsx | 22 ++ src/routes/dashboard/requests.tsx | 10 + src/routes/onboarding.tsx | 16 +- src/routes/users/choose-role/index.tsx | 133 +++++++++ src/routes/users/onboarding/professional.tsx | 3 +- 36 files changed, 1572 insertions(+), 418 deletions(-) create mode 100644 src/components/CaptchaCanvas.tsx create mode 100644 src/lib/form-validation.ts create mode 100644 src/routes/api/gateway/[...path].ts create mode 100644 src/routes/api/runtime-config.ts create mode 100644 src/routes/api/runtime/onboarding/status.ts create mode 100644 src/routes/api/users/auth/check-email.ts create mode 100644 src/routes/api/users/auth/logout.ts create mode 100644 src/routes/api/users/auth/refresh.ts create mode 100644 src/routes/api/users/auth/session.ts create mode 100644 src/routes/api/users/auth/switch-role.ts create mode 100644 src/routes/api/users/auth/verification/resend-otp.ts create mode 100644 src/routes/api/users/roles/register.ts create mode 100644 src/routes/dashboard/explore.tsx create mode 100644 src/routes/dashboard/leads/accepted.tsx create mode 100644 src/routes/dashboard/packages.tsx create mode 100644 src/routes/dashboard/profile.tsx create mode 100644 src/routes/dashboard/requests.tsx create mode 100644 src/routes/users/choose-role/index.tsx diff --git a/src/app.css b/src/app.css index bd6d050..5ffff0f 100644 --- a/src/app.css +++ b/src/app.css @@ -2978,6 +2978,15 @@ body { color: #1e293b; } +.auth-captcha-canvas { + height: 52px; + border: 1px solid #c8cedd; + border-radius: 12px; + background: #fff; + display: block; + user-select: none; +} + .auth-submit-btn { margin-top: 10px; width: 100%; @@ -3007,6 +3016,77 @@ body { font-size: 12px; } +.auth-footer-row a { + color: #fd6216; + font-weight: 600; + text-decoration: none; +} + +.auth-footer-row a:hover { + color: #e4570f; + text-decoration: underline; +} + +.auth-checkbox-wrapper { + display: flex; + align-items: flex-start; + gap: 10px; + cursor: pointer; + margin-top: 12px; +} + +.auth-checkbox { + width: 20px; + height: 20px; + min-width: 20px; + margin-top: 2px; + cursor: pointer; + accent-color: #fd6216; +} + +.auth-checkbox-label { + font-size: 13px; + color: #4b546f; + line-height: 1.5; +} + +.auth-checkbox-label a { + color: #fd6216; + text-decoration: underline; + font-weight: 600; +} + +.auth-checkbox-label a:hover { + color: #e45a14; +} + +.validation-note { + margin-top: 4px; + font-size: 12px; + line-height: 1.4; + transition: color 180ms ease; +} + +.password-strength-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 6px 8px; + margin-top: 6px; + font-size: 11px; + line-height: 1.4; +} + +.password-strength-grid p { + margin: 0; + transition: color 180ms ease; +} + +.footer-text { + margin: 8px 0 0; + font-size: 12px; + color: #6a7390; +} + .otp-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); @@ -3755,7 +3835,7 @@ body { } .about-principles-subline { - margin-top: 12px; + margin-top: 4px; font-size: 14px; line-height: 1.4; letter-spacing: 0.12em; @@ -4302,64 +4382,172 @@ body { /* ── Choose Role Page ── */ .choose-role-page { + position: relative; min-height: 100vh; - background: var(--bg-soft, #f6f8ff); display: flex; + flex-direction: column; align-items: center; - justify-content: center; - padding: 32px 16px; + justify-content: flex-start; + padding: 24px 16px 60px; + color: #fff; } .choose-role-container { - max-width: 900px; - width: 100%; + position: relative; + z-index: 1; + width: min(1200px, calc(100% - 32px)); + max-width: 1200px; + margin: 0 auto; } .choose-role-header { text-align: center; - margin-bottom: 32px; + margin: 60px 0 48px; } .choose-role-header h1 { - margin: 12px 0 8px; - font-size: 32px; + margin: 0 0 12px; + font-size: clamp(28px, 5vw, 40px); font-weight: 800; - color: #100b2f; + color: #fff; + line-height: 1.1; } -.choose-role-header p { color: #64748b; } - -.choose-role-page .role-grid { - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 14px; +.choose-role-header p { + margin: 0; + color: rgba(255, 255, 255, 0.8); + font-size: 16px; + line-height: 1.5; } -.choose-role-page .role-card { +.choose-role-section { + margin-bottom: 52px; +} + +.choose-role-section .section-title { + margin: 0 0 8px; + font-size: 24px; + font-weight: 700; + color: #fff; +} + +.choose-role-section .section-subtitle { + margin: 0 0 24px; + color: rgba(255, 255, 255, 0.75); + font-size: 14px; +} + +.roles-grid { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.main-roles-grid { + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); +} + +.professional-roles-grid { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +.role-card { + position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; - gap: 8px; - padding: 20px 16px; + gap: 12px; + padding: 28px 18px; + border-radius: 18px; + border: 1px solid rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(12px); cursor: pointer; - transition: border-color 200ms, box-shadow 200ms, transform 150ms; - border: 1.5px solid #e2e8f0; + transition: all 240ms ease; + box-shadow: 0 18px 36px -24px rgba(2, 6, 23, 0.5); } -.choose-role-page .role-card:hover { +.role-card::before { + content: ''; + position: absolute; + inset: -1px; + border-radius: 18px; + background: linear-gradient(135deg, rgba(253, 98, 22, 0), rgba(253, 98, 22, 0.15)); + opacity: 0; + transition: opacity 240ms ease; + pointer-events: none; + z-index: -1; +} + +.role-card:hover { + border-color: rgba(253, 98, 22, 0.6); + background: rgba(255, 255, 255, 0.15); + transform: translateY(-6px); + box-shadow: 0 24px 52px -20px rgba(253, 98, 22, 0.45); +} + +.role-card:hover::before { + opacity: 1; +} + +.role-card.selected { border-color: #fd6216; - box-shadow: 0 8px 24px -12px rgba(253, 98, 22, 0.28); - transform: translateY(-2px); + background: rgba(253, 98, 22, 0.2); + box-shadow: 0 0 0 2px rgba(253, 98, 22, 0.3) inset, 0 24px 52px -20px rgba(253, 98, 22, 0.5); } -.choose-role-page .role-card:disabled { - opacity: 0.6; +.role-card:disabled { + opacity: 0.5; cursor: not-allowed; } -.role-icon { font-size: 32px; line-height: 1; } -.role-label { font-size: 14px; font-weight: 700; color: #100b2f; } -.role-desc { font-size: 12px; color: #64748b; line-height: 1.4; } +.role-icon { + font-size: clamp(36px, 6vw, 48px); + line-height: 1; + display: block; +} + +.role-title { + margin: 0; + font-size: 16px; + font-weight: 700; + color: #fff; +} + +.role-description { + margin: 0; + font-size: 13px; + color: rgba(255, 255, 255, 0.75); + line-height: 1.5; + flex-grow: 1; +} + +.role-cta { + margin-top: 8px; + font-size: 13px; + font-weight: 600; + color: #fd6216; + opacity: 0.8; + transition: opacity 180ms ease; +} + +.role-card:hover .role-cta { + opacity: 1; +} + +.choose-role-footer { + text-align: center; + margin-top: 48px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.choose-role-footer .footer-text { + margin: 0; + color: rgba(255, 255, 255, 0.65); + font-size: 14px; +} /* ── Pending Verification Page ── */ .pending-page { diff --git a/src/components/CaptchaCanvas.tsx b/src/components/CaptchaCanvas.tsx new file mode 100644 index 0000000..b2bd82e --- /dev/null +++ b/src/components/CaptchaCanvas.tsx @@ -0,0 +1,82 @@ +import { createEffect } from 'solid-js'; + +type CaptchaCanvasProps = { + code: string; + class?: string; +}; + +export default function CaptchaCanvas(props: CaptchaCanvasProps) { + let canvasRef: HTMLCanvasElement | undefined; + + createEffect(() => { + const canvas = canvasRef; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const width = 176; + const height = 52; + const dpr = typeof window !== 'undefined' ? Math.max(1, window.devicePixelRatio || 1) : 1; + canvas.style.width = `${width}px`; + canvas.style.height = `${height}px`; + canvas.width = Math.floor(width * dpr); + canvas.height = Math.floor(height * dpr); + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + + // Clear and fill background + ctx.clearRect(0, 0, width, height); + ctx.fillStyle = '#ffffff'; + ctx.fillRect(0, 0, width, height); + + // Draw decorative lines + for (let i = 0; i < 2; i += 1) { + ctx.strokeStyle = i % 2 === 0 ? 'rgba(253,98,22,0.16)' : 'rgba(27,36,64,0.14)'; + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(Math.random() * width, Math.random() * height); + ctx.lineTo(Math.random() * width, Math.random() * height); + ctx.stroke(); + } + + // Draw decorative circles + for (let i = 0; i < 3; i += 1) { + ctx.fillStyle = i % 2 === 0 ? 'rgba(253,98,22,0.10)' : 'rgba(27,36,64,0.09)'; + ctx.beginPath(); + ctx.arc(Math.random() * width, Math.random() * height, Math.random() * 1.8 + 0.6, 0, Math.PI * 2); + ctx.fill(); + } + + // Draw characters + const chars = String(props.code || '').slice(0, 6).split(''); + const startX = 16; + const charGap = 24; + + chars.forEach((char, index) => { + const x = startX + index * charGap; + const y = height / 2 + 1; + const rotation = 0; + + ctx.save(); + ctx.translate(x, y); + ctx.rotate(rotation); + ctx.textBaseline = 'middle'; + ctx.font = '800 22px "Courier New", monospace'; + ctx.fillStyle = index % 2 === 0 ? '#0f172a' : '#c2410c'; + ctx.lineWidth = 0; + ctx.fillText(char, 0, 0); + ctx.restore(); + }); + }); + + return ( + event.preventDefault()} + class={props.class} + /> + ); +} diff --git a/src/components/PublicHeader.tsx b/src/components/PublicHeader.tsx index 841bf2a..c20a2b4 100644 --- a/src/components/PublicHeader.tsx +++ b/src/components/PublicHeader.tsx @@ -40,10 +40,10 @@ export default function PublicHeader(props: PublicHeaderProps) {
- Home - About Us - Help Center - Contact Us + Home + About Us + Help Center + Contact Us
diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx index c5cc466..5d2ed22 100644 --- a/src/components/dashboard/DashboardLayout.tsx +++ b/src/components/dashboard/DashboardLayout.tsx @@ -41,6 +41,7 @@ const IconCompass = () => ( // ── Module → nav item mapping ───────────────────────────────────────────────── const MODULE_NAV_MAP: Record = { + // Uppercase module keys COMPANY_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard }, JOBSEEKER_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard }, CUSTOMER_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard }, @@ -64,6 +65,21 @@ const MODULE_NAV_MAP: Record authState().runtime_config; const navItems = () => { + if (rc()?.role === 'USER') { + return [ + { label: 'Dashboard', href: '/dashboard', icon: IconDashboard }, + { label: 'Explore Nxtgauge', href: '/dashboard/explore', icon: IconCompass }, + { label: 'Settings', href: '/dashboard/settings', icon: IconSettings }, + ]; + } + const modules = rc()?.enabled_modules ?? []; const seen = new Set(); return modules diff --git a/src/lib/auth.ts b/src/lib/auth.ts index 46d9197..a9ae5bd 100644 --- a/src/lib/auth.ts +++ b/src/lib/auth.ts @@ -102,13 +102,13 @@ export async function switchRole(roleKey: string): Promise { const token = authState().access_token; if (!token) return; - const res = await fetch(`${API_BASE}/api/me/roles/switch`, { + const res = await fetch(`${API_BASE}/api/auth/switch-role`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}`, }, - body: JSON.stringify({ role_key: roleKey }), + body: JSON.stringify({ requested_role: roleKey }), credentials: 'include', }); diff --git a/src/lib/form-validation.ts b/src/lib/form-validation.ts new file mode 100644 index 0000000..8965ee2 --- /dev/null +++ b/src/lib/form-validation.ts @@ -0,0 +1,219 @@ +/** + * Form Validation Utilities + * Reusable validation functions for auth forms and other components + */ + +/** + * Validate email format - requires valid domain with 2+ char TLD + * @param email - Email address to validate + * @returns true if email is valid + */ +export function isValidEmail(email: string): boolean { + const trimmed = email.trim(); + // Regex requires: user@domain.TLD (TLD must be 2+ chars) + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; + return emailRegex.test(trimmed); +} + +/** + * Validate name format - letters, spaces, hyphens, apostrophes only + * @param name - Name to validate + * @param minLength - Minimum length (default: 2) + * @param maxLength - Maximum length (default: 50) + * @returns true if name is valid + */ +export function isValidName(name: string, minLength = 2, maxLength = 50): boolean { + const trimmed = name.trim(); + if (trimmed.length < minLength || trimmed.length > maxLength) { + return false; + } + // Allow letters, spaces, hyphens, and apostrophes + const nameRegex = /^[a-zA-Z\s\-']+$/; + return nameRegex.test(trimmed); +} + +/** + * Password strength check + * @param password - Password to check + * @param confirmPassword - Confirmation password (optional) + * @returns Object with individual check results + */ +export interface PasswordChecks { + minLength: boolean; // 8+ characters + uppercase: boolean; // At least one A-Z + lowercase: boolean; // At least one a-z + number: boolean; // At least one 0-9 + special: boolean; // At least one special character + match: boolean; // Matches confirmation password +} + +export function checkPasswordStrength( + password: string, + confirmPassword?: string +): PasswordChecks { + return { + minLength: password.length >= 8, + uppercase: /[A-Z]/.test(password), + lowercase: /[a-z]/.test(password), + number: /[0-9]/.test(password), + special: /[^A-Za-z0-9]/.test(password), + match: confirmPassword ? password === confirmPassword : true, + }; +} + +/** + * Check if password is strong (all requirements met) + * @param checks - PasswordChecks object + * @returns true if all checks pass + */ +export function isPasswordStrong(checks: PasswordChecks): boolean { + return ( + checks.minLength && + checks.uppercase && + checks.lowercase && + checks.number && + checks.special && + checks.match + ); +} + +/** + * Validate CAPTCHA input + * @param input - User's captcha input + * @param expected - Expected captcha value + * @returns true if captcha matches (case-insensitive) + */ +export function isValidCaptcha(input: string, expected: string): boolean { + return input.trim().toUpperCase() === expected.toUpperCase(); +} + +/** + * Get user-friendly error message for validation failure + * @param fieldName - Name of the field + * @param validationType - Type of validation that failed + * @returns User-friendly error message + */ +export function getValidationErrorMessage(fieldName: string, validationType: string): string { + const messages: Record> = { + email: { + invalid: 'Please enter a valid email address with a domain (e.g., user@example.com)', + required: 'Email address is required', + }, + firstName: { + invalid: 'First name must be 2-50 characters and contain only letters, spaces, hyphens, or apostrophes', + required: 'First name is required', + tooShort: 'First name must be at least 2 characters', + tooLong: 'First name must not exceed 50 characters', + }, + lastName: { + invalid: 'Last name must be 2-50 characters and contain only letters, spaces, hyphens, or apostrophes', + required: 'Last name is required', + tooShort: 'Last name must be at least 2 characters', + tooLong: 'Last name must not exceed 50 characters', + }, + fullName: { + invalid: 'Full name must be 2-50 characters and contain only letters, spaces, hyphens, or apostrophes', + required: 'Full name is required', + }, + password: { + required: 'Password is required', + weak: 'Password must contain: 8+ characters, uppercase, lowercase, number, and special character', + tooShort: 'Password must be at least 8 characters', + noUppercase: 'Password must contain at least one uppercase letter', + noLowercase: 'Password must contain at least one lowercase letter', + noNumber: 'Password must contain at least one number', + noSpecial: 'Password must contain at least one special character', + }, + confirmPassword: { + required: 'Please confirm your password', + noMatch: 'Passwords do not match', + }, + captcha: { + required: 'Captcha is required', + invalid: 'Captcha does not match. Please try again.', + }, + terms: { + required: 'You must agree to the Terms and Privacy Policy to continue', + }, + }; + + return messages[fieldName]?.[validationType] ?? 'Invalid input'; +} + +/** + * Validate entire register form + * @param formData - Object with form field values + * @returns Object with validation results and errors + */ +export interface RegisterFormData { + firstName: string; + lastName: string; + email: string; + password: string; + confirmPassword: string; + captcha: string; + expectedCaptcha: string; + termsAccepted: boolean; +} + +export interface ValidationResult { + isValid: boolean; + errors: Record; +} + +export function validateRegisterForm(formData: RegisterFormData): ValidationResult { + const errors: Record = {}; + + // Validate first name + if (!formData.firstName.trim()) { + errors.firstName = getValidationErrorMessage('firstName', 'required'); + } else if (!isValidName(formData.firstName, 2, 50)) { + errors.firstName = getValidationErrorMessage('firstName', 'invalid'); + } + + // Validate last name + if (!formData.lastName.trim()) { + errors.lastName = getValidationErrorMessage('lastName', 'required'); + } else if (!isValidName(formData.lastName, 2, 50)) { + errors.lastName = getValidationErrorMessage('lastName', 'invalid'); + } + + // Validate email + if (!formData.email.trim()) { + errors.email = getValidationErrorMessage('email', 'required'); + } else if (!isValidEmail(formData.email)) { + errors.email = getValidationErrorMessage('email', 'invalid'); + } + + // Validate password + const passwordChecks = checkPasswordStrength(formData.password, formData.confirmPassword); + if (!formData.password) { + errors.password = getValidationErrorMessage('password', 'required'); + } else if (!isPasswordStrong(passwordChecks)) { + errors.password = getValidationErrorMessage('password', 'weak'); + } + + // Validate confirm password + if (!formData.confirmPassword) { + errors.confirmPassword = getValidationErrorMessage('confirmPassword', 'required'); + } else if (!passwordChecks.match) { + errors.confirmPassword = getValidationErrorMessage('confirmPassword', 'noMatch'); + } + + // Validate captcha + if (!formData.captcha) { + errors.captcha = getValidationErrorMessage('captcha', 'required'); + } else if (!isValidCaptcha(formData.captcha, formData.expectedCaptcha)) { + errors.captcha = getValidationErrorMessage('captcha', 'invalid'); + } + + // Validate terms acceptance + if (!formData.termsAccepted) { + errors.terms = getValidationErrorMessage('terms', 'required'); + } + + return { + isValid: Object.keys(errors).length === 0, + errors, + }; +} diff --git a/src/lib/runtime/seed.ts b/src/lib/runtime/seed.ts index 4c632d8..6878f1c 100644 --- a/src/lib/runtime/seed.ts +++ b/src/lib/runtime/seed.ts @@ -1,216 +1,4 @@ import type { RuntimeOnboardingConfig } from '~/lib/runtime/types'; -const PROFESSIONS = [ - 'Photographer', - 'Makeup Artist', - 'Tutor', - 'Developer', - 'Video Editor', - 'Graphic Designer', - 'Social Media Manager', - 'Fitness Trainer', - 'Catering Services', -]; - -function withProfessionVisibility(base: Omit, profession: string) { - return { - ...base, - visibleWhen: [{ field: 'profession', equals: profession }], - }; -} - -export const SEEDED_ONBOARDING_SCHEMAS: RuntimeOnboardingConfig[] = [ - { - schemaId: 'customer_onboarding_v1', - roleKey: 'CUSTOMER', - version: 1, - steps: [ - { - id: 'step_1_service', - title: 'Select Service Category', - fields: [ - { - id: 'profession', - label: 'Service Category', - type: 'select', - required: true, - options: PROFESSIONS.map((p) => ({ label: p, value: p })), - }, - ], - }, - { - id: 'step_2_requirements', - title: 'Requirements', - fields: [ - withProfessionVisibility({ id: 'event_type', label: 'Event Type', type: 'select', required: true, options: ['Wedding', 'Corporate Event', 'Birthday', 'Product Shoot', 'Portrait'].map((x) => ({ label: x, value: x })) }, 'Photographer'), - withProfessionVisibility({ id: 'coverage_hours', label: 'Coverage Hours', type: 'number', required: true, placeholder: 'e.g., 4', validation: { min: 1 } }, 'Photographer'), - withProfessionVisibility({ id: 'photo_style', label: 'Photo Style', type: 'select', required: true, options: ['Traditional', 'Candid', 'Cinematic', 'Documentary'].map((x) => ({ label: x, value: x })) }, 'Photographer'), - - withProfessionVisibility({ id: 'occasion_type', label: 'Occasion Type', type: 'select', required: true, options: ['Bridal', 'Party/Guest', 'Photoshoot', 'Editorial'].map((x) => ({ label: x, value: x })) }, 'Makeup Artist'), - withProfessionVisibility({ id: 'people_count', label: 'People Count', type: 'number', required: true, placeholder: 'e.g., 2', validation: { min: 1 } }, 'Makeup Artist'), - withProfessionVisibility({ id: 'skin_preferences', label: 'Skin Preferences', type: 'textarea', placeholder: 'Any allergies or specific product requests?' }, 'Makeup Artist'), - - withProfessionVisibility({ id: 'subject', label: 'Subject', type: 'text', required: true, placeholder: 'e.g., Mathematics, Spoken English' }, 'Tutor'), - withProfessionVisibility({ id: 'grade_level', label: 'Grade Level', type: 'select', required: true, options: ['Primary', 'Middle School', 'High School', 'College', 'Professional'].map((x) => ({ label: x, value: x })) }, 'Tutor'), - withProfessionVisibility({ id: 'sessions_per_week', label: 'Sessions Per Week', type: 'number', required: true, placeholder: 'e.g., 3', validation: { min: 1 } }, 'Tutor'), - - withProfessionVisibility({ id: 'project_type', label: 'Project Type', type: 'select', required: true, options: ['Website', 'Mobile App', 'E-commerce', 'Custom Software'].map((x) => ({ label: x, value: x })) }, 'Developer'), - withProfessionVisibility({ id: 'platform', label: 'Platform', type: 'select', required: true, options: ['iOS', 'Android', 'Web', 'Cross-platform'].map((x) => ({ label: x, value: x })) }, 'Developer'), - withProfessionVisibility({ id: 'feature_summary', label: 'Feature Summary', type: 'textarea', required: true, placeholder: 'Briefly describe what the app/website should do' }, 'Developer'), - - withProfessionVisibility({ id: 'video_type', label: 'Video Type', type: 'select', required: true, options: ['YouTube Video', 'Instagram Reel/Shorts', 'Wedding Highlights', 'Corporate Promo'].map((x) => ({ label: x, value: x })) }, 'Video Editor'), - withProfessionVisibility({ id: 'video_duration', label: 'Video Duration', type: 'select', required: true, options: ['Under 1 min', '1-5 mins', '5-15 mins', 'Over 15 mins'].map((x) => ({ label: x, value: x })) }, 'Video Editor'), - withProfessionVisibility({ id: 'editing_style', label: 'Editing Style', type: 'text', required: true, placeholder: 'e.g., Fast-paced, Cinematic, Vlog style' }, 'Video Editor'), - - withProfessionVisibility({ id: 'design_type', label: 'Design Type', type: 'select', required: true, options: ['Logo/Branding', 'Social Media Posts', 'UI/UX', 'Print Media'].map((x) => ({ label: x, value: x })) }, 'Graphic Designer'), - withProfessionVisibility({ id: 'brand_guidelines', label: 'Brand Guidelines', type: 'select', required: true, options: ['Yes - I have them', 'No - Need to create them'].map((x) => ({ label: x, value: x })) }, 'Graphic Designer'), - withProfessionVisibility({ id: 'asset_count', label: 'Asset Count', type: 'number', required: true, placeholder: 'How many images/screens?', validation: { min: 1 } }, 'Graphic Designer'), - - withProfessionVisibility({ id: 'platforms', label: 'Platforms', type: 'select', required: true, multiple: true, options: ['Instagram', 'LinkedIn', 'Facebook', 'X/Twitter', 'YouTube'].map((x) => ({ label: x, value: x })) }, 'Social Media Manager'), - withProfessionVisibility({ id: 'posting_frequency', label: 'Posting Frequency', type: 'select', required: true, options: ['1-2 times/week', '3-4 times/week', 'Daily'].map((x) => ({ label: x, value: x })) }, 'Social Media Manager'), - withProfessionVisibility({ id: 'goal', label: 'Goal', type: 'select', required: true, options: ['Brand Awareness', 'Lead Generation', 'Sales/Conversions', 'Community Building'].map((x) => ({ label: x, value: x })) }, 'Social Media Manager'), - - withProfessionVisibility({ id: 'fitness_goal', label: 'Fitness Goal', type: 'select', required: true, options: ['Weight Loss', 'Muscle Gain', 'Flexibility/Yoga', 'General Fitness'].map((x) => ({ label: x, value: x })) }, 'Fitness Trainer'), - withProfessionVisibility({ id: 'sessions_per_week_fitness', label: 'Sessions Per Week', type: 'number', required: true, placeholder: 'e.g., 5', validation: { min: 1 } }, 'Fitness Trainer'), - withProfessionVisibility({ id: 'training_mode', label: 'Training Mode', type: 'select', required: true, options: ['Online/Virtual', 'In-person'].map((x) => ({ label: x, value: x })) }, 'Fitness Trainer'), - - withProfessionVisibility({ id: 'event_size', label: 'Event Size', type: 'number', required: true, placeholder: 'Number of plates/guests', validation: { min: 1 } }, 'Catering Services'), - withProfessionVisibility({ id: 'menu_preference', label: 'Menu Preference', type: 'select', required: true, options: ['Pure Veg', 'Non-Veg', 'Mixed'].map((x) => ({ label: x, value: x })) }, 'Catering Services'), - withProfessionVisibility({ id: 'cuisine_type', label: 'Cuisine Type', type: 'text', required: true, placeholder: 'e.g., South Indian, North Indian, Continental' }, 'Catering Services'), - ], - }, - { - id: 'step_3_budget_timeline', - title: 'Budget and Timeline', - fields: [ - { id: 'budget_range', label: 'Budget Range', type: 'select', required: true, options: ['Under ₹5,000', '₹5,000 - ₹15,000', '₹15,000 - ₹50,000', '₹50,000 - ₹1,00,000', '₹1,00,000+'].map((x) => ({ label: x, value: x })) }, - { id: 'expected_start', label: 'Expected Start', type: 'date', required: true }, - { id: 'urgency', label: 'Urgency', type: 'select', required: true, options: ['Relaxed (No strict deadline)', 'Standard (Within a few weeks)', 'ASAP (Urgent)'].map((x) => ({ label: x, value: x })) }, - ], - }, - { - id: 'step_4_location', - title: 'Location and Preference', - fields: [ - { id: 'service_mode', label: 'Service Mode', type: 'select', required: true, options: ['Onsite (In-person)', 'Remote (Online)', 'Hybrid (Mix of both)'].map((x) => ({ label: x, value: x })) }, - { id: 'address_line', label: 'Address Line', type: 'text', required: true, placeholder: 'Street address, Landmark' }, - { id: 'service_city', label: 'Service City', type: 'text', required: true, readOnly: true, defaultValue: 'Chennai, India' }, - { id: 'pin_code', label: 'PIN Code', type: 'text', required: true, placeholder: 'e.g., 600001', validation: { pattern: '^[0-9]{6}$', maxLength: 6, minLength: 6 } }, - ], - }, - { - id: 'step_5_review', - title: 'Final Review', - fields: [{ id: 'summary_note', label: 'Additional Instructions', type: 'textarea', placeholder: 'Any additional instructions or context?' }], - }, - { - id: 'step_6_verification', - title: 'Identity Verification', - fields: [ - { id: 'id_type', label: 'ID Type', type: 'select', required: true, options: ['Aadhaar Card', 'PAN Card', 'Driving License', 'Voter ID', 'Passport'].map((x) => ({ label: x, value: x })) }, - { id: 'id_number', label: 'ID Number', type: 'text', required: true, placeholder: 'Enter ID Number' }, - { id: 'id_document_upload', label: 'Upload ID (PDF only)', type: 'file', required: true, multiple: true, maxFiles: 2, accept: 'application/pdf', maxSizeMB: 2 }, - ], - }, - ], - }, - { - schemaId: 'professional_onboarding_v1', - roleKey: 'PROFESSIONAL', - version: 1, - steps: [ - { id: 'step_1_role', title: 'Choose your professional role', fields: [{ id: 'profession', label: 'Profession', type: 'select', required: true, options: PROFESSIONS.map((p) => ({ label: p, value: p })) }] }, - { id: 'step_2_profile', title: 'Profile details', fields: [ - { id: 'full_name', label: 'Full Name', type: 'text', required: true, placeholder: 'Enter your full name' }, - { id: 'experience', label: 'Experience (Years)', type: 'number', required: true, validation: { min: 0 } }, - { id: 'bio', label: 'Bio', type: 'textarea', required: true, placeholder: "Hi, I'm a professional specializing in..." }, - ] }, - { id: 'step_3_contact', title: 'Contact and location', fields: [ - { id: 'email', label: 'Email', type: 'email', required: true }, - { id: 'phone', label: 'Phone', type: 'tel', required: true, validation: { pattern: '^[0-9]{10}$', minLength: 10, maxLength: 10 } }, - { id: 'city', label: 'City', type: 'text', required: true, readOnly: true, defaultValue: 'Chennai, India' }, - ] }, - { id: 'step_4_services', title: 'Services and pricing', fields: [ - { id: 'primary_service', label: 'Primary Service', type: 'text', required: true, placeholder: 'e.g., Wedding Photography' }, - { id: 'price_range', label: 'Price Range', type: 'select', required: true, options: ['Base rate under ₹1000/hr', '₹1000-₹3000/hr', 'Project-based pricing', 'Customizable pricing'].map((x) => ({ label: x, value: x })) }, - { id: 'availability', label: 'Availability', type: 'select', required: true, options: ['Weekdays', 'Weekends', 'All days'].map((x) => ({ label: x, value: x })) }, - ] }, - { id: 'step_5_portfolio', title: 'Portfolio and submission', fields: [ - { id: 'portfolio_images', label: 'Portfolio Images', type: 'file', required: true, multiple: true, maxFiles: 6, accept: 'image/*', maxSizeMB: 2, helperText: 'Upload up to 6 images, max 2MB each.' }, - { id: 'portfolio_url', label: 'Portfolio URL', type: 'url', placeholder: 'External portfolio link or Instagram' }, - { id: 'portfolio_note', label: 'Portfolio Note', type: 'textarea', placeholder: 'Tell us about your work' }, - ] }, - { id: 'step_6_verification', title: 'Identity Verification', fields: [ - { id: 'id_type', label: 'ID Type', type: 'select', required: true, options: ['Aadhaar Card', 'PAN Card', 'Driving License', 'Voter ID', 'Passport'].map((x) => ({ label: x, value: x })) }, - { id: 'id_number', label: 'ID Number', type: 'text', required: true, placeholder: 'Enter ID Number' }, - { id: 'id_document_upload', label: 'Upload ID (PDF only)', type: 'file', required: true, multiple: true, maxFiles: 2, accept: 'application/pdf', maxSizeMB: 2 }, - ] }, - ], - }, - { - schemaId: 'company_onboarding_v1', - roleKey: 'COMPANY', - version: 1, - steps: [ - { id: 'step_1_identity', title: 'Company identity', fields: [ - { id: 'company_name', label: 'Company Name', type: 'text', required: true }, - { id: 'legal_name', label: 'Legal Name', type: 'text', required: true }, - { id: 'industry', label: 'Industry', type: 'select', required: true, options: ['IT/Software', 'Marketing/Advertising', 'EdTech', 'Media/Entertainment', 'Health/Wellness', 'Food/Beverage', 'Other'].map((x) => ({ label: x, value: x })) }, - ] }, - { id: 'step_2_contact', title: 'Contact details', fields: [ - { id: 'contact_name', label: 'Contact Name', type: 'text', required: true }, - { id: 'contact_email', label: 'Contact Email', type: 'email', required: true }, - { id: 'contact_phone', label: 'Contact Phone', type: 'tel', required: true, validation: { pattern: '^[0-9]{10}$', minLength: 10, maxLength: 10 } }, - ] }, - { id: 'step_3_presence', title: 'Company presence', fields: [ - { id: 'website', label: 'Website', type: 'url' }, - { id: 'hq_city', label: 'HQ City', type: 'text', required: true, readOnly: true, defaultValue: 'Chennai, India' }, - { id: 'team_size', label: 'Team Size', type: 'select', required: true, options: ['1-10', '11-50', '51-200', '200+'].map((x) => ({ label: x, value: x })) }, - ] }, - { id: 'step_4_hiring', title: 'Hiring preferences', fields: [ - { id: 'hiring_for', label: 'Hiring For', type: 'text', required: true }, - { id: 'work_mode', label: 'Work Mode', type: 'select', required: true, options: ['Onsite (Work from office)', 'Remote (Work from home)', 'Hybrid'].map((x) => ({ label: x, value: x })) }, - { id: 'monthly_openings', label: 'Monthly Openings', type: 'number', required: true, validation: { min: 1 } }, - ] }, - { id: 'step_5_compliance', title: 'Verification and compliance', fields: [ - { id: 'registration_number', label: 'Registration Number', type: 'text', required: true }, - { id: 'official_email', label: 'Official Email', type: 'email', required: true }, - ] }, - { id: 'step_6_business_verification', title: 'Business Verification', fields: [ - { id: 'company_doc_type', label: 'Company Document Type', type: 'select', required: true, options: ['GST Certificate', 'Certificate of Incorporation', 'MSME/Udyam Registration', 'Company PAN Card'].map((x) => ({ label: x, value: x })) }, - { id: 'company_doc_upload', label: 'Company Document Upload (PDF only)', type: 'file', required: true, accept: 'application/pdf', maxFiles: 1, maxSizeMB: 2 }, - ] }, - ], - }, - { - schemaId: 'jobseeker_onboarding_v1', - roleKey: 'JOBSEEKER', - version: 1, - steps: [ - { id: 'step_1_basic', title: 'Basic profile', fields: [ - { id: 'full_name', label: 'Full Name', type: 'text', required: true }, - { id: 'city', label: 'City', type: 'text', required: true, readOnly: true, defaultValue: 'Chennai, India' }, - { id: 'skills', label: 'Skills', type: 'text', required: true }, - ] }, - { id: 'step_2_preferences', title: 'Job preferences', fields: [ - { id: 'preferred_role', label: 'Preferred Role', type: 'text', required: true }, - { id: 'expected_salary', label: 'Expected Salary (LPA)', type: 'number', required: true, validation: { min: 0 } }, - ] }, - { id: 'step_3_experience', title: 'Experience details', fields: [ - { id: 'experience_years', label: 'Experience Years', type: 'number', required: true, validation: { min: 0 } }, - { id: 'latest_company', label: 'Latest Company', type: 'text' }, - { id: 'notice_period', label: 'Notice Period', type: 'select', required: true, options: ['Immediate', '15 Days', '30 Days', '60 Days', '90 Days'].map((x) => ({ label: x, value: x })) }, - ] }, - { id: 'step_4_docs', title: 'Documents and links', fields: [ - { id: 'resume_url', label: 'Resume URL', type: 'url', required: true }, - { id: 'linkedin_url', label: 'LinkedIn URL', type: 'url' }, - ] }, - { id: 'step_5_review', title: 'Final review', fields: [{ id: 'about_me', label: 'About Me', type: 'textarea', required: true }] }, - { id: 'step_6_verification', title: 'Identity Verification', fields: [ - { id: 'id_type', label: 'ID Type', type: 'select', required: true, options: ['Aadhaar Card', 'PAN Card', 'Driving License', 'Voter ID', 'Passport'].map((x) => ({ label: x, value: x })) }, - { id: 'id_number', label: 'ID Number', type: 'text', required: true }, - { id: 'id_document_upload', label: 'Upload ID (PDF only)', type: 'file', required: true, multiple: true, maxFiles: 2, accept: 'application/pdf', maxSizeMB: 2 }, - ] }, - ], - }, -]; +// No hardcoded fallbacks — all onboarding schemas are loaded from the Rust backend runtime config. +export const SEEDED_ONBOARDING_SCHEMAS: RuntimeOnboardingConfig[] = []; diff --git a/src/lib/server/gateway.ts b/src/lib/server/gateway.ts index de6af14..de6e32c 100644 --- a/src/lib/server/gateway.ts +++ b/src/lib/server/gateway.ts @@ -29,3 +29,13 @@ export function withAuthHeaders(request: Request, extra?: Record if (token) headers.Authorization = `Bearer ${token}`; return headers; } + +// Alias for forwardAuth (used in some API endpoints) +export const forwardAuth = withAuthHeaders; + +// Forward cookies from request +export function forwardCookies(request: Request): Record { + const cookie = request.headers.get('cookie'); + if (!cookie) return {}; + return { cookie }; +} diff --git a/src/routes/about.tsx b/src/routes/about.tsx index bfda4a8..dc09978 100644 --- a/src/routes/about.tsx +++ b/src/routes/about.tsx @@ -38,13 +38,14 @@ export default function AboutPage() { const [activeChapter, setActiveChapter] = createSignal(0); const [scrollY, setScrollY] = createSignal(0); - const [heroVisible, setHeroVisible] = createSignal(false); - const [problemVisible, setProblemVisible] = createSignal(false); - const [builtVisible, setBuiltVisible] = createSignal(false); - const [trustVisible, setTrustVisible] = createSignal(false); - const [principlesVisible, setPrinciplesVisible] = createSignal(false); - const [timelineVisible, setTimelineVisible] = createSignal(false); - const [closingVisible, setClosingVisible] = createSignal(false); + // Initialize visible for SSR - all content renders on server, client hydration just updates visibility for animations + const [heroVisible, setHeroVisible] = createSignal(true); + const [problemVisible, setProblemVisible] = createSignal(true); + const [builtVisible, setBuiltVisible] = createSignal(true); + const [trustVisible, setTrustVisible] = createSignal(true); + const [principlesVisible, setPrinciplesVisible] = createSignal(true); + const [timelineVisible, setTimelineVisible] = createSignal(true); + const [closingVisible, setClosingVisible] = createSignal(true); const [problemProgress, setProblemProgress] = createSignal(0); const [trustProgress, setTrustProgress] = createSignal(0); @@ -176,6 +177,35 @@ export default function AboutPage() { const stateTwoUnderline = createMemo(() => progressBetween(effectivePrincipleProgress(), 0.26, 0.46)); const stateThreeLine = createMemo(() => progressBetween(effectivePrincipleProgress(), 0.52, 0.74)); + // Calculate brightness for each narrative item as it passes through center + const getNarrativeItemOpacity = (stageIdx: number) => { + const p = effectivePrincipleProgress(); + const stageStart = stageIdx * 0.25; + const stageEnd = (stageIdx + 1) * 0.25; + + // Fade in/out boundaries (slight buffer before/after stage) + const fadeInStart = Math.max(0, stageStart - 0.05); + const fadeOutEnd = Math.min(1, stageEnd + 0.05); + + // Outside the visible range = dim + if (p < fadeInStart || p > fadeOutEnd) { + return 0.35; + } + + // Fade in from dimmed to bright + if (p < stageStart) { + return 0.35 + (1 - 0.35) * ((p - fadeInStart) / (stageStart - fadeInStart)); + } + + // In the center stage = fully bright + if (p <= stageEnd) { + return 1; + } + + // Fade out from bright to dimmed + return 1 - ((p - stageEnd) / (fadeOutEnd - stageEnd)) * (1 - 0.35); + }; + return (
diff --git a/src/routes/auth/verification/index.tsx b/src/routes/auth/verification/index.tsx index 9735d2a..1eeb8f0 100644 --- a/src/routes/auth/verification/index.tsx +++ b/src/routes/auth/verification/index.tsx @@ -59,7 +59,7 @@ export default function VerificationPage() { }; const resolvedIntent = createMemo(() => intent() || readCanonicalIntent()); - const registerTarget = createMemo(() => intentToOnboardingPath(resolvedIntent())); + const registerTarget = createMemo(() => (resolvedIntent() ? intentToOnboardingPath(resolvedIntent()) : '/dashboard')); const [otp, setOtp] = createSignal(Array.from({ length: OTP_LENGTH }, () => '')); const [timer, setTimer] = createSignal(30); @@ -171,10 +171,10 @@ export default function VerificationPage() { setInfo(''); try { - const response = await fetch('/api/users/auth/login', { + const response = await fetch('/api/users/auth/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ email: email(), password: '-' }), // We will bypass verification for now, just auto login if you hit "Verify" + body: JSON.stringify({ email: email(), code, flow: flow() }), }); const payload = await response.json().catch(() => ({})); if (!response.ok || !payload?.success) { diff --git a/src/routes/choose-role.tsx b/src/routes/choose-role.tsx index 16aa9b4..bfd0c6c 100644 --- a/src/routes/choose-role.tsx +++ b/src/routes/choose-role.tsx @@ -1,6 +1,6 @@ import { createSignal, Show, For } from 'solid-js'; import { useNavigate } from '@solidjs/router'; -import { authState, switchRole } from '~/lib/auth'; +import { authState } from '~/lib/auth'; const ALL_ROLES = [ { key: 'COMPANY', label: 'Company', icon: '🏢', desc: 'Post jobs and hire talent' }, @@ -38,7 +38,7 @@ export default function ChooseRole() { }); if (res.ok) { - navigate('/onboarding', { replace: true }); + navigate(`/onboarding?roleKey=${encodeURIComponent(roleKey)}`, { replace: true }); } else { const body = await res.json(); setError(body.error ?? 'Failed to register role'); diff --git a/src/routes/dashboard/explore.tsx b/src/routes/dashboard/explore.tsx new file mode 100644 index 0000000..2e0c7d9 --- /dev/null +++ b/src/routes/dashboard/explore.tsx @@ -0,0 +1,15 @@ +import { A } from '@solidjs/router'; + +export default function DashboardExplorePage() { + return ( +
+

Explore Nxtgauge

+

+ Add an additional role to unlock more modules in your dashboard. +

+

+ Go to Choose Role to register another role. +

+
+ ); +} diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 1b9d2b7..32576ae 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -40,6 +40,16 @@ export default function DashboardIndex() { {/* KPI cards — rendered based on role via runtimeConfig */}
+ +
+
🧭
+
+
Get Started
+
Choose a role to unlock role-based onboarding and modules
+
+ Explore Nxtgauge → +
+ diff --git a/src/routes/dashboard/leads/accepted.tsx b/src/routes/dashboard/leads/accepted.tsx new file mode 100644 index 0000000..ba453a0 --- /dev/null +++ b/src/routes/dashboard/leads/accepted.tsx @@ -0,0 +1,10 @@ +export default function DashboardAcceptedLeadsPage() { + return ( +
+

Accepted Leads

+

+ Accepted lead details and contact visibility are being finalized for the shared professional flow. +

+
+ ); +} diff --git a/src/routes/dashboard/packages.tsx b/src/routes/dashboard/packages.tsx new file mode 100644 index 0000000..bc99a71 --- /dev/null +++ b/src/routes/dashboard/packages.tsx @@ -0,0 +1,15 @@ +import { A } from '@solidjs/router'; + +export default function DashboardPackagesPage() { + return ( +
+

Packages

+

+ Package purchase flow is being finalized in the Rust payments module. +

+

+ You can review your current wallet in Wallet. +

+
+ ); +} diff --git a/src/routes/dashboard/profile.tsx b/src/routes/dashboard/profile.tsx new file mode 100644 index 0000000..f8472b0 --- /dev/null +++ b/src/routes/dashboard/profile.tsx @@ -0,0 +1,22 @@ +import { Show } from 'solid-js'; +import { authState } from '~/lib/auth'; + +export default function DashboardProfilePage() { + const rc = () => authState().runtime_config; + + return ( +
+

Profile

+

Your active account details for this role.

+ + Loading profile...

}> +
+
Name: {rc()?.user?.full_name || '—'}
+
Email: {rc()?.user?.email || '—'}
+
Active Role: {rc()?.user?.active_role || rc()?.role || '—'}
+
Roles: {(rc()?.user?.roles || []).join(', ') || '—'}
+
+ +
+ ); +} diff --git a/src/routes/dashboard/requests.tsx b/src/routes/dashboard/requests.tsx new file mode 100644 index 0000000..9168f75 --- /dev/null +++ b/src/routes/dashboard/requests.tsx @@ -0,0 +1,10 @@ +export default function DashboardRequestsPage() { + return ( +
+

My Lead Requests

+

+ Role-specific lead request listing is enabled on the backend and is being connected to this page. +

+
+ ); +} diff --git a/src/routes/onboarding.tsx b/src/routes/onboarding.tsx index 6379ed6..34fbe91 100644 --- a/src/routes/onboarding.tsx +++ b/src/routes/onboarding.tsx @@ -1,5 +1,6 @@ import { createMemo, createSignal, For, onMount, Show } from 'solid-js'; import { useSearchParams } from '@solidjs/router'; +import { authState } from '~/lib/auth'; import type { RuntimeOnboardingConfig, RuntimeOnboardingField, RuntimeVisibilityCondition, UploadedFileMeta } from '~/lib/runtime/types'; function evaluateVisibility(conditions: RuntimeVisibilityCondition[] | undefined, values: Record) { @@ -146,30 +147,35 @@ export default function OnboardingPage() { const [profileStatus, setProfileStatus] = createSignal(''); const requestedRoleKey = createMemo(() => normalizeRoleKey(Array.isArray(searchParams.roleKey) ? searchParams.roleKey[0] : searchParams.roleKey)); + const activeRoleKey = createMemo(() => + normalizeRoleKey(authState().runtime_config?.user?.active_role || authState().runtime_config?.role), + ); + const effectiveRoleKey = createMemo(() => requestedRoleKey() || activeRoleKey()); const requestedProfession = createMemo(() => String((Array.isArray(searchParams.profession) ? searchParams.profession[0] : searchParams.profession) || '').trim()); const requestedSchemaId = createMemo(() => { const fromQuery = String(searchParams.schemaId || '').trim(); if (fromQuery) return fromQuery; - return schemaIdFromInput(requestedRoleKey(), requestedProfession()); + return schemaIdFromInput(effectiveRoleKey(), requestedProfession()); }); onMount(async () => { try { setLoading(true); const schemaId = requestedSchemaId(); - if (!schemaId) { - setStatusMessage('Missing schemaId/roleKey. Unable to load runtime onboarding schema.'); + const roleKey = effectiveRoleKey(); + if (!schemaId || !roleKey) { + setStatusMessage('Missing role information. Please select a role first.'); return; } - const schemaResponse = await fetch(`/api/runtime/onboarding/schema?${new URLSearchParams({ schemaId, roleKey: requestedRoleKey() }).toString()}`); + const schemaResponse = await fetch(`/api/runtime/onboarding/schema?${new URLSearchParams({ schemaId, roleKey }).toString()}`); const schemaPayload = await schemaResponse.json().catch(() => ({})); if (!schemaResponse.ok || !schemaPayload?.success) { setStatusMessage(schemaPayload?.error || 'Unable to load onboarding schema from backend.'); return; } - const normalized = normalizeSchemaPayload(schemaPayload, schemaId, requestedRoleKey() || 'CUSTOMER'); + const normalized = normalizeSchemaPayload(schemaPayload, schemaId, roleKey || 'CUSTOMER'); if (!normalized) { setStatusMessage('Schema loaded but steps are missing.'); return; diff --git a/src/routes/users/choose-role/index.tsx b/src/routes/users/choose-role/index.tsx new file mode 100644 index 0000000..16109a0 --- /dev/null +++ b/src/routes/users/choose-role/index.tsx @@ -0,0 +1,133 @@ +import { useNavigate } from '@solidjs/router'; +import { createSignal, For } from 'solid-js'; +import PublicHeader from '~/components/PublicHeader'; + +type RoleOption = { + id: string; + title: string; + description: string; + icon: string; + intent: string; + isSubtype?: boolean; +}; + +const MAIN_ROLES: RoleOption[] = [ + { + id: 'company', + title: 'Company', + description: 'Post jobs and hire verified professionals', + icon: '🏢', + intent: 'company', + }, + { + id: 'job_seeker', + title: 'Job Seeker', + description: 'Browse and apply for job opportunities', + icon: '💼', + intent: 'job_seeker', + }, + { + id: 'customer', + title: 'Customer', + description: 'Find verified professionals for your needs', + icon: '🛍️', + intent: 'customer', + }, +]; + +const PROFESSIONAL_SUBTYPES: RoleOption[] = [ + { id: 'photographer', title: 'Photographer', description: 'Photography & Visual Content', icon: '📸', intent: 'professional', isSubtype: true }, + { id: 'makeup_artist', title: 'Makeup Artist', description: 'Makeup & Beauty Services', icon: '💄', intent: 'professional', isSubtype: true }, + { id: 'tutor', title: 'Tutor', description: 'Online & Offline Tutoring', icon: '📚', intent: 'professional', isSubtype: true }, + { id: 'developer', title: 'Developer', description: 'Software Development & Coding', icon: '💻', intent: 'professional', isSubtype: true }, + { id: 'video_editor', title: 'Video Editor', description: 'Video Editing & Production', icon: '🎬', intent: 'professional', isSubtype: true }, + { id: 'graphic_designer', title: 'Graphic Designer', description: 'Design & Branding Services', icon: '🎨', intent: 'professional', isSubtype: true }, + { id: 'social_media_manager', title: 'Social Media Manager', description: 'Social Media & Content Management', icon: '📱', intent: 'professional', isSubtype: true }, + { id: 'fitness_trainer', title: 'Fitness Trainer', description: 'Fitness & Personal Training', icon: '💪', intent: 'professional', isSubtype: true }, + { id: 'catering_services', title: 'Catering Services', description: 'Food & Catering Services', icon: '🍽️', intent: 'professional', isSubtype: true }, +]; + +export default function ChooseRolePage() { + const navigate = useNavigate(); + const [selectedRole, setSelectedRole] = createSignal(null); + + const handleSelectRole = (role: RoleOption) => { + setSelectedRole(role); + + // Navigate to appropriate onboarding page + if (role.isSubtype) { + // Professional roles with subtype + navigate(`/users/onboarding/professional?profession=${role.id}&intent=${role.intent}`); + } else { + // Main roles + navigate(`/users/onboarding/${role.id}?intent=${role.intent}`); + } + }; + + return ( +
+
+ ); +} diff --git a/src/routes/users/onboarding/professional.tsx b/src/routes/users/onboarding/professional.tsx index e635372..cd522cc 100644 --- a/src/routes/users/onboarding/professional.tsx +++ b/src/routes/users/onboarding/professional.tsx @@ -16,8 +16,9 @@ export default function ProfessionalOnboardingRoute() { onMount(() => { const profession = normalizeProfession(search.profession || search.role || null); const schemaId = profession ? `${profession}_onboarding_v1` : 'professional_onboarding_v1'; + const roleKey = profession ? profession.toUpperCase() : 'PROFESSIONAL'; const params = new URLSearchParams({ - roleKey: 'PROFESSIONAL', + roleKey, schemaId, }); if (profession) params.set('profession', profession);