61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { router } from 'expo-router';
|
|
import { api } from '../../../services/api';
|
|
|
|
const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', MEDIUM: '#D97706', LOW: '#6B7280' };
|
|
|
|
export default function TicketsScreen() {
|
|
const [search, setSearch] = useState('');
|
|
const { data, isLoading, refetch, isRefetching } = useQuery({
|
|
queryKey: ['tickets'],
|
|
queryFn: () => api.get('/api/v1/tickets?limit=50').then(r => r.data?.data ?? r.data),
|
|
});
|
|
|
|
const tickets = (data ?? []).filter((t: any) =>
|
|
`${t.subject} ${t.client?.firstName} ${t.client?.lastName}`.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<View className="flex-1 bg-gray-50">
|
|
<View className="px-4 pt-14 pb-4 bg-primary">
|
|
<Text className="text-white text-xl font-bold">Helpdesk Tickets</Text>
|
|
</View>
|
|
<View className="px-4 py-3">
|
|
<TextInput
|
|
className="bg-white border border-gray-200 rounded-xl px-4 py-3"
|
|
placeholder="Search tickets..."
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</View>
|
|
{isLoading ? (
|
|
<View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
|
|
) : (
|
|
<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="font-semibold text-gray-900 flex-1 mr-2">{item.subject}</Text>
|
|
<View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${PRIORITY_COLOR[item.priority] ?? '#6B7280'}20` }}>
|
|
<Text className="text-xs font-medium" style={{ color: PRIORITY_COLOR[item.priority] ?? '#6B7280' }}>{item.priority}</Text>
|
|
</View>
|
|
</View>
|
|
<Text className="text-gray-500 text-sm mt-1">{item.client?.firstName} {item.client?.lastName} · {item.status}</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
ListEmptyComponent={<View className="items-center py-16"><Text className="text-gray-400">No tickets found</Text></View>}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|