@mmapp/react-compiler 0.1.0-alpha.1

package/examples/uber-app/actions/pricing.server.ts

@@ -0,0 +1,176 @@
+/**
+ * @workflow slug="uber-rideshare"
+ * @description Fare calculation engine — base fare, distance, time, surge, promos, and vehicle multipliers
+ */
+
+import type { TransitionContext, ActionResult } from '@mindmatrix/react';
+
+/** Per-vehicle-type rate configuration */
+const VEHICLE_RATES = {
+  economy: { baseFare: 2.50, perKm: 1.20, perMinute: 0.25, bookingFee: 2.00, minFare: 7.00 },
+  premium: { baseFare: 5.00, perKm: 2.00, perMinute: 0.40, bookingFee: 2.50, minFare: 12.00 },
+  xl:      { baseFare: 4.00, perKm: 1.80, perMinute: 0.35, bookingFee: 2.50, minFare: 10.00 },
+  luxury:  { baseFare: 8.00, perKm: 3.50, perMinute: 0.60, bookingFee: 3.00, minFare: 20.00 },
+} as const;
+
+/** Cancellation fee tiers based on ride state */
+const CANCELLATION_FEES = {
+  searching: 0,
+  matched: 2.00,
+  driver_enroute: 5.00,
+  driver_arrived: 10.00,
+} as const;
+
+/** Time-of-day multiplier (peak hours) */
+function getTimeMultiplier(): number {
+  const hour = new Date().getHours();
+  if ((hour >= 7 && hour <= 9) || (hour >= 17 && hour <= 19)) return 1.2; // Rush hour
+  if (hour >= 22 || hour <= 5) return 1.1; // Late night
+  return 1.0;
+}
+
+/** Calculate estimated fare before ride starts */
+export async function calculateEstimatedFare(ctx: TransitionContext): Promise<ActionResult> {
+  const { instance } = ctx;
+  const fields = instance.fields as Record<string, unknown>;
+  const vehicleType = (fields.vehicleType as string) || 'economy';
+  const distanceKm = fields.estimatedDistanceKm as number;
+  const durationMin = fields.estimatedDurationMinutes as number;
+  const surgeMultiplier = (fields.surgeMultiplier as number) || 1.0;
+  const promoCode = fields.promoCode as string;
+
+  const rates = VEHICLE_RATES[vehicleType as keyof typeof VEHICLE_RATES] || VEHICLE_RATES.economy;
+  const timeMultiplier = getTimeMultiplier();
+
+  const baseFare = rates.baseFare;
+  const distanceFare = distanceKm * rates.perKm;
+  const timeFare = durationMin * rates.perMinute;
+  const subtotal = (baseFare + distanceFare + timeFare) * timeMultiplier;
+  const surgeFee = subtotal * (surgeMultiplier - 1);
+  const bookingFee = rates.bookingFee;
+
+  // Promo discount (simplified: flat $5 off for valid codes)
+  let promoDiscount = 0;
+  if (promoCode && promoCode.length >= 4) {
+    promoDiscount = Math.min(5.00, subtotal * 0.2); // 20% off, max $5
+  }
+
+  const totalBeforeTip = Math.max(
+    rates.minFare,
+    subtotal + surgeFee + bookingFee - promoDiscount
+  );
+
+  return {
+    success: true,
+    data: {
+      baseFare: Math.round(baseFare * 100) / 100,
+      distanceFare: Math.round(distanceFare * 100) / 100,
+      timeFare: Math.round(timeFare * 100) / 100,
+      surgeFee: Math.round(surgeFee * 100) / 100,
+      bookingFee,
+      promoDiscount: Math.round(promoDiscount * 100) / 100,
+      estimatedFare: Math.round(totalBeforeTip * 100) / 100,
+      timeMultiplier,
+      surgeMultiplier,
+      currency: 'USD',
+    },
+  };
+}
+
+/** Calculate actual fare after ride completes using real distance and duration */
+export async function calculateActualFare(ctx: TransitionContext): Promise<ActionResult> {
+  const { instance } = ctx;
+  const fields = instance.fields as Record<string, unknown>;
+  const vehicleType = (fields.vehicleType as string) || 'economy';
+  const actualDistanceKm = fields.actualDistanceKm as number;
+  const actualDurationMin = fields.actualDurationMinutes as number;
+  const surgeMultiplier = (fields.surgeMultiplier as number) || 1.0;
+  const promoDiscount = (fields.promoDiscount as number) || 0;
+  const tollsFee = (fields.tollsFee as number) || 0;
+  const tipAmount = (fields.tipAmount as number) || 0;
+
+  const rates = VEHICLE_RATES[vehicleType as keyof typeof VEHICLE_RATES] || VEHICLE_RATES.economy;
+
+  const baseFare = rates.baseFare;
+  const distanceFare = actualDistanceKm * rates.perKm;
+  const timeFare = actualDurationMin * rates.perMinute;
+  const subtotal = baseFare + distanceFare + timeFare;
+  const surgeFee = subtotal * (surgeMultiplier - 1);
+  const bookingFee = rates.bookingFee;
+
+  const totalBeforeTip = Math.max(
+    rates.minFare,
+    subtotal + surgeFee + bookingFee + tollsFee - promoDiscount
+  );
+  const totalWithTip = totalBeforeTip + tipAmount;
+
+  // Platform takes 25%, driver gets 75% of fare + 100% of tips
+  const platformFeePercent = 25;
+  const platformFee = Math.round(totalBeforeTip * (platformFeePercent / 100) * 100) / 100;
+  const driverPayout = Math.round((totalBeforeTip - platformFee + tipAmount) * 100) / 100;
+
+  return {
+    success: true,
+    data: {
+      baseFare: Math.round(baseFare * 100) / 100,
+      distanceFare: Math.round(distanceFare * 100) / 100,
+      timeFare: Math.round(timeFare * 100) / 100,
+      surgeFee: Math.round(surgeFee * 100) / 100,
+      bookingFee,
+      tollsFee,
+      promoDiscount,
+      tipAmount,
+      actualFare: Math.round(totalWithTip * 100) / 100,
+      platformFee,
+      platformFeePercent,
+      driverPayout,
+    },
+  };
+}
+
+/** Calculate cancellation fee based on ride state at time of cancellation */
+export async function calculateCancellationFee(ctx: TransitionContext): Promise<ActionResult> {
+  const { instance } = ctx;
+  const currentState = instance.currentState as string;
+  const fee = CANCELLATION_FEES[currentState as keyof typeof CANCELLATION_FEES] || 0;
+
+  return {
+    success: true,
+    data: {
+      cancellationFee: fee,
+      cancelledAt: new Date().toISOString(),
+    },
+  };
+}
+
+/** Calculate dynamic surge multiplier based on demand/supply ratio */
+export async function calculateSurge(ctx: TransitionContext): Promise<ActionResult> {
+  const { env } = ctx;
+
+  const activeRides = await env.query('uber-ride', {
+    filter: { status: 'searching' },
+  });
+  const onlineDrivers = await env.query('uber-user', {
+    filter: { role: 'driver', isOnline: true },
+  });
+
+  const demand = activeRides.total || 0;
+  const supply = onlineDrivers.total || 1;
+  const ratio = demand / supply;
+
+  let multiplier = 1.0;
+  if (ratio > 3.0) multiplier = 3.0;
+  else if (ratio > 2.0) multiplier = 2.0 + (ratio - 2.0);
+  else if (ratio > 1.5) multiplier = 1.5 + (ratio - 1.5);
+  else if (ratio > 1.0) multiplier = 1.0 + (ratio - 1.0) * 0.5;
+
+  return {
+    success: true,
+    data: {
+      surgeMultiplier: Math.round(multiplier * 10) / 10,
+      demand,
+      supply,
+      ratio: Math.round(ratio * 100) / 100,
+    },
+  };
+}

package/examples/uber-app/app/admin/analytics.tsx

@@ -0,0 +1,102 @@
+import { useState, useWorkflow, useTransition, useField, useComputed, useRole, useQuery, useOnEnter, useOnEvent } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading, Input } from '@mindmatrix/react';
+import { RideStats, RevenueBreakdown } from '../../models/analytics';
+
+type TimePeriod = 'today' | 'week' | 'month';
+
+export default function AnalyticsDashboard() {
+  const isAdmin = useRole('admin');
+  const [period, setPeriod] = useState<TimePeriod>('today');
+
+  const rideStats = useQuery<RideStats>('ride_stats', { period });
+  const revenue = useQuery<RevenueBreakdown>('revenue_breakdown', { period });
+  const driverUtil = useQuery<{ percentage: number; activeDrivers: number; totalDrivers: number }>('driver_utilization', { period });
+  const waitTime = useQuery<{ averageMinutes: number; p95Minutes: number }>('average_wait_time', { period });
+  const surgeZones = useQuery<{ count: number; zones: string[] }>('active_surge_zones');
+
+  const revenueBarData = useComputed(() => {
+    if (!revenue.data) return [];
+    const max = Math.max(revenue.data.rides, revenue.data.tips, revenue.data.surgeExtra, revenue.data.cancellationFees);
+    return [
+      { label: 'Rides', value: revenue.data.rides, pct: max > 0 ? (revenue.data.rides / max) * 100 : 0 },
+      { label: 'Tips', value: revenue.data.tips, pct: max > 0 ? (revenue.data.tips / max) * 100 : 0 },
+      { label: 'Surge', value: revenue.data.surgeExtra, pct: max > 0 ? (revenue.data.surgeExtra / max) * 100 : 0 },
+      { label: 'Cancel Fees', value: revenue.data.cancellationFees, pct: max > 0 ? (revenue.data.cancellationFees / max) * 100 : 0 },
+    ];
+  }, [revenue.data]);
+
+  const totalRevenue = useComputed(() => {
+    if (!revenue.data) return 0;
+    return revenue.data.rides + revenue.data.tips + revenue.data.surgeExtra + revenue.data.cancellationFees;
+  }, [revenue.data]);
+
+  return (
+    <Show when={isAdmin} fallback={<Text>Access denied.</Text>}>
+      <Stack gap="lg">
+        <Row justify="between" align="center">
+          <Heading level={2}>Platform Analytics</Heading>
+          <Row gap="sm">
+            {(['today', 'week', 'month'] as const).map((p) => (
+              <Button key={p} variant={period === p ? 'primary' : 'ghost'} onClick={() => setPeriod(p)}>
+                {p.charAt(0).toUpperCase() + p.slice(1)}
+              </Button>
+            ))}
+          </Row>
+        </Row>
+
+        <Row gap="md" wrap>
+          <Card>
+            <Stack gap="xs" align="center">
+              <Text size="sm" color="muted">Total Rides</Text>
+              <Text size="xl" weight="bold">{rideStats.data?.totalRides ?? '—'}</Text>
+              <Text size="xs" color="muted">Completed: {rideStats.data?.completedRides ?? 0}</Text>
+            </Stack>
+          </Card>
+          <Card>
+            <Stack gap="xs" align="center">
+              <Text size="sm" color="muted">Revenue</Text>
+              <Text size="xl" weight="bold">${totalRevenue.toLocaleString()}</Text>
+            </Stack>
+          </Card>
+          <Card>
+            <Stack gap="xs" align="center">
+              <Text size="sm" color="muted">Driver Utilization</Text>
+              <Text size="xl" weight="bold">{driverUtil.data?.percentage ?? 0}%</Text>
+              <Text size="xs" color="muted">{driverUtil.data?.activeDrivers ?? 0} / {driverUtil.data?.totalDrivers ?? 0} active</Text>
+            </Stack>
+          </Card>
+          <Card>
+            <Stack gap="xs" align="center">
+              <Text size="sm" color="muted">Avg Wait Time</Text>
+              <Text size="xl" weight="bold">{waitTime.data?.averageMinutes ?? 0} min</Text>
+              <Text size="xs" color="muted">p95: {waitTime.data?.p95Minutes ?? 0} min</Text>
+            </Stack>
+          </Card>
+          <Card>
+            <Stack gap="xs" align="center">
+              <Text size="sm" color="muted">Surge Zones</Text>
+              <Text size="xl" weight="bold">{surgeZones.data?.count ?? 0}</Text>
+            </Stack>
+          </Card>
+        </Row>
+
+        <Card>
+          <Heading level={4}>Revenue Breakdown</Heading>
+          <Stack gap="sm">
+            <Each items={revenueBarData}>
+              {(bar: { label: string; value: number; pct: number }) => (
+                <Row key={bar.label} gap="sm" align="center">
+                  <Text style={{ width: 100 }}>{bar.label}</Text>
+                  <div style={{ flex: 1, background: '#e5e7eb', borderRadius: 4, height: 20 }}>
+                    <div style={{ width: `${bar.pct}%`, background: '#3b82f6', borderRadius: 4, height: 20 }} />
+                  </div>
+                  <Text weight="bold">${bar.value.toLocaleString()}</Text>
+                </Row>
+              )}
+            </Each>
+          </Stack>
+        </Card>
+      </Stack>
+    </Show>
+  );
+}

package/examples/uber-app/app/admin/fleet.tsx

@@ -0,0 +1,102 @@
+import { useState, useWorkflow, useTransition, useField, useComputed, useRole, useQuery, useOnEnter, useOnEvent } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading, Input } from '@mindmatrix/react';
+import { Vehicle, Driver } from '../../models/fleet';
+
+type VehicleType = 'sedan' | 'suv' | 'van' | 'luxury';
+type VehicleStatus = 'active' | 'maintenance' | 'retired';
+
+export default function FleetManagement() {
+  const isAdmin = useRole('admin');
+  const [vehicles] = useField<Vehicle[]>('vehicles');
+  const [drivers] = useField<Driver[]>('drivers');
+  const [filterType, setFilterType] = useState<VehicleType | 'all'>('all');
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newPlate, setNewPlate] = useState('');
+  const [newType, setNewType] = useState<VehicleType>('sedan');
+  const addVehicle = useTransition('add_vehicle');
+  const assignDriver = useTransition('assign_driver');
+  const updateStatus = useTransition('update_vehicle_status');
+
+  const filteredVehicles = useComputed(() => {
+    if (filterType === 'all') return vehicles;
+    return vehicles.filter((v: Vehicle) => v.type === filterType);
+  }, [vehicles, filterType]);
+
+  const statusCounts = useComputed(() => ({
+    active: vehicles.filter((v: Vehicle) => v.status === 'active').length,
+    maintenance: vehicles.filter((v: Vehicle) => v.status === 'maintenance').length,
+    retired: vehicles.filter((v: Vehicle) => v.status === 'retired').length,
+  }), [vehicles]);
+
+  const handleAddVehicle = () => {
+    if (!newPlate.trim()) return;
+    addVehicle({ plate: newPlate, type: newType, status: 'active' });
+    setNewPlate('');
+    setShowAddForm(false);
+  };
+
+  const statusColor = (s: VehicleStatus) =>
+    s === 'active' ? 'green' : s === 'maintenance' ? 'yellow' : 'gray';
+
+  return (
+    <Show when={isAdmin} fallback={<Text>Access denied. Admin role required.</Text>}>
+      <Stack gap=lg>
+        <Row justify=between align=center>
+          <Heading level={2}>Fleet Management</Heading>
+          <Button onClick={() => setShowAddForm(true)}>Add Vehicle</Button>
+        </Row>
+
+        <Row gap=md>
+          <Badge color=green>Active: {statusCounts.active}</Badge>
+          <Badge color=yellow>Maintenance: {statusCounts.maintenance}</Badge>
+          <Badge color=gray>Retired: {statusCounts.retired}</Badge>
+        </Row>
+
+        <Row gap=sm>
+          {(['all', 'sedan', 'suv', 'van', 'luxury'] as const).map((t) => (
+            <Button key={t} variant={filterType === t ? 'primary' : 'ghost'} onClick={() => setFilterType(t)}>
+              {t.charAt(0).toUpperCase() + t.slice(1)}
+            </Button>
+          ))}
+        </Row>
+
+        <Show when={showAddForm}>
+          <Card>
+            <Stack gap=sm>
+              <Input label=License Plate value={newPlate} onChange={setNewPlate} />
+              <Row gap=sm>
+                {(['sedan', 'suv', 'van', 'luxury'] as const).map((t) => (
+                  <Button key={t} variant={newType === t ? 'primary' : 'ghost'} onClick={() => setNewType(t)}>{t}</Button>
+                ))}
+              </Row>
+              <Row gap=sm>
+                <Button onClick={handleAddVehicle}>Save</Button>
+                <Button variant=ghost onClick={() => setShowAddForm(false)}>Cancel</Button>
+              </Row>
+            </Stack>
+          </Card>
+        </Show>
+
+        <Each items={filteredVehicles}>
+          {(vehicle: Vehicle) => (
+            <Card key={vehicle.id}>
+              <Row justify=between align=center>
+                <Stack gap=xs>
+                  <Text weight=bold>{vehicle.plate} — {vehicle.type}</Text>
+                  <Text size=sm color=muted>{vehicle.assignedDriver?.name ?? 'Unassigned'}</Text>
+                </Stack>
+                <Row gap=sm align=center>
+                  <Badge color={statusColor(vehicle.status)}>{vehicle.status}</Badge>
+                  <Button size=sm onClick={() => assignDriver({ vehicleId: vehicle.id })}>Assign</Button>
+                  <Button size=sm variant=ghost onClick={() => updateStatus({ vehicleId: vehicle.id, status: 'maintenance' })}>
+                    Service
+                  </Button>
+                </Row>
+              </Row>
+            </Card>
+          )}
+        </Each>
+      </Stack>
+    </Show>
+  );
+}

package/examples/uber-app/app/admin/surge-pricing.tsx

@@ -0,0 +1,95 @@
+import { useState, useWorkflow, useTransition, useField, useComputed, useRole, useQuery, useOnEnter, useOnEvent } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading, Input } from '@mindmatrix/react';
+import { SurgeZone, SurgeConfig } from '../../models/surge';
+
+export default function SurgePricing() {
+  const isAdmin = useRole('admin');
+  const [zones, setZones] = useField<SurgeZone[]>('surge_zones');
+  const [config] = useField<SurgeConfig>('surge_config');
+  const [editingZoneId, setEditingZoneId] = useState<string | null>(null);
+  const [editMultiplier, setEditMultiplier] = useState('1.0');
+  const [threshold, setThreshold] = useState(String(config?.demandRatioThreshold ?? 1.5));
+
+  const updateMultiplier = useTransition('update_surge_multiplier');
+  const toggleSurge = useTransition('toggle_surge');
+  const updateThreshold = useTransition('update_surge_threshold');
+
+  const activeZoneCount = useComputed(
+    () => zones.filter((z: SurgeZone) => z.surgeEnabled && z.multiplier > 1.0).length,
+    [zones]
+  );
+
+  const startEdit = (zone: SurgeZone) => {
+    setEditingZoneId(zone.id);
+    setEditMultiplier(String(zone.multiplier));
+  };
+
+  const saveMultiplier = (zoneId: string) => {
+    const value = parseFloat(editMultiplier);
+    if (isNaN(value) || value < 1.0 || value > 5.0) return;
+    updateMultiplier({ zoneId, multiplier: value });
+    setEditingZoneId(null);
+  };
+
+  const handleToggle = (zoneId: string, enabled: boolean) => {
+    toggleSurge({ zoneId, enabled: !enabled });
+  };
+
+  const saveThreshold = () => {
+    const value = parseFloat(threshold);
+    if (isNaN(value) || value < 1.0) return;
+    updateThreshold({ demandRatioThreshold: value });
+  };
+
+  return (
+    <Show when={isAdmin} fallback={<Text>Access denied.</Text>}>
+      <Stack gap="lg">
+        <Row justify="between" align="center">
+          <Heading level={2}>Surge Pricing</Heading>
+          <Badge color={activeZoneCount > 0 ? 'red' : 'green'}>
+            {activeZoneCount} active surge zone{activeZoneCount !== 1 ? 's' : ''}
+          </Badge>
+        </Row>
+
+        <Card>
+          <Stack gap="sm">
+            <Heading level={4}>Global Threshold</Heading>
+            <Text size="sm" color="muted">Demand-to-supply ratio that triggers surge pricing</Text>
+            <Row gap="sm" align="center">
+              <Input type="number" value={threshold} onChange={setThreshold} min="1.0" step="0.1" style={{ width: 100 }} />
+              <Button size="sm" onClick={saveThreshold}>Update</Button>
+            </Row>
+          </Stack>
+        </Card>
+
+        <Each items={zones}>
+          {(zone: SurgeZone) => (
+            <Card key={zone.id}>
+              <Row justify="between" align="center">
+                <Stack gap="xs">
+                  <Text weight="bold">{zone.name}</Text>
+                  <Text size="sm" color="muted">Current demand ratio: {zone.currentDemandRatio.toFixed(1)}</Text>
+                </Stack>
+                <Row gap="sm" align="center">
+                  <Show when={editingZoneId === zone.id} fallback={
+                    <Badge color={zone.multiplier > 1.0 ? 'red' : 'gray'}>{zone.multiplier.toFixed(1)}x</Badge>
+                  }>
+                    <Input type="number" value={editMultiplier} onChange={setEditMultiplier} min="1.0" max="5.0" step="0.1" style={{ width: 80 }} />
+                    <Button size="sm" onClick={() => saveMultiplier(zone.id)}>Save</Button>
+                    <Button size="sm" variant="ghost" onClick={() => setEditingZoneId(null)}>Cancel</Button>
+                  </Show>
+                  <Show when={editingZoneId !== zone.id}>
+                    <Button size="sm" variant="ghost" onClick={() => startEdit(zone)}>Edit</Button>
+                  </Show>
+                  <Button size="sm" variant={zone.surgeEnabled ? 'danger' : 'primary'} onClick={() => handleToggle(zone.id, zone.surgeEnabled)}>
+                    {zone.surgeEnabled ? 'Disable' : 'Enable'}
+                  </Button>
+                </Row>
+              </Row>
+            </Card>
+          )}
+        </Each>
+      </Stack>
+    </Show>
+  );
+}

package/examples/uber-app/app/driver/dashboard.tsx

@@ -0,0 +1,87 @@
+import { useState, useWorkflow, useField, useComputed, useRole, useOnEnter } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Card, Badge, Heading } from '@mindmatrix/react';
+import { RideRequest } from '../models/ride';
+import { DriverStats } from '../models/driver';
+import { ActiveRideCard } from '../components/ActiveRideCard';
+
+export default function DriverDashboard() {
+  const workflow = useWorkflow('driver-session');
+  const [isOnline, setIsOnline] = useState(false);
+
+  const status = useField<'online' | 'offline' | 'on-trip'>('driver.status');
+  const activeRide = useField<RideRequest | null>('driver.activeRide');
+  const stats = useField<DriverStats>('driver.todayStats');
+
+  const todayEarnings = useComputed('driver.todayEarnings', () => {
+    return stats.value.completedTrips.reduce((sum, trip) => sum + trip.fare, 0);
+  });
+
+  const acceptanceRate = useComputed('driver.acceptanceRate', () => {
+    const { accepted, total } = stats.value.requestStats;
+    return total > 0 ? Math.round((accepted / total) * 100) : 100;
+  });
+
+  const role = useRole('driver');
+
+  useOnEnter(() => {
+    workflow.initialize({ driverId: role.userId });
+  });
+
+  const handleToggleOnline = () => {
+    const nextState = isOnline ? 'go-offline' : 'go-online';
+    workflow.transition(nextState);
+    setIsOnline(!isOnline);
+  };
+
+  return (
+    <Stack gap="lg" padding="md">
+      <Row justify="between" align="center">
+        <Heading level={2}>Driver Dashboard</Heading>
+        <Badge variant={isOnline ? 'success' : 'neutral'}>
+          {isOnline ? 'Online' : 'Offline'}
+        </Badge>
+      </Row>
+
+      <Button
+        variant={isOnline ? 'outline' : 'primary'}
+        size="lg"
+        onPress={handleToggleOnline}
+      >
+        {isOnline ? 'Go Offline' : 'Go Online'}
+      </Button>
+
+      <Row gap="md">
+        <Card flex={1}>
+          <Text size="sm" color="muted">Today's Earnings</Text>
+          <Text size="xl" weight="bold">${todayEarnings.value.toFixed(2)}</Text>
+        </Card>
+        <Card flex={1}>
+          <Text size="sm" color="muted">Trips</Text>
+          <Text size="xl" weight="bold">{stats.value.completedTrips.length}</Text>
+        </Card>
+        <Card flex={1}>
+          <Text size="sm" color="muted">Acceptance</Text>
+          <Badge variant={acceptanceRate.value >= 85 ? 'success' : 'warning'}>
+            {acceptanceRate.value}%
+          </Badge>
+        </Card>
+      </Row>
+
+      <Show when={activeRide.value !== null}>
+        <Heading level={3}>Current Ride</Heading>
+        <ActiveRideCard
+          ride={activeRide.value!}
+          onNavigate={() => workflow.transition('open-navigation')}
+        />
+      </Show>
+
+      <Show when={isOnline && !activeRide.value}>
+        <Card padding="lg">
+          <Text align="center" color="muted">
+            Waiting for ride requests...
+          </Text>
+        </Card>
+      </Show>
+    </Stack>
+  );
+}

package/examples/uber-app/app/driver/earnings.tsx

@@ -0,0 +1,101 @@
+import { useState, useWorkflow, useField, useComputed, useQuery } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading } from '@mindmatrix/react';
+import { EarningsRecord, PayoutEntry } from '../models/earnings';
+
+type Period = 'daily' | 'weekly' | 'monthly';
+
+export default function Earnings() {
+  const workflow = useWorkflow('driver-earnings');
+  const [period, setPeriod] = useState<Period>('daily');
+
+  const earningsHistory = useQuery<EarningsRecord[]>('driver.earningsHistory', {
+    period,
+    limit: 30,
+  });
+
+  const payouts = useQuery<PayoutEntry[]>('driver.payoutHistory', {
+    limit: 20,
+  });
+
+  const totalEarnings = useComputed('earnings.total', () => {
+    if (!earningsHistory.data) return 0;
+    return earningsHistory.data.reduce((sum, record) => sum + record.amount, 0);
+  });
+
+  const tripsCompleted = useComputed('earnings.trips', () => {
+    if (!earningsHistory.data) return 0;
+    return earningsHistory.data.reduce((sum, record) => sum + record.tripCount, 0);
+  });
+
+  const avgRating = useField<number>('driver.averageRating');
+
+  return (
+    <Stack gap="lg" padding="md">
+      <Heading level={2}>Earnings</Heading>
+
+      <Row gap="sm">
+        {(['daily', 'weekly', 'monthly'] as Period[]).map((p) => (
+          <Button
+            key={p}
+            variant={period === p ? 'primary' : 'outline'}
+            size="sm"
+            onPress={() => setPeriod(p)}
+          >
+            {p.charAt(0).toUpperCase() + p.slice(1)}
+          </Button>
+        ))}
+      </Row>
+
+      <Row gap="md">
+        <Card flex={1}>
+          <Text size="sm" color="muted">Total</Text>
+          <Text size="xl" weight="bold">${totalEarnings.value.toFixed(2)}</Text>
+        </Card>
+        <Card flex={1}>
+          <Text size="sm" color="muted">Trips</Text>
+          <Text size="xl" weight="bold">{tripsCompleted.value}</Text>
+        </Card>
+        <Card flex={1}>
+          <Text size="sm" color="muted">Rating</Text>
+          <Text size="xl" weight="bold">{avgRating.value.toFixed(1)}</Text>
+        </Card>
+      </Row>
+
+      <Heading level={3}>Trip History</Heading>
+      <Show when={!earningsHistory.isLoading}>
+        <Each items={earningsHistory.data ?? []}>
+          {(record) => (
+            <Card key={record.id} padding="sm">
+              <Row justify="between" align="center">
+                <Stack gap="xs">
+                  <Text weight="medium">{record.date}</Text>
+                  <Text size="sm" color="muted">{record.tripCount} trips</Text>
+                </Stack>
+                <Text weight="bold">${record.amount.toFixed(2)}</Text>
+              </Row>
+            </Card>
+          )}
+        </Each>
+      </Show>
+
+      <Heading level={3}>Payout History</Heading>
+      <Show when={!payouts.isLoading}>
+        <Each items={payouts.data ?? []}>
+          {(payout) => (
+            <Card key={payout.id} padding="sm">
+              <Row justify="between" align="center">
+                <Stack gap="xs">
+                  <Text weight="medium">{payout.date}</Text>
+                  <Badge variant={payout.status === 'completed' ? 'success' : 'warning'}>
+                    {payout.status}
+                  </Badge>
+                </Stack>
+                <Text weight="bold">${payout.amount.toFixed(2)}</Text>
+              </Row>
+            </Card>
+          )}
+        </Each>
+      </Show>
+    </Stack>
+  );
+}