Minor UI improvements.

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>
   );