@mmapp/react-compiler 0.1.0-alpha.1

package/examples/uber-app/tests/payment.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { renderWorkflow, act, waitFor } from '@mindmatrix/react/testing';
+import { PaymentProcessingWorkflow } from '../components/PaymentProcessingWorkflow';
+
+describe('Payment Processing', () => {
+  let workflow: ReturnType<typeof renderWorkflow>;
+
+  beforeEach(() => {
+    workflow = renderWorkflow(PaymentProcessingWorkflow, {
+      initialFields: {
+        rideId: 'ride-100',
+        riderId: 'rider-001',
+        driverId: 'driver-042',
+        amount: 25.00,
+        paymentMethod: 'card_visa_4242',
+        currency: 'USD',
+      },
+    });
+  });
+
+  it('starts in pending state', () => {
+    expect(workflow.currentState()).toBe('pending');
+  });
+
+  it('authorizes payment and captures on ride completion', async () => {
+    // Authorize hold
+    await act(() => workflow.transition('authorize', { holdId: 'hold-abc' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('authorized'));
+    expect(workflow.field('holdId')).toBe('hold-abc');
+
+    // Capture on completion (final amount may differ from hold)
+    await act(() => workflow.transition('capture', {
+      finalAmount: 27.50,
+      tip: 5.00,
+      surgeMultiplier: 1.0,
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('captured'));
+    expect(workflow.field('finalAmount')).toBe(27.50);
+    expect(workflow.field('tip')).toBe(5.00);
+  });
+
+  it('processes full refund on cancellation before ride start', async () => {
+    await act(() => workflow.transition('authorize', { holdId: 'hold-abc' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('authorized'));
+
+    await act(() => workflow.transition('refund', {
+      refundAmount: 25.00,
+      refundType: 'full',
+      reason: 'ride_cancelled_before_pickup',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('refunded'));
+    expect(workflow.field('refundAmount')).toBe(25.00);
+    expect(workflow.field('refundType')).toBe('full');
+  });
+
+  it('processes partial refund for poor service', async () => {
+    await act(() => workflow.transition('authorize', { holdId: 'hold-abc' }));
+    await act(() => workflow.transition('capture', { finalAmount: 25.00, tip: 0, surgeMultiplier: 1.0 }));
+    await waitFor(() => expect(workflow.currentState()).toBe('captured'));
+
+    await act(() => workflow.transition('refund', {
+      refundAmount: 10.00,
+      refundType: 'partial',
+      reason: 'driver_took_wrong_route',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('partially_refunded'));
+    expect(workflow.field('refundAmount')).toBe(10.00);
+    expect(workflow.field('refundType')).toBe('partial');
+  });
+
+  it('voids authorization when ride is cancelled before capture', async () => {
+    await act(() => workflow.transition('authorize', { holdId: 'hold-abc' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('authorized'));
+
+    await act(() => workflow.transition('void_authorization', { reason: 'no_driver_found' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('voided'));
+    expect(workflow.field('holdId')).toBeDefined();
+  });
+
+  it('handles dispute flow: captured → disputed → resolved', async () => {
+    await act(() => workflow.transition('authorize', { holdId: 'hold-abc' }));
+    await act(() => workflow.transition('capture', { finalAmount: 25.00, tip: 0, surgeMultiplier: 1.5 }));
+    await waitFor(() => expect(workflow.currentState()).toBe('captured'));
+
+    // Rider opens dispute
+    await act(() => workflow.transition('open_dispute', {
+      disputeReason: 'incorrect_fare',
+      description: 'Surge pricing was applied incorrectly',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('disputed'));
+    expect(workflow.field('disputeReason')).toBe('incorrect_fare');
+
+    // Admin resolves dispute with partial refund
+    await act(() => workflow.transition('resolve_dispute', {
+      resolution: 'partial_refund',
+      adjustedAmount: 18.00,
+      refundAmount: 7.00,
+      adminNote: 'Surge was incorrectly applied to this zone',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('dispute_resolved'));
+    expect(workflow.field('adjustedAmount')).toBe(18.00);
+    expect(workflow.field('refundAmount')).toBe(7.00);
+  });
+
+  it('handles dispute resolved with no action', async () => {
+    await act(() => workflow.transition('authorize', { holdId: 'hold-abc' }));
+    await act(() => workflow.transition('capture', { finalAmount: 25.00, tip: 0, surgeMultiplier: 1.0 }));
+    await act(() => workflow.transition('open_dispute', {
+      disputeReason: 'overcharged',
+      description: 'I think the fare was too high',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('disputed'));
+
+    await act(() => workflow.transition('resolve_dispute', {
+      resolution: 'no_action',
+      adjustedAmount: 25.00,
+      refundAmount: 0,
+      adminNote: 'Fare calculation verified as correct',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('dispute_resolved'));
+    expect(workflow.field('refundAmount')).toBe(0);
+  });
+
+  it('rejects capture without prior authorization', async () => {
+    await expect(
+      act(() => workflow.transition('capture', { finalAmount: 25.00, tip: 0, surgeMultiplier: 1.0 }))
+    ).rejects.toThrow(/invalid transition/i);
+  });
+});

package/examples/uber-app/tests/ride-flow.test.tsx

@@ -0,0 +1,123 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { renderWorkflow, act, waitFor } from '@mindmatrix/react/testing';
+import { RideRequestWorkflow } from '../components/RideRequestWorkflow';
+
+describe('Ride Flow — Full Lifecycle', () => {
+  let workflow: ReturnType<typeof renderWorkflow>;
+
+  beforeEach(() => {
+    workflow = renderWorkflow(RideRequestWorkflow, {
+      initialFields: {
+        pickup: { lat: 40.7128, lng: -74.006, address: '350 5th Ave, New York' },
+        dropoff: { lat: 40.758, lng: -73.9855, address: 'Times Square, New York' },
+        rideType: 'standard',
+        riderId: 'rider-001',
+      },
+    });
+  });
+
+  it('starts in the requesting state', () => {
+    expect(workflow.currentState()).toBe('requesting');
+  });
+
+  it('completes full ride lifecycle: request → match → en_route → arrived → in_progress → completed → rated', async () => {
+    // Request ride
+    await act(() => workflow.transition('request_ride'));
+    await waitFor(() => expect(workflow.currentState()).toBe('matching'));
+
+    // Match driver
+    await act(() => workflow.transition('match_driver', {
+      driverId: 'driver-042',
+      vehiclePlate: 'ABC-1234',
+      estimatedArrival: 5,
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('driver_en_route'));
+    expect(workflow.field('driverId')).toBe('driver-042');
+
+    // Driver arrives at pickup
+    await act(() => workflow.transition('driver_arrived'));
+    await waitFor(() => expect(workflow.currentState()).toBe('driver_arrived'));
+
+    // Start ride
+    await act(() => workflow.transition('start_ride'));
+    await waitFor(() => expect(workflow.currentState()).toBe('in_progress'));
+    expect(workflow.field('rideStartedAt')).toBeDefined();
+
+    // Complete ride
+    await act(() => workflow.transition('complete_ride', {
+      distanceMiles: 3.2,
+      durationMinutes: 14,
+      fare: 18.50,
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('completed'));
+    expect(workflow.field('fare')).toBe(18.50);
+
+    // Rate the ride
+    await act(() => workflow.transition('submit_rating', {
+      rating: 5,
+      comment: 'Great ride!',
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('rated'));
+    expect(workflow.field('rating')).toBe(5);
+  });
+
+  it('handles rider cancellation before driver match', async () => {
+    await act(() => workflow.transition('request_ride'));
+    await waitFor(() => expect(workflow.currentState()).toBe('matching'));
+
+    await act(() => workflow.transition('cancel_ride', { reason: 'changed_mind' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('cancelled'));
+    expect(workflow.field('cancellationReason')).toBe('changed_mind');
+    expect(workflow.field('cancellationFee')).toBe(0);
+  });
+
+  it('handles rider cancellation after driver match with fee', async () => {
+    await act(() => workflow.transition('request_ride'));
+    await waitFor(() => expect(workflow.currentState()).toBe('matching'));
+
+    await act(() => workflow.transition('match_driver', {
+      driverId: 'driver-042',
+      vehiclePlate: 'ABC-1234',
+      estimatedArrival: 5,
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('driver_en_route'));
+
+    await act(() => workflow.transition('cancel_ride', { reason: 'too_long' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('cancelled'));
+    expect(workflow.field('cancellationFee')).toBeGreaterThan(0);
+  });
+
+  it('handles driver cancellation and re-matching', async () => {
+    await act(() => workflow.transition('request_ride'));
+    await waitFor(() => expect(workflow.currentState()).toBe('matching'));
+
+    await act(() => workflow.transition('match_driver', {
+      driverId: 'driver-042',
+      vehiclePlate: 'ABC-1234',
+      estimatedArrival: 5,
+    }));
+    await waitFor(() => expect(workflow.currentState()).toBe('driver_en_route'));
+
+    // Driver cancels — goes back to matching
+    await act(() => workflow.transition('driver_cancel', { reason: 'emergency' }));
+    await waitFor(() => expect(workflow.currentState()).toBe('matching'));
+    expect(workflow.field('driverId')).toBeNull();
+  });
+
+  it('rejects invalid transitions', async () => {
+    // Cannot start ride from requesting state
+    await expect(
+      act(() => workflow.transition('start_ride'))
+    ).rejects.toThrow(/invalid transition/i);
+  });
+
+  it('tracks ride duration when in progress', async () => {
+    await act(() => workflow.transition('request_ride'));
+    await act(() => workflow.transition('match_driver', { driverId: 'd1', vehiclePlate: 'X', estimatedArrival: 3 }));
+    await act(() => workflow.transition('driver_arrived'));
+    await act(() => workflow.transition('start_ride'));
+
+    await waitFor(() => expect(workflow.currentState()).toBe('in_progress'));
+    expect(workflow.field('rideStartedAt')).toBeDefined();
+  });
+});

package/examples/uber-app/workflows/dispute-resolution.workflow.tsx

@@ -0,0 +1,205 @@
+import {
+  useState,
+  useOnEnter,
+  useOnExit,
+  useTransition,
+  useOnEvent,
+  useOnChange,
+} from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading } from '@mindmatrix/react';
+import { Payment } from '../models/payment.model';
+import { Rating } from '../models/rating.model';
+import { processRefund } from '../actions/payments.server';
+import { notifyCancellation } from '../actions/notifications.server';
+
+/**
+ * @workflow dispute-resolution
+ * @model Payment
+ * @trigger dispute.opened
+ */
+export default function DisputeResolutionWorkflow() {
+  const [dispute, setDispute] = useState('dispute');
+  const [evidence, setEvidence] = useState<string[]>('evidence');
+  const [resolution, setResolution] = useState('resolution');
+  const [escalationLevel, setEscalationLevel] = useState<number>('escalationLevel');
+
+  // --- State: opened ---
+  useOnEnter('opened', async (ctx) => {
+    setEscalationLevel(0);
+    ctx.env.emit('dispute:opened', {
+      disputeId: ctx.instance.id,
+      rideId: ctx.instance.fields.rideId,
+      reason: ctx.instance.fields.reason,
+    });
+    return { openedAt: new Date().toISOString() };
+  });
+
+  useTransition('opened', 'evidence_collection', { guard: () => true });
+
+  // --- State: evidence_collection ---
+  useOnEnter('evidence_collection', async (ctx) => {
+    const rideData = await ctx.env.query('ride', {
+      filter: { id: ctx.instance.fields.rideId },
+      limit: 1,
+    });
+    const ratings = await ctx.env.query('rating', {
+      filter: { rideId: ctx.instance.fields.rideId },
+      limit: 10,
+    });
+    return { rideDetails: rideData[0], relatedRatings: ratings };
+  });
+
+  useTransition('evidence_collection', 'under_review', {
+    guard: (ctx) => (ctx.instance.fields.evidence || []).length >= 1,
+  });
+
+  // --- State: under_review ---
+  useOnEnter('under_review', async (ctx) => {
+    ctx.env.emit('admin:review_needed', {
+      type: 'dispute',
+      disputeId: ctx.instance.id,
+      priority: ctx.instance.fields.amount > 50 ? 'high' : 'normal',
+    });
+  });
+
+  useTransition('under_review', 'resolved_rider_favor', {
+    guard: (ctx) => ctx.instance.fields.ruling === 'rider',
+    action: async (ctx) => {
+      const refund = await processRefund(ctx);
+      return refund;
+    },
+  });
+
+  useTransition('under_review', 'resolved_driver_favor', {
+    guard: (ctx) => ctx.instance.fields.ruling === 'driver',
+  });
+
+  useTransition('under_review', 'escalated', {
+    guard: (ctx) => ctx.instance.fields.needsEscalation === true,
+  });
+
+  // --- State: escalated ---
+  useOnEnter('escalated', async (ctx) => {
+    setEscalationLevel((ctx.instance.fields.escalationLevel || 0) + 1);
+    ctx.env.emit('dispute:escalated', {
+      disputeId: ctx.instance.id,
+      level: (ctx.instance.fields.escalationLevel || 0) + 1,
+    });
+  });
+
+  useTransition('escalated', 'under_review', {
+    guard: (ctx) => ctx.instance.fields.escalationResolved === true,
+  });
+
+  useTransition('escalated', 'resolved_split', {
+    guard: (ctx) => ctx.instance.fields.ruling === 'split',
+    action: async (ctx) => {
+      const partial = await processRefund(ctx);
+      return partial;
+    },
+  });
+
+  // --- State: resolved_rider_favor ---
+  useOnEnter('resolved_rider_favor', async (ctx) => {
+    ctx.env.emit('dispute:resolved', {
+      disputeId: ctx.instance.id,
+      outcome: 'rider_favor',
+      refundAmount: ctx.instance.fields.refundAmount,
+    });
+  });
+
+  useTransition('resolved_rider_favor', 'closed', { guard: () => true });
+
+  // --- State: resolved_driver_favor ---
+  useOnEnter('resolved_driver_favor', async (ctx) => {
+    ctx.env.emit('dispute:resolved', {
+      disputeId: ctx.instance.id,
+      outcome: 'driver_favor',
+    });
+  });
+
+  useTransition('resolved_driver_favor', 'closed', { guard: () => true });
+
+  // --- State: resolved_split ---
+  useOnEnter('resolved_split', async (ctx) => {
+    ctx.env.emit('dispute:resolved', {
+      disputeId: ctx.instance.id,
+      outcome: 'split',
+      riderRefund: ctx.instance.fields.riderRefundAmount,
+      driverCredit: ctx.instance.fields.driverCreditAmount,
+    });
+  });
+
+  useTransition('resolved_split', 'closed', { guard: () => true });
+
+  // --- State: closed ---
+  useOnExit('closed', async (ctx) => {
+    ctx.env.emit('dispute:closed', { disputeId: ctx.instance.id });
+  });
+
+  // --- Events ---
+  useOnEvent('evidence:submitted', async (ctx) => {
+    const current = ctx.instance.fields.evidence || [];
+    setEvidence([...current, ctx.instance.fields.newEvidence]);
+  });
+
+  useOnChange('dispute.escalationLevel', (newVal) => {
+    setEscalationLevel(newVal);
+  });
+
+  return (
+    <Stack gap="md">
+      <Heading level={2}>Dispute #{dispute.id?.slice(0, 8)}</Heading>
+      <Row gap="sm">
+        <Badge variant={dispute.status === 'closed' ? 'muted' : 'warning'}>{dispute.status}</Badge>
+        <Show when={escalationLevel > 0}>
+          <Badge variant="error">Level {escalationLevel} Escalation</Badge>
+        </Show>
+      </Row>
+
+      <Card>
+        <Text weight="bold">Reason</Text>
+        <Text>{dispute.reason}</Text>
+        <Row justify="between">
+          <Text>Disputed Amount</Text>
+          <Text weight="bold">${dispute.amount?.toFixed(2)}</Text>
+        </Row>
+      </Card>
+
+      <Show when={(evidence || []).length > 0}>
+        <Card>
+          <Heading level={4}>Evidence ({evidence?.length})</Heading>
+          <Each items={evidence || []}>
+            {(item) => (
+              <Row key={item} padding="xs">
+                <Badge variant="info">Attached</Badge>
+                <Text>{item}</Text>
+              </Row>
+            )}
+          </Each>
+        </Card>
+      </Show>
+
+      <Show when={dispute.status === 'under_review'}>
+        <Card>
+          <Heading level={4}>Admin Actions</Heading>
+          <Row gap="sm">
+            <Button variant="primary">Rule: Rider</Button>
+            <Button variant="outline">Rule: Driver</Button>
+            <Button variant="outline">Split</Button>
+            <Button variant="danger">Escalate</Button>
+          </Row>
+        </Card>
+      </Show>
+
+      <Show when={dispute.status?.startsWith('resolved')}>
+        <Card variant="success">
+          <Text weight="bold">Resolution: {resolution || dispute.ruling}</Text>
+          <Show when={dispute.refundAmount > 0}>
+            <Text>Refund: ${dispute.refundAmount?.toFixed(2)}</Text>
+          </Show>
+        </Card>
+      </Show>
+    </Stack>
+  );
+}

package/examples/uber-app/workflows/driver-onboarding.workflow.tsx

@@ -0,0 +1,227 @@
+import {
+  useState,
+  useOnEnter,
+  useOnExit,
+  useTransition,
+  useOnEvent,
+  useOnChange,
+} from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading } from '@mindmatrix/react';
+import { User } from '../models/user.model';
+import { Vehicle } from '../models/vehicle.model';
+
+/**
+ * @workflow driver-onboarding
+ * @model User
+ * @trigger driver.signup
+ */
+export default function DriverOnboardingWorkflow() {
+  const [driver, setDriver] = useState<User>('driver');
+  const [vehicle, setVehicle] = useState<Vehicle>('vehicle');
+  const [documents, setDocuments] = useState<string[]>('uploadedDocs');
+  const [verificationStatus, setVerificationStatus] = useState('verificationStatus');
+
+  // --- State: application_started ---
+  useOnEnter('application_started', async (ctx) => {
+    ctx.env.emit('onboarding:started', { userId: ctx.instance.id });
+    return { startedAt: new Date().toISOString() };
+  });
+
+  useTransition('application_started', 'documents_pending', {
+    guard: (ctx) => {
+      const f = ctx.instance.fields;
+      return !!f.firstName && !!f.lastName && !!f.email && !!f.phone;
+    },
+  });
+
+  // --- State: documents_pending ---
+  useOnEnter('documents_pending', async (ctx) => {
+    ctx.env.emit('notification:sent', {
+      userId: ctx.instance.id,
+      channel: 'email',
+      template: 'documents_required',
+    });
+  });
+
+  useTransition('documents_pending', 'documents_review', {
+    guard: (ctx) => {
+      const docs = ctx.instance.fields.uploadedDocs || [];
+      return docs.includes('license') && docs.includes('insurance') && docs.includes('registration');
+    },
+  });
+
+  // --- State: documents_review ---
+  useOnEnter('documents_review', async (ctx) => {
+    ctx.env.emit('admin:review_needed', { type: 'driver_documents', userId: ctx.instance.id });
+  });
+
+  useTransition('documents_review', 'background_check', {
+    guard: (ctx) => ctx.instance.fields.documentsApproved === true,
+  });
+
+  useTransition('documents_review', 'documents_pending', {
+    guard: (ctx) => ctx.instance.fields.documentsRejected === true,
+    action: async (ctx) => {
+      ctx.env.emit('notification:sent', {
+        userId: ctx.instance.id,
+        channel: 'email',
+        template: 'documents_rejected',
+        reason: ctx.instance.fields.rejectionReason,
+      });
+      return { success: true, data: {} };
+    },
+  });
+
+  // --- State: background_check ---
+  useOnEnter('background_check', async (ctx) => {
+    ctx.env.emit('background_check:initiated', { userId: ctx.instance.id });
+    return { backgroundCheckStartedAt: new Date().toISOString() };
+  });
+
+  useTransition('background_check', 'vehicle_inspection', {
+    guard: (ctx) => ctx.instance.fields.backgroundCheckPassed === true,
+  });
+
+  useTransition('background_check', 'rejected', {
+    guard: (ctx) => ctx.instance.fields.backgroundCheckPassed === false,
+  });
+
+  // --- State: vehicle_inspection ---
+  useOnEnter('vehicle_inspection', async (ctx) => {
+    ctx.env.emit('notification:sent', {
+      userId: ctx.instance.id,
+      channel: 'push',
+      template: 'schedule_inspection',
+    });
+  });
+
+  useTransition('vehicle_inspection', 'training', {
+    guard: (ctx) => ctx.instance.fields.vehicleInspectionPassed === true,
+  });
+
+  useTransition('vehicle_inspection', 'vehicle_inspection', {
+    guard: (ctx) => ctx.instance.fields.vehicleInspectionPassed === false,
+    action: async (ctx) => {
+      ctx.env.emit('notification:sent', {
+        userId: ctx.instance.id,
+        channel: 'push',
+        template: 'inspection_failed',
+      });
+      return { success: true, data: { retriesRemaining: 2 - (ctx.instance.fields.inspectionAttempts || 0) } };
+    },
+  });
+
+  // --- State: training ---
+  useOnEnter('training', async (ctx) => {
+    return { trainingModules: ['safety', 'app_usage', 'customer_service', 'navigation'] };
+  });
+
+  useTransition('training', 'active', {
+    guard: (ctx) => {
+      const completed = ctx.instance.fields.completedModules || [];
+      return completed.length >= 4;
+    },
+  });
+
+  // --- State: active ---
+  useOnEnter('active', async (ctx) => {
+    await ctx.env.update('user', ctx.instance.id, { role: 'driver', isActive: true });
+    ctx.env.emit('onboarding:completed', { userId: ctx.instance.id });
+  });
+
+  // --- State: rejected ---
+  useOnEnter('rejected', async (ctx) => {
+    ctx.env.emit('notification:sent', {
+      userId: ctx.instance.id,
+      channel: 'email',
+      template: 'application_rejected',
+    });
+  });
+
+  // --- Events ---
+  useOnEvent('document:uploaded', async (ctx) => {
+    const current = ctx.instance.fields.uploadedDocs || [];
+    setDocuments([...current, ctx.instance.fields.lastUploadedDoc]);
+  });
+
+  useOnChange('driver.verificationStatus', (newVal) => {
+    setVerificationStatus(newVal);
+  });
+
+  const steps = [
+    { key: 'application_started', label: 'Personal Info' },
+    { key: 'documents_pending', label: 'Documents' },
+    { key: 'documents_review', label: 'Review' },
+    { key: 'background_check', label: 'Background Check' },
+    { key: 'vehicle_inspection', label: 'Vehicle Inspection' },
+    { key: 'training', label: 'Training' },
+    { key: 'active', label: 'Active' },
+  ];
+
+  return (
+    <Stack gap="lg">
+      <Heading level={2}>Driver Onboarding</Heading>
+      <Badge variant={driver.isActive ? 'success' : 'info'}>{verificationStatus || driver.status}</Badge>
+
+      <Row gap="sm" wrap>
+        <Each items={steps}>
+          {(step) => (
+            <Badge
+              key={step.key}
+              variant={driver.status === step.key ? 'primary' : steps.indexOf(step) < steps.findIndex(s => s.key === driver.status) ? 'success' : 'muted'}
+            >
+              {step.label}
+            </Badge>
+          )}
+        </Each>
+      </Row>
+
+      <Show when={driver.status === 'documents_pending'}>
+        <Card>
+          <Heading level={4}>Required Documents</Heading>
+          <Each items={['license', 'insurance', 'registration']}>
+            {(doc) => (
+              <Row key={doc} justify="between" padding="sm">
+                <Text>{doc}</Text>
+                <Badge variant={documents?.includes(doc) ? 'success' : 'warning'}>
+                  {documents?.includes(doc) ? 'Uploaded' : 'Pending'}
+                </Badge>
+              </Row>
+            )}
+          </Each>
+          <Button variant="primary">Upload Document</Button>
+        </Card>
+      </Show>
+
+      <Show when={driver.status === 'training'}>
+        <Card>
+          <Heading level={4}>Training Modules</Heading>
+          <Each items={['safety', 'app_usage', 'customer_service', 'navigation']}>
+            {(mod) => (
+              <Row key={mod} justify="between" padding="sm">
+                <Text transform="capitalize">{mod.replace('_', ' ')}</Text>
+                <Badge variant={(driver.completedModules || []).includes(mod) ? 'success' : 'muted'}>
+                  {(driver.completedModules || []).includes(mod) ? 'Complete' : 'Start'}
+                </Badge>
+              </Row>
+            )}
+          </Each>
+        </Card>
+      </Show>
+
+      <Show when={driver.status === 'rejected'}>
+        <Card variant="error">
+          <Text>Your application was not approved. Please contact support for details.</Text>
+        </Card>
+      </Show>
+
+      <Show when={driver.status === 'active'}>
+        <Card variant="success">
+          <Heading level={4}>Welcome aboard!</Heading>
+          <Text>You're approved to start accepting rides.</Text>
+          <Button variant="primary">Go to Dashboard</Button>
+        </Card>
+      </Show>
+    </Stack>
+  );
+}