Show runtime verification fields inline

src/components/dashboard/VerificationStatusPage.tsx

@@ -7,6 +7,8 @@
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import { ShieldCheck, FileText, Activity } from 'lucide-solid';
 import { CARD, BTN_ORANGE, BTN_GHOST } from '~/components/DashboardShell';
+import ProfilePage from '~/components/dashboard/ProfilePage';
+import PortfolioPage from '~/components/dashboard/PortfolioPage';
 import { getDocFields } from '~/lib/profile-fields-config';
 import { presignDocumentUrl } from '~/lib/api';
 
@@ -136,6 +138,8 @@ interface Props {
   roleKey: string;
   onNavigate?: (sidebar: string) => void;
   onVerificationStatusChange?: (status: string) => void;
+  runtimeFields?: string[];
+  runtimeTabs?: string[];
 }
 
 interface VerificationDocument {
@@ -167,6 +171,7 @@ function docUrl(value: any): string | null {
 
 export default function VerificationStatusPage(props: Props) {
   const [activeTab, setActiveTab] = createSignal<TabKey>('approval_status');
+  const [inlineSection, setInlineSection] = createSignal<'profile' | 'portfolio'>('profile');
   const [status, setStatus] = createSignal('NOT_SUBMITTED');
   const [referenceNumber, setReferenceNumber] = createSignal<string | null>(null);
   const [docRequest, setDocRequest] = createSignal<string | null>(null);
@@ -206,6 +211,12 @@ export default function VerificationStatusPage(props: Props) {
   const currentStep = () => stepIndex(status());
   const docFields = createMemo(() => getDocFields(props.roleKey));
   const canResubmit = () => ['DOCUMENTS_REQUESTED', 'REVISION_REQUESTED', 'REJECTED'].includes(status());
+  const isApproved = () => ['APPROVED', 'COMPLETED'].includes(status());
+  const showInlineEditors = () => !isApproved();
+  const hasPortfolio = () => {
+    const role = String(props.roleKey || '').toUpperCase();
+    return role === 'JOB_SEEKER' || role !== 'COMPANY' && role !== 'CUSTOMER';
+  };
 
   const handleResubmit = async () => {
     setResubmitting(true);
@@ -408,15 +419,15 @@ export default function VerificationStatusPage(props: Props) {
           {/* Actions */}
           <div style={{ display: 'flex', gap: '10px', 'flex-wrap': 'wrap' }}>
             <Show when={status() === 'NOT_SUBMITTED'}>
-              <button type="button" onClick={() => props.onNavigate?.('My Profile')} style={BTN_ORANGE}>
+              <button type="button" onClick={() => setInlineSection('profile')} style={BTN_ORANGE}>
                 Fill My Profile
               </button>
-              <button type="button" onClick={() => props.onNavigate?.('My Portfolio')} style={BTN_GHOST}>
+              <button type="button" onClick={() => setInlineSection('portfolio')} style={BTN_GHOST}>
                 Fill My Portfolio
               </button>
             </Show>
             <Show when={canResubmit()}>
-              <button type="button" onClick={() => props.onNavigate?.('My Profile')} style={BTN_GHOST}>
+              <button type="button" onClick={() => setInlineSection('profile')} style={BTN_GHOST}>
                 Update My Profile
               </button>
               <button type="button" onClick={handleResubmit} disabled={resubmitting()} style={{ ...BTN_ORANGE, opacity: resubmitting() ? '0.7' : '1' }}>
@@ -442,6 +453,56 @@ export default function VerificationStatusPage(props: Props) {
               </p>
             </div>
           </Show>
+
+          <Show when={showInlineEditors()}>
+            <div style={{ ...CARD, 'margin-top': '16px', padding: '16px' }}>
+              <div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center', gap: '12px', 'flex-wrap': 'wrap', 'margin-bottom': '14px' }}>
+                <div>
+                  <p style={{ margin: '0', 'font-size': '16px', 'font-weight': '800', color: '#111827' }}>
+                    Complete Verification Details Here
+                  </p>
+                  <p style={{ margin: '6px 0 0', 'font-size': '13px', color: '#6B7280' }}>
+                    Fill the required fields directly on this page, then submit for verification.
+                  </p>
+                </div>
+                <div style={{ display: 'flex', gap: '8px', 'flex-wrap': 'wrap' }}>
+                  <button
+                    type="button"
+                    onClick={() => setInlineSection('profile')}
+                    style={inlineSection() === 'profile' ? BTN_ORANGE : BTN_GHOST}
+                  >
+                    Profile Fields
+                  </button>
+                  <Show when={hasPortfolio()}>
+                    <button
+                      type="button"
+                      onClick={() => setInlineSection('portfolio')}
+                      style={inlineSection() === 'portfolio' ? BTN_ORANGE : BTN_GHOST}
+                    >
+                      Portfolio Fields
+                    </button>
+                  </Show>
+                </div>
+              </div>
+
+              <Show when={inlineSection() === 'profile'}>
+                <ProfilePage
+                  roleKey={props.roleKey}
+                  runtimeFields={props.runtimeFields || []}
+                  onVerificationStatusChange={props.onVerificationStatusChange}
+                  onNavigate={props.onNavigate}
+                />
+              </Show>
+
+              <Show when={inlineSection() === 'portfolio' && hasPortfolio()}>
+                <PortfolioPage
+                  roleKey={props.roleKey}
+                  runtimeTabs={props.runtimeTabs || []}
+                  runtimeFields={props.runtimeFields || []}
+                />
+              </Show>
+            </div>
+          </Show>
         </Show>
 
         {/* ── Documents Tab ───────────────────────────────────────────── */}

src/routes/dashboard.tsx

@@ -884,6 +884,8 @@ export default function RuntimeDashboardPage() {
                     roleKey={role()}
                     onNavigate={setActiveSidebar}
                     onVerificationStatusChange={(status) => setVerificationStatusOverride(String(status || "").toUpperCase())}
+                    runtimeFields={bundle()?.fields || []}
+                    runtimeTabs={bundle()?.tabs || []}
                   />
                 </Match>
                 <Match when={activeSidebarKey() === "settings"}>