Prior Auth Cases Screen

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

const FILTERS = ["All", "Needs docs", "In review", "Approved"] as const;

const CASES = [
  {
    title: "MRI · Lumbar Spine",
    meta: "James Carter · United Healthcare",
    odds: 78,
    oddsLabel: "High",
    status: "Needs documentation",
    chip: "bg-[#F59E0B] text-[#0B0B0F]",
    seg: "#22C55E",
    initials: "JC",
  },
  {
    title: "Knee MRI · Left",
    meta: "Priya Nair · Aetna",
    odds: 61,
    oddsLabel: "Medium",
    status: "Needs documentation",
    chip: "bg-[#F59E0B] text-[#0B0B0F]",
    seg: "#F59E0B",
    initials: "PN",
  },
  {
    title: "Shoulder X-ray",
    meta: "Marcus Lee · Cigna",
    odds: 92,
    oddsLabel: "High",
    status: "In review",
    chip: "bg-[#2563EB] text-white",
    seg: "#22C55E",
    initials: "ML",
  },
  {
    title: "CT · Abdomen",
    meta: "Sofia Ruiz · Kaiser",
    odds: 97,
    oddsLabel: "Approved",
    status: "Approved",
    chip: "bg-[#15803D] text-white",
    seg: "#22C55E",
    initials: "SR",
  },
] as const;

function MiniMeter({ odds, hex }: { odds: number; hex: string }) {
  const filled = Math.round(odds / 10);
  return (
    <View className="flex-row items-end gap-[3px]">
      {Array.from({ length: 10 }, (_, i) => (
        <View
          key={i}
          className="h-5 w-2 rounded-full"
          style={{ backgroundColor: i < filled ? hex : "#0B0B0F1F" }}
        />
      ))}
    </View>
  );
}

/** Prior auth queue — the list sibling to prior-auth detail: same warm
 *  canvas and AI-odds language, applied per case row with filter chips
 *  and a New request pill. */
export function PriorAuthCasesScreen({
  onOpenCase,
  onNewRequest,
}: {
  onOpenCase?: (title: string) => void;
  onNewRequest?: () => void;
}) {
  const haptics = useHaptic();
  const [filter, setFilter] = React.useState<(typeof FILTERS)[number]>("All");

  const visible = CASES.filter((c) => {
    if (filter === "All") return true;
    if (filter === "Needs docs") return c.status === "Needs documentation";
    return c.status === filter;
  });

  return (
    <View className="flex-1 bg-[#F4F5F9]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        <View className="flex-row items-center gap-3 px-4 pt-1">
          <View className="flex-1">
            <Text className="text-[26px] font-bold tracking-tight text-[#0B0B0F]">Prior auths</Text>
            <Text className="text-[13px] text-[#0B0B0F]/50">8 open · 2 need docs today</Text>
          </View>
          <Press
            accessibilityRole="button"
            accessibilityLabel="Search cases"
            className="h-10 w-10 items-center justify-center rounded-full bg-white"
          >
            <Icon name="search" size="sm" color="#0B0B0F" />
          </Press>
          <Avatar fallback="DR" size="sm" />
        </View>

        {/* Filter chips — dark active, white rest, like the ref's tabs. */}
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          className="mt-4 grow-0"
          contentContainerClassName="flex-row gap-2 px-4"
        >
          {FILTERS.map((f) => {
            const active = f === filter;
            return (
              <Press
                key={f}
                onPress={() => {
                  haptics.selection();
                  setFilter(f);
                }}
                accessibilityRole="button"
                accessibilityLabel={`Filter ${f}`}
                className={cn(
                  "rounded-full px-3.5 py-2",
                  active ? "bg-[#0B0B0F]" : "bg-white"
                )}
              >
                <Text className={cn("text-[12px] font-semibold", active ? "text-white" : "text-[#0B0B0F]/60")}>
                  {f}
                </Text>
              </Press>
            );
          })}
        </ScrollView>

        <ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-3 px-4 pb-32 pt-4">
          {visible.map((c, i) => (
            <Mount key={c.title} delay={i * 60}>
              <Press
                onPress={() => {
                  haptics.light();
                  onOpenCase?.(c.title);
                }}
                accessibilityRole="button"
                accessibilityLabel={`Open ${c.title}`}
                className="gap-3 rounded-3xl bg-white p-4"
              >
                <View className="flex-row items-center gap-2.5">
                  <Avatar fallback={c.initials} size="sm" />
                  <View className="flex-1">
                    <Text className="text-[15px] font-semibold text-[#0B0B0F]">{c.title}</Text>
                    <Text className="text-[12px] text-[#0B0B0F]/50">{c.meta}</Text>
                  </View>
                  <View className={cn("rounded-full px-2 py-1", c.chip.split(" ")[0])}>
                    <Text
                      className="text-[10.5px] font-semibold"
                      style={{ color: c.status === "Needs documentation" ? "#0B0B0F" : "#FFF" }}
                    >
                      {c.status}
                    </Text>
                  </View>
                </View>
                <View className="flex-row items-center justify-between border-t border-[#0B0B0F]/5 pt-3">
                  <MiniMeter odds={c.odds} hex={c.seg} />
                  <View className="flex-row items-center gap-1.5">
                    <Text className="text-[18px] font-bold tracking-tight text-[#0B0B0F]">{c.odds}%</Text>
                    <Text className="text-[11px] text-[#0B0B0F]/40">{c.oddsLabel}</Text>
                    <Icon name="chevron-right" size="sm" color="rgba(0,0,0,0.3)" />
                  </View>
                </View>
              </Press>
            </Mount>
          ))}
        </ScrollView>

        <StickyBottomBar className="px-4">
          <Button
            size="lg"
            className="w-full bg-[#0B0B0F]"
            textClassName="text-white"
            icon={<Icon name="plus" size="sm" color="#FFF" />}
            onPress={() => {
              haptics.medium();
              onNewRequest?.();
            }}
            accessibilityLabel="New prior auth request"
          >
            New request
          </Button>
        </StickyBottomBar>
      </SafeAreaView>
    </View>
  );
}
PriorAuthCasesScreen.displayName = "PriorAuthCasesScreen";

Recreate the "Prior Auth Cases Screen" screen in React Native using LumioUI.

Goal: AI-odds case queue: filter chips, case rows with mini segment meters + status chips, New request pill 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 health-prior-auth-cases
```

Or pull just the components: `npx lumioui add avatar button icon 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

### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×2

### `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>` ×3

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

## 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/health/prior-auth-cases.tsx` exporting PriorAuthCasesScreen. 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 } from "react-native-safe-area-context";
import { Avatar, Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press, StickyBottomBar } from "../shared";

const FILTERS = ["All", "Needs docs", "In review", "Approved"] as const;

const CASES = [
  {
    title: "MRI · Lumbar Spine",
    meta: "James Carter · United Healthcare",
    odds: 78,
    oddsLabel: "High",
    status: "Needs documentation",
    chip: "bg-[#F59E0B] text-[#0B0B0F]",
    seg: "#22C55E",
    initials: "JC",
  },
  {
    title: "Knee MRI · Left",
    meta: "Priya Nair · Aetna",
    odds: 61,
    oddsLabel: "Medium",
    status: "Needs documentation",
    chip: "bg-[#F59E0B] text-[#0B0B0F]",
    seg: "#F59E0B",
    initials: "PN",
  },
  {
    title: "Shoulder X-ray",
    meta: "Marcus Lee · Cigna",
    odds: 92,
    oddsLabel: "High",
    status: "In review",
    chip: "bg-[#2563EB] text-white",
    seg: "#22C55E",
    initials: "ML",
  },
  {
    title: "CT · Abdomen",
    meta: "Sofia Ruiz · Kaiser",
    odds: 97,
    oddsLabel: "Approved",
    status: "Approved",
    chip: "bg-[#15803D] text-white",
    seg: "#22C55E",
    initials: "SR",
  },
] as const;

function MiniMeter({ odds, hex }: { odds: number; hex: string }) {
  const filled = Math.round(odds / 10);
  return (
    <View className="flex-row items-end gap-[3px]">
      {Array.from({ length: 10 }, (_, i) => (
        <View
          key={i}
          className="h-5 w-2 rounded-full"
          style={{ backgroundColor: i < filled ? hex : "#0B0B0F1F" }}
        />
      ))}
    </View>
  );
}

/** Prior auth queue — the list sibling to prior-auth detail: same warm
 *  canvas and AI-odds language, applied per case row with filter chips
 *  and a New request pill. */
export function PriorAuthCasesScreen({
  onOpenCase,
  onNewRequest,
}: {
  onOpenCase?: (title: string) => void;
  onNewRequest?: () => void;
}) {
  const haptics = useHaptic();
  const [filter, setFilter] = React.useState<(typeof FILTERS)[number]>("All");

  const visible = CASES.filter((c) => {
    if (filter === "All") return true;
    if (filter === "Needs docs") return c.status === "Needs documentation";
    return c.status === filter;
  });

  return (
    <View className="flex-1 bg-[#F4F5F9]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        <View className="flex-row items-center gap-3 px-4 pt-1">
          <View className="flex-1">
            <Text className="text-[26px] font-bold tracking-tight text-[#0B0B0F]">Prior auths</Text>
            <Text className="text-[13px] text-[#0B0B0F]/50">8 open · 2 need docs today</Text>
          </View>
          <Press
            accessibilityRole="button"
            accessibilityLabel="Search cases"
            className="h-10 w-10 items-center justify-center rounded-full bg-white"
          >
            <Icon name="search" size="sm" color="#0B0B0F" />
          </Press>
          <Avatar fallback="DR" size="sm" />
        </View>

        {/* Filter chips — dark active, white rest, like the ref's tabs. */}
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          className="mt-4 grow-0"
          contentContainerClassName="flex-row gap-2 px-4"
        >
          {FILTERS.map((f) => {
            const active = f === filter;
            return (
              <Press
                key={f}
                onPress={() => {
                  haptics.selection();
                  setFilter(f);
                }}
                accessibilityRole="button"
                accessibilityLabel={`Filter ${f}`}
                className={cn(
                  "rounded-full px-3.5 py-2",
                  active ? "bg-[#0B0B0F]" : "bg-white"
                )}
              >
                <Text className={cn("text-[12px] font-semibold", active ? "text-white" : "text-[#0B0B0F]/60")}>
                  {f}
                </Text>
              </Press>
            );
          })}
        </ScrollView>

        <ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-3 px-4 pb-32 pt-4">
          {visible.map((c, i) => (
            <Mount key={c.title} delay={i * 60}>
              <Press
                onPress={() => {
                  haptics.light();
                  onOpenCase?.(c.title);
                }}
                accessibilityRole="button"
                accessibilityLabel={`Open ${c.title}`}
                className="gap-3 rounded-3xl bg-white p-4"
              >
                <View className="flex-row items-center gap-2.5">
                  <Avatar fallback={c.initials} size="sm" />
                  <View className="flex-1">
                    <Text className="text-[15px] font-semibold text-[#0B0B0F]">{c.title}</Text>
                    <Text className="text-[12px] text-[#0B0B0F]/50">{c.meta}</Text>
                  </View>
                  <View className={cn("rounded-full px-2 py-1", c.chip.split(" ")[0])}>
                    <Text
                      className="text-[10.5px] font-semibold"
                      style={{ color: c.status === "Needs documentation" ? "#0B0B0F" : "#FFF" }}
                    >
                      {c.status}
                    </Text>
                  </View>
                </View>
                <View className="flex-row items-center justify-between border-t border-[#0B0B0F]/5 pt-3">
                  <MiniMeter odds={c.odds} hex={c.seg} />
                  <View className="flex-row items-center gap-1.5">
                    <Text className="text-[18px] font-bold tracking-tight text-[#0B0B0F]">{c.odds}%</Text>
                    <Text className="text-[11px] text-[#0B0B0F]/40">{c.oddsLabel}</Text>
                    <Icon name="chevron-right" size="sm" color="rgba(0,0,0,0.3)" />
                  </View>
                </View>
              </Press>
            </Mount>
          ))}
        </ScrollView>

        <StickyBottomBar className="px-4">
          <Button
            size="lg"
            className="w-full bg-[#0B0B0F]"
            textClassName="text-white"
            icon={<Icon name="plus" size="sm" color="#FFF" />}
            onPress={() => {
              haptics.medium();
              onNewRequest?.();
            }}
            accessibilityLabel="New prior auth request"
          >
            New request
          </Button>
        </StickyBottomBar>
      </SafeAreaView>
    </View>
  );
}
PriorAuthCasesScreen.displayName = "PriorAuthCasesScreen";
```

Screen: https://lumioui.dev/screens/health-prior-auth-cases