101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, ScrollView } from 'react-native';
|
|
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
|
import Ionicons from '@react-native-vector-icons/ionicons';
|
|
import Animated, { FadeInUp } from 'react-native-reanimated';
|
|
|
|
import { ScreenShell, Button } from '../../../components';
|
|
import { useTheme } from '../../../theme';
|
|
import type { AgentDashboardStackParamList } from '../navigation/agentNavigationTypes';
|
|
|
|
type Props = NativeStackScreenProps<AgentDashboardStackParamList, 'AgentRoute'>;
|
|
|
|
export default function AgentRouteScreen({ navigation }: Props) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<ScreenShell title="My Route" scrollable={false}>
|
|
<View style={styles.container}>
|
|
<View style={styles.mapPlaceholder}>
|
|
<Ionicons name="map-outline" size={64} color={theme.colors.textMuted} />
|
|
<Text style={[styles.mapText, { color: theme.colors.textMuted }]}>Map Integration Coming Soon</Text>
|
|
</View>
|
|
|
|
<View style={[styles.infoCard, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
|
|
<Text style={[styles.infoTitle, { color: theme.colors.textPrimary }]}>Route Summary</Text>
|
|
<View style={[styles.divider, { backgroundColor: theme.colors.cardBorder }]} />
|
|
|
|
<View style={styles.statRow}>
|
|
<Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>Total Stops</Text>
|
|
<Text style={[styles.statValue, { color: theme.colors.textPrimary }]}>12</Text>
|
|
</View>
|
|
<View style={styles.statRow}>
|
|
<Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>Completed</Text>
|
|
<Text style={[styles.statValue, { color: theme.colors.success }]}>5</Text>
|
|
</View>
|
|
<View style={styles.statRow}>
|
|
<Text style={[styles.statLabel, { color: theme.colors.textMuted }]}>Remaining</Text>
|
|
<Text style={[styles.statValue, { color: theme.colors.warning }]}>7</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Button
|
|
title="Start Navigation"
|
|
onPress={() => {}}
|
|
style={{ marginTop: 'auto', marginBottom: 24 }}
|
|
/>
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16,
|
|
},
|
|
mapPlaceholder: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0,0,0,0.02)',
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderStyle: 'dashed',
|
|
borderColor: 'rgba(0,0,0,0.1)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 24,
|
|
},
|
|
mapText: {
|
|
marginTop: 16,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
infoCard: {
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
padding: 16,
|
|
},
|
|
infoTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
marginBottom: 12,
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
width: '100%',
|
|
marginBottom: 12,
|
|
},
|
|
statRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8,
|
|
},
|
|
statLabel: {
|
|
fontSize: 14,
|
|
},
|
|
statValue: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
},
|
|
});
|