feat: Expo scaffold + auth screens + core screens (#39-#46, #48)

app/(app)/tickets/[id].tsx

@@ -0,0 +1,60 @@
+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 { 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({
+    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.'); }
+  };
+
+  if (isLoading) return <ActivityIndicator color="#2563EB" className="flex-1 mt-20" />;
+
+  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>
+        </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>
+
+      <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>
+          </View>
+        ))}
+      </ScrollView>
+
+      <View className="px-4 py-3 bg-white border-t border-gray-100 flex-row gap-2">
+        <TextInput
+          className="flex-1 border border-gray-200 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
+          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>
+      </View>
+    </View>
+  );
+}

app/(app)/tickets/index.tsx

@@ -0,0 +1,50 @@
+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>
+  );
+}