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

2026-03-23 18:44:25 +08:00
parent 745321e5bd
commit e90ffc9fb3
15 changed files with 1741 additions and 250 deletions
--- a/app/(app)/tickets/[id].tsx
+++ b/app/(app)/tickets/[id].tsx
@@ -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>
--- a/app/(app)/tickets/index.tsx
+++ b/app/(app)/tickets/index.tsx
@@ -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>