Add notifications support.

app/_layout.tsx

@@ -7,6 +7,7 @@ import {
   DefaultTheme,
   ThemeProvider,
 } from "@react-navigation/native";
+import * as Notifications from "expo-notifications";
 import { Stack } from "expo-router";
 import {
   Icon,
@@ -25,6 +26,7 @@ import { client } from "../graphql/client";
 import { useTheme as usePaperTheme } from "../hooks/useTheme";
 import { persistor, store } from "../redux/store";
 import "../translations/i18n";
+import { registerForPushNotificationsAsync } from "../util/notificationHandler";
 
 function AuthenticatedLayout() {
   const { t } = useTranslation();
@@ -109,6 +111,33 @@ function AppContent({ currentUser, checkUserSession, bodyshop }: any) {
     checkUserSession();
   }, [checkUserSession]);
 
+  useEffect(() => {
+    registerForPushNotificationsAsync()
+      .then((token) => console.log("Expo Push Token:", token))
+      .catch((error: any) =>
+        console.log("Error getting Expo Push Token:", error)
+      );
+
+    const notificationListener = Notifications.addNotificationReceivedListener(
+      async (notification) => {
+        console.log("Notification received:", notification);
+        Notifications.setBadgeCountAsync(
+          (await Notifications.getBadgeCountAsync()) + 1
+        );
+      }
+    );
+
+    const responseListener =
+      Notifications.addNotificationResponseReceivedListener((response) => {
+        console.log("Notification response received:", response);
+      });
+
+    return () => {
+      notificationListener.remove();
+      responseListener.remove();
+    };
+  }, []);
+
   if (currentUser.authorized === null) {
     return (
       <ThemedLayout>

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;