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/Chip/Chip.js

@@ -0,0 +1,308 @@
+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, Pressable, View } from 'react-native';
+import useLatestCallback from 'use-latest-callback';
+import { getChipColors } from './helpers';
+import { useInternalTheme } from '../../core/theming';
+import { white } from '../../styles/themes/v2/colors';
+import hasTouchHandler from '../../utils/hasTouchHandler';
+import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import Text from '../Typography/Text';
+/**
+ * Chips are compact elements that can represent inputs, attributes, or actions.
+ * They can have an icon or avatar on the left, and a close button icon on the right.
+ * They are typically used to:
+ * <ul>
+ *  <li>Present multiple options </li>
+ *  <li>Represent attributes active or chosen </li>
+ *  <li>Present filter options </li>
+ *  <li>Trigger actions related to primary content </li>
+ * </ul>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Chip } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Chip = ({
+  mode = 'flat',
+  children,
+  icon,
+  avatar,
+  selected = false,
+  disabled = false,
+  background,
+  accessibilityLabel,
+  accessibilityRole = 'button',
+  closeIconAccessibilityLabel = 'Close',
+  onPress,
+  onLongPress,
+  onPressOut,
+  onPressIn,
+  delayLongPress,
+  onClose,
+  closeIcon,
+  textStyle,
+  style,
+  theme: themeOverrides,
+  testID = 'chip',
+  selectedColor,
+  rippleColor: customRippleColor,
+  showSelectedOverlay = false,
+  showSelectedCheck = true,
+  ellipsizeMode,
+  compact,
+  elevated = false,
+  maxFontSizeMultiplier,
+  hitSlop,
+  ...rest
+}) => {
+  const theme = useInternalTheme(themeOverrides);
+  const {
+    isV3,
+    roundness
+  } = theme;
+  const isWeb = Platform.OS === 'web';
+  const {
+    current: elevation
+  } = React.useRef(new Animated.Value(isV3 && elevated ? 1 : 0));
+  const hasPassedTouchHandler = hasTouchHandler({
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut
+  });
+  const isOutlined = mode === 'outlined';
+  const handlePressIn = useLatestCallback(e => {
+    const {
+      scale
+    } = theme.animation;
+    onPressIn === null || onPressIn === void 0 || onPressIn(e);
+    Animated.timing(elevation, {
+      toValue: isV3 ? elevated ? 2 : 0 : 4,
+      duration: 200 * scale,
+      useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
+    }).start();
+  });
+  const handlePressOut = useLatestCallback(e => {
+    const {
+      scale
+    } = theme.animation;
+    onPressOut === null || onPressOut === void 0 || onPressOut(e);
+    Animated.timing(elevation, {
+      toValue: isV3 && elevated ? 1 : 0,
+      duration: 150 * scale,
+      useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72
+    }).start();
+  });
+  const opacity = isV3 ? 0.38 : 0.26;
+  const defaultBorderRadius = roundness * (isV3 ? 2 : 4);
+  const iconSize = isV3 ? 18 : 16;
+  const {
+    backgroundColor: customBackgroundColor,
+    borderRadius = defaultBorderRadius
+  } = StyleSheet.flatten(style) || {};
+  const {
+    borderColor,
+    textColor,
+    iconColor,
+    rippleColor,
+    selectedBackgroundColor,
+    backgroundColor
+  } = getChipColors({
+    isOutlined,
+    theme,
+    selectedColor,
+    showSelectedOverlay,
+    customBackgroundColor,
+    disabled,
+    customRippleColor
+  });
+  const accessibilityState = {
+    selected,
+    disabled
+  };
+  const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0;
+  const multiplier = isV3 ? compact ? 1.5 : 2 : 1;
+  const labelSpacings = {
+    marginRight: onClose ? 0 : 8 * multiplier,
+    marginLeft: avatar || icon || selected && showSelectedCheck ? 4 * multiplier : 8 * multiplier
+  };
+  const contentSpacings = {
+    paddingRight: isV3 ? onClose ? 34 : 0 : onClose ? 32 : 4
+  };
+  const labelTextStyle = {
+    color: textColor,
+    ...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular)
+  };
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    style: [styles.container, isV3 && styles.md3Container, !theme.isV3 && {
+      elevation: elevationStyle
+    }, {
+      backgroundColor: selected ? selectedBackgroundColor : backgroundColor,
+      borderColor,
+      borderRadius
+    }, style]
+  }, theme.isV3 && {
+    elevation: elevationStyle
+  }, rest, {
+    testID: `${testID}-container`,
+    theme: theme,
+    container: true
+  }), /*#__PURE__*/React.createElement(TouchableRipple, {
+    borderless: true,
+    background: background,
+    style: [{
+      borderRadius
+    }, styles.touchable],
+    onPress: onPress,
+    onLongPress: onLongPress,
+    onPressIn: hasPassedTouchHandler ? handlePressIn : undefined,
+    onPressOut: hasPassedTouchHandler ? handlePressOut : undefined,
+    delayLongPress: delayLongPress,
+    rippleColor: rippleColor,
+    disabled: disabled,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: accessibilityState,
+    testID: testID,
+    theme: theme,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.content, isV3 && styles.md3Content, contentSpacings]
+  }, avatar && !icon ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.avatarWrapper, isV3 && styles.md3AvatarWrapper, disabled && {
+      opacity
+    }]
+  }, /*#__PURE__*/React.isValidElement(avatar) ? /*#__PURE__*/React.cloneElement(avatar, {
+    style: [styles.avatar, avatar.props.style]
+  }) : avatar) : null, icon || selected && showSelectedCheck ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, isV3 && styles.md3Icon, avatar ? [styles.avatar, styles.avatarSelected, isV3 && selected && styles.md3SelectedIcon] : null]
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    source: icon,
+    color: avatar ? white : !disabled && theme.isV3 ? theme.colors.primary : iconColor,
+    size: 18,
+    theme: theme
+  }) : /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
+    name: "check",
+    color: avatar ? white : iconColor,
+    size: 18,
+    direction: "ltr"
+  })) : null, /*#__PURE__*/React.createElement(Text, {
+    variant: "labelLarge",
+    selectable: false,
+    numberOfLines: 1,
+    style: [isV3 ? styles.md3LabelText : styles.labelText, labelTextStyle, labelSpacings, textStyle],
+    ellipsizeMode: ellipsizeMode,
+    maxFontSizeMultiplier: maxFontSizeMultiplier
+  }, children))), onClose ? /*#__PURE__*/React.createElement(View, {
+    style: styles.closeButtonStyle
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onClose,
+    disabled: disabled,
+    accessibilityRole: "button",
+    accessibilityLabel: closeIconAccessibilityLabel
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, styles.closeIcon, isV3 && styles.md3CloseIcon]
+  }, closeIcon ? /*#__PURE__*/React.createElement(Icon, {
+    source: closeIcon,
+    color: iconColor,
+    size: iconSize
+  }) : /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
+    name: isV3 ? 'close' : 'close-circle',
+    size: iconSize,
+    color: iconColor,
+    direction: "ltr"
+  })))) : null);
+};
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderStyle: 'solid',
+    flexDirection: Platform.select({
+      default: 'column',
+      web: 'row'
+    })
+  },
+  md3Container: {
+    borderWidth: 1
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 4,
+    position: 'relative'
+  },
+  md3Content: {
+    paddingLeft: 0
+  },
+  icon: {
+    padding: 4,
+    alignSelf: 'center'
+  },
+  md3Icon: {
+    paddingLeft: 8,
+    paddingRight: 0
+  },
+  closeIcon: {
+    marginRight: 4
+  },
+  md3CloseIcon: {
+    marginRight: 8,
+    padding: 0
+  },
+  labelText: {
+    minHeight: 24,
+    lineHeight: 24,
+    textAlignVertical: 'center',
+    marginVertical: 4
+  },
+  md3LabelText: {
+    textAlignVertical: 'center',
+    marginVertical: 6
+  },
+  avatar: {
+    width: 24,
+    height: 24,
+    borderRadius: 12
+  },
+  avatarWrapper: {
+    marginRight: 4
+  },
+  md3AvatarWrapper: {
+    marginLeft: 4,
+    marginRight: 0
+  },
+  md3SelectedIcon: {
+    paddingLeft: 4
+  },
+  // eslint-disable-next-line react-native/no-color-literals
+  avatarSelected: {
+    position: 'absolute',
+    top: 4,
+    left: 4,
+    backgroundColor: 'rgba(0, 0, 0, .29)'
+  },
+  closeButtonStyle: {
+    position: 'absolute',
+    right: 0,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  touchable: {
+    width: '100%'
+  }
+});
+export default Chip;
+//# sourceMappingURL=Chip.js.map

smart-app-city/frontend/node_modules/react-native-paper/lib/module/components/Chip/helpers.js

@@ -0,0 +1,242 @@
+import color from 'color';
+import { black, white } from '../../styles/themes/v2/colors';
+const getBorderColor = ({
+  theme,
+  isOutlined,
+  disabled,
+  selectedColor,
+  backgroundColor
+}) => {
+  const isSelectedColor = selectedColor !== undefined;
+  if (theme.isV3) {
+    if (!isOutlined) {
+      // If the Chip mode is "flat", set border color to transparent
+      return 'transparent';
+    }
+    if (disabled) {
+      return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
+    }
+    if (isSelectedColor) {
+      return color(selectedColor).alpha(0.29).rgb().string();
+    }
+    return theme.colors.outline;
+  }
+  if (isOutlined) {
+    if (isSelectedColor) {
+      return color(selectedColor).alpha(0.29).rgb().string();
+    }
+    if (theme.dark) {
+      return color(white).alpha(0.29).rgb().string();
+    }
+    return color(black).alpha(0.29).rgb().string();
+  }
+  return backgroundColor;
+};
+const getTextColor = ({
+  theme,
+  isOutlined,
+  disabled,
+  selectedColor
+}) => {
+  const isSelectedColor = selectedColor !== undefined;
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+    if (isSelectedColor) {
+      return selectedColor;
+    }
+    if (isOutlined) {
+      return theme.colors.onSurfaceVariant;
+    }
+    return theme.colors.onSecondaryContainer;
+  }
+  if (disabled) {
+    return theme.colors.disabled;
+  }
+  if (isSelectedColor) {
+    return color(selectedColor).alpha(0.87).rgb().string();
+  }
+  return color(theme.colors.text).alpha(0.87).rgb().string();
+};
+const getDefaultBackgroundColor = ({
+  theme,
+  isOutlined
+}) => {
+  if (theme.isV3) {
+    if (isOutlined) {
+      return theme.colors.surface;
+    }
+    return theme.colors.secondaryContainer;
+  }
+  if (isOutlined) {
+    var _theme$colors;
+    return (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.surface;
+  }
+  if (theme.dark) {
+    return '#383838';
+  }
+  return '#ebebeb';
+};
+const getBackgroundColor = ({
+  theme,
+  isOutlined,
+  disabled,
+  customBackgroundColor
+}) => {
+  if (typeof customBackgroundColor === 'string') {
+    return customBackgroundColor;
+  }
+  if (theme.isV3) {
+    if (disabled) {
+      if (isOutlined) {
+        return 'transparent';
+      }
+      return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
+    }
+  }
+  return getDefaultBackgroundColor({
+    theme,
+    isOutlined
+  });
+};
+const getSelectedBackgroundColor = ({
+  theme,
+  isOutlined,
+  disabled,
+  customBackgroundColor,
+  showSelectedOverlay
+}) => {
+  const backgroundColor = getBackgroundColor({
+    theme,
+    disabled,
+    isOutlined,
+    customBackgroundColor
+  });
+  if (theme.isV3) {
+    if (isOutlined) {
+      if (showSelectedOverlay) {
+        return color(backgroundColor).mix(color(theme.colors.onSurfaceVariant), 0.12).rgb().string();
+      }
+      return color(backgroundColor).mix(color(theme.colors.onSurfaceVariant), 0).rgb().string();
+    }
+    if (showSelectedOverlay) {
+      return color(backgroundColor).mix(color(theme.colors.onSecondaryContainer), 0.12).rgb().string();
+    }
+    return color(backgroundColor).mix(color(theme.colors.onSecondaryContainer), 0).rgb().string();
+  }
+  if (theme.dark) {
+    if (isOutlined) {
+      return color(backgroundColor).lighten(0.2).rgb().string();
+    }
+    return color(backgroundColor).lighten(0.4).rgb().string();
+  }
+  if (isOutlined) {
+    return color(backgroundColor).darken(0.08).rgb().string();
+  }
+  return color(backgroundColor).darken(0.2).rgb().string();
+};
+const getIconColor = ({
+  theme,
+  isOutlined,
+  disabled,
+  selectedColor
+}) => {
+  const isSelectedColor = selectedColor !== undefined;
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+    if (isSelectedColor) {
+      return selectedColor;
+    }
+    if (isOutlined) {
+      return theme.colors.onSurfaceVariant;
+    }
+    return theme.colors.onSecondaryContainer;
+  }
+  if (disabled) {
+    return theme.colors.disabled;
+  }
+  if (isSelectedColor) {
+    return color(selectedColor).alpha(0.54).rgb().string();
+  }
+  return color(theme.colors.text).alpha(0.54).rgb().string();
+};
+const getRippleColor = ({
+  theme,
+  isOutlined,
+  disabled,
+  selectedColor,
+  selectedBackgroundColor,
+  customRippleColor
+}) => {
+  if (customRippleColor) {
+    return customRippleColor;
+  }
+  const isSelectedColor = selectedColor !== undefined;
+  const textColor = getTextColor({
+    theme,
+    disabled,
+    selectedColor,
+    isOutlined
+  });
+  if (theme.isV3) {
+    if (isSelectedColor) {
+      return color(selectedColor).alpha(0.12).rgb().string();
+    }
+    return color(textColor).alpha(0.12).rgb().string();
+  }
+  if (isSelectedColor) {
+    return color(selectedColor).fade(0.5).rgb().string();
+  }
+  return selectedBackgroundColor;
+};
+export const getChipColors = ({
+  isOutlined,
+  theme,
+  selectedColor,
+  showSelectedOverlay,
+  customBackgroundColor,
+  disabled,
+  customRippleColor
+}) => {
+  const baseChipColorProps = {
+    theme,
+    isOutlined,
+    disabled
+  };
+  const backgroundColor = getBackgroundColor({
+    ...baseChipColorProps,
+    customBackgroundColor
+  });
+  const selectedBackgroundColor = getSelectedBackgroundColor({
+    ...baseChipColorProps,
+    customBackgroundColor,
+    showSelectedOverlay
+  });
+  return {
+    borderColor: getBorderColor({
+      ...baseChipColorProps,
+      selectedColor,
+      backgroundColor
+    }),
+    textColor: getTextColor({
+      ...baseChipColorProps,
+      selectedColor
+    }),
+    iconColor: getIconColor({
+      ...baseChipColorProps,
+      selectedColor
+    }),
+    rippleColor: getRippleColor({
+      ...baseChipColorProps,
+      selectedColor,
+      selectedBackgroundColor,
+      customRippleColor
+    }),
+    backgroundColor,
+    selectedBackgroundColor
+  };
+};
+//# sourceMappingURL=helpers.js.map