OBLS-308 Frontend for Pick up allocation (#347)

* OBLS-308 init pick up allocation

* OBLS-308 distinguish picked lines

* OBLS-308 copilot review

* OBLS-308 add stock pick modal

* Connecting PUA screens with REST API

* OBLS-308 Handled manual allocation, grouped bins by display and locations, code refactor

* OBLS-308 Adjusted pick stock modal to handle allocation quantity and statuses

* OBLS-308 Adjusted to the latest backend changes

* OBLS-308 Dislaying error from backend in alert

* OBLS-308 Changed button labels

* OBLS-308 Changed label in alert title

---------

Co-authored-by: druchniewicz <druchniewicz@soldevelo.com>

Author: olewandowski1

src/Main.tsx

@@ -7,6 +7,7 @@ import { SafeAreaView } from 'react-native';
 import { Provider } from 'react-native-paper';
 import SplashScreen from 'react-native-splash-screen';
 import { connect } from 'react-redux';
+
 import FullScreenLoadingIndicator from './components/FullScreenLoadingIndicator';
 import showPopup from './components/Popup';
 import { appConfig } from './constants';
@@ -35,6 +36,8 @@ import OutboundStockDetails from './screens/OutboundStockDetails';
 import OutboundStockList from './screens/OutboundStockList';
 import PackingLocationPage from './screens/PackingLocationPage';
 import PickOrderItem from './screens/PickList';
+import { PickUpEntryScreen } from './screens/PickUpAllocation/PickUpEntryScreen';
+import { PickUpOrderScreen } from './screens/PickUpAllocation/PickUpOrderScreen';
 import Placeholder from './screens/Placeholder';
 import ProductDetails from './screens/ProductDetails';
 import Products from './screens/Products';
@@ -47,15 +50,9 @@ import PutawayList from './screens/PutawayList';
 import Scan from './screens/Scan';
 import Settings from './screens/Settings';
 import ShipItemDetails from './screens/ShipItemDetails';
+import SortationContainerScreen from './screens/Sortation/SortationContainerScreen';
 import SortationEntryScreen from './screens/Sortation/SortationEntryScreen';
 import SortationQuantityScreen from './screens/Sortation/SortationQuantityScreen';
-import Transfer from './screens/Transfer';
-import Transfers from './screens/Transfers';
-import TransferDetails from './screens/TransfersDetails';
-import ViewAvailableItem from './screens/ViewAvailableItem';
-import ApiClient from './utils/ApiClient';
-import Theme from './utils/Theme';
-import SortationContainerScreen from './screens/Sortation/SortationContainerScreen';
 import SortationTaskSelectionListScreen from './screens/Sortation/SortationTaskSelectionListScreen';
 import PutawayEntryScreen from './screens/SortationPutaway/PutawayEntryScreen';
 import PutawayLocationScanScreen from './screens/SortationPutaway/PutawayLocationScanScreen';
@@ -71,6 +68,12 @@ import PickingPickStagingLocationScreen from './screens/Picking/PickingPickStagi
 import PickingMoveToStagingScreen from './screens/Picking/PickingMoveToStaging';
 import PickingStagingDropScreen from './screens/Picking/PickingStagingDrop';
 import { PickingProvider } from './screens/Picking/PickingContext';
+import Transfer from './screens/Transfer';
+import Transfers from './screens/Transfers';
+import TransferDetails from './screens/TransfersDetails';
+import ViewAvailableItem from './screens/ViewAvailableItem';
+import ApiClient from './utils/ApiClient';
+import Theme from './utils/Theme';
 
 const Stack = createStackNavigator();
 export interface OwnProps {
@@ -350,6 +353,16 @@ class Main extends Component<Props, State> {
                   component={PickingStagingDropScreen}
                   options={{ title: 'Staging Location Drop' }}
                 />
+                <Stack.Screen
+                  name="PickUpEntryScreen"
+                  component={PickUpEntryScreen}
+                  options={{ title: 'Pick Up Allocation' }}
+                />
+                <Stack.Screen
+                  name="PickUpOrderScreen"
+                  component={PickUpOrderScreen}
+                  options={{ title: 'Pick Up Allocation' }}
+                />
               </Stack.Navigator>
             </NavigationContainer>
           </SafeAreaView>

src/apis/index.ts

@@ -10,3 +10,4 @@ export * from './lpn';
 export * from './transfers';
 export * from './others';
 export * from './picking';
+export * from './pua';

src/apis/pua.ts

@@ -0,0 +1,24 @@
+import apiClient from '../utils/ApiClient';
+
+export function getOutboundOrders() {
+  let url =
+    '/stockMovements?exclude=lineItems&direction=OUTBOUND&requisitionStatusCode=VERIFYING' +
+    '&sort=dateCreated&order=asc&deliveryTypeCode=PICK_UP';
+  if (global.location) {
+    url += '&origin=' + global.location.id;
+  }
+
+  return apiClient.get(url);
+}
+
+export function getOutboundOrderDetails(id: string) {
+  return apiClient.get(`/outbound-orders/${id}`);
+}
+
+export function allocate(orderId: string, lineItemId: string, payload: any) {
+  return apiClient.post(`/outbound-orders/${orderId}/items/${lineItemId}/allocations`, payload);
+}
+
+export function updateOrderStatus(orderId: string, status: string) {
+  return apiClient.post(`/stockMovements/${orderId}/status`, { status });
+}

src/data/location/Location.ts

@@ -18,6 +18,7 @@ interface Location {
   hasPartialReceivingSupport: boolean;
   locationType: LocationType;
   locationNumber: string;
+  isDisplay: boolean;
 }
 
 export default Location;

src/screens/Dashboard/dashboardData.ts

@@ -45,6 +45,13 @@ const dashboardEntries: DashboardEntry[] = [
     navigationScreenName: 'Orders',
     defaultVisible: false
   },
+  {
+    key: 'pickUpAllocation',
+    screenName: 'Pick-Up Allocation',
+    entryDescription: 'Manage pick-up allocations and tasks',
+    icon: IconPicking,
+    navigationScreenName: 'PickUpEntryScreen'
+  },
   {
     key: 'packing',
     screenName: 'Packing',

src/screens/PickUpAllocation/PickUpEntryScreen.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Alert, FlatList, TouchableOpacity, View } from 'react-native';
+import { Caption, Card, Chip, Divider, Paragraph, Title } from 'react-native-paper';
+
+import { navigate } from '../../NavigationService';
+import styles from './styles';
+import { AllocationOrder } from './types';
+import { getOutboundOrders } from '../../apis/pua';
+import { useFocusEffect } from '@react-navigation/native';
+
+export function PickUpEntryScreen() {
+  const [orders, setOrders] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const fetchOrders = async () => {
+    try {
+      setIsLoading(true);
+      const response = await getOutboundOrders();
+      setOrders(response.data || []);
+    } catch (error) {
+      Alert.alert('Error', 'Failed to fetch orders data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // useFocusEffect usedto refresh when screen is focused after nagivation
+  useFocusEffect(
+    useCallback(() => {
+      fetchOrders();
+    }, [])
+  );
+
+  return (
+    <View style={styles.screenContainer}>
+      <Title style={styles.titleText}>Outstanding Orders ({orders.length})</Title>
+      <Paragraph style={styles.subtitleText}>
+        Select an order from the list to start the pick-up allocation process.
+      </Paragraph>
+
+      <Divider style={styles.sectionDivider} />
+
+      <FlatList
+        data={orders}
+        renderItem={({ item }) => <PickUpCard order={item} />}
+        keyExtractor={(item: AllocationOrder) => item.id}
+        numColumns={1}
+        ItemSeparatorComponent={() => <View style={styles.itemSeparator} />}
+        refreshing={isLoading}
+        onRefresh={fetchOrders}
+      />
+    </View>
+  );
+}
+
+function PickUpCard({ order }: { order: AllocationOrder }) {
+  const onPress = () => navigate('PickUpOrderScreen', { orderId: order.id });
+
+  return (
+    <TouchableOpacity activeOpacity={0.85} style={styles.cardTouchable} onPress={onPress}>
+      <Card style={styles.card}>
+        <Card.Content>
+          <View style={styles.cardHeader}>
+            <Chip icon="identifier" textStyle={styles.chipText} style={styles.chip}>
+              {order.identifier}
+            </Chip>
+            <Chip icon="package" textStyle={styles.chipText} style={styles.chip}>
+              {`Lines: ${order.lineItemCount}`}
+            </Chip>
+          </View>
+
+          <Divider style={styles.cardDivider} />
+
+          <Title>{order.name}</Title>
+          <Caption>
+            {`Order Date: ${new Date(order.dateTimeCreated).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'short',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit'
+            })}`}
+          </Caption>
+        </Card.Content>
+      </Card>
+    </TouchableOpacity>
+  );
+}