Update jobline display and related jobs.

components/job-tombstone/job-tombstone.jsx

@@ -1,10 +1,16 @@
-import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { GET_JOB_TOMBSTONE } from "@/graphql/jobs.queries";
 import { selectBodyshop } from "@/redux/user/user.selectors";
 import { useQuery } from "@apollo/client";
-import { useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { RefreshControl, ScrollView, StyleSheet, View } from "react-native";
+import {
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View
+} from "react-native";
 import { ActivityIndicator, Card, Chip, Text } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -20,7 +26,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobTombstone);
 
 function JobTombstone({ bodyshop }) {
   const { jobId } = useLocalSearchParams();
-  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+  const router = useRouter();
+  const { loading, error, data, refetch } = useQuery(GET_JOB_TOMBSTONE, {
     variables: {
       id: jobId,
     },
@@ -100,35 +107,65 @@ function JobTombstone({ bodyshop }) {
           title={t("jobdetail.labels.jobinfo")}
           titleVariant="titleLarge"
         />
-        <Card.Content>
-          <DataLabelComponent
-            label={t("objects.jobs.fields.status")}
-            content={
-              <JobStatusSelector
-                statuses={availableStatuses}
-                currentStatus={job.status}
-                label={t("jobdetail.labels.status")}
-              />
-            }
-          />
-          {job.inproduction && (
+        <Card.Content style={localStyles.twoColumnCard}>
+          <View style={localStyles.twoColumnCardColumn}>
             <DataLabelComponent
-              label={t("objects.jobs.fields.inproduction")}
+              label={t("objects.jobs.fields.status")}
               content={
-                <Chip mode="outlined">
-                  {t("objects.jobs.labels.inproduction")}
-                </Chip>
+                <JobStatusSelector
+                  statuses={availableStatuses}
+                  currentStatus={job.status}
+                  label={t("jobdetail.labels.status")}
+                />
               }
             />
-          )}
-          {job.inproduction &&
-            job.production_vars &&
-            !!job.production_vars.note && (
+            {job.inproduction && (
               <DataLabelComponent
-                label={t("objects.jobs.fields.production_note")}
-                content={<Text>{job.production_vars.note}</Text>}
+                label={t("objects.jobs.fields.inproduction")}
+                content={
+                  <Chip mode="outlined">
+                    {t("objects.jobs.labels.inproduction")}
+                  </Chip>
+                }
               />
             )}
+            {job.inproduction &&
+              job.production_vars &&
+              !!job.production_vars.note && (
+                <DataLabelComponent
+                  label={t("objects.jobs.fields.production_note")}
+                  content={<Text>{job.production_vars.note}</Text>}
+                />
+              )}
+          </View>
+          <View style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.related_ros")}
+              content={
+                <View
+                  style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}
+                >
+                  {job.vehicle?.jobs
+                    ?.filter((ro) => ro.id !== job.id)
+                    .map((ro) => (
+                      <TouchableOpacity
+                        onPress={() => {
+                          router.navigate({
+                            pathname: `/jobs/${ro.id}`,
+                            params: {
+                              title: ro.ro_number || t("general.labels.na"),
+                            },
+                          });
+                        }}
+                        key={ro.id}
+                      >
+                        <Chip mode="outlined">{ro.ro_number || "N/A"}</Chip>
+                      </TouchableOpacity>
+                    ))}
+                </View>
+              }
+            />
+          </View>
         </Card.Content>
       </Card>