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

1
app.json
View File

@@ -27,6 +27,7 @@
"favicon": "./assets/favicon.png" "favicon": "./assets/favicon.png"
}, },
"scheme": "fiberops", "scheme": "fiberops",
"owner": "juankibin",
"plugins": [ "plugins": [
"expo-router", "expo-router",
"expo-secure-store", "expo-secure-store",

109
app/(app)/clients/[id].tsx
View File

@@ -1,111 +1,68 @@
import { View, Text, ScrollView, ActivityIndicator, TouchableOpacity, Linking } from 'react-native'; import { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Linking } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router'; import { useLocalSearchParams, router } from 'expo-router';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { api } from '../../../services/api'; import { api } from '../../../services/api';
const TABS = ['Profile', 'Subscription', 'Invoices', 'Payments'];
export default function ClientDetailScreen() { export default function ClientDetailScreen() {
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const [tab, setTab] = useState<'profile' | 'subscription' | 'invoices' | 'payments'>('profile'); const [tab, setTab] = useState('Profile');
const { data: client, isLoading } = useQuery({ const { data: client, isLoading } = useQuery({
queryKey: ['client', id], queryKey: ['client', id],
queryFn: () => api.get(`/api/v1/clients/${id}`).then(r => r.data), queryFn: () => api.get(`/api/v1/clients/${id}`).then(r => r.data),
}); });
const { data: invoices } = useQuery({
queryKey: ['client-invoices', id],
queryFn: () => api.get(`/api/v1/invoices?clientId=${id}&limit=20`).then(r => r.data?.data ?? r.data),
enabled: tab === 'invoices',
});
const { data: payments } = useQuery({
queryKey: ['client-payments', id],
queryFn: () => api.get(`/api/v1/clients/${id}/payments`).then(r => r.data?.data ?? r.data),
enabled: tab === 'payments',
});
if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>; if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;
const TABS = ['profile', 'subscription', 'invoices', 'payments'] as const;
return ( return (
<View className="flex-1 bg-gray-50"> <View className="flex-1 bg-gray-50">
<View className="px-4 pt-14 pb-3 bg-white border-b border-gray-100"> <View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
<TouchableOpacity onPress={() => router.back()} className="mb-2"> <TouchableOpacity onPress={() => router.back()} className="mr-3">
<Text className="text-primary">← Back</Text> <Text className="text-white text-lg">←</Text>
</TouchableOpacity> </TouchableOpacity>
<Text className="text-xl font-bold text-gray-900">{client?.firstName} {client?.lastName}</Text> <View>
<Text className="text-gray-500 text-sm">{client?.accountNumber}</Text> <Text className="text-white font-bold text-lg">{client?.firstName} {client?.lastName}</Text>
<View className="flex-row mt-3 gap-2"> <Text className="text-white/70 text-sm">{client?.accountNumber}</Text>
</View>
</View>
<View className="flex-row bg-white border-b border-gray-100">
{TABS.map(t => ( {TABS.map(t => (
<TouchableOpacity key={t} onPress={() => setTab(t)} <TouchableOpacity key={t} onPress={() => setTab(t)} className={`flex-1 py-3 items-center border-b-2 ${tab === t ? 'border-primary' : 'border-transparent'}`}>
className={`px-3 py-1.5 rounded-full ${tab === t ? 'bg-primary' : 'bg-gray-100'}`}> <Text className={`text-sm font-medium ${tab === t ? 'text-primary' : 'text-gray-500'}`}>{t}</Text>
<Text className={`text-xs font-medium capitalize ${tab === t ? 'text-white' : 'text-gray-600'}`}>{t}</Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
</View>
<ScrollView className="flex-1 px-4 py-4"> <ScrollView className="flex-1 px-4 py-4">
{tab === 'profile' && ( {tab === 'Profile' && (
<View className="bg-white rounded-2xl border border-gray-100"> <View className="bg-white rounded-2xl border border-gray-100">
{[ {[
{ label: 'Full Name', value: `${client?.firstName} ${client?.lastName}` }, { label: 'Account #', value: client?.accountNumber },
{ label: 'Phone', value: client?.phone, action: () => Linking.openURL(`tel:${client?.phone}`) }, { label: 'Status', value: client?.status },
{ label: 'Email', value: client?.email }, { label: 'Email', value: client?.email },
{ label: 'Phone', value: client?.phone, onPress: () => client?.phone && Linking.openURL(`tel:${client.phone}`) },
{ label: 'Address', value: client?.address }, { label: 'Address', value: client?.address },
{ label: 'Area', value: client?.area?.name }, { label: 'Area', value: client?.area?.name },
{ label: 'Status', value: client?.status }, ].map((item, i) => (
].map((row, i) => ( <TouchableOpacity
<TouchableOpacity key={row.label} onPress={row.action} key={item.label}
className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}> disabled={!item.onPress}
<Text className="text-gray-500 text-xs mb-0.5">{row.label}</Text> onPress={item.onPress}
<Text className={`text-gray-900 font-medium ${row.action ? 'text-primary' : ''}`}>{row.value ?? '—'}</Text> className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}
>
<Text className="text-gray-500 text-xs">{item.label}</Text>
<Text className={`font-medium mt-0.5 ${item.onPress ? 'text-primary' : 'text-gray-900'}`}>{item.value ?? '—'}</Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
)} )}
{tab === 'Subscription' && <Text className="text-gray-500 text-center py-10">Subscription details coming soon</Text>}
{tab === 'subscription' && ( {tab === 'Invoices' && <Text className="text-gray-500 text-center py-10">Invoices coming soon</Text>}
<View className="bg-white rounded-2xl border border-gray-100 p-4"> {tab === 'Payments' && <Text className="text-gray-500 text-center py-10">Payments coming soon</Text>}
<Text className="font-semibold text-gray-900 mb-3">Current Subscription</Text>
{client?.subscription ? (
<>
<Text className="text-gray-700">Plan: <Text className="font-medium">{client.subscription.plan?.name}</Text></Text>
<Text className="text-gray-700 mt-1">Status: <Text className="font-medium capitalize">{client.subscription.status}</Text></Text>
<Text className="text-gray-700 mt-1">Billing Day: <Text className="font-medium">{client.subscription.billingDay}</Text></Text>
<Text className="text-gray-700 mt-1">Monthly: <Text className="font-medium">₱{client.subscription.plan?.price?.toLocaleString()}</Text></Text>
</>
) : (
<Text className="text-gray-400">No active subscription</Text>
)}
</View>
)}
{tab === 'invoices' && (
<View>
{(invoices ?? []).map((inv: any) => (
<View key={inv.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
<Text className="font-medium text-gray-900">{inv.invoiceNumber}</Text>
<Text className="text-gray-500 text-sm">₱{inv.totalAmount?.toLocaleString()} · {inv.status}</Text>
</View>
))}
{!invoices?.length && <Text className="text-gray-400 text-center py-10">No invoices</Text>}
</View>
)}
{tab === 'payments' && (
<View>
{(payments ?? []).map((p: any) => (
<View key={p.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
<Text className="font-medium text-gray-900">₱{p.amount?.toLocaleString()}</Text>
<Text className="text-gray-500 text-sm">{p.paymentMethod} · {new Date(p.paymentDate).toLocaleDateString()}</Text>
</View>
))}
{!payments?.length && <Text className="text-gray-400 text-center py-10">No payments</Text>}
</View>
)}
</ScrollView> </ScrollView>
</View> </View>
); );

46
app/(app)/clients/index.tsx
View File

@@ -1,67 +1,69 @@
import { useState } from 'react'; import { useState } from 'react';
import { View, Text, TextInput, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native'; import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { router } from 'expo-router'; import { router } from 'expo-router';
import { api } from '../../../services/api'; import { api } from '../../../services/api';
const STATUS_COLOR: Record<string, string> = { const STATUS_COLORS: Record<string, string> = {
active: '#16A34A', suspended: '#DC2626', pending: '#D97706', cancelled: '#6B7280', ACTIVE: '#16A34A', SUSPENDED: '#D97706', CANCELLED: '#DC2626', PENDING: '#6B7280',
}; };
export default function ClientsScreen() { export default function ClientsScreen() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const { data, isLoading } = useQuery({ const { data, isLoading, refetch, isRefetching } = useQuery({
queryKey: ['clients'], queryKey: ['clients'],
queryFn: () => api.get('/api/v1/clients?limit=100').then(r => r.data?.data ?? r.data), queryFn: () => api.get('/api/v1/clients?limit=100').then(r => r.data?.data ?? r.data),
}); });
const filtered = (data ?? []).filter((c: any) => const clients = (data ?? []).filter((c: any) =>
[c.firstName, c.lastName, c.accountNumber, c.phone].join(' ').toLowerCase().includes(search.toLowerCase()) `${c.firstName} ${c.lastName} ${c.accountNumber}`.toLowerCase().includes(search.toLowerCase())
); );
return ( return (
<View className="flex-1 bg-gray-50"> <View className="flex-1 bg-gray-50">
<View className="px-4 pt-14 pb-3 bg-white border-b border-gray-100"> <View className="px-4 pt-14 pb-4 bg-primary">
<Text className="text-xl font-bold text-gray-900 mb-3">Clients</Text> <Text className="text-white text-xl font-bold">Clients</Text>
</View>
<View className="px-4 py-3">
<TextInput <TextInput
className="bg-gray-100 rounded-xl px-4 py-2 text-base" className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base"
placeholder="Search name, account #, phone..." placeholder="Search name or account #"
value={search} value={search}
onChangeText={setSearch} onChangeText={setSearch}
/> />
</View> </View>
{isLoading ? ( {isLoading ? (
<View className="flex-1 items-center justify-center"> <View className="flex-1 items-center justify-center">
<ActivityIndicator color="#2563EB" /> <ActivityIndicator color="#2563EB" />
</View> </View>
) : ( ) : (
<FlatList <FlatList
data={filtered} data={clients}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
contentContainerStyle={{ padding: 16 }} refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 24 }}
renderItem={({ item }) => ( renderItem={({ item }) => (
<TouchableOpacity <TouchableOpacity
className="bg-white rounded-xl p-4 mb-2 border border-gray-100 flex-row items-center" className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
onPress={() => router.push(`/(app)/clients/${item.id}`)} onPress={() => router.push(`/(app)/clients/${item.id}`)}
> >
<View className="w-10 h-10 rounded-full bg-blue-100 items-center justify-center mr-3"> <View className="flex-row justify-between items-start">
<Text className="text-primary font-bold">{item.firstName?.[0]?.toUpperCase()}</Text>
</View>
<View className="flex-1"> <View className="flex-1">
<Text className="font-semibold text-gray-900">{item.firstName} {item.lastName}</Text> <Text className="font-semibold text-gray-900">{item.firstName} {item.lastName}</Text>
<Text className="text-gray-500 text-sm">{item.accountNumber} · {item.phone}</Text> <Text className="text-gray-500 text-sm">{item.accountNumber}</Text>
{item.phone && <Text className="text-gray-500 text-sm">{item.phone}</Text>}
</View> </View>
<View className="px-2 py-1 rounded-full" style={{ backgroundColor: `${STATUS_COLOR[item.status] ?? '#6B7280'}20` }}> <View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${STATUS_COLORS[item.status] ?? '#6B7280'}20` }}>
<Text className="text-xs font-medium capitalize" style={{ color: STATUS_COLOR[item.status] ?? '#6B7280' }}> <Text className="text-xs font-medium" style={{ color: STATUS_COLORS[item.status] ?? '#6B7280' }}>
{item.status} {item.status}
</Text> </Text>
</View> </View>
</View>
</TouchableOpacity> </TouchableOpacity>
)} )}
ListEmptyComponent={ ListEmptyComponent={
<View className="items-center py-20"> <View className="items-center py-16">
<Text className="text-gray-400">No clients found</Text> <Text className="text-gray-400 text-base">No clients found</Text>
</View> </View>
} }
/> />

83
app/(app)/installations/[id].tsx Normal file
View File

@@ -0,0 +1,83 @@
import { useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView, Alert, Image, ActivityIndicator } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router';
import * as ImagePicker from 'expo-image-picker';
import * as Location from 'expo-location';
import { api } from '../../../services/api';
export default function InstallationConfirmScreen() {
const { id } = useLocalSearchParams<{ id: string }>();
const [photo, setPhoto] = useState<string | null>(null);
const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
const [loading, setLoading] = useState(false);
const [gpsLoading, setGpsLoading] = useState(false);
const capturePhoto = async () => {
const { status } = await ImagePicker.requestCameraPermissionsAsync();
if (status !== 'granted') return Alert.alert('Permission denied', 'Camera access is required.');
const result = await ImagePicker.launchCameraAsync({ quality: 0.7, base64: false });
if (!result.canceled) setPhoto(result.assets[0].uri);
};
const captureGPS = async () => {
setGpsLoading(true);
try {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') { Alert.alert('Permission denied', 'Location access is required.'); return; }
const loc = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.High });
setCoords({ lat: loc.coords.latitude, lng: loc.coords.longitude });
} catch { Alert.alert('Error', 'Could not get location.'); }
finally { setGpsLoading(false); }
};
const confirm = async () => {
if (!coords) return Alert.alert('Required', 'Capture GPS location first.');
setLoading(true);
try {
await api.patch(`/api/v1/tickets/${id}/confirm-installation`, {
latitude: coords.lat,
longitude: coords.lng,
photoUrl: photo,
});
Alert.alert('Done!', 'Installation confirmed.', [{ text: 'OK', onPress: () => router.back() }]);
} catch (e: any) {
Alert.alert('Error', e?.response?.data?.message ?? 'Confirmation failed.');
} finally { setLoading(false); }
};
return (
<View className="flex-1 bg-gray-50">
<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-white text-xl font-bold">Installation Confirmation</Text>
</View>
<ScrollView className="flex-1 px-4 py-6">
<View className="bg-white rounded-2xl border border-gray-100 p-4 mb-4">
<Text className="font-semibold text-gray-700 mb-3">📍 GPS Location</Text>
{coords ? (
<Text className="text-green-700 font-medium">✓ {coords.lat.toFixed(6)}, {coords.lng.toFixed(6)}</Text>
) : (
<Text className="text-gray-400 mb-3">No location captured yet</Text>
)}
<TouchableOpacity className="bg-primary rounded-xl py-3 items-center mt-3" onPress={captureGPS} disabled={gpsLoading}>
{gpsLoading ? <ActivityIndicator color="white" /> : <Text className="text-white font-semibold">Capture GPS</Text>}
</TouchableOpacity>
</View>
<View className="bg-white rounded-2xl border border-gray-100 p-4 mb-8">
<Text className="font-semibold text-gray-700 mb-3">📷 Photo Proof</Text>
{photo && <Image source={{ uri: photo }} className="w-full h-48 rounded-xl mb-3" resizeMode="cover" />}
<TouchableOpacity className="border border-primary rounded-xl py-3 items-center" onPress={capturePhoto}>
<Text className="text-primary font-semibold">{photo ? 'Retake Photo' : 'Take Photo'}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity className="bg-green-600 rounded-xl py-4 items-center" onPress={confirm} disabled={loading}>
{loading ? <ActivityIndicator color="white" /> : <Text className="text-white font-bold text-base">✓ Confirm Installation</Text>}
</TouchableOpacity>
</ScrollView>
</View>
);
}

19
app/(app)/payments/index.tsx
View File

@@ -1,18 +1,23 @@
import { View, Text, TouchableOpacity } from 'react-native'; import { View, Text, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router'; import { router } from 'expo-router';
export default function PaymentsScreen() { export default function PaymentsScreen() {
const router = useRouter();
return ( return (
<View className="flex-1 bg-gray-50 pt-14 px-4"> <View className="flex-1 bg-gray-50">
<Text className="text-2xl font-bold text-gray-900 mb-6">Payments</Text> <View className="px-4 pt-14 pb-4 bg-primary">
<Text className="text-white text-xl font-bold">Payments</Text>
</View>
<View className="flex-1 items-center justify-center px-8">
<Text className="text-6xl mb-4">💰</Text>
<Text className="text-xl font-bold text-gray-900 mb-2">Record a Payment</Text>
<Text className="text-gray-500 text-center mb-8">Collect payments from clients in the field</Text>
<TouchableOpacity <TouchableOpacity
className="bg-primary rounded-2xl p-5 items-center" className="bg-primary rounded-xl py-4 px-8 w-full items-center"
onPress={() => router.push('/(app)/payments/record')} onPress={() => router.push('/(app)/payments/record')}
> >
<Text className="text-white text-lg font-semibold">💳 Record Payment</Text> <Text className="text-white font-semibold text-base">Record Payment</Text>
<Text className="text-blue-100 text-sm mt-1">Accept cash, GCash, or bank transfer</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View>
); );
} }

103
app/(app)/payments/record.tsx
View File

@@ -1,116 +1,121 @@
import { useState } from 'react'; import { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native'; import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
import { useRouter } from 'expo-router'; import { router } from 'expo-router';
import { api } from '../../../services/api'; import { api } from '../../../services/api';
const METHODS = ['Cash', 'GCash', 'Maya', 'Bank Transfer']; const METHODS = ['CASH', 'GCASH', 'MAYA', 'BANK'];
export default function RecordPaymentScreen() { export default function RecordPaymentScreen() {
const router = useRouter(); const [search, setSearch] = useState('');
const [accountNumber, setAccountNumber] = useState('');
const [client, setClient] = useState<any>(null); const [client, setClient] = useState<any>(null);
const [amount, setAmount] = useState(''); const [amount, setAmount] = useState('');
const [method, setMethod] = useState('Cash'); const [method, setMethod] = useState('CASH');
const [reference, setReference] = useState(''); const [reference, setReference] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const searchClient = async () => { const searchClient = async () => {
if (!accountNumber.trim()) return; if (!search.trim()) return;
setSearching(true); setSearching(true);
try { try {
const res = await api.get(`/api/v1/clients?accountNumber=${accountNumber.trim()}`); const res = await api.get(`/api/v1/clients?search=${search.trim()}&limit=1`);
const clients = res.data?.data ?? res.data?.results ?? []; const found = res.data?.data?.[0] ?? res.data?.[0];
setClient(clients[0] ?? null); if (found) setClient(found);
if (!clients[0]) Alert.alert('Not found', 'No client with that account number.'); else Alert.alert('Not Found', 'No client found with that account number or name.');
} catch { Alert.alert('Error', 'Could not search clients.'); } } catch {
finally { setSearching(false); } Alert.alert('Error', 'Search failed.');
} finally {
setSearching(false);
}
}; };
const submit = async () => { const submit = async () => {
if (!client || !amount) return Alert.alert('Required', 'Select a client and enter amount.'); if (!client) return Alert.alert('Required', 'Search and select a client first.');
if (!amount || isNaN(Number(amount))) return Alert.alert('Required', 'Enter a valid amount.');
setLoading(true); setLoading(true);
try { try {
await api.post('/api/v1/payments', { await api.post('/api/v1/payments', {
clientId: client.id, clientId: client.id,
amount: parseFloat(amount), amount: Number(amount),
paymentMethod: method.toLowerCase().replace(' ', '_'), paymentMethod: method,
referenceNumber: reference || undefined, referenceNumber: reference || undefined,
paymentDate: new Date().toISOString().split('T')[0], paymentDate: new Date().toISOString(),
}); });
Alert.alert('Success', 'Payment recorded!', [{ text: 'OK', onPress: () => router.back() }]); Alert.alert('Success', 'Payment recorded!', [{ text: 'OK', onPress: () => router.back() }]);
} catch (e: any) { } catch (e: any) {
Alert.alert('Failed', e?.response?.data?.message ?? 'Could not record payment.'); Alert.alert('Error', e?.response?.data?.message ?? 'Payment failed.');
} finally { setLoading(false); } } finally {
setLoading(false);
}
}; };
return ( return (
<ScrollView className="flex-1 bg-gray-50 pt-14"> <View className="flex-1 bg-gray-50">
<TouchableOpacity className="px-4 mb-4" onPress={() => router.back()}> <View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
<Text className="text-primary">← Back</Text> <TouchableOpacity onPress={() => router.back()} className="mr-3">
<Text className="text-white text-lg">←</Text>
</TouchableOpacity> </TouchableOpacity>
<Text className="text-2xl font-bold text-gray-900 px-4 mb-6">Record Payment</Text> <Text className="text-white text-xl font-bold">Record Payment</Text>
</View>
<View className="bg-white mx-4 rounded-2xl p-5 border border-gray-100 mb-4"> <ScrollView className="flex-1 px-4 py-4">
<Text className="text-sm font-medium text-gray-700 mb-2">Account Number</Text> <Text className="font-semibold text-gray-700 mb-2">Search Client</Text>
<View className="flex-row gap-2"> <View className="flex-row mb-4">
<TextInput <TextInput
className="flex-1 border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50" className="flex-1 bg-white border border-gray-200 rounded-xl px-4 py-3 mr-2"
placeholder="e.g. 2024-0001" placeholder="Account # or name"
value={accountNumber} value={search}
onChangeText={setAccountNumber} onChangeText={setSearch}
/> />
<TouchableOpacity className="bg-primary rounded-xl px-4 items-center justify-center" onPress={searchClient}> <TouchableOpacity className="bg-primary rounded-xl px-4 items-center justify-center" onPress={searchClient}>
{searching ? <ActivityIndicator color="#fff" size="small" /> : <Text className="text-white font-medium text-sm">Find</Text>} {searching ? <ActivityIndicator color="white" /> : <Text className="text-white font-semibold">Find</Text>}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{client && ( {client && (
<View className="mt-3 bg-blue-50 rounded-xl p-3"> <View className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
<Text className="text-primary font-semibold">{client.name}</Text> <Text className="font-bold text-blue-900">{client.firstName} {client.lastName}</Text>
<Text className="text-gray-500 text-xs">{client.accountNumber} · {client.status}</Text> <Text className="text-blue-700 text-sm">{client.accountNumber}</Text>
</View> </View>
)} )}
</View>
<View className="bg-white mx-4 rounded-2xl p-5 border border-gray-100 mb-4"> <Text className="font-semibold text-gray-700 mb-2">Amount (₱)</Text>
<Text className="text-sm font-medium text-gray-700 mb-2">Amount (₱)</Text>
<TextInput <TextInput
className="border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50" className="bg-white border border-gray-200 rounded-xl px-4 py-3 mb-4 text-base"
placeholder="0.00" placeholder="0.00"
value={amount} value={amount}
onChangeText={setAmount} onChangeText={setAmount}
keyboardType="decimal-pad" keyboardType="numeric"
/> />
<Text className="text-sm font-medium text-gray-700 mt-4 mb-2">Payment Method</Text> <Text className="font-semibold text-gray-700 mb-2">Payment Method</Text>
<View className="flex-row flex-wrap gap-2"> <View className="flex-row flex-wrap mb-4">
{METHODS.map(m => ( {METHODS.map(m => (
<TouchableOpacity <TouchableOpacity
key={m} key={m}
className={`px-4 py-2 rounded-xl border ${method === m ? 'bg-primary border-primary' : 'border-gray-200 bg-white'}`}
onPress={() => setMethod(m)} onPress={() => setMethod(m)}
className={`rounded-xl px-4 py-2 mr-2 mb-2 border ${method === m ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
> >
<Text className={`text-sm font-medium ${method === m ? 'text-white' : 'text-gray-700'}`}>{m}</Text> <Text className={method === m ? 'text-white font-semibold' : 'text-gray-700'}>{m}</Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
<Text className="text-sm font-medium text-gray-700 mt-4 mb-2">Reference # (optional)</Text> <Text className="font-semibold text-gray-700 mb-2">Reference # (optional)</Text>
<TextInput <TextInput
className="border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50" className="bg-white border border-gray-200 rounded-xl px-4 py-3 mb-8"
placeholder="GCash ref / OR number" placeholder="GCash ref, receipt #, etc."
value={reference} value={reference}
onChangeText={setReference} onChangeText={setReference}
/> />
</View>
<TouchableOpacity <TouchableOpacity
className={`mx-4 rounded-2xl py-4 items-center mb-8 ${loading ? 'bg-blue-400' : 'bg-primary'}`} className="bg-primary rounded-xl py-4 items-center"
onPress={submit} onPress={submit}
disabled={loading} disabled={loading}
> >
{loading ? <ActivityIndicator color="#fff" /> : <Text className="text-white font-semibold text-base">Record Payment</Text>} {loading ? <ActivityIndicator color="white" /> : <Text className="text-white font-bold text-base">Submit Payment</Text>}
</TouchableOpacity> </TouchableOpacity>
</ScrollView> </ScrollView>
</View>
); );
} }

41
app/(app)/remittances/[id].tsx Normal file
View File

@@ -0,0 +1,41 @@
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router';
import { useQuery } from '@tanstack/react-query';
import { api } from '../../../services/api';
export default function RemittanceDetailScreen() {
const { id } = useLocalSearchParams<{ id: string }>();
const { data, isLoading } = useQuery({
queryKey: ['remittance', id],
queryFn: () => api.get(`/api/v1/remittances/${id}`).then(r => r.data),
});
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="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-white text-xl font-bold">Remittance Detail</Text>
</View>
<ScrollView className="flex-1 px-4 py-4">
<View className="bg-white rounded-2xl border border-gray-100 p-4">
<Text className="text-3xl font-bold text-gray-900 mb-1">₱{Number(data?.totalAmount ?? 0).toLocaleString()}</Text>
<Text className="text-gray-500 text-sm mb-4">{new Date(data?.createdAt).toLocaleDateString()}</Text>
<View className="border-t border-gray-100 pt-4">
<Text className="text-gray-500 text-xs mb-0.5">Status</Text>
<Text className="font-semibold text-gray-900">{data?.status}</Text>
</View>
{data?.notes && (
<View className="border-t border-gray-100 pt-4 mt-4">
<Text className="text-gray-500 text-xs mb-0.5">Notes</Text>
<Text className="text-gray-900">{data.notes}</Text>
</View>
)}
</View>
</ScrollView>
</View>
);
}

49
app/(app)/remittances/index.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
import { useQuery } from '@tanstack/react-query';
import { router } from 'expo-router';
import { api } from '../../../services/api';
const STATUS_COLOR: Record<string, string> = { PENDING: '#D97706', CONFIRMED: '#16A34A', DISPUTED: '#DC2626' };
export default function RemittancesScreen() {
const { data, isLoading, refetch, isRefetching } = useQuery({
queryKey: ['remittances'],
queryFn: () => api.get('/api/v1/remittances?limit=50').then(r => r.data?.data ?? r.data),
});
return (
<View className="flex-1 bg-gray-50">
<View className="px-4 pt-14 pb-4 bg-primary flex-row justify-between items-center">
<Text className="text-white text-xl font-bold">Remittances</Text>
<TouchableOpacity className="bg-white/20 rounded-lg px-3 py-1.5" onPress={() => router.push('/(app)/remittances/submit')}>
<Text className="text-white text-sm font-semibold">+ Submit</Text>
</TouchableOpacity>
</View>
{isLoading ? (
<View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
) : (
<FlatList
data={data ?? []}
keyExtractor={(item) => item.id}
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
contentContainerStyle={{ padding: 16 }}
renderItem={({ item }) => (
<TouchableOpacity
className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
onPress={() => router.push(`/(app)/remittances/${item.id}`)}
>
<View className="flex-row justify-between">
<Text className="font-semibold text-gray-900">₱{Number(item.totalAmount).toLocaleString()}</Text>
<View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${STATUS_COLOR[item.status] ?? '#6B7280'}20` }}>
<Text className="text-xs font-medium" style={{ color: STATUS_COLOR[item.status] ?? '#6B7280' }}>{item.status}</Text>
</View>
</View>
<Text className="text-gray-500 text-sm mt-1">{new Date(item.createdAt).toLocaleDateString()}</Text>
</TouchableOpacity>
)}
ListEmptyComponent={<View className="items-center py-16"><Text className="text-gray-400">No remittances yet</Text></View>}
/>
)}
</View>
);
}

57
app/(app)/remittances/submit.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
import { router } from 'expo-router';
import { api } from '../../../services/api';
export default function SubmitRemittanceScreen() {
const [amount, setAmount] = useState('');
const [notes, setNotes] = useState('');
const [loading, setLoading] = useState(false);
const submit = async () => {
if (!amount || isNaN(Number(amount))) return Alert.alert('Required', 'Enter a valid amount.');
setLoading(true);
try {
await api.post('/api/v1/remittances', { totalAmount: Number(amount), notes });
Alert.alert('Submitted', 'Remittance submitted successfully.', [{ text: 'OK', onPress: () => router.back() }]);
} catch (e: any) {
Alert.alert('Error', e?.response?.data?.message ?? 'Submission failed.');
} finally {
setLoading(false);
}
};
return (
<View className="flex-1 bg-gray-50">
<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-white text-xl font-bold">Submit Remittance</Text>
</View>
<ScrollView className="flex-1 px-4 py-6">
<Text className="font-semibold text-gray-700 mb-2">Total Collection (₱)</Text>
<TextInput
className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base mb-4"
placeholder="0.00"
value={amount}
onChangeText={setAmount}
keyboardType="numeric"
autoFocus
/>
<Text className="font-semibold text-gray-700 mb-2">Notes (optional)</Text>
<TextInput
className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base mb-8"
placeholder="Any remarks..."
value={notes}
onChangeText={setNotes}
multiline
numberOfLines={3}
/>
<TouchableOpacity className="bg-primary rounded-xl py-4 items-center" onPress={submit} disabled={loading}>
{loading ? <ActivityIndicator color="white" /> : <Text className="text-white font-bold text-base">Submit Remittance</Text>}
</TouchableOpacity>
</ScrollView>
</View>
);
}

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

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 { useQuery } from '@tanstack/react-query';
import { useRouter } from 'expo-router'; import { router } from 'expo-router';
import { api } from '../../../services/api'; import { api } from '../../../services/api';
const STATUS_COLOR: Record<string, string> = { const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', MEDIUM: '#D97706', LOW: '#6B7280' };
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() { export default function TicketsScreen() {
const router = useRouter(); const [search, setSearch] = useState('');
const { data, isLoading, refetch, isRefetching } = useQuery({ const { data, isLoading, refetch, isRefetching } = useQuery({
queryKey: ['tickets'], 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 ( return (
<View className="flex-1 bg-gray-50 pt-14"> <View className="flex-1 bg-gray-50">
<Text className="text-2xl font-bold text-gray-900 px-4 mb-4">Tickets</Text> <View className="px-4 pt-14 pb-4 bg-primary">
{isLoading ? <ActivityIndicator color="#2563EB" className="mt-10" /> : ( <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 <FlatList
data={tickets} data={tickets}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
@@ -34,15 +44,15 @@ export default function TicketsScreen() {
onPress={() => router.push(`/(app)/tickets/${item.id}`)} onPress={() => router.push(`/(app)/tickets/${item.id}`)}
> >
<View className="flex-row justify-between items-start"> <View className="flex-row justify-between items-start">
<Text className="flex-1 font-medium text-gray-900 mr-2">{item.subject}</Text> <Text className="font-semibold text-gray-900 flex-1 mr-2">{item.subject}</Text>
<View className={`px-2 py-0.5 rounded-full ${STATUS_COLOR[item.status] ?? 'bg-gray-100 text-gray-500'}`}> <View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${PRIORITY_COLOR[item.priority] ?? '#6B7280'}20` }}>
<Text className="text-xs font-medium">{item.status}</Text> <Text className="text-xs font-medium" style={{ color: PRIORITY_COLOR[item.priority] ?? '#6B7280' }}>{item.priority}</Text>
</View> </View>
</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> </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> </View>

23
eas.json Normal file
View File

@@ -0,0 +1,23 @@
{
"cli": {
"version": ">= 16.0.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal",
"android": {
"buildType": "apk"
}
},
"production": {
"autoIncrement": true
}
},
"submit": {
"production": {}
}
}

3
nativewind-env.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
/// <reference types="nativewind/types" />
// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

1302
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -9,7 +9,7 @@
"web": "expo start --web" "web": "expo start --web"
}, },
"dependencies": { "dependencies": {
"@react-native-async-storage/async-storage": "^3.0.1", "@react-native-async-storage/async-storage": "^2.2.0",
"@tanstack/react-query": "^5.95.0", "@tanstack/react-query": "^5.95.0",
"axios": "^1.13.6", "axios": "^1.13.6",
"expo": "~55.0.8", "expo": "~55.0.8",
@@ -25,13 +25,14 @@
"nativewind": "^4.2.3", "nativewind": "^4.2.3",
"react": "19.2.0", "react": "19.2.0",
"react-native": "0.83.2", "react-native": "0.83.2",
"react-native-safe-area-context": "^5.7.0", "react-native-safe-area-context": "^5.6.2",
"react-native-screens": "^4.24.0", "react-native-screens": "^4.23.0",
"tailwindcss": "^4.2.2",
"zustand": "^5.0.12" "zustand": "^5.0.12"
}, },
"devDependencies": { "devDependencies": {
"@expo/ngrok": "^4.1.3",
"@types/react": "~19.2.2", "@types/react": "~19.2.2",
"tailwindcss": "^3.4.19",
"typescript": "~5.9.2" "typescript": "~5.9.2"
}, },
"private": true "private": true