51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import { View, Text, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl } from 'react-native';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useRouter } from 'expo-router';
|
|
import { api } from '../../../services/api';
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
open: 'bg-yellow-100 text-yellow-700',
|
|
in_progress: 'bg-blue-100 text-blue-700',
|
|
resolved: 'bg-green-100 text-green-700',
|
|
closed: 'bg-gray-100 text-gray-500',
|
|
};
|
|
|
|
export default function TicketsScreen() {
|
|
const router = useRouter();
|
|
const { data, isLoading, refetch, isRefetching } = useQuery({
|
|
queryKey: ['tickets'],
|
|
queryFn: () => api.get('/api/v1/tickets').then(r => r.data?.data ?? r.data?.results ?? r.data),
|
|
});
|
|
|
|
const tickets = Array.isArray(data) ? data : [];
|
|
|
|
return (
|
|
<View className="flex-1 bg-gray-50 pt-14">
|
|
<Text className="text-2xl font-bold text-gray-900 px-4 mb-4">Tickets</Text>
|
|
{isLoading ? <ActivityIndicator color="#2563EB" className="mt-10" /> : (
|
|
<FlatList
|
|
data={tickets}
|
|
keyExtractor={(item) => item.id}
|
|
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
|
|
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 24 }}
|
|
renderItem={({ item }) => (
|
|
<TouchableOpacity
|
|
className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
|
|
onPress={() => router.push(`/(app)/tickets/${item.id}`)}
|
|
>
|
|
<View className="flex-row justify-between items-start">
|
|
<Text className="flex-1 font-medium text-gray-900 mr-2">{item.subject}</Text>
|
|
<View className={`px-2 py-0.5 rounded-full ${STATUS_COLOR[item.status] ?? 'bg-gray-100 text-gray-500'}`}>
|
|
<Text className="text-xs font-medium">{item.status}</Text>
|
|
</View>
|
|
</View>
|
|
<Text className="text-gray-400 text-xs mt-1">{item.clientName} · {item.priority}</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
ListEmptyComponent={<Text className="text-gray-400 text-center mt-10">No tickets</Text>}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|