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

62
app/(app)/tickets/[id].tsx
View File

@@ -1,58 +1,62 @@
import { View, Text, ScrollView, ActivityIndicator, TouchableOpacity, TextInput, Alert } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { View, Text, ScrollView, TextInput, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../../../services/api';
export default function TicketDetailScreen() {
const { id } = useLocalSearchParams<{ id: string }>();
const router = useRouter();
const [reply, setReply] = useState('');
const { data: ticket, isLoading, refetch } = useQuery({
const qc = useQueryClient();
const { data, isLoading } = useQuery({
queryKey: ['ticket', id],
queryFn: () => api.get(`/api/v1/tickets/${id}`).then(r => r.data),
});
const sendReply = async () => {
if (!reply.trim()) return;
try {
await api.post(`/api/v1/tickets/${id}/messages`, { message: reply });
setReply('');
refetch();
} catch { Alert.alert('Error', 'Could not send reply.'); }
};
const addReply = useMutation({
mutationFn: () => api.post(`/api/v1/tickets/${id}/messages`, { message: reply }),
onSuccess: () => { setReply(''); qc.invalidateQueries({ queryKey: ['ticket', id] }); },
onError: () => Alert.alert('Error', 'Could not send reply.'),
});
if (isLoading) return <ActivityIndicator color="#2563EB" className="flex-1 mt-20" />;
if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;
return (
<View className="flex-1 bg-gray-50">
<View className="pt-14 pb-4 px-4 bg-white border-b border-gray-100">
<TouchableOpacity onPress={() => router.back()} className="mb-2">
<Text className="text-primary text-sm">← Tickets</Text>
<View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
<TouchableOpacity onPress={() => router.back()} className="mr-3">
<Text className="text-white text-lg">←</Text>
</TouchableOpacity>
<Text className="text-lg font-bold text-gray-900">{ticket?.subject}</Text>
<Text className="text-gray-500 text-xs">{ticket?.clientName} · {ticket?.status}</Text>
<View className="flex-1">
<Text className="text-white font-bold" numberOfLines={1}>{data?.subject}</Text>
<Text className="text-white/70 text-xs">{data?.status} · {data?.priority}</Text>
</View>
</View>
<ScrollView className="flex-1 px-4 py-4">
{(ticket?.messages ?? []).map((m: any) => (
<View key={m.id} className={`mb-3 p-3 rounded-xl max-w-xs ${m.senderType === 'staff' ? 'bg-primary self-end' : 'bg-white self-start border border-gray-100'}`}>
<Text className={m.senderType === 'staff' ? 'text-white text-sm' : 'text-gray-900 text-sm'}>{m.message}</Text>
<Text className={`text-xs mt-1 ${m.senderType === 'staff' ? 'text-blue-200' : 'text-gray-400'}`}>{m.senderName}</Text>
{(data?.messages ?? []).map((m: any) => (
<View key={m.id} className={`mb-3 max-w-xs ${m.senderType === 'AGENT' ? 'self-end items-end' : 'self-start items-start'}`}>
<View className={`rounded-2xl px-4 py-3 ${m.senderType === 'AGENT' ? 'bg-primary' : 'bg-white border border-gray-100'}`}>
<Text className={m.senderType === 'AGENT' ? 'text-white' : 'text-gray-900'}>{m.message}</Text>
</View>
<Text className="text-gray-400 text-xs mt-1">{m.senderName}</Text>
</View>
))}
</ScrollView>
<View className="px-4 py-3 bg-white border-t border-gray-100 flex-row gap-2">
<View className="flex-row px-4 py-3 bg-white border-t border-gray-100">
<TextInput
className="flex-1 border border-gray-200 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
className="flex-1 bg-gray-100 rounded-xl px-4 py-3 mr-2"
placeholder="Type a reply..."
value={reply}
onChangeText={setReply}
multiline
/>
<TouchableOpacity className="bg-primary rounded-xl px-4 items-center justify-center" onPress={sendReply}>
<Text className="text-white font-medium text-sm">Send</Text>
<TouchableOpacity
className="bg-primary rounded-xl px-4 items-center justify-center"
onPress={() => reply.trim() && addReply.mutate()}
disabled={addReply.isPending}
>
{addReply.isPending ? <ActivityIndicator color="white" /> : <Text className="text-white font-semibold">Send</Text>}
</TouchableOpacity>
</View>
</View>