WMS-32 adjust the routes grid

src/Main.tsx

@@ -147,10 +147,7 @@ class Main extends Component<Props, State> {
               initialRouteName={initialRouteName}
               screenOptions={({ route, navigation }) => ({
                 headerRight: () => <OptionMenu route={route} navigation={navigation} />,
-                headerTitleContainerStyle: {
-                  width: '50%'
-                },
-                headerTintColor: '#ffffff',
+                headerTintColor: Theme.colors.surface,
                 headerStyle: {
                   backgroundColor: Theme.colors.primary,
                   height: appHeaderHeight
@@ -176,7 +173,7 @@ class Main extends Component<Props, State> {
               <Stack.Screen name="ProductDetails" component={ProductDetails} />
               <Stack.Screen name="PickOrderItem" component={PickOrderItem} />
               <Stack.Screen name="Transfers" component={Transfers} />
-              <Stack.Screen component={TransferDetails} name="TransferDetails" />
+              <Stack.Screen name="TransferDetails" component={TransferDetails} />
               <Stack.Screen name="Dashboard" component={Dashboard} />
               <Stack.Screen name="Scan" component={Scan} />
               <Stack.Screen name="Products" component={Products} />
@@ -185,7 +182,13 @@ class Main extends Component<Props, State> {
               <Stack.Screen name="PutawayItem" component={PutawayItem} />
               <Stack.Screen name="PutawayItemDetail" component={PutawayItemDetail} />
               <Stack.Screen name="PutawayDetails" component={PutawayDetails} />
-              <Stack.Screen name="InboundOrderList" component={InboundOrderList} />
+              <Stack.Screen
+                name="InboundOrderList"
+                component={InboundOrderList}
+                options={{
+                  title: 'Receiving'
+                }}
+              />
               <Stack.Screen name="InboundDetails" component={InboundDetails} />
               <Stack.Screen name="Product Summary" component={ProductSummary} />
               <Stack.Screen name="CreateLpn" component={CreateLpn} />

src/components/BarcodeSearchHeader/BarcodeSearchHeader.tsx

@@ -2,9 +2,20 @@ import React, { useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { Searchbar } from 'react-native-paper';
 import styles from './styles';
-import { Props } from './types';
+import { View } from 'react-native';
+import Theme from '../../utils/Theme';
 
-const BarcodeSearchHeader = (props: Props) => {
+interface OwnProps {
+  subtitle?: string | null;
+  placeholder?: string;
+  searchBox: boolean;
+  onSearchTermSubmit: (query: string) => void;
+  resetSearch?: () => void;
+  autoSearch: boolean | false;
+  autoFocus?: boolean | false;
+}
+
+const BarcodeSearchHeader: React.FC<OwnProps> = (props) => {
   const [searchTerm, setSearchTerm] = useState<string>('');
 
   const navigation = useNavigation<any>();
@@ -31,15 +42,17 @@ const BarcodeSearchHeader = (props: Props) => {
   };
 
   return (
-    <Searchbar
-      theme={{}}
-      placeholder={props.placeholder ? props.placeholder : 'Search by barcode'}
-      value={searchTerm}
-      style={styles.searchBar}
-      autoFocus={props.autoFocus}
-      onSubmitEditing={onSearchTermSubmit}
-      onChangeText={setSearchTerm}
-    />
+    <View style={styles.container}>
+      <Searchbar
+        theme={{}}
+        placeholder={props.placeholder ? props.placeholder : 'Search...'}
+        value={searchTerm}
+        style={styles.searchBar}
+        autoFocus={props.autoFocus}
+        onSubmitEditing={onSearchTermSubmit}
+        onChangeText={setSearchTerm}
+      />
+    </View>
   );
 };
 

src/components/BarcodeSearchHeader/styles.ts

@@ -1,9 +1,16 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    elevation: 2
+  },
   searchBar: {
-    height: 56,
-    elevation: 4,
-    borderRadius: 0
+    height: 48,
+    elevation: 2,
+    borderRadius: 24,
+    marginHorizontal: 8,
+    marginVertical: 8,
+    backgroundColor: '#f5f5f5'
   }
 });

src/components/Button/Button.tsx

@@ -4,7 +4,7 @@ import { Props } from './types';
 import styles from './styles';
 
 const Button: React.FC<Props> = (props) => {
-  const { style, onPress, disabled, mode = 'contained', title, size = '80%' } = props;
+  const { style, color, onPress, disabled, mode = 'contained', title, size = '80%' } = props;
   const buttonSizeStyle = () => {
     switch (size) {
       case '50%':
@@ -24,6 +24,7 @@ const Button: React.FC<Props> = (props) => {
       style={[style, buttonSizeStyle(), styles.button, disabled && styles.disabled]}
       labelStyle={styles.label}
       disabled={disabled}
+      color={color}
       onPress={onPress}
     >
       {title}

src/components/Button/styles.ts

@@ -7,7 +7,6 @@ export default StyleSheet.create({
     fontWeight: '600'
   },
   button: {
-    height: 45,
     alignSelf: 'center',
     justifyContent: 'center',
     display: 'flex',

src/components/Button/types.ts

@@ -3,6 +3,7 @@ import { ViewProps } from 'react-native';
 export interface Props extends ViewProps {
   title: string;
   onPress?: () => void;
+  color?: string;
   disabled?: boolean;
   size?: 'default' | '80%' | '50%' | '100%';
   mode?: 'text' | 'outlined' | 'contained';

src/components/CustomDrawerContent/styles.ts

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   userInfoSection: {
-    padding: 20,
+    padding: 16,
     display: 'flex',
     flexDirection: 'row',
     borderBottomWidth: 0.5,

src/constants.ts

@@ -13,4 +13,4 @@ export const ratio = {
   height: Dimensions.get('window').height / 776
 };
 
-export const appHeaderHeight = 55;
+export const appHeaderHeight = 56;

src/screens/ChooseCurrentLocation/index.tsx

@@ -10,23 +10,20 @@ import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
 import { getLocationsAction, setCurrentLocationAction } from '../../redux/actions/locations';
 
 const NO_ORGANIZATION_NAME = 'No organization';
+const NO_LOCATION_GROUP_NAME = 'NO_LOCATION_GROUP_PROVIDED';
 
 export interface OwnProps {
   navigation: any;
 }
 
-interface StateProps {
-  //no-op
-}
-
 interface DispatchProps {
   getLocationsAction: (callback: (locations: any) => void) => void;
   setCurrentLocationAction: (location: Location, callback: (data: any) => void) => void;
   showScreenLoading: (message?: string) => void;
   hideScreenLoading: () => void;
 }
 
-type Props = OwnProps & StateProps & DispatchProps;
+type Props = OwnProps & DispatchProps;
 
 interface State {
   orgNameAndLocationsDictionary: Dictionary<Location[]>;
@@ -56,48 +53,37 @@ class ChooseCurrentLocation extends React.Component<Props, State> {
         });
       } else {
         const orgNameAndLocationsDictionary = this.getSortedOrgNameAndLocationsDictionary(data);
-        this.setState({
-          orgNameAndLocationsDictionary: orgNameAndLocationsDictionary
-        });
+        this.setState({ orgNameAndLocationsDictionary });
         this.props.hideScreenLoading();
       }
     };
     this.props.getLocationsAction(actionCallback);
   };
 
   getSortedOrgNameAndLocationsDictionary = (locations: Location[]): Dictionary<Location[]> => {
-    let orgNameAndLocationsDictionary = _.groupBy(locations, (location: Location) => {
-      if (location.organizationName) {
-        return location.organizationName;
-      } else {
-        return NO_ORGANIZATION_NAME;
-      }
-    });
-    return _.keys(orgNameAndLocationsDictionary)
-      .sort((leftOrgName: string, rightOrgName: string) => {
-        if (leftOrgName === NO_ORGANIZATION_NAME && rightOrgName === NO_ORGANIZATION_NAME) {
-          return 0;
-        } else if (leftOrgName === NO_ORGANIZATION_NAME) {
-          return 1;
-        } else if (rightOrgName === NO_ORGANIZATION_NAME) {
-          return -1;
-        } else {
-          if (leftOrgName === rightOrgName) {
-            return 0;
-          } else if (leftOrgName > rightOrgName) {
-            return 1;
-          } else {
-            return -1;
-          }
-        }
-      })
-      .reduce(
-        (acc: {}, orgName: string) => ({
-          ...acc,
-          [orgName]: orgNameAndLocationsDictionary[orgName]
-        }),
-        {}
-      );
+    // Group locations by organization name or 'No organization' if no name is provided
+    const orgNameAndLocationsDictionary = _.groupBy(
+      locations,
+      (location: Location) => location.organizationName || NO_ORGANIZATION_NAME
+    );
+
+    // Sort the organization names alphabetically, with 'No organization' at the end
+    const sortedOrgNames = _.orderBy(
+      Object.keys(orgNameAndLocationsDictionary),
+      [(orgName) => (orgName === NO_ORGANIZATION_NAME ? Infinity : orgName)],
+      ['asc']
+    );
+
+    // Rebuild the dictionary with sorted keys
+    return _.reduce(
+      sortedOrgNames,
+      (acc: Dictionary<Location[]>, orgName: string) => {
+        const sortedLocations = _.orderBy(orgNameAndLocationsDictionary[orgName], ['name'], ['asc']);
+        acc[orgName] = sortedLocations;
+        return acc;
+      },
+      {}
+    );
   };
 
   setCurrentLocation = async (orgName: string, location: Location) => {
@@ -134,22 +120,29 @@ class ChooseCurrentLocation extends React.Component<Props, State> {
   render() {
     return (
       <View style={styles.container}>
-        {/*<Header title="Choose Location" backButtonVisible={false} />*/}
         <ScrollView style={styles.scrollView}>
           <List.AccordionGroup>
             {_.map(_.keys(this.state.orgNameAndLocationsDictionary), (orgName: string) => {
               return (
                 <List.Accordion
                   title={orgName}
+                  description={`${this.state.orgNameAndLocationsDictionary[orgName].length} Location(s)`}
                   id={`orgName_${orgName}`}
-                  left={(props) => <List.Icon {...props} icon="office-building" />}
+                  left={(props) => (
+                    <View style={styles.iconContainer}>
+                      <List.Icon {...props} color="#fff" icon="office-building" />
+                    </View>
+                  )}
                   key={`orgName_${orgName}`}
                 >
                   {_.map(this.state.orgNameAndLocationsDictionary[orgName], (location) => {
                     return (
                       <List.Item
                         title={location.name}
+                        description={location.locationGroup?.name ?? NO_LOCATION_GROUP_NAME}
                         key={`orgName_${orgName}_locationName_${location.name}`}
+                        hasTVPreferredFocus={false}
+                        tvParallaxProperties={undefined}
                         onPress={() => this.setCurrentLocation(orgName, location)}
                       />
                     );

src/screens/ChooseCurrentLocation/styles.ts

@@ -1,10 +1,25 @@
 import { StyleSheet } from 'react-native';
+import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
   container: {
     display: 'flex',
-    flexDirection: 'column',
-    flex: 1
+    flexDirection: 'column'
   },
-  scrollView: {}
+  scrollView: {
+    backgroundColor: '#fff',
+    borderRadius: Theme.roundness,
+    marginVertical: 8,
+    marginHorizontal: 8
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: Theme.colors.backdrop,
+    marginRight: 8
+  }
 });

src/screens/Dashboard/index.tsx

@@ -1,19 +1,11 @@
 import React from 'react';
-import {
-  FlatList,
-  Image,
-  ListRenderItemInfo,
-  Text,
-  TouchableOpacity,
-  View
-} from 'react-native';
-import styles from './styles';
-import { connect } from 'react-redux';
-import { DispatchProps, Props, State } from './Types';
-import { RootState } from '../../redux/reducers';
+import { FlatList, Image, ListRenderItemInfo, Text, TouchableOpacity, View } from 'react-native';
 import { Card } from 'react-native-paper';
-import dashboardData from './dashboardData';
 import EmptyView from '../../components/EmptyView';
+import { Props, State } from './Types';
+import dashboardData from './dashboardData';
+import styles from './styles';
+
 class Dashboard extends React.Component<Props, State> {
   renderItem = (item: any, index: any) => {
     return (
@@ -25,11 +17,7 @@ class Dashboard extends React.Component<Props, State> {
         }}
       >
         <Card style={styles.card}>
-          <Image
-            style={styles.cardImage}
-            resizeMode="contain"
-            source={item.icon}
-          />
+          <Image style={styles.cardImage} resizeMode="contain" source={item.icon} />
           <Text style={styles.cardLabel}>{item.screenName}</Text>
         </Card>
       </TouchableOpacity>
@@ -42,23 +30,13 @@ class Dashboard extends React.Component<Props, State> {
         <FlatList
           data={dashboardData}
           horizontal={false}
-          numColumns={3}
-          ListEmptyComponent={<EmptyView />}
-          renderItem={(item: ListRenderItemInfo<any>) =>
-            this.renderItem(item.item, item.index)
-          }
+          numColumns={2}
+          ListEmptyComponent={<EmptyView title={''} isRefresh={undefined} />}
+          renderItem={(item: ListRenderItemInfo<any>) => this.renderItem(item.item, item.index)}
         />
       </View>
     );
   }
 }
 
-const mapStateToProps = (state: RootState) => ({
-  //no-op
-});
-
-const mapDispatchToProps: DispatchProps = {
-  //no-op
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
+export default Dashboard;