Added tabs to jobs detail + some basic rendering.

components/job-tombstone/job-tombstone.component.jsx

@@ -0,0 +1,82 @@
+import Dinero from "dinero.js";
+import {
+  Card,
+  CardItem,
+  H3,
+  Text,
+  View,
+  Container,
+  Content,
+} from "native-base";
+import React from "react";
+import { StyleSheet, RefreshControl } from "react-native";
+
+export default function JobTombstone({ job, loading, refetch }) {
+  if (!!!job) {
+    <Card>
+      <Text>Job is not defined.</Text>
+    </Card>;
+  }
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  return (
+    <Container>
+      <Content
+        padder
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      >
+        <Card>
+          <CardItem bordered style={localStyles.status}>
+            <H3>{job.status}</H3>
+          </CardItem>
+          <CardItem bordered style={localStyles.ins_card}>
+            <View style={{ flex: 3, marginright: 10 }}>
+              <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
+              <Text numberOfLines={1}>{job.clm_no || ""}</Text>
+            </View>
+            <View style={{ flex: 1, marginLeft: 10 }}>
+              <Text numberOfLines={1}>{job.ded_status || ""}</Text>
+              <Text numberOfLines={1}>
+                {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
+              </Text>
+            </View>
+          </CardItem>
+          <CardItem bordered style={localStyles.owner_card}>
+            <View style={{ flex: 1 }}>
+              <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${
+                job.ownr_ln || ""
+              }${job.ownr_co_nm || ""}`}</Text>
+              <Text>{job.ownr_ph1 || ""}</Text>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
+                job.v_make_desc || ""
+              } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
+            </View>
+          </CardItem>
+          <CardItem></CardItem>
+        </Card>
+      </Content>
+    </Container>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  ins_card: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  status: {
+    textAlign: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  owner_card: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+});