Update jobline display and related jobs.

components/job-lines/job-lines.jsx

@@ -1,4 +1,4 @@
-import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { GET_JOB_LINES } from "@/graphql/jobs.queries";
 import { useQuery } from "@apollo/client";
 import { useGlobalSearchParams } from "expo-router";
 import React from "react";
@@ -10,7 +10,7 @@ import ErrorDisplay from "../error/error-display";
 export default function JobLines() {
   const { jobId } = useGlobalSearchParams();
 
-  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+  const { loading, error, data, refetch } = useQuery(GET_JOB_LINES, {
     variables: {
       id: jobId,
     },
@@ -47,13 +47,13 @@ export default function JobLines() {
           <DataTable.Title style={{ flex: 2 }}>
             {t("jobdetail.labels.lines_lbr_ty")}
           </DataTable.Title>
-          <DataTable.Title style={{ flex: 1 }} numeric>
+          <DataTable.Title style={{ flex: 1 }}>
             {t("jobdetail.labels.lines_lb_hrs")}
           </DataTable.Title>
           <DataTable.Title style={{ flex: 2 }}>
             {t("jobdetail.labels.lines_part_type")}
           </DataTable.Title>
-          <DataTable.Title style={{ flex: 1 }} numeric>
+          <DataTable.Title style={{ flex: 1 }}>
             {t("jobdetail.labels.lines_qty")}
           </DataTable.Title>
         </DataTable.Header>
@@ -71,15 +71,13 @@ export default function JobLines() {
             <DataTable.Cell style={{ flex: 2 }}>
               {item.mod_lbr_ty && t(`jobdetail.lbr_types.${item.mod_lbr_ty}`)}
             </DataTable.Cell>
-            <DataTable.Cell style={{ flex: 1 }} numeric>
+            <DataTable.Cell style={{ flex: 1 }}>
               {item.mod_lb_hrs}
             </DataTable.Cell>
             <DataTable.Cell style={{ flex: 2 }}>
               {item.part_type && t(`jobdetail.part_types.${item.part_type}`)}
             </DataTable.Cell>
-            <DataTable.Cell style={{ flex: 1 }} numeric>
-              {item.part_qty}
-            </DataTable.Cell>
+            <DataTable.Cell style={{ flex: 1 }}>{item.part_qty}</DataTable.Cell>
           </DataTable.Row>
         ))}
       </DataTable>

components/job-notes/job-notes.jsx

@@ -1,4 +1,4 @@
-import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { GET_JOB_NOTES } from "@/graphql/jobs.queries";
 import { useQuery } from "@apollo/client";
 import { AntDesign } from "@expo/vector-icons";
 import { useGlobalSearchParams } from "expo-router";
@@ -22,7 +22,7 @@ export default function JobNotes() {
   const showNoteModal = () => setNoteModalVisible(true);
   const hideNoteModal = () => setNoteModalVisible(false);
 
-  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+  const { loading, error, data, refetch } = useQuery(GET_JOB_NOTES, {
     variables: {
       id: jobId,
     },

components/job-notes/new-note-modal.jsx

@@ -1,4 +1,4 @@
-import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { GET_JOB_NOTES } from "@/graphql/jobs.queries";
 import { INSERT_NEW_NOTE } from "@/graphql/notes.queries";
 import { selectCurrentUser } from "@/redux/user/user.selectors";
 import { useMutation } from "@apollo/client";
@@ -97,7 +97,7 @@ const NewNoteModal = ({
   }, []);
 
   const [insertNote, { loading }] = useMutation(INSERT_NEW_NOTE, {
-    refetchQueries: [{ query: GET_JOB_BY_PK, variables: { id: jobId } }],
+    refetchQueries: [{ query: GET_JOB_NOTES, variables: { id: jobId } }],
     awaitRefetchQueries: true,
   });
 

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>