feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Background.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+
+type Props = ViewProps & {
+  children: React.ReactNode;
+};
+
+export default function Background({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      {...rest}
+      style={[{ flex: 1, backgroundColor: colors.background }, style]}
+    />
+  );
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/Header.tsx

@@ -0,0 +1,320 @@
+import * as React from 'react';
+import { Animated, Platform, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+import type { HeaderOptions, Layout } from '../types';
+import getDefaultHeaderHeight from './getDefaultHeaderHeight';
+import HeaderBackground from './HeaderBackground';
+import HeaderShownContext from './HeaderShownContext';
+import HeaderTitle from './HeaderTitle';
+
+type Props = HeaderOptions & {
+  /**
+   * Whether the header is in a modal
+   */
+  modal?: boolean;
+  /**
+   * Layout of the screen.
+   */
+  layout?: Layout;
+  /**
+   * Title text for the header.
+   */
+  title: string;
+};
+
+const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
+  Object.keys(styles).forEach((styleProp) => {
+    const value = styles[styleProp];
+
+    if (styleProp === 'position' && value === 'absolute') {
+      console.warn(
+        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option."
+      );
+    } else if (value !== undefined) {
+      console.warn(
+        `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
+      );
+    }
+  });
+};
+
+export default function Header(props: Props) {
+  const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+
+  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+  const hasDynamicIsland = Platform.OS === 'ios' && insets.top > 50;
+  const statusBarHeight = hasDynamicIsland ? insets.top - 5 : insets.top;
+
+  const {
+    layout = frame,
+    modal = false,
+    title,
+    headerTitle: customTitle,
+    headerTitleAlign = Platform.select({
+      ios: 'center',
+      default: 'left',
+    }),
+    headerLeft,
+    headerLeftLabelVisible,
+    headerTransparent,
+    headerTintColor,
+    headerBackground,
+    headerRight,
+    headerTitleAllowFontScaling: titleAllowFontScaling,
+    headerTitleStyle: titleStyle,
+    headerLeftContainerStyle: leftContainerStyle,
+    headerRightContainerStyle: rightContainerStyle,
+    headerTitleContainerStyle: titleContainerStyle,
+    headerBackgroundContainerStyle: backgroundContainerStyle,
+    headerStyle: customHeaderStyle,
+    headerShadowVisible,
+    headerPressColor,
+    headerPressOpacity,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : statusBarHeight,
+  } = props;
+
+  const defaultHeight = getDefaultHeaderHeight(
+    layout,
+    modal,
+    headerStatusBarHeight
+  );
+
+  const {
+    height = defaultHeight,
+    minHeight,
+    maxHeight,
+    backgroundColor,
+    borderBottomColor,
+    borderBottomEndRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStartRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndColor,
+    borderEndWidth,
+    borderLeftColor,
+    borderLeftWidth,
+    borderRadius,
+    borderRightColor,
+    borderRightWidth,
+    borderStartColor,
+    borderStartWidth,
+    borderStyle,
+    borderTopColor,
+    borderTopEndRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopStartRadius,
+    borderTopWidth,
+    borderWidth,
+    // @ts-expect-error: web support for shadow
+    boxShadow,
+    elevation,
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    opacity,
+    transform,
+    ...unsafeStyles
+  } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
+
+  if (process.env.NODE_ENV !== 'production') {
+    warnIfHeaderStylesDefined(unsafeStyles);
+  }
+
+  const safeStyles: ViewStyle = {
+    backgroundColor,
+    borderBottomColor,
+    borderBottomEndRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStartRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndColor,
+    borderEndWidth,
+    borderLeftColor,
+    borderLeftWidth,
+    borderRadius,
+    borderRightColor,
+    borderRightWidth,
+    borderStartColor,
+    borderStartWidth,
+    borderStyle,
+    borderTopColor,
+    borderTopEndRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopStartRadius,
+    borderTopWidth,
+    borderWidth,
+    // @ts-expect-error: boxShadow is only for Web
+    boxShadow,
+    elevation,
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    opacity,
+    transform,
+  };
+
+  // Setting a property to undefined triggers default style
+  // So we need to filter them out
+  // Users can use `null` instead
+  for (const styleProp in safeStyles) {
+    // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles
+    if (safeStyles[styleProp] === undefined) {
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete safeStyles[styleProp];
+    }
+  }
+
+  const backgroundStyle = [
+    safeStyles,
+    headerShadowVisible === false && {
+      elevation: 0,
+      shadowOpacity: 0,
+      borderBottomWidth: 0,
+    },
+  ];
+
+  const leftButton = headerLeft
+    ? headerLeft({
+        tintColor: headerTintColor,
+        pressColor: headerPressColor,
+        pressOpacity: headerPressOpacity,
+        labelVisible: headerLeftLabelVisible,
+      })
+    : null;
+
+  const rightButton = headerRight
+    ? headerRight({
+        tintColor: headerTintColor,
+        pressColor: headerPressColor,
+        pressOpacity: headerPressOpacity,
+      })
+    : null;
+
+  const headerTitle =
+    typeof customTitle !== 'function'
+      ? (props: React.ComponentProps<typeof HeaderTitle>) => (
+          <HeaderTitle {...props} />
+        )
+      : customTitle;
+
+  return (
+    <React.Fragment>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          StyleSheet.absoluteFill,
+          { zIndex: 0 },
+          backgroundContainerStyle,
+        ]}
+      >
+        {headerBackground ? (
+          headerBackground({ style: backgroundStyle })
+        ) : headerTransparent ? null : (
+          <HeaderBackground style={backgroundStyle} />
+        )}
+      </Animated.View>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[{ height, minHeight, maxHeight, opacity, transform }]}
+      >
+        <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+        <View pointerEvents="box-none" style={styles.content}>
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.left,
+              headerTitleAlign === 'center' && styles.expand,
+              { marginStart: insets.left },
+              leftContainerStyle,
+            ]}
+          >
+            {leftButton}
+          </Animated.View>
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.title,
+              {
+                // Avoid the title from going offscreen or overlapping buttons
+                maxWidth:
+                  headerTitleAlign === 'center'
+                    ? layout.width -
+                      ((leftButton
+                        ? headerLeftLabelVisible !== false
+                          ? 80
+                          : 32
+                        : 16) +
+                        Math.max(insets.left, insets.right)) *
+                        2
+                    : layout.width -
+                      ((leftButton ? 72 : 16) +
+                        (rightButton ? 72 : 16) +
+                        insets.left -
+                        insets.right),
+              },
+              titleContainerStyle,
+            ]}
+          >
+            {headerTitle({
+              children: title,
+              allowFontScaling: titleAllowFontScaling,
+              tintColor: headerTintColor,
+              style: titleStyle,
+            })}
+          </Animated.View>
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.right,
+              styles.expand,
+              { marginEnd: insets.right },
+              rightContainerStyle,
+            ]}
+          >
+            {rightButton}
+          </Animated.View>
+        </View>
+      </Animated.View>
+    </React.Fragment>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+  title: {
+    marginHorizontal: 16,
+    justifyContent: 'center',
+  },
+  left: {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  right: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  expand: {
+    flexGrow: 1,
+    flexBasis: 0,
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/HeaderBackButton.tsx

@@ -0,0 +1,247 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  I18nManager,
+  Image,
+  LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import MaskedView from '../MaskedView';
+import PlatformPressable from '../PlatformPressable';
+import type { HeaderBackButtonProps } from '../types';
+
+export default function HeaderBackButton({
+  disabled,
+  allowFontScaling,
+  backImage,
+  label,
+  labelStyle,
+  labelVisible = Platform.OS === 'ios',
+  onLabelLayout,
+  onPress,
+  pressColor,
+  pressOpacity,
+  screenLayout,
+  tintColor: customTintColor,
+  titleLayout,
+  truncatedLabel = 'Back',
+  accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  testID,
+  style,
+}: HeaderBackButtonProps) {
+  const { colors } = useTheme();
+
+  const [initialLabelWidth, setInitialLabelWidth] = React.useState<
+    undefined | number
+  >(undefined);
+
+  const tintColor =
+    customTintColor !== undefined
+      ? customTintColor
+      : Platform.select({
+          ios: colors.primary,
+          default: colors.text,
+        });
+
+  const handleLabelLayout = (e: LayoutChangeEvent) => {
+    onLabelLayout?.(e);
+
+    setInitialLabelWidth(e.nativeEvent.layout.x + e.nativeEvent.layout.width);
+  };
+
+  const shouldTruncateLabel = () => {
+    return (
+      !label ||
+      (initialLabelWidth &&
+        titleLayout &&
+        screenLayout &&
+        (screenLayout.width - titleLayout.width) / 2 < initialLabelWidth + 26)
+    );
+  };
+
+  const renderBackImage = () => {
+    if (backImage) {
+      return backImage({ tintColor });
+    } else {
+      return (
+        <Image
+          style={[
+            styles.icon,
+            Boolean(labelVisible) && styles.iconWithLabel,
+            Boolean(tintColor) && { tintColor },
+          ]}
+          source={require('../assets/back-icon.png')}
+          fadeDuration={0}
+        />
+      );
+    }
+  };
+
+  const renderLabel = () => {
+    const leftLabelText = shouldTruncateLabel() ? truncatedLabel : label;
+
+    if (!labelVisible || leftLabelText === undefined) {
+      return null;
+    }
+
+    const labelElement = (
+      <View
+        style={
+          screenLayout
+            ? // We make the button extend till the middle of the screen
+              // Otherwise it appears to cut off when translating
+              [styles.labelWrapper, { minWidth: screenLayout.width / 2 - 27 }]
+            : null
+        }
+      >
+        <Animated.Text
+          accessible={false}
+          onLayout={
+            // This measurement is used to determine if we should truncate the label when it doesn't fit
+            // Only measure it when label is not truncated because we want the measurement of full label
+            leftLabelText === label ? handleLabelLayout : undefined
+          }
+          style={[
+            styles.label,
+            tintColor ? { color: tintColor } : null,
+            labelStyle,
+          ]}
+          numberOfLines={1}
+          allowFontScaling={!!allowFontScaling}
+        >
+          {leftLabelText}
+        </Animated.Text>
+      </View>
+    );
+
+    if (backImage || Platform.OS !== 'ios') {
+      // When a custom backimage is specified, we can't mask the label
+      // Otherwise there might be weird effect due to our mask not being the same as the image
+      return labelElement;
+    }
+
+    return (
+      <MaskedView
+        maskElement={
+          <View style={styles.iconMaskContainer}>
+            <Image
+              source={require('../assets/back-icon-mask.png')}
+              style={styles.iconMask}
+            />
+            <View style={styles.iconMaskFillerRect} />
+          </View>
+        }
+      >
+        {labelElement}
+      </MaskedView>
+    );
+  };
+
+  const handlePress = () => onPress && requestAnimationFrame(onPress);
+
+  return (
+    <PlatformPressable
+      disabled={disabled}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      onPress={disabled ? undefined : handlePress}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      android_ripple={androidRipple}
+      style={[styles.container, disabled && styles.disabled, style]}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+    >
+      <React.Fragment>
+        {renderBackImage()}
+        {renderLabel()}
+      </React.Fragment>
+    </PlatformPressable>
+  );
+}
+
+const androidRipple = {
+  borderless: true,
+  foreground: Platform.OS === 'android' && Platform.Version >= 23,
+  radius: 20,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
+    ...Platform.select({
+      ios: null,
+      default: {
+        marginVertical: 3,
+        marginHorizontal: 11,
+      },
+    }),
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  label: {
+    fontSize: 17,
+    // Title and back label are a bit different width due to title being bold
+    // Adjusting the letterSpacing makes them coincide better
+    letterSpacing: 0.35,
+  },
+  labelWrapper: {
+    // These styles will make sure that the label doesn't fill the available space
+    // Otherwise it messes with the measurement of the label
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  icon: Platform.select({
+    ios: {
+      height: 21,
+      width: 13,
+      marginLeft: 8,
+      marginRight: 22,
+      marginVertical: 12,
+      resizeMode: 'contain',
+      transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
+    },
+    default: {
+      height: 24,
+      width: 24,
+      margin: 3,
+      resizeMode: 'contain',
+      transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
+    },
+  }),
+  iconWithLabel:
+    Platform.OS === 'ios'
+      ? {
+          marginRight: 6,
+        }
+      : {},
+  iconMaskContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMaskFillerRect: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  iconMask: {
+    height: 21,
+    width: 13,
+    marginLeft: -14.5,
+    marginVertical: 12,
+    alignSelf: 'center',
+    resizeMode: 'contain',
+    transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/HeaderBackContext.tsx

@@ -0,0 +1,8 @@
+import getNamedContext from '../getNamedContext';
+
+const HeaderBackContext = getNamedContext<{ title: string } | undefined>(
+  'HeaderBackContext',
+  undefined
+);
+
+export default HeaderBackContext;

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/HeaderBackground.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+type Props = Omit<ViewProps, 'style'> & {
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  children?: React.ReactNode;
+};
+
+export default function HeaderBackground({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          borderBottomColor: colors.border,
+          shadowColor: colors.border,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowOpacity: 0.85,
+        shadowRadius: 0,
+        shadowOffset: {
+          width: 0,
+          height: StyleSheet.hairlineWidth,
+        },
+      },
+      default: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+    }),
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/HeaderHeightContext.tsx

@@ -0,0 +1,8 @@
+import getNamedContext from '../getNamedContext';
+
+const HeaderHeightContext = getNamedContext<number | undefined>(
+  'HeaderHeightContext',
+  undefined
+);
+
+export default HeaderHeightContext;

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/HeaderShownContext.tsx

@@ -0,0 +1,5 @@
+import getNamedContext from '../getNamedContext';
+
+const HeaderShownContext = getNamedContext('HeaderShownContext', false);
+
+export default HeaderShownContext;

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/HeaderTitle.tsx

@@ -0,0 +1,51 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextProps,
+  TextStyle,
+} from 'react-native';
+
+type Props = Omit<TextProps, 'style'> & {
+  tintColor?: string;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
+export default function HeaderTitle({ tintColor, style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <Animated.Text
+      accessibilityRole="header"
+      aria-level="1"
+      numberOfLines={1}
+      {...rest}
+      style={[
+        styles.title,
+        { color: tintColor === undefined ? colors.text : tintColor },
+        style,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  title: Platform.select({
+    ios: {
+      fontSize: 17,
+      fontWeight: '600',
+    },
+    android: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    default: {
+      fontSize: 18,
+      fontWeight: '500',
+    },
+  }),
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/getDefaultHeaderHeight.tsx

@@ -0,0 +1,39 @@
+import { Platform } from 'react-native';
+
+import type { Layout } from '../types';
+
+export default function getDefaultHeaderHeight(
+  layout: Layout,
+  modalPresentation: boolean,
+  statusBarHeight: number
+): number {
+  let headerHeight;
+
+  const isLandscape = layout.width > layout.height;
+
+  if (Platform.OS === 'ios') {
+    if (Platform.isPad || Platform.isTV) {
+      if (modalPresentation) {
+        headerHeight = 56;
+      } else {
+        headerHeight = 50;
+      }
+    } else {
+      if (isLandscape) {
+        headerHeight = 32;
+      } else {
+        if (modalPresentation) {
+          headerHeight = 56;
+        } else {
+          headerHeight = 44;
+        }
+      }
+    }
+  } else if (Platform.OS === 'android') {
+    headerHeight = 56;
+  } else {
+    headerHeight = 64;
+  }
+
+  return headerHeight + statusBarHeight;
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/getHeaderTitle.tsx

@@ -0,0 +1,12 @@
+import type { HeaderOptions } from '../types';
+
+export default function getHeaderTitle(
+  options: { title?: string; headerTitle?: HeaderOptions['headerTitle'] },
+  fallback: string
+): string {
+  return typeof options.headerTitle === 'string'
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : fallback;
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Header/useHeaderHeight.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import HeaderHeightContext from './HeaderHeightContext';
+
+export default function useHeaderHeight() {
+  const height = React.useContext(HeaderHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+    );
+  }
+
+  return height;
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/MaskedView.android.tsx

@@ -0,0 +1 @@
+export { default } from './MaskedViewNative';

smart-app-city/frontend/node_modules/@react-navigation/elements/src/MaskedView.ios.tsx

@@ -0,0 +1 @@
+export { default } from './MaskedViewNative';

smart-app-city/frontend/node_modules/@react-navigation/elements/src/MaskedView.tsx

@@ -0,0 +1,13 @@
+/**
+ * Use a stub for MaskedView on all Platforms that don't support it.
+ */
+import type * as React from 'react';
+
+type Props = {
+  maskElement: React.ReactElement;
+  children: React.ReactElement;
+};
+
+export default function MaskedView({ children }: Props) {
+  return children;
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/MaskedViewNative.tsx

@@ -0,0 +1,33 @@
+/**
+ * The native MaskedView that we explicitly re-export for supported platforms: Android, iOS.
+ */
+import * as React from 'react';
+import { UIManager } from 'react-native';
+
+type MaskedViewType =
+  typeof import('@react-native-masked-view/masked-view').default;
+
+type Props = React.ComponentProps<MaskedViewType> & {
+  children: React.ReactElement;
+};
+
+let RNCMaskedView: MaskedViewType | undefined;
+
+try {
+  // Add try/catch to support usage even if it's not installed, since it's optional.
+  // Newer versions of Metro will handle it properly.
+  RNCMaskedView = require('@react-native-masked-view/masked-view').default;
+} catch (e) {
+  // Ignore
+}
+
+const isMaskedViewAvailable =
+  UIManager.getViewManagerConfig('RNCMaskedView') != null;
+
+export default function MaskedView({ children, ...rest }: Props) {
+  if (isMaskedViewAvailable && RNCMaskedView) {
+    return <RNCMaskedView {...rest}>{children}</RNCMaskedView>;
+  }
+
+  return children;
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/MissingIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+
+type Props = {
+  color?: string;
+  size?: number;
+  style?: StyleProp<TextStyle>;
+};
+
+export default function MissingIcon({ color, size, style }: Props) {
+  return <Text style={[styles.icon, { color, fontSize: size }, style]}>⏷</Text>;
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/PlatformPressable.tsx

@@ -0,0 +1,86 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  GestureResponderEvent,
+  Platform,
+  Pressable,
+  PressableProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export type Props = Omit<PressableProps, 'style'> & {
+  pressColor?: string;
+  pressOpacity?: number;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  children: React.ReactNode;
+};
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_SUPPORTS_RIPPLE =
+  Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+/**
+ * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
+ */
+export default function PlatformPressable({
+  onPressIn,
+  onPressOut,
+  android_ripple,
+  pressColor,
+  pressOpacity = 0.3,
+  style,
+  ...rest
+}: Props) {
+  const { dark } = useTheme();
+  const [opacity] = React.useState(() => new Animated.Value(1));
+
+  const animateTo = (toValue: number, duration: number) => {
+    if (ANDROID_SUPPORTS_RIPPLE) {
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressIn = (e: GestureResponderEvent) => {
+    animateTo(pressOpacity, 0);
+    onPressIn?.(e);
+  };
+
+  const handlePressOut = (e: GestureResponderEvent) => {
+    animateTo(1, 200);
+    onPressOut?.(e);
+  };
+
+  return (
+    <AnimatedPressable
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      android_ripple={
+        ANDROID_SUPPORTS_RIPPLE
+          ? {
+              color:
+                pressColor !== undefined
+                  ? pressColor
+                  : dark
+                  ? 'rgba(255, 255, 255, .32)'
+                  : 'rgba(0, 0, 0, .32)',
+              ...android_ripple,
+            }
+          : undefined
+      }
+      style={[{ opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1 }, style]}
+      {...rest}
+    />
+  );
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/ResourceSavingView.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+type Props = {
+  visible: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
+
+export default function ResourceSavingScene({
+  visible,
+  children,
+  style,
+  ...rest
+}: Props) {
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!visible}
+        style={[
+          { display: visible ? 'flex' : 'none' },
+          styles.container,
+          style,
+        ]}
+        pointerEvents={visible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, style]}
+      // box-none doesn't seem to work properly on Android
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      <View
+        collapsable={false}
+        removeClippedSubviews={
+          // On iOS & macOS, set removeClippedSubviews to true only when not focused
+          // This is an workaround for a bug where the clipped view never re-appears
+          Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true
+        }
+        pointerEvents={visible ? 'auto' : 'none'}
+        style={visible ? styles.attached : styles.detached}
+      >
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  attached: {
+    flex: 1,
+  },
+  detached: {
+    flex: 1,
+    top: FAR_FAR_AWAY,
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/SafeAreaProviderCompat.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import {
+  Dimensions,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {
+  initialWindowMetrics,
+  type Metrics,
+  SafeAreaFrameContext,
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const { width = 0, height = 0 } = Dimensions.get('window');
+
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+        frame: { x: 0, y: 0, width, height },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
+    : initialWindowMetrics;
+
+export default function SafeAreaProviderCompat({ children, style }: Props) {
+  const insets = React.useContext(SafeAreaInsetsContext);
+
+  if (insets) {
+    // If we already have insets, don't wrap the stack in another safe area provider
+    // This avoids an issue with updates at the cost of potentially incorrect values
+    // https://github.com/react-navigation/react-navigation/issues/174
+    return <View style={[styles.container, style]}>{children}</View>;
+  }
+
+  if (Platform.OS === 'web') {
+    children = (
+      <SafeAreaFrameProvider initialMetrics={initialMetrics}>
+        {children}
+      </SafeAreaFrameProvider>
+    );
+  }
+
+  return (
+    <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
+      {children}
+    </SafeAreaProvider>
+  );
+}
+
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+const SafeAreaFrameProvider = ({
+  initialMetrics,
+  children,
+}: {
+  initialMetrics: Metrics;
+  children: React.ReactNode;
+}) => {
+  const element = React.useRef<HTMLDivElement>(null);
+  const [frame, setFrame] = React.useState(initialMetrics.frame);
+
+  React.useEffect(() => {
+    if (element.current == null) {
+      return;
+    }
+
+    const rect = element.current.getBoundingClientRect();
+
+    setFrame({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    });
+
+    let timeout: NodeJS.Timeout;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      if (entry) {
+        const { x, y, width, height } = entry.contentRect;
+
+        // Debounce the frame updates to avoid too many updates in a short time
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          setFrame({ x, y, width, height });
+        }, 100);
+      }
+    });
+
+    observer.observe(element.current);
+
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <SafeAreaFrameContext.Provider value={frame}>
+      <div
+        ref={element}
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          pointerEvents: 'none',
+          visibility: 'hidden',
+        }}
+      />
+      {children}
+    </SafeAreaFrameContext.Provider>
+  );
+};
+
+SafeAreaProviderCompat.initialMetrics = initialMetrics;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/Screen.tsx

@@ -0,0 +1,109 @@
+import {
+  NavigationContext,
+  NavigationProp,
+  NavigationRouteContext,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+import Background from './Background';
+import getDefaultHeaderHeight from './Header/getDefaultHeaderHeight';
+import HeaderHeightContext from './Header/HeaderHeightContext';
+import HeaderShownContext from './Header/HeaderShownContext';
+
+type Props = {
+  focused: boolean;
+  modal?: boolean;
+  navigation: NavigationProp<ParamListBase>;
+  route: RouteProp<ParamListBase>;
+  header: React.ReactNode;
+  headerShown?: boolean;
+  headerStatusBarHeight?: number;
+  headerTransparent?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+};
+
+export default function Screen(props: Props) {
+  const dimensions = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+
+  const {
+    focused,
+    modal = false,
+    header,
+    headerShown = true,
+    headerTransparent,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+    navigation,
+    route,
+    children,
+    style,
+  } = props;
+
+  const [headerHeight, setHeaderHeight] = React.useState(() =>
+    getDefaultHeaderHeight(dimensions, modal, headerStatusBarHeight)
+  );
+
+  return (
+    <Background
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[styles.container, style]}
+    >
+      <View style={styles.content}>
+        <HeaderShownContext.Provider
+          value={isParentHeaderShown || headerShown !== false}
+        >
+          <HeaderHeightContext.Provider
+            value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
+          >
+            {children}
+          </HeaderHeightContext.Provider>
+        </HeaderShownContext.Provider>
+      </View>
+      {headerShown ? (
+        <NavigationContext.Provider value={navigation}>
+          <NavigationRouteContext.Provider value={route}>
+            <View
+              onLayout={(e) => {
+                const { height } = e.nativeEvent.layout;
+
+                setHeaderHeight(height);
+              }}
+              style={headerTransparent ? styles.absolute : null}
+            >
+              {header}
+            </View>
+          </NavigationRouteContext.Provider>
+        </NavigationContext.Provider>
+      ) : null}
+    </Background>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+  },
+  // This is necessary to avoid applying 'column-reverse' to screen content
+  content: {
+    flex: 1,
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/elements/src/getNamedContext.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+const contexts = '__react_navigation__elements_contexts';
+
+declare global {
+  var __react_navigation__elements_contexts: Map<string, React.Context<any>>;
+}
+
+// We use a global variable to keep our contexts so that we can reuse same contexts across packages
+global[contexts] = global[contexts] ?? new Map<string, React.Context<any>>();
+
+export default function getNamedContext<T>(
+  name: string,
+  initialValue: T
+): React.Context<T> {
+  let context = global[contexts].get(name);
+
+  if (context) {
+    return context;
+  }
+
+  context = React.createContext<T>(initialValue);
+  context.displayName = name;
+
+  global[contexts].set(name, context);
+
+  return context;
+}

smart-app-city/frontend/node_modules/@react-navigation/elements/src/index.tsx

@@ -0,0 +1,25 @@
+export { default as Background } from './Background';
+export { default as getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
+export { default as getHeaderTitle } from './Header/getHeaderTitle';
+export { default as Header } from './Header/Header';
+export { default as HeaderBackButton } from './Header/HeaderBackButton';
+export { default as HeaderBackContext } from './Header/HeaderBackContext';
+export { default as HeaderBackground } from './Header/HeaderBackground';
+export { default as HeaderHeightContext } from './Header/HeaderHeightContext';
+export { default as HeaderShownContext } from './Header/HeaderShownContext';
+export { default as HeaderTitle } from './Header/HeaderTitle';
+export { default as useHeaderHeight } from './Header/useHeaderHeight';
+export { default as MissingIcon } from './MissingIcon';
+export { default as PlatformPressable } from './PlatformPressable';
+export { default as ResourceSavingView } from './ResourceSavingView';
+export { default as SafeAreaProviderCompat } from './SafeAreaProviderCompat';
+export { default as Screen } from './Screen';
+
+export const Assets = [
+  // eslint-disable-next-line import/no-commonjs
+  require('./assets/back-icon.png'),
+  // eslint-disable-next-line import/no-commonjs
+  require('./assets/back-icon-mask.png'),
+];
+
+export * from './types';

smart-app-city/frontend/node_modules/@react-navigation/elements/src/types.tsx

@@ -0,0 +1,228 @@
+import type {
+  Animated,
+  LayoutChangeEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export type Layout = { width: number; height: number };
+
+export type HeaderOptions = {
+  /**
+   * String or a function that returns a React Element to be used by the header.
+   * Defaults to screen `title` or route name.
+   *
+   * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
+   * The title string is passed in `children`.
+   */
+  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `center` on iOS and `left` on Android.
+   */
+  headerTitleAlign?: 'left' | 'center';
+  /**
+   * Style object for the title component.
+   */
+  headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  /**
+   * Style object for the container of the `headerTitle` element.
+   */
+  headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
+   */
+  headerTitleAllowFontScaling?: boolean;
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   */
+  headerLeft?: (props: {
+    tintColor?: string;
+    pressColor?: string;
+    pressOpacity?: number;
+    labelVisible?: boolean;
+  }) => React.ReactNode;
+  /**
+   * Whether a label is visible in the left button. Used to add extra padding.
+   */
+  headerLeftLabelVisible?: boolean;
+  /**
+   * Style object for the container of the `headerLeft` element`.
+   */
+  headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: (props: {
+    tintColor?: string;
+    pressColor?: string;
+    pressOpacity?: number;
+  }) => React.ReactNode;
+  /**
+   * Style object for the container of the `headerRight` element.
+   */
+  headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  headerPressColor?: string;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  headerPressOpacity?: number;
+  /**
+   * Tint color for the header.
+   */
+  headerTintColor?: string;
+  /**
+   * Function which returns a React Element to render as the background of the header.
+   * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
+   * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
+   */
+  headerBackground?: (props: {
+    style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  }) => React.ReactNode;
+  /**
+   * Style object for the container of the `headerBackground` element.
+   */
+  headerBackgroundContainerStyle?: Animated.WithAnimatedValue<
+    StyleProp<ViewStyle>
+  >;
+  /**
+   * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
+   * The header will also float over the screen so that it overlaps the content underneath.
+   * This is useful if you want to render a semi-transparent header or a blurred background.
+   */
+  headerTransparent?: boolean;
+  /**
+   * Style object for the header. You can specify a custom background color here, for example.
+   */
+  headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
+   *
+   * This is a short-hand for the following styles:
+   *
+   * ```js
+   * {
+   *   elevation: 0,
+   *   shadowOpacity: 0,
+   *   borderBottomWidth: 0,
+   * }
+   * ```
+   *
+   * If the above styles are specified in `headerStyle` along with `headerShadowVisible: false`,
+   * then `headerShadowVisible: false` will take precedence.
+   */
+  headerShadowVisible?: boolean;
+  /**
+   * Extra padding to add at the top of header to account for translucent status bar.
+   * By default, it uses the top value from the safe area insets of the device.
+   * Pass 0 or a custom value to disable the default behaviour, and customize the height.
+   */
+  headerStatusBarHeight?: number;
+};
+
+export type HeaderTitleProps = {
+  /**
+   * The title text of the header.
+   */
+  children: string;
+  /**
+   * Whether title font should scale to respect Text Size accessibility settings.
+   */
+  allowFontScaling?: boolean;
+  /**
+   * Tint color for the header.
+   */
+  tintColor?: string;
+  /**
+   * Callback to trigger when the size of the title element changes.
+   */
+  onLayout?: (e: LayoutChangeEvent) => void;
+  /**
+   * Style object for the title element.
+   */
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
+export type HeaderButtonProps = {
+  /**
+   * Tint color for the header button.
+   */
+  tintColor?: string;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  pressColor?: string;
+  /**
+   * Opacity when the button is pressed, used when ripple is not supported.
+   */
+  pressOpacity?: number;
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
+export type HeaderBackButtonProps = HeaderButtonProps & {
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Callback to call when the button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Function which returns a React Element to display custom image in header's back button.
+   */
+  backImage?: (props: { tintColor: string }) => React.ReactNode;
+  /**
+   * Label text for the button. Usually the title of the previous screen.
+   * By default, this is only shown on iOS.
+   */
+  label?: string;
+  /**
+   * Label text to show when there isn't enough space for the full label.
+   */
+  truncatedLabel?: string;
+  /**
+   * Whether the label text is visible.
+   * Defaults to `true` on iOS and `false` on Android.
+   */
+  labelVisible?: boolean;
+  /**
+   * Style object for the label.
+   */
+  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  allowFontScaling?: boolean;
+  /**
+   * Callback to trigger when the size of the label changes.
+   */
+  onLabelLayout?: (e: LayoutChangeEvent) => void;
+  /**
+   * Layout of the screen.
+   */
+  screenLayout?: Layout;
+  /**
+   * Layout of the title element in the header.
+   */
+  titleLayout?: Layout;
+  /**
+   * Accessibility label for the button for screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * ID to locate this button in tests.
+   */
+  testID?: string;
+  /**
+   * Style object for the button.
+   */
+  style?: StyleProp<ViewStyle>;
+};