diff --git a/components/Modals/JobIdSearchAndList.jsx b/components/Modals/JobIdSearchAndList.jsx
new file mode 100644
index 0000000..b47a194
--- /dev/null
+++ b/components/Modals/JobIdSearchAndList.jsx
@@ -0,0 +1,162 @@
+import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { Button, List, Searchbar } from "react-native-paper";
+import { useState } from "react";
+import { SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { useQuery } from "@apollo/client";
+
+function JobIdSearchAndList({ onClose }) {
+ const jobSrchNotExported = true;
+ const jobSrchNotInvoiced = false;
+ const jobSrchConvertedOnly = false;
+
+ const jobSrchCurrentValue = { id: "temp", ro_number: "Temporary Storage" };
+ const jobSrchOnSetCurrentValue = (e) => {
+ console.info("onSetCurrentValue was called", e);
+ };
+ const jobSrchCurrentValueId = "temp";
+ const jobSrchOnSetCurrentValueId = () => {
+ console.info("onSetCurrentValueId was called");
+ };
+
+ const [searchText, setSearchText] = useState(null);
+ const [loading2, setLoading2] = useState(null);
+
+ console.log("onClose :", onClose);
+ // const showModal = () => setVisible(true);
+ const close = onClose ? onClose : () => console.info("todo add close"); //setVisible(false);
+ const onChangeSearch = (query) => {
+ console.log("onChangeSearch text:", query);
+ setSearchText(query);
+ };
+ const onRefresh = async () => {
+ //7/18
+ setLoading2(true);
+ // refetch();
+ setTimeout(() => {
+ setLoading2(false);
+ }, 1000);
+
+ //7/17
+ // setRefreshing(true);
+ // console.log(" ");
+ // console.log(" ");
+ // console.log(" ");
+ // console.log(" ");
+ // console.log(" ");
+ // console.log("onRefresh was called");
+
+ // console.log("data:", data);
+ // refetch({
+ // notInvoiced: jobSrchNotInvoiced,
+ // notExported: jobSrchNotExported,
+ // isConverted: jobSrchConvertedOnly,
+ // search: searchText,
+ // });
+ };
+
+ const { loading, error, data, refetch } = useQuery(
+ SEARCH_JOBS_FOR_AUTOCOMPLETE,
+ {
+ // fetchPolicy: "cache-and-network",
+ variables: {
+ search: searchText,
+ ...(jobSrchConvertedOnly || jobSrchNotExported
+ ? {
+ ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
+ ...(jobSrchNotExported ? { notExported: true } : {}),
+ ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
+ }
+ : {}),
+ },
+ skip: !!!searchText,
+ fetchPolicy: "network-only",
+ nextFetchPolicy: "network-only",
+ }
+ );
+
+ return (
+
+
+
+ onChangeSearch(text)}
+ value={searchText}
+ />
+
+
+ }
+ // data={[{ id: "temp", ro_number: "Temporary Storage" }, ...jobs]}
+ data={data?.search_jobs}
+ keyExtractor={(item) => item.id}
+ renderItem={(object) => (
+ {
+ // jobSrchOnSetCurrentValue(object.item);
+ // jobSrchOnSetCurrentValueId(object.item.id);
+ hideModal();
+ setSearchText("");
+ }}
+ left={() => {
+ if (object.item.id !== jobSrchCurrentValueId) return null;
+ return (
+
+ );
+ }}
+ titleStyle={{
+ ...(object.item.id === jobSrchCurrentValueId
+ ? { color: "dodgerblue" }
+ : {}),
+ }}
+ title={`${
+ object.item.ro_number ? `${object.item.ro_number} ` : ``
+ }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""}${
+ object.item.v_model_yr ? `- ${object.item.v_model_yr}` : ""
+ }${object.item.v_make_desc ? `- ${object.item.v_make_desc}` : ""}${
+ object.item.v_model_desc ? `- ${object.item.v_model_desc}` : ""
+ }`}
+ key={object.item.id}
+ />
+ )}
+ ListEmptyComponent={
+
+ No Data
+
+ }
+ />
+
+ );
+}
+
+export default JobIdSearchAndList;
+
+const styles = StyleSheet.create({});
diff --git a/components/Modals/JobSearchModal.jsx b/components/Modals/JobSearchModal.jsx
new file mode 100644
index 0000000..cd10321
--- /dev/null
+++ b/components/Modals/JobSearchModal.jsx
@@ -0,0 +1,53 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Modal, Portal } from "react-native-paper";
+import JobIdSearchAndList from "./JobIdSearchAndList";
+import { useState } from "react";
+
+function JobSearchModal() {
+ const { t } = useTranslation();
+ const [visible, setVisible] = useState(false);
+ const showModal = () => setVisible(true);
+ const hideModal = () => setVisible(false);
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default JobSearchModal;
+
+const styles = StyleSheet.create({});