Add notifications support.

app/jobs/[jobId]/_layout.tsx

@@ -3,7 +3,7 @@ import { Tabs } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "react-native-paper";
 
-function JobTabLayout(props) {
+function JobTabLayout() {
   const { t } = useTranslation();
 
   const theme = useTheme();

app/jobs/_layout.tsx

@@ -1,8 +1,26 @@
-import { Stack } from "expo-router";
+import { openImagePicker } from "@/redux/photos/photos.actions";
+import * as Haptics from "expo-haptics";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { IconButton } from "react-native-paper";
+import { connect } from "react-redux";
 
-function JobsStack() {
+const mapDispatchToProps = (dispatch) => ({
+  openImagePicker: (id) => dispatch(openImagePicker(id)),
+});
+export default connect(null, mapDispatchToProps)(JobsStack);
+
+function JobsStack({ openImagePicker }) {
   const { t } = useTranslation();
+  const { jobId } = useLocalSearchParams();
+  console.log("*** ~ JobsStack ~ jobId:", jobId);
+
+  const handleUpload = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    openImagePicker(jobId);
+  }, [openImagePicker, jobId]);
+
   return (
     <Stack
       screenOptions={{
@@ -23,10 +41,18 @@ function JobsStack() {
         options={({ route }) => ({
           //headerShown: false,
           title: (route.params as any)?.title || "Job Details",
+          headerRight: () => (
+            <IconButton
+              onPress={handleUpload}
+              icon="cloud-upload-outline"
+              mode="contained-tonal"
+              size={8}
+              //style={{ marginBottom: 1 }}
+              accessibilityLabel={t("joblist.actions.upload")}
+            />
+          ),
         })}
       />
     </Stack>
   );
 }
-
-export default JobsStack;