feat: major UI/UX overhaul + user management + ticket detail refactor
- 5-tab navigation (Home/Clients/Collect/Tickets/Profile) - Inline styles throughout (17px min font, SafeAreaView) - Dashboard fixed to match real API shape - Ticket detail: 2 tabs (Details + Comments), always-visible comment input - Installation confirmation: GPS coordinate capture + client location update - User management screens (Admin only): list, create, detail + role/active toggle - Tasks folder replaces tickets folder - Remittance detail: inline styles - Record payment: prefill from client, live button text - Icon component with SVG icons - Color system: primary #0891B2
This commit is contained in:
Nemo
202
app/(app)/tasks/new.tsx
Normal file
202
app/(app)/tasks/new.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { router } from 'expo-router';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
const PRIORITIES = ['NORMAL', 'HIGH'];
|
||||
const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', NORMAL: '#0891B2' };
|
||||
const PRIORITY_BG: Record<string, string> = { HIGH: '#FEE2E2', NORMAL: '#ECFEFF' };
|
||||
|
||||
const TYPES = [
|
||||
{ value: 'SUPPORT', label: 'Support' },
|
||||
{ value: 'INSTALLATION', label: 'Installation' },
|
||||
{ value: 'BILLING', label: 'Billing' },
|
||||
];
|
||||
|
||||
export default function NewTaskScreen() {
|
||||
const qc = useQueryClient();
|
||||
const [subject, setSubject] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [priority, setPriority] = useState('NORMAL');
|
||||
const [type, setType] = useState('SUPPORT');
|
||||
const [search, setSearch] = useState('');
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
const [client, setClient] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { data: searchResults, isFetching: searching } = useQuery({
|
||||
queryKey: ['client-search', debouncedSearch],
|
||||
queryFn: () => api.get(`/api/v1/clients?search=${debouncedSearch}&limit=8`).then(r => r.data?.data ?? r.data ?? []),
|
||||
enabled: debouncedSearch.trim().length >= 2,
|
||||
});
|
||||
|
||||
const handleSearchChange = (v: string) => {
|
||||
setSearch(v);
|
||||
setTimeout(() => setDebouncedSearch(v), 400);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!subject.trim()) return Alert.alert('Required', 'Please enter a subject.');
|
||||
if (!client) return Alert.alert('Required', 'Please select a client.');
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.post('/api/v1/tickets', {
|
||||
subject: subject.trim(),
|
||||
description: description.trim() || undefined,
|
||||
priority, type, clientId: client.id,
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ['tasks'] });
|
||||
qc.invalidateQueries({ queryKey: ['dashboard'] });
|
||||
Alert.alert('Task Created', subject, [{ text: 'OK', onPress: () => router.back() }]);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e?.response?.data?.message ?? 'Could not create task.');
|
||||
} finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||||
<View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 12, paddingBottom: 20 }}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={{ marginBottom: 12 }} activeOpacity={0.7}>
|
||||
<Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>New Ticket</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
|
||||
{/* Client Search */}
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>
|
||||
Client <Text style={{ color: '#DC2626' }}>*</Text>
|
||||
</Text>
|
||||
{client ? (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: '#ECFEFF', borderRadius: 14, padding: 18, marginBottom: 20, borderWidth: 1, borderColor: '#A5F3FC' }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 17, fontWeight: '700', color: '#0E7490' }}>{client.firstName} {client.lastName}</Text>
|
||||
<Text style={{ fontSize: 15, color: '#0891B2', marginTop: 2 }}>{client.accountNumber}</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => { setClient(null); setSearch(''); setDebouncedSearch(''); }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0891B2' }}>Change</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
<View style={{ marginBottom: 20 }}>
|
||||
<View style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, marginBottom: 8 }}>
|
||||
<TextInput
|
||||
style={{ flex: 1, paddingVertical: 14, fontSize: 16, color: '#0F172A' }}
|
||||
placeholder="Search by name or account #"
|
||||
placeholderTextColor="#94A3B8"
|
||||
value={search}
|
||||
onChangeText={handleSearchChange}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
{search.length > 0 && (
|
||||
<TouchableOpacity onPress={() => { setSearch(''); setDebouncedSearch(''); }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<View style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: '#CBD5E1', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text style={{ color: '#FFF', fontSize: 13, fontWeight: '800', lineHeight: 16 }}>×</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{searching && <ActivityIndicator size="small" color="#0891B2" style={{ marginLeft: 8 }} />}
|
||||
</View>
|
||||
{debouncedSearch.trim().length >= 2 && (
|
||||
<View style={{ backgroundColor: '#FFF', borderRadius: 14, borderWidth: 1, borderColor: '#E2E8F0', overflow: 'hidden' }}>
|
||||
{(searchResults ?? []).length === 0 && !searching ? (
|
||||
<Text style={{ paddingHorizontal: 16, paddingVertical: 14, fontSize: 15, color: '#94A3B8' }}>No clients found</Text>
|
||||
) : (
|
||||
(searchResults ?? []).map((c: any, i: number, arr: any[]) => (
|
||||
<TouchableOpacity
|
||||
key={c.id}
|
||||
style={{ paddingHorizontal: 16, paddingVertical: 14, borderBottomWidth: i < arr.length - 1 ? 1 : 0, borderBottomColor: '#F1F5F9' }}
|
||||
onPress={() => { setClient(c); setSearch(''); setDebouncedSearch(''); }}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={{ fontSize: 16, fontWeight: '600', color: '#0F172A' }}>{c.firstName} {c.lastName}</Text>
|
||||
<Text style={{ fontSize: 14, color: '#64748B', marginTop: 2 }}>{c.accountNumber}</Text>
|
||||
</TouchableOpacity>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Subject */}
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>
|
||||
Subject <Text style={{ color: '#DC2626' }}>*</Text>
|
||||
</Text>
|
||||
<TextInput
|
||||
style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 18, paddingVertical: 14, fontSize: 16, color: '#0F172A', marginBottom: 20 }}
|
||||
placeholder="e.g. New installation - Barangay 5"
|
||||
placeholderTextColor="#94A3B8"
|
||||
value={subject}
|
||||
onChangeText={setSubject}
|
||||
/>
|
||||
|
||||
{/* Type */}
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>Type</Text>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 20 }}>
|
||||
{TYPES.map(t => (
|
||||
<TouchableOpacity
|
||||
key={t.value}
|
||||
onPress={() => setType(t.value)}
|
||||
style={{ borderRadius: 20, paddingHorizontal: 16, paddingVertical: 10, marginRight: 8, marginBottom: 8, backgroundColor: type === t.value ? '#0891B2' : '#FFF', borderWidth: 1.5, borderColor: type === t.value ? '#0891B2' : '#E2E8F0' }}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={{ fontSize: 14, fontWeight: '600', color: type === t.value ? '#FFF' : '#64748B' }}>{t.label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Priority */}
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>Priority</Text>
|
||||
<View style={{ flexDirection: 'row', marginBottom: 20 }}>
|
||||
{PRIORITIES.map(p => {
|
||||
const isSelected = priority === p;
|
||||
const isHigh = p === 'HIGH';
|
||||
const selectedBg = isHigh ? '#DC2626' : '#0891B2';
|
||||
const unselectedBg = isHigh ? '#FEF2F2' : '#F0F9FF';
|
||||
const selectedText = '#FFF';
|
||||
const unselectedText = isHigh ? '#DC2626' : '#0891B2';
|
||||
const desc = isHigh ? 'Urgent, escalate' : 'Standard queue';
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={p}
|
||||
onPress={() => setPriority(p)}
|
||||
style={{ flex: 1, borderRadius: 14, paddingVertical: 16, alignItems: 'center', marginHorizontal: 4, backgroundColor: isSelected ? selectedBg : unselectedBg, borderWidth: 1.5, borderColor: isSelected ? selectedBg : '#E2E8F0' }}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={{ fontSize: 16, fontWeight: isHigh ? '800' : '700', color: isSelected ? selectedText : unselectedText }}>{p}</Text>
|
||||
<Text style={{ fontSize: 13, fontWeight: '500', color: isSelected ? 'rgba(255,255,255,0.8)' : '#94A3B8', marginTop: 3 }}>{desc}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>
|
||||
Description <Text style={{ fontWeight: '400', color: '#94A3B8' }}>(optional)</Text>
|
||||
</Text>
|
||||
<TextInput
|
||||
style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 18, paddingVertical: 14, fontSize: 16, color: '#0F172A', marginBottom: 24, minHeight: 100, textAlignVertical: 'top' }}
|
||||
placeholder="Describe the issue in detail..."
|
||||
placeholderTextColor="#94A3B8"
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
multiline
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={{ backgroundColor: client && subject.trim() ? '#0891B2' : '#CBD5E1', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
|
||||
onPress={submit}
|
||||
disabled={loading || !client || !subject.trim()}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{loading ? <ActivityIndicator color="#FFF" /> : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Create Ticket</Text>}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user