kibin/fiberops-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete Sprint 3 Expo mobile app scaffold + all screens

Browse Source
This commit is contained in:
Nemo
2026-03-23 18:44:25 +08:00
parent 745321e5bd
commit e90ffc9fb3
15 changed files with 1741 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/(app)/tickets/index.tsx
View File

@@ -1,28 +1,38 @@
import { View, Text, FlatList, ActivityIndicator, TouchableOpacity, RefreshControl } from 'react-native';
import { useState } from 'react';
import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'expo-router';
import { router } 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',
};
const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', MEDIUM: '#D97706', LOW: '#6B7280' };
export default function TicketsScreen() {
const router = useRouter();
const [search, setSearch] = useState('');
const { data, isLoading, refetch, isRefetching } = useQuery({
queryKey: ['tickets'],
queryFn: () => api.get('/api/v1/tickets').then(r => r.data?.data ?? r.data?.results ?? r.data),
queryFn: () => api.get('/api/v1/tickets?limit=50').then(r => r.data?.data ?? r.data),
});
const tickets = Array.isArray(data) ? 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 pt-14">
<Text className="text-2xl font-bold text-gray-900 px-4 mb-4">Tickets</Text>
{isLoading ? <ActivityIndicator color="#2563EB" className="mt-10" /> : (
<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}
@@ -34,15 +44,15 @@ export default function TicketsScreen() {
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>
<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-400 text-xs mt-1">{item.clientName} · {item.priority}</Text>
<Text className="text-gray-500 text-sm mt-1">{item.client?.firstName} {item.client?.lastName} · {item.status}</Text>
</TouchableOpacity>
)}
ListEmptyComponent={<Text className="text-gray-400 text-center mt-10">No tickets</Text>}
ListEmptyComponent={<View className="items-center py-16"><Text className="text-gray-400">No tickets found</Text></View>}
/>
)}
</View>