Basic job details.

components/job-tombstone/job-tombstone.jsx

@@ -0,0 +1,186 @@
+import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { useQuery } from "@apollo/client";
+import { useLocalSearchParams } from "expo-router";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { ActivityIndicator, Card } from "react-native-paper";
+import DataLabelComponent from "../data-label/data-label";
+
+export default function JobTombstone() {
+  const { jobId } = useLocalSearchParams();
+  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+    variables: {
+      id: jobId,
+    },
+    skip: !jobId,
+  });
+
+  const { t } = useTranslation();
+  const onRefresh = async () => {
+    return refetch();
+  };
+  if (loading) {
+    return <ActivityIndicator />;
+  }
+  if (!data.jobs_by_pk) {
+    return (
+      <Card>
+        <Text>Job is not defined.</Text>
+      </Card>
+    );
+  }
+  const job = data.jobs_by_pk;
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        rowGap: 16,
+        padding: 10,
+      }}
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+      }
+    >
+      <Card>
+        <Card.Title title={t("jobdetail.labels.jobinfo")} />
+        <Card.Content>
+          <Text>{job.status}</Text>
+          {job.inproduction && (
+            <Text>{t("objects.jobs.labels.inproduction")}</Text>
+          )}
+          {job.inproduction &&
+            job.production_vars &&
+            !!job.production_vars.note && (
+              <Text>{job.production_vars.note}</Text>
+            )}
+        </Card.Content>
+      </Card>
+
+      <Card>
+        <Card.Title title={t("jobdetail.labels.claiminformation")} />
+        <Card.Content style={localStyles.twoColumnCard}>
+          <View style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.owner")}
+              content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+                job.ownr_co_nm || ""
+              }`}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.vehicle")}
+              content={
+                <View>
+                  <Text>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
+                    job.v_model_desc || ""
+                  }`}</Text>
+                  <Text>{job.v_vin}</Text>
+                </View>
+              }
+            />
+          </View>
+          <View style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.ins_co_nm")}
+              content={job.ins_co_nm}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.clm_no")}
+              content={job.clm_no}
+            />
+          </View>
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Title title={t("jobdetail.labels.employeeassignments")} />
+        <Card.Content>
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_body")}
+            content={`${
+              (job.employee_body_rel && job.employee_body_rel.first_name) || ""
+            } ${
+              (job.employee_body_rel && job.employee_body_rel.last_name) || ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_prep")}
+            content={`${
+              (job.employee_prep_rel && job.employee_prep_rel.first_name) || ""
+            } ${
+              (job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_refinish")}
+            content={`${
+              (job.employee_refinish_rel &&
+                job.employee_refinish_rel.first_name) ||
+              ""
+            } ${
+              (job.employee_refinish_rel &&
+                job.employee_refinish_rel.last_name) ||
+              ""
+            }`}
+          />
+          <DataLabelComponent
+            label={t("objects.jobs.fields.employee_csr")}
+            content={`${
+              (job.employee_csr_rel && job.employee_csr_rel.first_name) || ""
+            } ${
+              (job.employee_csr_rel && job.employee_csr_rel.last_name) || ""
+            }`}
+          />
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Title title={t("jobdetail.labels.dates")} />
+        <Card.Content style={localStyles.twoColumnCard}>
+          <View style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.scheduled_in")}
+              content={job.scheduled_in}
+              dateTime
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.actual_in")}
+              content={job.actual_in}
+              dateTime
+            />
+          </View>
+          <View style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.scheduled_completion")}
+              content={job.scheduled_completion}
+              dateTime
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.scheduled_delivery")}
+              content={job.scheduled_delivery}
+              dateTime
+            />
+          </View>
+        </Card.Content>
+      </Card>
+    </ScrollView>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  twoColumnCard: { display: "flex", flexDirection: "row" },
+  twoColumnCardColumn: { flex: 1 },
+  status: {
+    textAlign: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  inproduction: {
+    textAlign: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+});