152 lines
4.4 KiB
TypeScript
152 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, ScrollView } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { WalletIcon } from '@icons';
|
|
import { useAppSelector } from '@store';
|
|
import { formatCurrency } from '@utils/formatters';
|
|
import { getStyles } from './earningsScreen.styles';
|
|
|
|
export const EarningsScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const { todayEarnings, completedCount, onlineMinutes } = useAppSelector(
|
|
state => state.earnings,
|
|
);
|
|
const { jobHistory } = useAppSelector(state => state.job);
|
|
|
|
// Default mock jobs history if none completed yet
|
|
const defaultHistory: {
|
|
orderId: string;
|
|
time: string;
|
|
amount: string;
|
|
paymentType: 'online' | 'cod';
|
|
}[] = [
|
|
{
|
|
orderId: '#ORD125487',
|
|
time: '12:35 PM',
|
|
amount: '78.0',
|
|
paymentType: 'online',
|
|
},
|
|
{
|
|
orderId: '#ORD125422',
|
|
time: '11:15 AM',
|
|
amount: '65.0',
|
|
paymentType: 'cod',
|
|
},
|
|
{
|
|
orderId: '#ORD125389',
|
|
time: '09:40 AM',
|
|
amount: '120.0',
|
|
paymentType: 'online',
|
|
},
|
|
{
|
|
orderId: '#ORD125310',
|
|
time: 'Yesterday',
|
|
amount: '85.0',
|
|
paymentType: 'online',
|
|
},
|
|
];
|
|
|
|
const displayHistory =
|
|
jobHistory.length > 0
|
|
? jobHistory
|
|
.map(job => ({
|
|
orderId: job.orderId,
|
|
time: job.deliveredAt
|
|
? new Date(job.deliveredAt).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
: 'Delivered',
|
|
amount: job.amount,
|
|
paymentType: job.paymentType,
|
|
}))
|
|
.concat(defaultHistory)
|
|
: defaultHistory;
|
|
|
|
const formatOnlineTime = (mins: number) => {
|
|
const hours = Math.floor(mins / 60);
|
|
const remainingMins = mins % 60;
|
|
return `${hours}h ${
|
|
remainingMins < 10 ? `0${remainingMins}` : remainingMins
|
|
}m`;
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView
|
|
contentContainerStyle={styles.scrollContainer}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View style={styles.headerContainer}>
|
|
<Text style={styles.title}>Earnings</Text>
|
|
</View>
|
|
|
|
{/* Total Earnings Card */}
|
|
<View style={styles.summaryCard}>
|
|
<Text style={styles.summaryTitle}>Today's Earnings</Text>
|
|
<Text style={styles.totalAmount}>
|
|
{formatCurrency(todayEarnings)}
|
|
</Text>
|
|
|
|
<View style={styles.statsRow}>
|
|
<View style={styles.statBox}>
|
|
<Text style={styles.statVal}>{completedCount}</Text>
|
|
<Text style={styles.statLabel}>Deliveries</Text>
|
|
</View>
|
|
|
|
<View style={styles.statDivider} />
|
|
|
|
<View style={styles.statBox}>
|
|
<Text style={styles.statVal}>
|
|
{formatOnlineTime(onlineMinutes)}
|
|
</Text>
|
|
<Text style={styles.statLabel}>Online Time</Text>
|
|
</View>
|
|
|
|
<View style={styles.statDivider} />
|
|
|
|
<View style={styles.statBox}>
|
|
<Text style={styles.statVal}>₹78.50</Text>
|
|
<Text style={styles.statLabel}>Avg / Order</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Recent Deliveries List */}
|
|
<View style={styles.listSection}>
|
|
<Text style={styles.sectionTitle}>Recent Deliveries</Text>
|
|
|
|
{displayHistory.map((item, index) => (
|
|
<View key={index} style={styles.earningItem}>
|
|
<View style={styles.itemLeft}>
|
|
<View style={styles.iconContainer}>
|
|
<WalletIcon size={20} color={colors.primary} />
|
|
</View>
|
|
<View>
|
|
<Text style={styles.orderIdText}>{item.orderId}</Text>
|
|
<Text style={styles.timeText}>{item.time}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.itemRight}>
|
|
<Text style={styles.itemAmount}>
|
|
+{formatCurrency(Number(item.amount))}
|
|
</Text>
|
|
<View style={styles.paymentBadge}>
|
|
<Text style={styles.paymentText}>
|
|
{item.paymentType.toUpperCase()}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default EarningsScreen;
|