Add liquid search & jobs list.

components/jobs-list/job-list-item.jsx

@@ -0,0 +1,54 @@
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { Button, List, Text, useTheme } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.analytics";
+import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+
+const mapStateToProps = createStructuredSelector({});
+const mapDispatchToProps = (dispatch) => ({
+  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
+  setCameraJob: (job) => dispatch(setCameraJob(job)),
+});
+
+export function JobListItem({ setCameraJob, setCameraJobId, item }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const theme = useTheme();
+  const onPress = () => {
+    logImEXEvent("imexmobile_view_job_detail");
+    router.navigate({
+      pathname: `/jobs/${item.id}`,
+      params: {
+        title: item.ro_number || t("general.labels.na"),
+      },
+    });
+  };
+
+  const handleUpload = () => {};
+
+  return (
+    <List.Item
+    onPress={onPress}
+      title={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
+        item.ownr_co_nm || ""
+      }`}
+      description={`$${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
+        item.v_model_desc || ""
+      }`}
+      left={(props) => (
+        <Text variant="titleMedium" style={{ padding: 10 }}>
+          {item.ro_number || t("general.labels.na")}
+        </Text>
+      )}
+      right={() => (
+        <Button onPress={handleUpload}>
+          <List.Icon color={theme.colors.primary} icon="cloud-upload-outline" />
+        </Button>
+      )}
+    />
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobListItem);