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-native-paper/lib/module/components/Button/Button.js

@@ -0,0 +1,296 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import * as React from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import color from 'color';
+import { getButtonColors, getButtonTouchableRippleStyle } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import { forwardRef } from '../../utils/forwardRef';
+import hasTouchHandler from '../../utils/hasTouchHandler';
+import { splitStyles } from '../../utils/splitStyles';
+import ActivityIndicator from '../ActivityIndicator';
+import Icon from '../Icon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import Text from '../Typography/Text';
+/**
+ * A button is component that the user can press to trigger an action.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Button } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
+ *     Press me
+ *   </Button>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Button = ({
+  disabled,
+  compact,
+  mode = 'text',
+  dark,
+  loading,
+  icon,
+  buttonColor: customButtonColor,
+  textColor: customTextColor,
+  rippleColor: customRippleColor,
+  children,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = 'button',
+  hitSlop,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  delayLongPress,
+  style,
+  theme: themeOverrides,
+  uppercase: uppercaseProp,
+  contentStyle,
+  labelStyle,
+  testID = 'button',
+  accessible,
+  background,
+  maxFontSizeMultiplier,
+  touchableRef,
+  ...rest
+}, ref) => {
+  var _StyleSheet$flatten;
+  const theme = useInternalTheme(themeOverrides);
+  const isMode = React.useCallback(modeToCompare => {
+    return mode === modeToCompare;
+  }, [mode]);
+  const {
+    roundness,
+    isV3,
+    animation
+  } = theme;
+  const uppercase = uppercaseProp ?? !theme.isV3;
+  const isWeb = Platform.OS === 'web';
+  const hasPassedTouchHandler = hasTouchHandler({
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress
+  });
+  const isElevationEntitled = !disabled && (isV3 ? isMode('elevated') : isMode('contained'));
+  const initialElevation = isV3 ? 1 : 2;
+  const activeElevation = isV3 ? 2 : 8;
+  const {
+    current: elevation
+  } = React.useRef(new Animated.Value(isElevationEntitled ? initialElevation : 0));
+  React.useEffect(() => {
+    // Workaround not to call setValue on Animated.Value, because it breaks styles.
+    // https://github.com/callstack/react-native-paper/issues/4559
+    Animated.timing(elevation, {
+      toValue: isElevationEntitled ? initialElevation : 0,
+      duration: 0,
+      useNativeDriver: true
+    });
+  }, [isElevationEntitled, elevation, initialElevation]);
+  const handlePressIn = e => {
+    onPressIn === null || onPressIn === void 0 || onPressIn(e);
+    if (isV3 ? isMode('elevated') : isMode('contained')) {
+      const {
+        scale
+      } = animation;
+      Animated.timing(elevation, {
+        toValue: activeElevation,
+        duration: 200 * scale,
+        useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
+      }).start();
+    }
+  };
+  const handlePressOut = e => {
+    onPressOut === null || onPressOut === void 0 || onPressOut(e);
+    if (isV3 ? isMode('elevated') : isMode('contained')) {
+      const {
+        scale
+      } = animation;
+      Animated.timing(elevation, {
+        toValue: initialElevation,
+        duration: 150 * scale,
+        useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
+      }).start();
+    }
+  };
+  const flattenedStyles = StyleSheet.flatten(style) || {};
+  const [, borderRadiusStyles] = splitStyles(flattenedStyles, style => style.startsWith('border') && style.endsWith('Radius'));
+  const borderRadius = (isV3 ? 5 : 1) * roundness;
+  const iconSize = isV3 ? 18 : 16;
+  const {
+    backgroundColor,
+    borderColor,
+    textColor,
+    borderWidth
+  } = getButtonColors({
+    customButtonColor,
+    customTextColor,
+    theme,
+    mode,
+    disabled,
+    dark
+  });
+  const rippleColor = customRippleColor || color(textColor).alpha(0.12).rgb().string();
+  const touchableStyle = {
+    ...borderRadiusStyles,
+    borderRadius: borderRadiusStyles.borderRadius ?? borderRadius
+  };
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    ...touchableStyle
+  };
+  const {
+    color: customLabelColor,
+    fontSize: customLabelSize
+  } = StyleSheet.flatten(labelStyle) || {};
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+  const textStyle = {
+    color: textColor,
+    ...font
+  };
+  const iconStyle = ((_StyleSheet$flatten = StyleSheet.flatten(contentStyle)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.flexDirection) === 'row-reverse' ? [styles.iconReverse, isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`], isV3 && isMode('text') && styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`]] : [styles.icon, isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`], isV3 && isMode('text') && styles[`md3IconTextMode${compact ? 'Compact' : ''}`]];
+  return /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
+    ref: ref,
+    testID: `${testID}-container`,
+    style: [styles.button, compact && styles.compact, buttonStyle, style, !isV3 && !disabled && {
+      elevation
+    }]
+  }, isV3 && {
+    elevation: elevation
+  }, {
+    container: true
+  }), /*#__PURE__*/React.createElement(TouchableRipple, {
+    borderless: true,
+    background: background,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    onPressIn: hasPassedTouchHandler ? handlePressIn : undefined,
+    onPressOut: hasPassedTouchHandler ? handlePressOut : undefined,
+    delayLongPress: delayLongPress,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: {
+      disabled
+    },
+    accessible: accessible,
+    hitSlop: hitSlop,
+    disabled: disabled,
+    rippleColor: rippleColor,
+    style: getButtonTouchableRippleStyle(touchableStyle, borderWidth),
+    testID: testID,
+    theme: theme,
+    ref: touchableRef
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.content, contentStyle]
+  }, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {
+    style: iconStyle,
+    testID: `${testID}-icon-container`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: icon,
+    size: customLabelSize ?? iconSize,
+    color: typeof customLabelColor === 'string' ? customLabelColor : textColor
+  })) : null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: customLabelSize ?? iconSize,
+    color: typeof customLabelColor === 'string' ? customLabelColor : textColor,
+    style: iconStyle
+  }) : null, /*#__PURE__*/React.createElement(Text, {
+    variant: "labelLarge",
+    selectable: false,
+    numberOfLines: 1,
+    testID: `${testID}-text`,
+    style: [styles.label, !isV3 && styles.md2Label, isV3 && (isMode('text') ? icon || loading ? styles.md3LabelTextAddons : styles.md3LabelText : styles.md3Label), compact && styles.compactLabel, uppercase && styles.uppercaseLabel, textStyle, labelStyle],
+    maxFontSizeMultiplier: maxFontSizeMultiplier
+  }, children))));
+};
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 64,
+    borderStyle: 'solid'
+  },
+  compact: {
+    minWidth: 'auto'
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    marginLeft: 12,
+    marginRight: -4
+  },
+  iconReverse: {
+    marginRight: 12,
+    marginLeft: -4
+  },
+  /* eslint-disable react-native/no-unused-styles */
+  md3Icon: {
+    marginLeft: 16,
+    marginRight: -16
+  },
+  md3IconCompact: {
+    marginLeft: 8,
+    marginRight: 0
+  },
+  md3IconReverse: {
+    marginLeft: -16,
+    marginRight: 16
+  },
+  md3IconReverseCompact: {
+    marginLeft: 0,
+    marginRight: 8
+  },
+  md3IconTextMode: {
+    marginLeft: 12,
+    marginRight: -8
+  },
+  md3IconTextModeCompact: {
+    marginLeft: 6,
+    marginRight: 0
+  },
+  md3IconReverseTextMode: {
+    marginLeft: -8,
+    marginRight: 12
+  },
+  md3IconReverseTextModeCompact: {
+    marginLeft: 0,
+    marginRight: 6
+  },
+  /* eslint-enable react-native/no-unused-styles */
+  label: {
+    textAlign: 'center',
+    marginVertical: 9,
+    marginHorizontal: 16
+  },
+  md2Label: {
+    letterSpacing: 1
+  },
+  compactLabel: {
+    marginHorizontal: 8
+  },
+  uppercaseLabel: {
+    textTransform: 'uppercase'
+  },
+  md3Label: {
+    marginVertical: 10,
+    marginHorizontal: 24
+  },
+  md3LabelText: {
+    marginHorizontal: 12
+  },
+  md3LabelTextAddons: {
+    marginHorizontal: 16
+  }
+});
+export default forwardRef(Button);
+//# sourceMappingURL=Button.js.map

smart-app-city/frontend/node_modules/react-native-paper/lib/module/components/Button/utils.js

@@ -0,0 +1,185 @@
+import { StyleSheet } from 'react-native';
+import color from 'color';
+import { black, white } from '../../styles/themes/v2/colors';
+import { splitStyles } from '../../utils/splitStyles';
+const isDark = ({
+  dark,
+  backgroundColor
+}) => {
+  if (typeof dark === 'boolean') {
+    return dark;
+  }
+  if (backgroundColor === 'transparent') {
+    return false;
+  }
+  if (backgroundColor !== 'transparent') {
+    return !color(backgroundColor).isLight();
+  }
+  return false;
+};
+const getButtonBackgroundColor = ({
+  isMode,
+  theme,
+  disabled,
+  customButtonColor
+}) => {
+  if (customButtonColor && !disabled) {
+    return customButtonColor;
+  }
+  if (theme.isV3) {
+    if (disabled) {
+      if (isMode('outlined') || isMode('text')) {
+        return 'transparent';
+      }
+      return theme.colors.surfaceDisabled;
+    }
+    if (isMode('elevated')) {
+      return theme.colors.elevation.level1;
+    }
+    if (isMode('contained')) {
+      return theme.colors.primary;
+    }
+    if (isMode('contained-tonal')) {
+      return theme.colors.secondaryContainer;
+    }
+  }
+  if (isMode('contained')) {
+    if (disabled) {
+      return color(theme.dark ? white : black).alpha(0.12).rgb().string();
+    }
+    return theme.colors.primary;
+  }
+  return 'transparent';
+};
+const getButtonTextColor = ({
+  isMode,
+  theme,
+  disabled,
+  customTextColor,
+  backgroundColor,
+  dark
+}) => {
+  if (customTextColor && !disabled) {
+    return customTextColor;
+  }
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+    if (typeof dark === 'boolean') {
+      if (isMode('contained') || isMode('contained-tonal') || isMode('elevated')) {
+        return isDark({
+          dark,
+          backgroundColor
+        }) ? white : black;
+      }
+    }
+    if (isMode('outlined') || isMode('text') || isMode('elevated')) {
+      return theme.colors.primary;
+    }
+    if (isMode('contained')) {
+      return theme.colors.onPrimary;
+    }
+    if (isMode('contained-tonal')) {
+      return theme.colors.onSecondaryContainer;
+    }
+  }
+  if (disabled) {
+    return color(theme.dark ? white : black).alpha(0.32).rgb().string();
+  }
+  if (isMode('contained')) {
+    return isDark({
+      dark,
+      backgroundColor
+    }) ? white : black;
+  }
+  return theme.colors.primary;
+};
+const getButtonBorderColor = ({
+  isMode,
+  disabled,
+  theme
+}) => {
+  if (theme.isV3) {
+    if (disabled && isMode('outlined')) {
+      return theme.colors.surfaceDisabled;
+    }
+    if (isMode('outlined')) {
+      return theme.colors.outline;
+    }
+  }
+  if (isMode('outlined')) {
+    return color(theme.dark ? white : black).alpha(0.29).rgb().string();
+  }
+  return 'transparent';
+};
+const getButtonBorderWidth = ({
+  isMode,
+  theme
+}) => {
+  if (theme.isV3) {
+    if (isMode('outlined')) {
+      return 1;
+    }
+  }
+  if (isMode('outlined')) {
+    return StyleSheet.hairlineWidth;
+  }
+  return 0;
+};
+export const getButtonColors = ({
+  theme,
+  mode,
+  customButtonColor,
+  customTextColor,
+  disabled,
+  dark
+}) => {
+  const isMode = modeToCompare => {
+    return mode === modeToCompare;
+  };
+  const backgroundColor = getButtonBackgroundColor({
+    isMode,
+    theme,
+    disabled,
+    customButtonColor
+  });
+  const textColor = getButtonTextColor({
+    isMode,
+    theme,
+    disabled,
+    customTextColor,
+    backgroundColor,
+    dark
+  });
+  const borderColor = getButtonBorderColor({
+    isMode,
+    theme,
+    disabled
+  });
+  const borderWidth = getButtonBorderWidth({
+    isMode,
+    theme
+  });
+  return {
+    backgroundColor,
+    borderColor,
+    textColor,
+    borderWidth
+  };
+};
+export const getButtonTouchableRippleStyle = (style, borderWidth = 0) => {
+  if (!style) return {};
+  const touchableRippleStyle = {};
+  const [, borderRadiusStyles] = splitStyles(style, style => style.startsWith('border') && style.endsWith('Radius'));
+  Object.keys(borderRadiusStyles).forEach(key => {
+    const value = style[key];
+    if (typeof value === 'number') {
+      // Only subtract borderWidth if value is greater than 0
+      const radius = value > 0 ? value - borderWidth : 0;
+      touchableRippleStyle[key] = radius;
+    }
+  });
+  return touchableRippleStyle;
+};
+//# sourceMappingURL=utils.js.map