Minor UI improvements.

components/data-label/data-label.jsx

@@ -7,6 +7,7 @@ export default function DataLabelComponent({
   label,
   content,
   dateTime,
+  noTextWrap,
   ...restProps
 }) {
   let theContent = content;
@@ -19,7 +20,8 @@ export default function DataLabelComponent({
   return (
     <View key={key} {...rest} style={{ margin: 4, ...restProps.style }}>
       <Text style={{ fontWeight: "bold" }}>{label}</Text>
-      <Text>{theContent}</Text>
+
+      {noTextWrap ? content : <Text>{theContent}</Text>}
     </View>
   );
 }

components/job-documents/job-documents.jsx

@@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { FlatList, RefreshControl, TouchableOpacity, View } from "react-native";
 import ImageView from "react-native-image-viewing";
 import { ActivityIndicator, Text } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import env from "../../env";
@@ -149,13 +150,15 @@ export function JobDocumentsComponent({ bodyshop }) {
         )}
       />
 
-      <ImageView
-        onRequestClose={() => setPreviewVisible(false)}
-        visible={previewVisible}
-        images={fullphotos}
-        imageIndex={imgIndex}
-        swipeToCloseEnabled={true}
-      />
+      <SafeAreaView>
+        <ImageView
+          onRequestClose={() => setPreviewVisible(false)}
+          visible={previewVisible}
+          images={fullphotos}
+          imageIndex={imgIndex}
+          swipeToCloseEnabled={true}
+        />
+      </SafeAreaView>
     </View>
   );
 }

components/job-status-selector/job-status-selector.jsx

@@ -107,7 +107,7 @@ export const JobStatusSelector = ({
 const styles = StyleSheet.create({
   root: {
     alignSelf: "flex-start",
-    paddingTop: 4,
+    paddingTop: 8,
   },
   trigger: {
     minWidth: 140,

components/job-tombstone/job-tombstone.jsx

@@ -1,3 +1,4 @@
+import env from "@/env";
 import { GET_JOB_TOMBSTONE } from "@/graphql/jobs.queries";
 import { selectBodyshop } from "@/redux/user/user.selectors";
 import { useQuery } from "@apollo/client";
@@ -5,15 +6,23 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  Platform,
   RefreshControl,
   ScrollView,
   StyleSheet,
   TouchableOpacity,
-  View
+  View,
 } from "react-native";
-import { ActivityIndicator, Card, Chip, Text } from "react-native-paper";
+import {
+  ActivityIndicator,
+  Button,
+  Card,
+  Chip,
+  Text,
+} from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { firstNames, getRandomIndex, lastNames } from "../../util/demodata";
 import DataLabelComponent from "../data-label/data-label";
 import ErrorDisplay from "../error/error-display";
 import { JobStatusSelector } from "../job-status-selector/job-status-selector";
@@ -122,8 +131,12 @@ function JobTombstone({ bodyshop }) {
             {job.inproduction && (
               <DataLabelComponent
                 label={t("objects.jobs.fields.inproduction")}
+                noTextWrap
                 content={
-                  <Chip mode="outlined">
+                  <Chip
+                    style={{ marginTop: 8, maxWidth: "75%" }}
+                    mode="outlined"
+                  >
                     {t("objects.jobs.labels.inproduction")}
                   </Chip>
                 }
@@ -143,7 +156,12 @@ function JobTombstone({ bodyshop }) {
               label={t("objects.jobs.fields.related_ros")}
               content={
                 <View
-                  style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}
+                  style={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                    gap: 8,
+                    paddingTop: 8,
+                  }}
                 >
                   {job.vehicle?.jobs
                     ?.filter((ro) => ro.id !== job.id)
@@ -159,7 +177,9 @@ function JobTombstone({ bodyshop }) {
                         }}
                         key={ro.id}
                       >
-                        <Chip mode="outlined">{ro.ro_number || "N/A"}</Chip>
+                        <Button comp mode="outlined">
+                          {ro.ro_number || "N/A"}
+                        </Button>
                       </TouchableOpacity>
                     ))}
                 </View>
@@ -178,21 +198,33 @@ function JobTombstone({ bodyshop }) {
           <View style={localStyles.twoColumnCardColumn}>
             <DataLabelComponent
               label={t("objects.jobs.fields.owner")}
-              content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
-                job.ownr_co_nm || ""
-              }`}
+              content={
+                env.DEMO_MODE
+                  ? `${firstNames[getRandomIndex()] || ""} ${
+                      lastNames[getRandomIndex()] || ""
+                    } ${job.ownr_co_nm || ""}`
+                  : `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+                      job.ownr_co_nm || ""
+                    }`
+              }
             />
             <DataLabelComponent
               label={t("objects.jobs.fields.vehicle")}
-              content={`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
-                job.v_model_desc || ""
-              } - ${job.v_vin}`}
+              content={
+                env.DEMO_MODE
+                  ? `${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
+                      job.v_model_desc || ""
+                    } - 1GNDX33L46D168902`
+                  : `${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
+                      job.v_model_desc || ""
+                    } - ${job.v_vin}`
+              }
             />
           </View>
           <View style={localStyles.twoColumnCardColumn}>
             <DataLabelComponent
               label={t("objects.jobs.fields.ins_co_nm")}
-              content={job.ins_co_nm}
+              content={env.DEMO_MODE ? "ABC Ins." : job.ins_co_nm}
             />
             <DataLabelComponent
               label={t("objects.jobs.fields.clm_no")}
@@ -281,7 +313,7 @@ function JobTombstone({ bodyshop }) {
         </Card.Content>
       </Card>
       <View
-        style={{ height: 64 }} //Spacer
+        style={{ height: Platform.OS === "ios" ? 64 : 96 }} //Spacer
       />
     </ScrollView>
   );

components/jobs-list/job-list-item.jsx

@@ -1,9 +1,11 @@
+import env from "@/env";
+import { firstNames, getRandomIndex, lastNames } from "@/util/demodata";
 import * as Haptics from "expo-haptics";
 import { useRouter } from "expo-router";
 import React, { memo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Pressable, StyleSheet, View } from "react-native";
-import { Chip, IconButton, Text, useTheme } from "react-native-paper";
+import { IconButton, Text, useTheme } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
@@ -35,7 +37,11 @@ function JobListItemComponent({ openImagePicker, item }) {
     openImagePicker(item.id);
   }, [openImagePicker, item.id]);
 
-  const ownerName = `${item.ownr_fn || ""} ${item.ownr_ln || ""}`.trim();
+  const ownerName = env.DEMO_MODE
+    ? `${firstNames[getRandomIndex()] || ""} ${
+        lastNames[getRandomIndex()] || ""
+      }`
+    : `${item.ownr_fn || ""} ${item.ownr_ln || ""}`.trim();
   const company = item.ownr_co_nm || "";
   const vehicle = `${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
     item.v_model_desc || ""
@@ -92,8 +98,9 @@ function JobListItemComponent({ openImagePicker, item }) {
                 >
                   {vehicle}
                 </Text>
-
-                <Chip style>{item.status}</Chip>
+              </View>
+              <View style={styles.body}>
+                <Text variant="bodyMedium">{item.status}</Text>
               </View>
             </View>
             <IconButton