History & Tracking

const groups: { [key: string]: any[] } = {};
filtered.forEach(item => {
  const dateObj = getSafeDate(item);
  const monthName = dateObj.toLocaleString('es-MX', { 
    month: 'long', 
    year: 'numeric' 
  });
  const key = monthName.charAt(0).toUpperCase() + monthName.slice(1);
  if (!groups[key]) groups[key] = [];
  groups[key].push(item);
});

filtered.sort((a, b) => 
  getSafeDate(b).getTime() - getSafeDate(a).getTime()
);

let dayText = "--";
let monthText = "---";
if (item.date && typeof item.date === 'string') {
  const parts = item.date.split('/');
  if (parts.length === 3) {
    dayText = parts[0];
    const months = [
      "ENE", "FEB", "MAR", "ABR", "MAY", "JUN", 
      "JUL", "AGO", "SEP", "OCT", "NOV", "DIC"
    ];
    monthText = months[parseInt(parts[1]) - 1] || "---";
  }
}

if (filterCard) {
  filtered = filtered.filter(item => item.cardId === filterCard);
}

if (startDate || endDate) {
  filtered = filtered.filter(item => {
    const itemDate = getSafeDate(item);
    const checkDate = new Date(itemDate);
    checkDate.setHours(0, 0, 0, 0);

    if (startDate) {
      const start = new Date(startDate); 
      start.setHours(0, 0, 0, 0);
      if (checkDate < start) return false;
    }
    if (endDate) {
      const end = new Date(endDate); 
      end.setHours(23, 59, 59, 999);
      if (checkDate > end) return false;
    }
    return true;
  });
}

const clearFilters = () => {
  setFilterCard(null);
  setStartDate(null);
  setEndDate(null);
};

const onRefresh = useCallback(() => {
  setRefreshing(true);
  fetchData();
}, []);

<SectionList
  refreshControl={
    <RefreshControl 
      refreshing={refreshing} 
      onRefresh={onRefresh} 
      colors={['#000']} 
      progressBackgroundColor="#FFE100"
    />
  }
/>

const hasPenalty = item.penaltyApplied > 0;

{hasPenalty && (
  <Text style={{color: '#D32F2F', fontWeight: 'bold', fontSize: 14}}>
    -{formatCurrency(item.penaltyApplied)}
  </Text>
)}

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat('es-MX', { 
    style: 'currency', 
    currency: 'MXN' 
  }).format(amount || 0);
};

ListEmptyComponent={
  <View style={styles.emptyContainer}>
    <Ionicons name="receipt-outline" size={60} color="#DDD" />
    <Text style={styles.emptyText}>Sin movimientos recientes.</Text>
  </View>
}

const fetchData = async () => {
  if (!auth.currentUser) return;
  
  const qRes = query(
    collection(db, 'reservations'),
    where('clientId', '==', auth.currentUser.uid),
    orderBy('createdAt', 'desc') 
  );
  
  const resSnap = await getDocs(qRes);
  const fetchedReservations = resSnap.docs.map(d => ({ 
    id: d.id, 
    ...d.data() 
  }));
  
  setRawList(fetchedReservations);
};

const getSafeDate = (item: any): Date => {
  // 1. Firestore Timestamp
  if (item.startTime && item.startTime.toDate) 
    return item.startTime.toDate();
  
  // 2. Legacy string format "DD/MM/YYYY"
  if (item.date && typeof item.date === 'string') {
    const parts = item.date.split('/');
    if (parts.length === 3) {
      const [d, m, y] = parts.map(Number);
      return new Date(y, m - 1, d);
    }
  }
  
  return new Date(0); // Fallback
};