nxtgauge-frontend-solid/src/routes/dashboard/index.tsx

import { Show, createResource, For } from 'solid-js';
import { A } from '@solidjs/router';
import { authState, getAuthHeader } from '~/lib/auth';

const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';

export default function DashboardIndex() {
  const rc = () => authState().runtime_config;
  const role = () => rc()?.user?.active_role ?? '';

  return (
    <div class="dashboard-home">
      <div class="page-header">
        <h1>Welcome back, {rc()?.user?.full_name ?? 'User'}!</h1>
        <p class="page-subtitle">Here's what's happening in your dashboard.</p>
      </div>

      {/* Pending verification banner */}
      <Show when={rc()?.onboarding_status === 'PENDING_REVIEW'}>
        <div class="status-banner status-banner--warning">
          <span>⏳</span>
          <div>
            <strong>Verification Pending</strong>
            <p>Your documents are being reviewed. This usually takes 2–3 business days.</p>
          </div>
          <A href="/pending" class="btn btn-outline btn-sm">Check Status</A>
        </div>
      </Show>

      <Show when={rc()?.onboarding_status === 'DOCUMENTS_REQUESTED'}>
        <div class="status-banner status-banner--danger">
          <span>📄</span>
          <div>
            <strong>Additional Documents Required</strong>
            <p>Admin has requested more information. Please check your pending status.</p>
          </div>
          <A href="/pending" class="btn btn-primary btn-sm">Upload Documents</A>
        </div>
      </Show>

      {/* KPI cards — rendered based on role via runtimeConfig */}
      <div class="kpi-grid">
        <Show when={role() === 'COMPANY'}>
          <CompanyKPIs />
        </Show>
        <Show when={role() === 'JOB_SEEKER'}>
          <JobSeekerKPIs />
        </Show>
        <Show when={role() === 'CUSTOMER'}>
          <CustomerKPIs />
        </Show>
        <Show when={
          role() !== 'COMPANY' && role() !== 'JOB_SEEKER' && role() !== 'CUSTOMER' && role() !== 'USER'
        }>
          <ProfessionalKPIs />
        </Show>
      </div>
    </div>
  );
}

function CompanyKPIs() {
  return (
    <>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--blue">💼</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Active Jobs</div>
        </div>
        <A href="/dashboard/jobs" class="kpi-link">View Jobs →</A>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--green">👥</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Total Applications</div>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--orange">⏳</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Pending Review</div>
        </div>
      </div>
    </>
  );
}

function JobSeekerKPIs() {
  return (
    <>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--blue">📨</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Applied</div>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--green">⭐</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Shortlisted</div>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--orange">🤝</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Interview</div>
        </div>
      </div>
    </>
  );
}

function CustomerKPIs() {
  return (
    <>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--blue">📋</div>
        <div class="kpi-content">
          <div class="kpi-value">—/2</div>
          <div class="kpi-label">Active Requirements</div>
        </div>
        <A href="/dashboard/requirements" class="kpi-link">View →</A>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--green">✅</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Accepted Professionals</div>
        </div>
      </div>
    </>
  );
}

function ProfessionalKPIs() {
  return (
    <>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--orange">🪙</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Tracecoins</div>
        </div>
        <A href="/dashboard/wallet" class="kpi-link">View Wallet →</A>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--blue">📩</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Active Requests</div>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon kpi-icon--green">🤝</div>
        <div class="kpi-content">
          <div class="kpi-value">—</div>
          <div class="kpi-label">Accepted Leads</div>
        </div>
      </div>
    </>
  );
}