feat: Manual Tasks mobile screens (#24) - list, new, detail + profile nav
This commit is contained in:
Nemo
237
app/(app)/manual-tasks/[id].tsx
Normal file
237
app/(app)/manual-tasks/[id].tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '../../../services/api';
|
||||
import { useAuthStore } from '../../../stores/authStore';
|
||||
|
||||
const TYPE_LABEL: Record<string, string> = {
|
||||
SUSPEND_CLIENT: 'Suspend Client',
|
||||
REACTIVATE_CLIENT: 'Reactivate Client',
|
||||
ACTIVATE_CLIENT: 'Activate Client',
|
||||
};
|
||||
const TYPE_COLOR: Record<string, string> = {
|
||||
SUSPEND_CLIENT: '#DC2626',
|
||||
REACTIVATE_CLIENT: '#059669',
|
||||
ACTIVATE_CLIENT: '#0891B2',
|
||||
};
|
||||
const TYPE_BG: Record<string, string> = {
|
||||
SUSPEND_CLIENT: '#FEE2E2',
|
||||
REACTIVATE_CLIENT: '#D1FAE5',
|
||||
ACTIVATE_CLIENT: '#ECFEFF',
|
||||
};
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
PENDING: '#D97706',
|
||||
DONE: '#059669',
|
||||
CANCELLED: '#6B7280',
|
||||
};
|
||||
const STATUS_BG: Record<string, string> = {
|
||||
PENDING: '#FFFBEB',
|
||||
DONE: '#D1FAE5',
|
||||
CANCELLED: '#F1F5F9',
|
||||
};
|
||||
const COMPLETE_CONFIRM: Record<string, string> = {
|
||||
SUSPEND_CLIENT: 'This will suspend the client and all their active subscriptions. Continue?',
|
||||
REACTIVATE_CLIENT: 'This will reactivate the client and their suspended subscriptions. Continue?',
|
||||
ACTIVATE_CLIENT: 'This will activate the client account and their pending subscription. Continue?',
|
||||
};
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString('en-PH', {
|
||||
month: 'short', day: 'numeric', year: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
function InfoRow({ label, value, isLast }: { label: string; value?: string | null; isLast?: boolean }) {
|
||||
if (!value) return null;
|
||||
return (
|
||||
<View style={{ paddingHorizontal: 20, paddingVertical: 16, borderBottomWidth: isLast ? 0 : 1, borderBottomColor: '#F1F5F9' }}>
|
||||
<Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>{label}</Text>
|
||||
<Text style={{ fontSize: 17, fontWeight: '500', color: '#0F172A' }}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ManualTaskDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { user } = useAuthStore();
|
||||
const qc = useQueryClient();
|
||||
const role = user?.roles?.[0] ?? user?.role ?? '';
|
||||
|
||||
const { data: task, isLoading, refetch } = useQuery({
|
||||
queryKey: ['manual-task', id],
|
||||
queryFn: () => api.get(`/api/v1/manual-tasks/${id}`).then(r => r.data),
|
||||
staleTime: 0,
|
||||
});
|
||||
|
||||
const isAdminOrStaff = role === 'ADMIN' || role === 'STAFF';
|
||||
const isPending = task?.status === 'PENDING';
|
||||
const isDone = task?.status === 'DONE';
|
||||
const isCancelled = task?.status === 'CANCELLED';
|
||||
|
||||
const handleAssignToMe = async () => {
|
||||
try {
|
||||
const res = await api.patch(`/api/v1/manual-tasks/${id}/assign`, { assignedToId: user?.sub ?? user?.id });
|
||||
qc.setQueryData(['manual-task', id], (old: any) => ({ ...(old ?? {}), ...res.data }));
|
||||
qc.invalidateQueries({ queryKey: ['manual-tasks'] });
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e?.response?.data?.message ?? 'Could not assign task.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleComplete = () => {
|
||||
const confirmMsg = COMPLETE_CONFIRM[task?.type] ?? 'Complete this task?';
|
||||
Alert.alert('Complete Task', confirmMsg, [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Complete',
|
||||
onPress: async () => {
|
||||
try {
|
||||
const res = await api.patch(`/api/v1/manual-tasks/${id}/complete`, { clientId: task?.clientId ?? task?.client?.id });
|
||||
qc.setQueryData(['manual-task', id], (old: any) => ({ ...(old ?? {}), ...res.data }));
|
||||
qc.invalidateQueries({ queryKey: ['manual-tasks'] });
|
||||
Alert.alert('Done', 'Task completed successfully.');
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e?.response?.data?.message ?? 'Could not complete task.');
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
Alert.alert('Cancel Task', 'Are you sure you want to cancel this task?', [
|
||||
{ text: 'No', style: 'cancel' },
|
||||
{
|
||||
text: 'Yes, Cancel',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
const res = await api.patch(`/api/v1/manual-tasks/${id}/cancel`);
|
||||
qc.setQueryData(['manual-task', id], (old: any) => ({ ...(old ?? {}), ...res.data }));
|
||||
qc.invalidateQueries({ queryKey: ['manual-tasks'] });
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e?.response?.data?.message ?? 'Could not cancel task.');
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||||
<View style={{ flex: 1, backgroundColor: '#F8FAFC', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ActivityIndicator color="#0891B2" size="large" />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const typeLabel = TYPE_LABEL[task?.type] ?? task?.type ?? '';
|
||||
const typeColor = TYPE_COLOR[task?.type] ?? '#6B7280';
|
||||
const typeBg = TYPE_BG[task?.type] ?? '#F1F5F9';
|
||||
const statusColor = STATUS_COLOR[task?.status] ?? '#6B7280';
|
||||
const statusBg = STATUS_BG[task?.status] ?? '#F1F5F9';
|
||||
const assignedName = task?.assignedTo
|
||||
? `${task.assignedTo.firstName} ${task.assignedTo.lastName}`
|
||||
: 'Unassigned';
|
||||
const clientName = task?.client
|
||||
? `${task.client.firstName} ${task.client.lastName}`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||||
<View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||||
{/* Header */}
|
||||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 16, paddingTop: 12, paddingBottom: 18 }}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={{ marginBottom: 12 }} activeOpacity={0.7}>
|
||||
<Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Type badge (large) */}
|
||||
<View style={{ alignSelf: 'flex-start', borderRadius: 20, paddingHorizontal: 16, paddingVertical: 8, backgroundColor: typeBg, marginBottom: 10 }}>
|
||||
<Text style={{ fontSize: 16, fontWeight: '800', color: typeColor }}>{typeLabel}</Text>
|
||||
</View>
|
||||
|
||||
{/* Status badge */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
||||
<View style={{ borderRadius: 20, paddingHorizontal: 14, paddingVertical: 6, backgroundColor: statusBg }}>
|
||||
<Text style={{ fontSize: 14, fontWeight: '700', color: statusColor }}>{task?.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{clientName && (
|
||||
<Text style={{ color: '#A5F3FC', fontSize: 14, marginTop: 10 }}>
|
||||
{clientName} · {task?.client?.accountNumber}
|
||||
{' · '}{assignedName}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
|
||||
{/* Info Card */}
|
||||
<View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', marginBottom: 16, overflow: 'hidden' }}>
|
||||
<InfoRow label="Client" value={clientName} />
|
||||
<InfoRow label="Account #" value={task?.client?.accountNumber} />
|
||||
<InfoRow label="Assigned to" value={assignedName} />
|
||||
<InfoRow label="Notes" value={task?.notes} />
|
||||
<InfoRow label="Created" value={task?.createdAt ? formatDate(task.createdAt) : null} />
|
||||
<InfoRow label="Completed" value={task?.completedAt ? formatDate(task.completedAt) : null} isLast />
|
||||
</View>
|
||||
|
||||
{/* State banners */}
|
||||
{isDone && (
|
||||
<View style={{ backgroundColor: '#D1FAE5', borderRadius: 16, padding: 18, marginBottom: 16, borderWidth: 1, borderColor: '#86EFAC', alignItems: 'center' }}>
|
||||
<Text style={{ fontSize: 28, marginBottom: 6 }}>✅</Text>
|
||||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#166534' }}>Task Completed</Text>
|
||||
{task?.completedAt && (
|
||||
<Text style={{ fontSize: 14, color: '#16A34A', marginTop: 4 }}>{formatDate(task.completedAt)}</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{isCancelled && (
|
||||
<View style={{ backgroundColor: '#F1F5F9', borderRadius: 16, padding: 18, marginBottom: 16, borderWidth: 1, borderColor: '#CBD5E1', alignItems: 'center' }}>
|
||||
<Text style={{ fontSize: 28, marginBottom: 6 }}>🚫</Text>
|
||||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#6B7280' }}>Task Cancelled</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Actions — PENDING + ADMIN/STAFF */}
|
||||
{isPending && isAdminOrStaff && (
|
||||
<View style={{ gap: 12 }}>
|
||||
{/* Assign to me */}
|
||||
<TouchableOpacity
|
||||
style={{ backgroundColor: '#FFF', borderRadius: 14, paddingVertical: 18, alignItems: 'center', borderWidth: 1.5, borderColor: '#0891B2' }}
|
||||
onPress={handleAssignToMe}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={{ color: '#0891B2', fontSize: 17, fontWeight: '700' }}>Assign to Me</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Complete Task */}
|
||||
<TouchableOpacity
|
||||
style={{ backgroundColor: '#059669', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
|
||||
onPress={handleComplete}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>✓ Complete Task</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Cancel */}
|
||||
<TouchableOpacity
|
||||
style={{ borderRadius: 14, paddingVertical: 18, alignItems: 'center', borderWidth: 1.5, borderColor: '#DC2626', backgroundColor: '#FFF' }}
|
||||
onPress={handleCancel}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={{ color: '#DC2626', fontSize: 17, fontWeight: '700' }}>Cancel Task</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user