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

feat: complete all screens - client tabs, payments list, remittance detail, new ticket, installations tab

Browse Source 
- Client detail: Subscription/Invoices/Payments tabs now fully functional
- Payments: proper list with today's total + live search prefill from client
- Record payment: debounced live search, reference required for non-cash
- Remittances: detail screen with included payments breakdown
- Tickets: status filter chips + create button, new ticket with categories
- Installations: tab now visible with list + confirm flow
- Fix: remove duplicate @react-navigation/elements causing Metro asset error
- Fix: metro.config.js asset resolution from node_modules
This commit is contained in:
Nemo
2026-03-23 21:22:57 +08:00
parent 8f5027413c
commit baed6dc8d5
18 changed files with 1685 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,64 @@
import { useState } from 'react';
import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl, ScrollView } 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' };
const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', MEDIUM: '#D97706', LOW: '#16A34A' };
const STATUS_FILTERS = ['ALL', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'];
export default function TicketsScreen() {
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState('ALL');
const { data, isLoading, refetch, isRefetching } = useQuery({
queryKey: ['tickets'],
queryFn: () => api.get('/api/v1/tickets?limit=50').then(r => r.data?.data ?? r.data),
queryFn: () => api.get('/api/v1/tickets?limit=100').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())
);
const tickets = (data ?? []).filter((t: any) => {
const matchSearch = `${t.subject} ${t.client?.firstName} ${t.client?.lastName}`.toLowerCase().includes(search.toLowerCase());
const matchStatus = statusFilter === 'ALL' || t.status === statusFilter;
return matchSearch && matchStatus;
});
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>
{/* Header */}
<View className="px-4 pt-14 pb-4 bg-primary flex-row justify-between items-center">
<Text className="text-white text-xl font-bold">Tickets</Text>
<TouchableOpacity
className="bg-white/20 rounded-xl px-4 py-2"
onPress={() => router.push('/(app)/tickets/new')}
>
<Text className="text-white font-semibold text-sm">+ New</Text>
</TouchableOpacity>
</View>
<View className="px-4 py-3">
{/* Search */}
<View className="px-4 pt-3 pb-2 bg-white border-b border-gray-100">
<TextInput
className="bg-white border border-gray-200 rounded-xl px-4 py-3"
className="bg-gray-100 border border-gray-200 rounded-xl px-4 py-3 mb-2"
placeholder="Search tickets..."
value={search}
onChangeText={setSearch}
/>
{/* Status filter chips */}
<ScrollView horizontal showsHorizontalScrollIndicator={false} className="pb-1">
{STATUS_FILTERS.map(s => (
<TouchableOpacity
key={s}
onPress={() => setStatusFilter(s)}
className={`rounded-full px-3 py-1.5 mr-2 ${statusFilter === s ? 'bg-primary' : 'bg-gray-100'}`}
>
<Text className={`text-xs font-semibold ${statusFilter === s ? 'text-white' : 'text-gray-600'}`}>
{s.replace('_', ' ')}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
{isLoading ? (
<View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
) : (
@@ -37,22 +66,38 @@ export default function TicketsScreen() {
data={tickets}
keyExtractor={(item) => item.id}
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 24 }}
contentContainerStyle={{ paddingHorizontal: 16, paddingVertical: 12, paddingBottom: 32 }}
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="flex-row justify-between items-start mb-1">
<Text className="font-semibold text-gray-900 flex-1 mr-2" numberOfLines={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>
<View className="flex-row justify-between items-center">
<Text className="text-gray-500 text-sm">
{item.client?.firstName} {item.client?.lastName}
</Text>
<Text className="text-gray-400 text-xs">{item.status?.replace('_', ' ')}</Text>
</View>
</TouchableOpacity>
)}
ListEmptyComponent={<View className="items-center py-16"><Text className="text-gray-400">No tickets found</Text></View>}
ListEmptyComponent={
<View className="items-center py-20">
<Text className="text-4xl mb-3">🎫</Text>
<Text className="text-gray-400 text-base">No tickets found</Text>
<TouchableOpacity
className="mt-4 bg-primary rounded-xl px-6 py-3"
onPress={() => router.push('/(app)/tickets/new')}
>
<Text className="text-white font-semibold">Create First Ticket</Text>
</TouchableOpacity>
</View>
}
/>
)}
</View>