---
name: money-expo-ui
description: Ekran implementasyonları ve NativeWind styling. Premium dark theme, animasyonlar, empty/loading states, safe area. Use when building screens, components, or UI in Money Expo.
---

# Money Expo — UI Agent

Ekran ve NativeWind styling için Money Expo domain uzmanı.

## Sorumluluklar

- Ekran component'leri
- NativeWind (Tailwind) styling
- Premium dark theme (Revolut-style)
- Animasyonlar (react-native-reanimated)
- Empty / loading states
- Safe area yönetimi

## Design System

### Renk Paleti (Zinc-based Premium Dark)

```typescript
const colors = {
  background: '#09090b',       // Near-black (Zinc-950)
  surface: '#141418',          // Dark surface
  'surface-lighter': '#1e1e24', // Elevated surface
  'surface-dark': '#0e0e12',   // Deeper surface
  card: '#141418',
  sheet: '#0c0c10',            // Bottom sheet bg
  'input-border': '#27272a',   // Zinc-800
  muted: '#71717a',            // Zinc-500 (muted text)
  primary: '#06f9a0',          // Brand green accent
  success: '#06f9a0',
  warning: '#FFB800',
  danger: '#FF4B4B',
  info: '#4B8BFF',
  text: {
    primary: '#FAFAFA',
    secondary: 'rgba(250,250,250,0.5)',
    tertiary: 'rgba(250,250,250,0.25)',
  },
};

const statusConfig = {
  ODENDI: { text: 'ÖDENDİ', color: '#06f9a0' },
  BEKLIYOR: { text: 'BEKLİYOR', color: '#FFB800' },
  GECIKMIS: { text: 'GECİKMİŞ', color: '#FF4B4B' },
  ATLANDI: { text: 'ATLANDI', color: '#71717a' },
};
```

## UI Pattern'leri

**Kart (shadow-based, border yok):**
```tsx
<Card className="p-5">
  {/* içerik */}
</Card>
// Card bileşeni: bg-surface, borderRadius: 16, borderCurve: 'continuous'
// boxShadow: '0 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05)'
```

**Boş Durum (animasyonlu):**
```tsx
<EmptyState
  materialIcon="calendar-blank"
  title="Ödeme Bulunamadı"
  description="Bu ay için henüz ödeme kaydı yok."
/>
// FadeIn + FadeInDown stagger animasyonları ile
```

**Yükleme:**
```tsx
<LoadingSpinner />
// ActivityIndicator color="#06f9a0"
```

**Safe Area:**
```tsx
import { useSafeAreaInsets } from 'react-native-safe-area-context';
// Screen bileşeni SafeAreaView ile bg: '#09090b'
```

## Animasyon Pattern'leri

```tsx
import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';

// Ekran içeriği
<Animated.View entering={FadeIn.duration(400)}>

// Liste elemanları (stagger)
<Animated.View entering={FadeInDown.duration(400).delay(index * 60)}>

// Button scale efekti
const scale = useSharedValue(1);
onPressIn: scale.value = withSpring(0.97, { damping: 15, stiffness: 400 });
onPressOut: scale.value = withSpring(1, ...);

// Input hata shake
shakeX.value = withSequence(
  withTiming(-8, { duration: 50 }),
  withTiming(8, { duration: 50 }),
  ...
  withSpring(0)
);
```

## Shadow Standardı

```tsx
// Kartlar
boxShadow: '0 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05)'

// Elevated popover/menu
boxShadow: '0 8px 32px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.08)'

// FAB
boxShadow: '0 8px 24px rgba(6,249,160,0.25), 0 2px 8px rgba(0,0,0,0.3)'
```

## UX Gereksinimleri

1. Her veri yüklemesinde loading state
2. Liste boşken empty state (materialIcon + açıklama)
3. Silme işlemlerinde onay dialog
4. Pull-to-refresh (Dashboard, Monthly Payments)
5. Tutarlar `Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' })` ile
6. `fontVariant: ['tabular-nums']` ile hizalı sayılar (AmountDisplay)
7. `borderCurve: 'continuous'` ile Apple HIG uyumlu köşeler

## Bağımlılıklar

- Navigation Agent: Routing
- Payment/Installment Agent: Veri