141 lines
4.6 KiB
TypeScript
141 lines
4.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { OrderCard, EmptyState } from '@components';
|
|
import { useAppSelector } from '@store';
|
|
import { ClipboardIcon } from '@icons';
|
|
import { getStyles } from './jobsScreen.styles';
|
|
|
|
export const JobsScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const [activeTab, setActiveTab] = useState<'active' | 'history'>('active');
|
|
const { activeJob, jobHistory } = useAppSelector((state) => state.job);
|
|
|
|
// Default history mock jobs
|
|
const defaultHistory = [
|
|
{
|
|
pickupName: 'Cafe Coffee Day',
|
|
pickupAddress: 'MG Road, Bengaluru',
|
|
dropName: 'Rohit Sharma',
|
|
dropAddress: 'Koramangala 4th Block, Bengaluru',
|
|
amount: 78.0,
|
|
distance: 1.2,
|
|
itemCount: 2,
|
|
paymentType: 'online',
|
|
},
|
|
{
|
|
pickupName: 'Pizza Hut',
|
|
pickupAddress: 'Indiranagar, Bengaluru',
|
|
dropName: 'Aishwarya Sen',
|
|
dropAddress: 'Domlur Stage 2, Bengaluru',
|
|
amount: 95.0,
|
|
distance: 3.8,
|
|
itemCount: 3,
|
|
paymentType: 'cod',
|
|
},
|
|
{
|
|
pickupName: 'Burgers & Co',
|
|
pickupAddress: 'Koramangala 5th Block',
|
|
dropName: 'Sameer Khan',
|
|
dropAddress: 'HSR Layout Sector 3, Bengaluru',
|
|
amount: 110.0,
|
|
distance: 4.5,
|
|
itemCount: 1,
|
|
paymentType: 'online',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.headerContainer}>
|
|
<Text style={styles.title}>Jobs</Text>
|
|
</View>
|
|
|
|
{/* Tabs Selector */}
|
|
<View style={styles.tabBar}>
|
|
<TouchableOpacity
|
|
style={[styles.tab, activeTab === 'active' && styles.tabActive]}
|
|
activeOpacity={0.8}
|
|
onPress={() => setActiveTab('active')}
|
|
>
|
|
<Text style={[styles.tabText, activeTab === 'active' && styles.tabTextActive]}>
|
|
Active / Upcoming
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.tab, activeTab === 'history' && styles.tabActive]}
|
|
activeOpacity={0.8}
|
|
onPress={() => setActiveTab('history')}
|
|
>
|
|
<Text style={[styles.tabText, activeTab === 'history' && styles.tabTextActive]}>
|
|
History
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView contentContainerStyle={styles.listContainer} showsVerticalScrollIndicator={false}>
|
|
{activeTab === 'active' ? (
|
|
// Active job tab
|
|
activeJob ? (
|
|
<View style={styles.cardWrapper}>
|
|
<OrderCard
|
|
pickupName={activeJob.pickupName}
|
|
pickupAddress={activeJob.pickupAddress}
|
|
dropName={activeJob.dropName}
|
|
dropAddress={activeJob.dropAddress}
|
|
amount={activeJob.amount}
|
|
distance={activeJob.distance}
|
|
itemCount={activeJob.itemCount}
|
|
paymentType={activeJob.paymentType}
|
|
/>
|
|
</View>
|
|
) : (
|
|
<View style={styles.emptyStateContainer}>
|
|
<ClipboardIcon size={48} color={colors.placeholder} />
|
|
<Text style={styles.emptyStateText}>No active deliveries right now</Text>
|
|
</View>
|
|
)
|
|
) : (
|
|
// History tab
|
|
<View>
|
|
{jobHistory.length > 0
|
|
? jobHistory.map((job, idx) => (
|
|
<View key={idx} style={styles.cardWrapper}>
|
|
<OrderCard
|
|
pickupName={job.pickupName}
|
|
pickupAddress={job.pickupAddress}
|
|
dropName={job.dropName}
|
|
dropAddress={job.dropAddress}
|
|
amount={job.amount}
|
|
distance={job.distance}
|
|
itemCount={job.itemCount}
|
|
paymentType={job.paymentType}
|
|
/>
|
|
</View>
|
|
))
|
|
: defaultHistory.map((job, idx) => (
|
|
<View key={idx} style={styles.cardWrapper}>
|
|
<OrderCard
|
|
pickupName={job.pickupName}
|
|
pickupAddress={job.pickupAddress}
|
|
dropName={job.dropName}
|
|
dropAddress={job.dropAddress}
|
|
amount={job.amount}
|
|
distance={job.distance}
|
|
itemCount={job.itemCount}
|
|
paymentType={job.paymentType}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default JobsScreen;
|