Basic job details.

components/job-lines/job-lines.jsx

@@ -0,0 +1,72 @@
+import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { useQuery } from "@apollo/client";
+import { useGlobalSearchParams } from "expo-router";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, Text } from "react-native";
+import { ActivityIndicator, Card, DataTable } from "react-native-paper";
+
+export default function JobLines(props) {
+  const { jobId } = useGlobalSearchParams();
+
+  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>
+      <DataTable>
+        <DataTable.Header>
+          <DataTable.Title> {t("jobdetail.labels.lines_desc")}</DataTable.Title>
+          <DataTable.Title>
+            {t("jobdetail.labels.lines_lbr_ty")}
+          </DataTable.Title>
+          <DataTable.Title numeric>
+            {t("jobdetail.labels.lines_lb_hrs")}
+          </DataTable.Title>
+          <DataTable.Title>
+            {t("jobdetail.labels.lines_part_type")}
+          </DataTable.Title>
+          <DataTable.Title numeric>
+            {t("jobdetail.labels.lines_qty")}
+          </DataTable.Title>
+        </DataTable.Header>
+
+        {job.joblines.map((item) => (
+          <DataTable.Row key={item.id}>
+            <DataTable.Cell style={{ flex: 4 }}>
+              {item.line_desc}
+            </DataTable.Cell>
+            <DataTable.Cell>
+              {item.mod_lbr_ty && t(`jobdetail.lbr_types.${item.mod_lbr_ty}`)}
+            </DataTable.Cell>
+            <DataTable.Cell numeric>{item.mod_lb_hrs}</DataTable.Cell>
+            <DataTable.Cell>
+              {item.part_type && t(`jobdetail.part_types.${item.part_type}`)}
+            </DataTable.Cell>
+            <DataTable.Cell numeric>{item.part_qty}</DataTable.Cell>
+          </DataTable.Row>
+        ))}
+      </DataTable>
+    </ScrollView>
+  );
+}