Add custom image loader and start job status.

components/job-tombstone/job-tombstone.jsx

@@ -1,13 +1,29 @@
 import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
+import { selectBodyshop } from "@/redux/user/user.selectors";
 import { useQuery } from "@apollo/client";
 import { useLocalSearchParams } from "expo-router";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { RefreshControl, ScrollView, StyleSheet, View } from "react-native";
-import { ActivityIndicator, Card, Text, useTheme } from "react-native-paper";
+import {
+  ActivityIndicator,
+  Button,
+  Card,
+  Menu,
+  Text,
+  useTheme,
+} from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import DataLabelComponent from "../data-label/data-label";
 
-export default function JobTombstone() {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({});
+export default connect(mapStateToProps, mapDispatchToProps)(JobTombstone);
+
+function JobTombstone({ bodyshop }) {
   const { jobId } = useLocalSearchParams();
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: {
@@ -15,6 +31,10 @@ export default function JobTombstone() {
     },
     skip: !jobId,
   });
+  const [visible, setVisible] = useState(false);
+  const openMenu = () => setVisible(true);
+  const closeMenu = () => setVisible(false);
+  console.log("JobTombstone render", visible);
 
   const theme = useTheme();
 
@@ -22,6 +42,42 @@ export default function JobTombstone() {
   const onRefresh = async () => {
     return refetch();
   };
+
+  const [availableStatuses, setAvailableStatuses] = useState([]);
+  useEffect(() => {
+    if (!job || !bodyshop) return;
+
+    const { md_ro_statuses } = bodyshop;
+    const {
+      pre_production_statuses,
+      production_statuses,
+      post_production_statuses,
+      statuses,
+      default_invoiced,
+      default_exported,
+    } = md_ro_statuses;
+
+    // Handle non-parts entry scenarios based on job status
+    if (pre_production_statuses.includes(job.status)) {
+      setAvailableStatuses(pre_production_statuses);
+    } else if (production_statuses.includes(job.status)) {
+      setAvailableStatuses(production_statuses);
+    } else if (post_production_statuses.includes(job.status)) {
+      // Filter out invoiced and exported statuses for post-production
+      setAvailableStatuses(
+        post_production_statuses.filter(
+          (status) => status !== default_invoiced && status !== default_exported
+        )
+      );
+    } else {
+      // Default to all statuses if no specific restrictions apply
+      console.log(
+        "Status didn't match any restrictions. Allowing all status changes."
+      );
+      setAvailableStatuses(statuses);
+    }
+  }, [job, bodyshop, setAvailableStatuses]);
+
   if (loading) {
     return <ActivityIndicator size="large" style={{ flex: 1 }} />;
   }
@@ -50,6 +106,15 @@ export default function JobTombstone() {
         />
         <Card.Content>
           <Text>{job.status}</Text>
+          <Menu
+            visible={visible}
+            onDismiss={closeMenu}
+            anchor={<Button onPress={openMenu}>{job.status}</Button>}
+          >
+            {availableStatuses.map((status) => (
+              <Menu.Item key={status} onPress={() => {}} title={status} />
+            ))}
+          </Menu>
           {job.inproduction && (
             <Text>{t("objects.jobs.labels.inproduction")}</Text>
           )}