`app/bookings.tsx`

39 lines
import { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import { router } from 'expo-router';
import { api, money, isAuthed } from '../src/api';

const COLOR: Record<string, string> = {
  confirmed: '#0a7d55', pending: '#b8860b', cancelled: '#a33', completed: '#356', refunded: '#777',
};
export default function Bookings() {
  const [items, setItems] = useState<any[]>([]);
  useEffect(() => {
    if (!isAuthed()) { router.replace('/login'); return; }
    api.myBookings().then(r => setItems(r.bookings || [])).catch(() => {});
  }, []);
  return (
    <FlatList style={{ backgroundColor: '#f6f7f5' }} data={items} keyExtractor={x => x.code}
      contentContainerStyle={{ padding: 12 }}
      ListEmptyComponent={<Text style={s.empty}>No trips yet. Explore and book your first stay.</Text>}
      renderItem={({ item }) => (
        <TouchableOpacity style={s.card} onPress={() => router.push(`/listing/${item.place_slug}`)}>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text style={s.name}>{item.place_name}</Text>
            <Text style={[s.badge, { color: COLOR[item.status] || '#555' }]}>{item.status}</Text>
          </View>
          <Text style={s.meta}>{item.code} · {item.check_in || item.slot_start} → {item.check_out || ''}</Text>
          <Text style={s.total}>{money(item.total, item.currency)}</Text>
        </TouchableOpacity>
      )} />
  );
}
const s = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 12, padding: 14, marginBottom: 10, borderWidth: 1, borderColor: '#e8ebe6' },
  name: { fontSize: 16, fontWeight: '700', color: '#1a2b22', flex: 1 },
  badge: { fontWeight: '700', textTransform: 'capitalize' },
  meta: { color: '#6b756e', marginTop: 4, fontSize: 13 },
  total: { marginTop: 8, fontWeight: '700', color: '#0a7d55' },
  empty: { textAlign: 'center', color: '#6b756e', marginTop: 60 },
});