Invoice Detail Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, StickyBottomBar } from "../shared";

export interface InvoiceLine {
  id: string;
  description: string;
  qty: string;
  amount: string;
}

export interface InvoiceDetailScreenProps {
  number?: string;
  client?: string;
  issued?: string;
  due?: string;
  status?: "paid" | "sent" | "overdue";
  lines?: InvoiceLine[];
  subtotal?: string;
  tax?: string;
  total?: string;
  onPay?: () => void;
  onSend?: () => void;
  onBack?: () => void;
}

const DEFAULT_LINES: InvoiceLine[] = [
  { id: "l1", description: "Design system audit", qty: "24 hrs", amount: "$2,880" },
  { id: "l2", description: "Motion prototypes", qty: "12 hrs", amount: "$1,560" },
  { id: "l3", description: "Token migration support", qty: "6 hrs", amount: "$720" },
];

const STATUS_STYLE: Record<
  NonNullable<InvoiceDetailScreenProps["status"]>,
  { label: string; cls: string }
> = {
  paid: { label: "Paid", cls: "bg-success/15 text-success" },
  sent: { label: "Sent", cls: "bg-primary/15 text-primary" },
  overdue: { label: "Overdue", cls: "bg-destructive/15 text-destructive" },
};

/** Invoice detail — paper-style line items, totals, pay/send footer. */
export function InvoiceDetailScreen({
  number = "INV-0042",
  client = "Northwind Studio",
  issued = "Sep 12, 2026",
  due = "Oct 12, 2026",
  status = "sent",
  lines = DEFAULT_LINES,
  subtotal = "$5,160",
  tax = "$516 (10%)",
  total = "$5,676",
  onPay,
  onSend,
  onBack,
}: InvoiceDetailScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const badge = STATUS_STYLE[status] ?? STATUS_STYLE.sent;

  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">
              Invoice
            </Text>
          </View>
        </View>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 96 }}
      >
        {/* Header card — invoice no, client, dates, status pill. */}
        <Mount className="mx-4 gap-1 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
          <View className="flex-row items-center justify-between">
            <Text className="text-2xl font-bold tracking-tight">{number}</Text>
            <View className={`rounded-full px-2.5 py-1 ${badge.cls.split(" ")[0]}`}>
              <Text className={`text-xs font-medium ${badge.cls.split(" ")[1]}`}>
                {badge.label}
              </Text>
            </View>
          </View>
          <Text className="text-sm text-muted-foreground">{client}</Text>
          <Text variant="small" className="pt-1 text-muted-foreground">
            Issued {issued} · Due {due}
          </Text>
          {/* Client tracking — invoicing's killer detail is knowing they saw it. */}
          <View className="mt-1.5 flex-row items-center gap-1.5">
            <Icon name="eye" size="sm" color="mutedForeground" />
            <Text variant="muted" className="text-xs">
              Viewed by the client Sep 20, 3:12 PM
            </Text>
          </View>
        </Mount>

        {/* Line items — the paper part of the invoice. */}
        <Mount delay={60} className="mt-4">
          <List inset>
            <List.Section title="Items">
              {lines.map((l, ii) => (
                <React.Fragment key={l.id}>
                  {ii > 0 && <List.Separator className="ml-4" />}
                  <List.Item
                    title={l.description}
                    subtitle={l.qty}
                    trailing={<Text className="font-medium">{l.amount}</Text>}
                    className="py-3"
                  />
                </React.Fragment>
              ))}
            </List.Section>
          </List>
        </Mount>

        {/* Totals. */}
        <Mount delay={120} className="mx-4 mt-4 gap-2 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="text-muted-foreground">
              Subtotal
            </Text>
            <Text className="text-sm">{subtotal}</Text>
          </View>
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="text-muted-foreground">
              Tax
            </Text>
            <Text className="text-sm">{tax}</Text>
          </View>
          <View className="flex-row items-center justify-between border-t border-border pt-2">
            <Text className="text-sm font-semibold">Total</Text>
            <Text className="text-lg font-bold">{total}</Text>
          </View>
        </Mount>

        <Text variant="muted" className="mx-4 mt-4 text-center text-xs">
          Net-30 terms · due within 30 days of issue
        </Text>
      </ScrollView>

      <StickyBottomBar>
        <Button
          tone="inverse"
          haptic="light"
          onPress={() => {
            haptics.light();
            if (status === "sent") onSend?.();
            else onPay?.();
          }}
          accessibilityLabel={status === "sent" ? "Resend invoice" : "Record payment"}
          className="w-full bg-[#1B1B26]"
        >
          {status === "sent" ? "Resend invoice" : "Record payment"}
        </Button>
      </StickyBottomBar>
    </SafeAreaView>
  );
}
InvoiceDetailScreen.displayName = "InvoiceDetailScreen";

Recreate the "Invoice Detail Screen" screen in React Native using LumioUI.

Goal: Invoice line items and totals 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-invoice-detail
```

Or pull just the components: `npx lumioui add button icon list 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.
- `<Button>` ×1

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

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

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

## 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/invoice-detail.tsx` exporting InvoiceDetailScreen. 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 { Button, Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, StickyBottomBar } from "../shared";

export interface InvoiceLine {
  id: string;
  description: string;
  qty: string;
  amount: string;
}

export interface InvoiceDetailScreenProps {
  number?: string;
  client?: string;
  issued?: string;
  due?: string;
  status?: "paid" | "sent" | "overdue";
  lines?: InvoiceLine[];
  subtotal?: string;
  tax?: string;
  total?: string;
  onPay?: () => void;
  onSend?: () => void;
  onBack?: () => void;
}

const DEFAULT_LINES: InvoiceLine[] = [
  { id: "l1", description: "Design system audit", qty: "24 hrs", amount: "$2,880" },
  { id: "l2", description: "Motion prototypes", qty: "12 hrs", amount: "$1,560" },
  { id: "l3", description: "Token migration support", qty: "6 hrs", amount: "$720" },
];

const STATUS_STYLE: Record<
  NonNullable<InvoiceDetailScreenProps["status"]>,
  { label: string; cls: string }
> = {
  paid: { label: "Paid", cls: "bg-success/15 text-success" },
  sent: { label: "Sent", cls: "bg-primary/15 text-primary" },
  overdue: { label: "Overdue", cls: "bg-destructive/15 text-destructive" },
};

/** Invoice detail — paper-style line items, totals, pay/send footer. */
export function InvoiceDetailScreen({
  number = "INV-0042",
  client = "Northwind Studio",
  issued = "Sep 12, 2026",
  due = "Oct 12, 2026",
  status = "sent",
  lines = DEFAULT_LINES,
  subtotal = "$5,160",
  tax = "$516 (10%)",
  total = "$5,676",
  onPay,
  onSend,
  onBack,
}: InvoiceDetailScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const badge = STATUS_STYLE[status] ?? STATUS_STYLE.sent;

  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">
              Invoice
            </Text>
          </View>
        </View>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 96 }}
      >
        {/* Header card — invoice no, client, dates, status pill. */}
        <Mount className="mx-4 gap-1 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
          <View className="flex-row items-center justify-between">
            <Text className="text-2xl font-bold tracking-tight">{number}</Text>
            <View className={`rounded-full px-2.5 py-1 ${badge.cls.split(" ")[0]}`}>
              <Text className={`text-xs font-medium ${badge.cls.split(" ")[1]}`}>
                {badge.label}
              </Text>
            </View>
          </View>
          <Text className="text-sm text-muted-foreground">{client}</Text>
          <Text variant="small" className="pt-1 text-muted-foreground">
            Issued {issued} · Due {due}
          </Text>
          {/* Client tracking — invoicing's killer detail is knowing they saw it. */}
          <View className="mt-1.5 flex-row items-center gap-1.5">
            <Icon name="eye" size="sm" color="mutedForeground" />
            <Text variant="muted" className="text-xs">
              Viewed by the client Sep 20, 3:12 PM
            </Text>
          </View>
        </Mount>

        {/* Line items — the paper part of the invoice. */}
        <Mount delay={60} className="mt-4">
          <List inset>
            <List.Section title="Items">
              {lines.map((l, ii) => (
                <React.Fragment key={l.id}>
                  {ii > 0 && <List.Separator className="ml-4" />}
                  <List.Item
                    title={l.description}
                    subtitle={l.qty}
                    trailing={<Text className="font-medium">{l.amount}</Text>}
                    className="py-3"
                  />
                </React.Fragment>
              ))}
            </List.Section>
          </List>
        </Mount>

        {/* Totals. */}
        <Mount delay={120} className="mx-4 mt-4 gap-2 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="text-muted-foreground">
              Subtotal
            </Text>
            <Text className="text-sm">{subtotal}</Text>
          </View>
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="text-muted-foreground">
              Tax
            </Text>
            <Text className="text-sm">{tax}</Text>
          </View>
          <View className="flex-row items-center justify-between border-t border-border pt-2">
            <Text className="text-sm font-semibold">Total</Text>
            <Text className="text-lg font-bold">{total}</Text>
          </View>
        </Mount>

        <Text variant="muted" className="mx-4 mt-4 text-center text-xs">
          Net-30 terms · due within 30 days of issue
        </Text>
      </ScrollView>

      <StickyBottomBar>
        <Button
          tone="inverse"
          haptic="light"
          onPress={() => {
            haptics.light();
            if (status === "sent") onSend?.();
            else onPay?.();
          }}
          accessibilityLabel={status === "sent" ? "Resend invoice" : "Record payment"}
          className="w-full bg-[#1B1B26]"
        >
          {status === "sent" ? "Resend invoice" : "Record payment"}
        </Button>
      </StickyBottomBar>
    </SafeAreaView>
  );
}
InvoiceDetailScreen.displayName = "InvoiceDetailScreen";
```

Screen: https://lumioui.dev/screens/finance-invoice-detail