Fixed issues for demo.

components/job-lines/job-lines.component.jsx

@@ -0,0 +1,81 @@
+import { Card, CardItem, Container, Content, Text } from "native-base";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FlatList, RefreshControl, StyleSheet } from "react-native";
+import Dinero from "dinero.js";
+
+export default function JobLines({ job, loading, refetch }) {
+  const { t } = useTranslation();
+  if (!!!job) {
+    <Card>
+      <Text>Job is not defined.</Text>
+    </Card>;
+  }
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  return (
+    <Container>
+      <Content
+        padder
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      >
+        <FlatList
+          data={job.joblines}
+          style={{ flex: 1 }}
+          contentContainerStyle={localStyles.listContentContainer}
+          keyExtractor={(item) => item.id}
+          renderItem={(object) => (
+            <Card>
+              <CardItem style={localStyles.flexRow}>
+                <Text style={localStyles.growWithEllipsis}>{`${
+                  object.item.line_desc
+                }${
+                  object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
+                }`}</Text>
+                {object.item.part_type && (
+                  <Text style={localStyles.sideMargins}>
+                    {t(`jobdetail.part_types.${object.item.part_type}`)}
+                  </Text>
+                )}
+                <Text style={localStyles.sideMargins}>
+                  {Dinero({
+                    amount: Math.round((object.item.act_price || 0) * 100),
+                  }).toFormat()}
+                </Text>
+              </CardItem>
+              <CardItem style={localStyles.flexRow}>
+                {object.item.mod_lbr_ty && (
+                  <Text>
+                    {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
+                  </Text>
+                )}
+              </CardItem>
+            </Card>
+          )}
+        />
+      </Content>
+    </Container>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  listContentContainer: {
+    flex: 1,
+  },
+  flexRow: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  sideMargins: {
+    marginLeft: 5,
+    marginRight: 5,
+  },
+  growWithEllipsis: {
+    flex: 1,
+  },
+});

components/screen-job-detail/screen-job-detail.component.jsx

@@ -9,6 +9,7 @@ import JobTombstone from "../job-tombstone/job-tombstone.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
 import JobNotes from "../job-notes/job-notes.component";
 import JobDocuments from "../job-documents/job-documents.component";
+import JobLines from "../job-lines/job-lines.component";
 
 export default function ScreenJobDetail({ navigation, route, ...restProps }) {
   const {
@@ -35,6 +36,9 @@ export default function ScreenJobDetail({ navigation, route, ...restProps }) {
           refetch={refetch}
         />
       </Tab>
+      <Tab heading={t("jobdetail.labels.lines")}>
+        <JobLines job={data.jobs_by_pk} loading={loading} refetch={refetch} />
+      </Tab>
       <Tab heading={t("jobdetail.labels.documents")}>
         <JobDocuments
           job={data.jobs_by_pk}

components/screen-main/screen-main.component.jsx

@@ -18,16 +18,17 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import ScreenCameraJobSearch from "../screen-camera-job-search/screen-camera-job-search.component";
 import ScreenCamera from "../screen-camera/screen-camera.component";
 import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
 import ScreenJobList from "../screen-job-list/screen-job-list.component";
+import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
 import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
 import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
-import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
-import ScreenCameraJobSearch from "../screen-camera-job-search/screen-camera-job-search.component";
+import Dinero from "dinero.js";
 
 const JobStack = createStackNavigator();
 const CameraStack = createStackNavigator();
@@ -48,6 +49,8 @@ const mapDispatchToProps = (dispatch) => ({
   signOutStart: () => dispatch(signOutStart()),
 });
 
+Dinero.globalLocale = "en-CA";
+
 const LeftDrawerButton = (props, navigation) => (
   <Ionicons
     {...props}
@@ -127,7 +130,10 @@ const BottomTabsNavigator = () => (
           iconName = "ios-camera";
         } else if (route.name === "MediaCacheTab") {
           iconName = "ios-photos";
+        } else {
+          //iconName = "customerservice";
         }
+
         return <Ionicons name={iconName} size={size} color={color} />;
       },
     })}

components/screen-media-cache/screen-media-cache.component.jsx

@@ -1,13 +1,14 @@
 import * as FileSystem from "expo-file-system";
-import { Button, Text as NBText, Thumbnail, View } from "native-base";
-import React, { useEffect, useState } from "react";
 import {
-  FlatList,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from "react-native";
+  Button,
+  Container,
+  Content,
+  Text as NBText,
+  Thumbnail,
+  View,
+} from "native-base";
+import React, { useEffect, useState } from "react";
+import { FlatList, StyleSheet, Text, TouchableOpacity } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -43,50 +44,47 @@ export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
   }, [photos]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={photos}
-        style={{ flex: 5 }}
-        contentContainerStyle={styles.listContentContainer}
-        keyExtractor={(item) => item.id}
-        numColumns={5}
-        renderItem={(object) =>
-          object.item.video ? (
-            <Text>Video</Text>
-          ) : (
-            <TouchableOpacity
-              onPress={() => {
-                setImgIndex(object.index);
-                setPreviewVisible(true);
-              }}
-            >
-              <Thumbnail square large source={{ uri: object.item.uri }} />
-            </TouchableOpacity>
-          )
-        }
-      />
-      <FlatList
-        data={imagesInDir}
-        style={{ flex: 1, backgroundColor: "tomato" }}
-        keyExtractor={(item) => item.id}
-        renderItem={(object) => <Text>{object.item}</Text>}
-      />
-      <Text>{`${photos.length} Photos`}</Text>
-      <View style={styles.actions}>
-        <Button onPress={() => removeAllPhotos()}>
-          <NBText>Delete all</NBText>
-        </Button>
-        <Button onPress={() => uploadAllphotos()}>
-          <NBText>Upload all</NBText>
-        </Button>
-      </View>
-      <MediaCacheOverlay
-        imgIndex={imgIndex}
-        setImgIndex={setImgIndex}
-        previewVisible={previewVisible}
-        setPreviewVisible={setPreviewVisible}
-      />
-    </SafeAreaView>
+    <Container>
+      <Content>
+        <View style={styles.actions}>
+          <Button onPress={() => removeAllPhotos()}>
+            <NBText>Delete all</NBText>
+          </Button>
+          <Button onPress={() => uploadAllphotos()}>
+            <NBText>Upload all</NBText>
+          </Button>
+        </View>
+        <Text>{`${photos.length} Photos`}</Text>
+        <FlatList
+          data={photos}
+          style={{ flex: 5 }}
+          contentContainerStyle={styles.listContentContainer}
+          keyExtractor={(item) => item.id}
+          numColumns={5}
+          renderItem={(object) =>
+            object.item.video ? (
+              <Text>Video</Text>
+            ) : (
+              <TouchableOpacity
+                onPress={() => {
+                  setImgIndex(object.index);
+                  setPreviewVisible(true);
+                }}
+              >
+                <Thumbnail square large source={{ uri: object.item.uri }} />
+              </TouchableOpacity>
+            )
+          }
+        />
+
+        <MediaCacheOverlay
+          imgIndex={imgIndex}
+          setImgIndex={setImgIndex}
+          previewVisible={previewVisible}
+          setPreviewVisible={setPreviewVisible}
+        />
+      </Content>
+    </Container>
   );
 }
 
@@ -105,8 +103,15 @@ const styles = StyleSheet.create({
   thumbnail: {
     width: 10,
     height: 10,
-    backgroundColor: "tomato",
+    // backgroundColor: "tomato",
   },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);
+
+// <FlatList
+//   data={imagesInDir}
+//   style={{}}
+//   keyExtractor={(item) => item.id}
+//   renderItem={(object) => <Text>{object.item}</Text>}
+// />;

components/screen-messaging-conversation/screen-messaging-conversation.component.jsx

@@ -4,7 +4,7 @@ import { View, Text } from "react-native";
 export default function ScreenMessagingConversation({ navigation }) {
   return (
     <View>
-      <Text>The detailed conversation</Text>
+      <Text></Text>
     </View>
   );
 }