Expense List Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { DataTable, Glass, Icon, List, SearchInput, Text, type IconName, Fab, } from "@lumioui/ui";
import { type ColorTokens } from "@lumioui/core";
import { BrandMark, LumioMark, Mount, Press, SEPARATOR_INSET, brandKey } from "../shared";

export interface Expense {
  id: string;
  merchant: string;
  category: string;
  icon: IconName;
  amount: string;
  date: string;
  /** Receipt attached — shows the paperclip. */
  receipt?: boolean;
  /** Soft-tint tile background class. */
  tileBg?: string;
  /** Icon tint token — pairs with `tileBg`. */
  tint?: keyof ColorTokens;
}

export interface ExpenseListScreenProps {
  period?: string;
  total?: string;
  expenses?: Expense[];
  onExpensePress?: (id: string) => void;
  onAddExpense?: () => void;
  onBack?: () => void;
}

const DEFAULT_EXPENSES: Expense[] = [
  { id: "e1", merchant: "Sweetgreen", category: "Dining", icon: "utensils", amount: "$16.40", date: "Today", tileBg: "bg-warning/15", tint: "warning" },
  { id: "e2", merchant: "Uber", category: "Transport", icon: "car", amount: "$22.18", date: "Today", receipt: true, tileBg: "bg-chart-2/15", tint: "chart2" },
  { id: "e3", merchant: "Figma", category: "Software", icon: "edit", amount: "$15.00", date: "Yesterday", receipt: true, tileBg: "bg-chart-3/15", tint: "chart3" },
  { id: "e4", merchant: "Blue Bottle", category: "Dining", icon: "coffee", amount: "$7.20", date: "Yesterday", tileBg: "bg-chart-5/15", tint: "chart5" },
  { id: "e5", merchant: "United", category: "Travel", icon: "plane", amount: "$428.00", date: "Sep 18", receipt: true, tileBg: "bg-primary/15", tint: "primary" },
];

/** Expense list — searchable expenses with receipts + add. */
export function ExpenseListScreen({
  period = "This week",
  total = "$489",
  expenses = DEFAULT_EXPENSES,
  onExpensePress,
  onAddExpense,
  onBack,
}: ExpenseListScreenProps) {
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");
  const filtered = expenses.filter(
    (e) =>
      e.merchant.toLowerCase().includes(query.toLowerCase()) ||
      e.category.toLowerCase().includes(query.toLowerCase())
  );

  // Per-category roll-up — the report-style summary an expense screen
  // owes before the itemized list.
  const rollUp = React.useMemo(() => {
    const map = new Map<string, { count: number; total: number }>();
    for (const e of expenses) {
      const amt = parseFloat(e.amount.replace(/[^0-9.-]/g, "")) || 0;
      const cur = map.get(e.category) ?? { count: 0, total: 0 };
      cur.count += 1;
      cur.total += amt;
      map.set(e.category, cur);
    }
    return [...map.entries()]
      .sort((a, b) => b[1].total - a[1].total)
      .map(([category, v]) => ({
        category,
        count: String(v.count),
        total: `$${v.total.toFixed(2)}`,
      }));
  }, [expenses]);

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
        <View className="flex-row items-center justify-between">
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityRole="button"
              accessibilityLabel="Go back"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
          <View className="h-11 w-11" />
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
            <Glass effect="regular" className="absolute inset-0 rounded-full" />
            <LumioMark size={18} />
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Expenses
            </Text>
          </View>
        </View>
      </View>

      <View className="px-4" style={{ paddingTop: insets.top + 60, paddingBottom: 8 }}>
        {/* Running tally — the ledger answer before the list. */}
        <Text variant="muted" className="pb-2 text-xs">
          {filtered.length} entries · {total} this {period.toLowerCase()}
        </Text>
        <SearchInput
          value={query}
          onChangeText={setQuery}
          placeholder="Search expenses"
          accessibilityLabel="Search expenses"
        />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
      >
        <Mount className="px-4 pb-4">
          <DataTable
            columns={[
              { key: "category", title: "Category", flex: 1.6 },
              { key: "count", title: "Expenses", align: "center" },
              { key: "total", title: "Total", align: "right" },
            ]}
            rows={rollUp}
          />
        </Mount>

        <List inset>
          <List.Section title={`${period} · ${total}`}>
            {filtered.map((e, ii) => (
              <React.Fragment key={e.id}>
                {ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
                <List.Item
                  title={e.merchant}
                  subtitle={`${e.category} · ${e.date}`}
                  leading={
                    (() => {
                      const mark = brandKey(e.merchant);
                      return mark ? (
                        <BrandMark brand={mark} size={32} />
                      ) : (
                        <View
                          className={`h-8 w-8 items-center justify-center rounded-2xl ${e.tileBg ?? "bg-muted"}`}
                        >
                          <Icon name={e.icon} size="sm" color={e.tint ?? "foreground"} />
                        </View>
                      );
                    })()
                  }
                  trailing={
                    <View className="flex-row items-center gap-1.5">
                      {e.receipt && (
                        <Icon name="paperclip" size="sm" color="mutedForeground" />
                      )}
                      <Text className="font-medium">{e.amount}</Text>
                    </View>
                  }
                  haptic="light"
                  onPress={() => onExpensePress?.(e.id)}
                  className="py-3"
                />
              </React.Fragment>
            ))}
          </List.Section>
        </List>

        <Mount delay={60} className="mt-4 px-4">
          <Text variant="muted" className="mt-4 text-center text-xs">
            Receipts attached to 3 of 5 expenses
          </Text>
        </Mount>
      </ScrollView>

      <Fab
        icon={<Icon name="plus" size="md" color="#1B1B26" />}
        haptic="medium"
        onPress={() => onAddExpense?.()}
        accessibilityLabel="Add expense"
        className="bg-[#BEF04C]"
      />
    </SafeAreaView>
  );
}
ExpenseListScreen.displayName = "ExpenseListScreen";

Recreate the "Expense List Screen" screen in React Native using LumioUI.

Goal: Searchable expenses with receipts Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add finance-expense-list
```

Or pull just the components: `npx lumioui add button data-table fab icon list search-input text`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- imported but not rendered directly — likely used through a sibling or as a utility

### `data-table` — Compact card-bound table: muted uppercase header, 48pt rows, pressable rows, and cells that take strings or rich elements.
- `<DataTable>` ×1

### `fab` — Liquid-glass floating action button — glass disc or filled pill, extended label mode, auto-async loading swap, mount pop
- `<Fab>` ×1

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4

### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1

### `search-input` — Search field with clear button, debounce, focus halo — plus a glass capsule mode that floats over content like iOS 26
- `<SearchInput>` ×1

### `text` — Themed type scale from caption to display.
- `<Text>` ×4

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/finance/expense-list.tsx` exporting ExpenseListScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { DataTable, Glass, Icon, List, SearchInput, Text, type IconName, Fab, } from "@lumioui/ui";
import { type ColorTokens } from "@lumioui/core";
import { BrandMark, LumioMark, Mount, Press, SEPARATOR_INSET, brandKey } from "../shared";

export interface Expense {
  id: string;
  merchant: string;
  category: string;
  icon: IconName;
  amount: string;
  date: string;
  /** Receipt attached — shows the paperclip. */
  receipt?: boolean;
  /** Soft-tint tile background class. */
  tileBg?: string;
  /** Icon tint token — pairs with `tileBg`. */
  tint?: keyof ColorTokens;
}

export interface ExpenseListScreenProps {
  period?: string;
  total?: string;
  expenses?: Expense[];
  onExpensePress?: (id: string) => void;
  onAddExpense?: () => void;
  onBack?: () => void;
}

const DEFAULT_EXPENSES: Expense[] = [
  { id: "e1", merchant: "Sweetgreen", category: "Dining", icon: "utensils", amount: "$16.40", date: "Today", tileBg: "bg-warning/15", tint: "warning" },
  { id: "e2", merchant: "Uber", category: "Transport", icon: "car", amount: "$22.18", date: "Today", receipt: true, tileBg: "bg-chart-2/15", tint: "chart2" },
  { id: "e3", merchant: "Figma", category: "Software", icon: "edit", amount: "$15.00", date: "Yesterday", receipt: true, tileBg: "bg-chart-3/15", tint: "chart3" },
  { id: "e4", merchant: "Blue Bottle", category: "Dining", icon: "coffee", amount: "$7.20", date: "Yesterday", tileBg: "bg-chart-5/15", tint: "chart5" },
  { id: "e5", merchant: "United", category: "Travel", icon: "plane", amount: "$428.00", date: "Sep 18", receipt: true, tileBg: "bg-primary/15", tint: "primary" },
];

/** Expense list — searchable expenses with receipts + add. */
export function ExpenseListScreen({
  period = "This week",
  total = "$489",
  expenses = DEFAULT_EXPENSES,
  onExpensePress,
  onAddExpense,
  onBack,
}: ExpenseListScreenProps) {
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");
  const filtered = expenses.filter(
    (e) =>
      e.merchant.toLowerCase().includes(query.toLowerCase()) ||
      e.category.toLowerCase().includes(query.toLowerCase())
  );

  // Per-category roll-up — the report-style summary an expense screen
  // owes before the itemized list.
  const rollUp = React.useMemo(() => {
    const map = new Map<string, { count: number; total: number }>();
    for (const e of expenses) {
      const amt = parseFloat(e.amount.replace(/[^0-9.-]/g, "")) || 0;
      const cur = map.get(e.category) ?? { count: 0, total: 0 };
      cur.count += 1;
      cur.total += amt;
      map.set(e.category, cur);
    }
    return [...map.entries()]
      .sort((a, b) => b[1].total - a[1].total)
      .map(([category, v]) => ({
        category,
        count: String(v.count),
        total: `$${v.total.toFixed(2)}`,
      }));
  }, [expenses]);

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
        <View className="flex-row items-center justify-between">
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityRole="button"
              accessibilityLabel="Go back"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
          <View className="h-11 w-11" />
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
            <Glass effect="regular" className="absolute inset-0 rounded-full" />
            <LumioMark size={18} />
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Expenses
            </Text>
          </View>
        </View>
      </View>

      <View className="px-4" style={{ paddingTop: insets.top + 60, paddingBottom: 8 }}>
        {/* Running tally — the ledger answer before the list. */}
        <Text variant="muted" className="pb-2 text-xs">
          {filtered.length} entries · {total} this {period.toLowerCase()}
        </Text>
        <SearchInput
          value={query}
          onChangeText={setQuery}
          placeholder="Search expenses"
          accessibilityLabel="Search expenses"
        />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
      >
        <Mount className="px-4 pb-4">
          <DataTable
            columns={[
              { key: "category", title: "Category", flex: 1.6 },
              { key: "count", title: "Expenses", align: "center" },
              { key: "total", title: "Total", align: "right" },
            ]}
            rows={rollUp}
          />
        </Mount>

        <List inset>
          <List.Section title={`${period} · ${total}`}>
            {filtered.map((e, ii) => (
              <React.Fragment key={e.id}>
                {ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
                <List.Item
                  title={e.merchant}
                  subtitle={`${e.category} · ${e.date}`}
                  leading={
                    (() => {
                      const mark = brandKey(e.merchant);
                      return mark ? (
                        <BrandMark brand={mark} size={32} />
                      ) : (
                        <View
                          className={`h-8 w-8 items-center justify-center rounded-2xl ${e.tileBg ?? "bg-muted"}`}
                        >
                          <Icon name={e.icon} size="sm" color={e.tint ?? "foreground"} />
                        </View>
                      );
                    })()
                  }
                  trailing={
                    <View className="flex-row items-center gap-1.5">
                      {e.receipt && (
                        <Icon name="paperclip" size="sm" color="mutedForeground" />
                      )}
                      <Text className="font-medium">{e.amount}</Text>
                    </View>
                  }
                  haptic="light"
                  onPress={() => onExpensePress?.(e.id)}
                  className="py-3"
                />
              </React.Fragment>
            ))}
          </List.Section>
        </List>

        <Mount delay={60} className="mt-4 px-4">
          <Text variant="muted" className="mt-4 text-center text-xs">
            Receipts attached to 3 of 5 expenses
          </Text>
        </Mount>
      </ScrollView>

      <Fab
        icon={<Icon name="plus" size="md" color="#1B1B26" />}
        haptic="medium"
        onPress={() => onAddExpense?.()}
        accessibilityLabel="Add expense"
        className="bg-[#BEF04C]"
      />
    </SafeAreaView>
  );
}
ExpenseListScreen.displayName = "ExpenseListScreen";
```

Screen: https://lumioui.dev/screens/finance-expense-list