sg-delivery-partner/app/features/screens/jobsScreen/jobsScreen.tsx

import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { useAppTheme } from '@theme';
import { OrderCard, EmptyState } from '@components';
import { useAppDispatch, useAppSelector } from '@store';
import { ClipboardIcon } from '@icons';
import { getStyles } from './jobsScreen.styles';
import { getAllActiveDeliveries } from './thunk';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AppStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';

export const JobsScreen: React.FC = () => {
  const navigation =
    useNavigation<NativeStackNavigationProp<AppStackParamList>>();
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const dispatch = useAppDispatch();

  const [activeTab, setActiveTab] = useState<'active' | 'history'>('active');
  const { activeJob, jobHistory } = useAppSelector(state => state.job);
  const { activeDeliveries } = useAppSelector(state => state.deliveries);

  useEffect(() => {
    dispatch(getAllActiveDeliveries());
  }, [dispatch]);

  // 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
          activeDeliveries ? (
            <View style={styles.cardWrapper}>
              <OrderCard
                pickupName={activeDeliveries?.order?.pickupAddress?.city}
                pickupAddress={
                  activeDeliveries?.order?.pickupAddress?.addressLine1
                }
                dropName={activeDeliveries?.order?.dropAddress?.city}
                dropAddress={activeDeliveries?.order?.dropAddress?.addressLine1}
                amount={activeDeliveries?.order?.totalAmount}
                distance={activeDeliveries?.estimatedDistanceKm}
                itemCount={activeDeliveries?.order?.orderItems?.length}
                paymentType={activeDeliveries?.order?.paymentMethod}
                onPress={() =>
                  navigation.navigate(RouteNames.ArrivedAtStore, {
                    jobId: activeDeliveries?.orderId,
                  })
                }
              />
            </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;