feat: Expo scaffold + auth screens + core screens (#39-#46, #48)
This commit is contained in:
Nemo
41
app/(app)/_layout.tsx
Normal file
41
app/(app)/_layout.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
export default function AppLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarActiveTintColor: '#2563EB',
|
||||
tabBarInactiveTintColor: '#6B7280',
|
||||
tabBarStyle: { paddingBottom: 4 },
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="dashboard"
|
||||
options={{ title: 'Home', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>🏠</Text> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="clients"
|
||||
options={{ title: 'Clients', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>👥</Text> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="payments"
|
||||
options={{ title: 'Payments', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>💰</Text> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="remittances"
|
||||
options={{ title: 'Remit', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>📋</Text> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="tickets"
|
||||
options={{ title: 'Tickets', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>🎫</Text> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="profile"
|
||||
options={{ title: 'Profile', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>👤</Text> }}
|
||||
/>
|
||||
<Tabs.Screen name="installations" options={{ href: null }} />
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
112
app/(app)/clients/[id].tsx
Normal file
112
app/(app)/clients/[id].tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { View, Text, ScrollView, ActivityIndicator, TouchableOpacity, Linking } from 'react-native';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
export default function ClientDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const [tab, setTab] = useState<'profile' | 'subscription' | 'invoices' | 'payments'>('profile');
|
||||
|
||||
const { data: client, isLoading } = useQuery({
|
||||
queryKey: ['client', id],
|
||||
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>;
|
||||
|
||||
const TABS = ['profile', 'subscription', 'invoices', 'payments'] as const;
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-3 bg-white border-b border-gray-100">
|
||||
<TouchableOpacity onPress={() => router.back()} className="mb-2">
|
||||
<Text className="text-primary">← Back</Text>
|
||||
</TouchableOpacity>
|
||||
<Text className="text-xl font-bold text-gray-900">{client?.firstName} {client?.lastName}</Text>
|
||||
<Text className="text-gray-500 text-sm">{client?.accountNumber}</Text>
|
||||
<View className="flex-row mt-3 gap-2">
|
||||
{TABS.map(t => (
|
||||
<TouchableOpacity key={t} onPress={() => setTab(t)}
|
||||
className={`px-3 py-1.5 rounded-full ${tab === t ? 'bg-primary' : 'bg-gray-100'}`}>
|
||||
<Text className={`text-xs font-medium capitalize ${tab === t ? 'text-white' : 'text-gray-600'}`}>{t}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView className="flex-1 px-4 py-4">
|
||||
{tab === 'profile' && (
|
||||
<View className="bg-white rounded-2xl border border-gray-100">
|
||||
{[
|
||||
{ label: 'Full Name', value: `${client?.firstName} ${client?.lastName}` },
|
||||
{ label: 'Phone', value: client?.phone, action: () => Linking.openURL(`tel:${client?.phone}`) },
|
||||
{ label: 'Email', value: client?.email },
|
||||
{ label: 'Address', value: client?.address },
|
||||
{ label: 'Area', value: client?.area?.name },
|
||||
{ label: 'Status', value: client?.status },
|
||||
].map((row, i) => (
|
||||
<TouchableOpacity key={row.label} onPress={row.action}
|
||||
className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}>
|
||||
<Text className="text-gray-500 text-xs mb-0.5">{row.label}</Text>
|
||||
<Text className={`text-gray-900 font-medium ${row.action ? 'text-primary' : ''}`}>{row.value ?? '—'}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{tab === 'subscription' && (
|
||||
<View className="bg-white rounded-2xl border border-gray-100 p-4">
|
||||
<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>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
71
app/(app)/clients/index.tsx
Normal file
71
app/(app)/clients/index.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, FlatList, TouchableOpacity, ActivityIndicator } 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> = {
|
||||
active: '#16A34A', suspended: '#DC2626', pending: '#D97706', cancelled: '#6B7280',
|
||||
};
|
||||
|
||||
export default function ClientsScreen() {
|
||||
const [search, setSearch] = useState('');
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['clients'],
|
||||
queryFn: () => api.get('/api/v1/clients?limit=100').then(r => r.data?.data ?? r.data),
|
||||
});
|
||||
|
||||
const filtered = (data ?? []).filter((c: any) =>
|
||||
[c.firstName, c.lastName, c.accountNumber, c.phone].join(' ').toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-3 bg-white border-b border-gray-100">
|
||||
<Text className="text-xl font-bold text-gray-900 mb-3">Clients</Text>
|
||||
<TextInput
|
||||
className="bg-gray-100 rounded-xl px-4 py-2 text-base"
|
||||
placeholder="Search name, account #, phone..."
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color="#2563EB" />
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={filtered}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={{ padding: 16 }}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
className="bg-white rounded-xl p-4 mb-2 border border-gray-100 flex-row items-center"
|
||||
onPress={() => router.push(`/(app)/clients/${item.id}`)}
|
||||
>
|
||||
<View className="w-10 h-10 rounded-full bg-blue-100 items-center justify-center mr-3">
|
||||
<Text className="text-primary font-bold">{item.firstName?.[0]?.toUpperCase()}</Text>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text className="font-semibold text-gray-900">{item.firstName} {item.lastName}</Text>
|
||||
<Text className="text-gray-500 text-sm">{item.accountNumber} · {item.phone}</Text>
|
||||
</View>
|
||||
<View className="px-2 py-1 rounded-full" style={{ backgroundColor: `${STATUS_COLOR[item.status] ?? '#6B7280'}20` }}>
|
||||
<Text className="text-xs font-medium capitalize" style={{ color: STATUS_COLOR[item.status] ?? '#6B7280' }}>
|
||||
{item.status}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View className="items-center py-20">
|
||||
<Text className="text-gray-400">No clients found</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
65
app/(app)/dashboard.tsx
Normal file
65
app/(app)/dashboard.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { View, Text, ScrollView, RefreshControl, ActivityIndicator } from 'react-native';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../../services/api';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
|
||||
function KpiCard({ label, value, color }: { label: string; value: string | number; color: string }) {
|
||||
return (
|
||||
<View className="bg-white rounded-2xl p-4 flex-1 mx-1 shadow-sm border border-gray-100">
|
||||
<Text className="text-gray-500 text-xs mb-1">{label}</Text>
|
||||
<Text className={`text-2xl font-bold`} style={{ color }}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardScreen() {
|
||||
const { user } = useAuthStore();
|
||||
const { data, isLoading, refetch, isRefetching } = useQuery({
|
||||
queryKey: ['dashboard'],
|
||||
queryFn: () => api.get('/api/v1/dashboard/summary').then(r => r.data),
|
||||
});
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
className="flex-1 bg-gray-50"
|
||||
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
|
||||
>
|
||||
<View className="px-4 pt-14 pb-4 bg-primary">
|
||||
<Text className="text-white text-sm opacity-80">Welcome back,</Text>
|
||||
<Text className="text-white text-xl font-bold">{user?.firstName ?? 'Field Staff'}</Text>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View className="flex-1 items-center justify-center py-20">
|
||||
<ActivityIndicator color="#2563EB" />
|
||||
</View>
|
||||
) : (
|
||||
<View className="px-3 py-4">
|
||||
<Text className="text-gray-700 font-semibold mb-3 px-1">Overview</Text>
|
||||
<View className="flex-row mb-3">
|
||||
<KpiCard label="Total Clients" value={data?.totalClients ?? 0} color="#2563EB" />
|
||||
<KpiCard label="Active Subs" value={data?.activeSubscriptions ?? 0} color="#16A34A" />
|
||||
</View>
|
||||
<View className="flex-row mb-6">
|
||||
<KpiCard label="Overdue" value={data?.overdueInvoices ?? 0} color="#DC2626" />
|
||||
<KpiCard label="Today Collections" value={`₱${(data?.todayCollections ?? 0).toLocaleString()}`} color="#D97706" />
|
||||
</View>
|
||||
|
||||
<Text className="text-gray-700 font-semibold mb-3 px-1">Recent Tickets</Text>
|
||||
{(data?.recentTickets ?? []).length === 0 ? (
|
||||
<View className="bg-white rounded-2xl p-6 items-center border border-gray-100">
|
||||
<Text className="text-gray-400">No recent tickets</Text>
|
||||
</View>
|
||||
) : (
|
||||
(data?.recentTickets ?? []).map((t: any) => (
|
||||
<View key={t.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
|
||||
<Text className="font-medium text-gray-900">{t.subject}</Text>
|
||||
<Text className="text-gray-500 text-sm mt-1">{t.clientName} · {t.status}</Text>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
18
app/(app)/payments/index.tsx
Normal file
18
app/(app)/payments/index.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { View, Text, TouchableOpacity } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
|
||||
export default function PaymentsScreen() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50 pt-14 px-4">
|
||||
<Text className="text-2xl font-bold text-gray-900 mb-6">Payments</Text>
|
||||
<TouchableOpacity
|
||||
className="bg-primary rounded-2xl p-5 items-center"
|
||||
onPress={() => router.push('/(app)/payments/record')}
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold">💳 Record Payment</Text>
|
||||
<Text className="text-blue-100 text-sm mt-1">Accept cash, GCash, or bank transfer</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
116
app/(app)/payments/record.tsx
Normal file
116
app/(app)/payments/record.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
const METHODS = ['Cash', 'GCash', 'Maya', 'Bank Transfer'];
|
||||
|
||||
export default function RecordPaymentScreen() {
|
||||
const router = useRouter();
|
||||
const [accountNumber, setAccountNumber] = useState('');
|
||||
const [client, setClient] = useState<any>(null);
|
||||
const [amount, setAmount] = useState('');
|
||||
const [method, setMethod] = useState('Cash');
|
||||
const [reference, setReference] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searching, setSearching] = useState(false);
|
||||
|
||||
const searchClient = async () => {
|
||||
if (!accountNumber.trim()) return;
|
||||
setSearching(true);
|
||||
try {
|
||||
const res = await api.get(`/api/v1/clients?accountNumber=${accountNumber.trim()}`);
|
||||
const clients = res.data?.data ?? res.data?.results ?? [];
|
||||
setClient(clients[0] ?? null);
|
||||
if (!clients[0]) Alert.alert('Not found', 'No client with that account number.');
|
||||
} catch { Alert.alert('Error', 'Could not search clients.'); }
|
||||
finally { setSearching(false); }
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!client || !amount) return Alert.alert('Required', 'Select a client and enter amount.');
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.post('/api/v1/payments', {
|
||||
clientId: client.id,
|
||||
amount: parseFloat(amount),
|
||||
paymentMethod: method.toLowerCase().replace(' ', '_'),
|
||||
referenceNumber: reference || undefined,
|
||||
paymentDate: new Date().toISOString().split('T')[0],
|
||||
});
|
||||
Alert.alert('Success', 'Payment recorded!', [{ text: 'OK', onPress: () => router.back() }]);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Failed', e?.response?.data?.message ?? 'Could not record payment.');
|
||||
} finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView className="flex-1 bg-gray-50 pt-14">
|
||||
<TouchableOpacity className="px-4 mb-4" onPress={() => router.back()}>
|
||||
<Text className="text-primary">← Back</Text>
|
||||
</TouchableOpacity>
|
||||
<Text className="text-2xl font-bold text-gray-900 px-4 mb-6">Record Payment</Text>
|
||||
|
||||
<View className="bg-white mx-4 rounded-2xl p-5 border border-gray-100 mb-4">
|
||||
<Text className="text-sm font-medium text-gray-700 mb-2">Account Number</Text>
|
||||
<View className="flex-row gap-2">
|
||||
<TextInput
|
||||
className="flex-1 border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
|
||||
placeholder="e.g. 2024-0001"
|
||||
value={accountNumber}
|
||||
onChangeText={setAccountNumber}
|
||||
/>
|
||||
<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>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{client && (
|
||||
<View className="mt-3 bg-blue-50 rounded-xl p-3">
|
||||
<Text className="text-primary font-semibold">{client.name}</Text>
|
||||
<Text className="text-gray-500 text-xs">{client.accountNumber} · {client.status}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="bg-white mx-4 rounded-2xl p-5 border border-gray-100 mb-4">
|
||||
<Text className="text-sm font-medium text-gray-700 mb-2">Amount (₱)</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
|
||||
placeholder="0.00"
|
||||
value={amount}
|
||||
onChangeText={setAmount}
|
||||
keyboardType="decimal-pad"
|
||||
/>
|
||||
|
||||
<Text className="text-sm font-medium text-gray-700 mt-4 mb-2">Payment Method</Text>
|
||||
<View className="flex-row flex-wrap gap-2">
|
||||
{METHODS.map(m => (
|
||||
<TouchableOpacity
|
||||
key={m}
|
||||
className={`px-4 py-2 rounded-xl border ${method === m ? 'bg-primary border-primary' : 'border-gray-200 bg-white'}`}
|
||||
onPress={() => setMethod(m)}
|
||||
>
|
||||
<Text className={`text-sm font-medium ${method === m ? 'text-white' : 'text-gray-700'}`}>{m}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Text className="text-sm font-medium text-gray-700 mt-4 mb-2">Reference # (optional)</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
|
||||
placeholder="GCash ref / OR number"
|
||||
value={reference}
|
||||
onChangeText={setReference}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
className={`mx-4 rounded-2xl py-4 items-center mb-8 ${loading ? 'bg-blue-400' : 'bg-primary'}`}
|
||||
onPress={submit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? <ActivityIndicator color="#fff" /> : <Text className="text-white font-semibold text-base">Record Payment</Text>}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
57
app/(app)/profile.tsx
Normal file
57
app/(app)/profile.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { View, Text, TouchableOpacity, Alert, ScrollView } from 'react-native';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
import { router } from 'expo-router';
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user, logout, tenantSlug } = useAuthStore();
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Sign Out', style: 'destructive',
|
||||
onPress: async () => {
|
||||
await logout();
|
||||
router.replace('/(auth)/company-code');
|
||||
}
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-6 bg-primary">
|
||||
<View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center mb-3">
|
||||
<Text className="text-white text-2xl font-bold">
|
||||
{user?.firstName?.[0]?.toUpperCase() ?? 'U'}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="text-white text-xl font-bold">{user?.firstName} {user?.lastName}</Text>
|
||||
<Text className="text-white/70 text-sm">{user?.role} · {tenantSlug}</Text>
|
||||
</View>
|
||||
|
||||
<View className="px-4 py-6">
|
||||
<View className="bg-white rounded-2xl border border-gray-100 mb-4">
|
||||
{[
|
||||
{ label: 'Username', value: user?.username },
|
||||
{ label: 'Email', value: user?.email },
|
||||
{ label: 'Role', value: user?.role },
|
||||
{ label: 'Company', value: tenantSlug },
|
||||
].map((item, i) => (
|
||||
<View key={item.label} className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}>
|
||||
<Text className="text-gray-500 text-xs mb-0.5">{item.label}</Text>
|
||||
<Text className="text-gray-900 font-medium">{item.value ?? '—'}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
className="bg-red-50 border border-red-200 rounded-2xl py-4 items-center"
|
||||
onPress={handleLogout}
|
||||
>
|
||||
<Text className="text-red-600 font-semibold">Sign Out</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
60
app/(app)/tickets/[id].tsx
Normal file
60
app/(app)/tickets/[id].tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
50
app/(app)/tickets/index.tsx
Normal file
50
app/(app)/tickets/index.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
5
app/(auth)/_layout.tsx
Normal file
5
app/(auth)/_layout.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Stack } from 'expo-router';
|
||||
|
||||
export default function AuthLayout() {
|
||||
return <Stack screenOptions={{ headerShown: false }} />;
|
||||
}
|
||||
68
app/(auth)/company-code.tsx
Normal file
68
app/(auth)/company-code.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert, KeyboardAvoidingView, Platform } from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../services/api';
|
||||
|
||||
export default function CompanyCodeScreen() {
|
||||
const [slug, setSlug] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleContinue = async () => {
|
||||
if (!slug.trim()) return Alert.alert('Required', 'Please enter your company code.');
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.get(`/api/v1/auth/tenant/${slug.trim().toLowerCase()}/exists`);
|
||||
if (res.data?.exists) {
|
||||
router.push({ pathname: '/(auth)/login', params: { tenantSlug: slug.trim().toLowerCase() } });
|
||||
} else {
|
||||
Alert.alert('Not Found', 'Company code not found. Please check and try again.');
|
||||
}
|
||||
} catch {
|
||||
Alert.alert('Error', 'Could not verify company code. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<View className="flex-1 justify-center px-8">
|
||||
<View className="mb-10 items-center">
|
||||
<View className="w-16 h-16 rounded-2xl bg-primary items-center justify-center mb-4">
|
||||
<Text className="text-white text-3xl font-bold">F</Text>
|
||||
</View>
|
||||
<Text className="text-3xl font-bold text-gray-900">FiberOps</Text>
|
||||
<Text className="text-gray-500 mt-1">Field Operations</Text>
|
||||
</View>
|
||||
|
||||
<Text className="text-xl font-semibold text-gray-900 mb-2">Enter Company Code</Text>
|
||||
<Text className="text-gray-500 mb-6">Ask your admin for your company's unique code.</Text>
|
||||
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
|
||||
placeholder="e.g. mybusiness"
|
||||
value={slug}
|
||||
onChangeText={setSlug}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
className="bg-primary rounded-xl py-4 items-center"
|
||||
onPress={handleContinue}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="white" />
|
||||
) : (
|
||||
<Text className="text-white font-semibold text-base">Continue</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
72
app/(auth)/login.tsx
Normal file
72
app/(auth)/login.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert, KeyboardAvoidingView, Platform } from 'react-native';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
|
||||
export default function LoginScreen() {
|
||||
const { tenantSlug } = useLocalSearchParams<{ tenantSlug: string }>();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const { login, isLoading } = useAuthStore();
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!username.trim() || !password) return Alert.alert('Required', 'Please enter username and password.');
|
||||
try {
|
||||
await login(tenantSlug, username.trim(), password);
|
||||
router.replace('/(app)/dashboard');
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data?.message ?? 'Login failed. Check your credentials.';
|
||||
Alert.alert('Login Failed', Array.isArray(msg) ? msg.join('\n') : msg);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<View className="flex-1 justify-center px-8">
|
||||
<TouchableOpacity className="mb-8" onPress={() => router.back()}>
|
||||
<Text className="text-primary text-base">← Back</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text className="text-2xl font-bold text-gray-900 mb-1">Welcome back</Text>
|
||||
<Text className="text-gray-500 mb-8">
|
||||
Signing in to <Text className="font-semibold text-gray-700">{tenantSlug}</Text>
|
||||
</Text>
|
||||
|
||||
<Text className="text-sm font-medium text-gray-700 mb-1">Username</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
|
||||
placeholder="Enter username"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<Text className="text-sm font-medium text-gray-700 mb-1">Password</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-xl px-4 py-3 text-base text-gray-900 mb-6"
|
||||
placeholder="Enter password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
className="bg-primary rounded-xl py-4 items-center"
|
||||
onPress={handleLogin}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator color="white" />
|
||||
) : (
|
||||
<Text className="text-white font-semibold text-base">Sign In</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
31
app/_layout.tsx
Normal file
31
app/_layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import '../global.css';
|
||||
import { useEffect } from 'react';
|
||||
import { Stack, router } from 'expo-router';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
export default function RootLayout() {
|
||||
const { hydrate, token, isLoading } = useAuthStore();
|
||||
|
||||
useEffect(() => {
|
||||
hydrate();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
if (token) {
|
||||
router.replace('/(app)/dashboard');
|
||||
} else {
|
||||
router.replace('/(auth)/company-code');
|
||||
}
|
||||
}
|
||||
}, [isLoading, token]);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Stack screenOptions={{ headerShown: false }} />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
5
app/index.tsx
Normal file
5
app/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Redirect } from 'expo-router';
|
||||
|
||||
export default function Index() {
|
||||
return <Redirect href="/(auth)/company-code" />;
|
||||
}
|
||||
Reference in New Issue
Block a user