feat(smart-app): complete all remaining components, screens, hooks, services, stores, i18n

- i18n/index.ts: i18next setup with FR/EN/ES/DE translations
- constants.ts: app config, sensor types, alert severity, storage keys, refresh intervals
- store/index.ts: barrel export for all stores
- iotStore.ts: full IoT store (6 sensors, 3 zones, 2 alerts) with actions
- notificationStore.ts: notification store (5 mock notifications) with actions
- uiStore.ts: theme/language store + translation maps for 4 languages
- useSensors.ts: sensor filtering by type/zone, alert sensors selector
- useAlerts.ts: active alerts, critical alerts, acknowledge
- useNotifications.ts: notification CRUD operations
- useLocation.ts: GPS location with expo-location, default Fort-de-France
- SensorCard.tsx: full sensor card with status dot, compact mode
- StatsCard.tsx: stats card with icon, value, trend
- AlertCard.tsx: alert card with severity bar, acknowledge button
- ZoneCard.tsx: zone card with color bar, sensor/alert counts
- LineChart.tsx: bar-based line chart with Y-axis labels
- BarChart.tsx: bar chart with value labels
- GaugeChart.tsx: semi-circular gauge with color thresholds
- MapView.tsx: map placeholder with overlay markers
- MarkerPopup.tsx: popup with title, value, status, detail button
- DashboardScreen.tsx: analytics dashboard with gauges + charts
- SensorDetailScreen.tsx: sensor detail with gauge + history chart
- NotificationPrefsScreen.tsx: notification preference toggles (4)
- LayerDetailScreen.tsx: layer detail placeholder
- iot.service.ts: CRUD operations for sensors, zones, alerts
- gis.service.ts: geocoding, POI search, routing

smart-app-city/frontend/src/screens/dashboard/DashboardScreen.tsx

@@ -1,12 +1,73 @@
+// Smart App City — Dashboard Screen (detailed view with charts)
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { Colors, Typography, Spacing, BorderRadius } from '../../../../src/theme/colors';
+import { useIoTStore } from '../../../stores/iotStore';
+import LineChart from '../../charts/LineChart';
+import BarChart from '../../charts/BarChart';
+import GaugeChart from '../../charts/GaugeChart';
+import SectionHeader from '../../common/Header';
+
+type Props = { navigation: NativeStackNavigationProp<any> };
+
+const TEMP_DATA = [
+  { label: '6h', value: 22 }, { label: '8h', value: 23 }, { label: '10h', value: 25 },
+  { label: '12h', value: 27 }, { label: '14h', value: 29 }, { label: '16h', value: 28 },
+  { label: '18h', value: 26 }, { label: '20h', value: 24 },
+];
+
+export default function DashboardScreen({ navigation }: Props) {
+  const sensors = useIoTStore((s) => s.sensors);
 
-const DashboardScreen = () => {
   return (
-    <View>
-      <Text>DashboardScreen</Text>
-    </View>
-  );
-};
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Dashboard Analytics</Text>
+      </View>
 
-export default DashboardScreen;
+      {/* Gauges */}
+      <View style={styles.section}>
+        <SectionHeader title="Vue d'ensemble" />
+        <View style={styles.gaugesRow}>
+          <GaugeChart value={28.3} max={50} label="Température" unit="°C" />
+          <GaugeChart value={72} max={100} label="Humidité" unit="%" />
+          <GaugeChart value={85} max={200} label="Qualité Air" unit="AQI" color={Colors.warning} />
+        </View>
+      </View>
+
+      {/* Line chart */}
+      <View style={styles.section}>
+        <SectionHeader title="Température — 24h" />
+        <LineChart data={TEMP_DATA} color={Colors.ocean[500]} height={160} />
+      </View>
+
+      {/* Bar chart */}
+      <View style={styles.section}>
+        <SectionHeader title="Énergie par zone (kWh)" />
+        <BarChart
+          data={[
+            { label: 'Centre', value: 2340, color: Colors.primary[500] },
+            { label: 'Schoelcher', value: 1890, color: Colors.ocean[500] },
+            { label: 'Nord', value: 3120, color: Colors.indigo[500] },
+          ]}
+          height={140}
+        />
+      </View>
+
+      <View style={{ height: 80 }} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.neutral50 },
+  header: {
+    backgroundColor: Colors.primary[500],
+    paddingTop: 50, paddingBottom: Spacing.base,
+    paddingHorizontal: Spacing.base,
+  },
+  title: { fontSize: Typography.sizes.lg, fontWeight: Typography.weights.bold, color: Colors.white },
+  section: { padding: Spacing.base },
+  gaugesRow: { flexDirection: 'row', justifyContent: 'space-around', marginTop: Spacing.base },
+});